/* ============================================================
   NOTIBLOG.NET — Hoja de estilos maestra
   Plataforma: KVS (Kernel Video Sharing)
   Motor: Smarty templates (.tpl)
   Tema: Dark mode premium con calidez latinoamericana
   Fuentes: Plus Jakarta Sans (títulos) + DM Sans (cuerpo)
   Última actualización: 2026-03-24
   ============================================================ */

/* ============================================================
   1. FUENTES — cargadas async desde include_header_general.tpl
      via <link rel="preload" as="style" onload=...>
      NO usar @import aquí (sería una cascada de bloqueo de render)
   ============================================================ */


/* ============================================================
   2. VARIABLES CSS — Sistema de diseño completo
   ============================================================ */
:root {
  /* --- Colores de fondo --- */
  --bg-deep:          #0c0c10;   /* Negro casi puro — cuerpo principal */
  --bg-surface:       #151519;   /* Cards, paneles, contenedores */
  --bg-elevated:      #1e1e24;   /* Hover, activo, input focus */
  --bg-overlay:       rgba(12, 12, 16, 0.85); /* Overlays de modal */

  /* --- Colores de acento --- */
  --accent-primary:   #e11d48;   /* Rose-600 — CTAs principales, logo, botones calientes */
  --accent-creator:   #1d9bf0;   /* Azul Twitter — badges verificados, botón "Subir Video" */
  --accent-gold:      #eab308;   /* Yellow-500 — calificaciones, premium, creadores destacados */
  --accent-success:   #22c55e;   /* Green-500 — éxito, estado activo, indicador online */
  --verified-blue:    #1d9bf0;   /* Alias semántico para el badge verificado */

  /* --- Colores de texto --- */
  --text-bright:      #fafafa;   /* Texto principal, títulos */
  --text-body:        #d4d4d8;   /* Texto de cuerpo estándar */
  --text-dim:         #71717a;   /* Metadatos, texto secundario */
  --text-placeholder: #52525b;   /* Placeholders de inputs */

  /* --- Bordes --- */
  --border-subtle:    #27272a;   /* Bordes de cards, separadores suaves */
  --border-accent:    #3f3f46;   /* Bordes activos, inputs */

  /* --- Tipografía --- */
  --font-heading:     'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:        'DM Sans', system-ui, sans-serif;

  /* --- Espaciado base (escala de 4px) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Radio de bordes --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* --- Transiciones --- */
  --transition-fast:   150ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   350ms ease;

  /* --- Sombras --- */
  --shadow-card:    0 2px 8px rgba(0,0,0,0.45);
  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.6);
  --shadow-creator: 0 0 20px rgba(29,155,240,0.15);
  --shadow-accent:  0 4px 16px rgba(225,29,72,0.35);

  /* --- Dimensiones de zonas publicitarias --- */
  --ad-banner-w:     728px;
  --ad-banner-h:     90px;
  --ad-banner-mob-w: 320px;
  --ad-banner-mob-h: 50px;
  --ad-sidebar-w:    300px;
  --ad-sidebar-h:    250px;
  --ad-player-h:     250px;

  /* --- Grid de videos --- */
  --grid-cols-mobile:  2;
  --grid-cols-tablet:  3;
  --grid-cols-desktop: 4;
  --grid-gap:          var(--space-3);

  /* --- Ancho máximo del contenedor --- */
  --container-max:  1380px;
  --container-pad:  var(--space-4);
}


/* ============================================================
   3. RESET Y BASE
   ============================================================ */

/* Reset mínimo para comportamiento predecible */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Force dark theme — override KVS html.light class (set via %theme% token from admin).
   html.light sets dark-gray text (#363636) + white backgrounds.
   We force ALL variables back to dark-mode values. */
html.light {
  /* Backgrounds */
  --main-background:      #0c0c10 !important;
  --header-background:    #151519 !important;
  --header-background2:   #151519 !important;
  --white-bg:             #151519 !important;
  --footer-bg:            #151519 !important;
  --footer-box-bg:        #151519 !important;
  --thumb-box-bg:         #0c0c10 !important;
  --input-bg:             #1e1e24 !important;
  --input-bg2:            #1e1e24 !important;
  --btn-bg:               #1e1e24 !important;
  --sort-bg:              #1e1e24 !important;
  --sort-box-bg:          #1e1e24 !important;
  --tags-link-bg:         transparent !important;
  --pagination-bg:        #1e1e24 !important;
  --subscribe-bg:         #1e1e24 !important;
  --profile-sort-bg:      #151519 !important;
  --community-sort-bg:    #151519 !important;
  --thumbs-bottom-btn-bg: #1e1e24 !important;
  --checkbox-bg:          #1e1e24 !important;
  --suggestion-bg:        #1e1e24 !important;
  --embed-button-bg:      #1e1e24 !important;
  --profile-heading-btn-bg: #151519 !important;
  --subscription-btn-bg:  #151519 !important;
  --comment-like-bg:      #1e1e24 !important;
  /* Text colors */
  --general-color:        #fafafa !important;
  --thumb-text-color:     #d4d4d8 !important;
  --nav-link-color:       #d4d4d8 !important;
  --pagination-color:     #d4d4d8 !important;
  --sort-color:           #d4d4d8 !important;
  --input-color:          #fafafa !important;
  --input-color2:         #71717a !important;
  --btn-color:            #fafafa !important;
  --btn-tabs-color:       #d4d4d8 !important;
  --thumb-info-color:     #71717a !important;
  --tags-link-color:      #d4d4d8 !important;
  --tags-arrow-color:     #71717a !important;
  --profile-color:        #fafafa !important;
  --profile-tab-color:    #d4d4d8 !important;
  --heading-title-color:  #fafafa !important;
  --comment-item-color:   #d4d4d8 !important;
  --comment-name-color:   #fafafa !important;
  --member-menu-color:    #d4d4d8 !important;
  --grey-color:           #71717a !important;
  --color-inverse:        #fff !important;
  /* Misc */
  --modal-bg:             #1e1e24 !important;
  --radio-bg:             #1e1e24 !important;
  --menu-icon-bg:         #fafafa !important;
  --suggestion-group-bg:  rgba(255,255,255,0.05) !important;
  color-scheme: dark;
}

body {
  background-color: var(--bg-deep) !important;
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Links sin decoración por defecto */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-bright);
}

/* Imágenes responsivas por defecto */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Lista sin estilos */
ul,
ol {
  list-style: none;
}

/* Botones base */
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* Inputs base */
input,
textarea,
select {
  font-family: var(--font-body);
  color: var(--text-bright);
  background: transparent;
  border: none;
  outline: none;
}

/* Color de selección de texto */
::selection {
  background: var(--accent-primary);
  color: #fff;
}

/* Scrollbar oscuro con acento (Webkit) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--border-accent);
  border-radius: var(--radius-full);
}

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

/* Scrollbar Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-accent) var(--bg-deep);
}


/* ============================================================
   4. TIPOGRAFÍA
   ============================================================ */

/* Encabezado extra grande — logos, heroes */
.heading-xl {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.15;
  color: var(--text-bright);
  letter-spacing: -0.5px;
}

/* Encabezado grande — títulos de sección */
.heading-lg {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: var(--text-bright);
  letter-spacing: -0.25px;
}

/* Encabezado mediano — subtítulos, nombres de creadores */
.heading-md {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text-bright);
}

/* Texto de cuerpo estándar */
.text-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
}

/* Título de video — cards y listados */
.text-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-bright);
}

/* Metadatos — duración, vistas, fecha */
.text-meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
}

/* Responsive: escalar títulos en mobile */
@media (max-width: 639px) {
  .heading-xl { font-size: 24px; }
  .heading-lg { font-size: 20px; }
  .heading-md { font-size: 16px; }
}


/* ============================================================
   5. SISTEMA DE BADGE VERIFICADO (CRÍTICO — usado en toda la UI)
   ============================================================ */

/* Contenedor del badge — envuelve el nombre de usuario */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* El círculo con ✓ — renderizado vía ::after */
.verified-badge::after {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--verified-blue);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  transition: box-shadow var(--transition-base);
}

/* Variante pequeña — para cards de video */
.verified-badge-sm::after {
  width: 14px;
  height: 14px;
  font-size: 9px;
}

/* Variante grande — para páginas de perfil de creador */
.verified-badge-lg::after {
  width: 20px;
  height: 20px;
  font-size: 12px;
}

/* Efecto shimmer al hacer hover sobre el badge */
.verified-badge:hover::after {
  box-shadow: 0 0 8px rgba(29, 155, 240, 0.55),
              0 0 16px rgba(29, 155, 240, 0.25);
  animation: verified-shimmer 1.2s ease infinite;
}


/* ============================================================
   6. LAYOUT — Contenedor y grillas
   ============================================================ */

/* Contenedor principal centrado */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Layout con sidebar */
.content-with-sidebar {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .content-with-sidebar {
    grid-template-columns: 1fr var(--ad-sidebar-w);
  }
}

/* Sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Grilla principal de videos — mobile first */
.grid-videos {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols-mobile), 1fr);
  gap: var(--grid-gap);
}

@media (min-width: 640px) {
  .grid-videos {
    grid-template-columns: repeat(var(--grid-cols-tablet), 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-videos {
    grid-template-columns: repeat(var(--grid-cols-desktop), 1fr);
  }
}

/* Fila de sección — envoltorio genérico KVS; NO usar display:flex aquí */
/* KVS usa <section class="section-row"> como contenedor de bloque completo
   (heading + grid + paginación). Flex rompería el layout apilando en fila. */
.section-row {
  display: block;
  margin-bottom: var(--space-4);
}

/* Separador visual de sección */
.section-divider {
  height: 1px;
  background: var(--border-subtle);
  margin-block: var(--space-6);
}


/* ============================================================
   7. ZONAS PUBLICITARIAS
   ============================================================ */

/* Base de todas las zonas de anuncios */
[class^="ad-zone"] {
  display: none;          /* Ocultas por defecto — se muestran cuando tienen contenido */
  overflow: hidden;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

/* Mostrar cuando el anuncio está cargado */
[class^="ad-zone"].ad-loaded,
[class^="ad-zone"]:not(:empty) {
  display: flex;
}

/* Banner superior — leaderboard desktop / banner mobile */
.ad-zone-banner-top {
  width: var(--ad-banner-w);
  height: var(--ad-banner-h);
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
  .ad-zone-banner-top {
    width: var(--ad-banner-mob-w);
    height: var(--ad-banner-mob-h);
  }
}

/* Sidebar — rectangle 300×250 */
.ad-zone-sidebar {
  width: var(--ad-sidebar-w);
  height: var(--ad-sidebar-h);
}

/* En-grilla — ocupa el lugar de una card (cada 8 posiciones) */
.ad-zone-in-grid {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
}

/* Debajo del reproductor — acompañamiento al video */
.ad-zone-below-player {
  width: var(--ad-banner-w);
  height: var(--ad-player-h);
  margin-inline: auto;
  margin-block: var(--space-4);
}

@media (max-width: 767px) {
  .ad-zone-below-player {
    width: var(--ad-sidebar-w);
    height: var(--ad-sidebar-h);
  }
}

/* Banner de pie de página */
.ad-zone-footer {
  width: var(--ad-banner-w);
  height: var(--ad-banner-h);
  margin-inline: auto;
  margin-top: var(--space-4);
}

@media (max-width: 767px) {
  .ad-zone-footer {
    width: var(--ad-banner-mob-w);
    height: var(--ad-banner-mob-h);
  }
}


/* ============================================================
   8. COMPONENTES DE CREADOR
   ============================================================ */

/* --- Card de creador destacado --- */
.creator-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
  position: relative;
  overflow: hidden;
}

.creator-card:hover {
  border-color: var(--verified-blue);
  box-shadow: var(--shadow-creator);
  transform: translateY(-2px);
}

/* Brillo sutil en la esquina superior del card de creador */
.creator-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--verified-blue), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.creator-card:hover::before {
  opacity: 1;
}

/* Versión destacada — ocupa 2 columnas en desktop */
.creator-card--featured {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
}

@media (max-width: 639px) {
  .creator-card--featured {
    grid-column: span 1;
    flex-direction: column;
  }
}

/* --- Avatar del creador --- */
.creator-avatar {
  position: relative;
  flex-shrink: 0;
}

.creator-avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-accent);
  transition: border-color var(--transition-base);
}

.creator-card:hover .creator-avatar img {
  border-color: var(--verified-blue);
}

/* Indicador de estado online */
.creator-avatar .online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: var(--accent-success);
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
}

/* Avatar grande para página de perfil */
.creator-avatar--lg img {
  width: 120px;
  height: 120px;
}

/* --- Nombre de usuario del creador con badge --- */
.creator-username {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-bright);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

/* --- Información del creador --- */
.creator-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.creator-bio {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Estadísticas del creador --- */
.creator-stats {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.creator-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.creator-stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-bright);
  line-height: 1;
}

.creator-stat-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Links sociales del creador --- */
.creator-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.creator-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  font-size: 14px;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.creator-link:hover {
  background: var(--verified-blue);
  color: #fff;
  border-color: var(--verified-blue);
}

/* Colores específicos por red social */
.creator-link--onlyfans:hover  { background: #00aff0; border-color: #00aff0; }
.creator-link--telegram:hover  { background: #0088cc; border-color: #0088cc; }
.creator-link--instagram:hover { background: #e1306c; border-color: #e1306c; }
.creator-link--twitter:hover   { background: #1d9bf0; border-color: #1d9bf0; }

/* --- CTA de suscribirse al creador --- */
.creator-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--verified-blue);
  border: 1.5px solid var(--verified-blue);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast);
  white-space: nowrap;
}

.creator-cta:hover,
.creator-cta.subscribed {
  background: var(--verified-blue);
  color: #fff;
}

/* --- CTA "Subir Video" — acento azul con animación pulse --- */
.upload-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--accent-creator);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  animation: upload-pulse 2.5s ease infinite;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast);
  white-space: nowrap;
}

.upload-cta:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(29, 155, 240, 0.5);
  animation-play-state: paused;
  color: #fff;
}

/* --- CTA "Registrarse" --- */
.register-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
  white-space: nowrap;
}

.register-cta:hover {
  background: #be123c;
  transform: scale(1.03);
  box-shadow: var(--shadow-accent);
  color: #fff;
}

/* --- Barra de progreso de subida de video --- */
.upload-progress {
  width: 100%;
  height: 6px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-creator), var(--accent-success));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
  min-width: 0;
}


/* ============================================================
   9. COMPONENTE CARD DE VIDEO (estructura base)
   ============================================================ */

.video-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
  animation: fadeInUp 0.4s ease both;
}

.video-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* Animación escalonada para las cards en la grilla */
.video-card:nth-child(1)  { animation-delay: 0ms; }
.video-card:nth-child(2)  { animation-delay: 40ms; }
.video-card:nth-child(3)  { animation-delay: 80ms; }
.video-card:nth-child(4)  { animation-delay: 120ms; }
.video-card:nth-child(5)  { animation-delay: 60ms; }
.video-card:nth-child(6)  { animation-delay: 100ms; }
.video-card:nth-child(7)  { animation-delay: 140ms; }
.video-card:nth-child(8)  { animation-delay: 160ms; }

/* Contenedor del thumbnail — aspect ratio 16:9 */
.video-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-elevated);
}

.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
  display: block;
}

.video-card:hover .video-card-thumb img {
  transform: scale(1.07);
}

/* Overlay de badges sobre el thumbnail */
.video-card-badges {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-2);
  pointer-events: none;
}

.video-card-badges-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
}

.video-card-badges-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-1);
}

/* Cuerpo de texto del card */
.video-card-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

/* Título del video */
.video-card-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-bright);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}

.video-card:hover .video-card-title {
  color: var(--accent-primary);
}

/* Fila de metadatos — canal + vistas + fecha */
.video-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.video-card-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color var(--transition-fast);
}

.video-card-channel:hover {
  color: var(--verified-blue);
}

.video-card-views {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}


/* ============================================================
   10. COMPONENTES DE UI
   ============================================================ */

/* --- Badges sobre thumbnail --- */

/* Duración del video */
.badge-duration {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  letter-spacing: 0.3px;
  line-height: 1.4;
}

/* Badge HD */
.badge-hd {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  background: var(--accent-gold);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  border-radius: 4px;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* Badge "Privado" */
.badge-private {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: rgba(225, 29, 72, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}

/* Badge "Nuevo" */
.badge-new {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--accent-success);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* --- Pill genérico — categorías, tags --- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--bg-elevated);
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
  cursor: pointer;
}

.pill:hover,
.pill.active {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

/* --- Botones principales --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-fast),
              transform var(--transition-fast);
}

.btn-primary:hover {
  background: #be123c;
  transform: translateY(-1px);
  color: #fff;
}

.btn-primary:active {
  transform: translateY(0);
}

/* Botón azul de creador */
.btn-creator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--accent-creator);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-fast),
              transform var(--transition-fast);
}

.btn-creator:hover {
  background: #0d8de0;
  transform: translateY(-1px);
  color: #fff;
}

/* Botón con borde */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--text-body);
  border: 1.5px solid var(--border-accent);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast);
}

.btn-outline:hover {
  border-color: var(--text-body);
  color: var(--text-bright);
}

/* Tamaño pequeño para todos los botones */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* --- Barra de calificación --- */
.rating-bar {
  width: 100%;
  height: 3px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.rating-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-primary));
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

/* --- Migas de pan (breadcrumb) --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.breadcrumb-item {
  font-size: 13px;
  color: var(--text-dim);
}

.breadcrumb-item a {
  color: var(--text-dim);
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--accent-primary);
}

.breadcrumb-sep {
  color: var(--border-accent);
  font-size: 12px;
  user-select: none;
}

.breadcrumb-item:last-child {
  color: var(--text-body);
}

/* --- Campo de búsqueda --- */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-right: 44px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--transition-fast),
              background var(--transition-fast);
}

.search-input::placeholder {
  color: var(--text-placeholder);
}

.search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-elevated);
}

.search-icon {
  position: absolute;
  right: var(--space-4);
  color: var(--text-dim);
  pointer-events: none;
  font-size: 16px;
}

/* --- Paginación --- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.pagination-item:hover {
  background: var(--bg-elevated);
  color: var(--text-bright);
}

.pagination-item.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

.pagination-item.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* --- Pestañas de ordenamiento (Nuevos, Populares, etc.) --- */
.sort-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.sort-tabs::-webkit-scrollbar {
  display: none;
}

.sort-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.sort-tab:hover {
  color: var(--text-bright);
  border-color: var(--border-accent);
}

.sort-tab.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

/* --- Estado vacío --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.empty-state-icon {
  font-size: 48px;
  opacity: 0.3;
}

.empty-state-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-body);
}

.empty-state-desc {
  font-size: 14px;
  color: var(--text-dim);
  max-width: 320px;
}

/* --- Botón "Cargar Más" --- */
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-6);
}

.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-accent);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-body);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast);
}

.load-more-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-elevated);
}


/* ============================================================
   11. ANIMACIONES
   ============================================================ */

/* Entrada desde abajo con fade */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade simple */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Pulse para el botón "Subir Video" */
@keyframes upload-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(29, 155, 240, 0.45);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(29, 155, 240, 0);
  }
}

/* Shimmer para el badge verificado al hacer hover */
@keyframes verified-shimmer {
  0%   { box-shadow: 0 0 6px rgba(29,155,240,0.4); }
  50%  { box-shadow: 0 0 14px rgba(29,155,240,0.75); }
  100% { box-shadow: 0 0 6px rgba(29,155,240,0.4); }
}

/* Rotación para loaders */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skeleton loading shimmer */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Clase para skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 25%,
    var(--bg-elevated) 50%,
    var(--bg-surface) 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s ease infinite;
  border-radius: var(--radius-sm);
}


/* ============================================================
   12. DISEÑO RESPONSIVO (mobile-first)
   ============================================================ */

/* --- Mobile: < 640px (base por defecto) --- */

/* En mobile, las pestañas de sort se hacen scroll horizontal */
@media (max-width: 639px) {
  .sort-tabs {
    gap: var(--space-1);
  }
  .sort-tab {
    padding: var(--space-1) var(--space-3);
    font-size: 12px;
  }
  .creator-card {
    padding: var(--space-4);
  }
  .creator-avatar img {
    width: 56px;
    height: 56px;
  }
  .upload-cta,
  .register-cta {
    padding: var(--space-2) var(--space-4);
    font-size: 13px;
  }
  .pagination-item {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

/* --- Tablet: 640px – 1023px --- */
@media (min-width: 640px) {
  :root {
    --container-pad: var(--space-5);
  }
  .creator-card--featured {
    padding: var(--space-6);
  }
}

/* --- Desktop: 1024px+ --- */
@media (min-width: 1024px) {
  :root {
    --container-pad: var(--space-6);
  }
  .creator-avatar img {
    width: 80px;
    height: 80px;
  }
}

/* --- Pantallas anchas: 1320px+ --- */
@media (min-width: 1320px) {
  :root {
    --grid-gap: var(--space-4);
  }
}


/* ============================================================
   13. UTILIDADES
   ============================================================ */

/* Accesibilidad — sólo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Texto truncado a 2 líneas */
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Texto truncado a 1 línea */
.truncate-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ocultar en mobile */
.hide-mobile {
  display: none !important;
}

@media (min-width: 640px) {
  .hide-mobile {
    display: revert !important;
  }
}

/* Ocultar en desktop */
.hide-desktop {
  display: revert !important;
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Helpers de flex */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Gaps */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Espaciado de secciones */
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

/* Colores de texto utilitarios */
.text-bright   { color: var(--text-bright) !important; }
.text-dim      { color: var(--text-dim) !important; }
.text-accent   { color: var(--accent-primary) !important; }
.text-creator  { color: var(--accent-creator) !important; }
.text-gold     { color: var(--accent-gold) !important; }
.text-success  { color: var(--accent-success) !important; }

/* Ancho completo */
.w-full { width: 100%; }

/* Overflow oculto */
.overflow-hidden { overflow: hidden; }

/* Posición relativa (útil para overlays) */
.relative { position: relative; }

/* Loader giratorio */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--border-accent);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}


/* ============================================================
   14. CARD DE VIDEO — Componente completo con atribución
       Variables KVS confirmadas:
       {$item.view_page_url}, {$item.title}, {$item.screen_url}
       {$item.duration_array.text}, {$item.is_hd}, {$item.is_private}
       {$item.video_viewed}, {$item.rating}, {$item.post_date}
       {$item.user.user_id}, {$item.user.username}
       {$item.user.display_name}, {$item.user.avatar_url}
       {$item.user.custom1} — campo verificado ("verified" o "1")
   ============================================================ */

/* ── Cuadrícula de videos (override del .thumbs de KVS) ── */
.nb-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  width: 100%;
  margin-inline: 0; /* reset black_orange .thumbs { margin: 0 -5px 39px } */
  margin-bottom: 0; /* reset 39px bottom */
}

.nb-video-grid-ul {
  display: contents; /* <ul> transparente para que el grid fluya */
  list-style: none;
}

.nb-video-grid-ul > li {
  display: contents; /* cada <li> también transparente */
}

@media (min-width: 640px) {
  .nb-video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .nb-video-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Card principal ── */
.nb-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
  animation: fadeInUp 0.35s ease both;
}

/* Hover — elevar la card */
.nb-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

/* Entrada escalonada para las primeras 8 cards */
.nb-card:nth-child(1)  { animation-delay: 0ms; }
.nb-card:nth-child(2)  { animation-delay: 35ms; }
.nb-card:nth-child(3)  { animation-delay: 70ms; }
.nb-card:nth-child(4)  { animation-delay: 105ms; }
.nb-card:nth-child(5)  { animation-delay: 50ms; }
.nb-card:nth-child(6)  { animation-delay: 85ms; }
.nb-card:nth-child(7)  { animation-delay: 120ms; }
.nb-card:nth-child(8)  { animation-delay: 155ms; }

/* Modificadores de estado */
.nb-card--private  { --card-accent: var(--accent-primary); }
.nb-card--premium  { --card-accent: var(--accent-gold); }
.nb-card--disabled { opacity: 0.55; }
.nb-card--error    { border-color: #ef4444; }
.nb-card--processing { border-color: var(--border-accent); }
.nb-card--manage   { user-select: none; }

/* ── Controles de gestión (checkbox + editar) ── */
.nb-card-manage-controls {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 20;
}

.nb-manage-ctrl-inner {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nb-edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.7);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nb-edit-link:hover {
  color: var(--text-bright);
  background: rgba(0,0,0,0.9);
}

.nb-edit-link.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Enlace del thumbnail ── */
.nb-card-thumb-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  /* Forzar aspect ratio 16:9 */
  aspect-ratio: 16 / 9;
  background: var(--bg-elevated);
  flex-shrink: 0;
}

/* Imagen del thumbnail */
.nb-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

/* Zoom del thumbnail al hacer hover en la card */
.nb-card:hover .nb-card-img {
  transform: scale(1.06);
}

/* ── Overlays sobre el thumbnail ── */
.nb-card-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  z-index: 5;
  pointer-events: none; /* el click pasa al enlace debajo */
}

/* Esquina superior izquierda — badges de calidad (HD) */
.nb-card-overlay--tl {
  top: var(--space-2);
  left: var(--space-2);
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 3px;
}

/* Esquina superior derecha — acciones (favorito, más tarde) */
.nb-card-overlay--tr {
  top: var(--space-2);
  right: var(--space-2);
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  pointer-events: all; /* los botones de acción sí reciben clicks */
}

/* Borde inferior — privacidad + duración */
.nb-card-overlay--b {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px var(--space-2) var(--space-2);
  justify-content: space-between;
  align-items: flex-end;
  /* Gradiente oscuro para legibilidad */
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
}

/* ── Botones de favorito / ver más tarde ── */
.nb-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
  /* Oculto hasta hover en la card */
  opacity: 0;
  transform: translateY(-4px);
}

.nb-card:hover .nb-fav-btn {
  opacity: 1;
  transform: translateY(0);
}

.nb-fav-btn:hover,
.nb-fav-btn.fixed {
  background: var(--accent-primary);
  color: #fff;
}

.nb-fav-btn--later:hover,
.nb-fav-btn--later.fixed {
  background: var(--accent-creator);
  color: #fff;
}

/* Retraso escalonado en la aparición de los botones */
.nb-fav-btn:nth-child(2) {
  transition-delay: 30ms;
}

/* ── Badge de estado del video ── */
.nb-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.nb-status-badge--disabled  { background: rgba(0,0,0,0.7); color: var(--text-dim); }
.nb-status-badge--error     { background: rgba(239,68,68,0.85); color: #fff; }
.nb-status-badge--processing { background: rgba(234,179,8,0.85); color: #000; }

/* Badge "Privado / Premium" — variante premium dorada */
.badge-private--premium {
  background: rgba(234, 179, 8, 0.85);
  color: #000;
}

/* ── Cuerpo de información de la card ── */
.nb-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3);
  flex: 1;
}

/* ── Título del video ── */
.nb-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-bright);
  transition: color var(--transition-fast);
}

.nb-card-title:hover {
  color: var(--accent-primary);
}

/* ── Fila de creador — DIFERENCIADOR CLAVE ── */
/* Enlaza al perfil del creador con avatar + nombre + badge */
.nb-card-creator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin-top: 1px;
  transition: opacity var(--transition-fast);
}

.nb-card-creator:hover {
  opacity: 0.85;
}

/* Variante "fuente de contenido" (content source, no usuario) */
.nb-card-creator--source .creator-name {
  color: var(--text-dim);
}

/* Avatar circular del creador — 24px */
.creator-avatar-xs {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-subtle);
}

.creator-avatar-xs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Fallback con inicial del nombre */
.creator-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  color: var(--text-bright);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-creator));
  border-radius: 50%;
  text-transform: uppercase;
}

/* Fallback para content source (sin imagen) */
.creator-avatar-source {
  background: var(--bg-elevated);
}

.creator-avatar-source::after {
  content: "◈";
  font-size: 10px;
  color: var(--text-dim);
}

/* Nombre del creador */
.creator-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* .verified-badge-sm se hereda del sistema de badges global */
  transition: color var(--transition-fast);
}

.nb-card-creator:hover .creator-name {
  color: var(--text-body);
}

/* ── Fila de metadatos: vistas · fecha ── */
.nb-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.nb-card-views,
.nb-card-date {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.nb-card-dot {
  color: var(--border-accent);
  font-size: 10px;
  line-height: 1;
}

/* ── Slot publicitario en cuadrícula (cada 8 videos) ── */
.nb-ad-grid-item {
  display: contents; /* el <li> es transparente para el grid */
}

.nb-ad-grid-item .ad-zone-in-grid {
  /* Dentro del grid, ocupa 1 celda */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* ── Estado vacío ── */
.nb-empty-state {
  grid-column: 1 / -1;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}


/* ============================================================
   15. CARD DE VIDEO — Vista de lista (toggle de layout)
       Activado por clase .nb-video-grid--list en el wrapper
   ============================================================ */

.nb-video-grid--list {
  grid-template-columns: 1fr !important;
  gap: var(--space-2) !important;
}

.nb-video-grid--list .nb-card {
  flex-direction: row;
  height: 88px;
}

.nb-video-grid--list .nb-card-thumb-link {
  aspect-ratio: unset;
  width: 148px;
  height: 88px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  flex-shrink: 0;
}

.nb-video-grid--list .nb-card-body {
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  justify-content: center;
}

.nb-video-grid--list .nb-card-title {
  -webkit-line-clamp: 1;
  font-size: 13px;
}

.nb-video-grid--list .nb-card-creator {
  margin-top: 0;
}

.nb-video-grid--list .rating-bar {
  display: none; /* sin espacio para la barra en vista lista */
}

@media (max-width: 639px) {
  .nb-video-grid--list .nb-card {
    height: 72px;
  }
  .nb-video-grid--list .nb-card-thumb-link {
    width: 120px;
    height: 72px;
  }
  .nb-video-grid--list .nb-card-creator {
    display: none; /* ocultar en mobile lista para ahorrar espacio */
  }
}


/* ============================================================
   16. HEADER — Barra de navegación sticky con CTAs de creador
       Variables KVS confirmadas:
       {$smarty.session.user_id} > 0 = logueado
       {$smarty.session.avatar_url}, {$smarty.session.display_name}
       {$smarty.session.userdata.custom1} = campo verificado
       {$smarty.session.unread_messages}
       {$lang.urls.login}, {$lang.urls.signup}, {$lang.urls.logout}
       {$lang.urls.memberzone_upload_video}, {$lang.urls.memberzone_my_profile}
   ============================================================ */

/* ── Contenedor principal del header ── */
.nb-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow var(--transition-base),
              border-color var(--transition-base);
}

/* Sombra al hacer scroll */
.nb-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  border-bottom-color: transparent;
}

/* Backdrop blur para efecto glass — sólo desktop
   En mobile, backdrop-filter crea un containing-block que atrapa
   position:fixed hijos (cajón mobile), rompiendo su posicionamiento. */
@media (min-width: 1024px) {
  @supports (backdrop-filter: blur(12px)) {
    .nb-header {
      background: rgba(12, 12, 16, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
  }
}

/* ── Barra principal (56px desktop / 48px mobile) ── */
.nb-header-bar {
  width: 100%;
}

.nb-header-inner {
  display: flex;
  align-items: center;
  height: 48px;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  max-width: var(--container-max);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .nb-header-inner {
    height: 56px;
    padding-inline: var(--space-6);
    gap: var(--space-4);
  }
}

/* ── Izquierda: hamburger + logo ── */
.nb-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ── Logo ── */
.nb-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.nb-logo:hover {
  opacity: 0.85;
}

.nb-logo-img {
  height: 28px;
  width: auto;
  display: block;
}

@media (min-width: 1024px) {
  .nb-logo-img {
    height: 32px;
  }
}

/* ── Hamburger (mobile) ── */
.nb-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.nb-hamburger:hover {
  background: var(--bg-elevated);
}

.nb-hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-body);
  border-radius: 2px;
  transition: transform var(--transition-base),
              opacity var(--transition-base),
              background var(--transition-fast);
  transform-origin: center;
}

/* X al abrir el cajón (usa aria-expanded que el JS sí activa) */
.nb-hamburger[aria-expanded="true"] .nb-hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nb-hamburger[aria-expanded="true"] .nb-hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nb-hamburger[aria-expanded="true"] .nb-hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Cajón de navegación mobile ── */
.nb-mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  z-index: 1100;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 0;
}

.nb-mobile-nav.is-open {
  transform: translateX(0);
}

.nb-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1099;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.nb-mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nb-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.nb-mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nb-mobile-nav-close:hover {
  background: var(--bg-elevated);
  color: var(--text-bright);
}

.nb-mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  flex: 1;
}

.nb-mobile-nav-link {
  display: block;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nb-mobile-nav-link:hover {
  background: var(--bg-elevated);
  color: var(--text-bright);
}

.nb-mobile-nav-link--active {
  color: var(--accent-primary);
  border-left-color: var(--accent-primary);
  background: rgba(225, 29, 72, 0.06);
}

.nb-mobile-nav-ctas {
  padding: 20px;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nb-mobile-user-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-body);
  font-weight: 500;
  font-size: 0.9rem;
  transition: background var(--transition-fast);
}

.nb-mobile-user-link:hover {
  background: var(--border-accent);
}

/* ── Subir Video CTA en cajón ── */
.nb-mobile-upload-cta {
  padding: 14px 16px 4px;
  flex-shrink: 0;
}

.nb-mobile-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  background: var(--accent-creator);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.nb-mobile-upload-btn:hover {
  background: #1a8cd8;
  transform: translateY(-1px);
}

/* ── Búsqueda en cajón ── */
.nb-mobile-drawer-search {
  padding: 12px 16px;
  flex-shrink: 0;
}

.nb-mobile-drawer-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  color: var(--text-dim);
}

.nb-mobile-drawer-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-body);
  font-size: 0.9rem;
  font-family: inherit;
}

.nb-mobile-drawer-search-input::placeholder {
  color: var(--text-dim);
}

/* ── Sección Categorías en cajón ── */
.nb-mobile-nav-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 4px;
  flex-shrink: 0;
}

.nb-mobile-nav-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nb-mobile-cat-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}

.nb-mobile-cat-link {
  display: block;
  padding: 9px 24px 9px 32px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-body);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nb-mobile-cat-link:hover {
  background: var(--bg-elevated);
  color: var(--text-bright);
}

.nb-mobile-cat-link--all {
  color: var(--accent-primary);
  font-weight: 500;
  padding-top: 10px;
}

@media (min-width: 1024px) {
  .nb-hamburger {
    display: none; /* oculto en desktop */
  }
}

/* ── Centro: buscador ── */
.nb-header-search {
  /* Grow to fill the space the trimmed nav freed up, but stay within a sane range */
  flex: 1 1 auto;
  min-width: 200px;
  max-width: 460px;
  /* Oculto en mobile — se despliega con el botón de lupa */
  display: none;
}

@media (min-width: 640px) {
  .nb-header-search {
    display: block;
  }
}

.nb-search-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.nb-search-wrap:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.nb-search-input {
  flex: 1;
  padding: 0 var(--space-4);
  height: 36px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 14px;
  min-width: 0;
}

.nb-search-input::placeholder {
  color: var(--text-placeholder);
}

.nb-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border-subtle);
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--transition-fast),
              background var(--transition-fast);
}

.nb-search-btn:hover {
  color: var(--accent-primary);
  background: var(--bg-elevated);
}

/* ── Derecha: nav + CTAs ── */
.nb-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .nb-header-right {
    gap: var(--space-3);
  }
}

/* ── Navegación desktop ── */
.nb-nav {
  display: none; /* oculta en mobile */
  align-items: center;
  gap: 2px;
}

@media (min-width: 1024px) {
  .nb-nav {
    display: flex;
  }
}

/* 1024–1279px: not enough room for the inline nav + search + CTAs.
   Use the hamburger here (it has every link) so the search box stays full-size.
   The inline nav returns at ≥1280px where it fits. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nb-nav { display: none; }
  .nb-hamburger { display: flex; }
}

.nb-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color var(--transition-fast),
              background var(--transition-fast);
}

/* Mid-width desktops: the inline nav + both upload CTAs + the user menu need
   ~1424px, but .nb-header-inner is capped at --container-max (1380px) and
   .nb-header-right is flex-shrink:0 — so nothing gives and the row overflows
   right, clipping the username and adding horizontal scroll to the whole page.
   Tighten the nav and let the search box give up width to absorb it. */
@media (min-width: 1024px) and (max-width: 1499px) {
  .nb-nav { gap: 0; }
  .nb-nav-link { padding: 6px 6px; font-size: 12.5px; gap: 3px; }
  .nb-header-search { min-width: 160px; }
}

.nb-nav-link:hover {
  color: var(--text-bright);
  background: var(--bg-elevated);
}

.nb-nav-link--active {
  color: var(--text-bright);
  background: var(--bg-surface);
}

/* Variante con dropdown: flecha incluida */
.nb-nav-link--has-dropdown {
  padding-right: 8px;
}

/* ── Dropdown de categorías (CSS hover) ── */
.nb-nav-dropdown {
  position: relative;
}

.nb-dropdown-arrow {
  transition: transform var(--transition-base);
  color: var(--text-dim);
  flex-shrink: 0;
}

.nb-nav-dropdown:hover .nb-dropdown-arrow {
  transform: rotate(180deg);
  color: var(--text-bright);
}

.nb-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity var(--transition-base),
              visibility var(--transition-base),
              transform var(--transition-base);
  z-index: 100;
}

.nb-nav-dropdown:hover .nb-dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Puente invisible entre link y panel para evitar que se cierre */
.nb-nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

/* Grid de 3 columnas para los países */
.nb-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.nb-dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-body);
  white-space: nowrap;
  transition: background var(--transition-fast),
              color var(--transition-fast);
}

.nb-dropdown-item:hover {
  background: var(--bg-elevated);
  color: var(--text-bright);
}

.nb-dropdown-flag {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

/* Link "Ver Todas" al pie del dropdown */
.nb-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  transition: opacity var(--transition-fast);
}

.nb-dropdown-footer:hover {
  opacity: 0.8;
  color: var(--accent-primary);
}

/* ── Botón "Subir Video" — variante header ── */
.nb-upload-cta {
  /* Hereda .upload-cta de la sección 8, ajustes de tamaño para header */
  padding: var(--space-2) var(--space-3) !important;
  font-size: 13px !important;
}

/* Texto "Subir Video" — oculto en mobile (sólo icono) */
.nb-upload-label {
  display: none;
}

@media (min-width: 480px) {
  .nb-upload-label {
    display: inline;
  }
}

/* ≥1280px the inline nav reappears and competes for the row. "Subir Album"
   drops to icon-only so the user menu stays inside the container; "Subir Video",
   the primary CTA, keeps its label at every width. */
@media (min-width: 1280px) {
  .nb-upload-cta--album .nb-upload-label {
    display: none;
  }
  .nb-upload-cta--album {
    padding-inline: var(--space-2) !important;
  }
}

/* ── Link "Iniciar Sesión" ── */
.nb-login-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color var(--transition-fast);
  display: none; /* oculto en mobile */
}

.nb-login-link:hover {
  color: var(--text-bright);
}

@media (min-width: 768px) {
  .nb-login-link {
    display: inline;
  }
}

/* "Registrarse" — oculto en mobile (está en el cajón) */
.nb-header-right .register-cta {
  display: none;
}

@media (min-width: 768px) {
  .nb-header-right .register-cta {
    display: inline-flex;
  }
}

/* ── Botón de búsqueda mobile ── */
.nb-mobile-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--transition-fast),
              background var(--transition-fast);
  flex-shrink: 0;
}

.nb-mobile-search-btn:hover {
  color: var(--text-bright);
  background: var(--bg-elevated);
}

/* Oculto en tablet+ donde ya se ve la barra de búsqueda */
@media (min-width: 640px) {
  .nb-mobile-search-btn {
    display: none;
  }
}

/* ── Barra de búsqueda expandida en mobile ── */
.nb-mobile-search-bar {
  display: none;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-deep);
}

.nb-mobile-search-bar.is-open {
  display: block;
  animation: fadeIn 0.15s ease;
}

@media (min-width: 640px) {
  .nb-mobile-search-bar {
    display: none !important; /* la búsqueda principal está en header */
  }
}

/* ── Menú de usuario (desktop) ── */
.nb-user-menu {
  position: relative;
}

.nb-user-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast);
  max-width: 200px;
}

.nb-user-trigger:hover,
.nb-user-menu.is-open .nb-user-trigger {
  border-color: var(--border-accent);
  background: var(--bg-elevated);
}

.nb-user-avatar {
  width: 26px !important;
  height: 26px !important;
}

.nb-user-avatar img {
  width: 26px;
  height: 26px;
}

.nb-username {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.nb-user-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.nb-user-menu.is-open .nb-user-arrow {
  transform: rotate(180deg);
}

/* ── Dropdown del menú de usuario ── */
.nb-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-base),
              visibility var(--transition-base),
              transform var(--transition-base);
  z-index: 200;
  overflow: hidden;
}

.nb-user-menu.is-open .nb-user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nb-user-dropdown-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-elevated);
}

.nb-dropdown-avatar {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0;
}

.nb-dropdown-avatar img {
  width: 36px;
  height: 36px;
}

.nb-user-dropdown-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nb-user-dropdown-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nb-user-notif {
  font-size: 11px;
  color: var(--accent-gold);
  font-weight: 500;
}

.nb-user-dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
}

.nb-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-4);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  transition: background var(--transition-fast),
              color var(--transition-fast);
  cursor: pointer;
}

.nb-user-dropdown-item svg {
  color: var(--text-dim);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.nb-user-dropdown-item:hover {
  background: var(--bg-elevated);
  color: var(--text-bright);
}

.nb-user-dropdown-item:hover svg {
  color: var(--text-body);
}

/* "Subir Video" — resaltado en azul */
.nb-user-dropdown-item--highlight {
  color: var(--accent-creator);
}

.nb-user-dropdown-item--highlight svg {
  color: var(--accent-creator);
}

.nb-user-dropdown-item--highlight:hover {
  background: rgba(29, 155, 240, 0.1);
  color: var(--accent-creator);
}

/* "Solicitar Verificación" — tono azul verificado */
.nb-user-dropdown-item--verify {
  color: var(--accent-creator);
}
.nb-user-dropdown-item--verify svg {
  color: var(--accent-creator);
}
.nb-user-dropdown-item--verify:hover {
  background: rgba(29, 155, 240, 0.1);
  color: var(--accent-creator);
}

/* "Cerrar Sesión" — tono rojizo */
.nb-user-dropdown-item--logout {
  color: var(--text-dim);
}

.nb-user-dropdown-item--logout:hover {
  background: rgba(225, 29, 72, 0.08);
  color: var(--accent-primary);
}

.nb-user-dropdown-item--logout:hover svg {
  color: var(--accent-primary);
}

/* Badges de contador en items del dropdown */
.nb-count-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--bg-elevated);
  color: var(--text-dim);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
}

.nb-count-badge--alert {
  background: var(--accent-primary);
  color: #fff;
}

/* ── Cajón de navegación mobile ── */
.nb-mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nb-mobile-nav.is-open {
  transform: translateX(0);
}

/* Oculto permanentemente en desktop */
@media (min-width: 1024px) {
  .nb-mobile-nav {
    display: none !important;
  }
}

/* Cabecera del cajón */
.nb-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.nb-mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--transition-fast),
              background var(--transition-fast);
}

.nb-mobile-nav-close:hover {
  background: var(--bg-deep);
  color: var(--text-bright);
}

/* Links del cajón */
.nb-mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0;
  flex: 1;
}

.nb-mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 12px var(--space-5);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body);
  border-left: 3px solid transparent;
  transition: color var(--transition-fast),
              background var(--transition-fast),
              border-color var(--transition-fast);
}

.nb-mobile-nav-link:hover {
  color: var(--text-bright);
  background: var(--bg-elevated);
}

.nb-mobile-nav-link--active {
  color: var(--text-bright);
  border-left-color: var(--accent-primary);
  background: rgba(225, 29, 72, 0.06);
}

/* CTAs de autenticación en el cajón */
.nb-mobile-nav-ctas {
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

.nb-mobile-user-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-bright);
}

/* ── Overlay oscuro detrás del cajón ── */
.nb-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1050;
  backdrop-filter: blur(2px);
}

.nb-mobile-overlay.is-open {
  display: block;
  animation: fadeIn 0.2s ease;
}

@media (min-width: 1024px) {
  .nb-mobile-overlay {
    display: none !important;
  }
}

/* ── Zona publicitaria bajo el header ── */
.nb-header-ad {
  display: flex;
  justify-content: center;
  padding-block: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.nb-header-ad .ad-zone-banner-top:empty {
  display: none; /* ocultar si no hay anuncio */
}

/* ── Fila de tendencias (homepage únicamente) ── */
.nb-trending-bar {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding-block: 7px;
}

.nb-trending-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  overflow: hidden;
}

.nb-trending-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  color: var(--accent-primary);
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.nb-trending-pills {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 1px; /* evita que se corte la sombra del focus */
}

.nb-trending-pills::-webkit-scrollbar {
  display: none;
}

.nb-trending-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.nb-trending-pill:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

/* ── Ajuste del contenido principal para el header sticky ── */
.main {
  /* El header sticky ya ocupa su espacio en el flow — no se necesita padding extra */
}

/* ════════════════════════════════════════════════════════════════════════════
   § 17 — FOOTER
   Creator banner · 3-col links · SEO block · bottom bar
   ════════════════════════════════════════════════════════════════════════ */

.nb-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-10);
}

/* ── Footer ad zone ── */
.nb-footer-ad {
  display: flex;
  justify-content: center;
  padding: var(--space-4) var(--space-4) 0;
}

/* ── § 1: Creator Promotion Banner ── */
.nb-footer-creator-banner {
  background: linear-gradient(135deg,
    rgba(29, 155, 240, 0.12) 0%,
    rgba(29, 155, 240, 0.06) 50%,
    rgba(225, 29, 72, 0.08) 100%);
  border-top: 1px solid rgba(29, 155, 240, 0.25);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-6) var(--space-4);
}

.nb-footer-creator-banner__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.nb-footer-creator-banner__icon {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(29, 155, 240, 0.5));
}

.nb-footer-creator-banner__text {
  flex: 1;
  min-width: 200px;
}

.nb-footer-creator-banner__text h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 var(--space-1) 0;
}

.nb-footer-creator-banner__text p {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin: 0;
}

.nb-footer-creator-banner__ctas {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── § 2: 3-column Link Grid ── */
.nb-footer-links {
  padding: var(--space-10) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.nb-footer-links__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.nb-footer-col__heading {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.nb-footer-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nb-footer-col__list li a,
.nb-footer-link-btn {
  font-size: 0.875rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
  cursor: pointer;
}

.nb-footer-col__list li a:hover,
.nb-footer-link-btn:hover {
  color: var(--accent-primary);
}

/* ── SEO Text Block ── */
.nb-footer-seo {
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.015);
}

.nb-footer-seo__inner {
  max-width: 1320px;
  margin: 0 auto;
}

.nb-footer-seo__inner p {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0;
  opacity: 0.7;
}

.nb-footer-seo__inner a {
  color: var(--text-dim);
  text-decoration: underline;
  text-decoration-color: var(--border-accent);
}

.nb-footer-seo__inner a:hover {
  color: var(--accent-primary);
  text-decoration-color: var(--accent-primary);
}

/* ── § 3: Bottom Bar ── */
.nb-footer-bottom {
  padding: var(--space-5) var(--space-4);
}

.nb-footer-bottom__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.nb-footer-bottom__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nb-footer-logo img {
  display: block;
  height: 28px;
  width: auto;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.nb-footer-logo:hover img {
  opacity: 1;
}

.nb-footer-copyright {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.nb-footer-copyright strong {
  color: var(--text-body);
}

/* 18+ badge */
.nb-badge-18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  background: var(--accent-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: var(--font-heading);
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* Sister sites / network */
.nb-footer-bottom__network {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nb-footer-network-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  opacity: 0.6;
  white-space: nowrap;
}

.nb-footer-network-link {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.nb-footer-network-link:hover {
  color: var(--text-body);
  opacity: 1;
}

/* ── Button variants used in footer ── */
.nb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: 2px solid transparent;
}

.nb-btn--creator {
  background: var(--accent-creator);
  color: #fff;
  border-color: var(--accent-creator);
}

.nb-btn--creator:hover {
  background: #1a8bda;
  border-color: #1a8bda;
  color: #fff;
}

.nb-btn--outline-white {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.3);
}

.nb-btn--outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .nb-footer-creator-banner__inner {
    flex-direction: column;
    text-align: center;
  }

  .nb-footer-creator-banner__ctas {
    justify-content: center;
  }

  .nb-footer-links__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .nb-footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .nb-footer-bottom__network {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .nb-footer-links__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   § 17b — MODELS / CHICAS PAGE  (include_list_models_block_common.tpl)
   ════════════════════════════════════════════════════════════════════════ */

/* Models + Albums: disable fixed-height container so image displays at full natural size */
.models-thumbs .thumb .img-holder,
.albums-thumbs .thumb .img-holder {
  padding-bottom: 0 !important;
  height: auto;
}
.models-thumbs .thumb .img-holder img,
.albums-thumbs .thumb .img-holder img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: unset;
}

/* No-thumb placeholder: centered icon + label */
.models-thumbs .thumb .img-holder .no-thumb,
.albums-thumbs .thumb .img-holder .no-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 0.8rem;
  background: var(--bg-elevated);
}

/* ════════════════════════════════════════════════════════════════════════════
   § 17c — ALBUMS GRID REDESIGN  (albums_list.tpl / include_list_albums_block_common.tpl)
   Uniform portrait cards matching the 525×682 source ratio → photos show in full,
   no cropping. Modern card look with rounded corners + hover zoom.
   Scoped to .thumbs.albums-thumbs so the Models/Chicas grid (§17b) is unaffected.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Grid: responsive columns (2 → 3 → 4 → 5) ── */
.thumbs.albums-thumbs {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap, 12px);
  margin: 0 0 var(--space-8, 32px) !important;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .thumbs.albums-thumbs { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .thumbs.albums-thumbs { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1320px) {
  .thumbs.albums-thumbs { grid-template-columns: repeat(5, 1fr); }
}

/* ── Card ── */
.thumbs.albums-thumbs .thumb {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  transition:
    border-color var(--transition-base, .2s ease),
    box-shadow var(--transition-base, .2s ease),
    transform var(--transition-base, .2s ease);
}
.thumbs.albums-thumbs .thumb:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-card, 0 8px 24px rgba(0,0,0,.4));
  transform: translateY(-3px);
}
.thumbs.albums-thumbs .thumb > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ── Image holder: portrait, matches source ratio → zero crop ── */
.thumbs.albums-thumbs .thumb .img-holder {
  position: relative;
  width: 100%;
  aspect-ratio: 525 / 682;
  height: auto !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  background: var(--bg-elevated);
  border-radius: 0;
}
.thumbs.albums-thumbs .thumb .img-holder img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
  display: block;
  aspect-ratio: unset;
  transition: transform .45s ease;
}
.thumbs.albums-thumbs .thumb:hover .img-holder img {
  transform: scale(1.05);
}

/* Private / premium ribbons stay pinned over the image */
.thumbs.albums-thumbs .thumb .img-holder .line-private,
.thumbs.albums-thumbs .thumb .img-holder .line-premium,
.thumbs.albums-thumbs .thumb .img-holder .line-disabled,
.thumbs.albums-thumbs .thumb .img-holder .line-error,
.thumbs.albums-thumbs .thumb .img-holder .line-processing {
  z-index: 3;
}

/* ── Card body: title + meta ── */
.thumbs.albums-thumbs .thumb .title {
  padding: 10px 10px 4px;
  font-family: var(--font-body, inherit);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  transition: color var(--transition-fast, .15s ease);
}
.thumbs.albums-thumbs .thumb:hover .title {
  color: var(--text-bright);
}
.thumbs.albums-thumbs .thumb .thumb-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 4px 10px 10px;
  margin-top: auto;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.thumbs.albums-thumbs .thumb .thumb-bottom .thumb-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.thumbs.albums-thumbs .thumb .thumb-bottom .thumb-item .svg-icon {
  width: 12px;
  height: 12px;
  opacity: 0.8;
}

/* ── Mobile: tighten body spacing ── */
@media (max-width: 480px) {
  .thumbs.albums-thumbs { gap: 8px; }
  .thumbs.albums-thumbs .thumb .title { font-size: 0.8rem; padding: 8px 8px 3px; }
  .thumbs.albums-thumbs .thumb .thumb-bottom { padding: 3px 8px 8px; font-size: 0.68rem; }
}

/* ── Sidebar "Álbumes recomendados" (.asside-thumb): fixed 2 compact columns,
   independent of viewport width (the sidebar is ~360px, so the main grid's
   viewport-based 4–5 columns would render tiny cramped cards) ── */
.asside-thumb .thumbs.albums-thumbs {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: var(--space-4, 16px) !important;
}
.asside-thumb .thumbs.albums-thumbs .thumb .title {
  font-size: 0.78rem;
  padding: 7px 8px 2px;
  min-height: 0;
}
.asside-thumb .thumbs.albums-thumbs .thumb .thumb-bottom {
  padding: 2px 8px 8px;
  gap: 2px 6px;
  font-size: 0.66rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 18 — HOMEPAGE
   H1 Hero · Category Pills · Featured Creators · Layout · Sidebar
   ════════════════════════════════════════════════════════════════════════ */

/* ── H1 Hero ── */
.nb-hero {
  background: linear-gradient(180deg,
    rgba(225, 29, 72, 0.06) 0%,
    transparent 100%);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-8) var(--space-4) var(--space-6);
}

.nb-hero__inner {
  max-width: 1320px;
  margin: 0 auto;
}

.nb-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.2;
}

.nb-hero__subtitle {
  font-size: 1rem;
  color: var(--text-dim);
  margin: 0;
}

/* ── Category Quick-Scroll Pills ── */
.nb-cat-pills-wrap {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
}

.nb-cat-pills {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nb-cat-pills::-webkit-scrollbar {
  display: none;
}

.nb-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-body);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.nb-cat-pill:hover,
.nb-cat-pill--active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

/* ── Featured Creators Section ── */
.nb-featured-creators {
  max-width: 1320px;
  margin: var(--space-8) auto 0;
  padding: 0 var(--space-4);
}

.nb-featured-creators__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}

.nb-featured-creators__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nb-featured-creators__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent-creator);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.nb-featured-creators__more {
  font-size: 0.875rem;
  color: var(--accent-creator);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.nb-featured-creators__more:hover {
  opacity: 0.8;
}

/* Force the KVS members block to render as horizontal scroll */
.nb-featured-creators__scroll-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-accent) transparent;
  -webkit-overflow-scrolling: touch;
}

.nb-featured-creators__scroll-wrap::-webkit-scrollbar {
  height: 4px;
}

.nb-featured-creators__scroll-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.nb-featured-creators__scroll-wrap::-webkit-scrollbar-thumb {
  background: var(--border-accent);
  border-radius: 2px;
}

/* Override the KVS .thumbs grid inside creators section */
.nb-featured-creators__scroll-wrap .thumbs,
.nb-featured-creators__scroll-wrap .community_thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-1) var(--space-3);
}

.nb-featured-creators__scroll-wrap .thumb {
  flex: 0 0 140px;
  width: 140px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-creator);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast),
              transform var(--transition-fast);
}

.nb-featured-creators__scroll-wrap .thumb:hover {
  border-left-color: var(--accent-creator);
  transform: translateY(-2px);
}

.nb-featured-creators__scroll-wrap .thumb a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-3) var(--space-3);
  text-decoration: none;
  gap: var(--space-2);
}

.nb-featured-creators__scroll-wrap .img-holder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--accent-creator);
  flex-shrink: 0;
}

.nb-featured-creators__scroll-wrap .img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nb-featured-creators__scroll-wrap .no-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  font-size: 1.5rem;
  color: var(--text-dim);
}

.nb-featured-creators__scroll-wrap .title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-bright);
  text-align: center;
  line-height: 1.3;
}

.nb-featured-creators__scroll-wrap .thumb-bottom {
  display: none; /* hide date in creator scroll */
}

.nb-featured-creators__cta {
  margin-top: var(--space-3);
  text-align: center;
}

.nb-featured-creators__cta a {
  font-size: 0.875rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nb-featured-creators__cta a:hover {
  color: var(--accent-creator);
}

.nb-featured-creators__cta strong {
  color: var(--accent-creator);
}

/* ── Homepage 2-column layout ── */
.nb-homepage-layout {
  max-width: 1320px;
  margin: var(--space-8) auto 0;
  padding: 0 var(--space-4);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-6);
  align-items: start;
}

.nb-homepage-main {
  min-width: 0; /* prevent grid blowout */
}

/* ── Section wrappers ── */
.nb-section {
  margin-bottom: var(--space-8);
}

.nb-section--seo {
  padding: var(--space-6);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.nb-section-seo-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-body);
  margin: 0 0 var(--space-3) 0;
}

.nb-section-seo-body {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.7;
}

/* ── Sort Tabs ── */
.nb-sort-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}

.nb-sort-tabs::-webkit-scrollbar {
  display: none;
}

.nb-sort-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast),
              border-color var(--transition-fast);
}

.nb-sort-tab:hover {
  color: var(--text-bright);
}

.nb-sort-tab--active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

/* ── Sidebar ── */
.nb-homepage-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: calc(var(--header-height, 60px) + var(--space-4));
}

/* Upload CTA card */
.nb-sidebar-upload-cta {
  background: linear-gradient(135deg,
    rgba(29, 155, 240, 0.15) 0%,
    rgba(29, 155, 240, 0.06) 100%);
  border: 1px solid rgba(29, 155, 240, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.nb-sidebar-upload-cta__icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 0 8px rgba(29, 155, 240, 0.5));
}

.nb-sidebar-upload-cta h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 var(--space-2) 0;
}

.nb-sidebar-upload-cta p {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.5;
}

.nb-sidebar-upload-cta__btn {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.nb-sidebar-upload-cta__register {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--accent-creator);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.nb-sidebar-upload-cta__register:hover {
  opacity: 0.8;
}

/* Sidebar ad */
.nb-sidebar-ad {
  display: flex;
  justify-content: center;
}

/* Sidebar generic block */
.nb-sidebar-block {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.nb-sidebar-block__heading {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
}

.nb-sidebar-block__more {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: 0.8rem;
  color: var(--accent-creator);
  text-decoration: none;
  border-top: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

.nb-sidebar-block__more:hover {
  background: var(--bg-elevated);
}

/* Categories list in sidebar */
.nb-sidebar-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nb-sidebar-cat-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--border-subtle);
}

.nb-sidebar-cat-link:last-child {
  border-bottom: none;
}

.nb-sidebar-cat-link:hover {
  background: var(--bg-elevated);
}

.nb-sidebar-cat-flag {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.nb-sidebar-cat-name {
  font-size: 0.875rem;
  color: var(--text-body);
  transition: color var(--transition-fast);
}

.nb-sidebar-cat-link:hover .nb-sidebar-cat-name {
  color: var(--text-bright);
}

/* Suppress KVS block headings inside sidebar blocks — they render their own */
.nb-sidebar-block--models .heading,
.nb-sidebar-block--channels .heading {
  display: none;
}

/* Models in homepage sidebar: 2 per row to fill the 280px column */
.nb-sidebar-block--models .models-thumbs .thumb {
  width: 50%;
}

/* Sidebar models block title */
.nb-sidebar-block--models .title-asside {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
  background: var(--bg-surface);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .nb-homepage-layout {
    grid-template-columns: 1fr;
  }

  .nb-homepage-sidebar {
    position: static;
    /* Reorder: show upload CTA first, then rest */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .nb-sidebar-upload-cta {
    grid-column: 1 / -1; /* full width */
  }
}

@media (max-width: 640px) {
  .nb-hero {
    padding: var(--space-6) var(--space-4) var(--space-4);
  }

  .nb-hero__title {
    font-size: 1.4rem;
  }

  .nb-featured-creators {
    margin-top: var(--space-6);
    padding: 0 var(--space-3);
  }

  .nb-homepage-layout {
    padding: 0 var(--space-3);
    margin-top: var(--space-6);
  }

  .nb-homepage-sidebar {
    grid-template-columns: 1fr;
  }

  .nb-sort-tab {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8rem;
  }
}

/* Homepage sidebar context: use 3 cols when sidebar is visible (1025–1279px) */
@media (min-width: 1025px) and (max-width: 1279px) {
  .nb-homepage-main .nb-video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .nb-homepage-main .nb-video-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   § 19 — CREATOR PROFILE PAGE
   Hero · Avatar · Verified · Social Links · Subscribe · Tab Nav · Content
   ════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ── */
.nb-breadcrumb {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
}

.nb-breadcrumb__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
}

.nb-breadcrumb__link {
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nb-breadcrumb__link:hover {
  color: var(--accent-primary);
}

.nb-breadcrumb__sep {
  color: var(--text-dim);
  opacity: 0.4;
}

.nb-breadcrumb__current {
  color: var(--text-body);
  font-weight: 500;
}

/* ── Notice banners ── */
.nb-profile-notice {
  max-width: 1320px;
  margin: var(--space-4) auto 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(29, 155, 240, 0.1);
  border: 1px solid rgba(29, 155, 240, 0.3);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nb-profile-notice p { margin: 0; color: var(--text-body); font-size: 0.9rem; flex: 1; }

/* ── Profile Hero ── */
.nb-profile-hero {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}

.nb-profile-hero__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-6);
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

/* ── Avatar ── */
.nb-profile-avatar {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--border-accent);
  background: var(--bg-elevated);
  position: relative;
}

.nb-profile-avatar--verified {
  border-color: var(--accent-creator);
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.2),
              0 0 20px rgba(29, 155, 240, 0.15);
}

.nb-profile-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nb-profile-avatar__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-bright);
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-creator) 100%);
}

/* ── Info column ── */
.nb-profile-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Name row ── */
.nb-profile-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nb-profile-name {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 800;
  color: var(--text-bright);
  margin: 0;
  line-height: 1.1;
}

.nb-profile-verified-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--accent-creator);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.nb-profile-verified-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-creator);
  letter-spacing: 0.02em;
}

/* ── Country ── */
.nb-profile-country {
  font-size: 0.9rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── Bio ── */
.nb-profile-bio {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
}

/* ── Stats row ── */
.nb-profile-stats {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.nb-profile-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.nb-profile-stat:hover { opacity: 0.8; }

.nb-profile-stat__num {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1;
}

.nb-profile-stat__label {
  font-size: 0.75rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.nb-profile-stat--joined .nb-profile-stat__label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ── Action buttons ── */
.nb-profile-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.nb-profile-subscribe {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  background: var(--accent-creator);
  color: #fff;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  transition: background var(--transition-fast),
              transform var(--transition-fast);
  white-space: nowrap;
}

.nb-profile-subscribe:hover {
  background: #1a8bda;
  color: #fff;
  transform: translateY(-1px);
}

.nb-profile-subscribe--active {
  background: transparent;
  color: var(--accent-creator);
  border: 2px solid var(--accent-creator);
}

.nb-profile-subscribe--active:hover {
  background: rgba(29, 155, 240, 0.1);
  transform: none;
}

.nb-profile-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  color: var(--text-body);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.nb-profile-action-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--text-dim);
  color: var(--text-bright);
}

/* ════════════════════════════════════════════════════════════════════════
   SOCIAL LINKS BAR
   ════════════════════════════════════════════════════════════════════ */
.nb-social-bar {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-deep);
  padding: var(--space-4) var(--space-4);
}

.nb-social-bar__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.nb-social-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  height: 48px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--transition-fast),
              filter var(--transition-fast),
              opacity var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.nb-social-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.nb-social-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.nb-social-btn__label {
  font-size: 0.875rem;
}

/* OnlyFans */
.nb-social-btn--onlyfans {
  background: #00aeef;
  color: #fff;
}

.nb-social-btn--onlyfans .nb-social-btn__icon {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 900;
  background: rgba(255,255,255,0.2);
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* Instagram */
.nb-social-btn--instagram {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
}

/* Twitter/X */
.nb-social-btn--twitter {
  background: #000;
  color: #fff;
  border: 1px solid #333;
}

/* Telegram */
.nb-social-btn--telegram {
  background: #0088cc;
  color: #fff;
}

/* TikTok */
.nb-social-btn--tiktok {
  background: #010101;
  color: #fff;
  border: 1px solid #333;
  position: relative;
}

/* Website */
.nb-social-btn--website {
  background: var(--bg-elevated);
  color: var(--text-body);
  border: 1px solid var(--border-accent);
}

.nb-social-btn--website:hover {
  border-color: var(--text-dim);
  color: var(--text-bright);
}

/* ════════════════════════════════════════════════════════════════════════
   PROFILE CONTENT + TAB NAV
   ════════════════════════════════════════════════════════════════════ */
.nb-profile-content {
  margin-top: var(--space-2);
}

.nb-profile-content__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Restyle KVS's .section-tabs as nb-profile-tabs */
.nb-profile-tabs .section-tabs,
.nb-profile-tabs .sort-holder {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-subtle);
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
}

.nb-profile-tabs .section-tabs::-webkit-scrollbar { display: none; }

.nb-profile-tabs .section-tabs .link-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nb-profile-tabs .section-tabs .link-tab:hover {
  color: var(--text-bright);
}

.nb-profile-tabs .section-tabs .link-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

/* Count badges on tabs */
.nb-profile-tabs .section-tabs .link-tab em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--bg-elevated);
  color: var(--text-dim);
  border-radius: var(--radius-full);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
}

.nb-profile-tabs .section-tabs .link-tab.active em {
  background: rgba(225, 29, 72, 0.15);
  color: var(--accent-primary);
}

/* ── Content panels ── */
.nb-profile-panels {
  padding-bottom: var(--space-10);
}

.nb-profile-panels .nb-section {
  margin-bottom: var(--space-8);
}

/* Private section notice (Favoritos / Amigos accessed by a non-owner) */
.nb-private-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: var(--space-8) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
}
.nb-private-section__msg {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .nb-profile-hero__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    gap: var(--space-4);
  }

  .nb-profile-avatar {
    width: 88px;
    height: 88px;
  }

  .nb-profile-avatar__placeholder {
    font-size: 2rem;
  }

  .nb-profile-name-row {
    justify-content: center;
  }

  .nb-profile-name {
    font-size: 1.4rem;
  }

  .nb-profile-stats {
    justify-content: center;
    gap: var(--space-4);
  }

  .nb-profile-actions {
    justify-content: center;
  }

  .nb-profile-subscribe {
    width: 100%;
    justify-content: center;
  }

  .nb-social-bar__inner {
    justify-content: center;
  }

  .nb-social-btn__label {
    display: none; /* icon-only on very small screens */
  }

  .nb-social-btn {
    width: 48px;
    justify-content: center;
    padding: 0;
  }

  .nb-profile-content__inner {
    padding: 0 var(--space-3);
  }
}

@media (min-width: 480px) and (max-width: 640px) {
  .nb-social-btn__label {
    display: inline; /* show labels on larger phones */
  }

  .nb-social-btn {
    width: auto;
    padding: 0 var(--space-4);
  }
}

/* ============================================================
   § 20  UPLOAD PAGE
   ============================================================ */

/* Page wrapper */
.nb-upload-page-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* Hero */
.nb-upload-hero {
  margin-bottom: 28px;
}
.nb-upload-hero__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-bright);
  margin: 0 0 6px;
}
.nb-upload-hero__sub {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin: 0;
}

/* 2-column layout */
.nb-upload-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}

/* ── Drop zone ── */
.nb-drop-zone {
  border: 2px dashed var(--border-accent);
  border-radius: 16px;
  background: var(--bg-surface);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 24px;
  position: relative;
}
.nb-drop-zone:hover,
.nb-drop-zone--active {
  border-color: var(--accent-creator);
  background: rgba(29,155,240,0.06);
}
.nb-drop-zone__icon {
  margin: 0 auto 14px;
  width: 56px;
  height: 56px;
}
.nb-drop-zone__label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-bright);
  margin-bottom: 6px;
}
.nb-drop-zone__sub {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.nb-drop-zone__file-control {
  /* position:static breaks the relative chain so .nb-drop-zone__real-input
     positions relative to .nb-drop-zone (position:relative) instead of here */
  position: static !important;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.nb-drop-zone__text {
  max-width: 280px;
  background: var(--bg-elevated) !important;
  border-color: var(--border-accent) !important;
  cursor: default;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.nb-drop-zone__browse-btn {
  /* KVS sets position:absolute on .file-control .button — override to keep it
     in the flex row as a normal item */
  position: static !important;
  background: var(--accent-creator) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  top: auto !important;
  left: auto !important;
  cursor: pointer;
}
/* File input covers the ENTIRE drop zone — clicking anywhere opens picker */
.nb-drop-zone__real-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 5;
}

/* Alternative methods */
.nb-upload-alt-methods {
  margin-bottom: 20px;
}
.nb-upload-alt-methods__label {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nb-upload-radio {
  margin-bottom: 8px;
}

/* Upload progress bar */
.nb-upload-progress {
  margin-bottom: 20px;
}
.nb-upload-progress__bar {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.nb-upload-progress__fill {
  height: 100%;
  width: 0;
  background: var(--accent-creator);
  border-radius: 3px;
  transition: width 0.3s;
}
.nb-upload-progress__text {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
}

/* Step 1 bottom */
.nb-upload-step1-bottom {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Step 2 */
.nb-upload-step2.hidden { display: none; }

/* Preview row */
.nb-upload-preview-row {
  margin-bottom: 24px;
}
.nb-upload-preview-thumb {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px;
}
.nb-upload-preview-img {
  width: 200px;
  height: 112px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.nb-upload-preview-img--disabled { opacity: 0.45; }
.nb-upload-preview-meta {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* Form rows */
.nb-upload-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nb-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nb-form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-body);
}
.nb-form-label--required::after {
  content: ' *';
  color: var(--accent-primary);
}
.nb-form-hint {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 0.78rem;
}
.nb-input,
.nb-textarea,
.nb-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  color: var(--text-bright);
  font-size: 0.9rem;
  padding: 10px 14px;
  width: 100%;
  transition: border-color 0.2s;
  font-family: 'DM Sans', sans-serif;
}
.nb-input:focus,
.nb-textarea:focus,
.nb-select:focus {
  outline: none;
  border-color: var(--accent-creator);
}
.nb-textarea { resize: vertical; min-height: 90px; }
.nb-select { cursor: pointer; }

/* File control */
.nb-file-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nb-file-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  color: var(--text-body);
  padding: 10px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

/* Privacy toggle */
.nb-privacy-toggle {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.nb-privacy-option {
  flex: 1;
  min-width: 140px;
}
.nb-privacy-option input[type="radio"] { display: none; }
.nb-privacy-label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 2px solid var(--border-accent);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.nb-privacy-option input[type="radio"]:checked + .nb-privacy-label {
  border-color: var(--accent-creator);
  background: rgba(29,155,240,0.07);
}
.nb-privacy-icon { font-size: 1.2rem; }
.nb-privacy-text { display: flex; flex-direction: column; gap: 1px; }
.nb-privacy-text strong { font-size: 0.88rem; color: var(--text-bright); }
.nb-privacy-text em { font-style: normal; font-size: 0.75rem; color: var(--text-dim); }

/* Screenshots grid */
.nb-screenshots-toggle {
  display: block;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--accent-creator);
  margin-bottom: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.nb-screenshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.nb-screenshots-grid.hidden { display: none; }
.nb-screenshot-item { display: flex; flex-direction: column; gap: 6px; }
.nb-screenshot-thumb img {
  width: 100%;
  height: 65px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.nb-screenshot-select {
  font-size: 0.75rem;
  text-align: center;
  padding: 4px;
  background: var(--bg-elevated);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-dim);
}
.nb-screenshot-select.active {
  background: var(--accent-creator);
  color: #fff;
}

/* Submit row */
.nb-upload-submit-row {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nb-btn-upload,
.nb-btn-publish {
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  align-self: flex-start;
}
.nb-btn-upload:hover { background: #be123c; }
.nb-btn-publish { background: var(--accent-creator); align-self: stretch; text-align: center; }
.nb-btn-publish:hover:not([disabled]) { background: #1a8cd8; }
.nb-btn-publish[disabled],
.nb-btn-publish.disabled { opacity: 0.45; cursor: not-allowed; }
.nb-upload-submit-note {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

/* Captcha */
.nb-captcha-row { margin-bottom: 12px; }

/* ── Sidebar cards ── */
.nb-upload-tips,
.nb-upload-verified-cta,
.nb-upload-profile-cta {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}
.nb-upload-tips__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-bright);
  margin-bottom: 14px;
}
.nb-upload-tips__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nb-upload-tips__list li {
  font-size: 0.82rem;
  color: var(--text-body);
  line-height: 1.4;
}

/* Verified CTA */
.nb-upload-verified-cta__icon {
  width: 36px;
  height: 36px;
  background: var(--accent-creator);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 auto 10px;
}
.nb-upload-verified-cta__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-bright);
  text-align: center;
  margin-bottom: 8px;
}
.nb-upload-verified-cta__body {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
  margin: 0 0 12px;
  line-height: 1.5;
}
.nb-upload-verified-cta__link {
  display: block;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-creator);
  text-decoration: none;
}
.nb-upload-verified-cta__link:hover { text-decoration: underline; }

/* Profile CTA */
.nb-upload-profile-cta__label {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.nb-upload-profile-cta__link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-creator);
  text-decoration: none;
}
.nb-upload-profile-cta__link:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .nb-upload-layout {
    grid-template-columns: 1fr;
  }
  .nb-upload-sidebar {
    order: -1;
  }
  .nb-drop-zone {
    padding: 28px 16px;
  }
  .nb-upload-hero__title { font-size: 1.35rem; }
  .nb-btn-publish { font-size: 0.95rem; padding: 12px 20px; }
  .nb-privacy-toggle { flex-direction: column; }
}

/* ============================================================
   § 21  VIDEO PLAYER PAGE
   ============================================================ */

/* Page wrapper */
.nb-video-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* 2-column layout: main + sidebar */
.nb-video-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
.nb-video-main  { min-width: 0; }
.nb-video-sidebar {
  min-width: 0;
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  /* hide scrollbar but keep scrollable */
  scrollbar-width: thin;
  scrollbar-color: var(--border-accent) transparent;
}
.nb-video-sidebar::-webkit-scrollbar { width: 4px; }
.nb-video-sidebar::-webkit-scrollbar-track { background: transparent; }
.nb-video-sidebar::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 2px; }

/* Ad zones */
.nb-ad-banner-top,
.nb-ad-below-player { margin-bottom: 12px; }
.nb-sponsor-banner { margin-bottom: 12px; }
.nb-sponsor-banner img { max-width: 100%; height: auto; border-radius: 8px; }
.nb-sidebar-ad { margin-bottom: 16px; }

/* ── Player ── */
.nb-player-wrap { position: relative; }

/* ── Title ── */
.nb-video-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.35;
  margin: 14px 0 12px;
}
@media (min-width: 640px) {
  .nb-video-title { font-size: 1.45rem; }
}

/* ── Creator Card ── */
.nb-creator-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.nb-creator-avatar-link { flex-shrink: 0; }
.nb-creator-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--border-subtle);
  transition: border-color 0.2s;
}
.nb-creator-avatar--verified {
  border-color: var(--accent-creator);
  box-shadow: 0 0 0 2px rgba(29,155,240,0.3);
}
.nb-creator-avatar--placeholder {
  background: var(--bg-elevated);
  border: 2px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-dim);
}

.nb-creator-info {
  flex: 1;
  min-width: 120px;
}
.nb-creator-name-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.nb-creator-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-bright);
}
.nb-creator-name-link:hover .nb-creator-name { color: var(--accent-creator); }
.nb-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background: var(--accent-creator);
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}
.nb-creator-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.nb-creator-country { margin-left: 4px; }

.nb-creator-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.nb-creator-subscribe {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.nb-creator-subscribe:hover { background: #be123c; }
.nb-creator-subscribe--active {
  background: var(--bg-elevated);
  color: var(--text-dim);
  border: 1px solid var(--border-accent);
}
.nb-creator-subscribe--active:hover { background: var(--border-accent); }

.nb-creator-profile-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.nb-creator-profile-link:hover { color: var(--text-bright); border-color: var(--border-accent); }

.nb-creator-onlyfans-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #00aff0;
  color: #fff;
  border-radius: 7px;
  padding: 6px 11px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
  white-space: nowrap;
}
.nb-creator-onlyfans-btn:hover { background: #0099d6; }

.nb-creator-more-videos {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-creator);
  text-decoration: none;
  white-space: nowrap;
}
.nb-creator-more-videos:hover { text-decoration: underline; }

/* ── Metadata row ── */
.nb-video-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.nb-video-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nb-video-meta__item .svg-icon { width: 13px; height: 13px; opacity: 0.6; }
.nb-video-meta__sep { opacity: 0.4; }
.nb-video-meta__rating { display: inline-flex; align-items: center; gap: 6px; }
.nb-rating-bar {
  width: 70px;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
}
.nb-rating-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), #f59e0b);
  border-radius: 2px;
}
.nb-rating-pct { font-weight: 600; color: var(--text-body); }

/* ── Action bar ── */
/* fix: flag button inline alignment — nowrap keeps all buttons on one row */
.nb-action-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}
.nb-action-bar::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.nb-action-bar__group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nb-action-bar__group--right { margin-left: auto; }
.nb-action-bar__divider {
  width: 1px;
  height: 20px;
  background: var(--border-subtle);
  margin: 0 4px;
}
.nb-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}
.nb-action-btn:hover { background: var(--bg-surface); color: var(--text-bright); border-color: var(--border-accent); }
.nb-action-btn .svg-icon { width: 16px; height: 16px; }
.nb-action-btn--like:hover   { color: var(--accent-success); border-color: var(--accent-success); }
.nb-action-btn--dislike:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.nb-action-btn--active { background: rgba(229,57,53,0.12); color: var(--accent-primary); }
.nb-action-btn--share  { color: var(--accent-creator); }
.nb-action-btn--share:hover { border-color: var(--accent-creator); }
.nb-action-btn--flag:hover  { color: var(--text-dim); }
.nb-action-btn__label { }
.nb-action-btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ── Description ── */
.nb-video-description {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.65;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  white-space: pre-wrap;
}

/* ── Taxonomy pills ── */
.nb-video-taxonomy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.nb-tax-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.nb-tax-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  margin-right: 2px;
}
.nb-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nb-pill--model {
  background: rgba(234,179,8,0.12);
  color: var(--accent-gold);
  border: 1px solid rgba(234,179,8,0.25);
}
.nb-pill--model:hover { background: rgba(234,179,8,0.22); }
.nb-pill--category {
  background: var(--bg-elevated);
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
}
.nb-pill--category:hover { background: var(--bg-surface); color: var(--text-bright); }
.nb-pill--tag {
  background: rgba(29,155,240,0.08);
  color: var(--accent-creator);
  border: 1px solid rgba(29,155,240,0.2);
}
.nb-pill--tag:hover { background: rgba(29,155,240,0.18); }

/* ── Tab panels (hidden share/screenshots/flag) ── */
.nb-tab-panels .tab-content { padding: 12px 0; }
.nb-share-panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 16px; }

/* ── Comments section ── */
.nb-comments-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  margin-top: 4px;
}
.nb-comments-toggle { border: none; }
.nb-comments-toggle__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-bright);
  cursor: pointer;
  padding: 8px 0;
  list-style: none;
  user-select: none;
}
.nb-comments-toggle__summary::-webkit-details-marker { display: none; }
.nb-comments-toggle__summary .svg-icon { width: 18px; height: 18px; opacity: 0.7; }
.nb-comments-count { color: var(--text-dim); font-weight: 500; font-size: 0.88rem; }
.nb-comments-body { padding-top: 12px; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR RELATED / RECOMMENDED VIDEOS
   Estilo: lista compacta horizontal (thumbnail izq + info der)
   Inspirado en xVideos / PornHub sidebar — más moderno y denso
   ══════════════════════════════════════════════════════════════ */

/* Section wrapper */
.nb-sidebar-recommended {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

/* Section heading */
.nb-sidebar-recommended__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

/* Flat grid: single column list */
.nb-sidebar-recommended .nb-video-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Each card: horizontal layout */
.nb-sidebar-recommended .nb-card {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0 !important;
  background: transparent !important;
  transition: background 0.15s;
}
.nb-sidebar-recommended .nb-card:last-child { border-bottom: none; }
.nb-sidebar-recommended .nb-card:hover { background: var(--bg-elevated) !important; }

/* Thumbnail: fixed width, no flex shrink */
.nb-sidebar-recommended .nb-card-thumb-link {
  flex: 0 0 120px;
  width: 120px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
  aspect-ratio: 16/9;
  background: #000;
}
.nb-sidebar-recommended .nb-card-thumb {
  width: 100%;
  height: 100%;
  position: relative;
}
.nb-sidebar-recommended .nb-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Scale thumbnail on hover */
.nb-sidebar-recommended .nb-card:hover .nb-card-img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* Duration badge: smaller and tighter */
.nb-sidebar-recommended .nb-card-overlay--b {
  padding: 2px 5px 3px;
}
.nb-sidebar-recommended .badge-duration {
  font-size: 0.68rem;
  padding: 1px 4px;
  border-radius: 3px;
}
/* HD badge: tiny */
.nb-sidebar-recommended .badge-hd {
  font-size: 0.6rem;
  padding: 1px 3px;
  border-radius: 2px;
}
/* Fav buttons: hidden in sidebar — too small */
.nb-sidebar-recommended .nb-card-overlay--tr { display: none !important; }

/* Card body: fill remaining space */
.nb-sidebar-recommended .nb-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 !important;
}

/* Title: 2 lines, smaller */
.nb-sidebar-recommended .nb-card-title {
  font-size: 0.78rem !important;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}
.nb-sidebar-recommended .nb-card-title:hover { color: var(--accent-primary); }

/* Creator row: smaller */
.nb-sidebar-recommended .nb-card-creator {
  font-size: 0.72rem;
  gap: 4px;
  color: var(--text-dim);
}
.nb-sidebar-recommended .nb-card-creator:hover { color: var(--accent-creator); }
.nb-sidebar-recommended .creator-avatar-xs {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
}
.nb-sidebar-recommended .creator-avatar-xs img {
  width: 16px !important;
  height: 16px !important;
}

/* Meta row: views + date — even smaller */
.nb-sidebar-recommended .nb-card-meta {
  font-size: 0.7rem;
  color: var(--text-dim);
  gap: 4px;
}

/* Rating bar: hidden in sidebar — not enough room */
.nb-sidebar-recommended .rating-bar { display: none; }

/* Hide cards beyond first 12 in sidebar */
.nb-sidebar-recommended .thumbs > div:nth-child(n+13),
.nb-sidebar-recommended .thumbs > li:nth-child(n+13) { display: none; }
/* No load-more in sidebar */
.nb-sidebar-recommended .load-more { display: none; }
/* Hide the old asside-thumb title (block template renders its own) */
.nb-sidebar-recommended .title-asside { display: none; }
/* Hide heading/sort from block */
.nb-sidebar-recommended .heading { display: none; }

/* ── Related videos filter tabs (below player related block) ── */
.ralated-holder {
  margin-top: 16px;
}
.ralated-holder .sort-holder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.ralated-holder .sort-holder span,
.ralated-holder .sort-holder a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-accent);
  color: var(--text-dim);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}
.ralated-holder .sort-holder span {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
  cursor: default;
}
.ralated-holder .sort-holder a:hover {
  background: var(--bg-elevated);
  color: var(--text-bright);
  border-color: var(--border-accent);
}

/* ── End screen overlay ── */
.nb-end-screen {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}
.nb-end-screen__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 16px;
}
.nb-end-screen__cancel {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.nb-end-screen__cancel:hover { background: rgba(255,255,255,0.2); }

.nb-end-screen__next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.nb-end-countdown-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nb-end-countdown-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--accent-creator);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  animation: nb-end-pulse 1s ease-in-out infinite;
}
@keyframes nb-end-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,155,240,0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(29,155,240,0); }
}
.nb-end-countdown-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.nb-end-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-creator);
  color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s;
}
.nb-end-next-btn:hover { background: #1a8cd8; }

.nb-end-related-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 480px;
}
.nb-end-rel-item {
  width: calc(25% - 6px);
  min-width: 80px;
}
.nb-end-rel-item a { display: block; }
.nb-end-rel-item img {
  width: 100%;
  height: 55px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .nb-video-layout {
    grid-template-columns: 1fr;
  }
  .nb-video-sidebar {
    order: 1;
    position: static;
    max-height: none;
    overflow: visible;
  }
  /* On mobile: show related as 2-col grid instead of vertical list */
  .nb-sidebar-recommended .nb-video-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .nb-sidebar-recommended .nb-card {
    flex-direction: column !important;
    padding: 0 !important;
    border-bottom: none !important;
    border-radius: 10px !important;
    background: var(--bg-surface) !important;
  }
  .nb-sidebar-recommended .nb-card-thumb-link {
    flex: none;
    width: 100%;
    border-radius: 10px 10px 0 0;
  }
  .nb-sidebar-recommended .nb-card-body {
    padding: 8px !important;
  }
  .nb-sidebar-recommended .nb-card-title { font-size: 0.82rem !important; }
  .nb-sidebar-recommended .nb-card-overlay--tr { display: flex !important; }
  /* Show all cards on mobile (grid has more room) */
  .nb-sidebar-recommended .thumbs > div:nth-child(n+13),
  .nb-sidebar-recommended .thumbs > li:nth-child(n+13) { display: block; }
}
@media (max-width: 640px) {
  .nb-creator-card { gap: 10px; }
  .nb-creator-actions { gap: 6px; }
  .nb-action-btn__label { display: none; }
  .nb-video-title { font-size: 1.1rem; }
  .nb-end-screen__inner { padding: 12px; }
  .nb-end-related-grid { display: none; }
}

/* ============================================================
   § 22  CREATOR SIGNUP PAGE
   ============================================================ */

/* ── Fancybox modal override: make the signup modal wider ── */
.fancybox-content:has(.nb-signup-page),
.fancybox-slide--html .fancybox-content:has(.nb-signup-page) {
  max-width: 900px !important;
  width: 96vw !important;
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* ── Page wrapper: 2-column grid ── */
.nb-signup-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  position: relative;
  background: var(--bg-deep);
  border-radius: 18px;
  overflow: hidden;
}

/* Close button */
.nb-signup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  color: var(--text-dim);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.nb-signup-close:hover { background: rgba(255,255,255,0.12); color: var(--text-bright); }
.nb-signup-close .svg-icon { width: 14px; height: 14px; }

/* ══════════════════════════════════
   LEFT COLUMN — Form
══════════════════════════════════ */
.nb-signup-form-col {
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-deep);
  overflow-y: auto;
  max-height: 90vh;
}

/* Branding */
.nb-signup-branding { margin-bottom: 24px; }
.nb-signup-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--text-bright);
  margin-bottom: 14px;
}
.nb-signup-logo__dot { color: var(--accent-primary); }
.nb-signup-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-bright);
  margin: 0 0 6px;
  line-height: 1.2;
}
.nb-signup-subheading {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin: 0;
}

/* Form fields */
.nb-signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nb-signup-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nb-signup-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 3px;
}
.nb-signup-required { color: var(--accent-primary); font-size: 0.75rem; }
.nb-signup-label--required::after { content: ' *'; color: var(--accent-primary); }
.nb-signup-hint {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.nb-signup-input,
.nb-signup-select {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: 9px !important;
  color: var(--text-bright) !important;
  font-size: 0.9rem !important;
  padding: 10px 14px !important;
  width: 100% !important;
  transition: border-color 0.18s !important;
  font-family: 'DM Sans', sans-serif !important;
}
.nb-signup-input:focus,
.nb-signup-select:focus {
  outline: none !important;
  border-color: var(--accent-creator) !important;
  box-shadow: 0 0 0 3px rgba(29,155,240,0.15) !important;
}
.nb-signup-input::placeholder { color: var(--text-dim) !important; }
.nb-signup-select { cursor: pointer !important; appearance: auto !important; }

/* Password input with eye button */
.nb-signup-input-wrap {
  position: relative;
  display: flex;
}
.nb-signup-input-wrap .nb-signup-input { padding-right: 42px !important; }
.nb-signup-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.nb-signup-eye:hover { color: var(--text-bright); }

/* Checkboxes */
.nb-signup-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0;
}
.nb-signup-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.nb-signup-check__input { display: none; }
.nb-signup-check__box {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--border-accent);
  border-radius: 4px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.nb-signup-check__input:checked + .nb-signup-check__box {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
.nb-signup-check__input:checked + .nb-signup-check__box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.nb-signup-check--error .nb-signup-check__box {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(225,29,72,0.2);
}
.nb-signup-check__label {
  font-size: 0.8rem;
  color: var(--text-body);
  line-height: 1.45;
}
.nb-signup-terms-link {
  color: var(--accent-creator);
  text-decoration: none;
}
.nb-signup-terms-link:hover { text-decoration: underline; }

/* Captcha */
.nb-signup-captcha { margin-top: 2px; }
.nb-signup-captcha .image { display: flex; flex-direction: column; gap: 6px; }
.nb-signup-captcha img { border-radius: 6px; max-width: 180px; }

/* Submit button */
.nb-signup-submit {
  width: 100% !important;
  background: var(--accent-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 13px 20px !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.1s !important;
  margin-top: 4px !important;
}
.nb-signup-submit:hover { background: #be123c !important; }
.nb-signup-submit:active { transform: scale(0.98) !important; }

/* Login link */
.nb-signup-login-link {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
}
.nb-signup-login-link__a {
  color: var(--accent-creator);
  font-weight: 600;
  text-decoration: none;
}
.nb-signup-login-link__a:hover { text-decoration: underline; }

/* Generic + field errors inside signup form */
.nb-signup-form .generic-error { margin-bottom: 12px; }
.nb-signup-form .field-error { font-size: 0.75rem; }

/* ══════════════════════════════════
   RIGHT COLUMN — Benefits
══════════════════════════════════ */
.nb-signup-benefits-col {
  background: linear-gradient(160deg, #0e0e14 0%, #111827 50%, #0c0c10 100%);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.nb-signup-benefits-col::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(225,29,72,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.nb-signup-benefits { display: flex; flex-direction: column; gap: 20px; }

.nb-signup-benefits__heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-bright);
  margin: 0;
}

/* Benefits list */
.nb-signup-benefits__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nb-signup-benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.nb-signup-benefit__icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: rgba(34,197,94,0.15);
  color: var(--accent-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}
.nb-signup-benefit__icon--verified {
  background: rgba(29,155,240,0.15);
  color: var(--accent-creator);
}
.nb-signup-benefit__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nb-signup-benefit__text strong {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.nb-signup-benefit__text span {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.nb-verified-pill {
  display: inline-flex;
  align-items: center;
  background: var(--accent-creator);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Featured creator example card */
.nb-signup-creator-example {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
}
.nb-signup-creator-example__label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-creator);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.nb-signup-creator-example__card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.nb-signup-creator-example__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--accent-creator);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));
  flex-shrink: 0;
}
.nb-signup-creator-example__info { flex: 1; }
.nb-signup-creator-example__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.nb-signup-creator-example__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--accent-creator);
  color: #fff;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 800;
}
.nb-signup-creator-example__stats {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.nb-signup-creator-example__cta {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.4;
  font-style: italic;
}

/* Trust badges */
.nb-signup-trust {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.nb-signup-trust__item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.nb-signup-trust__icon { font-size: 0.9rem; }

/* ── Success screen ── */
.nb-signup-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 32px;
  min-height: 320px;
  background: var(--bg-deep);
  border-radius: 18px;
}
.nb-signup-success__icon { font-size: 2.8rem; margin-bottom: 16px; }
.nb-signup-success__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-bright);
  margin: 0 0 10px;
}
.nb-signup-success__body {
  font-size: 0.9rem;
  color: var(--text-body);
  max-width: 380px;
  margin: 0 0 6px;
  line-height: 1.5;
}
.nb-signup-success__note {
  font-size: 0.82rem;
  color: var(--text-dim);
  max-width: 340px;
  margin: 0;
  line-height: 1.5;
}
.nb-signup-success__cta {
  display: inline-flex;
  align-items: center;
  background: var(--accent-primary);
  color: #fff;
  border-radius: 10px;
  padding: 11px 22px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: 18px;
  transition: background 0.2s;
}
.nb-signup-success__cta:hover { background: #be123c; }

/* ── Responsive ── */
@media (max-width: 680px) {
  .nb-signup-page {
    grid-template-columns: 1fr;
    border-radius: 0;
  }
  .nb-signup-benefits-col {
    order: -1;
    padding: 24px 20px 20px;
  }
  .nb-signup-benefits-col::before { display: none; }
  .nb-signup-creator-example { display: none; }
  .nb-signup-form-col { padding: 24px 20px 28px; max-height: none; }
  .nb-signup-heading { font-size: 1.25rem; }
  .fancybox-content:has(.nb-signup-page) {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}
@media (max-width: 480px) {
  .nb-signup-benefits__list { gap: 10px; }
  .nb-signup-trust { justify-content: center; }
}

/* ============================================================
   § 23  CREATORS DIRECTORY PAGE
   ============================================================ */

/* Page wrapper */
.nb-creators-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

/* ── Page header ── */
.nb-creators-header {
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
}
.nb-creators-header__inner { max-width: 640px; }
.nb-creators-header__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-bright);
  margin: 0 0 8px;
}
.nb-creators-header__subtitle {
  font-size: 0.95rem;
  color: var(--text-dim);
  margin: 0;
}

/* ── Filter tabs ── */
.nb-creators-tabs {
  display: flex;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nb-creators-tabs::-webkit-scrollbar { display: none; }
.nb-creators-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  font-family: 'DM Sans', sans-serif;
}
.nb-creators-tab:hover {
  color: var(--text-bright);
  background: var(--bg-elevated);
}
.nb-creators-tab--active {
  color: var(--text-bright);
  background: var(--bg-elevated);
  border-color: var(--border-accent);
}

/* ── Featured / Verified creators section ── */
.nb-creators-featured-section {
  margin-bottom: 36px;
}
.nb-creators-featured-section__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.nb-creators-featured-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-bright);
}
.nb-creators-featured-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--accent-creator);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
.nb-creators-featured-section__sub {
  font-size: 0.78rem;
  color: var(--text-dim);
}
.nb-creators-featured-section__scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-accent) transparent;
  padding-bottom: 6px;
}
.nb-creators-featured-section__scroll::-webkit-scrollbar { height: 4px; }
.nb-creators-featured-section__scroll::-webkit-scrollbar-track { background: transparent; }
.nb-creators-featured-section__scroll::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 2px; }

/* Featured creator cards — horizontal row */
.nb-featured-row {
  display: flex;
  gap: 14px;
  width: max-content;
  min-width: 100%;
}
.nb-featured-creator-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 130px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px 12px 14px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.nb-featured-creator-card:hover {
  background: var(--bg-elevated);
  transform: translateY(-2px);
}
.nb-featured-creator-card--verified {
  border-color: var(--accent-creator);
  box-shadow: 0 0 0 1px rgba(29,155,240,0.2), 0 4px 16px rgba(29,155,240,0.1);
}
.nb-featured-creator-card__avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.nb-featured-creator-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--border-subtle);
}
.nb-featured-creator-card--verified .nb-featured-creator-card__avatar {
  border-color: var(--accent-creator);
}
.nb-featured-creator-card__avatar--placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text-dim);
}
.nb-featured-creator-card__badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--accent-creator);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  border: 2px solid var(--bg-surface);
}
.nb-featured-creator-card__name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-bright);
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 106px;
}
.nb-featured-creator-card__country {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
}
.nb-featured-creator-card__cta {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-creator);
  margin-top: 2px;
}

/* ── Main creators grid ── */
.nb-creators-grid-block { width: 100%; }

/* Override KVS .thumbs.community_thumbs to be our 4-col grid */
.nb-creators-grid-block .thumbs.community_thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
}

/* Creator card inside grid */
.nb-creators-grid-block .thumb.item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
  position: relative;
}
.nb-creators-grid-block .thumb.item:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
}
/* Verified card: blue border glow */
.nb-creators-grid-block .thumb.item:has(.verified-badge-sm) {
  border-color: var(--accent-creator);
  box-shadow: 0 0 0 1px rgba(29,155,240,0.18), 0 4px 20px rgba(29,155,240,0.08);
}
.nb-creators-grid-block .thumb.item > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 12px 14px;
  gap: 8px;
  text-decoration: none;
  height: 100%;
}
/* Avatar */
.nb-creators-grid-block .thumb.item .img-holder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  flex-shrink: 0;
}
.nb-creators-grid-block .thumb.item:has(.verified-badge-sm) .img-holder {
  border-color: var(--accent-creator);
}
.nb-creators-grid-block .thumb.item .img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nb-creators-grid-block .thumb.item .no-thumb {
  width: 100%;
  height: 100%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--text-dim);
}
/* Name + verified badge */
.nb-creators-grid-block .thumb.item .title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-bright);
  line-height: 1.3;
  margin: 0;
}
/* thumb-bottom: date + country */
.nb-creators-grid-block .thumb.item .thumb-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}
.nb-creators-grid-block .thumb.item .thumb-item {
  font-size: 0.72rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 3px;
}
.nb-creators-grid-block .thumb.item .thumb-item .svg-icon { width: 11px; height: 11px; }
.nb-creators-grid-block .thumb.item .nb-member-country { font-size: 0.72rem; color: var(--text-dim); }

/* "Ver Perfil" label */
.nb-member-ver-perfil {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-creator);
  margin-top: 4px;
}
.nb-creators-grid-block .thumb.item:hover .nb-member-ver-perfil {
  text-decoration: underline;
}

/* Empty state */
.nb-creators-grid-block .empty-content {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dim);
  padding: 40px 20px;
  font-size: 0.9rem;
}

/* Pagination */
.nb-creators-grid-block .pagination-holder,
.nb-creators-grid-block .load-more-holder {
  margin-top: 24px;
}

/* ── Friends/conversations: hide "Ver Perfil" ── */
.thumb.item .nb-member-ver-perfil { }

/* ── Become a Creator CTA ── */
.nb-creators-cta {
  margin-top: 52px;
  background: linear-gradient(135deg, var(--bg-surface) 0%, #0f0f1a 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.nb-creators-cta::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(225,29,72,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.nb-creators-cta__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 40px 44px;
}
.nb-creators-cta__icon { font-size: 2.5rem; margin-bottom: 10px; }
.nb-creators-cta__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-bright);
  margin: 0 0 10px;
}
.nb-creators-cta__body {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin: 0 0 20px;
  max-width: 480px;
  line-height: 1.6;
}
.nb-creators-cta__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.nb-creators-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s, opacity 0.2s;
}
.nb-creators-cta__btn--primary {
  background: var(--accent-primary);
  color: #fff;
}
.nb-creators-cta__btn--primary:hover { background: #be123c; }
.nb-creators-cta__btn--secondary {
  background: var(--bg-elevated);
  color: var(--text-body);
  border: 1px solid var(--border-accent);
}
.nb-creators-cta__btn--secondary:hover { color: var(--text-bright); background: var(--border-accent); }
.nb-creators-cta__benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nb-creators-cta__benefits li {
  font-size: 0.85rem;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nb-creators-cta__benefits li::first-letter { color: var(--accent-success); }

/* SEO text */
.nb-seo-text {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.7;
}
.nb-seo-text__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-body);
  margin: 0 0 10px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .nb-creators-grid-block .thumbs.community_thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .nb-creators-header__title { font-size: 1.5rem; }
  .nb-creators-grid-block .thumbs.community_thumbs {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .nb-creators-cta__inner {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }
  .nb-creators-cta__benefits { display: none; }
  .nb-creators-cta__title { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .nb-creators-page { padding: 0 12px 40px; }
  .nb-creators-tabs { gap: 2px; }
  .nb-creators-tab { padding: 7px 12px; font-size: 0.78rem; }
  .nb-featured-creator-card { width: 110px; padding: 14px 8px 12px; }
  .nb-featured-creator-card__avatar,
  .nb-featured-creator-card__avatar-wrap { width: 60px; height: 60px; }
  .nb-featured-creator-card__avatar--placeholder { width: 60px; height: 60px; font-size: 1.2rem; }
}


/* ============================================================
   § 24. CATEGORY PAGE — videos_list.tpl (list_type==categories)
         + ALL-CATEGORIES PAGE — categories_videos.tpl
   ============================================================ */

/* ── Category page wrapper ── */
.nb-category-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ── Breadcrumb ── */
.nb-breadcrumb {
  padding: 12px 0 0;
}
.nb-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.nb-breadcrumb li + li::before {
  content: "/";
  color: var(--border-accent);
  margin-right: 6px;
}
.nb-breadcrumb a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}
.nb-breadcrumb a:hover { color: var(--text-body); }
.nb-breadcrumb [aria-current="page"] { color: var(--text-body); }

/* ── Category hero ── */
.nb-category-hero {
  margin: 20px 0 0;
  padding: 32px 28px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.nb-category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(225,29,72,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.nb-category-hero__inner { position: relative; }
.nb-category-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--text-bright);
  margin: 0 0 8px;
  line-height: 1.1;
}
.nb-category-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.nb-category-hero__count {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-dim);
  background: var(--bg-elevated);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
}
.nb-category-hero__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
  max-width: 680px;
}

/* ── Sort tabs (category page) ── */
/* Shared with community page but scoped here for category context */
.nb-category-page .nb-sort-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 20px 0 0;
  padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  width: fit-content;
  flex-wrap: wrap;
}
.nb-category-page .nb-sort-tab {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: 7px 16px;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nb-category-page .nb-sort-tab:hover {
  background: var(--bg-elevated);
  color: var(--text-body);
}
.nb-category-page .nb-sort-tab--active {
  background: var(--accent-primary);
  color: #fff;
  font-weight: 600;
}
.nb-category-page .nb-sort-tab--active:hover {
  background: var(--accent-primary);
  color: #fff;
}

/* ── Video grid wrap — removes section-row default margin ── */
.nb-category-grid-wrap {
  margin-top: 20px;
}
/* KVS renders the block inside .nb-category-block; normalize spacing */
.nb-category-block {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
/* Ensure the video grid uses full width and the 4-col nb-card layout */
.nb-category-grid-wrap .nb-video-grid,
.nb-category-grid-wrap .thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.nb-category-grid-wrap .section-row {
  padding: 0;
  background: transparent;
  border: none;
  margin: 0;
}
.nb-category-grid-wrap .heading {
  display: none; /* heading suppressed — hero + sort tabs replace it */
}

/* ── SEO text section ── */
.nb-seo-text {
  margin-top: 40px;
  padding: 24px 28px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.nb-seo-text__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-body);
  margin: 0 0 12px;
}
.nb-seo-text__body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-dim);
  line-height: 1.65;
}
.nb-seo-text__body p { margin: 0 0 10px; }
.nb-seo-text__body p:last-child { margin-bottom: 0; }
.nb-seo-text__body a { color: var(--accent-creator); text-decoration: none; }
.nb-seo-text__body a:hover { text-decoration: underline; }

/* ── ALL-CATEGORIES page ── */
.nb-categories-all-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 48px;
}
.nb-categories-all-header {
  padding: 28px 0 0;
  margin-bottom: 24px;
}
.nb-categories-all-header__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--text-bright);
  margin: 0 0 6px;
}
.nb-categories-all-header__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-dim);
  margin: 0;
}
.nb-categories-all-grid { }

/* ── Category cards (include_list_categories_block_common.tpl) ── */
.nb-cat-grid.thumbs,
.nb-cat-grid.categories-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.nb-cat-card {
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.2s, transform 0.2s;
  /* Reset .thumb styles that conflict */
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.nb-cat-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
}
.nb-cat-card__link {
  display: block;
  text-decoration: none;
}
.nb-cat-card__thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-elevated);
}
.nb-cat-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.nb-cat-card:hover .nb-cat-card__thumb img {
  transform: scale(1.06);
}
.nb-cat-card__no-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--bg-elevated);
}
.nb-cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,12,16,0.92) 0%, rgba(12,12,16,0.2) 55%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  pointer-events: none;
}
.nb-cat-card__info {
  width: 100%;
}
.nb-cat-card__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nb-cat-card__stats {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nb-cat-card__count,
.nb-cat-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
}
.nb-cat-card__count svg,
.nb-cat-card__rating svg { opacity: 0.8; }

/* ═══════════════════════════════════
   RESPONSIVE — Category pages
═══════════════════════════════════ */
@media (max-width: 1200px) {
  .nb-category-grid-wrap .nb-video-grid,
  .nb-category-grid-wrap .thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
  .nb-cat-grid.thumbs,
  .nb-cat-grid.categories-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}

@media (max-width: 900px) {
  .nb-category-hero { padding: 24px 20px; }
  .nb-category-grid-wrap .nb-video-grid,
  .nb-category-grid-wrap .thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
  .nb-category-page .nb-sort-tabs {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .nb-category-page,
  .nb-categories-all-page { padding: 0 12px 32px; }
  .nb-category-hero { padding: 20px 16px; border-radius: 8px; }
  .nb-category-hero__title { font-size: 1.4rem; }
  .nb-category-hero__desc { font-size: 0.82rem; }
  .nb-category-page .nb-sort-tabs { gap: 2px; }
  .nb-category-page .nb-sort-tab { padding: 6px 12px; font-size: 0.78rem; }
  .nb-category-grid-wrap .nb-video-grid,
  .nb-category-grid-wrap .thumbs {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .nb-cat-grid.thumbs,
  .nb-cat-grid.categories-thumbs {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .nb-seo-text { padding: 18px 16px; }
}


/* ============================================================
   § 25. CREATOR CARDS — include_list_members_block_common.tpl
         /members/ directory + friends + conversations
   ============================================================ */

/* ── Grid wrapper ── */
.thumbs.community_thumbs.nb-creator-grid,
.nb-creator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  padding: 0;
  /* Reset KVS .thumbs float layout */
  float: none !important;
  width: 100% !important;
}

/* ── Card ── */
.nb-creator-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  /* Reset KVS .thumb.item floats */
  float: none !important;
  margin: 0 !important;
  width: auto !important;
  padding: 0 !important;
}
.nb-creator-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.nb-creator-card--verified {
  border-color: rgba(29,155,240,0.3);
}
.nb-creator-card--verified:hover {
  border-color: rgba(29,155,240,0.7);
  box-shadow: 0 8px 28px rgba(29,155,240,0.15);
}
.nb-creator-card--unread {
  border-color: rgba(225,29,72,0.4);
}

/* ── Card link ── */
.nb-creator-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 12px 16px;
  text-decoration: none;
  gap: 10px;
}

/* ── Avatar wrap ── */
.nb-creator-card__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

/* ── Avatar circle ── */
.nb-creator-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 2.5px solid var(--border-subtle);
  transition: border-color 0.2s;
}
.nb-creator-card--verified .nb-creator-card__avatar {
  border-color: var(--accent-creator);
  box-shadow: 0 0 0 3px rgba(29,155,240,0.15);
}
.nb-creator-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nb-creator-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg-elevated);
}

/* ── Verified dot on avatar ── */
.nb-creator-card__verified-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 20px;
  height: 20px;
  background: var(--accent-creator);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-surface);
  line-height: 1;
}

/* ── Unread messages dot ── */
.nb-creator-card__unread-dot {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--accent-primary);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-surface);
}

/* ── Card body text ── */
.nb-creator-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.nb-creator-card__name {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-bright);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.nb-creator-card__country {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-dim);
  display: block;
}

.nb-creator-card__subs {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--accent-creator);
  display: block;
}

.nb-creator-card__date {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--text-dim);
  display: block;
  opacity: 0.7;
}

.nb-creator-card__unread-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--accent-primary);
  font-weight: 600;
  display: block;
}

/* ── Ver Perfil CTA ── */
.nb-creator-card__cta {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nb-creator-card:hover .nb-creator-card__cta {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}
.nb-creator-card--verified:hover .nb-creator-card__cta {
  background: var(--accent-creator);
  border-color: var(--accent-creator);
}

/* ── Verified badge on name span (required for JS filter) ── */
.nb-creator-card__name.verified-badge-sm::after,
.nb-creator-card__name .verified-badge-sm::after {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: var(--accent-creator);
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Override old KVS community styles that conflict ── */
.thumbs.community_thumbs.nb-creator-grid .thumb.item {
  /* Cancel out any remaining KVS float/width overrides */
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* ── Community page: override heading margin from KVS ── */
.nb-creators-grid-block .heading,
.nb-creators-grid-block > .section-row > .heading {
  display: none;
}

/* ── Profile page: tab bar (include_sidebar_member_links.tpl) ── */
.nb-profile-tabs .section-row,
.nb-profile-tabs section.section-row {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}
.nb-profile-tabs .section-tabs.sort-holder {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  margin-bottom: 20px;
}
.nb-profile-tabs .section-tabs .link-tab {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nb-profile-tabs .section-tabs .link-tab:hover {
  background: var(--bg-elevated);
  color: var(--text-body);
}
.nb-profile-tabs .section-tabs .link-tab.active {
  background: var(--accent-primary);
  color: #fff;
  font-weight: 600;
}
.nb-profile-tabs .section-tabs .link-tab em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 9px;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
}
.nb-profile-tabs .section-tabs .link-tab.active em {
  background: rgba(255,255,255,0.25);
}
.nb-profile-tabs .section-tabs .link-tab em.small {
  font-size: 0.65rem;
}

/* ── Profile content panels ── */
.nb-profile-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px 48px;
}
.nb-profile-content__inner { }
.nb-profile-panels .section-row {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 20px;
  padding: 20px;
}
.nb-profile-panels .section-row .heading {
  margin-bottom: 16px;
}
.nb-profile-panels .section-row .heading h1,
.nb-profile-panels .section-row .heading h2 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0;
}

/* ── Breadcrumb on profile page (slight adjustment) ── */
.nb-breadcrumb .nb-breadcrumb__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  max-width: 1400px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 0.78rem;
}
.nb-breadcrumb__link {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}
.nb-breadcrumb__link:hover { color: var(--text-body); }
.nb-breadcrumb__sep { color: var(--border-accent); }
.nb-breadcrumb__current { color: var(--text-body); }

/* ═══════════════════════════════════
   RESPONSIVE — Creator cards
═══════════════════════════════════ */
@media (max-width: 900px) {
  .thumbs.community_thumbs.nb-creator-grid,
  .nb-creator-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .nb-creator-card__avatar { width: 70px; height: 70px; }
  .nb-profile-tabs .section-tabs.sort-holder {
    gap: 3px;
  }
  .nb-profile-tabs .section-tabs .link-tab {
    padding: 5px 10px;
    font-size: 0.75rem;
  }
}

@media (max-width: 600px) {
  .thumbs.community_thumbs.nb-creator-grid,
  .nb-creator-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .nb-creator-card__link { padding: 14px 8px 12px; gap: 7px; }
  .nb-creator-card__avatar { width: 60px; height: 60px; }
  .nb-creator-card__initials { font-size: 1.2rem; }
  .nb-creator-card__name { font-size: 0.78rem; }
  .nb-creator-card__country,
  .nb-creator-card__date { display: none; }
  .nb-creator-card__subs { font-size: 0.65rem; }
  .nb-creator-card__cta { padding: 4px 10px; font-size: 0.65rem; }
  .nb-profile-content { padding: 0 12px 32px; }
  .nb-profile-panels .section-row { padding: 14px; }
}

/* ── Model page: avatar sidebar + content section flex layout ── */
.holder-box .asside {
  flex-shrink: 0;
}
.holder-box .content-section {
  flex: 1;
  min-width: 0;
}

/* ── Model page: profile card stacked above video grid ── */
.model-holder-box {
  flex-direction: column !important;
  gap: 24px;
}
/* Profile card: photo left, info right */
.model-holder-box .asside {
  max-width: 100% !important;
  width: 100% !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0 28px;
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-subtle);
}
/* Photo column spans all rows */
.model-holder-box .asside .img-holder {
  grid-column: 1;
  grid-row: 1 / span 10;
  padding-bottom: 0 !important;
  height: auto !important;
  border-radius: 10px;
  overflow: hidden;
}
.model-holder-box .asside .img-holder img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 10px;
}
/* Title + info-boxes go in right column */
.model-holder-box .asside .title,
.model-holder-box .asside .info-box {
  grid-column: 2;
}
.model-holder-box .asside .title {
  padding-top: 4px;
  margin-bottom: 8px;
}
/* Content section (videos) fills full width below profile card */
.model-holder-box .content-section {
  width: 100%;
}
/* Mobile: stack photo above info */
@media (max-width: 700px) {
  .model-holder-box .asside {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 0;
  }
  .model-holder-box .asside .img-holder {
    grid-column: 1;
    grid-row: auto;
    width: 220px;
    margin: 0 auto 14px;
  }
  .model-holder-box .asside .title,
  .model-holder-box .asside .info-box {
    grid-column: 1;
    text-align: center;
  }
  .model-holder-box .asside .rate-holder {
    justify-content: center;
  }
}

/* ── Partner / friend links ── */
.nb-partner-links {
  padding: 12px 0 16px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 8px;
}
.nb-partner-links__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.nb-partner-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.nb-partner-links__list li a {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}
.nb-partner-links__list li a:hover {
  color: var(--text-body);
}

/* ── Smileys bar (overrides global img { display:block }) ── */
.smileys-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 0 10px;
}
.smileys-bar img {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.smileys-bar img:hover {
  opacity: 1;
  transform: scale(1.25);
}

/* ── Country flags — model cards & model view ────────────────────────── */
/* Models list: flag inside .title div */
.models-thumbs .flag-holder {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  vertical-align: middle;
}
.models-thumbs .flag-holder img {
  width: 18px;
  height: auto;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Model view page: flag badge next to model name */
.model-flag-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
}
.model-flag-badge img {
  width: 24px;
  height: auto;
  border-radius: 3px;
  display: inline-block;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Top Usuarios sidebar widget ────────────────────────────────────── */
.nb-topusr-widget { }
.nb-topusr-widget__list { display: flex; flex-direction: column; gap: 0; }

.nb-topusr-widget__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
  border-radius: 6px;
}
.nb-topusr-widget__item:last-child { border-bottom: none; }
.nb-topusr-widget__item:hover { background: var(--bg-elevated); }
.nb-topusr-widget__item--top .nb-topusr-widget__name { color: var(--text-bright); }

.nb-topusr-widget__rank {
  font-size: 1.1rem;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.nb-topusr-widget__av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nb-topusr-widget__av img { width: 100%; height: 100%; object-fit: cover; }
.nb-topusr-widget__initials {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-primary);
}

.nb-topusr-widget__info { flex: 1; min-width: 0; }
.nb-topusr-widget__name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nb-topusr-widget__stat {
  font-size: 0.75rem;
  color: var(--text-dim);
  display: block;
}

/* Verified badge — used across site */
.nb-vbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--accent-creator);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

/* Sidebar heading for top usuarios */
.nb-sidebar-block--topusr .nb-sidebar-block__heading { margin-bottom: 4px; }
.nb-sidebar-block--topusr .nb-sidebar-block__more {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .15s;
}
.nb-sidebar-block--topusr .nb-sidebar-block__more:hover { color: var(--accent-primary); }

/* ── Subir Album button variant ─────────────────────────────────────── */
.nb-upload-cta--album,
.nb-sidebar-upload-cta__btn--album {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--accent-creator) !important;
  color: var(--accent-creator) !important;
}
.nb-upload-cta--album:hover,
.nb-sidebar-upload-cta__btn--album:hover {
  background: var(--accent-creator) !important;
  color: #fff !important;
}

/* Sidebar upload CTA — dual button layout */
.nb-sidebar-upload-cta__btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.nb-sidebar-upload-cta__btns .nb-sidebar-upload-cta__btn {
  width: 100%;
  text-align: center;
  margin: 0;
}

/* Desktop header: album upload button sits next to video button */
.nb-upload-cta--album {
  animation: none !important;  /* no pulse on album btn */
}

/* fix: flag button inline alignment — compact action bar on mobile */
@media (max-width: 480px) {
  .nb-action-bar { gap: 3px; }
  .nb-action-btn { padding: 6px 8px; font-size: 0.78rem; }
  .nb-action-btn__label--mobile-hide { display: none; }
  .nb-action-bar__divider { margin: 0 1px; }
}

/* Skip-to-content link (WCAG 2.4.1) — visually hidden until focused */
.nb-skip-link {
  position: fixed;
  top: -100px;
  left: 0;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--accent-primary, #e11d48);
  color: #fff;
  font: 600 0.95rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.15s ease;
}
.nb-skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: -4px;
}
main[id="nb-main"]:focus { outline: none; }

/* ════════════════════════════════════════════════════════════════════
   § 26  CREATOR-ECONOMY UI — phase 1
   FAB (mobile upload), token chip (header), price chip (cards),
   tip jar (profile), onboarding nudge (banner).
   Renders gracefully when billing/donations aren't yet enabled.
════════════════════════════════════════════════════════════════════ */

/* ── 26.1 Sticky mobile upload FAB ───────────────────────────────── */
.nb-fab-upload {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  align-items: center;
  gap: 8px;
  padding: 13px 18px 13px 14px;
  background: linear-gradient(135deg, var(--accent-creator, #1d9bf0), #1583c7);
  color: #fff;
  font: 700 0.9rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(29,155,240,0.45), 0 2px 4px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.nb-fab-upload:hover,
.nb-fab-upload:focus { transform: scale(1.03); box-shadow: 0 8px 22px rgba(29,155,240,0.55), 0 3px 6px rgba(0,0,0,0.5); }
.nb-fab-upload:active { transform: scale(0.98); }
.nb-fab-upload svg { flex: none; }
.nb-fab-upload__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(29,155,240,0.55);
  animation: nb-fab-pulse 2.4s ease-out infinite;
}
@keyframes nb-fab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29,155,240,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(29,155,240,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,155,240,0); }
}
@media (max-width: 768px) {
  .nb-fab-upload { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-fab-upload__pulse { animation: none; }
}

/* ── 26.2 Token balance chip in header ──────────────────────────── */
.nb-token-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: rgba(234,179,8,0.12);
  color: var(--accent-gold, #eab308);
  font: 600 0.78rem/1 'DM Sans', system-ui, sans-serif;
  border: 1px solid rgba(234,179,8,0.3);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nb-token-chip:hover { background: rgba(234,179,8,0.2); border-color: rgba(234,179,8,0.5); }
.nb-token-chip__icon { font-size: 0.95em; line-height: 1; }
.nb-token-chip--zero { color: var(--text-dim, #71717a); background: rgba(255,255,255,0.04); border-color: var(--border-subtle, #27272a); }
.nb-token-chip--zero:hover { background: rgba(255,255,255,0.06); }

/* Inside the user-dropdown header (between avatar and unread-msg notice) */
.nb-user-dropdown-info .nb-token-chip { margin-top: 4px; }

/* ── 26.3 Price chip + locked overlay on video cards ────────────── */
.nb-price-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--accent-gold, #eab308);
  color: #1a1500;
  font: 700 0.72rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.nb-price-chip__icon { font-size: 0.9em; line-height: 1; }
.nb-card--locked .nb-card-img,
.nb-card--locked .nb-card-thumb img { filter: brightness(0.78) saturate(0.85); }
.nb-card--locked .nb-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.nb-card--owned { /* purchased — no dim, but show "Comprado" pill */ }
.nb-card-owned-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  background: rgba(34,197,94,0.92);
  color: #fff;
  font: 600 0.7rem/1 'DM Sans', system-ui, sans-serif;
  border-radius: 4px;
}

/* ── 26.4 Tip jar button on creator profile ─────────────────────── */
.nb-profile-tip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a1500;
  font: 700 0.88rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.nb-profile-tip:hover,
.nb-profile-tip:focus { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(245,158,11,0.35); }
.nb-profile-tip:active { transform: translateY(0); }
.nb-profile-tip[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim, #71717a);
}
.nb-profile-tip[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* ── 26.5 Post-signup onboarding nudge ──────────────────────────── */
.nb-onboarding-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px auto;
  max-width: 1240px;
  padding: 14px 50px 14px 18px;
  background: linear-gradient(135deg, rgba(29,155,240,0.12), rgba(225,29,72,0.10));
  border: 1px solid rgba(29,155,240,0.28);
  border-radius: 12px;
  color: var(--text-bright, #fafafa);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.nb-onboarding-banner__emoji { font-size: 1.6rem; flex: none; }
.nb-onboarding-banner__copy { flex: 1; min-width: 0; }
.nb-onboarding-banner__title {
  font: 700 1rem/1.25 'Plus Jakarta Sans', system-ui, sans-serif;
  margin: 0 0 2px;
  color: var(--text-bright, #fafafa);
}
.nb-onboarding-banner__sub {
  font-size: 0.84rem;
  color: var(--text-body, #d4d4d8);
  margin: 0;
}
.nb-onboarding-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  background: var(--accent-creator, #1d9bf0);
  color: #fff;
  font: 700 0.85rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.nb-onboarding-banner__cta:hover { background: #1583c7; }
.nb-onboarding-banner__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-dim, #71717a);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 6px;
}
.nb-onboarding-banner__close:hover { background: rgba(255,255,255,0.06); color: var(--text-bright, #fafafa); }
@media (max-width: 640px) {
  .nb-onboarding-banner { flex-wrap: wrap; padding-right: 38px; }
  .nb-onboarding-banner__cta { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────
   § 27  PAYOUT DETAILS UI — creator earnings withdrawal
   ───────────────────────────────────────────────────────────────── */
.nb-payout-divider {
  margin: 28px 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(34,197,94,0.10), rgba(234,179,8,0.06));
  border: 1px solid rgba(34,197,94,0.25);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nb-payout-divider__label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-success, #22c55e);
  letter-spacing: 0.01em;
}
.nb-payout-divider__hint {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-dim, #71717a);
}
.field-hint {
  margin-top: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-dim, #71717a);
}

/* ─────────────────────────────────────────────────────────────────
   § 27.b  CREATOR-PROFILE DIVIDER — for socials block in profile edit
   ───────────────────────────────────────────────────────────────── */
.nb-creator-divider {
  margin: 28px 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(29,155,240,0.10), rgba(225,29,72,0.06));
  border: 1px solid rgba(29,155,240,0.22);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nb-creator-divider__label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-creator, #1d9bf0);
  letter-spacing: 0.01em;
}
.nb-creator-divider__hint {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-dim, #71717a);
}

/* ─────────────────────────────────────────────────────────────────
   § 28  CREATOR DASHBOARD — top of /my/ profile page
   ───────────────────────────────────────────────────────────────── */
.nb-creator-dashboard {
  margin: 0 auto 24px;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-surface, #151519) 0%, var(--bg-elevated, #1e1e24) 100%);
  border: 1px solid var(--border-subtle, #27272a);
  max-width: 1280px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-body, #d4d4d8);
}

.nb-cd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle, #27272a);
}
.nb-cd-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nb-cd-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-creator, #1d9bf0);
  flex-shrink: 0;
}
.nb-cd-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-creator, #1d9bf0);
  color: white;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  border: none;
}
.nb-cd-greeting {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-bright, #fafafa);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nb-cd-subline {
  font-size: 0.8125rem;
  color: var(--text-dim, #71717a);
  margin-top: 2px;
}
.nb-cd-primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-creator, #1d9bf0), #1488d1);
  color: white;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: 0 6px 16px -4px rgba(29,155,240,0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nb-cd-primary-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(29,155,240,0.6);
  color: white;
}

.nb-cd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.nb-cd-stat {
  background: var(--bg-deep, #0c0c10);
  border: 1px solid var(--border-subtle, #27272a);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nb-cd-stat__value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.625rem;
  color: var(--text-bright, #fafafa);
  line-height: 1.1;
}
.nb-cd-stat__label {
  font-size: 0.8125rem;
  color: var(--text-dim, #71717a);
}
.nb-cd-stat__action {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--accent-gold, #eab308);
  text-decoration: none;
  font-weight: 600;
}
.nb-cd-stat__action:hover { color: #facc15; }

.nb-cd-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.nb-cd-action {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 10px;
  background: var(--bg-deep, #0c0c10);
  border: 1px solid var(--border-subtle, #27272a);
  text-decoration: none;
  color: var(--text-body, #d4d4d8);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.nb-cd-action:hover {
  border-color: var(--border-accent, #3f3f46);
  transform: translateY(-1px);
  color: var(--text-bright, #fafafa);
}
.nb-cd-action__icon { font-size: 1.5rem; line-height: 1; }
.nb-cd-action__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-bright, #fafafa);
}
.nb-cd-action__desc { font-size: 0.8125rem; color: var(--text-dim, #71717a); }
.nb-cd-action--upload   { border-left: 3px solid var(--accent-creator, #1d9bf0); }
.nb-cd-action--profile  { border-left: 3px solid var(--text-dim, #71717a); }
.nb-cd-action--earnings { border-left: 3px solid var(--accent-gold, #eab308); }
.nb-cd-action--payout   { border-left: 3px solid var(--accent-success, #22c55e); }

.nb-cd-payout-warning {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(234,179,8,0.10);
  border: 1px solid rgba(234,179,8,0.4);
  display: flex;
  gap: 10px;
  font-size: 0.875rem;
  align-items: flex-start;
  color: var(--text-body, #d4d4d8);
}
.nb-cd-payout-warning a {
  color: var(--accent-gold, #eab308);
  font-weight: 600;
  text-decoration: none;
}
.nb-cd-payout-warning a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .nb-cd-header { flex-direction: column; align-items: flex-start; }
  .nb-cd-primary-cta { width: 100%; justify-content: center; }
}

/* Verification success flash on /my/?verif=ok */
.nb-cd-flash-success {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.4);
  color: var(--text-bright, #fafafa);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.nb-cd-flash-success strong {
  color: var(--accent-success, #22c55e);
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  margin-bottom: 2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   § CRYPTO PROMO — "Top Poster del Mes gana Cripto"
   Seductive announcement banner (homepage, below hero)
   ════════════════════════════════════════════════════════════════════ */

.nb-crypto-promo {
  max-width: 1320px;
  margin: var(--space-5) auto var(--space-5);
  padding: 0 var(--space-4);
}

.nb-crypto-promo__inner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  background:
    linear-gradient(135deg,
      rgba(225, 29, 72, 0.16) 0%,
      rgba(20, 10, 18, 0.92) 42%,
      rgba(15, 12, 18, 0.92) 64%,
      rgba(234, 179, 8, 0.14) 100%),
    var(--bg-surface);
  background-clip: padding-box;
  box-shadow:
    0 18px 50px -22px rgba(225, 29, 72, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  isolation: isolate;
}

/* Animated gradient hairline border */
.nb-crypto-promo__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg,
    rgba(225, 29, 72, 0.85),
    rgba(234, 179, 8, 0.55),
    rgba(225, 29, 72, 0.15),
    rgba(234, 179, 8, 0.7));
  background-size: 280% 280%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: nbCryptoBorder 7s ease infinite;
  pointer-events: none;
  z-index: 2;
}

/* Shimmer sweep across the banner */
.nb-crypto-promo__inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    rgba(255, 192, 203, 0.10),
    transparent);
  transform: skewX(-18deg);
  animation: nbCryptoShimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes nbCryptoBorder {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes nbCryptoShimmer {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* Soft rose glow behind the text */
.nb-crypto-promo__glow {
  position: absolute;
  top: -40%;
  left: -10%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.35) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: nbCryptoPulse 4.5s ease-in-out infinite;
}

@keyframes nbCryptoPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.12); }
}

/* Floating crypto coins */
.nb-crypto-promo__coin {
  position: absolute;
  z-index: 0;
  color: var(--accent-gold);
  opacity: 0.18;
  font-size: 2.6rem;
  pointer-events: none;
  text-shadow: 0 0 18px rgba(234, 179, 8, 0.5);
  animation: nbCryptoFloat 6s ease-in-out infinite;
}
.nb-crypto-promo__coin--1 { right: 7%;  top: 16%; font-size: 3rem; }
.nb-crypto-promo__coin--2 { right: 22%; bottom: 12%; color: var(--accent-creator); opacity: 0.16; animation-delay: 1.4s; }
.nb-crypto-promo__coin--3 { right: 13%; bottom: 30%; opacity: 0.22; animation-delay: 2.6s; }

@keyframes nbCryptoFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(4deg); }
}

.nb-crypto-promo__body {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-width: 0;
}

.nb-crypto-promo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: var(--space-2);
}

.nb-crypto-promo__live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-success);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: nbCryptoLive 1.8s ease-out infinite;
}

@keyframes nbCryptoLive {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.nb-crypto-promo__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  line-height: 1.18;
  color: var(--text-bright);
  margin: 0 0 var(--space-2) 0;
}

.nb-crypto-promo__hl {
  color: var(--accent-primary);
  white-space: nowrap;
}

.nb-crypto-promo__crypto {
  background: linear-gradient(90deg, var(--accent-gold), #fde047);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.nb-crypto-promo__sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
  max-width: 60ch;
}
.nb-crypto-promo__sub strong { color: var(--text-bright); font-weight: 600; }

/* Current month's "Top Poster" leader line (generated hourly) */
.nb-crypto-promo__leader {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: var(--space-3, 12px) 0 0;
  padding: 7px 12px 7px 10px;
  border-radius: var(--radius-md, 10px);
  background: rgba(234, 179, 8, 0.10);
  border: 1px solid rgba(234, 179, 8, 0.30);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--text-body);
}
.nb-crypto-promo__leader-crown { font-size: 1rem; }
.nb-crypto-promo__leader-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent-gold, #eab308);
  text-decoration: none;
  transition: color var(--transition-fast, .15s ease);
}
.nb-crypto-promo__leader-name:hover { color: var(--text-bright); text-decoration: underline; }
.nb-crypto-promo__leader-stat {
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .nb-crypto-promo__leader { font-size: 0.84rem; width: 100%; }
}

.nb-crypto-promo__actions {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 190px;
}

.nb-crypto-promo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.nb-crypto-promo__btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-primary), #f43f5e);
  box-shadow: 0 10px 28px -10px rgba(225, 29, 72, 0.8);
  animation: nbCryptoCta 2.6s ease-in-out infinite;
}
.nb-crypto-promo__btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px -8px rgba(225, 29, 72, 0.95);
}

@keyframes nbCryptoCta {
  0%, 100% { box-shadow: 0 10px 28px -10px rgba(225, 29, 72, 0.8); }
  50%      { box-shadow: 0 10px 34px -6px rgba(225, 29, 72, 1); }
}

.nb-crypto-promo__btn--ghost {
  color: var(--text-bright);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-accent);
}
.nb-crypto-promo__btn--ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-gold);
}

.nb-crypto-promo__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nb-crypto-promo__close:hover { color: var(--text-bright); background: rgba(0, 0, 0, 0.45); }

/* ── Mobile (LATAM is 90%+ mobile) ── */
@media (max-width: 720px) {
  .nb-crypto-promo { margin-top: var(--space-4); }
  .nb-crypto-promo__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-5);
  }
  .nb-crypto-promo__coin--1 { font-size: 2.2rem; top: 10px; right: 12px; }
  .nb-crypto-promo__coin--2,
  .nb-crypto-promo__coin--3 { display: none; }
  .nb-crypto-promo__actions {
    flex-direction: row;
    width: 100%;
    min-width: 0;
  }
  .nb-crypto-promo__btn { flex: 1 1 auto; padding: var(--space-3) var(--space-3); }
  .nb-crypto-promo__sub { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-crypto-promo__inner::before,
  .nb-crypto-promo__inner::after,
  .nb-crypto-promo__glow,
  .nb-crypto-promo__coin,
  .nb-crypto-promo__live,
  .nb-crypto-promo__btn--primary { animation: none; }
}