/* ============================================================
   BBCFlash – High-Conversion Streaming Platform
   Dark luxury + gold accent aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@700&display=swap');

:root {
  --bg: #060608;
  --surface: #0c0c10;
  --surface-2: #12121a;
  --surface-3: #1a1a26;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --text: #f0f0f5;
  --text-muted: #8a8a9a;
  --text-dim: #5a5a6a;
  --gold: #f0c000;
  --gold-light: #ffd84d;
  --gold-dark: #c49b00;
  --gold-glow: rgba(240,192,0,0.15);
  --red: #ff3b5c;
  --green: #00d67e;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --container: 1280px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- SPACING SCALE (4px base) -------------------------------
     Every gap/padding/margin in the layout resolves to one of these.
     Don't introduce new magic numbers — pick the nearest step. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- RESPONSIVE LAYOUT TOKENS -------------------------------
     Redefined per breakpoint (see RESPONSIVE blocks at the bottom).
     These are the ONLY things a breakpoint should need to change. */
  --gutter: 28px;        /* page/header/footer horizontal padding — all share it */
  --section-gap: 48px;   /* vertical rhythm between page sections */
  --grid-gap: 18px;      /* video grid gap */
  --card-pad: 24px;      /* .card interior padding */
  --header-h: 64px;      /* drives header height AND logo size — see .brand img */
  --sidebar-w: 268px;
  /* Floating chat launcher footprint (62px button + 22px inset + 6px ring +
     breathing room). Content reserves this so nothing is trapped under it. */
  --fab-clear: 96px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-light); }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; line-height: 1.2; color: var(--text); }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
h3 { font-size: 1.1rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-family: inherit; font-weight: 700; font-size: 14px;
  border: none; cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary, .btn.gold {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: #000;
  box-shadow: 0 0 20px var(--gold-glow), 0 4px 12px rgba(0,0,0,0.3);
}
.btn-primary:hover, .btn.gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(240,192,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--surface-3);
  border-color: var(--border-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-sm { padding: var(--space-2) var(--space-3); font-size: 13px; }
/* Large CTAs carry long labels ("Unlock Premium — From $15/mo", "I am 18 or
   older — Enter") that overflow their container below ~360px, because .btn is
   nowrap. `normal` only permits a wrap, it doesn't force one — wide screens are
   unchanged, narrow ones break to a balanced 2 lines instead of overflowing.
   Kept off .btn/.btn-sm so short labels don't orphan their trailing arrow. */
.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: 16px;
  white-space: normal;
  text-wrap: balance;
}
.btn-block { width: 100%; }

/* pulse animation for main CTA */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 20px var(--gold-glow), 0 4px 12px rgba(0,0,0,0.3); }
  50% { box-shadow: 0 0 40px rgba(240,192,0,0.25), 0 4px 12px rgba(0,0,0,0.3); }
}
.btn-cta {
  animation: ctaPulse 3s ease-in-out infinite;
}
.btn-cta:hover { animation: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,6,8,0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
}

/* 3-column grid for every screen size: left edge | centered logo | right edge.
   Height is ALWAYS var(--header-h) — never min-height/auto. The header box and
   the nav must agree, or the logo escapes the header's bottom border. */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-h);
  padding: 0 var(--gutter);
}
.nav-left  { justify-self: start; display: inline-flex; align-items: center; gap: 10px; }
.nav-right { justify-self: end;   display: inline-flex; align-items: center; gap: 10px; }
.brand     { justify-self: center; }

/* Search trigger — looks like an input on wide screens, collapses to an icon on narrow.
   Always navigates to /search (no inline form, no toggle). */
.search-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px 8px 14px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  width: 280px;
  max-width: 30vw;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), width 0.28s ease;
}
.search-trigger:hover {
  background: var(--surface-3);
  border-color: rgba(240,192,0,0.4);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(240,192,0,0.08);
}
.search-trigger-icon { flex-shrink: 0; color: currentColor; }
.search-trigger-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none; font-weight: 800;
  font-size: 18px; letter-spacing: -0.02em;
}
.brand { gap: 0; }
/* Logo PNG is now tightly cropped to its content (see logo-original.png for the
   uncropped source). */
/* Logo size is DERIVED from the header height (12px of breathing room, 6px top +
   6px bottom) so it is contained by construction at every width — the only thing
   a breakpoint tunes is --header-h. Logo is 1362x782 (1.74:1), so width follows
   height and never threatens the nav's centre track. */
/* No gold glow: the halo (drop-shadow 0 0 14px gold) is gone by request. The dark
   drop-shadow stays — it is separation from the header, not glow, and without it
   the mark's edges muddy against the dark background. */
/* --logo-scale trims the logo WITHOUT touching --header-h, so shrinking it can't
   reintroduce the overflow bug (the header box stays bigger than the mark). */
.brand img {
  height: calc((var(--header-h) - 12px) * var(--logo-scale, 1));
  width: auto;
  max-width: 100%;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Mobile-only icon button (e.g. the search-toggle) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition);
}
.icon-btn:hover { background: var(--surface-3); color: var(--gold); }
.icon-btn:active { transform: scale(0.96); }
.brand span { background: linear-gradient(135deg, #fff 30%, var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.btn-link { padding: 0; background: none; border: none; color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; }
.btn-link:hover { color: var(--text); }

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin: 16px 0;
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  animation: slideDown 0.3s ease;
}
.flash.success {
  background: rgba(0,214,126,0.08);
  border: 1px solid rgba(0,214,126,0.2);
  color: var(--green);
}
.flash.error {
  background: rgba(255,59,92,0.08);
  border: 1px solid rgba(255,59,92,0.2);
  color: var(--red);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 40px 0 24px;
}
.hero-content { max-width: 680px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.eyebrow::before {
  content: '';
  width: 20px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.hero h1 { margin-bottom: 10px; }
.hero .muted { color: var(--text-muted); font-size: 16px; line-height: 1.6; max-width: 540px; }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
/* Section rhythm is bottom-margin ONLY — mixing top+bottom margins made the gap
   between sections depend on which margin won the collapse. Top spacing for the
   first section comes from .page-main's padding. */
.section {
  margin: 0 0 var(--section-gap);
}
.section:last-child { margin-bottom: 0; }

/* Intra-section spacing (header -> grid) is deliberately ~1/3 of --section-gap
   so a section reads as one block and the gap between sections reads as a break. */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.section-header h2 { margin: 0; }
.section-header .muted { color: var(--text-muted); font-size: 14px; margin-top: 2px; }

/* ============================================================
   VIDEO GRID
   ============================================================ */
/* Column count lives HERE and nowhere else — breakpoints are mutually exclusive
   so no width can match two column rules (768 previously matched both the
   3-column and 2-column rule and silently resolved to 2). Gap always comes from
   --grid-gap so it can never drift out of step with the rest of the page. */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* minmax(0, 1fr) so columns can shrink below their intrinsic content width —
   prevents horizontal overflow on narrow phones. */
.grid > * { min-width: 0; }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1099px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 421px) and (max-width: 767px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   VIDEO CARDS
   ============================================================ */
.video-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.video-card:hover {
  transform: translateY(-4px);
  border-color: rgba(240,192,0,0.2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px var(--gold-glow);
}

/* container-type makes the thumb a query container so the badges and the locked
   overlay can size themselves against the CARD, not the viewport. Thumb height
   is always width x 9/16, so cqw units track the available height exactly —
   that's what keeps the overlay from outgrowing short cards at any breakpoint. */
.video-card .thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
  container-type: inline-size;
}
.video-card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.video-card:hover .thumb img {
  transform: scale(1.05);
}

/* Hover preview video */
.hover-preview {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.video-card:hover .hover-preview[style*="display: block"] {
  opacity: 1;
}

.video-card .card-body {
  padding: var(--space-3);
}

.video-card .title {
  font-size: 14px; font-weight: 700; line-height: 1.3;
  color: var(--text);
  margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.video-card .meta {
  font-size: 12px; color: var(--text-dim);
}

/* premium badge on card */
.badge-premium {
  position: absolute; top: 10px; left: 10px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: #000;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 2;
}

/* locked premium overlay */
.video-card.locked .thumb img {
  filter: blur(12px) brightness(0.4);
  transform: scale(1.1);
}
.video-card.locked:hover .thumb img {
  filter: blur(14px) brightness(0.35);
  transform: scale(1.15);
}

/* The overlay stack is sized in cqw (see container-type on .thumb) so its height
   scales with the card instead of being a fixed ~152px that overflowed any thumb
   shorter than that — the overflow was what pushed the lock icon up into the
   corner badges. Clamps keep it identical to the old design on wide cards and
   proportional on narrow ones, so it fits at every viewport and aspect ratio.
   Gap (not margin-bottom) so the stack has one spacing knob. */
.locked-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(4px, 2.2cqw, 10px);
  text-align: center;
  padding: clamp(8px, 4cqw, 20px);
  overflow: hidden;
  z-index: 3;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
}
.locked-overlay .lock-icon {
  width: clamp(28px, 15cqw, 44px);
  height: clamp(28px, 15cqw, 44px);
  flex: none;
  background: rgba(0,0,0,0.5);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(12px, 7cqw, 18px);
}
.locked-overlay .lock-text {
  font-size: clamp(10px, 4cqw, 12px);
  font-weight: 700; line-height: 1.3;
  color: rgba(255,255,255,0.9);
}
.locked-overlay .btn {
  font-size: clamp(10px, 3.6cqw, 12px);
  padding: clamp(5px, 2.2cqw, 8px) clamp(10px, 5cqw, 16px);
}

/* free tag */
.badge-free {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,214,126,0.15);
  border: 1px solid rgba(0,214,126,0.3);
  color: var(--green);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  z-index: 2;
}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
}

/* ============================================================
   FORMS
   ============================================================ */
.field, .textarea, select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit; font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.field:focus, .textarea:focus, select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.textarea { min-height: 120px; resize: vertical; }
select { cursor: pointer; }

.field::placeholder, .textarea::placeholder { color: var(--text-dim); }

label .small, .label-text {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ============================================================
   SUBSCRIPTION / PRICING
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.plan-card {
  position: relative;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  background: var(--surface-2);
  cursor: pointer;
  transition: all var(--transition);
}
.plan-card:hover {
  border-color: var(--border-hover);
  background: var(--surface-3);
}
.plan-card.selected, .plan-card:has(input:checked) {
  border-color: var(--gold);
  background: rgba(240,192,0,0.04);
  box-shadow: 0 0 20px var(--gold-glow);
}
.plan-card input[type="radio"] {
  position: absolute;
  opacity: 0; width: 0; height: 0;
}
.plan-card .plan-name {
  font-weight: 800; font-size: 16px;
  color: var(--text);
}
.plan-card .plan-duration {
  font-size: 13px; color: var(--text-muted);
  margin-top: 2px;
}
.plan-card .plan-price {
  font-size: 24px; font-weight: 800;
  color: var(--gold);
  margin-top: 10px;
}
.plan-card .plan-price span {
  font-size: 14px; color: var(--text-muted); font-weight: 600;
}

/* popular badge */
.plan-card .popular-tag {
  position: absolute; top: -10px; right: 12px;
  background: var(--gold);
  color: #000;
  font-size: 10px; font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   SPLIT LAYOUT
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* ============================================================
   SUPPORT / TICKET SYSTEM
   ============================================================ */
.support-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.ticket-thread {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 520px; overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

.message-bubble {
  max-width: 80%;
  padding: 14px 18px;
  border-radius: 18px;
  position: relative;
  animation: fadeInUp 0.2s ease;
}
.message-bubble.user {
  margin-left: auto;
  background: linear-gradient(135deg, rgba(240,192,0,0.08), rgba(240,192,0,0.03));
  border: 1px solid rgba(240,192,0,0.15);
  border-bottom-right-radius: 6px;
}
.message-bubble.admin {
  margin-right: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
}
.message-meta {
  font-size: 12px; color: var(--text-dim); margin-bottom: 6px;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.badge { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); }
.badge.open { background: rgba(240,192,0,0.1); color: var(--gold); border-color: rgba(240,192,0,0.2); }
.badge.completed { background: rgba(0,214,126,0.1); color: var(--green); border-color: rgba(0,214,126,0.2); }
.badge.closed { background: var(--surface-2); color: var(--text-dim); }

/* ============================================================
   TABLES
   ============================================================ */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
tr:hover td { background: rgba(255,255,255,0.02); }
td a { color: var(--gold); font-weight: 600; }

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
.category-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none; color: var(--text);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.category-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.category-card:hover {
  border-color: rgba(240,192,0,0.2);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.category-card:hover::before { opacity: 1; }
.category-card h3 { margin: 0 0 8px; color: var(--text); }
.category-card .stats { font-size: 13px; color: var(--text-muted); }
.category-card .stats strong { color: var(--gold); }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-wrapper {
  max-width: 440px;
  margin: 60px auto;
}
.auth-wrapper .card { text-align: center; }
.auth-wrapper h1 { margin-bottom: 6px; }
.auth-wrapper .auth-sub { color: var(--text-muted); margin-bottom: 24px; font-size: 15px; }
.auth-wrapper form { display: grid; gap: 14px; text-align: left; }

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
.account-card { max-width: 600px; }
.account-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.account-row:last-child { border-bottom: none; }
.account-label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.account-value { font-size: 15px; font-weight: 700; }
.premium-active { color: var(--green); }
.premium-inactive { color: var(--text-dim); }

/* ============================================================
   ADMIN LAYOUT
   ============================================================ */
.admin-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.admin-nav { display: flex; gap: 8px; flex-wrap: wrap; }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}
.metric-card .metric-value {
  font-size: 32px; font-weight: 800;
  color: var(--gold);
  margin-bottom: 4px;
}
.metric-card .metric-label {
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   ROW HELPERS
   ============================================================ */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.top-cta { font-weight: 700; }

/* ============================================================
   COUNTDOWN / URGENCY BAR
   ============================================================ */
.urgency-bar {
  background: linear-gradient(90deg, rgba(240,192,0,0.12), rgba(255,59,92,0.08));
  border-bottom: 1px solid rgba(240,192,0,0.15);
  padding: var(--space-3) var(--gutter);
  text-align: center;
  font-size: 13px; font-weight: 700;
  color: var(--gold);
  text-wrap: balance;
}
.urgency-bar strong { color: var(--red); }
/* The CTA is one phrase — without this the trailing arrow wraps onto its own
   line at ~390px and reads as an orphan. Applies to any link in the bar. */
.urgency-bar a { white-space: nowrap; }

/* ============================================================
   CTA BANNER (used on home page)
   ============================================================ */
.cta-banner {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(240,192,0,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  margin: 0 0 var(--section-gap);
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 40%, var(--gold-glow), transparent 50%);
  pointer-events: none;
}
/* Diagonal shine sweep across the banner — like a slow mirror reflection. */
.cta-banner::after {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 60%; height: 200%;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.04) 45%,
    rgba(255,235,170,0.14) 50%,
    rgba(255,255,255,0.04) 55%,
    transparent 65%,
    transparent 100%);
  transform: translateX(-30%) rotate(8deg);
  animation: cta-shine-sweep 7s cubic-bezier(0.55, 0.05, 0.45, 1) infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes cta-shine-sweep {
  0%   { transform: translateX(-30%) rotate(8deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(380%) rotate(8deg); opacity: 0; }
}
/* Very subtle float of the inner content — gentle "alive" feel, not distracting. */
.cta-banner h2,
.cta-banner p,
.cta-banner .btn-cta {
  animation: cta-float-subtle 6.5s ease-in-out infinite;
  will-change: transform;
}
.cta-banner h2  { animation-delay: 0s;    }
.cta-banner p   { animation-delay: -1.6s; }
.cta-banner .btn-cta { animation-delay: -3.2s; }
@keyframes cta-float-subtle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* Accessibility: respect users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .cta-banner::after { animation: none; opacity: 0; }
  .cta-banner h2, .cta-banner p, .cta-banner .btn-cta { animation: none; }
}
.cta-banner h2 { position: relative; margin-bottom: 10px; }
.cta-banner p { position: relative; color: var(--text-muted); margin-bottom: 20px; max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-banner .btn { position: relative; }

/* ============================================================
   SOCIAL PROOF STRIP
   ============================================================ */
.proof-strip {
  display: flex; justify-content: center; gap: var(--space-7); flex-wrap: wrap;
  padding: var(--space-4) 0;
  margin: 0 0 var(--section-gap);
}
.proof-item {
  text-align: center;
}
.proof-item .proof-num {
  font-size: 28px; font-weight: 800; color: var(--gold);
}
.proof-item .proof-label {
  font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}
.empty-state p { margin-bottom: 16px; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in { animation: fadeIn 0.4s ease; }

/* stagger children */
.stagger > * {
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.2s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.3s; }
.stagger > *:nth-child(7) { animation-delay: 0.35s; }
.stagger > *:nth-child(8) { animation-delay: 0.4s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* .nav / .card / .section / .cta-banner spacing is NOT repeated here — it comes
   from the responsive tokens at the bottom of this file. Only rules with no
   token equivalent belong in a breakpoint. */
@media (max-width: 768px) {
  .hero { padding: var(--space-5) 0 var(--space-4); }
  .hero h1 { font-size: 1.6rem; }
  .split { gap: var(--space-4); }
  .proof-strip { gap: var(--space-5); }
  table { font-size: 13px; }
  th, td { padding: var(--space-3) var(--space-2); }
}

@media (max-width: 480px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ============================================================
   FOCUS
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all 0.3s ease;
}
.testimonial-card:hover {
  border-color: rgba(240,192,0,0.15);
  transform: translateY(-2px);
}
.testimonial-stars {
  color: var(--gold);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.testimonial-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 16px;
  font-style: italic;
}
.testimonial-author {
  display: flex; align-items: center; gap: 12px;
}
.testimonial-avatar {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #000;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
}

/* ============================================================
   COUNTDOWN TIMER
   ============================================================ */
.countdown-bar {
  background: linear-gradient(135deg, rgba(255,59,92,0.08), rgba(240,192,0,0.08));
  border: 1px solid rgba(255,59,92,0.15);
  border-radius: var(--radius-lg);
  padding: 16px 24px;
  margin-bottom: 24px;
}
.countdown-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  font-size: 15px; font-weight: 700;
  color: var(--text);
}
.countdown-timer {
  display: flex; align-items: center; gap: 4px;
}
.cd-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  min-width: 60px;
}
.cd-block span {
  display: block;
  font-size: 24px; font-weight: 800;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.cd-block small {
  font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.cd-sep {
  font-size: 24px; font-weight: 800; color: var(--text-dim);
}

/* ============================================================
   EMAIL CAPTURE POPUP
   ============================================================ */
.email-popup {
  position: fixed; inset: 0;
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.3s ease;
}
.email-popup-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.email-popup-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  max-width: 460px; width: 90%;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 60px var(--gold-glow);
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.email-popup-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px;
  transition: all var(--transition);
}
.email-popup-close:hover {
  background: var(--surface-3); color: var(--text);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   REFERRAL PAGE
   ============================================================ */
.referral-link-box {
  display: flex; gap: 10px; align-items: center;
}
.referral-link-box .field {
  flex: 1;
  background: var(--surface-2);
  font-family: monospace;
  font-size: 13px;
}

.referral-steps {
  display: grid; gap: 14px;
}
.ref-step {
  display: flex; align-items: flex-start; gap: 14px;
}
.ref-step-num {
  width: 36px; height: 36px;
  background: var(--gold-glow);
  border: 1px solid rgba(240,192,0,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  color: var(--gold);
  flex-shrink: 0;
}

.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ref-stat {
  text-align: center;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ref-stat-num {
  font-size: 28px; font-weight: 800; color: var(--text);
}
.ref-stat-label {
  font-size: 12px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; margin-top: 2px;
}

/* ============================================================
   TRUST SIGNALS
   ============================================================ */
.trust-signals {
  display: flex; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted); font-weight: 600;
}

/* ============================================================
   PLAN SAVINGS LINE
   ============================================================ */
.plan-savings {
  font-size: 12px;
  color: var(--green);
  font-weight: 700;
  margin-top: 4px;
}

/* ============================================================
   SEARCH PAGE INLINE BAR
   ============================================================ */
.search-bar-inline { margin-bottom: var(--space-4); }
.search-inline-form {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.search-inline-form .field { flex: 1; min-width: 200px; }

.pagination {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  margin: 24px 0;
}

/* ============================================================
   WATCH PAGE LAYOUT
   ============================================================ */
.watch-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  margin-top: 16px;
}

.watch-player {
  position: relative;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.watch-player video {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  background: #000;
}

.watch-locked {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
}
.watch-locked img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(24px) brightness(0.25);
  transform: scale(1.1);
}
.watch-locked-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}

.watch-info {
  padding: 18px 0;
}
.watch-meta {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 6px;
}

/* RELATED VIDEOS SIDEBAR */
.watch-sidebar {
  position: sticky; top: calc(var(--header-h) + 40px);
  align-self: start;
}

.related-list {
  display: flex; flex-direction: column; gap: 12px;
}
.related-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
  text-decoration: none; color: var(--text);
  padding: 6px;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.related-card:hover { background: var(--surface-2); }

.related-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.related-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.related-lock {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6);
  font-size: 20px;
}

.related-title {
  font-size: 13px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
}
.related-meta {
  font-size: 12px; color: var(--text-dim); margin-top: 3px;
}

/* ============================================================
   MOBILE HAMBURGER
   ============================================================ */
/* 44x44 minimum — this is the only control that opens the sidebar on touch,
   and at 38x30 it was under the tap-target floor. */
.hamburger {
  display: none;
  flex-direction: column; gap: var(--space-1);
  align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: none;
  padding: var(--space-2); cursor: pointer;
  z-index: 10;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.2s ease;
}

/* ============================================================
   RESPONSIVE: TABLET
   ============================================================ */
@media (max-width: 1024px) {
  .watch-layout {
    grid-template-columns: 1fr;
  }
  .watch-sidebar {
    position: static;
  }
  .related-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  .related-card {
    grid-template-columns: 120px 1fr;
  }
}

/* ============================================================
   RESPONSIVE: MOBILE
   ============================================================ */
@media (max-width: 768px) {
  /* Hard overflow guard — anything beyond the viewport gets clipped. */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .page-main { max-width: 100vw; overflow-x: hidden; }
  .container-fluid { max-width: 100vw; }

  /* Search icon removed on mobile — duplicates the Search entry in the sidebar,
     and the trigger is a 280px input that can't collapse to fit. */
  .search-trigger { display: none; }
  /* Login/Account stays in the nav. It used to hide here to make room for the
     Premium pill, which left the right slot empty and login two taps deep
     behind the hamburger — on a signup-driven site that's the wrong thing to
     bury. Removing the pill freed the room: worst case (320px, "Account")
     needs ~240px of 296px available. */

  .cta-banner h2 { font-size: 22px; }

  /* Layout */
  .hero { padding: var(--space-5) 0 var(--space-3); }
  .hero h1 { font-size: 1.4rem; }
  .split { grid-template-columns: 1fr; }

  /* Watch page */
  .watch-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .watch-player video { border-radius: 8px; }
  .related-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .related-card {
    grid-template-columns: 1fr;
  }
  .related-thumb { aspect-ratio: 16/9; }
  .related-info { padding: var(--space-1) 0; }

  /* Tables scroll */
  .card:has(table) { overflow-x: auto; }
  table { min-width: 500px; }

  /* Proof strip */
  .proof-strip { gap: var(--space-4); }
  .proof-item .proof-num { font-size: 22px; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Countdown */
  .countdown-inner { flex-direction: column; gap: var(--space-2); }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr 1fr; }

  /* Search bar */
  .search-inline-form { flex-direction: column; }
  .search-inline-form .field { max-width: 100% !important; }

  .urgency-bar { font-size: 12px; }
}

/* ============================================================
   RESPONSIVE: SMALL PHONES
   ============================================================ */
@media (max-width: 420px) {
  .related-list { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .referral-stats { grid-template-columns: 1fr; }
  .proof-strip { flex-direction: column; gap: var(--space-3); }
}



/* ============================================================
   YOUTUBE-STYLE TAGS BAR
   ============================================================ */
.tags-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0;
  margin-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tags-bar::-webkit-scrollbar { display: none; }

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
  flex-shrink: 0;
}
.tag-chip:hover {
  background: var(--surface-3);
  border-color: var(--border-hover);
  color: var(--text);
}
.tag-chip.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

@media (max-width: 768px) {
  .tags-bar {
    padding: 10px 0;
    gap: 6px;
  }
  .tag-chip {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ============================================================
   SORT TABS
   ============================================================ */
.sort-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 16px;
  margin-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sort-tabs::-webkit-scrollbar { display: none; }

.sort-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
  flex-shrink: 0;
}
.sort-tab:hover {
  background: var(--surface-2);
  border-color: var(--border-hover);
  color: var(--text);
}
.sort-tab.active {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #000;
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
}

@media (max-width: 768px) {
  .sort-tabs { gap: 4px; padding-bottom: 12px; }
  .sort-tab { padding: 8px 12px; font-size: 13px; }
}

/* ============================================================
   VIDEO CARD ENHANCEMENTS
   ============================================================ */

/* HOT badge — top right */
.badge-hot {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #ff3b5c, #ff6b3b);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(255,59,92,0.4);
  z-index: 2;
  animation: hotPulse 2s ease-in-out infinite;
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(255,59,92,0.4); }
  50% { box-shadow: 0 4px 20px rgba(255,59,92,0.6); }
}

/* Thumbnail stats bar — bottom left */
.thumb-stats {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.thumb-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(255,255,255,0.9);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Duration badge — bottom right */
.badge-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  z-index: 2;
  letter-spacing: 0.03em;
}

/* Category pill + meta row */
.card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.category-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
}
.card-meta-row .meta {
  font-size: 11px;
  color: var(--text-dim);
}

/* A locked card's overlay already says "Premium Content", so every corner badge
   is redundant there — and a badge that isn't rendered can't collide with the
   overlay stack. .badge-premium was missing from this list, which is why the
   lock icon and the gold PREMIUM pill fought over the top-left corner. */
.video-card.locked .thumb-stats,
.video-card.locked .badge-hot,
.video-card.locked .badge-premium,
.video-card.locked .badge-duration {
  display: none;
}

/* Bottom corners: views+likes (left) and duration (right) are independently
   positioned, so on a narrow card they grow toward each other and touch —
   worst case (12.3M / 123.4K / 1:23:45) needs ~226px of thumb. Below that,
   drop the likes pill; views + duration always fit. Same class of bug as the
   overlay, so it gets the same container-driven fix rather than a breakpoint. */
@container (max-width: 240px) {
  .thumb-stat:nth-child(2) { display: none; }
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 32px 0 16px;
  flex-wrap: wrap;
}
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
}
.page-link:hover {
  background: var(--surface-2);
  border-color: var(--border-hover);
  color: var(--text);
}
.page-link.active {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #000;
  border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
  cursor: default;
}
.page-link.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.page-link.page-ellipsis {
  background: transparent;
  border-color: transparent;
  cursor: default;
  min-width: 30px;
}
.page-link.page-arrow {
  font-size: 16px;
  font-weight: 800;
}

@media (max-width: 768px) {
  .pagination { gap: 4px; margin: 24px 0 12px; }
  .page-link { min-width: 36px; height: 36px; font-size: 13px; }
}

/* ============================================================
   ADMIN PANEL STYLES
   ============================================================ */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  transition: border-color var(--transition);
}
.metric-card:hover { border-color: var(--border-hover); }
.metric-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.2;
}
.metric-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.admin-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.account-row:last-child { border-bottom: none; }
.account-label { color: var(--text-muted); font-weight: 600; }
.account-value { font-weight: 700; color: var(--text); }

@media (max-width: 768px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-value { font-size: 22px; }
  .admin-nav { gap: 4px; }
  .admin-nav .btn { padding: 6px 10px; font-size: 12px; }
}

/* ============================================================
   HEADER HIDE-ON-SCROLL
   Only .site-header is sticky (urgency-bar scrolls off naturally),
   so we only translate the sticky element.
   ============================================================ */
.site-header {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.header-hidden .site-header {
  transform: translateY(-100%);
}
.at-top .site-header {
  transform: translateY(0);
}

/* ============================================================
   REACTION BAR (Like / Dislike / Super on watch page)
   ============================================================ */
.reaction-bar {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all var(--transition);
  line-height: 1;
}
.reaction-btn:hover {
  background: var(--surface-3);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.reaction-btn .reaction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color var(--transition), transform var(--transition);
}
.reaction-btn:hover .reaction-icon { transform: scale(1.08); }
.reaction-btn .reaction-count {
  color: var(--text-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}
.reaction-btn.is-active { border-color: transparent; }
.reaction-btn.is-active .reaction-count,
.reaction-btn.is-active .reaction-label,
.reaction-btn.is-active .reaction-icon { color: inherit; }

/* Active states — distinct color per reaction type */
.reaction-btn.reaction-like.is-active {
  background: linear-gradient(135deg, rgba(0,214,126,0.18), rgba(0,214,126,0.08));
  color: var(--green);
  box-shadow: 0 0 0 1px rgba(0,214,126,0.35), 0 4px 14px rgba(0,214,126,0.15);
}
.reaction-btn.reaction-dislike.is-active {
  background: linear-gradient(135deg, rgba(255,59,92,0.18), rgba(255,59,92,0.08));
  color: var(--red);
  box-shadow: 0 0 0 1px rgba(255,59,92,0.35), 0 4px 14px rgba(255,59,92,0.15);
}
.reaction-btn.reaction-super.is-active {
  background: linear-gradient(135deg, rgba(240,192,0,0.22), rgba(240,192,0,0.08));
  color: var(--gold);
  box-shadow: 0 0 0 1px rgba(240,192,0,0.4), 0 4px 14px var(--gold-glow);
}

/* Click pulse */
@keyframes reaction-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.reaction-btn.is-pulsing .reaction-icon {
  animation: reaction-pulse 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile: tighter spacing, slightly smaller buttons */
@media (max-width: 600px) {
  .reaction-bar { gap: 8px; margin-top: 14px; }
  .reaction-btn { padding: 9px 14px; font-size: 13px; }
  .reaction-btn .reaction-icon svg { width: 18px; height: 18px; }
}
/* DEV-MARKER-1779648584 */

/* ============================================================
   18+ AGE GATE — full-screen consent overlay
   Server-rendered when no bbc_age_ok cookie exists; JS removes it
   after the user confirms and sets the cookie for 365 days.
   ============================================================ */
body.age-locked { overflow: hidden; }
.age-gate {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6,6,8,0.85);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  animation: age-gate-fade-in 0.28s ease;
}
.age-gate.closing { animation: age-gate-fade-out 0.24s ease forwards; }
@keyframes age-gate-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes age-gate-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.age-gate-card {
  max-width: 520px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  animation: age-gate-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes age-gate-pop {
  from { transform: scale(0.92) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.age-gate-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 14px;
}
.age-gate-card h2 {
  font-size: 26px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #fff 30%, var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.age-gate-card p {
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 12px;
  font-size: 15px;
}
.age-gate-card strong { color: var(--text); }
.age-gate-fineprint {
  font-size: 13px;
  color: var(--text-dim);
}
.age-gate-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin: 22px 0 16px;
}
.age-gate-actions .btn { width: 100%; }
.age-gate-legal {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 12px;
  margin-bottom: 0;
}
.age-gate-legal a { color: var(--text-muted); text-decoration: underline; }
@media (max-width: 480px) {
  .age-gate-card { padding: 28px 22px; }
  .age-gate-card h2 { font-size: 22px; }
}

/* ============================================================
   DISCOUNT / PRICING UI
   ============================================================ */
.discount-tag {
  position: absolute; top: 12px; right: 12px;
  background: linear-gradient(135deg, var(--red), #ff7a5b);
  color: #fff;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255,89,90,0.4);
}
.plan-card { position: relative; }
.plan-price-was {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}
.plan-price-was s { color: var(--text-dim); }
.plan-monthly {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 600;
}
.plan-savings {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--green);
  background: rgba(0,200,140,0.1);
  padding: 3px 9px;
  border-radius: 999px;
}

/* Home top CTA price block */
.cta-price {
  position: relative;
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin: 8px 0 18px;
  padding: 10px 18px;
  background: rgba(255,89,90,0.06);
  border: 1px solid rgba(255,89,90,0.18);
  border-radius: 14px;
}
.cta-price-was { color: var(--text-dim); font-size: 16px; font-weight: 600; }
.cta-price-now {
  font-size: 28px; font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.cta-price-period { font-size: 14px; color: var(--text-muted); font-weight: 600; margin-left: 2px; }
.cta-price-tag {
  background: linear-gradient(135deg, var(--red), #ff7a5b);
  color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.discount-flag { color: var(--gold); }

/* ============================================================
   SMOOTH PAGE TRANSITIONS (cross-document view transitions)
   Chromium 126+ / Safari TP — graceful no-op on unsupported browsers.
   Combines with the existing .fade-in animation on .page-main.
   ============================================================ */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   PAGE SHELL — sidebar + main column layout
   ============================================================ */
.page-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  align-items: start;
  /* dvh, not vh: on mobile 100vh includes the browser chrome, which forced an
     unreachable overscroll on every short page. */
  min-height: calc(100dvh - var(--header-h));
}
.page-sidebar {
  position: sticky;
  top: var(--header-h);
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--border);
  background: rgba(8,8,12,0.55);
  padding: var(--space-4) var(--space-3) var(--space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.page-sidebar::-webkit-scrollbar { width: 8px; }
.page-sidebar::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
/* The shell has a min-height of one viewport, but align-items:start meant .page-main
   never grew into it. Since the footer lives INSIDE .page-main, any page shorter than
   the viewport (account, referral, search-with-no-results...) ended with the footer
   floating mid-page above a tall band of dead space. Stretching main and pushing the
   footer down with margin-top:auto is the standard sticky-footer fix: on short pages
   the footer sits at the bottom of the screen, on long pages nothing changes. */
.page-main {
  min-width: 0;  /* prevents grid blowout on long video titles */
  padding: var(--space-5) 0 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.container-fluid {
  max-width: 1440px;
  width: 100%;
  padding: 0 var(--gutter);
  margin: 0 auto;
}
/* The footer reserves the chat launcher's fixed footprint as bottom padding.
   The launcher floats over the bottom-right corner of the viewport, so without
   this the last thing on the page (and its links) sits under it permanently at
   full scroll with no way to move it out. */
.page-footer {
  border-top: 1px solid var(--border);
  /* auto eats the leftover height on short pages so the footer lands at the bottom
     of the screen instead of stranding dead space under it. padding-top carries the
     content separation that margin-top used to, since auto collapses to 0 on long pages. */
  margin-top: auto;
  padding: var(--section-gap) var(--gutter) calc(var(--space-5) + var(--fab-clear));
  text-align: center;
}
.page-footer p { color: var(--text-dim); font-size: 13px; }

/* Log out is deliberately quiet and set apart from the account actions above it,
   so it reads as an exit rather than another thing to click. */
.account-logout {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* Logout must be a <button> in a POST form, but it sits among <a class="side-link">
   siblings — this makes the button match them exactly. */
.side-link-btn {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ============================================================
   SIDEBAR — content
   ============================================================ */
.side-nav { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.side-section { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.side-section + .side-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.side-heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 10px 8px;
}
.side-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition);
}
.side-link:hover { background: var(--surface-2); color: var(--text); }
.side-link.active { background: var(--surface-2); color: var(--gold); }
/* SVG icons inside .side-icon — single stroke, currentColor so they pick up
   the parent link's state (muted / hover / active gold) automatically. */
.side-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--text-dim);
  transition: color var(--transition);
}
.side-icon svg { width: 20px; height: 20px; }
.side-link:hover .side-icon { color: var(--gold); }
.side-link.active .side-icon { color: var(--gold); }
.side-link-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-group { display: flex; flex-direction: column; }
.side-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  background: none; border: none;
  color: var(--text-muted); font: inherit; font-weight: 600;
  cursor: pointer;
  text-align: left;
  border-radius: 10px;
  width: 100%;
  transition: all var(--transition);
}
.side-group-toggle:hover { background: var(--surface-2); color: var(--text); }
.side-group-toggle.active { color: var(--gold); }
.side-group-name { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.side-group-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-meta { display: inline-flex; align-items: center; gap: 8px; }
.side-count {
  font-size: 11px; font-weight: 700;
  color: var(--text-dim);
  background: var(--surface-2);
  padding: 1px 7px;
  border-radius: 999px;
}
.side-caret { font-size: 10px; color: var(--text-dim); transition: transform 0.2s ease; display: inline-block; }
.side-group.open .side-caret { transform: rotate(0deg); }
.side-group:not(.open) .side-caret { transform: rotate(-90deg); }
.side-subnav {
  display: flex; flex-direction: column; gap: 1px;
  padding: 2px 0 4px 14px;
  border-left: 1px dashed var(--border);
  margin-left: 19px;
}
.side-sublink {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  border-radius: 8px;
  transition: all var(--transition);
}
.side-sublink:hover { background: var(--surface-2); color: var(--text); }
.side-sublink.active { color: var(--gold); background: var(--surface-2); }
.side-sublink .side-count { font-size: 10px; padding: 0 6px; margin-left: auto; }
.side-subicon { color: var(--text-dim); width: 16px; text-align: center; font-size: 12px; }

/* ============================================================
   TOP HEADER REVISIONS — slim, search-forward
   ============================================================ */
.header-actions { display: inline-flex; align-items: center; gap: var(--space-3); }
.header-link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600; font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: color var(--transition);
}
.header-link:hover { color: var(--text); }

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-page { padding: 24px 0 60px; }
.search-hero {
  text-align: center;
  padding: 36px 20px 28px;
  background: linear-gradient(180deg, rgba(240,192,0,0.04), transparent 80%);
  border-radius: var(--radius-xl);
  margin-bottom: 28px;
}
.search-hero-title {
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: 22px;
  background: linear-gradient(135deg, #fff 30%, var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.search-hero-form {
  display: flex; align-items: center; gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px 6px 18px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-hero-form:focus-within {
  border-color: rgba(240,192,0,0.6);
  box-shadow: 0 0 0 4px rgba(240,192,0,0.14);
}
.search-hero-icon { color: var(--text-dim); display: inline-flex; }
.search-hero-input {
  flex: 1;
  background: none; border: none; outline: none;
  color: var(--text);
  font-family: inherit; font-size: 18px;
  padding: 12px 0;
}
.search-hero-input::placeholder { color: var(--text-dim); }
.search-meta {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.search-meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--text);
}
.search-meta-pill.tag-pill { background: rgba(240,192,0,0.08); border-color: rgba(240,192,0,0.3); color: var(--gold); }
.search-meta-clear { color: inherit; text-decoration: none; opacity: 0.7; margin-left: 4px; }
.search-meta-clear:hover { opacity: 1; }
.search-meta-count { color: var(--text-muted); font-size: 13px; }
.search-meta-clear-all { color: var(--text-dim); font-size: 12px; text-decoration: underline; }
.search-meta-clear-all:hover { color: var(--text); }

.search-suggestions { margin: 8px 0 24px; }
.search-suggestions-label {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.search-suggestions-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tag-chip-search {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition);
}
.tag-chip-search:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: rgba(240,192,0,0.3);
}
.tag-chip-search.active {
  background: rgba(240,192,0,0.12);
  color: var(--gold);
  border-color: rgba(240,192,0,0.45);
}
.tag-chip-hash { color: var(--text-dim); font-weight: 800; }
.tag-chip-count {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
}
.tag-chip-search.active .tag-chip-count { background: rgba(240,192,0,0.18); color: var(--gold); }

.search-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.search-empty-emoji { font-size: 56px; line-height: 1; margin-bottom: 14px; }
.search-empty h3 { margin-bottom: 8px; font-size: 22px; }

/* ============================================================
   DRAWER BACKDROP (used by sidebar drawer on mobile)
   ============================================================ */
/* Must sit above the sticky header (z 100) or the header stays live and tappable
   behind the drawer's scrim; the sidebar itself sits above the backdrop. */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 110;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }

/* ============================================================
   RESPONSIVE — the ONLY thing these blocks should do is retune the
   layout tokens. If a breakpoint needs a new magic number, the token
   set is wrong. Order matters: later blocks win.
   ============================================================ */

/* TABLET — sidebar narrows, gutters tighten */
@media (max-width: 1100px) {
  :root {
    --sidebar-w: 232px;
    --gutter: 20px;
  }
}

/* MOBILE SHELL — sidebar becomes a slide-in drawer.
   The hamburger MUST appear at the same width the sidebar goes off-canvas: it
   used to appear only at 768, so from 769-900 the sidebar was hidden with no
   control to open it and the whole nav was unreachable. */
@media (max-width: 900px) {
  :root {
    --gutter: 16px;
    --section-gap: 32px;
    --grid-gap: 12px;
    --card-pad: 18px;
    --header-h: 84px;
    /* Logo runs 15% smaller than the header allows on touch widths (by request).
       Cascades to the narrower breakpoints below: 61px @<=900, 54px @<=390, 48px @<=320. */
    --logo-scale: .85;
  }
  .hamburger { display: flex; }
  .page-shell {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .page-main { width: 100%; max-width: 100vw; padding-top: var(--space-4); }
  .section, .cta-banner { max-width: 100%; box-sizing: border-box; }
  .page-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 86%; max-width: 320px;
    height: 100dvh;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border-right: 1px solid var(--border);
    background: var(--bg);
    padding-top: var(--space-5);
  }
  .page-sidebar.open { transform: translateX(0); box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
  .cta-banner { padding: var(--space-5) var(--space-4); }
  /* "See all ->" is a real nav control on touch but .btn-sm is only ~34px tall.
     Scoped to the section header so the card overlay's Unlock pill (which is
     sized to the thumb) and the admin toolbars keep their density. */
  .section-header .btn-sm { min-height: 44px; }
}

@media (max-width: 600px) {
  .search-hero { padding: var(--space-6) var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
  .search-hero-input { font-size: 16px; padding: var(--space-3) 0; }
  .search-hero-form { padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3); }
  .search-hero-form .btn { padding: var(--space-2) var(--space-3); font-size: 13px; }
}

/* SMALL PHONES — logo follows --header-h down automatically */
@media (max-width: 420px) {
  :root { --gutter: 14px; --header-h: 76px; }
}
@media (max-width: 360px) {
  :root { --gutter: 12px; --header-h: 68px; }
}

/* LANDSCAPE PHONE — width is plentiful, height is not. A 84px header would eat
   a fifth of the viewport, so fall back to the desktop header height (the logo
   is legible at 52px on desktop, so it is legible here). Last block: wins over
   the max-width rules above, which a 844x390 phone also matches. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --header-h: 64px; --section-gap: 32px; }
}