:root {
  --qplay-bg: #0f0710;
  --qplay-surface: #1c0f1a;
  --qplay-surface-2: #0f0710;
  --qplay-primary: #af4694;
  --qplay-brand-pink: #c44292;
  --qplay-brand-wine: #700f4b;
  --qplay-text: #ffffff;
  --qplay-light: #d6cacd;
  --qplay-muted: #c6b8c1; /* legibilidade 40+: contraste maior que o antigo #9b8a95, ainda "muted" */
  --qplay-border: rgba(255, 255, 255, 0.08);
  --qplay-success: #46e99a;
  --qplay-danger: #ff7a7a;
  --qplay-live: #ff3b5c; /* vermelho "AO VIVO" (mesma tinta em ambos os temas) */
  --qplay-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  --qplay-gradient: linear-gradient(135deg, #c44292 0%, #700f4b 100%);
  --bs-body-bg: var(--qplay-bg);
  --bs-body-color: #f5f5f7;
  --bs-heading-color: #ffffff;
  --bs-border-color: rgba(255, 255, 255, 0.08);
  --bs-secondary-color: var(--qplay-muted);
  color-scheme: dark;
}

html {
  min-height: 100%;
  font-size: 16px;
  background: var(--qplay-bg);
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--qplay-bg) !important;
  color: #f5f5f7;
  font-family: Sora, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
}

a:hover {
  color: inherit;
}

/* ===== Container ===== */
.qplay-container,
.page-shell {
  width: min(1152px, calc(100% - 48px));
  margin: 0 auto;
}

/* ===== Header (antigo: sticky top-0 border-b border-white/5 bg-background/80 backdrop-blur) ===== */
.qplay-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(9, 4, 9, 0.86);
  backdrop-filter: blur(18px);
}

/* antigo: py-3 -> ~12px vertical, items-center gap-5 */
.qplay-nav {
  padding: 0;
}

.qplay-nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 57px;
}

/* antigo: shrink-0 h-7 w-auto */
.qplay-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.qplay-brand img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* antigo: hidden sm:flex items-center gap-5 text-sm text-muted */
.qplay-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 1 auto;
}

.navbar-nav {
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  gap: 14px;
}

.nav-link {
  color: var(--qplay-muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.nav-link:hover,
.nav-link:focus {
  color: #fff;
}

/* Página atual: cor plena + sublinhado rosa da marca. Funciona nos dois temas
   (o header permanece escuro no tema claro). Seletor escopado ao header com
   .navbar-nav para vencer a regra do Bootstrap `.navbar-nav .nav-link.active`
   (var(--bs-navbar-active-color) = preto), que senão deixava o item ativo ilegível. */
.qplay-header .navbar-nav .nav-link.active {
  position: relative;
  color: #fff;
  font-weight: 500;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--qplay-primary);
}

.navbar-toggler {
  border-color: var(--qplay-border);
  margin-left: auto;
}

.navbar-toggler-icon {
  filter: invert(1);
}

/* Ações do usuário (sino + avatar) — sempre visíveis, mesmo no modo estreito */
.qplay-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* antigo: ml-auto max-w-xs rounded-lg border border-white/10 bg-surface px-3 py-1.5 text-sm */
.qplay-search {
  flex: 0 1 320px;
  max-width: 320px;
  margin-left: 14px;
  margin-right: auto;
}

.qplay-search input,
.form-control {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(20, 10, 19, 0.86);
  color: var(--qplay-text);
  padding: 6px 12px;
  font-size: 0.875rem;
  outline: 0;
}

.qplay-search input::placeholder,
.form-control::placeholder {
  color: rgba(214, 202, 205, 0.56);
}

.qplay-search input:focus,
.form-control:focus {
  border-color: var(--qplay-primary);
  background: rgba(20, 10, 19, 0.96);
  color: var(--qplay-text);
  box-shadow: none;
}

/* Lucide icons inside any element */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.qplay-login,
.qplay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--qplay-gradient);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  transition: opacity 150ms;
}

.qplay-login {
  height: 34px;
  padding: 0 12px;
  flex-shrink: 0;
}

.qplay-button.secondary {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.qplay-login:hover,
.qplay-login:focus,
.qplay-button:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
}

.qplay-notification-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 999px;
  color: var(--qplay-muted);
  text-decoration: none;
}

.qplay-notification-link:hover,
.qplay-notification-link:focus {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.qplay-notification-link span {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--qplay-primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.qplay-avatar-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 2px 9px 2px 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: transparent;
  color: var(--qplay-muted);
}

.qplay-avatar-button:hover,
.qplay-avatar-button:focus {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.qplay-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--qplay-gradient);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

.qplay-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Main (antigo: mx-auto max-w-6xl space-y-8 px-6 pb-16 pt-6) ===== */
.page-shell {
  padding-top: 24px;
  padding-bottom: 64px;
}

.page-shell > main {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.page-shell:has(.player-page-tight),
.page-shell:has(.player-page-wide) {
  padding-top: 4px;
}

.player-page-tight {
  width: min(860px, 100%);
}

/* Página de live: container largo (vídeo grande + chat à direita, estilo YouTube) */
.player-page-wide {
  width: min(1320px, 100%);
}

.qplay-player-shell {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
}

/* =========================================================================
   Player limpo do YouTube (só na página de assistir) — visual do player Panda
   do QPlay: 3 círculos rosa centrais (voltar 10s / play-pause / avançar 10s) +
   barra inferior fina (progresso rosa com handle, mudo/tempo, velocidade/tela cheia).
   Esconde a marca/links/recomendados do YouTube por baixo.
   Rosa vívido de referência: #d81f9a.
   ========================================================================= */
.qplay-player-shell.is-clean { border-radius: 14px; }
.qplay-player-shell.is-clean .ratio { border-radius: 14px; overflow: hidden; }
.qplay-player-shell.is-clean.is-chrome-hidden { cursor: none; }

/* Camada anti-clique: cobre o vídeo, captura hover/clique (impede o YouTube de
   mostrar título/logo/links). Escurece levemente quando pausado (destaque do play). */
.qplay-clean-overlay {
  position: absolute; inset: 0; z-index: 2; cursor: pointer;
  background: rgba(0,0,0,0); transition: background .25s ease;
}
.qplay-player-shell.is-paused .qplay-clean-overlay { background: rgba(0,0,0,0.32); }

/* Capa OPACA pré-play: esconde por completo o pôster inicial do YouTube (título, foto/nome do
   canal, "Assistir no YouTube") até o primeiro play. z-index acima da barra/centro; some no play. */
.qplay-clean-poster {
  position: absolute; inset: 0; z-index: 7; cursor: pointer;
  background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat;
  display: grid; place-items: center;
  transition: opacity .3s ease, visibility .3s ease;
}
.qplay-clean-poster::after {
  content: ""; position: absolute; inset: 0; background: rgba(9,4,9,0.38);
}
.qplay-clean-poster.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.qplay-poster-play {
  position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: #d81f9a; color: #fff; box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  transition: transform .15s ease, background .15s ease;
}
.qplay-poster-play:hover { background: #e83fac; transform: scale(1.06); }
.qplay-poster-play [data-lucide] { width: 34px; height: 34px; margin-left: 3px; }
@media (max-width: 640px) { .qplay-poster-play { width: 64px; height: 64px; } .qplay-poster-play [data-lucide] { width: 28px; height: 28px; } }

/* Controles centrais — 3 círculos rosa sólidos, centralizados. Aparecem quando
   pausado ou no hover; somem junto com a barra ao tocar + mouse parado. */
.qplay-clean-center {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 34px;
  opacity: 1; transition: opacity .25s ease;
}
.qplay-player-shell.is-chrome-hidden .qplay-clean-center { opacity: 0; }
.qplay-center-btn {
  pointer-events: auto; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: #d81f9a; box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: transform .15s ease, background .15s ease;
}
.qplay-center-btn:hover { background: #e83fac; transform: scale(1.06); }
.qplay-center-btn:active { transform: scale(0.96); }
.qplay-center-side { width: 52px; height: 52px; }
.qplay-center-main { width: 76px; height: 76px; }
.qplay-center-side [data-lucide], .qplay-center-side svg { width: 26px; height: 26px; }
.qplay-center-main [data-lucide], .qplay-center-main svg { width: 34px; height: 34px; }
/* número "10" sobreposto no centro do ícone de voltar/avançar. */
.qplay-center-num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 0.55rem; font-weight: 800; line-height: 1; color: #fff; pointer-events: none;
}

/* Barra inferior fina, com gradiente escuro na base. */
.qplay-clean-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; flex-direction: column; gap: 9px;
  padding: 28px 14px 11px;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.32) 58%, rgba(0,0,0,0) 100%);
  opacity: 1; transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}
.qplay-player-shell.is-chrome-hidden .qplay-clean-bar {
  opacity: 0; transform: translateY(8px); pointer-events: none;
}
.qplay-clean-progress {
  position: relative; height: 7px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.3);
  touch-action: none; /* permite arrastar a barra sem a pagina rolar no celular */
}
/* Area de toque invisivel bem maior que a barra (mais facil de pegar o tempo no celular). */
.qplay-clean-progress::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px;
}
.qplay-clean-progress:hover,
.qplay-clean-progress.is-dragging { height: 10px; }
.qplay-clean-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: #d81f9a; border-radius: 999px;
}
.qplay-clean-handle {
  position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.qplay-clean-progress.is-dragging .qplay-clean-handle { transform: translateY(-50%) scale(1.15); }
.qplay-clean-row { display: flex; align-items: center; justify-content: space-between; }
.qplay-clean-side { display: flex; align-items: center; gap: 8px; }
.qplay-clean-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: #fff; opacity: 0.85; cursor: pointer;
  transition: opacity .15s, background .15s;
}
.qplay-clean-btn:hover { opacity: 1; background: rgba(255,255,255,0.14); }
.qplay-clean-btn [data-lucide], .qplay-clean-btn svg { width: 20px; height: 20px; }
.qplay-clean-time {
  font-size: 0.82rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
}

/* Botão "AO VIVO" (só em lives no ar): pill pequeno. Cinza/apagado quando atrasado (clicável
   para voltar ao vivo); vermelho com bolinha pulsante quando estamos na borda ao vivo. */
.qplay-clean-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,0.16); opacity: 0.8;
  transition: opacity .15s, background .15s;
}
.qplay-clean-live:hover { opacity: 1; }
.qplay-clean-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.7);
}
.qplay-clean-live.is-live-edge {
  background: #e00e2d; opacity: 1; cursor: default;
}
.qplay-clean-live.is-live-edge .qplay-clean-live-dot {
  background: #fff; animation: qplay-live-pulse 1.6s ease-in-out infinite;
}
@keyframes qplay-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Menu de velocidade (abre acima da engrenagem). */
.qplay-clean-speed { position: relative; }
.qplay-clean-speed-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 5;
  display: flex; flex-direction: column; min-width: 100px; padding: 5px;
  background: rgba(20, 12, 20, 0.96); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
.qplay-clean-speed-menu[hidden] { display: none; }
.qplay-clean-speed-menu button {
  text-align: left; border: 0; background: transparent; color: rgba(255,255,255,0.85);
  font-size: 0.82rem; padding: 7px 10px; border-radius: 7px; cursor: pointer;
}
.qplay-clean-speed-menu button:hover { background: rgba(255,255,255,0.1); color: #fff; }
.qplay-clean-speed-menu button.is-active {
  color: #fff; background: rgba(216, 31, 154, 0.28); font-weight: 700;
}

/* Tela cheia no shell (não no fs nativo do YouTube, que desabilitamos). */
.qplay-player-shell.is-fullscreen {
  position: fixed; inset: 0; z-index: 2000;
  width: 100vw; height: 100vh; border-radius: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.qplay-player-shell.is-fullscreen .ratio {
  width: 100%; height: 100%; padding: 0 !important; border-radius: 0;
}
.qplay-player-shell.is-fullscreen .ratio > * { position: absolute; inset: 0; }

/* =========================================================================
   Modo cinema: tela cheia total do player para espelhar na TV sem a interface
   do app. "Tela cheia via CSS" (overlay fixo) para funcionar no iOS, onde
   requestFullscreen de <div> é limitado. Aditivo ao is-fullscreen do desktop.
   ========================================================================= */
body.qplay-cinema { overflow: hidden; }
body.qplay-cinema .qplay-player-shell {
  position: fixed; inset: 0; z-index: 9999;
  width: 100vw; height: 100vh; border-radius: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
}
body.qplay-cinema .qplay-player-shell .ratio {
  width: 100%; height: 100%; padding: 0 !important; border-radius: 0;
}
body.qplay-cinema .qplay-player-shell .ratio > * { position: absolute; inset: 0; }
/* Esconde toda a interface fora do player: cabeçalho, tabbar mobile, chat/lateral
   da live e o assistente flutuante. Só o player fica visível. */
body.qplay-cinema .qplay-header,
body.qplay-cinema .mobile-tabbar,
body.qplay-cinema .live-side,
body.qplay-cinema .quadradinho-widget { display: none !important; }

/* Botão de sair do cinema (X no canto) — só visível em body.qplay-cinema. */
.qplay-cinema-exit {
  position: absolute; top: 14px; right: 14px; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.qplay-cinema-exit:hover { background: rgba(0,0,0,0.8); transform: scale(1.06); }
.qplay-cinema-exit [data-lucide], .qplay-cinema-exit svg { width: 24px; height: 24px; }
body.qplay-cinema .qplay-cinema-exit { display: inline-flex; }

/* Overlay de fim (QPlay): cobre a tela de recomendados do YouTube.
   z-index acima da capa (.qplay-clean-poster, z-index 7) para os botões Reprisar/Próximo
   continuarem clicáveis mesmo quando a capa de pausa aparece no fim do vídeo. */
.qplay-end-overlay {
  position: absolute; inset: 0; z-index: 8;
  display: none; align-items: center; justify-content: center;
  background: rgba(15, 7, 16, 0.82); backdrop-filter: blur(3px);
}
.qplay-end-overlay.is-visible { display: flex; }
.qplay-end-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 16px;
}
/* Botões do fim no mesmo rosa vívido dos controles centrais. */
.qplay-clean-cta {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 10px 20px; font-size: 0.9rem; font-weight: 700; color: #fff;
  background: #d81f9a; box-shadow: 0 6px 18px rgba(216, 31, 154, 0.4);
  transition: background .15s, transform .15s;
}
.qplay-clean-cta:hover { background: #e83fac; transform: translateY(-1px); }
.qplay-clean-cta-ghost {
  background: transparent; border: 1.5px solid rgba(255,255,255,0.5); box-shadow: none;
}
.qplay-clean-cta-ghost:hover { background: rgba(255,255,255,0.12); }
.qplay-clean-cta [data-lucide], .qplay-clean-cta svg { width: 16px; height: 16px; }

/* Badge do trailer + botão parar. */
.qplay-trailer-badge {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  display: none; align-items: center; gap: 8px;
  padding: 5px 6px 5px 12px; border-radius: 999px;
  background: rgba(216, 31, 154, 0.94); color: #fff;
  font-size: 0.8rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.qplay-trailer-badge.is-visible { display: inline-flex; }
.qplay-trailer-badge button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255,255,255,0.22); color: #fff; cursor: pointer;
}
.qplay-trailer-badge button:hover { background: rgba(255,255,255,0.38); }
.qplay-trailer-badge [data-lucide], .qplay-trailer-badge svg { width: 14px; height: 14px; }

@media (max-width: 576px) {
  .qplay-clean-center { gap: 22px; }
  .qplay-center-side { width: 46px; height: 46px; }
  .qplay-center-main { width: 64px; height: 64px; }
  .qplay-center-side [data-lucide], .qplay-center-side svg { width: 22px; height: 22px; }
  .qplay-center-main [data-lucide], .qplay-center-main svg { width: 30px; height: 30px; }
  .qplay-clean-bar { padding: 24px 10px 9px; }
  .qplay-clean-btn { width: 30px; height: 30px; }
  .qplay-clean-btn [data-lucide], .qplay-clean-btn svg { width: 18px; height: 18px; }
  .qplay-clean-time { font-size: 0.75rem; }
}

/* Gate "Entre para assistir": capa do conteúdo desfocada + CTA centralizado (conteúdo
   gratuito que exige login). A capa vem inline via background-image no elemento. */
.qplay-gate {
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; border-radius: 12px;
}
.qplay-gate::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(15, 7, 16, 0.78); backdrop-filter: blur(6px); border-radius: 12px;
}
.qplay-gate-inner {
  position: relative; text-align: center; padding: 24px; color: #fff; max-width: 460px;
}
.qplay-gate-inner [data-lucide] { color: var(--qplay-primary); }

/* Banner "Entre para assistir" nas páginas de listagem (curso/coleção) para anônimo. */
.login-banner {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding: 11px 15px; border-radius: 12px; font-size: 0.92rem;
  background: rgba(175, 70, 148, 0.12); border: 1px solid rgba(175, 70, 148, 0.32); color: #fff;
}
.login-banner [data-lucide] { width: 18px; height: 18px; color: var(--qplay-primary); flex: 0 0 auto; }
.login-banner a { color: var(--qplay-primary); font-weight: 600; }

/* Botão "Ver todos" nos cards de estatística (abre o modal com a lista completa). */
.stat-more-btn {
  flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.14); background: transparent;
  color: var(--qplay-muted); font-size: 0.76rem; font-weight: 600; padding: 4px 11px;
  border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.stat-more-btn:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.24); }

/* Sheet de "Compartilhar imagem" (escolha de formato) — bottom sheet no mobile, modal no desktop. */
/* Ícones das redes vinculadas (Instagram/Facebook) no cartão de identidade do perfil. */
.profile-socials { display: flex; gap: 8px; margin: 6px 0 2px; }
.profile-social {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  color: #fff; text-decoration: none; transition: background .15s ease, transform .15s ease;
}
.profile-social:hover { background: var(--qplay-primary, #af4694); transform: translateY(-1px); }
.profile-social [data-lucide] { width: 17px; height: 17px; }

/* Modal do trailer manual (embed do trailer cadastrado no admin). */
.trailer-modal {
  position: fixed; inset: 0; z-index: 4200; background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.trailer-modal-box { position: relative; width: min(960px, 96vw); }
.trailer-modal-box .ratio { border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
.trailer-modal-close {
  position: absolute; top: -44px; right: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.14); color: #fff;
}
.trailer-modal-close:hover { background: rgba(255,255,255,0.26); }
.trailer-modal-close [data-lucide] { width: 18px; height: 18px; }
@media (max-width: 640px) { .trailer-modal-close { top: auto; bottom: -44px; right: 50%; transform: translateX(50%); } }

.share-sheet { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.6); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .share-sheet { align-items: center; } }
.share-sheet-box {
  width: 100%; max-width: 460px; background: var(--qplay-surface, #1c0f1a); color: #fff;
  border-radius: 20px 20px 0 0; padding: 20px 20px 24px; box-shadow: 0 -12px 40px rgba(0,0,0,0.5);
}
@media (min-width: 640px) { .share-sheet-box { border-radius: 18px; } }
.share-sheet-box h3 { margin: 0 0 2px; font-size: 1.1rem; }
.share-sheet-box > p { margin: 0 0 16px; color: var(--qplay-muted, #9b8a95); font-size: 0.88rem; }
.share-sheet-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.share-sheet-opts button {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: rgba(255,255,255,0.04);
  color: #fff; cursor: pointer; font-weight: 600; font-size: 0.9rem;
}
.share-sheet-opts button:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); }
.share-sheet-opts button [data-lucide] { width: 26px; height: 26px; color: var(--qplay-primary); }
.share-sheet-opts button small { color: var(--qplay-muted, #9b8a95); font-weight: 500; font-size: 0.72rem; }
.share-sheet-cancel {
  width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 12px;
  background: rgba(255,255,255,0.06); color: #fff; font-weight: 600; cursor: pointer;
}
.share-sheet-cancel:hover { background: rgba(255,255,255,0.1); }

/* Menu de compartilhamento unificado: redes (com logo), imagem e embed. */
.share-sheet-label {
  margin: 18px 0 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--qplay-muted, #9b8a95);
}
.share-social { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.share-net {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 2px;
  border: 0; background: none; color: #fff; cursor: pointer; font-weight: 600; font-size: 0.78rem;
  text-decoration: none; text-align: center;
}
.share-ic {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px;
  color: #fff; transition: transform 0.15s ease, filter 0.15s ease;
}
.share-net:hover .share-ic { transform: translateY(-2px); filter: brightness(1.08); }
.share-ic svg { width: 26px; height: 26px; }
.share-ic [data-lucide] { width: 22px; height: 22px; }
.share-ic.wa { background: #25d366; }
.share-ic.fb { background: #1877f2; }
.share-ic.ig { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.share-ic.cp { background: rgba(255,255,255,0.12); }
.share-embed { display: flex; flex-direction: column; gap: 8px; }
.share-embed textarea {
  width: 100%; resize: none; border-radius: 12px; padding: 10px 12px; font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
}
.share-embed-copy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(255,255,255,0.05);
  color: #fff; font-weight: 600; cursor: pointer; font-size: 0.85rem;
}
.share-embed-copy:hover { background: rgba(255,255,255,0.1); }
.share-embed-copy [data-lucide] { width: 16px; height: 16px; }

/* Card "Próximo episódio" abaixo do player */
.autoplay-next-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--qplay-surface, #1c0f1a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.autoplay-next-card:hover {
  border-color: var(--qplay-primary, #e91e8c);
  transform: translateY(-1px);
  color: #fff;
}

.autoplay-next-thumb {
  width: 128px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}

.autoplay-next-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.autoplay-next-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--qplay-muted, rgba(255, 255, 255, 0.55));
}

.autoplay-next-title {
  font-weight: 600;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autoplay-next-card [data-lucide] {
  flex: 0 0 auto;
  color: var(--qplay-primary, #e91e8c);
}

/* Overlay de contagem regressiva (autoplay ao terminar o vídeo) */
.autoplay-next-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: rgba(15, 7, 16, 0.82);
  backdrop-filter: blur(4px);
}

.autoplay-next-overlay-text {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
}

.autoplay-next-overlay-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.lesson-player-shell {
  width: min(860px, 100%);
  margin: 0 auto;
}

.course-detail-page {
  width: min(860px, 100%);
}

.course-detail-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #080508;
  box-shadow: var(--qplay-shadow);
}

.course-detail-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.68));
  pointer-events: none;
}

.course-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attendance-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(196, 66, 146, 0.38);
  border-radius: var(--qplay-radius-card); /* raio unificado do rail da live */
  background:
    linear-gradient(135deg, rgba(196, 66, 146, 0.18), rgba(255, 255, 255, 0.035)),
    rgba(14, 7, 14, 0.92);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

/* Card de presença como chamada para login (visitante anônimo): borda pink mais forte. */
.attendance-card--cta { border-color: rgba(196, 66, 146, 0.7); }
.attendance-card--cta .attendance-action { flex-shrink: 0; }

.attendance-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  background: var(--qplay-gradient);
}

.attendance-icon svg {
  width: 19px;
  height: 19px;
}

.attendance-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.attendance-copy strong {
  color: var(--qplay-text);
  font-size: 0.9rem;
}

.attendance-copy span {
  color: var(--qplay-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.attendance-action {
  margin: 0;
  flex: 0 0 auto;
}

.live-room-panel {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

/* Layout 2 colunas: vídeo à esquerda, painel de online + chat à direita.
   O chat usa minmax pra ceder largura ao vídeo em telas médias (vídeo dominante). */
.live-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: stretch;
}
/* Raio unificado do player dentro da sala (o global segue 16px nas demais páginas). */
.live-top .qplay-player-shell { border-radius: var(--qplay-radius-card); }
.live-top-main { min-width: 0; }

/* ============================ Reações ao vivo ============================
   Emojis flutuantes que sobem sobre o player + barra compacta de envio.
   Efêmero (não persiste); conteúdo do usuário (emoji permitido aqui). */
.live-reactions-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* nunca bloqueia os controles do player */
  z-index: 4;           /* acima do iframe, abaixo dos overlays/controles do player limpo */
}
.live-reaction-emoji {
  position: absolute;
  bottom: 6%;
  font-size: 30px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  will-change: bottom, transform, opacity;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  animation: live-reaction-rise 2.6s ease-out forwards;
}
@keyframes live-reaction-rise {
  0%   { bottom: 6%;  opacity: 0; transform: translateX(0) scale(0.6); }
  12%  { opacity: 1;  transform: translateX(0) scale(1.05); }
  70%  { opacity: 1; }
  100% { bottom: 82%; opacity: 0; transform: translateX(var(--reaction-drift, 0px)) scale(1) rotate(var(--reaction-rot, 0deg)); }
}
.live-reactions-bar {
  display: inline-flex;
  gap: 2px;
  margin-top: 10px;
  padding: 4px;
  border-radius: 999px;
  background: var(--qplay-surface, #1c0f1a);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.live-reaction-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 999px;
  transition: transform .12s ease, background .12s ease;
}
.live-reaction-btn:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); }
.live-reaction-btn:active { transform: scale(1.25); }
/* Em fullscreen/cinema a barra (abaixo do vídeo) some naturalmente; os flutuantes seguem sobre o
   player. Reduz o movimento para quem pediu menos animação. */
@media (prefers-reduced-motion: reduce) {
  .live-reaction-emoji { animation-duration: 1.4s; }
}
html[data-theme="light"] .live-reactions-bar {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}
.live-side { min-width: 0; }
.live-side .live-room-panel {
  margin-top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-side .live-chat-card {
  height: auto;
  flex: 1;
  min-height: 240px;
}

/* Desktop: o painel lateral preenche a altura do vídeo (a coluna estica pelo grid).
   Deixamos o painel em position:absolute para que o conteúdo do chat NÃO defina a
   altura da linha do grid — senão o cartão cresce com todas as mensagens e empurra
   a página inteira. Com o painel fora do fluxo, o vídeo define a altura e o chat
   rola dentro do cartão (.live-chat-messages tem overflow-y:auto). */
@media (min-width: 993px) {
  .live-side { position: relative; }
  .live-side .live-room-panel {
    position: absolute;
    inset: 0;
  }
}

/* Faixa intermediária: antes de empilhar, estreita o chat pra o vídeo respirar. */
@media (min-width: 993px) and (max-width: 1150px) {
  .live-top {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  }
}

@media (max-width: 992px) {
  .live-top {
    grid-template-columns: 1fr;
  }
  .live-side .live-chat-card {
    height: min(420px, calc(100vh - 220px));
    flex: none;
  }
}

.live-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--qplay-muted);
  font-size: 0.875rem;
}

.live-room-header a {
  color: var(--qplay-brand-pink);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.live-room-header a:hover,
.live-room-header a:focus {
  text-decoration: underline;
}

.live-room-viewers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--qplay-text);
  font-weight: 700;
}

.live-viewers-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Quando a live está no ar, o ícone pulsa discretamente. */
.live-room-viewers.is-live .live-viewers-icon {
  color: var(--qplay-live);
  animation: liveViewersPulse 1.8s ease-in-out infinite;
}

@keyframes liveViewersPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .live-room-viewers.is-live .live-viewers-icon { animation: none; }
}

.live-chat-card {
  display: flex;
  height: 448px;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--qplay-radius-card); /* raio unificado do rail da live */
  background: rgba(255, 255, 255, 0.035);
  position: relative; /* âncora do cadeado do "teaser" (anônimo em live pública) */
}

.live-chat-messages {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px; /* respiro entre mensagens consecutivas */
  overflow-y: auto;
  padding: 12px;
}

/* Teaser do chat: ANÔNIMO em live pública. As mensagens "sobem" em tempo real, porém
   desfocadas e sem interação; por cima, um cadeado NÍTIDO com CTA "Entrar" convida ao login. */
.live-chat-card.is-chat-teaser .live-chat-messages {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* Sem mensagens: o "Nenhuma mensagem ainda" fica escondido atrás do cadeado (não desfoca vazio). */
.live-chat-card.is-chat-teaser .live-chat-empty {
  display: none;
}

/* Enviar exige login: some com a caixa de envio no teaser (o CTA do cadeado leva ao login). */
.live-chat-card.is-chat-teaser .live-chat-form {
  display: none;
}

.live-chat-teaser-lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  /* Véu escuro leve para o cadeado ganhar contraste sobre o chat borrado (o texto fica nítido). */
  background: radial-gradient(circle at center, rgba(15, 7, 16, 0.55), rgba(15, 7, 16, 0.78));
}

.live-chat-teaser-lock [data-lucide="lock"] {
  width: 30px;
  height: 30px;
  color: var(--qplay-primary);
  margin-bottom: 4px;
}

.live-chat-teaser-title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.live-chat-teaser-sub {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--qplay-muted);
  max-width: 240px;
}

/* Enquetes (polls) da live */
.live-poll-create {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--qplay-radius-card); /* raio unificado do rail da live */
  background: rgba(255, 255, 255, 0.035);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* "Nova enquete" (admin) recolhível: não ocupa o rail quando ocioso. */
.live-poll-create-details {
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--qplay-radius-card);
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}
.live-poll-create-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--qplay-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-poll-create-details > summary::-webkit-details-marker { display: none; }
.live-poll-create-details > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--qplay-muted);
}
.live-poll-create-details[open] > summary::after { content: "\2212"; } /* − */
/* Dentro do <details>, o form perde a moldura própria (o details já a fornece). */
.live-poll-create-details .live-poll-create {
  margin-top: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
}

.live-poll-create-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--qplay-text);
}

.live-poll-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: var(--qplay-text);
  font-size: 0.85rem;
}

.live-poll-input + .live-poll-input {
  margin-top: 8px;
}

.live-poll-create-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.live-poll-container:empty {
  display: none;
}

.live-poll {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--qplay-primary);
  border-radius: var(--qplay-radius-card); /* raio unificado do rail da live */
  background: rgba(175, 70, 148, 0.08);
}

.live-poll-question {
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--qplay-text);
  word-break: break-word;
}

.live-poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-poll-option {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: var(--qplay-text);
  font-size: 0.85rem;
  cursor: pointer;
  word-break: break-word;
}

.live-poll-option:hover {
  border-color: var(--qplay-primary);
  background: rgba(175, 70, 148, 0.15);
}

.live-poll-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.live-poll-result-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--qplay-text);
}

.live-poll-result-text {
  word-break: break-word;
}

.live-poll-result-pct {
  font-weight: 700;
  flex-shrink: 0;
}

.live-poll-bar {
  margin: 4px 0 3px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.live-poll-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--qplay-primary);
  transition: width 0.3s ease;
}

.live-poll-result.is-mine .live-poll-result-text::after {
  content: " ✓";
  color: var(--qplay-primary);
  font-weight: 700;
}

.live-poll-result-count {
  font-size: 0.72rem;
  color: var(--qplay-muted);
}

.live-poll-close-btn {
  margin-top: 12px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--qplay-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.live-poll-close-btn:hover {
  border-color: var(--qplay-primary);
  color: var(--qplay-text);
}

/* Linha do chat: avatar à esquerda + corpo (cabeçalho nome/hora, depois a mensagem). */
.live-chat-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--qplay-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  word-break: break-word;
}

.live-chat-message strong {
  color: var(--qplay-text);
  font-weight: 800;
}

.live-chat-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  margin-top: 1px;
}

.live-chat-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--qplay-gradient);
  color: #fff; /* fica sobre o gradiente rosa — legível nos dois temas */
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Avatar da conta oficial (Quadrangular Play): círculo rosa com o ícone do app centralizado.
   Reutilizável — compõe com a classe de tamanho do contexto (.comment-avatar, .live-chat-avatar). */
.qplay-avatar.is-official {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--qplay-primary);
  overflow: hidden;
  flex: 0 0 auto;
}
.qplay-avatar.is-official img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

/* Corpo da mensagem: coluna com cabeçalho (nome + hora) e o texto abaixo. */
.live-chat-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.live-chat-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.live-chat-name {
  color: var(--qplay-text);
  font-weight: 700;
  font-size: 0.8rem;
}

/* Horário: secundário e discreto, empurrado para a direita do cabeçalho. */
.live-chat-time {
  color: var(--qplay-muted);
  font-size: 0.7rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.live-chat-text {
  color: var(--qplay-muted);
  font-size: 0.85rem;
}

/* Toast de notificação em tempo real */
.notif-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 3700;
  display: block;
  max-width: min(340px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 12px;
  background: #1c0f1a;
  border: 1px solid var(--qplay-primary);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  color: #fff;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.notif-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.notif-toast strong {
  display: block;
  font-size: 0.9rem;
}

.notif-toast span {
  display: block;
  margin-top: 2px;
  color: var(--qplay-muted);
  font-size: 0.8rem;
}

/* Pop-up "tem live no ar pra você" (tipo live-now) */
.live-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 200ms ease;
}
.live-popup-overlay.show { opacity: 1; }
.live-popup {
  width: 100%;
  max-width: 420px;
  border-radius: var(--qplay-radius-card, 16px);
  border: 1px solid var(--qplay-border);
  background: var(--qplay-surface, #1c0f1a);
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(8px) scale(0.98);
  transition: transform 200ms ease;
}
.live-popup-overlay.show .live-popup { transform: none; }
.live-popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(229, 57, 53, 0.15);
  color: #ff5a52;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.live-popup-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5a52;
  animation: liveViewersPulse 1.6s ease-in-out infinite;
}
/* Variante "começa em breve" (âmbar, sem urgência de "ao vivo"). */
.live-popup-badge.is-soon {
  background: rgba(245, 176, 20, 0.16);
  color: #f5b014;
}
.live-popup-badge.is-soon::before { background: #f5b014; animation: none; }
.live-popup-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.live-popup-title {
  margin: 12px 0 4px;
  color: var(--qplay-text, #fff);
  font-size: 1.15rem;
  font-weight: 800;
}
.live-popup-body {
  margin: 0 0 18px;
  color: var(--qplay-muted);
  font-size: 0.9rem;
}
.live-popup-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.live-popup-watch {
  flex: 1;
  text-align: center;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--qplay-gradient);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.live-popup-watch:hover { opacity: 0.9; color: #fff; text-decoration: none; }
.live-popup-dismiss {
  padding: 12px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--qplay-muted);
  font-size: 0.9rem;
  cursor: pointer;
}
.live-popup-dismiss:hover { color: var(--qplay-text, #fff); }

.live-chat-message {
  position: relative;
}

.live-chat-delete {
  margin-left: 6px;
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--qplay-muted);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.live-chat-message:hover .live-chat-delete,
.live-chat-delete:focus-visible {
  opacity: 1;
}

.live-chat-delete:hover {
  color: var(--qplay-primary);
}

/* Botão "fixar" por mensagem (admin) — espelha o de excluir. */
.live-chat-pin {
  margin-left: 6px;
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--qplay-muted);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.live-chat-pin [data-lucide] {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.live-chat-message:hover .live-chat-pin,
.live-chat-pin:focus-visible {
  opacity: 1;
}

.live-chat-pin:hover {
  color: var(--qplay-primary);
}

/* Banner de mensagem fixada no topo do chat. */
.live-chat-pinned {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(175, 70, 148, 0.4);
  border-left: 3px solid var(--qplay-primary);
  border-radius: var(--qplay-radius-card);
  background: rgba(175, 70, 148, 0.1);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.live-chat-pinned[hidden] {
  display: none;
}

.live-chat-pinned-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--qplay-primary);
}

.live-chat-pinned-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.live-chat-pinned-name {
  color: var(--qplay-text);
  font-weight: 700;
}

.live-chat-pinned-text {
  color: var(--qplay-muted);
  word-break: break-word;
}

.live-chat-pinned-text a {
  color: var(--qplay-primary);
  text-decoration: underline;
}

.live-chat-pinned-close {
  padding: 0 2px;
  border: none;
  background: none;
  color: var(--qplay-muted);
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.15s ease;
}

.live-chat-pinned-close [data-lucide] {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

.live-chat-pinned-close:hover {
  color: var(--qplay-primary);
}

/* Links clicáveis em mensagens de admin no chat. */
.live-chat-text a {
  color: var(--qplay-primary);
  text-decoration: underline;
}

/* Estado vazio do chat: bloco centralizado com ícone discreto. */
.live-chat-empty {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 12px;
  color: var(--qplay-muted);
  font-size: 0.8125rem;
  text-align: center;
}
.live-chat-empty [data-lucide] {
  width: 24px;
  height: 24px;
  opacity: 0.6;
}

.live-chat-error {
  margin: 0;
  padding: 0 12px 8px;
  color: #ff8fa3;
  font-size: 0.8125rem;
}

.live-chat-form {
  display: flex;
  gap: 8px;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02); /* rodapé sutil do compositor */
  padding: 8px;
}

.live-chat-form input {
  min-width: 0;
  min-height: 38px;
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(5, 5, 8, 0.55);
  color: var(--qplay-text);
  padding: 8px 10px;
  outline: none;
}

.live-chat-form input:focus {
  border-color: rgba(196, 66, 146, 0.72);
  box-shadow: 0 0 0 3px rgba(196, 66, 146, 0.12);
}

.live-chat-form button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--qplay-gradient);
  color: #fff;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 800;
}

.live-chat-form input:disabled,
.live-chat-form button:disabled {
  opacity: 0.6;
}

/* Aviso de chat fechado (transmissão encerrada). */
.live-chat-closed {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--qplay-muted);
  text-align: center;
}

/* Seletor de emojis (comentários + bate-papo) */
.emoji-trigger {
  align-self: center;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 8px;
}

.emoji-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.js-comment-form .emoji-trigger {
  margin-top: 6px;
}

/* No chat, o form estiliza todos os <button>; o gatilho de emoji precisa continuar "limpo". */
.live-chat-form .emoji-trigger {
  min-height: 0;
  padding: 2px 6px;
  background: none;
  border: none;
  color: inherit;
  box-shadow: none;
}

.live-chat-form .emoji-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.emoji-pop {
  position: fixed;
  z-index: 3500;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.emoji-pop emoji-picker {
  width: min(92vw, 340px);
  height: min(60vh, 400px);
  --background: #1c0f1a;
  --border-color: rgba(255, 255, 255, 0.12);
  --input-border-color: rgba(255, 255, 255, 0.2);
  --indicator-color: var(--qplay-primary);
  --button-active-background: rgba(175, 70, 148, 0.25);
  --button-hover-background: rgba(255, 255, 255, 0.08);
}

/* ===== Hero Split (antigo: flex flex-col gap-3 md:flex-row) ===== */
/* antigo: hero-main md:flex-[2], hero-side md:flex-1 md:flex-col */
/* antigo: hero h-72 sm:h-80 = 288px/320px */
.hero-split {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

/* Hero mobile estilo HBO Max: pôster grande full-bleed no topo, com troca automática
   (auto-rotate) + pontinhos. Reusa setupHeroCarousel (data-hero-carousel/slide/dot).
   Só no mobile; no desktop (>=992px) fica escondido e vale o .hero-split. */
.hero-mobile { display: none; }
@media (max-width: 991.98px) {
  /* Esconde só o hero-split que acompanha o carrossel mobile (branch de destaques);
     o fallback de vídeo em destaque, sem .hero-mobile antes, continua visível. */
  .hero-mobile + .hero-split { display: none; }

  /* Full-bleed: quebra os gutters do page-shell (24px por lado neste range) via margens
     negativas exatas — cobre a largura da tela sem gerar scroll horizontal (100vw geraria). */
  .hero-mobile {
    display: block;
    position: relative;
    margin: 0 -24px;
    height: clamp(440px, 68vh, 620px);
    overflow: hidden;
    background: var(--qplay-bg, #0f0710);
  }

  /* Slides empilhados (absolutos), fade entre eles; só o .active recebe clique. */
  .hero-m-card {
    position: absolute;
    inset: 0;
    display: block;
    color: inherit;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 700ms var(--ease-apple, ease);
  }
  .hero-m-card.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* object-position no topo: mantém a parte de cima da arte (rostos) visível ao recortar (cover). */
  .hero-m-bg { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .hero-m-card .hero-fallback {
    position: absolute; inset: 0; display: grid; place-items: center; background: var(--qplay-gradient);
  }
  .hero-m-card .hero-fallback img { max-width: 52%; max-height: 44%; object-fit: contain; }
  /* Gradiente escuro de baixo pra cima, mais forte e mais alto, pra leitura do título/descrição
     sobre artes claras/cheias. */
  .hero-m-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.98) 0%, rgba(6,3,6,0.92) 22%, rgba(6,3,6,0.68) 45%, rgba(6,3,6,0.32) 68%, rgba(6,3,6,0.08) 86%, transparent 100%);
  }
  .hero-m-content {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    gap: 10px; padding: 20px 20px 34px;
  }
  .hero-m-content h3 {
    margin: 0; color: #fff; font-size: 1.6rem; font-weight: 800; line-height: 1.12;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-m-sub {
    margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-m-cta { align-self: flex-start; margin-top: 2px; }
  .hero-m-cta.locked { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
  .hero-m-card.locked { cursor: default; }
  .hero-m-card .excl-overlay { z-index: 3; }

  /* Pontinhos centralizados na base (sobrescreve o right/bottom do .hero-dots do desktop). */
  .hero-mobile .hero-dots {
    left: 50%;
    right: auto;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 4;
  }
}

/* Full-bleed exato no range estreito: aqui o gutter do page-shell é 12px por lado. */
@media (max-width: 680px) {
  .hero-mobile { margin-left: -12px; margin-right: -12px; }
}

/* No celular, o logo do topo é só a marca "play" (sem o texto horizontal), em branco. */
.qplay-logo-mark { display: none; }
@media (max-width: 991.98px) {
  .qplay-brand .qplay-logo-full { display: none; }
  .qplay-brand .qplay-logo-mark { display: block; height: 30px; width: auto; filter: brightness(0) invert(1); }

  /* Home no celular: a barra do topo (logo + sino + avatar) fica TRANSPARENTE sobre o hero,
     como na referência. O header sai do fluxo (absoluto) e o hero sobe pra preencher o topo,
     inclusive atrás do notch/status bar. Só na home (body.home-hero). */
  body.home-hero .qplay-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 30; background: transparent; color: #fff;
    /* Remove o "vidro fosco" (blur 20px) do header nesta tela: era ele que borrava a arte
       atrás e criava a barra pesada no topo. Aqui o topo é só o degradê do .hero-fade.
       Sem borda/sombra (era a "linha branca fina" embaixo do header). */
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom: none !important; box-shadow: none !important;
  }
  body.home-hero .qplay-nav {
    background: transparent !important; box-shadow: none !important; border: none !important;
    padding-top: max(6px, env(safe-area-inset-top));
  }
  /* Sino e avatar em branco sobre o hero. */
  body.home-hero .qplay-nav-actions,
  body.home-hero .qplay-notification-link { color: #fff; }
  body.home-hero .qplay-avatar { border: 2px solid rgba(255, 255, 255, 0.9); }

  /* Zera o padding do topo da home pro hero encostar no topo (atrás do header transparente). */
  body.home-hero .page-shell { padding-top: 0; }
  /* Hero sobe pro topo (o header transparente fica por cima); um pouco mais alto pra compensar. */
  body.home-hero .hero-mobile {
    margin-top: 0;
    height: clamp(500px, 76vh, 700px);
  }

  /* Topo do banner: APENAS um degradê escuro suave que dissolve (sem blur), pra dar leitura
     ao logo/sino/avatar sem virar "barra". Sem backdrop-filter (o blur ficava agressivo). */
  .hero-fade {
    position: absolute; top: 0; left: 0; right: 0; height: 210px; z-index: 6; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.28) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.04) 75%, transparent 100%);
  }
}
/* Fora da home mobile, o overlay de fade não existe. */
.hero-fade { display: none; }
@media (max-width: 991.98px) { body.home-hero .hero-fade { display: block; } }

.hero-main {
  position: relative;
  flex: 2;
  height: 320px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--qplay-surface);
}

.hero-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback quando o destaque não tem arte: logo contido e centralizado sobre
   gradiente da marca (em vez de esticar o ícone em object-fit:cover -> pixelado). */
.hero-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--qplay-gradient);
}
.hero-fallback img {
  width: auto;
  height: auto;
  max-width: 42%;
  max-height: 55%;
  object-fit: contain;
}

/* antigo: absolute inset-0 bg-gradient-to-r from-background via-background/60 to-transparent */
.hero-main::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(9, 4, 9, 0.97) 0%, rgba(9, 4, 9, 0.68) 40%, transparent 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(9, 4, 9, 0.82) 34%, rgba(9, 4, 9, 0.36) 68%, transparent 100%);
}

/* antigo: absolute inset-0 flex max-w-xl flex-col justify-end gap-3 p-6 */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  max-width: 36rem;
  padding: 24px;
}

/* Hero em carrossel automático dos últimos destaques (fade entre slides + dots). */
.hero-main.is-carousel::after { content: none; }
.hero-main.is-carousel .hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms var(--ease-apple, ease);
}
.hero-main.is-carousel .hero-slide.active {
  opacity: 1;
  visibility: visible;
}
.hero-main.is-carousel .hero-slide::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(9, 4, 9, 0.97) 0%, rgba(9, 4, 9, 0.68) 40%, transparent 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(9, 4, 9, 0.82) 34%, rgba(9, 4, 9, 0.36) 68%, transparent 100%);
}
.hero-dots {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 18px;
  display: flex;
  gap: 8px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.45);
  transition: background 200ms var(--ease-apple, ease), width 200ms var(--ease-apple, ease);
}
.hero-dot.active {
  width: 22px;
  background: var(--qplay-primary);
}

/* antigo: text-xs font-bold uppercase tracking-[0.18em] text-brand-pink */
.eyebrow {
  display: inline-block;
  color: var(--qplay-brand-pink);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(196, 66, 146, 0.16);
  color: #f2b4dc;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Nome de coleção comprido: uma linha só, com reticências (nome inteiro no title). */
.badge-soft .badge-label {
  display: block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selo de status da sala ao vivo: cada estado tem tratamento próprio
   (não o rosa genérico do .badge-soft). A classe é escolhida pelo Live.Status. */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.live-badge--live {
  color: #fff;
  background: var(--qplay-live);
}
.live-badge--live .live-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  animation: liveBadgePulse 1.4s ease-in-out infinite;
}
@keyframes liveBadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .live-badge--live .live-badge-dot { animation: none; }
}
.live-badge--ended {
  color: var(--qplay-muted);
  background: rgba(255, 255, 255, 0.08);
}
.live-badge--soon {
  color: #f0b429;
  background: rgba(240, 180, 41, 0.16);
}

/* antigo: text-3xl font-extrabold sm:text-4xl */
.hero-content h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
}

.hero-content p,
.muted {
  color: var(--qplay-muted);
}

/* antigo: line-clamp-2 text-sm text-muted */
.hero-content p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* antigo: flex gap-3 md:flex-1 md:flex-col */
.hero-side {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

/* antigo: group relative flex flex-1 flex-col justify-end gap-1 overflow-hidden rounded-2xl border border-white/10 bg-surface p-4 hover:border-brand-magenta/60 */
.live-mini {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--qplay-surface);
  padding: 16px;
  text-decoration: none;
  transition: border-color 150ms;
}

.live-mini:hover {
  border-color: rgba(175, 70, 148, 0.6);
}

.live-mini img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: opacity 150ms;
}

.live-mini:hover img {
  opacity: 0.9;
}

/* Sombra mais leve: base escura só o bastante p/ o badge/título brancos lerem,
   e clareia rápido pro pôster aparecer mais (antes começava em 0.94). */
.live-mini::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(9, 4, 9, 0.5) 45%, rgba(9, 4, 9, 0.12) 78%, transparent 100%);
  pointer-events: none;
}

.live-mini .badge-soft,
.live-mini h3 {
  position: relative;
  z-index: 1;
}

/* antigo: font-semibold text-white */
.live-mini h3 {
  margin: 4px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

/* ===== Section Title (antigo: mb-3 text-lg font-bold text-white) ===== */
/* Definição canônica de .section-title (consolidada — antes havia blocos
   conflitantes espalhados; estes eram os valores efetivos no render atual). */
.section-title {
  margin: 0 0 18px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--qplay-text);
}

/* Convite de personalização na home (perfil sem onboarding) */
.personalize-prompt {
  display: block;
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(175, 70, 148, 0.15);
  color: var(--qplay-primary);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s ease;
}

.personalize-prompt:hover {
  background: rgba(175, 70, 148, 0.22);
}

/* ===== Catalog Row (antigo: flex gap-3 overflow-x-auto pb-2 [scrollbar-width:none]) ===== */
.catalog-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 8px;
  scrollbar-width: none;
  /* Encaixa o card ao parar de rolar (proximity = gentil, não força). */
  scroll-snap-type: x proximity;
  scroll-padding-left: 4px;
}

.catalog-row > * {
  scroll-snap-align: start;
}

.catalog-row::-webkit-scrollbar {
  display: none;
}

/* --- Top 10: trilho numerado estilo Netflix --- */
.top10-row {
  gap: 4px;
  align-items: flex-end;
}

.top10-item {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
}

.top10-item .media-card {
  width: 144px;
}

.top10-item .media-card.landscape {
  width: 200px;
}

.top10-rank {
  flex: 0 0 auto;
  font-size: clamp(64px, 12vw, 150px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.04em;
  /* fallback quando -webkit-text-stroke não é suportado */
  color: rgba(255, 255, 255, 0.12);
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.75);
  margin-right: -18px;
  margin-bottom: 24px;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 640px) {
  .top10-rank {
    font-size: clamp(48px, 16vw, 96px);
    -webkit-text-stroke-width: 2px;
    margin-right: -12px;
    margin-bottom: 20px;
  }
}

.row-scroller {
  position: relative;
}

.row-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: none;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(9, 4, 9, 0.86);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 160ms ease, background-color 160ms ease;
}

.row-arrow:hover {
  background: rgba(9, 4, 9, 1);
}

.row-arrow-prev {
  left: 4px;
}

.row-arrow-next {
  right: 4px;
}

/* Descoberta do scroll: no desktop as setas ficam visíveis (não só no hover)
   quando o trilho rola; o hover apenas as realça. (Hooks do site.js: .row-scroller,
   .is-scrollable, .row-arrow e o atributo [hidden] nas pontas — inalterados.) */
@media (hover: hover) and (pointer: fine) {
  .row-scroller.is-scrollable .row-arrow:not([hidden]) {
    display: grid;
    opacity: 0.6;
  }
  .row-scroller.is-scrollable:hover .row-arrow:not([hidden]) {
    opacity: 1;
  }
}

/* Peek/desvanecer nas bordas: aparece só quando há mais conteúdo daquele lado
   (a seta correspondente não está [hidden]) -> some no fim do scroll. Funciona
   também no touch (sem hover). Fica abaixo das setas (z-index 10) e não bloqueia clique. */
.row-scroller.is-scrollable:has(.row-arrow-next:not([hidden]))::after,
.row-scroller.is-scrollable:has(.row-arrow-prev:not([hidden]))::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 8px; /* alinha com o padding-bottom do .catalog-row (área do scrollbar) */
  width: 44px;
  z-index: 5;
  pointer-events: none;
}
.row-scroller.is-scrollable:has(.row-arrow-next:not([hidden]))::after {
  right: 0;
  background: linear-gradient(90deg, transparent, var(--qplay-bg));
}
.row-scroller.is-scrollable:has(.row-arrow-prev:not([hidden]))::before {
  left: 0;
  background: linear-gradient(270deg, transparent, var(--qplay-bg));
}

/* ===== Media Grid ===== */
/* Cursos antigo: grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-6 */
/* Lives antigo:  grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 */
/* Vídeos antigo: usa rows (coleções) em vez de grid plano */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.media-grid.landscape {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ===== Media Card ===== */
/* ANTIGO: O card é só a imagem com ring + texto solto abaixo (NÃO é container com fundo) */
/* group shrink-0 w-32 sm:w-36 (poster) ou w-48 sm:w-56 (landscape) */
.media-card {
  display: block;
  flex-shrink: 0;
  width: 144px;
  text-decoration: none;
  color: var(--qplay-text);
}

.media-card.landscape {
  width: 224px;
}

/* Em grid, o card se adapta à coluna */
.media-grid .media-card {
  width: auto;
}

.media-card:hover {
  color: var(--qplay-text);
}

.media-art {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.media-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
}

/* Selo "Novo" (topo-esquerda; só em vídeos, que não têm selo de tipo) e duração (canto inferior). */
.media-new {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  background: var(--qplay-primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.media-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* Barra de progresso do "Continuar assistindo" (rodapé do thumbnail).
   z-index 3 fica acima do título sobreposto (z-index 2) para nunca ser encoberta. */
.cw-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 3;
}
.cw-progress > span {
  display: block;
  height: 100%;
  background: var(--qplay-primary);
}

/* antigo: relative overflow-hidden rounded-xl bg-surface ring-1 ring-white/5 transition
   group-hover:ring-brand-magenta/60 group-hover:shadow-[0_8px_30px_-8px_rgba(175,70,148,.6)]
   aspect-[2/3] (poster) ou aspect-video (landscape) */
.media-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  background: var(--qplay-surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: box-shadow 160ms ease, transform 300ms ease;
}

.media-card:hover .media-thumb {
  box-shadow: 0 0 0 1px rgba(175, 70, 148, 0.6), 0 8px 30px -8px rgba(175, 70, 148, 0.6);
  transform: scale(1.05);
}

/* Placeholder quando não há imagem real: gradiente + título (igual ao site antigo) */
.media-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  background: var(--qplay-gradient);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  object-fit: unset;
  overflow: hidden;
}

/* Título longo trunca com reticências para caber no card (não estoura o thumbnail). */
.media-thumb-fallback > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Card horizontal (16:9) é baixo — menos linhas para não estourar a altura. */
.media-card.landscape .media-thumb-fallback > span,
.media-thumb.landscape.media-thumb-fallback > span {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.media-card.landscape .media-thumb,
.media-thumb.landscape {
  aspect-ratio: 16 / 9;
}

/* antigo: mt-1.5 truncate text-sm font-medium text-white */
.media-title,
.media-body {
  padding: 6px 0 0;
}

.media-title,
.media-body h3 {
  margin: 0 0 2px;
  overflow: hidden;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* antigo: truncate text-xs text-muted */
.media-subtitle,
.media-body p {
  margin: 0;
  overflow: hidden;
  color: var(--qplay-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ===== Page Hero (para /videos, /cursos, /lives) ===== */
/* antigo: <SectionTitle> direto como h2 sem hero grande */
.page-hero {
  padding: 0 0 8px;
}

.page-hero .eyebrow {
  margin-bottom: 4px;
}

.page-hero h1 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.page-hero p {
  max-width: 720px;
  margin: 4px 0 0;
  color: var(--qplay-muted);
  font-size: 0.875rem;
}

/* ===== Detail pages ===== */
.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
  padding: 24px 0;
}

.player-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #000;
  box-shadow: var(--qplay-shadow);
}

.detail-panel,
.panel {
  border: 1px solid var(--qplay-border);
  border-radius: 14px;
  background: rgba(15, 7, 14, 0.9);
  padding: 20px;
}

.detail-panel h1 {
  margin: 12px 0;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 800;
}

/* ===== Footer (antigo: mt-12 border-t border-white/10 px-6 py-8) ===== */
.qplay-footer {
  margin-top: 48px;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--qplay-bg);
  color: var(--qplay-muted);
  font-size: 0.875rem;
}

.qplay-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.qplay-footer p {
  margin: 0;
}

.qplay-socials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qplay-socials a {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--qplay-muted);
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}

.qplay-socials a:hover,
.qplay-socials a:focus {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.qplay-socials svg,
.qplay-socials [data-lucide] {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Rodapé completo: bloco de marca + colunas de links + linha de créditos. */
.site-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}

.site-footer-brand {
  flex: 1 1 260px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer-logo {
  height: 28px;
  width: auto;
  max-width: 220px;
  /* .site-footer-brand é flex column (align-items:stretch) — sem isto o flex
     estica a largura do logo e distorce a proporção. */
  align-self: flex-start;
  object-fit: contain;
}

.site-footer-tagline {
  margin: 0;
  color: var(--qplay-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.site-footer-nav {
  flex: 0 0 auto;
}

.site-footer-nav h3 {
  margin: 0 0 12px;
  color: var(--qplay-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer-nav a {
  color: var(--qplay-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 150ms ease;
}

.site-footer-nav a:hover,
.site-footer-nav a:focus {
  color: var(--qplay-text);
}

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer-bottom p {
  margin: 0;
  font-size: 0.8rem;
}

.site-footer-credit {
  color: var(--qplay-muted);
}

html[data-theme="light"] .site-footer-bottom {
  border-top-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 680px) {
  .site-footer-top {
    gap: 24px;
  }

  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Preview modal ===== */
.preview-open {
  overflow: hidden;
}

.preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(0, 0, 0, 0.85);
}

.preview-modal {
  display: flex;
  flex-direction: column;
  width: min(540px, 90vw, calc((90vh - 180px) * 16 / 9));
  max-height: 90vh;
  overflow: hidden;
  border-radius: 12px;
  background: #0f070e;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.preview-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  background: #000;
}

.preview-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(196, 66, 146, 0.45), rgba(112, 15, 75, 0.4), #000);
}

.preview-media-gradient {
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.78) 34%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.preview-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

.preview-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.preview-content h2 {
  margin: 12px 0 0;
  color: #fff;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
}

.preview-content p {
  margin: 14px 0 0;
  color: var(--qplay-muted);
  font-size: 0.875rem;
  line-height: 1.65;
}

.preview-actions {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

/* ===== Button variants ===== */
.qplay-button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 150ms, background 150ms;
  cursor: pointer;
}
.qplay-button-outline:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.qplay-button-outline.active {
  border-color: rgba(112, 15, 75, 0.5);
  background: rgba(112, 15, 75, 0.18);
  color: var(--qplay-primary);
}

.star-btn {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 1.35rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.2);
  transition: color 150ms, transform 150ms;
  line-height: 1;
}
.star-btn.on { color: #facc15; }
button.star-btn:hover { transform: scale(1.15); color: #facc15; }
/* Preview cumulativo: ao passar/focar numa estrela, acende dela para trás
   (setupStarRating adiciona .hovering em 1..N e .is-previewing no grupo). */
.star-btn.hovering { color: #facc15; }
.star-rating.is-previewing .star-btn:not(.hovering) { color: rgba(255, 255, 255, 0.2); }
html[data-theme="light"] .star-rating.is-previewing .star-btn:not(.hovering) { color: rgba(0, 0, 0, 0.2); }

.qplay-button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: #c0392b;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 150ms;
  cursor: pointer;
}
.qplay-button-danger:hover {
  opacity: 0.85;
  color: #fff;
}

.btn-text {
  background: none;
  border: none;
  padding: 0;
  color: var(--qplay-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms;
}
.btn-text:hover { color: #fff; }
.btn-text.text-danger { color: #e74c3c; }
.btn-text.text-danger:hover { color: #ff6b6b; }

/* Botão-ícone independente (ex.: ações de moderação ✕ 🔊 🔇). NÃO confundir com
   .btn-icon, que é o <i>/svg do ícone DENTRO de um .qplay-button (só tamanho, ver abaixo). */
.icon-btn {
  background: none;
  border: none;
  padding: 2px 6px;
  color: var(--qplay-muted);
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background 150ms, color 150ms;
}
.icon-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* ===== Page hero (section header with optional action button) ===== */
.page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px;
  flex-wrap: wrap;
}
.page-hero > div, .page-hero > h1 {
  flex: 1;
}
.page-hero h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  /* Fica sobre o fundo da página (adapta ao tema), não sobre scrim escuro. */
  color: var(--qplay-text);
}
.page-hero p {
  max-width: 720px;
  margin: 4px 0 0;
  color: var(--qplay-muted);
  font-size: 0.875rem;
}

/* ===== Alerts ===== */
.alert-success {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(39, 174, 96, 0.14);
  border: 1px solid rgba(39, 174, 96, 0.28);
  color: #6fcf97;
  font-size: 0.875rem;
}
.alert-error {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(235, 59, 90, 0.14);
  border: 1px solid rgba(235, 59, 90, 0.28);
  color: #ff7675;
  font-size: 0.875rem;
}
.alert-warning {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(243, 156, 18, 0.14);
  border: 1px solid rgba(243, 156, 18, 0.28);
  color: #f9ca24;
  font-size: 0.875rem;
}
.panel-danger {
  padding: 16px;
  border-radius: 10px;
  background: rgba(235, 59, 90, 0.1);
  border: 1px solid rgba(235, 59, 90, 0.24);
  color: #ff7675;
  font-size: 0.875rem;
}

/* ===== Forms ===== */
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--qplay-light);
}
.form-group textarea.form-control {
  height: auto;
}
.form-narrow {
  max-width: 440px;
}
/* Form largo (usa melhor a página em telas grandes; as linhas .row viram 2 colunas). */
.form-wide {
  max-width: 960px;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--qplay-border);
}
.field-group {
  margin-bottom: 16px;
}
.field-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--qplay-light);
}
.field-error {
  display: block;
  margin-top: 4px;
  color: #ff7675;
  font-size: 0.8125rem;
}
.required {
  color: #ff7675;
}
select.form-control {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b8a95' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.font-mono { font-family: ui-monospace, Consolas, monospace; }
.w-100 { width: 100%; }
.d-block { display: block; }
.text-center { text-align: center; }
.text-capitalize { text-transform: capitalize; }
.fw-bold { font-weight: 700; }
.text-sm { font-size: 0.875rem; }

/* ===== Auth pages ===== */
.auth-body {
  background: radial-gradient(ellipse 120% 80% at 60% 110%, rgba(112,15,75,0.35) 0%, transparent 60%),
              var(--qplay-bg);
  min-height: 100vh;
}

.auth-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  width: min(480px, calc(100% - 48px));
  margin: 0 auto;
  gap: 28px;
  padding: 48px 0;
}

/* logo centralizada */
.auth-logo {
  display: flex;
  justify-content: center;
  text-decoration: none;
}
.auth-logo img {
  height: 56px;
  width: auto;
}

.auth-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
}

/* Título de boas-vindas do /login (estilo hero centralizado, como no exemplo). */
.auth-title--welcome {
  text-align: center;
  font-size: 2rem;
  line-height: 1.2;
  margin: 4px 0 20px;
}

.auth-subtitle {
  margin: -12px 0 0;
  color: var(--qplay-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.auth-form-wrap {
  width: 100%;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--qplay-muted);
}

.auth-input {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #1c0f1a;
  padding: 0 14px;
  color: #fff;
  font-size: 0.9375rem;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms;
  box-sizing: border-box;
}
.auth-input:focus {
  border-color: var(--qplay-primary);
}
.auth-input::placeholder {
  color: rgba(155, 138, 149, 0.5);
}

/* Entrar + Criar conta lado a lado (dividem a largura); quebram em telas estreitas. */
.auth-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.auth-actions .auth-submit { flex: 1 1 140px; min-width: 0; padding: 0 12px; }

/* Botão vazado (só borda rosa) — para ação secundária, ex.: "Criar conta".
   Especificidade dobrada (.auth-submit.auth-submit--outline) para vencer o
   background/border da regra base .auth-submit independente da ordem no arquivo. */
.auth-submit.auth-submit--outline {
  background: none;
  border: 1px solid var(--qplay-primary);
  color: var(--qplay-primary);
}
.auth-submit.auth-submit--outline:hover { background: rgba(175, 70, 148, 0.12); }

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--qplay-gradient);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 150ms, background 150ms;
  letter-spacing: 0.01em;
  box-sizing: border-box;
}
.auth-submit svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-submit:hover { opacity: 0.88; }
.auth-submit:disabled { opacity: 0.55; cursor: default; }

.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms;
}
.auth-google:hover { background: rgba(255,255,255,0.05); }

/* Conecta SGAF (SSO): pílula neutra (surface), diferente do submit primário rosa. */
.auth-sso {
  background: var(--qplay-surface, #1c0f1a);
  border: 1px solid var(--qplay-border);
  color: var(--qplay-text, #fff);
  text-decoration: none;
}
.auth-sso:hover {
  background: rgba(255, 255, 255, 0.06);
  opacity: 1;
}
/* Ícone (cata-vento) da marca SGAF Conecta: um pouco maior que os ícones de traço. */
.auth-sso .sgaf-mark { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }

/* Divisor "ou continue com e-mail" entre o SSO e o formulário. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--qplay-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--qplay-border);
}

/* Links secundários (esqueci senha / primeiro acesso). */
.auth-links-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 16px;
}
.auth-links-row a {
  color: var(--qplay-muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.auth-links-row a:hover { color: var(--qplay-text, #fff); text-decoration: underline; }

/* Link contextual (ex.: redefinir senha após erro de login). */
.auth-inline-link {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--qplay-primary);
  font-size: 0.9rem;
}

.auth-alert-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(235, 59, 90, 0.12);
  border: 1px solid rgba(235, 59, 90, 0.28);
  color: #ff7675;
  font-size: 0.875rem;
}
.auth-alert-success {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(39, 174, 96, 0.12);
  border: 1px solid rgba(39, 174, 96, 0.28);
  color: #6fcf97;
  font-size: 0.875rem;
}

.auth-links {
  font-size: 0.875rem;
  color: var(--qplay-muted);
  line-height: 2;
}
.auth-links p { margin: 0; }
.auth-links a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-links a:hover { color: var(--qplay-brand-pink); }

.auth-divider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--qplay-border);
}

/* ===== Bootstrap dropdown dark override ===== */
.dropdown-menu {
  background: rgba(20, 10, 19, 0.98);
  border: 1px solid var(--qplay-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 6px;
  min-width: 200px;
}
.qplay-user-menu .dropdown-menu {
  width: 192px;
  overflow: hidden;
  padding: 0;
}
.qplay-menu-profile {
  padding: 9px 12px;
  border-bottom: 1px solid var(--qplay-border);
}
.qplay-menu-profile strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 7px;
  color: #fff;
  font-size: 0.875rem;
  padding: 8px 12px;
  transition: background 120ms;
}
.qplay-user-menu .dropdown-item {
  border-radius: 0;
  padding: 10px 12px;
}
.dropdown-item-primary {
  border-bottom: 1px solid var(--qplay-border);
  color: var(--qplay-primary);
  font-weight: 700;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.dropdown-divider {
  border-color: var(--qplay-border);
  margin: 4px 0;
}

/* ===== Progress bar ===== */
.progress-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--qplay-gradient);
  transition: width 400ms ease;
}
/* Rótulo "% concluído": mais firme que .muted (legível como métrica de progresso). */
.progress-label {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--qplay-text);
}

/* ===== Media card body (card with text below) ===== */
.media-card-body {
  padding: 8px 0 4px;
}
.media-card-body h3 {
  margin: 0 0 2px;
  font-size: 0.875rem;
  font-weight: 500;
  /* Título ABAIXO da imagem (Busca) -> sobre o fundo da página; adapta ao tema
     (antes era #fff literal -> branco-no-branco no tema claro). */
  color: var(--qplay-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.media-card-body p, .media-card-body small {
  margin: 0;
  font-size: 0.75rem;
  color: var(--qplay-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

/* ===== User pages ===== */
.user-page {
  width: min(1152px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 64px;
}

.user-page-narrow {
  width: min(672px, calc(100% - 48px));
}

.user-page-profile {
  width: min(896px, calc(100% - 48px));
}

.section-title h1 {
  margin: 0;
  color: var(--qplay-text);
  font-size: 1.35rem;
  font-weight: 700;
}

.section-title p {
  margin: 6px 0 0;
  color: var(--qplay-muted);
  font-size: 0.875rem;
}

.user-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Navegação entre as telas de conta (perfil, lista, cursos, histórico, notificações).
   Equivalente site-side de .content-tabs (admin), mas com tokens (sem #fff) p/ claro/escuro.
   Rola horizontalmente no mobile em vez de quebrar o layout. */
.account-nav {
  display: flex;
  gap: 6px;
  margin: 14px 0 22px;
  padding-bottom: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.account-nav::-webkit-scrollbar { display: none; }
.account-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--qplay-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.account-nav a i { width: 15px; height: 15px; }
.account-nav a:hover {
  color: var(--qplay-text);
  border-color: var(--qplay-border);
}
.account-nav a.active {
  /* Tinta da marca — legível em ambos os temas (mesma abordagem do .badge-soft claro). */
  color: var(--qplay-text);
  background: rgba(196, 66, 146, 0.14);
  border-color: rgba(196, 66, 146, 0.5);
}

.user-empty,
.notification-empty {
  margin: 0;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--qplay-muted);
  font-size: 0.875rem;
  text-align: center;
}

.user-list-card {
  position: relative;
}

.user-list-section + .user-list-section {
  margin-top: 32px;
}

.user-section-empty {
  margin: 0;
  color: var(--qplay-muted);
  font-size: 0.875rem;
}

.user-list-card a {
  color: inherit;
  text-decoration: none;
}

.user-card-action {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}

.user-card-action button,
.history-remove button,
.notification-meta button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  line-height: 1;
}

.user-card-action button svg,
.history-remove button svg,
.notification-meta button svg {
  display: block;
  width: 16px;
  height: 16px;
}

.user-card-action button:hover,
.history-remove button:hover,
.notification-meta button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.history-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.history-list,
.notification-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  list-style: none;
}

.history-item,
.notification-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.history-item + .history-item,
.notification-item + .notification-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.history-link {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.history-link:hover {
  color: inherit;
}

.history-thumb {
  display: block;
  width: 112px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--qplay-surface);
}

.history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.history-copy strong {
  overflow: hidden;
  color: var(--qplay-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-copy small,
.notification-link small,
.notification-meta {
  color: var(--qplay-muted);
  font-size: 0.75rem;
}

.history-copy .progress-bar {
  width: min(180px, 100%);
  margin-top: 4px;
}

.notification-item {
  justify-content: space-between;
}

.notification-item.unread {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--qplay-primary, #e91e8c);
}

/* Selo "Nova" das notificações ainda não lidas (marcação automática ao abrir a página). */
.notification-new {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--qplay-primary, #e91e8c);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.notification-link {
  min-width: 0;
  flex: 1;
}

.notification-link p {
  margin: 0;
  color: var(--qplay-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.notification-link small {
  display: block;
  margin-top: 2px;
}

.notification-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.user-panel {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

/* Conquistas / Constância */
.achv-streak-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 24px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(233, 30, 140, 0.35);
  background: var(--qplay-gradient, linear-gradient(135deg, rgba(233, 30, 140, 0.18), rgba(233, 30, 140, 0.05)));
}

.achv-streak-flame {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(233, 30, 140, 0.2);
  color: var(--qplay-primary, #e91e8c);
}

.achv-streak-flame [data-lucide] {
  width: 34px;
  height: 34px;
}

.achv-streak-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.achv-streak-number {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--qplay-text);
}

.achv-streak-label {
  font-size: 0.9rem;
  color: var(--qplay-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.achv-streak-record {
  margin-top: 6px;
  font-weight: 600;
  color: var(--qplay-text);
}

.achv-streak-hint {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--qplay-muted);
}

.achv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.achv-badge {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.achv-badge.earned {
  border-color: rgba(233, 30, 140, 0.5);
  background: rgba(233, 30, 140, 0.1);
}

.achv-badge.locked {
  opacity: 0.72;
}

.achv-badge-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--qplay-muted);
}

.achv-badge.earned .achv-badge-icon {
  background: rgba(233, 30, 140, 0.22);
  color: var(--qplay-primary, #e91e8c);
}

.achv-badge-icon [data-lucide] {
  width: 24px;
  height: 24px;
}

.achv-badge-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.achv-badge-copy strong {
  color: var(--qplay-text);
  font-size: 0.95rem;
}

.achv-badge-desc {
  font-size: 0.8rem;
  color: var(--qplay-muted);
}

.achv-badge-done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--qplay-primary, #e91e8c);
}

.achv-badge-done [data-lucide] {
  width: 15px;
  height: 15px;
}

.achv-badge-track {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.achv-badge-track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--qplay-primary, #e91e8c);
}

.achv-badge-progress {
  font-size: 0.75rem;
  color: var(--qplay-muted);
}

.user-panel + .user-panel {
  margin-top: 18px;
}

.user-panel h2 {
  margin: 0 0 16px;
  color: var(--qplay-text);
  font-size: 1rem;
  font-weight: 700;
}

.password-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}
.password-panel h2 { margin: 0; }
.password-panel p { margin: 4px 0 0; color: var(--qplay-muted); font-size: 0.875rem; }

/* Modal genérico (tema escuro QPlay) */
.qplay-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
}
.qplay-modal-backdrop[hidden] { display: none; }
.qplay-modal {
  width: min(440px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: var(--qplay-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.qplay-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.qplay-modal-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; }
.qplay-modal-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--qplay-muted);
  cursor: pointer;
}
.qplay-modal-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.qplay-modal-body { padding: 20px; }
.qplay-modal-body .field-group input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  padding: 10px 12px;
  outline: none;
}
.qplay-modal-body .field-group input:focus {
  border-color: rgba(196, 66, 146, 0.72);
  box-shadow: 0 0 0 3px rgba(196, 66, 146, 0.12);
}
.qplay-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.profile-avatar-preview {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--qplay-gradient);
  color: #fff;
}

.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-fields {
  max-width: 520px;
}

.qplay-complete-profile {
  align-items: flex-start;
  border-bottom: 1px solid var(--qplay-border);
  color: #fff;
  font-weight: 700;
  white-space: normal;
}

.qplay-complete-profile svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--qplay-brand-pink);
}

.qplay-complete-profile span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.qplay-complete-profile strong {
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.15;
}

.qplay-complete-profile small {
  color: #f072c2;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.15;
}

.profile-rich-shell {
  display: grid;
  gap: 18px;
}

.profile-completion-card,
.profile-identity-card,
.profile-rich-form,
.profile-notifications {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.profile-completion-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.profile-completion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-completion-head span {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
}

.profile-completion-head strong {
  color: var(--qplay-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.profile-completion-head .completion-ok {
  color: #80f0b2;
}

.profile-completion-card p {
  margin: 0;
  color: var(--qplay-muted);
  font-size: 0.8125rem;
}

.profile-completion-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.profile-completion-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--qplay-gradient);
}

.profile-rich-form {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.profile-identity-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.profile-avatar-preview.large {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  font-size: 2rem;
  font-weight: 800;
}

/* Avatar clicável (troca a foto): hover mostra "Alterar" no desktop; a câmera é o affordance no mobile. */
.profile-avatar-edit {
  position: relative;
  display: inline-block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  line-height: 0;
}

.profile-avatar-edit .profile-avatar-preview.large {
  pointer-events: none;
}

.profile-avatar-fallback {
  font-size: 2rem;
  font-weight: 800;
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.profile-avatar-overlay [data-lucide],
.profile-avatar-overlay svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.profile-avatar-edit:hover .profile-avatar-overlay,
.profile-avatar-edit:focus-visible .profile-avatar-overlay {
  opacity: 1;
}

.profile-avatar-cam {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--qplay-primary);
  color: #fff;
  border: 2px solid var(--qplay-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.profile-avatar-cam [data-lucide],
.profile-avatar-cam svg {
  width: 15px;
  height: 15px;
  display: block;
}

.profile-identity-card strong,
.profile-identity-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-identity-card strong {
  color: var(--qplay-text);
  font-size: 1rem;
  font-weight: 800;
}

.profile-identity-card span,
.profile-identity-card p,
.profile-required-note {
  color: var(--qplay-muted);
  font-size: 0.8125rem;
}

.profile-identity-card p,
.profile-required-note {
  margin: 4px 0 0;
}

.profile-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-fields-grid .full {
  grid-column: 1 / -1;
}

.profile-rich-form .field-group input,
.profile-rich-form .field-group select,
.profile-rich-form .field-group textarea,
.profile-rich-form .profile-interests-field input[type="text"] {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  padding: 10px 12px;
  outline: none;
}

.profile-rich-form .field-group textarea {
  min-height: 92px;
  resize: vertical;
}

.profile-rich-form .field-group input:focus,
.profile-rich-form .field-group select:focus,
.profile-rich-form .field-group textarea:focus,
.profile-rich-form .profile-interests-field input[type="text"]:focus {
  border-color: rgba(196, 66, 146, 0.72);
  box-shadow: 0 0 0 3px rgba(196, 66, 146, 0.12);
}

.profile-rich-form .field-group select option {
  background: #171017;
  color: #fff;
}

.profile-interests-field,
.profile-notifications {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.profile-interests-field legend,
.profile-notifications legend {
  margin: 0;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
}

.profile-notifications {
  padding: 14px;
}

.profile-notifications label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--qplay-muted);
  font-size: 0.8125rem;
}

.profile-notifications input {
  accent-color: var(--qplay-brand-pink);
}

/* Dica curta abaixo de um campo (ex.: CPF, nome de usuário). Tokenizada p/ claro/escuro. */
.field-hint {
  display: block;
  margin-top: 4px;
  color: var(--qplay-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Agrupamento dos campos pessoais do perfil em fieldsets. Sem borda/box próprios —
   o espaçamento vem do grid do .profile-rich-form (gap 18px). Legenda discreta. */
.profile-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.profile-fieldset > legend {
  margin: 0 0 12px;
  padding: 0;
  color: var(--qplay-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Painéis "Minhas entidades" / "Minhas funções" — extraídos dos styles inline. */
.profile-panel-empty {
  margin: 8px 0 0;
  color: var(--qplay-muted);
  font-size: 0.9rem;
}
.profile-entity-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-entity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--qplay-border);
}
.profile-entity-item i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--qplay-primary);
}
.profile-entity-name {
  flex: 1;
  min-width: 0;
  color: var(--qplay-text);
}
.profile-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.profile-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-role-chip i {
  width: 14px;
  height: 14px;
  color: var(--qplay-primary);
}

/* ===== Lesson player layout ===== */
.lesson-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  min-height: calc(100vh - 60px);
}
.lesson-nav {
  border-right: 1px solid var(--qplay-border);
  overflow-y: auto;
  background: rgba(12, 6, 12, 0.6);
  padding-bottom: 32px;
}
.lesson-nav-header {
  padding: 16px;
  border-bottom: 1px solid var(--qplay-border);
  position: sticky;
  top: 0;
  background: rgba(12, 6, 12, 0.95);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.back-link {
  font-size: 0.8125rem;
  color: var(--qplay-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 150ms;
}
.back-link:hover { color: #fff; }
.lesson-module {
  padding: 12px 0;
}
.lesson-module-title {
  padding: 8px 16px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--qplay-muted);
}
/* Meta do curso (módulos · aulas · duração · certificado) no cabeçalho. */
.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}
.course-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--qplay-muted);
}
.course-meta-item [data-lucide] {
  width: 15px;
  height: 15px;
  color: var(--qplay-primary, #e91e8c);
}

/* Capa opcional do módulo (16:9), cabeçalho da tira de aulas. */
.lesson-module-cover {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--qplay-surface-2);
}
.lesson-module-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lesson-module-cover + .lesson-module-title {
  padding-top: 10px;
}
/* Progresso por módulo (aulas concluídas), só para usuário logado. */
.lesson-module-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 8px;
}
.lesson-module-progress .lmp-track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.lesson-module-progress .lmp-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--qplay-primary, #e91e8c);
  transition: width 0.3s ease;
}
.lesson-module-progress.is-complete .lmp-fill {
  background: #4caf50;
}
.lesson-module-progress .lmp-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--qplay-muted);
  font-variant-numeric: tabular-nums;
}
.lesson-module-progress.is-complete .lmp-label {
  color: #4caf50;
  font-weight: 600;
}
/* Validação pública de certificado (/validar-certificado). */
.cert-validate-form {
  display: flex;
  gap: 10px;
  margin: 4px 0 20px;
  flex-wrap: wrap;
}
.cert-validate-form .form-control {
  flex: 1 1 220px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.cert-result {
  border: 1px solid var(--qplay-border, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  padding: 20px;
  background: var(--qplay-surface, #1c0f1a);
}
.cert-result--ok {
  border-color: rgba(76, 175, 80, 0.5);
  box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.15) inset;
}
.cert-result--bad {
  border-color: rgba(233, 30, 99, 0.4);
}
.cert-result-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cert-result-head [data-lucide] {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}
.cert-result--ok .cert-result-head [data-lucide] {
  color: #4caf50;
}
.cert-result--bad .cert-result-head [data-lucide] {
  color: var(--qplay-primary, #e91e8c);
}
.cert-result-head strong {
  display: block;
  font-size: 1.1rem;
}
.cert-result-head .muted {
  font-size: 0.85rem;
}
.cert-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 24px;
  margin: 0;
}
.cert-result-grid dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--qplay-muted);
  margin-bottom: 2px;
}
.cert-result-grid dd {
  margin: 0;
  font-weight: 600;
}
/* Bloco do código + QR na página do certificado. */
.cert-verify-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px dashed var(--qplay-border, rgba(0, 0, 0, 0.15));
  border-radius: 12px;
}
.cert-verify-badge .cert-qr {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
}
.cert-verify-badge .cert-qr svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cert-verify-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lesson-item a {
  display: block;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: var(--qplay-muted);
  text-decoration: none;
  transition: background 120ms, color 120ms;
  line-height: 1.4;
}
.lesson-item a:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.lesson-item.active a {
  color: #fff;
  background: rgba(196, 66, 146, 0.15);
  border-left: 3px solid var(--qplay-brand-pink);
}
.lesson-main {
  padding: 24px;
  overflow-y: auto;
}
.player-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--qplay-shadow);
}
.player-wrapper .player-frame {
  border-radius: 0;
  box-shadow: none;
}
.player-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 10, 19, 0.8);
  border: 1px solid var(--qplay-border);
}
.lesson-info {
  margin-top: 20px;
}
.lesson-title {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.course-lesson-strip {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lesson-module-flat {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.lesson-list-flat {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Card de aula: thumbnail à esquerda + corpo (título/descrição/meta) à direita.
   Aulas linkadas (a), sem link (div) e bloqueadas (div) compartilham o layout. */
.lesson-card {
  display: flex;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  color: var(--qplay-muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, color 120ms;
}

a.lesson-card:hover {
  color: var(--qplay-text);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--qplay-border);
}

.lesson-item-flat.active .lesson-card {
  color: var(--qplay-text);
  background: rgba(196, 66, 146, 0.14);
  border-color: var(--qplay-brand-pink);
}

.lesson-card-thumb {
  flex: 0 0 auto;
  width: 132px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--qplay-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lesson-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lesson-card-thumb--empty {
  color: var(--qplay-muted);
  border: 1px solid var(--qplay-border);
}
.lesson-card-thumb--empty [data-lucide] {
  width: 24px;
  height: 24px;
}

.lesson-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  justify-content: center;
}

.lesson-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--qplay-text);
}
.lesson-card-lock {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--qplay-muted);
}

/* Descrição limitada a 2 linhas com reticências. */
.lesson-card-desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--qplay-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lesson-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--qplay-muted);
}
.lesson-card-duration {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lesson-card-duration [data-lucide] {
  width: 13px;
  height: 13px;
}

.lesson-search { display: block; }
/* Bloqueada: sem link, esmaecida. */
.lesson-item-locked .lesson-card { opacity: .6; cursor: default; }

/* Tema claro: overlay branco do hover fica invisível — usar sombra escura sutil. */
html[data-theme="light"] a.lesson-card:hover { background: rgba(0, 0, 0, 0.04); }
html[data-theme="light"] .lesson-item-flat.active .lesson-card { background: rgba(196, 66, 146, 0.10); }

@media (max-width: 560px) {
  .lesson-card-thumb { width: 96px; }
  .lesson-card-desc { -webkit-line-clamp: 1; line-clamp: 1; }
}

/* ===== Admin tables ===== */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.admin-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--qplay-muted);
  border-bottom: 1px solid var(--qplay-border);
}
.admin-table td {
  padding: 12px;
  color: var(--qplay-text);
  border-bottom: 1px solid var(--qplay-border);
  vertical-align: middle;
}
.admin-table tr:hover td {
  background: rgba(255,255,255,0.02);
}
.admin-table td a {
  color: var(--qplay-brand-pink);
  text-decoration: none;
}
.admin-table td a:hover { text-decoration: underline; }

.admin-form-card {
  max-width: 720px;
  padding: 28px;
  border: 1px solid var(--qplay-border);
  border-radius: 16px;
  background: rgba(15, 7, 14, 0.88);
}
/* Variante larga para cards com tabela (usa toda a largura disponível; some o scroll horizontal). */
.admin-form-card--wide { max-width: none; }

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.stat-card {
  padding: 20px;
  border: 1px solid var(--qplay-border);
  border-radius: 14px;
  background: rgba(28, 15, 26, 0.7);
  text-align: center;
}
.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 0.75rem;
  color: var(--qplay-muted);
  font-weight: 500;
}

/* ===== Leaderboard ===== */
.leaderboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 640px;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 120ms;
}
.leaderboard-row:hover {
  background: rgba(255,255,255,0.04);
}
.leaderboard-me {
  background: rgba(196, 66, 146, 0.1);
  border-color: rgba(196, 66, 146, 0.25);
}
.leaderboard-rank {
  width: 28px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--qplay-muted);
  flex-shrink: 0;
}
.leaderboard-row:nth-child(1) .leaderboard-rank { color: #f1c40f; }
.leaderboard-row:nth-child(2) .leaderboard-rank { color: #bdc3c7; }
.leaderboard-row:nth-child(3) .leaderboard-rank { color: #cd6133; }
.leaderboard-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.leaderboard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qplay-gradient);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 999px;
}
.leaderboard-name {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--qplay-text);
  font-weight: 500;
}
.leaderboard-score {
  font-size: 0.875rem;
  color: var(--qplay-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* ===== Wrapped page ===== */
.wrapped-hero {
  text-align: center;
  padding: 40px 0 24px;
}
.wrapped-hero h1 {
  font-size: clamp(1.875rem, 5vw, 3rem);
  font-weight: 800;
  background: var(--qplay-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wrapped-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.wrapped-card {
  padding: 24px 16px;
  border: 1px solid var(--qplay-border);
  border-radius: 16px;
  background: rgba(28, 15, 26, 0.7);
  text-align: center;
}
.wrapped-card.accent {
  border-color: rgba(196, 66, 146, 0.3);
  background: rgba(196, 66, 146, 0.08);
}
.wrapped-number {
  font-size: 2.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 8px;
}
.wrapped-card.accent .wrapped-number {
  background: var(--qplay-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wrapped-label {
  font-size: 0.8125rem;
  color: var(--qplay-muted);
}

/* ===== Top list ===== */
.top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.top-list li {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  font-size: 0.875rem;
  color: #fff;
  border: 1px solid var(--qplay-border);
}

/* ===== Family page ===== */
.user-page-family {
  width: min(672px, calc(100% - 48px));
}

.family-invite-card {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.family-invite-card h2,
.family-section h2 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.family-invite-card p {
  margin: 6px 0 0;
  color: var(--qplay-muted);
  font-size: 0.875rem;
}

.family-invite-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.family-invite-row input {
  min-width: 220px;
  min-height: 42px;
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  padding: 10px 12px;
  outline: none;
}

.family-invite-row input:focus {
  border-color: rgba(196, 66, 146, 0.72);
  box-shadow: 0 0 0 3px rgba(196, 66, 146, 0.12);
}

.family-invite-row .qplay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
}

.family-invite-row .qplay-button svg {
  width: 16px;
  height: 16px;
}

.family-section {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.family-list-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  list-style: none;
}

.family-person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.family-person-row + .family-person-row,
.family-empty + .family-person-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.family-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--qplay-gradient);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
}

.family-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-person-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.family-person-copy strong,
.family-person-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-person-copy strong {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

.family-person-copy small,
.family-empty,
.family-waiting {
  color: var(--qplay-muted);
  font-size: 0.75rem;
}

.family-empty {
  padding: 12px;
}

.family-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.family-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
}

.family-action-button.primary {
  border-color: transparent;
  background: var(--qplay-gradient);
  color: #fff;
}

.family-action-button.muted {
  color: var(--qplay-muted);
}

.family-action-button:hover,
.family-action-button:focus {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.family-action-button.primary:hover,
.family-action-button.primary:focus {
  background: var(--qplay-primary-hover);
}

.family-action-button svg {
  width: 14px;
  height: 14px;
}

.family-waiting {
  margin-left: auto;
}

.family-person-row form {
  margin: 0;
}

.family-name {
  flex: 1;
  font-size: 0.9375rem;
  color: #fff;
}

/* ===== Profiles ===== */
.profiles-page {
  width: min(960px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.profiles-heading {
  text-align: center;
}

.profiles-heading h1 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
}

.profiles-heading p,
.profile-create-panel p {
  margin: 0;
  color: var(--qplay-muted);
  font-size: 0.875rem;
}

.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.profile-tile {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

.profile-select-form {
  margin: 0;
}

.profile-select-form button {
  display: flex;
  width: 100%;
  min-height: 206px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  padding: 16px;
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.profile-select-form button:hover,
.profile-select-form button:focus,
.profile-tile.active .profile-select-form button {
  border-color: rgba(196, 66, 146, 0.7);
  background: rgba(196, 66, 146, 0.1);
}

.profile-select-form button:hover {
  transform: translateY(-2px);
}

.profile-avatar-large {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--qplay-gradient);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}

.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.profile-badge,
.profile-active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--qplay-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.profile-active {
  background: rgba(196, 66, 146, 0.22);
  color: #fff;
}

.profile-editor {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 10px;
}

.profile-editor summary {
  cursor: pointer;
  color: var(--qplay-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.profile-editor form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.profile-editor label,
.profile-create-form label {
  display: grid;
  gap: 5px;
  color: var(--qplay-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.profile-editor-actions {
  display: flex;
  justify-content: flex-start;
}

.profile-create-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  gap: 24px;
  align-items: start;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(15, 7, 14, 0.9);
  padding: 20px;
}

.profile-create-panel h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.profile-create-form {
  display: grid;
  gap: 12px;
}

.profiles-screen {
  display: flex;
  width: min(768px, 100%);
  min-height: calc(100vh - 220px);
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0 24px;
}

.profiles-screen h1 {
  margin: 0 0 40px;
  color: #fff;
  text-align: center;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 700;
}

.profiles-error {
  margin: -20px 0 24px;
  border: 1px solid rgba(235, 59, 90, 0.3);
  border-radius: 8px;
  background: rgba(235, 59, 90, 0.1);
  color: #ffb3bd;
  padding: 8px 14px;
  font-size: 0.875rem;
}

.profiles-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}

.profile-card {
  display: flex;
  width: 112px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.profile-pick-form {
  margin: 0;
  width: 100%;
}

.profile-pick {
  display: flex;
  width: 112px;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.profile-art,
.family-profile-art,
.profile-add-card span {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--qplay-gradient);
  color: #fff;
  font-weight: 800;
}

.profile-art {
  position: relative;
  width: 112px;
  height: 112px;
  font-size: 2.5rem;
  transition: box-shadow 150ms ease;
}

.profile-art img,
.family-profile-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-pick:hover .profile-art,
.profile-card.active .profile-art {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.72);
}

.profile-caption {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-kids {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 2px 8px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-manage-overlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.profiles-screen.is-managing .profile-manage-overlay {
  display: grid;
}

.profiles-screen.is-managing .profile-pick {
  cursor: default;
}

.profile-manage-actions {
  display: none;
  align-items: center;
  gap: 8px;
}

.profiles-screen.is-managing .profile-manage-actions {
  display: flex;
}

.profile-icon-button,
.profile-cancel-button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: transparent;
  color: var(--qplay-muted);
  padding: 0;
}

.profile-icon-button:hover,
.profile-icon-button:focus,
.profile-cancel-button:hover,
.profile-cancel-button:focus {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.profile-icon-button.danger {
  border-color: rgba(235, 59, 90, 0.3);
  color: #ffb3bd;
}

.profile-icon-button.danger:hover,
.profile-icon-button.danger:focus {
  border-color: rgba(235, 59, 90, 0.65);
  color: #ffd1d7;
}

.profile-add-card {
  display: flex;
  width: 112px;
  border: 0;
  background: transparent;
  color: var(--qplay-muted);
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.profiles-screen.is-managing .profile-add-card,
.profiles-screen.is-managing .profiles-family {
  display: none;
}

.profile-add-card span {
  width: 112px;
  height: 112px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--qplay-muted);
}

.profile-add-card:hover,
.profile-add-card:focus {
  color: #fff;
}

.profile-add-card:hover span,
.profile-add-card:focus span {
  border-color: rgba(255, 255, 255, 0.4);
}

.profile-add-card strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-add-form,
.profile-inline-form {
  display: flex;
  width: 176px;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: var(--qplay-surface);
  padding: 16px;
}

.profile-add-form[hidden],
.profile-inline-form[hidden] {
  display: none;
}

.profile-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-save-button {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 8px;
  background: var(--qplay-gradient);
  color: #fff;
  padding: 7px 10px;
  font-size: 0.875rem;
  font-weight: 700;
}

.profiles-family {
  width: min(576px, 100%);
  margin-top: 56px;
}

.profiles-family-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.profiles-family-head h2 {
  margin: 0;
  color: var(--qplay-muted);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profiles-family-head a {
  color: var(--qplay-primary);
  font-size: 0.75rem;
  text-decoration: none;
}

.profiles-family-head a:hover {
  text-decoration: underline;
}

.profiles-family-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profiles-family-list li {
  display: flex;
  width: 80px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.family-profile-art {
  width: 64px;
  height: 64px;
  font-size: 1.25rem;
}

.profiles-family-list span:last-child {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profiles-family-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: var(--qplay-muted);
  padding: 16px;
  text-decoration: none;
  font-size: 0.875rem;
}

.profiles-family-empty:hover,
.profiles-family-empty:focus {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.profiles-manage-button {
  margin-top: 48px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: transparent;
  color: var(--qplay-muted);
  padding: 8px 24px;
  font-size: 0.875rem;
  font-weight: 600;
}

.profiles-manage-button:hover,
.profiles-manage-button:focus {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.field-error {
  color: #ff7675;
  font-size: 0.75rem;
}

.btn-text {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--qplay-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.btn-text:hover,
.btn-text:focus {
  color: #fff;
}

/* ===== Quadradinho ===== */
.quadradinho-widget {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.quadradinho-panel {
  display: flex;
  width: min(352px, calc(100vw - 32px));
  height: min(448px, calc(100vh - 104px));
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(20, 10, 19, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.quadradinho-panel[hidden] {
  display: none;
}

.quadradinho-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quadradinho-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.quadradinho-title strong {
  display: block;
  color: #fff;
  font-size: 0.875rem;
}

.quadradinho-title small {
  display: block;
  color: var(--qplay-muted);
  font-size: 0.65rem;
}

.quadradinho-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 999px;
  background: var(--qplay-gradient);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.quadradinho-title .quadradinho-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

.quadradinho-close {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--qplay-muted);
}

.quadradinho-close:hover,
.quadradinho-close:focus {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.quadradinho-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 12px;
}

.quadradinho-empty {
  margin: 0;
  color: var(--qplay-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.quadradinho-message {
  max-width: 86%;
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 0.84rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.quadradinho-message.user {
  align-self: flex-end;
  background: var(--qplay-gradient);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.quadradinho-message.assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.07);
  color: #f5f5f7;
  border-bottom-left-radius: 4px;
}

.quadradinho-error {
  margin: 0;
  padding: 0 12px 6px;
  color: #ff7675;
  font-size: 0.75rem;
}

.quadradinho-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.quadradinho-form input {
  min-width: 0;
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(9, 4, 9, 0.92);
  color: #fff;
  padding: 8px 10px;
  font-size: 0.875rem;
  outline: 0;
}

.quadradinho-form input:focus {
  border-color: var(--qplay-primary);
}

.quadradinho-form button,
.quadradinho-fab {
  border: 0;
  background: var(--qplay-gradient);
  color: #fff;
  font-weight: 700;
}

.quadradinho-form button {
  border-radius: 8px;
  padding: 0 12px;
  font-size: 0.8125rem;
}

.quadradinho-form button:disabled {
  opacity: 0.55;
}

.quadradinho-fab {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 999px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

/* FAB icon swap (Q <-> X): SVG do Lucide é centralizado geometricamente,
   evitando o deslocamento do caractere "×". Só um ícone fica visível por vez,
   ocupando a célula centralizada do grid do avatar. */
.quadradinho-fab .quadradinho-avatar {
  position: relative;
}

.quadradinho-fab-icon {
  display: grid;
  place-items: center;
  line-height: 1;
}

.quadradinho-fab-icon--x {
  display: none;
}

.quadradinho-fab-icon--x [data-lucide],
.quadradinho-fab-icon--x svg {
  width: 24px;
  height: 24px;
}

.quadradinho-widget.is-open .quadradinho-fab-icon--q {
  display: none;
}

.quadradinho-widget.is-open .quadradinho-fab-icon--x {
  display: grid;
}

/* ===== Interest items (onboarding / personalizar) ===== */
.interest-item {
  padding: 12px 14px;
  border: 2px solid var(--qplay-border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  font-size: 0.875rem;
  color: var(--qplay-light);
  transition: border-color 150ms, background 150ms;
}
.interest-item:hover { border-color: rgba(196, 66, 146, 0.5); }
.interest-item.selected {
  border-color: var(--qplay-brand-pink);
  background: rgba(196, 66, 146, 0.12);
  color: #fff;
}

/* Chips de áreas de interesse (/perfil) — estilo do site antigo */
.interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.interest-chip {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-size: 0.8125rem;
  color: var(--qplay-muted);
  transition: background 150ms, color 150ms, border-color 150ms;
}
.interest-chip:hover { background: rgba(255, 255, 255, 0.05); }
.interest-chip:has(input:checked) {
  border-color: var(--qplay-primary);
  background: rgba(175, 70, 148, 0.2);
  color: #fff;
}

/* ===== Analytics bar chart ===== */
.chart-bar-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chart-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
}
.chart-label {
  width: 132px;
  color: var(--qplay-muted);
  text-align: left;
  flex-shrink: 0;
  font-size: 0.8125rem;
  /* Rótulos longos (cargos, cidades) truncam em uma linha com "…" em vez de
     quebrarem palavra-por-palavra na vertical; texto completo no title (tooltip). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-bar-track {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.chart-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--qplay-gradient);
  min-width: 4px;
  transition: width 400ms ease;
}
.chart-value {
  width: 28px;
  color: var(--qplay-muted);
  font-weight: 600;
}

/* ===== Top conteúdos (miniatura + título abreviado) ===== */
.top-content-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.top-content-row {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.top-content-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  display: block;
}
.top-content-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.top-content-title {
  flex: 0 0 150px;
  width: 150px;
  color: var(--qplay-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-content-row:hover .top-content-title {
  color: #fff;
}

/* ===== Filtro admin (input + botão-pílula) =====
   Substitui o .input-group do Bootstrap, que não lida com o .qplay-button (pílula)
   e fazia o botão transbordar. Flex simples com gap: input cresce, botão natural. */
.admin-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* deixa selects/botões quebrarem linha no mobile em vez de transbordar */
  gap: 8px;
}
.admin-filter > .form-control {
  flex: 1 1 220px;
  min-width: 0;
}
.admin-filter > .form-select {
  flex: 0 0 auto;
  width: auto;
}
.admin-filter > .qplay-button {
  flex: 0 0 auto;
}

/* ===== Barra de filtros do Conteúdo (grid com label acima do controle) =====
   Substitui a antiga flex-row com max-width inline por um grid responsivo:
   cada filtro é um campo (label pequeno + controle full-width) e as ações
   ficam agrupadas numa linha própria. Usa tokens de tema (nunca cor fixa). */
.admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.admin-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.admin-filter-field label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--qplay-muted);
  margin: 0;
}
.admin-filter-field > .form-control,
.admin-filter-field > .form-select {
  width: 100%;
}
/* Período: dois inputs de data lado a lado dentro do mesmo campo */
.admin-filter-field--period {
  grid-column: span 2;
}
.admin-filter-period {
  display: flex;
  gap: 8px;
}
.admin-filter-period > .form-control {
  flex: 1 1 0;
  min-width: 0;
}
/* Ações (Filtrar / Limpar / Exportar) alinhadas à direita, linha própria */
.admin-filter-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* ===== Integration cards ===== */
.integration-card {
  padding: 20px;
  border: 1px solid var(--qplay-border);
  border-radius: 14px;
  background: rgba(20,10,19,0.5);
}
.toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--qplay-light);
  cursor: pointer;
}
.toggle-label input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--qplay-primary);
  cursor: pointer;
}

/* ===== Moderation (live chat) ===== */
.moderation-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.chat-panel {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  max-height: 600px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--qplay-border);
  border-radius: 14px;
  background: rgba(12,6,12,0.6);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.chat-msg {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 100ms;
}
.chat-msg:hover {
  background: rgba(255,255,255,0.04);
}
.chat-muted {
  opacity: 0.4;
}
.chat-author {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--qplay-brand-pink);
  white-space: nowrap;
  flex-shrink: 0;
}
.chat-content {
  flex: 1;
  font-size: 0.875rem;
  color: #f5f5f7;
  word-break: break-word;
}
.chat-time {
  font-size: 0.6875rem;
  color: var(--qplay-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.chat-actions {
  display: none;
  gap: 4px;
  flex-shrink: 0;
}
.chat-msg:hover .chat-actions {
  display: flex;
}

/* ===== Utility spacing ===== */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 32px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 32px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.fw-bold { font-weight: 700; }

/* ===== Responsive ===== */
@media (max-width: 991px) {
  /* permite o menu colapsado cair para uma linha própria, abaixo da barra */
  .qplay-nav-inner {
    flex-wrap: wrap;
  }

  /* menu mobile = painel full-width abaixo da barra (não mais flutuando no meio) */
  .qplay-menu {
    order: 100;
    flex: 0 0 100%;
    width: 100%;
    align-items: stretch;
    gap: 0;
    margin-top: 12px;
    padding: 8px;
    background: var(--qplay-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  }

  .navbar-nav {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    gap: 2px;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar-nav .nav-link {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 1rem;
    color: #fff;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    background: rgba(255, 255, 255, 0.06);
  }

  .qplay-search {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 0;
  }

  /* antigo: flex-col gap-3 */
  .hero-split {
    flex-direction: column;
  }

  /* Em coluna, `flex: 2/1` vira flex-basis 0% no eixo VERTICAL e zera a altura do
     hero (a altura explícita 320/288px é ignorada) — por isso o banner de destaque
     sumia no mobile. flex:none faz a altura explícita valer. */
  .hero-main,
  .hero-side {
    flex: none;
  }

  .detail-hero {
    grid-template-columns: 1fr;
  }

  /* .hero-main mobile: ver bloco após as regras cinematográficas do hero
     (uma regra sem media-query as sobrescreveria por ordem de origem). */

  /* antigo: flex gap-3 (horizontal no tablet) */
  .hero-side {
    flex-direction: row;
  }
}

@media (max-height: 760px) and (min-width: 768px) {
  .player-page-tight {
    width: min(800px, 100%);
  }
}

@media (max-height: 680px) and (min-width: 768px) {
  .player-page-tight {
    width: min(740px, 100%);
  }
}

@media (max-width: 680px) {
  .qplay-container,
  .page-shell {
    width: min(100% - 24px, 1152px);
  }

  .qplay-footer-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .qplay-brand img {
    height: 24px;
  }

  /* .hero-main / .hero-content mobile: ver bloco após as regras cinematográficas. */

  .hero-side {
    flex-direction: column;
  }

  /* antigo: w-32 (128px) e w-48 (192px) */
  .media-card {
    width: 128px;
  }

  .media-card.landscape {
    width: 192px;
  }

  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .media-grid.landscape {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .user-page,
  .user-page-narrow,
  .user-page-profile {
    width: min(100% - 24px, 1152px);
  }

  .profile-completion-head,
  .profile-identity-card {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .profile-fields-grid {
    grid-template-columns: 1fr;
  }

  .family-person-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .family-actions {
    width: 100%;
    padding-left: 52px;
  }

  .family-waiting {
    margin-left: 52px;
  }

  .history-thumb {
    width: 96px;
  }

  .notification-item {
    align-items: flex-start;
  }

  .user-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-create-panel {
    grid-template-columns: 1fr;
  }

  .profiles-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .profile-select-form button {
    min-height: 184px;
  }

  .profile-avatar-large {
    width: 82px;
    height: 82px;
  }

  .quadradinho-widget {
    right: 12px;
    bottom: 12px;
  }

  .quadradinho-panel {
    width: calc(100vw - 24px);
    height: min(440px, calc(100vh - 92px));
  }

  .live-chat-card {
    height: min(420px, calc(100vh - 220px));
  }

  .live-room-header {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ===== Admin shell (sidebar) ===== */
.admin-shell { display: flex; min-height: 100vh; background: var(--qplay-bg); }
.admin-sidebar {
    width: 260px; flex: 0 0 260px; background: var(--qplay-surface);
    border-right: 1px solid rgba(255,255,255,0.06); padding: 16px 10px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav a {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-radius: 10px; color: var(--qplay-muted); text-decoration: none; font-weight: 500;
}
.admin-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.admin-nav a.active { background: var(--qplay-primary); color: #fff; }
.admin-nav a [data-lucide] { width: 18px; height: 18px; }

/* Rodapé do sidebar: número da versão (abre o histórico de mudanças). */
.admin-version {
    margin-top: 14px; width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    background: transparent; color: var(--qplay-muted); font-weight: 600; font-size: 0.82rem;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.admin-version:hover { background: rgba(255,255,255,0.05); color: #fff; border-color: rgba(255,255,255,0.16); }
.admin-version [data-lucide] { width: 16px; height: 16px; color: var(--qplay-primary); }

/* Modal de histórico de versões (elemento <dialog> nativo). */
.admin-changelog {
    width: min(620px, 92vw); max-height: 82vh; padding: 0; border: none; border-radius: 16px;
    background: var(--qplay-surface); color: #fff; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}
.admin-changelog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.admin-changelog-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 20px 22px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky; top: 0; background: var(--qplay-surface); z-index: 1;
}
.admin-changelog-head h2 { margin: 0; font-size: 1.15rem; }
.admin-changelog-head p { margin: 3px 0 0; color: var(--qplay-muted); font-size: 0.82rem; }
.admin-changelog-close {
    flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; background: transparent;
    color: var(--qplay-muted); cursor: pointer;
}
.admin-changelog-close:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-changelog-body { padding: 8px 22px 22px; overflow-y: auto; max-height: calc(82vh - 76px); }
.admin-changelog-entry { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.admin-changelog-entry:last-child { border-bottom: none; }
.admin-changelog-entry > header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.admin-changelog-ver {
    font-weight: 700; font-size: 0.8rem; color: #fff; background: var(--qplay-primary);
    padding: 2px 9px; border-radius: 999px;
}
.admin-changelog-title { font-weight: 600; }
.admin-changelog-date { margin-left: auto; color: var(--qplay-muted); font-size: 0.78rem; }
.admin-changelog-entry ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-changelog-entry li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.45; }
.admin-changelog-tag {
    flex: 0 0 auto; margin-top: 1px; font-size: 0.68rem; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; padding: 2px 8px; border-radius: 999px; min-width: 74px; text-align: center;
}
.admin-changelog-entry li.is-feature .admin-changelog-tag { background: rgba(46,196,140,0.16); color: #38d39a; }
.admin-changelog-entry li.is-fix .admin-changelog-tag { background: rgba(120,150,255,0.16); color: #8ea6ff; }
.admin-changelog-text { color: rgba(255,255,255,0.86); }

/* Menu em árvore: grupo-pai (details/summary) + filhos indentados. */
.admin-nav-group { display: flex; flex-direction: column; }
.admin-nav-group > summary {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-radius: 10px; color: var(--qplay-muted); font-weight: 600; cursor: pointer;
    list-style: none; user-select: none;
}
.admin-nav-group > summary::-webkit-details-marker { display: none; }
.admin-nav-group > summary:hover { background: rgba(255,255,255,0.05); color: #fff; }
.admin-nav-group > summary [data-lucide] { width: 18px; height: 18px; }
.admin-nav-caret { margin-left: auto; transition: transform 180ms var(--ease-apple, ease); }
.admin-nav-group[open] > summary .admin-nav-caret { transform: rotate(180deg); }
.admin-nav-children { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }
.admin-nav-children a {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 42px;
    border-radius: 10px; color: var(--qplay-muted); text-decoration: none; font-weight: 500; font-size: 0.9rem;
}
.admin-nav-children a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.admin-nav-children a.active { background: var(--qplay-primary); color: #fff; }

/* (A) Atalhos fixados: seção no topo do sidebar + botão de pin por link. */
.admin-nav-section {
    padding: 8px 14px 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--qplay-muted);
}
.admin-nav-fixados { display: flex; flex-direction: column; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.admin-nav-fixados[hidden] { display: none; }
.admin-nav-fixados-items { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-fixados-items a {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px;
    color: var(--qplay-muted); text-decoration: none; font-weight: 500; font-size: 0.9rem;
}
.admin-nav-fixados-items a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.admin-nav-fixados-items a.active { background: var(--qplay-primary); color: #fff; }
.admin-nav-fixados-items a [data-lucide] { width: 15px; height: 15px; flex: 0 0 auto; color: var(--qplay-primary); }
.admin-nav-fixados-items a.active [data-lucide] { color: #fff; }
.admin-nav-fixados-items a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* O link precisa ser âncora do botão de pin, que fica na direita e só aparece no hover. */
.admin-nav a, .admin-nav-children a { position: relative; }
.admin-pin-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
    border: none; border-radius: 7px; background: transparent; color: var(--qplay-muted);
    cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.admin-pin-btn [data-lucide] { width: 15px; height: 15px; }
.admin-nav a:hover .admin-pin-btn,
.admin-nav-children a:hover .admin-pin-btn,
.admin-pin-btn:focus-visible { opacity: 1; }
.admin-pin-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.admin-pin-btn[data-pinned="true"] { opacity: 1; color: var(--qplay-primary); }
.admin-nav a.active .admin-pin-btn[data-pinned="true"],
.admin-nav-children a.active .admin-pin-btn[data-pinned="true"] { color: #fff; }
/* Reserva espaço à direita p/ o texto não passar por baixo do pin. */
.admin-nav a:has(.admin-pin-btn), .admin-nav-children a:has(.admin-pin-btn) { padding-right: 38px; }

/* Menu do usuário no topo do sidebar admin (details/summary — sem JS do Bootstrap). */
.admin-user { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.admin-user > summary {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    cursor: pointer; list-style: none; user-select: none; color: #fff;
}
.admin-user > summary::-webkit-details-marker { display: none; }
.admin-user > summary:hover { background: rgba(255,255,255,0.05); }
.admin-user-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--qplay-primary); color: #fff; font-weight: 700; font-size: 0.8rem;
}
.admin-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-user-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user .admin-nav-caret { margin-left: auto; transition: transform 180ms var(--ease-apple, ease); }
.admin-user[open] > summary .admin-nav-caret { transform: rotate(180deg); }
.admin-user-menu { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 0; }
.admin-user-menu a, .admin-user-menu button {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
    color: var(--qplay-muted); text-decoration: none; font-weight: 500; font-size: 0.9rem;
    background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit;
}
.admin-user-menu a:hover, .admin-user-menu button:hover { background: rgba(255,255,255,0.05); color: #fff; }
.admin-user-menu [data-lucide] { width: 18px; height: 18px; }
.admin-user-menu form { margin: 0; }
.admin-main { flex: 1 1 auto; padding: 28px 36px; min-width: 0; }
.admin-topbar { display: none; }
.admin-overlay { display: none; }
@media (max-width: 992px) {
    .admin-topbar {
        display: flex; align-items: center; gap: 12px; padding: 10px 16px;
        background: var(--qplay-surface); border-bottom: 1px solid rgba(255,255,255,0.06);
        position: sticky; top: 0; z-index: 1030;
    }
    .admin-nav-toggle { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; display: inline-flex; }
    .admin-topbar-brand { font-weight: 700; }
    .admin-sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; width: 260px;
        transform: translateX(-100%); transition: transform .2s ease; z-index: 1050;
    }
    .admin-shell.nav-open .admin-sidebar { transform: translateX(0); }
    .admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1040; }
    .admin-shell.nav-open .admin-overlay { display: block; }
    .admin-main { padding: 20px 16px; }
}

/* ===== Dashboard Gestão ===== */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metric-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.metric-card {
    background: var(--qplay-surface); border: 1px solid var(--qplay-border);
    border-radius: 14px; padding: 18px 20px;
}
.metric-card .metric-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.metric-card .metric-label { color: var(--qplay-muted); margin-top: 6px; }
.metric-value .metric-unit { font-size: 1rem; font-weight: 500; color: var(--qplay-muted); margin-left: 4px; }
/* Cards de gráfico (área/donut) — altura mínima uniforme p/ alinhar a linha e não
   colapsar quando o estado vazio aparece. */
.chart-card { min-height: 200px; }
/* Título de seção do dashboard e dos cards de gráfico. */
.dash-section-label { font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
.chart-card-title { font-size: 0.95rem; font-weight: 600; margin: 0; }
.dash-actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.dash-actions .qplay-button { display: inline-flex; align-items: center; gap: 6px; }
.dash-actions .qplay-button [data-lucide] { width: 16px; height: 16px; }
/* Link com a cor da marca (substitui .text-primary azul do Bootstrap). */
.qplay-link { color: var(--qplay-primary); text-decoration: none; }
.qplay-link:hover, .qplay-link:focus { color: var(--qplay-primary); text-decoration: underline; }
.metric-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.metric-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .metric-grid, .metric-grid.cols-2, .metric-grid.cols-3, .metric-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
/* Celular estreito: uma coluna só (2 cartões lado a lado ficam apertados). */
@media (max-width: 480px) {
    .metric-grid, .metric-grid.cols-2, .metric-grid.cols-3, .metric-grid.cols-4 { grid-template-columns: 1fr; }
    /* Cartões com span inline (ex.: gráfico largo do dashboard) voltam a ocupar 1 coluna. */
    .metric-grid > .metric-card { grid-column: auto !important; }
}

/* ===== Dashboard personalizável ===== */
/* Barra de personalização (botão Personalizar + ações do modo edição). */
.dash-customize-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-customize-bar .qplay-button,
.dash-customize-bar .qplay-button-outline { display: inline-flex; align-items: center; gap: 6px; }
.dash-customize-bar [data-lucide] { width: 16px; height: 16px; }
/* As ações (Salvar/Cancelar/Restaurar) só aparecem quando o modo edição está ligado. */
.dash-customize-actions { display: none; gap: 8px; flex-wrap: wrap; }
.dash-customize-bar.dash-editing-on .dash-customize-actions { display: inline-flex; }

/* Ferramentas por widget (alça + olho) — invisíveis fora do modo edição. */
.dash-widget { position: relative; }
.dash-widget-tools { display: none; position: absolute; top: 6px; right: 6px; z-index: 5; gap: 4px; align-items: center; }
.dash-editing .dash-widget-tools { display: inline-flex; }
.dash-drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--qplay-surface-2); color: var(--qplay-muted); cursor: move; border: 1px solid var(--qplay-border); }
.dash-widget-eye { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--qplay-surface-2); color: var(--qplay-muted); cursor: pointer; border: 1px solid var(--qplay-border); }
.dash-widget-eye:hover, .dash-drag-handle:hover { color: #fff; }
.dash-widget-tools [data-lucide] { width: 16px; height: 16px; }

/* Widget no modo edição: contorno tracejado + cursor move. */
.dash-editing .dash-widget { border: 1px dashed var(--qplay-border); border-radius: 14px; padding: 10px; margin-bottom: 12px; cursor: move; }
.dash-editing .dash-widget:hover { border-color: var(--qplay-primary); }
.dash-widget-dragging { opacity: 0.5; }

/* Ocultos: escondidos fora do modo edição; no modo edição aparecem esmaecidos p/ reexibir. */
.dash-widget.is-hidden { display: none; }
.dash-editing .dash-widget.is-hidden { display: block; opacity: 0.45; }

/* Nota de estado vazio dentro de um widget. */
.dash-empty-note { display: flex; align-items: center; gap: 8px; color: var(--qplay-muted); font-size: 0.9rem; padding: 8px 0; }
.dash-empty-note [data-lucide] { width: 16px; height: 16px; }

/* Comunidade: cards clicáveis. */
.dash-community-card { text-decoration: none; color: inherit; display: block; transition: border-color .15s; }
.dash-community-card:hover { border-color: var(--qplay-primary); color: inherit; }

/* Próximas lives: lista com título + data/hora + badge de status. */
.dash-live-list { list-style: none; margin: 0; padding: 0; }
.dash-live-list li { border-top: 1px solid var(--qplay-border); }
.dash-live-list li:first-child { border-top: 0; }
.dash-live-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; color: inherit; }
.dash-live-list a:hover .dash-live-title { color: var(--qplay-primary); }
.dash-live-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-live-meta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--qplay-muted); font-size: 0.85rem; }
.dash-live-badge { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; background: var(--qplay-surface-2); border: 1px solid var(--qplay-border); }
.dash-live-badge--Live { background: rgba(220, 38, 38, 0.18); border-color: rgba(220, 38, 38, 0.4); color: #f87171; }

/* Top do mês: duas colunas de listas top 5. */
/* minmax(0,1fr): sem o 0, o track 1fr não encolhe abaixo do conteúdo (título longo sem quebra)
   e estoura a largura no desktop; com minmax(0,...) o ellipsis do .dash-top-title funciona. */
.dash-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-top-list { list-style: none; margin: 0; padding: 0; counter-reset: dashtop; }
.dash-top-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--qplay-border); }
.dash-top-list li:first-child { border-top: 0; }
.dash-top-list li::before { counter-increment: dashtop; content: counter(dashtop); flex: 0 0 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--qplay-surface-2); color: var(--qplay-muted); font-size: 0.8rem; font-weight: 700; }
.dash-top-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
a.dash-top-title:hover { color: var(--qplay-primary); }
.dash-top-count { flex: 0 0 auto; font-weight: 700; }
@media (max-width: 768px) { .dash-top-grid { grid-template-columns: 1fr; } }

/* ===== Conteúdo (lista estilo Studio) ===== */
.content-tabs { display: flex; gap: 8px; margin: 8px 0 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.content-tab { padding: 8px 14px; color: var(--qplay-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.content-tab.active { color: #fff; border-bottom-color: var(--qplay-primary); }
.content-cell { display: flex; gap: 12px; align-items: flex-start; }
.content-thumb { position: relative; flex: 0 0 120px; }
.content-thumb img { width: 120px; height: 68px; object-fit: cover; border-radius: 8px; background: var(--qplay-surface-2); }
.content-dur { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,0.8); color: #fff; font-size: 11px; padding: 1px 4px; border-radius: 3px; }
.content-meta { min-width: 0; }
.content-title { color: #fff; text-decoration: none; font-weight: 600; display: block; }
.content-desc { color: var(--qplay-muted); font-size: 13px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.bulk-selectall-link { background: none; border: 0; padding: 0; color: var(--qplay-primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
/* Interruptor compacto (ligar/desligar seção automática da home) */
.switch-sm { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; vertical-align: middle; }
.switch-sm input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-sm span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.18); transition: background .15s; }
.switch-sm span::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch-sm input:checked + span { background: var(--qplay-primary); }
.switch-sm input:checked + span::before { transform: translateX(16px); }
.home-auto-row { background: rgba(175, 70, 148, 0.05); }
.content-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 12px; flex-wrap: wrap; }
.pager-nav { display: flex; align-items: center; gap: 12px; }

/* ===== Conteúdo: espaçamento e tipografia da tabela ===== */
.content-table { width: 100%; border-collapse: collapse; }
.content-table th, .content-table td { padding: 12px 14px; vertical-align: top; }
.content-table thead th { white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,0.08); }
.content-table thead th a { color: var(--qplay-muted); text-decoration: none; font-weight: 600; }
.content-table thead th a:hover { color: #fff; }
.content-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
.content-table th:nth-child(4), .content-table td:nth-child(4) { min-width: 130px; white-space: nowrap; }
.content-table th:nth-child(5), .content-table td:nth-child(5) { min-width: 110px; white-space: nowrap; }
.content-table th:nth-child(6), .content-table td:nth-child(6),
.content-table th:nth-child(7), .content-table td:nth-child(7) { min-width: 90px; text-align: right; }
.content-title { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.table-scroll { overflow-x: auto; }
.content-desc { max-width: 380px; margin-top: 2px; }

/* ===== Analytics donut ===== */
.donut-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut { width: 96px; height: 96px; border-radius: 50%; flex: 0 0 96px;
    -webkit-mask: radial-gradient(circle 30px at center, transparent 98%, #000 100%);
            mask: radial-gradient(circle 30px at center, transparent 98%, #000 100%); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--qplay-muted); }
.donut-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* ===== Editor rico (Quill) ===== */
/* Editor rico (Quill) — área de edição escura por padrão (tema escuro); branca no tema claro. */
.rich-editor-host { background: rgba(20, 10, 19, 0.86); color: var(--qplay-text); border-radius: 0 0 8px 8px; min-height: 160px; }
.rich-editor-host .ql-editor { color: var(--qplay-text); font-size: 0.9rem; }
.rich-editor-host .ql-editor.ql-blank::before { color: rgba(214, 202, 205, 0.5); font-style: normal; }
.rich-editor-host .ql-editor a { color: var(--qplay-primary); }
.rich-editor-host .ql-editor blockquote { border-left-color: rgba(255,255,255,0.2); }
.ql-toolbar.ql-snow { background: var(--qplay-surface); border-color: rgba(255,255,255,0.12); border-radius: 8px 8px 0 0; }
.ql-toolbar.ql-snow .ql-stroke { stroke: var(--qplay-muted); }
.ql-toolbar.ql-snow .ql-fill { fill: var(--qplay-muted); }
.ql-toolbar.ql-snow .ql-picker { color: var(--qplay-muted); }
.ql-toolbar.ql-snow button:hover .ql-stroke, .ql-toolbar.ql-snow button.ql-active .ql-stroke, .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke { stroke: #fff; }
.ql-toolbar.ql-snow button:hover .ql-fill, .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: #fff; }
.ql-toolbar.ql-snow button:hover, .ql-toolbar.ql-snow button.ql-active, .ql-toolbar.ql-snow .ql-picker-label:hover { color: #fff; }
/* Dropdown "Normal/Título" do Quill no tema escuro */
.ql-snow .ql-picker-options { background: var(--qplay-surface); border-color: rgba(255,255,255,0.12); color: var(--qplay-text); }
.ql-snow.ql-toolbar button.ql-html::after { content: "HTML"; font-size: 11px; }
.ql-snow.ql-toolbar button.ql-emoji::after { content: "😀"; }
.ql-container.ql-snow { border-color: rgba(255,255,255,0.12); }

/* Tema claro: área de edição branca com texto escuro. */
html[data-theme="light"] .rich-editor-host { background: #fff; color: #111; }
html[data-theme="light"] .rich-editor-host .ql-editor { color: #111; }
html[data-theme="light"] .rich-editor-host .ql-editor.ql-blank::before { color: rgba(0,0,0,0.4); }
html[data-theme="light"] .ql-snow .ql-picker-options { background: #fff; color: #111; }

/* ===== Filtros de público (campanhas) ===== */
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.filter-col-title { font-weight: 600; font-size: .85rem; margin-bottom: 6px; }
@media (max-width: 900px) { .filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .filter-grid { grid-template-columns: 1fr; } }

/* ===== Materiais para download (pagina de assistir) ===== */
.material-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; background: var(--qplay-surface); color: #fff; text-decoration: none; transition: border-color .15s, background .15s; }
.material-link:hover { border-color: var(--qplay-primary); background: rgba(255,255,255,0.04); }
.material-link [data-lucide] { width: 18px; height: 18px; color: var(--qplay-primary); flex-shrink: 0; }
.material-title { flex: 1; font-size: .9rem; word-break: break-word; }
.material-size { font-size: .75rem; color: var(--qplay-muted); flex-shrink: 0; }

/* ===== Anotações da aula ===== */
/* Lista de anotações (substitui o <ul> com estilos inline no Aula.cshtml). */
.lesson-note-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
/* Tokenizado: borda e texto seguem o tema (antes rgba branco fixo + #fff). */
.lesson-note { border: 1px solid var(--qplay-border); border-radius: 12px; padding: 14px 16px; background: var(--qplay-surface); }
.lesson-note-body { font-size: .9rem; color: var(--qplay-text); white-space: pre-wrap; word-break: break-word; }
.lesson-note-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: .75rem; }
.lesson-note-meta .muted { margin-right: auto; }
/* Editar/Excluir com cara de botão (antes eram texto puro). Delete se destaca no hover. */
.lesson-note-edit summary,
.lesson-note-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--qplay-border);
  border-radius: 6px;
  background: none;
  color: var(--qplay-muted);
  font-size: .75rem;
  cursor: pointer;
  list-style: none;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.lesson-note-edit summary::-webkit-details-marker { display: none; }
.lesson-note-edit summary:hover { color: var(--qplay-text); background: rgba(127,127,127,0.10); }
.lesson-note-delete:hover { color: #ff5599; border-color: rgba(255,85,153,0.5); }

/* ===== Lote 6a — navegação e ações da aula ===== */
/* Prev fixado à esquerda; grupo Concluir/Concluída + Próxima à direita. */
.lesson-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.lesson-actions-end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* Estado "Concluída" com a MESMA altura/footprint do botão .qplay-button (evita shift da linha). */
.lesson-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 20px;
  border: 1px solid var(--qplay-border);
  border-radius: 8px;
  background: rgba(196,66,146,0.12);
  color: var(--qplay-primary);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
}
.lesson-done [data-lucide] { width: 16px; height: 16px; }

/* Empty state do player da aula: mesmo raio/tratamento do .qplay-player-shell populado. */
.player-wrapper.player-empty { border-radius: 16px; }

/* Padding da página de curso/aula (extraído do inline `padding:0 16px 64px`). */
.course-page-pad { padding: 0 16px 64px; }

/* Form inline sem margem (substitui `style="margin:0"` repetido). */
.inline-form { margin: 0; }

/* Cluster de engajamento (reações + estrelas) com ritmo vertical consistente. */
.engagement-cluster { display: flex; flex-direction: column; gap: 8px; font-size: .875rem; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
html[data-theme="light"] .engagement-cluster { border-top-color: rgba(0,0,0,0.08); }

/* Estrela vazia legível no tema claro (o rgba branco some sobre fundo claro). */
html[data-theme="light"] .star-btn { color: rgba(0,0,0,0.2); }

/* Mobile: ações da aula e linhas de engajamento empilham/quebram limpo. */
@media (max-width: 680px) {
  .lesson-actions { flex-direction: column; align-items: stretch; }
  .lesson-actions-end { flex-direction: column; align-items: stretch; margin-left: 0; }
  .lesson-actions .qplay-button,
  .lesson-actions .qplay-button-outline,
  .lesson-actions .lesson-done { width: 100%; justify-content: center; }
  .course-actions-row { row-gap: 10px; }
  .course-actions-row .inline-form,
  .course-actions-row .inline-form > .qplay-button,
  .course-actions-row .inline-form > .qplay-button-outline { flex: 1 1 auto; }
}

/* ===== Coleção exclusiva (home) ===== */
.excl-badge { font-size: .72rem; color: var(--qplay-muted); margin-left: 10px; font-weight: 500; vertical-align: middle; }
.excl-badge [data-lucide] { width: 14px; height: 14px; vertical-align: -2px; }
.media-card.locked { cursor: not-allowed; }
.media-card.locked .media-art { position: relative; }
.media-card.locked .media-thumb { filter: brightness(.35); }
.excl-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; text-align: center; font-size: .78rem; padding: 8px; }
.excl-overlay [data-lucide] { width: 24px; height: 24px; }
/* Cadeado sobre o card de live do hero (.live-mini): acima do gradiente ::after, com leve véu. */
.live-mini.locked { cursor: default; }
.live-mini .excl-overlay { z-index: 2; background: rgba(9, 4, 9, 0.5); }

/* ===== Cropper de imagem (uploads) ===== */
/* Editor de capa (módulo/aula) recolhível — reduz a altura do editor de curso. */
.capa-details { margin-top: 6px; }
.capa-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--qplay-muted);
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  width: fit-content;
  user-select: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.capa-details > summary::-webkit-details-marker { display: none; }
.capa-details > summary:hover { color: var(--qplay-text); border-color: rgba(255, 255, 255, 0.32); }
.capa-details[open] > summary { color: var(--qplay-text); margin-bottom: 8px; }
.capa-details > summary [data-lucide] { width: 14px; height: 14px; }
.capa-details--lesson { padding-left: 26px; }
.capa-set {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--qplay-primary, #e91e8c);
  border-radius: 999px;
  padding: 1px 7px;
}
.capa-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.capa-editor .capa-thumb {
  width: 56px;
  height: 32px;
  object-fit: cover;
  border-radius: 5px;
  flex: 0 0 auto;
}
.capa-editor .capa-url { flex: 1 1 200px; min-width: 160px; }
.capa-editor .capa-desc { flex: 2 1 260px; min-width: 200px; }
.capa-editor .capa-file { flex: 0 1 200px; }
.capa-editor .cropper-field { margin-top: 0; }
.capa-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--qplay-muted);
}
.capa-remove {
  background: transparent;
  border: 0;
  color: var(--qplay-primary, #e91e8c);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 2px;
}

/* Abas de módulo no editor de curso — evita listas verticais gigantes. */
.module-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  scrollbar-width: thin;
}
.module-tab,
.module-tab-add {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: var(--qplay-muted);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 200px;
}
.module-tab { overflow: hidden; text-overflow: ellipsis; }
.module-tab .module-tab-pos {
  font-size: 0.66rem;
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0 6px;
}
.module-tab:hover { color: var(--qplay-text); border-color: rgba(255, 255, 255, 0.3); }
.module-tab.active {
  background: var(--qplay-primary, #e91e8c);
  color: #fff;
  border-color: transparent;
}
.module-tab.active .module-tab-pos { background: rgba(255, 255, 255, 0.25); }
.module-tab-add { border-style: dashed; color: var(--qplay-text); }
.module-tab[draggable="true"] { cursor: grab; }
.module-tab.drag-row-dragging { opacity: 0.5; cursor: grabbing; }
.module-tab .module-tab-count {
  font-size: 0.66rem;
  min-width: 16px;
  text-align: center;
  border-radius: 999px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.14);
  opacity: 0.85;
}
.module-tab.active .module-tab-count { background: rgba(255, 255, 255, 0.28); }

.module-panel { display: none; }
.module-panel.active { display: block; }

.module-row,
.lesson-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.lesson-row { align-items: flex-start; }
.lesson-title { flex: 1 1 150px; min-width: 110px; }
.lesson-video { flex: 2 1 230px; min-width: 190px; }
.lesson-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.lesson-block {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Chips de placeholder do template de certificado — clicar insere no cursor. */
.cert-ph-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.cert-ph {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--qplay-primary, #e91e8c);
    background: rgba(233, 30, 140, 0.1);
    border: 1px solid rgba(233, 30, 140, 0.28);
    border-radius: 7px;
    padding: 3px 9px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}
.cert-ph:hover { background: rgba(233, 30, 140, 0.2); }
.cert-ph:active { transform: translateY(1px); }

/* Coluna de módulos acompanha a rolagem do formulário (fica sempre à mão). */
@media (min-width: 992px) {
  .course-modules-col {
    position: sticky;
    top: 16px;
    align-self: flex-start;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
  .course-modules-col::-webkit-scrollbar { width: 8px; }
  .course-modules-col::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
  }
}

/* Placeholder da coluna de módulos ao CRIAR um curso (antes de salvar). */
.module-create-hint {
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  color: var(--qplay-muted);
  background: rgba(255, 255, 255, 0.02);
}
.module-create-hint .mch-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--qplay-primary, #e91e8c);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.module-create-hint [data-lucide] {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 8px;
  color: var(--qplay-muted);
}
.module-create-hint h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--qplay-text);
}
.module-create-hint p {
  margin: 0 auto;
  max-width: 360px;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* Estado vazio de módulo sem aulas. */
.lesson-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: var(--qplay-muted);
  font-size: 0.82rem;
}
.lesson-empty [data-lucide] { width: 18px; height: 18px; flex: 0 0 auto; }

/* Filtros de gênero/coleção do seletor de vídeo — recolhidos por padrão. */
.vp-filters > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--qplay-muted);
  user-select: none;
}
.vp-filters > summary::-webkit-details-marker { display: none; }
.vp-filters > summary:hover { color: var(--qplay-text); }
.vp-filters > summary [data-lucide] { width: 13px; height: 13px; }
.vp-filters[open] > summary { margin-bottom: 2px; }

/* Responsividade do editor de módulos/aulas. */
@media (max-width: 991px) {
  .lesson-title,
  .lesson-video { flex: 1 1 100%; }
  .module-tab { max-width: 150px; }
  .capa-editor .capa-desc { flex: 1 1 100%; }
}

.cropper-field { margin-top: 4px; }
.cropper-preview { margin-top: 10px; }
.cropper-preview img { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; border: 1px solid rgba(255,255,255,0.14); cursor: pointer; }
.cropper-preview.is-round img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
/* Backdrop do nosso modal de recorte. NÃO usar a classe .cropper-modal: ela colide
   com a máscara interna do Cropper.js (que escurecia a imagem inteira). */
.qplay-crop-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; z-index: 3000; padding: 16px; }
.cropper-dialog { background: var(--qplay-surface); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 16px; width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
/* O tamanho do Cropper vem do tamanho renderizado da <img>; limitar a img nas duas dimensões
   mantém tudo dentro do modal (senão a imagem estoura e a área de recorte fica minúscula). */
.cropper-canvas-wrap { width: 100%; max-height: 60vh; overflow: hidden; }
.cropper-canvas-wrap > img { display: block; max-width: 100%; max-height: 60vh; }
.cropper-canvas-wrap .cropper-container { max-width: 100%; }
.cropper-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ===== Preview modal — incrementos (trailer, meta, favoritar, detalhes) ===== */
.preview-trailer { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.preview-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.preview-metaitem { font-size: .8rem; color: var(--qplay-muted); }
.preview-details { display: inline-block; margin-top: 12px; color: var(--qplay-primary); text-decoration: none; font-size: .9rem; font-weight: 500; }
.preview-details:hover { text-decoration: underline; }
.preview-favorite.active { border-color: var(--qplay-primary); color: #fff; }
.preview-favorite.active .icon-heart { fill: var(--qplay-primary); color: var(--qplay-primary); }
.preview-save.active .icon-bookmark { fill: currentColor; }

/* ===== Selos de usuário (verificado / admin) ===== */
.user-badge { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.user-badge-verified { color: var(--qplay-primary); }
/* Selo azul de conta oficial (ex.: Quadrangular Play) — azul do "verificado" clássico. */
.user-badge-official { color: #1d9bf0; }
.user-badge-admin { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--qplay-primary); padding: 1px 7px 1px 5px; border-radius: 999px; }
/* Variante só ícone (chat da live): escudo compacto e redondo, sem o texto "Admin". */
.user-badge-admin.is-icon { padding: 3px; gap: 0; line-height: 0; }

/* ============================================================
   Repaginada visual inspirada na Apple (DESIGN.md) — mantém a
   paleta rosa/escura do QPlay; adota tipografia, botões pill com
   micro-interação, navbar frosted-glass, sombras suaves, easing e
   um ritmo de espaçamento mais arejado.
   ============================================================ */
:root {
  --qplay-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --qplay-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", sans-serif;
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
  --qplay-radius-pill: 9999px;
  --qplay-radius-card: 18px;
  --qplay-shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.28);
}

body {
  font-family: var(--qplay-font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Títulos: SF Pro Display, peso 600, "Apple tight". */
h1, h2, h3,
.section-title h1, .section-title h2,
.page-hero h1, .page-hero h2,
.hero-content h1, .hero-content h2 {
  font-family: var(--qplay-font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
}

/* Navbar / header: frosted glass (assinatura Apple), no tom escuro do QPlay. */
.qplay-header {
  background: rgba(15, 7, 16, 0.62);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.qplay-nav-inner { min-height: 62px; }

.nav-link {
  letter-spacing: -0.01em;
  transition: color 200ms var(--ease-apple);
}

/* Botões: cantos pill + micro-interação de pressão + foco acessível. */
.qplay-button,
.qplay-login,
.qplay-button-outline {
  border-radius: var(--qplay-radius-pill);
  transition: transform 220ms var(--ease-apple), box-shadow 220ms var(--ease-apple), opacity 220ms var(--ease-apple), background 220ms var(--ease-apple);
}

.qplay-button { height: 40px; padding: 0 22px; }

.qplay-button:hover,
.qplay-login:hover,
.qplay-button-outline:hover {
  transform: translateY(-1px);
  opacity: 1;
}

.qplay-button:active,
.qplay-login:active,
.qplay-button-outline:active,
.qplay-button.secondary:active {
  transform: scale(0.96);
}

.qplay-button:focus-visible,
.qplay-button-outline:focus-visible,
.qplay-login:focus-visible {
  outline: 2px solid var(--qplay-primary);
  outline-offset: 2px;
}

/* Cards: raio maior, elevação suave e hover com easing Apple (leve "lift"). */
.media-art,
.media-thumb {
  border-radius: var(--qplay-radius-card);
}

.media-thumb {
  transition: box-shadow 260ms var(--ease-apple), transform 420ms var(--ease-apple);
}

.media-card:hover .media-thumb {
  transform: scale(1.04) translateY(-3px);
  box-shadow: 0 0 0 1px rgba(175, 70, 148, 0.55), 0 18px 44px -12px rgba(175, 70, 148, 0.5);
}

.media-title {
  letter-spacing: -0.012em;
}

/* Heros maiores e mais cinematográficos (repaginada ousada). */
.hero-main {
  height: clamp(360px, 46vw, 520px);
  border-radius: var(--qplay-radius-card);
}

.hero-content {
  gap: 16px;
  padding: 40px;
  max-width: 40rem;
}

.hero-content h1,
.hero-content h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

/* Hero mobile: definido DEPOIS das regras cinematográficas (sem media-query)
   acima, para que a ordem de origem faça o override valer em telas pequenas —
   hero mais baixo e padding mais justo no celular/tablet. */
@media (max-width: 991px) {
  .hero-main { height: 320px; }
  .hero-content { gap: 12px; padding: 24px; }
  .hero-content h1,
  .hero-content h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
}
@media (max-width: 680px) {
  .hero-main { height: 288px; }
  .hero-content { padding: 20px; }
}

.hero-mini {
  border-radius: 16px;
}

/* Page hero (páginas internas): mais respiro e "tight". */
.page-hero {
  padding-top: clamp(24px, 4vw, 44px);
  padding-bottom: clamp(20px, 3vw, 32px);
}

.page-hero h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
}

/* Ritmo de seções mais arejado na home e páginas de catálogo. */
main > .qplay-container > section + section,
.qplay-container > section + section {
  margin-top: clamp(44px, 6vw, 76px);
}

/* Superfícies/cards genéricos: cantos e sombra mais suaves.
   (Não inclui .live-chat-card — o chat da live tem layout compacto próprio.) */
.qplay-card,
.admin-form-card,
.stat-card {
  border-radius: var(--qplay-radius-card);
  box-shadow: var(--qplay-shadow-soft);
}

/* Inputs: pill discreto + foco com anel da marca. */
.auth-input,
.form-control,
.qplay-input {
  transition: border-color 200ms var(--ease-apple), box-shadow 200ms var(--ease-apple);
}

.auth-input:focus,
.form-control:focus,
.qplay-input:focus {
  border-color: var(--qplay-primary);
  box-shadow: 0 0 0 3px rgba(175, 70, 148, 0.22);
  outline: none;
}

/* =====================================================================
   TEMA CLARO (html[data-theme="light"])
   O visual escuro é o padrão (:root acima). Aqui só sobrescrevemos as
   variáveis e os poucos seletores com hex escuro / texto branco literal.
   O rosa da marca (--qplay-primary/--qplay-gradient) NÃO muda.
   ===================================================================== */
html[data-theme="light"] {
  --qplay-bg: #f5f5f7;
  --qplay-surface: #ffffff;
  --qplay-surface-2: #eef0f3;
  --qplay-text: #1d1d1f;
  --qplay-light: #3a3a3c;
  --qplay-muted: #6e6e73;
  --qplay-border: rgba(0, 0, 0, 0.10);
  --qplay-success: #1a8f4c;
  --qplay-danger: #d1293d;
  --qplay-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  --qplay-shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.10);
  --bs-body-bg: #f5f5f7;
  --bs-body-color: #1d1d1f;
  --bs-heading-color: #1d1d1f;
  --bs-border-color: rgba(0, 0, 0, 0.1);
  --bs-secondary-color: #6e6e73;
  color-scheme: light;
}

/* Body: a base tem !important no bg, então precisamos de !important aqui. */
html[data-theme="light"] body {
  background: #f5f5f7 !important;
  color: #1d1d1f;
}

/* Header / nav — a pedido, o menu do topo fica ESCURO igual ao modo escuro,
   mesmo no tema claro. Reaplica os valores do header escuro e o texto claro. */
html[data-theme="light"] .qplay-header {
  background: rgba(9, 4, 9, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
html[data-theme="light"] .qplay-header .nav-link { color: rgba(255, 255, 255, 0.55); }
html[data-theme="light"] .qplay-header .nav-link:hover,
html[data-theme="light"] .qplay-header .nav-link:focus { color: #fff; }
html[data-theme="light"] .qplay-header .nav-link.active { color: #fff; }
html[data-theme="light"] .qplay-header .qplay-menu-profile strong { color: #fff; }
html[data-theme="light"] .qplay-header .navbar-toggler { border-color: rgba(255, 255, 255, 0.2); }
html[data-theme="light"] .qplay-header .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2);
}

/* Textos brancos literais sobre superfícies que agora são claras -> tinta.
   (Os overlays do hero ficam sobre gradiente escuro da imagem -> mantêm branco.) */
html[data-theme="light"] .section-title h1,
html[data-theme="light"] .media-title,
html[data-theme="light"] .media-body h3,
html[data-theme="light"] .stat-number,
html[data-theme="light"] .qplay-menu-profile strong,
html[data-theme="light"] .dropdown-item,
html[data-theme="light"] .auth-title { color: #1d1d1f; }

/* Exceção: o título do card entra SOBRE a arte (scrim escuro do .media-art,
   igual nos dois temas) -> continua claro no tema claro. Mais específico que a
   regra `html[data-theme="light"] .media-title` acima. */
html[data-theme="light"] .media-card .media-title { color: #fff; }

/* Superfícies / cards */
html[data-theme="light"] .qplay-card,
html[data-theme="light"] .admin-form-card,
html[data-theme="light"] .stat-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  color: #1d1d1f;
}
html[data-theme="light"] .detail-panel,
html[data-theme="light"] .panel {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .media-thumb {
  background: var(--qplay-surface);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .badge-soft {
  background: rgba(196, 66, 146, 0.12);
  color: #8a2e6d;
}

/* ---- Sala ao vivo no tema claro ----
   O dark é o padrão; aqui trocamos as superfícies quase-pretas / rgba(branco)
   e o texto branco literal para tinta legível. Nome/texto/hora já seguem tokens
   (--qplay-text/--qplay-muted), então só sobram fundos, bordas e alguns estados. */
html[data-theme="light"] .live-chat-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .live-chat-form {
  border-top-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}
html[data-theme="light"] .live-chat-form input {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .live-chat-delete:hover,
html[data-theme="light"] .live-chat-message:hover .live-chat-delete { color: var(--qplay-primary); }
/* Atendimento: gradiente escuro -> superfície clara com borda rosa suave. */
html[data-theme="light"] .attendance-card {
  background:
    linear-gradient(135deg, rgba(196, 66, 146, 0.10), rgba(0, 0, 0, 0.02)),
    #ffffff;
  border-color: rgba(196, 66, 146, 0.32);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}
/* Enquetes / criação: superfícies e inputs no claro. */
html[data-theme="light"] .live-poll-create,
html[data-theme="light"] .live-poll-create-details { background: #ffffff; border-color: rgba(0, 0, 0, 0.10); }
html[data-theme="light"] .live-poll-create-details .live-poll-create { border-top-color: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .live-poll-input {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .live-poll-option {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .live-poll-bar { background: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .live-poll-close-btn { border-color: rgba(0, 0, 0, 0.18); }
/* Selo ENCERRADA: rgba(branco) some no claro -> cinza sobre tinta. */
html[data-theme="light"] .live-badge--ended {
  background: rgba(0, 0, 0, 0.06);
  color: var(--qplay-muted);
}

/* Dropdown menu */
html[data-theme="light"] .dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}

/* Footer */
html[data-theme="light"] .qplay-footer {
  background: #f5f5f7;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #6e6e73;
}
html[data-theme="light"] .qplay-socials a { border-color: rgba(0, 0, 0, 0.12); }
html[data-theme="light"] .qplay-socials a:hover,
html[data-theme="light"] .qplay-socials a:focus {
  border-color: rgba(0, 0, 0, 0.3);
  color: #1d1d1f;
}

/* Inputs */
html[data-theme="light"] .auth-input,
html[data-theme="light"] .form-control,
html[data-theme="light"] .qplay-input {
  background: #ffffff;
  color: #1d1d1f;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .qplay-search input::placeholder,
html[data-theme="light"] .form-control::placeholder,
html[data-theme="light"] .auth-input::placeholder { color: rgba(0, 0, 0, 0.4); }

/* Botão outline branco -> tinta no claro. O .active mantém o rosa. */
html[data-theme="light"] .qplay-button-outline {
  border-color: rgba(0, 0, 0, 0.2);
  color: #1d1d1f;
}
html[data-theme="light"] .qplay-button-outline:hover {
  border-color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.04);
  color: #1d1d1f;
}

/* Auth: o fundo do login usa gradiente vinho radial sobre o bg -> segue o var. */
html[data-theme="light"] .auth-google {
  border-color: rgba(0, 0, 0, 0.18);
  color: #1d1d1f;
}
html[data-theme="light"] .auth-google:hover { background: rgba(0, 0, 0, 0.04); }

/* Admin shell: sidebar/topbar usam superfícies escuras + texto branco literal. */
html[data-theme="light"] .admin-sidebar,
html[data-theme="light"] .admin-topbar {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .admin-nav a:hover { background: rgba(0, 0, 0, 0.05); color: #1d1d1f; }
html[data-theme="light"] .admin-nav-toggle { color: #1d1d1f; }
html[data-theme="light"] .admin-nav a.active { color: #ffffff; } /* mantém rosa no ativo */
html[data-theme="light"] .admin-nav-group > summary { color: #6e6e73; }
html[data-theme="light"] .admin-nav-group > summary:hover { background: rgba(0, 0, 0, 0.05); color: #1d1d1f; }
html[data-theme="light"] .admin-user { border-bottom-color: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .admin-user > summary { color: #1d1d1f; }
html[data-theme="light"] .admin-user > summary:hover,
html[data-theme="light"] .admin-user-menu a:hover,
html[data-theme="light"] .admin-user-menu button:hover { background: rgba(0, 0, 0, 0.05); color: #1d1d1f; }
html[data-theme="light"] .admin-user-menu a,
html[data-theme="light"] .admin-user-menu button { color: #6e6e73; }

/* Botão do alternador de tema */
.qplay-theme-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--qplay-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 150ms, background 150ms;
}
.qplay-theme-toggle:hover,
.qplay-theme-toggle:focus { color: var(--qplay-text); background: rgba(127, 127, 127, 0.12); }
.qplay-theme-toggle [data-lucide] { width: 20px; height: 20px; }

/* Modo claro — correções de contraste (títulos que ficavam brancos em fundo claro). */
html[data-theme="light"] .section-title,
html[data-theme="light"] .section-title h1,
html[data-theme="light"] .section-title h2,
html[data-theme="light"] .page-hero h1,
html[data-theme="light"] .page-hero h2,
html[data-theme="light"] .user-title-row h1 {
  color: #1d1d1f;
}

/* Fix: o avatar fica dentro de .profile-identity-card, cujo `span{display:block;white-space:nowrap;
   overflow:hidden;text-overflow:ellipsis}` (para os TEXTOS) vazava nos spans do avatar e quebrava
   o overlay (virava block → sem centralizar; "Alterar" cortado) e o badge (perdia o grid).
   Reforça os displays e desfaz o clamp de texto herdado. */
.profile-avatar-edit .profile-avatar-preview { display: grid; }
.profile-avatar-edit .profile-avatar-overlay {
  display: flex;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.profile-avatar-edit .profile-avatar-cam { display: grid; }

/* Respostas de comentário (1 nível): indentação sob o comentário pai */
.js-comment-replies { margin-left: 20px; padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, .08); }
.js-comment-replies:empty { margin: 0; padding: 0; border-left: 0; }
.comment-reply .js-comment-body { font-size: .8125rem; }

/* Link "Voltar" no topo das páginas de criar/editar do admin. */
.admin-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--qplay-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.admin-back:hover { color: #fff; }
.admin-back [data-lucide] { width: 16px; height: 16px; }
html[data-theme="light"] .admin-back { color: #6e6e73; }
html[data-theme="light"] .admin-back:hover { color: #1d1d1f; }

/* ===== Admin: drag-and-drop de ordenação (table[data-reorder-url]) ===== */
table[data-reorder-url] tbody tr[data-id] { cursor: grab; }
table[data-reorder-url] tbody tr[data-id]:active { cursor: grabbing; }
.drag-row-dragging { opacity: 0.45; outline: 1px dashed var(--qplay-primary); }

/* ===== Admin: busca global (Ctrl+K) ===== */
.admin-search-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--qplay-muted);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
}
.admin-search-btn:hover { color: #fff; border-color: var(--qplay-primary); }
.admin-search-btn [data-lucide] { width: 15px; height: 15px; }
.admin-search-hint kbd {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.7rem;
    margin-left: 3px;
}
@media (max-width: 768px) { .admin-search-hint { display: none; } }

.admin-palette {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
}
.admin-palette-box {
    width: min(560px, 100%);
    background: var(--qplay-surface, #1c0f1a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.admin-palette-box input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 14px 16px;
    font-size: 1rem;
    outline: none;
}
.admin-palette-results { max-height: 50vh; overflow-y: auto; }
.admin-palette-group {
    padding: 10px 16px 4px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--qplay-muted);
}
.admin-palette-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 16px;
    color: #fff;
    text-decoration: none;
    font-size: 0.92rem;
}
.admin-palette-item:hover, .admin-palette-item:focus, .admin-palette-item.is-active {
    background: rgba(233, 30, 140, 0.14);
    color: #fff;
}
.admin-palette-item small { color: var(--qplay-muted); flex-shrink: 0; }
/* Ícone dos itens do estado vazio (ações/fixados/recentes). */
.admin-palette-item [data-lucide] { width: 16px; height: 16px; flex: 0 0 auto; color: var(--qplay-muted); }
.admin-palette-item:hover [data-lucide], .admin-palette-item.is-active [data-lucide] { color: var(--qplay-primary); }
.admin-palette-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-palette-empty { padding: 16px; color: var(--qplay-muted); font-size: 0.9rem; }

html[data-theme="light"] .admin-palette-box { background: #fff; border-color: #e3e3e6; }
html[data-theme="light"] .admin-palette-box input { color: #1d1d1f; border-bottom-color: #e3e3e6; }
html[data-theme="light"] .admin-palette-item { color: #1d1d1f; }
html[data-theme="light"] .admin-pin-btn:hover { background: rgba(0,0,0,0.08); color: #1d1d1f; }
html[data-theme="light"] .admin-nav-fixados { border-bottom-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .admin-search-btn { background: #f2f2f4; border-color: #e3e3e6; color: #6e6e73; }

/* ===== Admin: toasts de sucesso (setupAdminToasts) ===== */
.qplay-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qplay-toast {
    background: #143d2b;
    color: #b9f2d0;
    border: 1px solid rgba(60, 220, 130, 0.35);
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 0.9rem;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    cursor: pointer;
    max-width: min(360px, 80vw);
}
.qplay-toast.show { opacity: 1; transform: translateY(0); }
html[data-theme="light"] .qplay-toast { background: #e8f8ef; color: #14532d; border-color: #a7e3c0; }

/* ===== Admin: link "Ver no site" no cabeçalho dos editores ===== */
.admin-view-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.admin-view-link [data-lucide] { width: 14px; height: 14px; }

/* ===== Sugestões da busca na navbar (setupSearchSuggest) ===== */
.qplay-search { position: relative; }
.search-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 260px;
    background: var(--qplay-surface, #1c0f1a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 1060;
}
.search-suggest-group {
    padding: 8px 14px 2px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--qplay-muted);
}
.search-suggest-item {
    display: block;
    padding: 7px 14px;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-suggest-item:hover, .search-suggest-item.active {
    background: rgba(233, 30, 140, 0.16);
    color: #fff;
}
html[data-theme="light"] .search-suggest { background: #fff; border-color: #e3e3e6; }
html[data-theme="light"] .search-suggest-item { color: #1d1d1f; }

/* ===== Banner de instalação do PWA (setupPwaInstallPrompt) ===== */
.pwa-install-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    z-index: 1070;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--qplay-surface, #1c0f1a);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
    max-width: min(560px, calc(100vw - 24px));
    font-size: 0.92rem;
    color: #fff;
}
.pwa-install-banner .qplay-button, .pwa-install-banner .qplay-button-outline {
    padding: 6px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
}
html[data-theme="light"] .pwa-install-banner { background: #fff; border-color: #e3e3e6; color: #1d1d1f; }

/* ===== Drag handle (módulos/aulas do curso e listas não-tabela) ===== */
.drag-handle {
    cursor: grab;
    user-select: none;
    color: var(--qplay-muted);
    font-size: 0.95rem;
    letter-spacing: -2px;
    padding: 4px 2px;
    flex-shrink: 0;
}
.drag-handle:active { cursor: grabbing; }

/* ============================================================
   VISUAL REFRESH (spec: docs/superpowers/specs/2026-07-13-visual-refresh-design.md)
   ============================================================ */

/* ===== 1. Cards Cinematic: título sobre a arte, gradiente e play no hover ===== */
.media-art {
    border-radius: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.media-art::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, transparent, rgba(10, 4, 10, 0.92));
    pointer-events: none;
    z-index: 1;
}
.media-art .media-thumb { border-radius: 14px; }

/* Título entra na arte (a estrutura .media-art + .media-title irmãos é uniforme) */
.media-card { position: relative; }

/* Botão "salvar na Minha Lista" injetado no card (aparece no hover; fixo em toque). */
.card-save-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.card-save-btn [data-lucide] { width: 16px; height: 16px; }
.media-card:hover .card-save-btn,
.card-save-btn:focus-visible { opacity: 1; transform: none; }
.card-save-btn:hover { background: var(--qplay-primary); }
.card-save-btn.saved { opacity: 1; transform: none; background: var(--qplay-primary); }
.card-save-btn.saved [data-lucide] { fill: currentColor; }
@media (hover: none) { .card-save-btn { opacity: 0.9; transform: none; } }

/* Preview de tráiler injetado sobre a thumb no hover (iframe mudo). Clique atravessa pro card. */
.card-trailer {
    position: absolute;
    z-index: 1;
    border: 0;
    border-radius: 12px;
    background: #000;
    pointer-events: none;
    animation: cardTrailerFade 0.25s ease both;
}
@keyframes cardTrailerFade { from { opacity: 0; } to { opacity: 1; } }

.media-card .media-title {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    z-index: 2;
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    pointer-events: none;
}
.media-card .media-subtitle {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    z-index: 2;
    margin: 0;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.media-card:has(.media-subtitle) .media-title { bottom: 25px; -webkit-line-clamp: 1; line-clamp: 1; }

/* "Continuar assistindo": sobe o título para não sentar sobre a barra de
   progresso (bottom:0). A barra ainda ganha por z-index, isto dá respiro visual. */
.media-card:has(.cw-progress) .media-title { bottom: 12px; }

/* Hover: crescimento no .media-art (o thumb deixa de escalar sozinho) + play */
.media-card:hover .media-art {
    transform: scale(1.05);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(233, 30, 140, 0.5);
}
.media-card:hover .media-thumb {
    transform: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.media-art::before {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) scale(0.8);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(233, 30, 140, 0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    padding-left: 3px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 3;
}
.media-card:hover .media-art::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Conteúdo exclusivo (locked): sem play e sem crescimento */
.media-card.locked .media-art::before { display: none; }
.media-card.locked:hover .media-art { transform: none; box-shadow: none; }

/* Fallback sem imagem: com o título agora na sobreposição, o texto grande
   centralizado do fallback duplicaria — só o gradiente fica como arte */
.media-card .media-thumb-fallback > span { display: none; }

/* ===== 3. Polimento global ===== */

/* Ícone (Lucide) dentro de botões/CTAs — extraído dos styles inline repetidos. */
.btn-icon { width: 16px; height: 16px; }
.btn-icon-fill { fill: currentColor; }

/* Micro-interações em botões */
.qplay-button, .qplay-button-outline {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.qplay-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -8px rgba(233, 30, 140, 0.6);
}
.qplay-button:active, .qplay-button-outline:active { transform: translateY(0) scale(0.98); }
.qplay-button-outline:hover { transform: translateY(-1px); }

/* Respiro entre trilhos (tipografia de .section-title consolidada acima). */
main section { margin-bottom: 12px; }

/* Respiro entre trilhos da home: seções que contêm um trilho (.catalog-row,
   também depois do site.js embrulhar em .row-scroller) ganham mais espaço.
   Escopado via :has para não afetar seções de outras páginas (ex.: .user-page). */
main section:has(> .catalog-row),
main section:has(> .row-scroller) {
  margin-bottom: clamp(28px, 4vw, 40px);
}

/* Títulos de trilho (home) podem ser longos ("Porque você assistiu ...") e
   quebrar em 2-3 linhas, desalinhando o topo das linhas. Limita a 2 linhas.
   Escopado a .rail-title -> não afeta o .section-title contêiner (Coleções) nem os <h1>. */
.section-title.rail-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Entrada dos trilhos (classe .reveal via IntersectionObserver no site.js) */
@media (prefers-reduced-motion: no-preference) {
    .reveal-init { opacity: 0; transform: translateY(14px); }
    .reveal {
        opacity: 1;
        transform: none;
        transition: opacity 0.45s ease, transform 0.45s ease;
    }
}

/* Scrollbar temática */
* { scrollbar-width: thin; scrollbar-color: #af4694 rgba(255, 255, 255, 0.06); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #af4694, #e91e8c);
    border-radius: 6px;
    border: 2px solid #0f0710;
}

/* Foco visível consistente (teclado) */
:focus-visible {
    outline: 2px solid #e91e8c;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip-link: fora da tela até receber foco (Tab), então aparece no topo. */
.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 4000;
    transform: translateY(-150%);
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--qplay-primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: 2px;
}
main:focus {
    outline: none;
}

/* ===== 2. Página de conteúdo Ambient ===== */

/* Glow difuso atrás do player (efeito cinema) */
.qplay-player-shell { position: relative; z-index: 0; }
.qplay-player-shell::before {
    content: "";
    position: absolute;
    left: -20px;
    right: -20px;
    top: -18px;
    height: 65%;
    background: radial-gradient(60% 90% at 50% 0%, rgba(175, 70, 148, 0.35), transparent 70%);
    filter: blur(28px);
    z-index: -1;
    pointer-events: none;
}

/* Descrição com clamp + "ver mais" (setupDescToggle no site.js) */
.desc-rich.collapsed {
    max-height: 120px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
    mask-image: linear-gradient(180deg, #000 62%, transparent);
}
.desc-toggle {
    background: none;
    border: 0;
    color: var(--qplay-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 0;
    cursor: pointer;
}
.desc-toggle:hover { text-decoration: underline; }

/* Comentários em cards */
li[data-comment-id] {
    background: var(--qplay-surface);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
li[data-comment-id].comment-reply { background: rgba(255, 255, 255, 0.03); }

/* ===== Página de conteúdo (vídeo/live): ritmo, avisos e comentários =====
   Classes compartilhadas entre Videos/Details e Lives/Details para eliminar
   os style="..." inline duplicados. Não muda a aparência: só consolida. */

/* Ritmo vertical uniforme entre os blocos abaixo do player. O primeiro filho
   herda o respiro do próprio .watch-body; os demais recebem margem no topo. */
.watch-body { margin-top: 20px; }
.watch-body > * + * { margin-top: 18px; }
/* Seções (materiais, comentários) ganham um respiro maior. */
.watch-body > section { margin-top: 28px; }

.watch-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--qplay-text);
    margin: 0;
}

/* Reunião não tem engajamento (likes/estrelas/comentários), então a coluna
   esquerda fica esparsa. A descrição ganha corpo e contraste pra equilibrar. */
.desc-rich--reuniao {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--qplay-text);
    max-width: 72ch;
}

/* Aviso simples (ex.: "Entre para comentar"). */
.watch-notice {
    font-size: .875rem;
    color: var(--qplay-muted);
    padding: 12px 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--qplay-border);
    border-radius: 10px;
}

/* Avatar do comentário (imagem ou fallback com a inicial). */
.comment-avatar,
.comment-avatar-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
.comment-avatar { object-fit: cover; }
.comment-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .875rem;
    background: rgba(255, 255, 255, .1);
}

/* Caixa de comentar com o avatar de "comentando como" à esquerda do textarea. */
.comment-compose {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.comment-compose .auth-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Avatar de "postando como" (composição). Reflete a identidade ativa e troca com o toggle
   "Comentar/Enviar como" (JS: renderComposeAvatar). Compõe com a classe de tamanho do contexto
   (.comment-avatar nos comentários, .live-chat-avatar no chat) e vira o avatar oficial com .is-official. */
.compose-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 600;
    font-size: .875rem;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .1);
    color: var(--qplay-text);
}
.compose-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.live-chat-avatar.compose-avatar { font-size: .72rem; }

/* Seletor "Comentar como:" (admin) — perfil pessoal x conta oficial. Segmented control compacto. */
.comment-as {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.comment-as-label { font-size: .8125rem; color: var(--qplay-muted); }
.comment-as-seg {
    display: inline-flex;
    border: 1px solid var(--qplay-border);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
}
.comment-as-btn {
    background: none;
    border: none;
    color: var(--qplay-muted);
    font-size: .8125rem;
    font-weight: 600;
    padding: 5px 14px;
    cursor: pointer;
    line-height: 1.2;
}
.comment-as-btn + .comment-as-btn { border-left: 1px solid var(--qplay-border); }
.comment-as-btn.active {
    background: var(--qplay-primary);
    color: #fff;
}
/* Variante compacta para o chat da live (fica acima do input). */
.live-chat-as { margin-bottom: 8px; }
.live-chat-as .comment-as-btn { padding: 4px 10px; font-size: .75rem; }

.comment-main { flex: 1; min-width: 0; }
/* Respiro de leitura nos comentarios (legibilidade 40+); nao afeta font-size/cor definidos inline. */
.js-comment-body { line-height: 1.62; }
/* Alvo de toque de 44px (padrao de acessibilidade) so nas paginas publicas (body.qplay-public);
   o admin fica compacto. Exclui o botao "Entrar" da navbar, que tem altura propria. */
.qplay-public .qplay-button:not(.qplay-login),
.qplay-public .qplay-button-outline:not(.qplay-login) { min-height: 44px; }
.comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.comment-author { font-size: .875rem; font-weight: 600; color: var(--qplay-text); }
.comment-handle { font-size: .8125rem; color: var(--qplay-muted); }
.comment-author-link, .live-chat-name-link { color: inherit; text-decoration: none; }
.comment-author-link:hover, .live-chat-name-link:hover { text-decoration: underline; }
.comment-time { font-size: .75rem; color: var(--qplay-muted); }
.comment-hidden-badge {
    font-size: .7rem;
    background: rgba(255, 255, 255, .08);
    padding: 1px 8px;
    border-radius: 99px;
    color: var(--qplay-muted);
}

/* Selo e destaque do comentário fixado pelo admin. */
.comment-pinned-badge{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:600;color:var(--qplay-primary);background:rgba(175,70,148,.12);border:1px solid rgba(175,70,148,.35);border-radius:999px;padding:1px 8px;margin-left:6px;letter-spacing:.02em}
.comment-item.is-pinned,li.is-pinned{position:relative}
li.is-pinned > .comment-main{border-left:2px solid var(--qplay-primary);padding-left:12px}
.js-comment-pin-btn.active{color:var(--qplay-primary)}

/* Linha de ações do comentário (curtir / responder / editar / excluir). */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .75rem;
}
.comment-actions .comment-action-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--qplay-muted);
    cursor: pointer;
    font-size: .75rem;
    text-decoration: none;
}
.comment-actions form { margin: 0; display: inline; }

/* Ajuste fino em telas estreitas. */
@media (max-width: 680px) {
    .watch-title { font-size: 1.2rem; }
    .watch-body .share-btn { width: 100%; justify-content: center; }
}

/* ===== 4. Admin ===== */

/* Cards de métrica com ícone e variação */
.metric-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.metric-ic [data-lucide] { width: 17px; height: 17px; }
/* Chips de ícone dos cards — valores movidos do style inline para modificadores. */
.metric-ic--pink  { background: rgba(233, 30, 140, 0.16); color: #e91e8c; }
.metric-ic--blue  { background: rgba(70, 102, 233, 0.16); color: #7f9bff; }
.metric-ic--amber { background: rgba(233, 160, 70, 0.16); color: #e9a046; }
.metric-ic--red   { background: rgba(233, 70, 70, 0.16);  color: #ff7a7a; }
.metric-ic--green { background: rgba(70, 233, 154, 0.16); color: #46e99a; }
/* Tema claro: escurece o texto dos chips claros p/ manter contraste no branco. */
html[data-theme="light"] .metric-ic--blue  { color: #3a55c4; }
html[data-theme="light"] .metric-ic--amber { color: #b6761a; }
html[data-theme="light"] .metric-ic--red   { color: #d1293d; }
html[data-theme="light"] .metric-ic--green { color: #1a8f4c; }
.metric-delta { font-size: 0.8rem; font-weight: 600; display: block; margin-top: 4px; }
.metric-delta.up { color: var(--qplay-success); }
.metric-delta.down { color: var(--qplay-danger); }
.metric-delta.flat { color: var(--qplay-muted); }
/* "vs 30d anteriores" — sufixo menor e discreto, sem herdar a cor up/down. */
.metric-delta .delta-suffix { font-size: 0.7rem; font-weight: 400; color: var(--qplay-muted); margin-left: 4px; }

/* Tabelas: hover de linha + header fixo dentro do scroll */
.data-table tbody tr { transition: background 0.12s ease; }
.data-table tbody tr:hover td { background: rgba(233, 30, 140, 0.06); }
/* Linha/card clicável por inteiro (JS setupClickableRows). */
.data-table tbody tr.row-link { cursor: pointer; }
.data-table tbody tr.row-link:focus-visible { outline: 2px solid var(--qplay-primary); outline-offset: -2px; }
@media (max-width: 640px) {
    .data-table.stack-mobile tbody tr.row-link:hover { border-color: rgba(233, 30, 140, 0.4); }
    .data-table.stack-mobile tbody tr.row-link:active { background: rgba(233, 30, 140, 0.06); }
}
.table-scroll { max-height: 72vh; overflow-y: auto; }
.table-scroll .data-table thead th {
    position: sticky;
    top: 0;
    background: var(--qplay-surface, #1c0f1a);
    z-index: 3;
}

/* ============================================================
   RESPONSIVIDADE DAS TABELAS DO ADMIN
   (1) rolagem lateral limpa + dica de "arraste" no mobile/tablet
   (2) linhas viram cards empilhados no celular (.stack-mobile)
   ============================================================ */

/* (1) Contém qualquer largura excedente dentro do próprio scroller
   (mata vazamentos de 1–20px que fazem a PÁGINA rolar de lado). */
@media (max-width: 768px) {
    .admin-main { overflow-x: hidden; }

    .table-scroll {
        -webkit-overflow-scrolling: touch;
        /* Sombras de rolagem: aparecem só quando há conteúdo cortado
           (background-attachment: local segue o scroll interno). */
        background:
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat;
        background-attachment: scroll, scroll;
    }

    /* Densidade menor: cabe mais coluna antes de precisar rolar. */
    .content-table th,
    .content-table td { padding: 9px 10px; font-size: 0.86rem; }

    /* Cabeçalhos/toolbars do admin (título + botões via utilitários Bootstrap):
       quebram em vez de estourar a largura no celular. */
    .admin-main .d-flex.justify-content-between { flex-wrap: wrap; gap: 10px 12px; }
    .admin-main .d-flex.justify-content-between > .d-flex { flex-wrap: wrap; }
}

/* (2) Celular estreito: a tabela marcada com .stack-mobile vira lista de cards. */
@media (max-width: 640px) {
    .table-scroll:has(.stack-mobile) { max-height: none; overflow: visible; }

    .data-table.stack-mobile,
    .data-table.stack-mobile tbody,
    .data-table.stack-mobile tbody tr,
    .data-table.stack-mobile tbody td { display: block; width: 100%; }

    /* Cabeçalho vira rótulo por célula (mantém acessível fora da tela). */
    .data-table.stack-mobile thead {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0;
        overflow: hidden; clip: rect(0 0 0 0);
    }

    .data-table.stack-mobile tbody tr {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 8px 12px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, 0.02);
    }

    .data-table.stack-mobile tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border: 0 !important;
        min-width: 0 !important;
        white-space: normal !important;
        text-align: right;
    }
    .data-table.stack-mobile tbody td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        font-weight: 600;
        font-size: 0.78rem;
        color: var(--qplay-muted);
    }
    /* Célula sem rótulo (ações) ocupa a linha inteira, alinhada à direita. */
    .data-table.stack-mobile tbody td:not([data-label])::before,
    .data-table.stack-mobile tbody td[data-label=""]::before { content: none; }
    .data-table.stack-mobile tbody td.cell-actions { justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 10px; }
    .data-table.stack-mobile tbody td.cell-check { justify-content: flex-start; }

    /* Célula-principal com conteúdo rico (thumb + título) vira cabeçalho do card:
       ocupa a linha inteira, sem rótulo, e deixa o conteúdo fluir/quebrar. */
    .data-table.stack-mobile tbody td:has(.content-cell) {
        display: block;
        text-align: left;
        padding-bottom: 4px;
    }
    .data-table.stack-mobile tbody td:has(.content-cell)::before { content: none; }
    .data-table.stack-mobile .content-cell { flex-wrap: wrap; }
    .data-table.stack-mobile .content-thumb { flex: 0 0 88px; }
    .data-table.stack-mobile .content-meta { min-width: 0; flex: 1; }
    .data-table.stack-mobile .content-title { white-space: normal; }

    /* Célula com conteúdo longo (ex.: corpo do comentário): rótulo em cima,
       valor em bloco de largura total. */
    .data-table.stack-mobile tbody td.cell-stacked {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    .data-table.stack-mobile tbody td.cell-stacked::before { flex: none; margin-bottom: 2px; }
}

html[data-theme="light"] .data-table.stack-mobile tbody tr {
    border-color: #e3e3e6;
    background: #fafafa;
}

/* (3) Métricas/Analytics no celular:
   - Abas de período (.content-tabs) rolam na horizontal em vez de estourar a largura.
   - Barras de funil (label + barra + valor com larguras fixas) empilham: a barra
     ocupa a linha inteira e rótulo/valor dividem a linha de cima.
   - Rótulos de barras (chart-label / _StatBars) encolhem para sobrar espaço à barra. */
@media (max-width: 768px) {
    .content-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .content-tab { white-space: nowrap; flex: 0 0 auto; }
}
@media (max-width: 640px) {
    .stat-funnel .d-flex.align-items-center { flex-wrap: wrap; }
    .stat-funnel .d-flex.align-items-center > span:first-child { width: auto !important; flex: 1 1 auto; min-width: 0; }
    .stat-funnel .d-flex.align-items-center > span:last-child { width: auto !important; flex: 0 0 auto; }
    .stat-funnel .d-flex.align-items-center > span[style*="flex:1"],
    .stat-funnel .d-flex.align-items-center > span[style*="flex: 1"] { flex-basis: 100% !important; order: 2; }
    /* Dica do funil que usa margin-left fixa para alinhar sob a barra. */
    .stat-funnel .muted[style*="margin-left"] { margin-left: 0 !important; }
}
@media (max-width: 480px) {
    .chart-label { width: 96px; }
}

/* Badges de status (lista de Conteúdo) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
}
.status-badge.pub { background: rgba(70, 233, 154, 0.12); color: #46e99a; }
.status-badge.draft { background: rgba(233, 160, 70, 0.14); color: #e9a046; }

/* Sidebar: item ativo com barrinha pink + degradê */
.admin-nav a.active,
.admin-nav .admin-nav-children a.active {
    background: linear-gradient(90deg, rgba(233, 30, 140, 0.16), transparent);
    border-left: 3px solid #e91e8c;
    color: #fff;
}

/* ============================================================
   FORMULÁRIOS DO ADMIN (A: seções em cards, B: inputs refinados,
   C: barra de ações fixa) — escolhas do brainstorm visual
   ============================================================ */

/* A — Seção temática em card, com título (quadradinho pink) e dica */
.form-section {
    background: var(--qplay-surface);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 18px 20px 10px;
    margin-bottom: 16px;
}
.form-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}
.form-section h3::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--qplay-gradient, linear-gradient(135deg, #af4694, #e91e8c));
    flex-shrink: 0;
}
/* Seções com ícone próprio dispensam o pontinho genérico. */
.form-section h3:has(.fs-ic)::before { display: none; }
.form-section h3 .fs-ic {
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(233, 30, 140, 0.14);
    color: var(--qplay-primary, #e91e8c);
    flex-shrink: 0;
}
html[data-theme="light"] .form-section h3 .fs-ic { background: rgba(175, 70, 148, 0.12); }

/* Selo de status (Publicado/Rascunho) no cabeçalho do editor de curso. */
.course-status-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--qplay-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.course-status-badge [data-lucide],
.status-badge [data-lucide] { width: 15px; height: 15px; }
.course-status-badge.is-live,
.status-badge.is-live {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.14);
    border-color: rgba(76, 175, 80, 0.4);
}
.course-status-badge.is-scheduled,
.status-badge.is-scheduled {
    color: #e9a046;
    background: rgba(233, 160, 70, 0.14);
    border-color: rgba(233, 160, 70, 0.4);
}
.form-section .form-section-hint {
    margin: 0 0 14px;
    color: var(--qplay-muted);
    font-size: 0.8rem;
}
html[data-theme="light"] .form-section { background: #fff; border-color: #e3e3e6; }
html[data-theme="light"] .form-section h3 { color: #1d1d1f; }

/* Seção "Compartilhamento" — abas por formato + preview ao vivo */
.share-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}
.share-tab {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--qplay-muted);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.share-tab:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.share-tab.active {
    background: var(--qplay-primary);
    border-color: var(--qplay-primary);
    color: #fff;
}
.share-panel { display: none; }
.share-panel.active { display: block; }
.share-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 20px;
    align-items: start;
}
.share-preview-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--qplay-surface-2, #0f070d);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    min-height: 120px;
}
.share-preview {
    max-width: 100%;
    max-height: 360px;
    border-radius: 8px;
    display: none;
}
.share-preview.has-preview { display: block; }
html[data-theme="light"] .share-tab { border-color: #d9d9de; }
html[data-theme="light"] .share-preview-wrap { background: #f4f4f6; border-color: #e3e3e6; }
@media (max-width: 768px) {
    .share-panel-grid { grid-template-columns: minmax(0, 1fr); }
}

/* B — Inputs dos editores (.field-group) com altura confortável e foco vivo */
.field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field-group select,
.field-group textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(20, 10, 19, 0.86);
    color: var(--qplay-text);
    padding: 8px 14px;
    font-size: 0.9rem;
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-group textarea { min-height: 88px; }
.field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.field-group select:focus,
.field-group textarea:focus {
    border-color: var(--qplay-primary);
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.18);
}
.form-control:focus { box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.15); }
html[data-theme="light"] .field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="light"] .field-group select,
html[data-theme="light"] .field-group textarea {
    background: #fff;
    border-color: #d8d8dc;
    color: #1d1d1f;
}

/* C — Barra de ações fixa no rodapé enquanto o formulário rola */
/* Pista de "alterações não salvas" no botão Salvar (via setupFormGuard). */
.qplay-button.is-dirty { position: relative; }
.qplay-button.is-dirty::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffb020;
    border: 2px solid var(--qplay-bg, #0f0710);
}
html[data-theme="light"] .qplay-button.is-dirty::after { border-color: #fff; }

.form-actions-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: rgba(15, 7, 16, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 18px;
    padding: 12px 4px;
}
html[data-theme="light"] .form-actions-sticky { background: rgba(255, 255, 255, 0.92); border-top-color: #e3e3e6; }

/* ===== Admin: dropzones de arquivo (arrastar do computador) ===== */
.file-dropzone {
    position: relative;
    border: 1.5px dashed rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 16px 14px;
    text-align: center;
    color: var(--qplay-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.file-dropzone:hover { border-color: var(--qplay-primary); }
.file-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.file-dropzone-hint { pointer-events: none; }
.file-dropzone.drag-over,
.cropper-field.drag-over {
    border-color: var(--qplay-primary);
    background: rgba(233, 30, 140, 0.07);
    outline: 2px dashed rgba(233, 30, 140, 0.6);
    outline-offset: 3px;
    border-radius: 10px;
}
html[data-theme="light"] .file-dropzone { border-color: #cfcfd4; }

/* ===== Admin: modal de confirmação ([data-confirm]) ===== */
.qplay-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 3100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.65);
}
.qplay-confirm-box {
    width: min(420px, 100%);
    background: var(--qplay-surface, #1c0f1a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.qplay-confirm-box h4 { margin: 0 0 8px; font-size: 1rem; color: #fff; }
.qplay-confirm-box p { margin: 0 0 18px; color: var(--qplay-muted); font-size: 0.9rem; line-height: 1.5; }
.qplay-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
html[data-theme="light"] .qplay-confirm-box { background: #fff; border-color: #e3e3e6; }
html[data-theme="light"] .qplay-confirm-box h4 { color: #1d1d1f; }

/* ===== Admin: preview de card ao vivo nos editores ===== */
.editor-card-preview { width: 150px; flex-shrink: 0; }
.editor-card-preview .ecp-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--qplay-muted);
}
.editor-card-preview .ecp-art {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: var(--qplay-gradient, linear-gradient(135deg, #af4694, #e91e8c));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.editor-card-preview.landscape .ecp-art { aspect-ratio: 16 / 9; }
.editor-card-preview .ecp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editor-card-preview .ecp-grad {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background: linear-gradient(180deg, transparent, rgba(10, 4, 10, 0.92));
    pointer-events: none;
}
.editor-card-preview .ecp-title {
    position: absolute;
    left: 9px; right: 9px; bottom: 20px;
    margin: 0;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.editor-card-preview .ecp-meta {
    position: absolute;
    left: 9px; right: 9px; bottom: 7px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.62rem;
}

/* ===== Admin: empty state ===== */
.empty-state {
    text-align: center;
    padding: 44px 20px;
    color: var(--qplay-muted);
}
.empty-state .empty-state-icon { margin-bottom: 10px; color: var(--qplay-primary); }
.empty-state .empty-state-icon [data-lucide] { width: 44px; height: 44px; }
.empty-state h3 { margin: 0 0 6px; font-size: 1.05rem; color: #fff; }
.empty-state p { margin: 0 0 16px; font-size: 0.9rem; }
html[data-theme="light"] .empty-state h3 { color: #1d1d1f; }

/* ===== Admin: breadcrumbs ===== */
.admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    font-size: 0.8rem;
    color: var(--qplay-muted);
}
.admin-breadcrumb a { color: var(--qplay-muted); text-decoration: none; }
.admin-breadcrumb a:hover { color: var(--qplay-primary); }
.admin-breadcrumb .sep { opacity: 0.5; }
.admin-breadcrumb .current { color: #fff; font-weight: 600; }
html[data-theme="light"] .admin-breadcrumb .current { color: #1d1d1f; }

/* ===== Menções @usuario nos comentários ===== */
.js-comment-body .mention {
    color: var(--qplay-primary);
    font-weight: 600;
    background: rgba(233, 30, 140, 0.1);
    border-radius: 4px;
    padding: 0 3px;
}

/* ===== Dashboard: card "Precisa de atenção" ===== */
.attention-card {
    background: var(--qplay-surface);
    border: 1px solid rgba(233, 160, 70, 0.35);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.attention-card h2 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e9a046;
    display: flex;
    align-items: center;
    gap: 8px;
}
.attention-card h2 [data-lucide] { width: 16px; height: 16px; }
.attention-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attention-card li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--qplay-text);
    text-decoration: none;
    font-size: 0.88rem;
}
.attention-card li a:hover { color: var(--qplay-primary); }
.attention-card .att-count {
    background: rgba(233, 160, 70, 0.16);
    color: #e9a046;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}
html[data-theme="light"] .attention-card { background: #fff; }

/* ============================================================
   FORMULÁRIOS DO ADMIN — layout rodada 3
   (índice de seções, switches, chips de coleções, 2 colunas)
   ============================================================ */

/* Switches: checkboxes .form-check-input do admin viram liga/desliga */
.admin-shell .form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 38px;
    height: 21px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    position: relative;
    cursor: pointer;
    transition: background 0.18s ease;
    flex-shrink: 0;
    vertical-align: middle;
}
.admin-shell .form-check-input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s ease;
}
.admin-shell .form-check-input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #af4694, #e91e8c);
}
.admin-shell .form-check-input[type="checkbox"]:checked::before { transform: translateX(16px); }
.admin-shell .form-check { display: flex; align-items: flex-start; gap: 8px; }
.admin-shell .form-check .form-check-label { cursor: pointer; }
.check-hint { display: block; color: var(--qplay-muted); font-size: 0.72rem; margin-top: 1px; }
/* Grade de switches: quebra em colunas de largura mínima em vez de espremer numa
   única linha (evita o texto "vazar"/empilhar quando há muitos toggles). */
.admin-shell .switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 22px;
}
html[data-theme="light"] .admin-shell .form-check-input[type="checkbox"] { background: #d4d4d9; }

/* Chips de coleções com busca (editores vídeo/curso) */
.chips-filter { max-width: 260px; margin-bottom: 8px; }

/* Índice lateral das seções (scroll-spy — setupFormSectionNav) */
.form-section-nav {
    position: fixed;
    right: 26px;
    top: 140px;
    width: 190px;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 10;
}
@media (min-width: 1500px) { .form-section-nav { display: flex; } }
.form-section-nav a {
    color: var(--qplay-muted);
    text-decoration: none;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.form-section-nav a:hover { color: #fff; }
.form-section-nav a.active {
    color: var(--qplay-primary);
    border-left-color: var(--qplay-primary);
    font-weight: 600;
}
html[data-theme="light"] .form-section-nav a { border-left-color: #e3e3e6; }

/* Duas colunas automáticas: campos "curtos" (URL/número/data) pareiam no desktop */
@media (min-width: 900px) {
    .form-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-items: start; }
    .form-section > * { grid-column: 1 / -1; }
    .form-section > .field-group:has(> input[type="url"]),
    .form-section > .field-group:has(> input[type="number"]),
    .form-section > .field-group:has(> input[type="date"]),
    .form-section > .field-group:has(> input[type="datetime-local"]) {
        grid-column: auto / span 1;
    }
}

/* ===== Dashboard: eixo dos gráficos de área ===== */
.chart-axis {
    display: flex;
    justify-content: space-between;
    color: var(--qplay-muted);
    font-size: 0.7rem;
    margin-top: 4px;
}
.chart-day:hover { fill: rgba(255, 255, 255, 0.06); }
/* Tooltip por dia (dashboard/analytics): guia vertical no gráfico + balão seguindo o cursor */
.day-chart { position: relative; }
.day-chart-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
    transform: translateX(-0.5px);
}
.day-chart-tip {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    white-space: nowrap;
    background: #1c0f1a;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .day-chart-tip { background: #1d1d1f; border-color: rgba(255,255,255,0.1); }
html[data-theme="light"] .day-chart-guide { background: rgba(0,0,0,0.25); }
/* Cabeçalho de tabela ordenável (clica pra ordenar / inverter) */
.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sortable::after { content: " ↕"; opacity: 0.3; font-size: 0.85em; }
.th-sortable:hover { color: var(--qplay-primary); }
.th-sortable.sorted-asc::after { content: " ▲"; opacity: 0.9; }
.th-sortable.sorted-desc::after { content: " ▼"; opacity: 0.9; }

/* Seletor visual de ícone (editor de destaque): botões com o ícone Lucide de verdade */
.icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-picker-opt {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 84px; padding: 10px 6px; cursor: pointer;
    background: rgba(255, 255, 255, 0.03); color: var(--qplay-muted);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
    font-size: 0.72rem; text-align: center; transition: border-color .15s, background .15s, color .15s;
}
.icon-picker-opt [data-lucide] { width: 22px; height: 22px; }
.icon-picker-opt:hover { border-color: var(--qplay-primary); color: #fff; }
.icon-picker-opt.selected {
    border-color: var(--qplay-primary); color: #fff;
    background: color-mix(in srgb, var(--qplay-primary) 18%, transparent);
    box-shadow: 0 0 0 1px var(--qplay-primary) inset;
}
html[data-theme="light"] .icon-picker-opt { background: #f6f6f8; border-color: #e3e3e6; color: #555; }
html[data-theme="light"] .icon-picker-opt:hover,
html[data-theme="light"] .icon-picker-opt.selected { color: #1d1d1f; }

/* ===== Admin: Agenda (calendário mensal) ===== */
.agenda-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.agenda-dow {
    text-align: center;
    color: var(--qplay-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 0;
}
.agenda-cell {
    min-height: 92px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.agenda-blank { background: transparent; border-color: transparent; }
.agenda-today { border-color: var(--qplay-primary); box-shadow: 0 0 0 1px var(--qplay-primary) inset; }
.agenda-daynum { font-size: 0.75rem; font-weight: 700; color: var(--qplay-muted); }
.agenda-today .agenda-daynum { color: var(--qplay-primary); }
.agenda-item {
    display: block;
    font-size: 0.68rem;
    line-height: 1.25;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-item:hover { filter: brightness(1.25); color: #fff; }
.agenda-time { opacity: 0.75; font-weight: 600; }
.ag-live { background: rgba(233, 30, 140, 0.3); }
.ag-reuniao { background: rgba(124, 58, 237, 0.32); }
.ag-video { background: rgba(59, 130, 246, 0.3); }
.ag-curso { background: rgba(16, 185, 129, 0.3); }
.ag-aviso { background: rgba(245, 158, 11, 0.32); }
.ag-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
html[data-theme="light"] .agenda-cell { background: #fafafa; border-color: #e8e8ec; }
html[data-theme="light"] .agenda-item { color: #1d1d1f; }

/* ===== Admin: tabela de comentários (colunas fixas, sem vazamento) ===== */
.comments-table { table-layout: fixed; width: 100%; min-width: 900px; }
.comments-table td { vertical-align: top; }
.comments-table .ct-trunc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comments-table .ct-link {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comments-table .ct-link { font-size: 0.85rem; }
.comments-table td:nth-child(3) span { word-break: break-word; }
.ct-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }

/* Comentários: thumbnail do conteúdo no lugar do título (título fica no tooltip) */
.ct-thumb {
    display: block;
    width: 104px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ct-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--qplay-gradient, linear-gradient(135deg, #af4694, #e91e8c));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Comentários: avatar do autor */
.ct-author { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ct-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ct-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(233, 30, 140, 0.2);
    color: var(--qplay-primary);
    font-weight: 700;
    font-size: 0.8rem;
}
.ct-author-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
}

/* Célula de nome na tabela de usuários: avatar + (nome em cima / @@usuário embaixo) */
.user-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.user-cell-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.user-cell-handle {
    color: var(--qplay-muted);
    font-size: 0.75rem;
}

/* ===== Explorar: seções por gênero, thumbs maiores, revelação em lotes ===== */
.explorar-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
@media (min-width: 1200px) { .explorar-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.explorar-section { margin-bottom: 28px; }
.explorar-section .section-title { margin-bottom: 12px; }
.chunk-hidden { display: none !important; }

/* ===== Comentários (admin): data compacta e botões menores ===== */
.ct-date { white-space: nowrap; font-size: 0.85rem; }
.ct-date .ct-time { display: block; color: var(--qplay-muted); font-size: 0.72rem; }
.ct-actions .btn,
.ct-actions .qplay-button {
    height: auto;
    padding: 4px 12px;
    font-size: 0.78rem;
}

/* ===== Analytics: cards de "Últimas lives" (thumb + métricas) ===== */
.live-report-grid {
    display: grid;
    /* min(100%, 300px) evita o card estourar a largura em telas estreitas (vazamento). */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 14px;
}
.live-report-card {
    display: flex;
    gap: 12px;
    background: var(--qplay-surface);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px;
    text-decoration: none;
    color: var(--qplay-text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.live-report-card:hover { border-color: var(--qplay-primary); transform: translateY(-2px); color: var(--qplay-text); }
.lrc-thumb {
    width: 112px;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}
.lrc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lrc-thumb-fallback {
    display: flex; align-items: center; justify-content: center; height: 100%;
    background: var(--qplay-gradient, linear-gradient(135deg, #af4694, #e91e8c)); color: #fff;
}
.lrc-thumb-fallback [data-lucide] { width: 26px; height: 26px; }
.lrc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.lrc-title {
    font-weight: 600; font-size: 0.9rem; line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lrc-when { color: var(--qplay-muted); font-size: 0.75rem; margin: 2px 0 8px; }
.lrc-stats { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.lrc-stat { display: flex; flex-direction: column; min-width: 0; }
.lrc-num { font-weight: 800; font-size: 1rem; color: #fff; }
.lrc-lbl { color: var(--qplay-muted); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; }
html[data-theme="light"] .live-report-card { background: #fff; border-color: #e3e3e6; }
html[data-theme="light"] .lrc-num { color: #1d1d1f; }

/* ===== Admin Relatórios: célula do evento (thumb + título) e pills de estado ===== */
/* Thumb + título lado a lado, alinhados verticalmente. */
.report-event-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Reaproveita .lrc-thumb, mas reduz para caber numa linha de tabela (~68px). */
.report-thumb { width: 68px; }
/* Pill de estado do complemento usando tokens (não hardcodar cores). */
.report-state {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
/* Preenchido: verde suave (sucesso). */
.report-state-done { background: rgba(98, 217, 141, 0.16); color: #62d98d; }
/* Pendente: âmbar suave, tom de atenção. */
.report-state-pending { background: rgba(240, 180, 90, 0.16); color: #e0a94f; }
/* Ações compactas em linha com espaçamento consistente. */
.report-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Explorar: chips de gênero no topo ===== */
.explorar-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 20px;
}

/* Barra de filtros do Explorar: busca + ordenar + só gratuitos. */
.explorar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.explorar-controls .explorar-search { flex: 1 1 200px; }
.explorar-sort {
    height: 40px; padding: 0 12px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04); color: #fff;
    border: 1px solid var(--qplay-border, rgba(255, 255, 255, 0.12)); font-family: inherit;
}
.explorar-free {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--qplay-muted); font-size: 0.9rem; white-space: nowrap; cursor: pointer;
}
.explorar-free input { accent-color: var(--qplay-primary); width: 16px; height: 16px; cursor: pointer; }
html[data-theme="light"] .explorar-sort { background: #fff; color: #1d1d1f; border-color: #e3e3e6; }
.genre-chip {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.85rem;
    color: var(--qplay-muted);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}
.genre-chip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.genre-chip.active {
    background: var(--qplay-gradient, linear-gradient(135deg, #af4694, #e91e8c));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
html[data-theme="light"] .genre-chip { border-color: #d8d8dc; color: #6e6e73; }
html[data-theme="light"] .genre-chip:hover { color: #1d1d1f; }

/* Classificar gêneros (admin) */
.classify-list { display: flex; flex-direction: column; gap: 12px; }
.classify-row {
    display: flex;
    gap: 14px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}
.classify-thumb {
    flex: 0 0 auto;
    width: 120px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.classify-thumb img { width: 100%; height: 100%; object-fit: cover; }
.classify-thumb-fallback { font-size: .72rem; color: var(--qplay-muted); }
.classify-body { flex: 1 1 auto; min-width: 0; }
.classify-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.classify-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.genre-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: .82rem;
    color: var(--qplay-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.genre-check:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.genre-check:has(input:checked) {
    background: var(--qplay-gradient, linear-gradient(135deg, #af4694, #e91e8c));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.classify-note { font-size: .78rem; margin: 8px 0 0; }
.classify-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    bottom: 0;
    margin-top: 16px;
    padding: 12px 0 4px;
    background: linear-gradient(to top, var(--qplay-bg, #0b0b0f) 60%, transparent);
}
html[data-theme="light"] .classify-row { border-color: #e5e5ea; background: #fafafa; }
html[data-theme="light"] .genre-check { border-color: #d8d8dc; color: #6e6e73; }
html[data-theme="light"] .genre-check:hover { color: #1d1d1f; }

/* =====================================================================
   Saúde das integrações (/Admin/Integracoes/Saude) — semáforo tokenizado.
   Cores derivadas dos tokens do tema; funcionam em dark e light.
   ===================================================================== */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.health-card {
  border: 1px solid var(--qplay-border);
  border-radius: 12px;
  background: var(--qplay-surface-2);
  padding: 14px 16px;
}
.health-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.health-card-name {
  font-weight: 600;
  color: var(--qplay-text);
}
.health-card-detail {
  font-size: .85rem;
  color: var(--qplay-muted);
}
.health-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.health-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.health-pill [data-lucide] {
  width: 14px;
  height: 14px;
}
.health-pill.health-ok {
  color: var(--qplay-success);
  background: color-mix(in srgb, var(--qplay-success) 15%, transparent);
  border-color: color-mix(in srgb, var(--qplay-success) 40%, transparent);
}
.health-pill.health-warning {
  color: #e0a83e;
  background: color-mix(in srgb, #e0a83e 15%, transparent);
  border-color: color-mix(in srgb, #e0a83e 40%, transparent);
}
.health-pill.health-down {
  color: var(--qplay-danger);
  background: color-mix(in srgb, var(--qplay-danger) 15%, transparent);
  border-color: color-mix(in srgb, var(--qplay-danger) 40%, transparent);
}
.health-pill.health-none {
  color: var(--qplay-muted);
  background: color-mix(in srgb, var(--qplay-muted) 14%, transparent);
  border-color: var(--qplay-border);
}

/* ===== Relatório de presença (Lives/Relatorio) ===== */
.presenca-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.presenca-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.presenca-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.presenca-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.presenca-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.presenca-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--qplay-gradient);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.presenca-user-id {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.presenca-name {
  font-weight: 600;
}
.presenca-sessions {
  margin-left: 6px;
  font-size: 0.7rem;
}
.presenca-handle {
  color: var(--qplay-muted);
  font-size: 0.82rem;
}
.presenca-time {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 96px;
}
.presenca-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--qplay-muted) 22%, transparent);
  overflow: hidden;
}
.presenca-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--qplay-gradient);
}
.presenca-left-early {
  color: var(--qplay-danger);
  border-color: color-mix(in srgb, var(--qplay-danger) 40%, transparent);
  background: color-mix(in srgb, var(--qplay-danger) 12%, transparent);
}
.presenca-stayed {
  color: #35c07a;
  border-color: color-mix(in srgb, #35c07a 40%, transparent);
  background: color-mix(in srgb, #35c07a 12%, transparent);
}
/* % assistido colorido: vermelho (0%) → verde (100%), cor do fundo vem inline por linha */
.presenca-pct {
  display: inline-block;
  min-width: 46px;
  text-align: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

/* ===== Central de Ajuda (/ajuda) ===== */
.ajuda-page { padding-bottom: 64px; }
.ajuda-tutoriais, .ajuda-faq { display: grid; gap: 12px; }
.ajuda-card {
  background: var(--qplay-surface);
  border: 1px solid var(--qplay-border);
  border-radius: 12px;
  overflow: hidden;
}
.ajuda-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
}
.ajuda-card > summary::-webkit-details-marker { display: none; }
.ajuda-ic {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--qplay-gradient);
  color: #fff;
}
.ajuda-ic [data-lucide] { width: 20px; height: 20px; }
.ajuda-head { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ajuda-head strong { font-weight: 600; }
.ajuda-sub { color: var(--qplay-muted); font-size: .9rem; }
.ajuda-chevron { flex: 0 0 auto; color: var(--qplay-muted); transition: transform .18s ease; width: 18px; height: 18px; }
.ajuda-card[open] > summary .ajuda-chevron { transform: rotate(180deg); }
.ajuda-steps { margin: 0; padding: 2px 20px 18px 58px; display: grid; gap: 8px; }
.ajuda-steps li { white-space: pre-line; }

/* Banner "complete seu cadastro" (abaixo da navbar, quando o perfil está incompleto). */
.profile-banner { background: linear-gradient(90deg, rgba(175, 70, 148, 0.18), rgba(175, 70, 148, 0.05)); border-bottom: 1px solid var(--qplay-border); }
.profile-banner-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.profile-banner-ic { width: 20px; height: 20px; color: var(--qplay-primary); flex: 0 0 auto; }
.profile-banner-text { display: flex; flex-direction: column; min-width: 0; }
.profile-banner-text strong { color: var(--qplay-text, #fff); font-size: 0.9rem; }
.profile-banner-text span { color: var(--qplay-muted); font-size: 0.82rem; }
.profile-banner-cta { margin-left: auto; height: 34px; white-space: nowrap; flex: 0 0 auto; }
.profile-banner-close { background: transparent; border: 0; color: var(--qplay-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px; flex: 0 0 auto; }
.profile-banner-close:hover { color: var(--qplay-text, #fff); }
@media (max-width: 560px) {
  .profile-banner-inner { flex-wrap: wrap; }
  .profile-banner-cta { margin-left: 0; }
}

/* Tour guiado de primeiro acesso (coach-marks): overlay + spotlight no elemento + balão. */
.tour-overlay { position: fixed; inset: 0; z-index: 4000; }
.tour-highlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62), 0 0 0 2px var(--qplay-primary);
  transition: top 180ms ease, left 180ms ease, width 180ms ease, height 180ms ease;
  pointer-events: none;
}
.tour-balloon {
  position: fixed;
  width: min(330px, calc(100vw - 24px));
  background: var(--qplay-surface, #1c0f1a);
  border: 1px solid var(--qplay-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.tour-balloon.tour-centered { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-step { color: var(--qplay-muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; }
.tour-title { color: var(--qplay-text, #fff); font-size: 1.05rem; font-weight: 800; margin: 6px 0 4px; }
.tour-text { color: var(--qplay-muted); font-size: 0.9rem; line-height: 1.5; margin: 0 0 14px; }
.tour-nav { display: flex; align-items: center; gap: 8px; }
.tour-nav .tour-skip { margin-right: auto; background: transparent; border: 0; color: var(--qplay-muted); cursor: pointer; font-size: 0.85rem; }
.tour-nav .tour-skip:hover { color: var(--qplay-text, #fff); }
.tour-nav .qplay-button, .tour-nav .qplay-button-outline { height: 34px; }

/* Wizard passo a passo (JS): um passo por vez + progresso + navegação. */
.ajuda-steps.wiz-list { display: block; list-style: none; padding: 2px 20px 6px 58px; }
.ajuda-steps.wiz-list li { display: none; min-height: 3.2em; }
.ajuda-steps.wiz-list li.is-active { display: block; }
.wiz-progress { display: flex; align-items: center; gap: 10px; padding: 8px 20px 0 58px; }
.wiz-count { color: var(--qplay-muted); font-size: 0.78rem; white-space: nowrap; }
.wiz-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.wiz-bar > span { display: block; height: 100%; width: 0; background: var(--qplay-primary); border-radius: 999px; transition: width 220ms ease; }
.wiz-nav { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 20px 18px 58px; }
.wiz-nav .qplay-button, .wiz-nav .qplay-button-outline { height: 34px; }
.wiz-prev:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 560px) {
  .ajuda-steps.wiz-list, .wiz-progress, .wiz-nav { padding-left: 20px; }
}
.ajuda-answer { padding: 0 18px 18px; color: var(--qplay-muted); white-space: pre-line; }
.ajuda-cat { margin: 20px 0 8px; font-size: 1rem; color: var(--qplay-muted); }
.ajuda-faq-title { margin-top: 34px; }

/* ============================================================
   QR da live (modal "Aponte a câmera para entrar")
   ============================================================ */
.qr-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.qr-modal[hidden] { display: none; }
.qr-modal-box {
    position: relative;
    background: var(--qplay-surface, #1c0f1a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.qr-modal-box h2 { margin: 0 0 16px; font-size: 1.1rem; color: #fff; }
.qr-modal-code {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    width: min(300px, 72vw);
    margin: 0 auto;
}
.qr-modal-code svg { display: block; width: 100%; height: auto; }
.qr-modal-title { margin: 16px 0 2px; font-weight: 600; color: #fff; }
.qr-modal-url { margin: 0; font-size: 0.8rem; color: var(--qplay-muted, #9b8a95); word-break: break-all; }
.qr-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 0;
    color: var(--qplay-muted, #9b8a95);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
}
.qr-modal-close:hover { color: #fff; }

/* ============================================================
   Ofertas/Dízimos (PIX) — /ofertar
   ============================================================ */
.pix-card {
    background: var(--qplay-surface, #1c0f1a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
}
.pix-hint { margin: 0 0 14px; color: var(--qplay-muted, #9b8a95); font-size: 0.9rem; }
.pix-qr {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    width: min(280px, 74vw);
    margin: 0 auto 14px;
}
.pix-qr svg { display: block; width: 100%; height: auto; }
.pix-beneficiary { margin: 0 0 16px; color: #fff; font-size: 0.95rem; }
.pix-copy-label { display: block; text-align: left; font-size: 0.8rem; color: var(--qplay-muted, #9b8a95); margin-bottom: 6px; }
.pix-copy-row { display: flex; gap: 8px; }
.pix-copy-input {
    flex: 1;
    min-width: 0;
    background: var(--qplay-surface-2, #0f0710);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    color: #fff;
    font-size: 0.82rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pix-copy-row .qplay-button { white-space: nowrap; flex-shrink: 0; }
.pix-note { margin: 14px 0 0; font-size: 0.78rem; }
html[data-theme="light"] .pix-copy-input { background: #f2f2f4; color: #1a1a1a; border-color: #e3e3e6; }

/* Contagem regressiva de live/reunião agendada */
.live-countdown {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 4px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(233, 30, 140, 0.12);
    border: 1px solid rgba(233, 30, 140, 0.35);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}
.live-countdown i, .live-countdown [data-lucide] { width: 20px; height: 20px; color: var(--qplay-primary); }
.live-countdown-label { opacity: 0.85; }
.live-countdown-time {
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
}
.live-countdown.is-live-soon { background: rgba(70, 233, 154, 0.14); border-color: rgba(70, 233, 154, 0.4); }
.live-countdown.is-live-soon .live-countdown-time { color: #46e99a; }

/* Mini contagem regressiva nos cards da home */
.mini-countdown {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.4px;
    color: var(--qplay-primary);
}
.hero-m-countdown { margin-top: 6px; }

/* Formulários de resposta da live (Aceitar Jesus / Testemunho / Pedido de oração) */
.resp-box { text-align: left; }
.resp-box h2 { text-align: center; }
.resp-form label { display: block; font-size: 0.82rem; color: var(--qplay-muted, #9b8a95); margin: 10px 0 4px; }
.resp-form input[type="text"], .resp-form textarea {
    width: 100%;
    background: var(--qplay-surface-2, #0f0710);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    color: #fff;
    font: inherit;
}
.resp-form textarea { resize: vertical; }
.resp-anon { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 0.9rem; margin-bottom: 4px; }
.resp-anon input { width: auto; }
html[data-theme="light"] .resp-form input[type="text"], html[data-theme="light"] .resp-form textarea { background: #f2f2f4; color: #1a1a1a; border-color: #e3e3e6; }

/* ============================================================
   Toasts (snackbar) + microinterações
   ============================================================ */
.q-toasts {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}
.q-toast {
    background: var(--qplay-surface, #1c0f1a);
    color: #fff;
    border: 1px solid rgba(233, 30, 140, 0.35);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    max-width: min(92vw, 420px);
    text-align: center;
}
.q-toast.is-in { opacity: 1; transform: translateY(0); }
html[data-theme="light"] .q-toast { background: #fff; color: #1a1a1a; border-color: #f0c6df; }

/* "Burst" do coração/bookmark ao favoritar */
@keyframes q-burst { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
.is-bursting { animation: q-burst 0.4s ease; }

/* Estrela de avaliação: leve "pop" ao preencher */
.star-btn { transition: transform 0.12s ease, color 0.12s ease; }
.star-btn.on { animation: q-burst 0.32s ease; }

/* Lift sutil no hover do card de catálogo */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .media-card { transition: transform 0.16s ease, box-shadow 0.16s ease; }
    .media-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
    .is-bursting, .star-btn.on { animation: none; }
    .q-toast { transition: opacity 0.2s ease; transform: none; }
}

/* ============================================================
   Barra de progresso de navegação + skeleton (shimmer) das thumbs
   ============================================================ */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--qplay-gradient, linear-gradient(90deg, #c44292, #700f4b));
    z-index: 2000;
    opacity: 0;
    transition: width 1.8s cubic-bezier(0.1, 0.6, 0.2, 1), opacity 0.3s ease;
}
.nav-progress.is-active { opacity: 1; }

/* Shimmer atrás da thumbnail enquanto a imagem (lazy) não carregou. */
@keyframes q-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.media-art:has(img.media-thumb:not(.is-loaded)) {
    background-image: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 70%);
    background-size: 200% 100%;
    animation: q-shimmer 1.4s linear infinite;
}
img.media-thumb { opacity: 0; transition: opacity 0.35s ease; }
img.media-thumb.is-loaded { opacity: 1; }

/* Mesmo tratamento para as lives do hero (.live-mini) e o histórico (.history-thumb). */
.live-mini:has(> img:not(.is-loaded)),
.history-thumb:has(img:not(.is-loaded)) {
    background-image: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 70%);
    background-size: 200% 100%;
    animation: q-shimmer 1.4s linear infinite;
}
.live-mini > img,
.history-thumb img { opacity: 0; transition: opacity 0.35s ease; }
.live-mini > img.is-loaded,
.history-thumb img.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .media-art:has(img.media-thumb:not(.is-loaded)) { animation: none; }
    .live-mini:has(> img:not(.is-loaded)),
    .history-thumb:has(img:not(.is-loaded)) { animation: none; }
    img.media-thumb,
    .live-mini > img,
    .history-thumb img { transition: none; opacity: 1; }
    .nav-progress { transition: opacity 0.2s ease; }
}

/* ============================================================
   Polimento visual: Hero Ken Burns + títulos de trilho editoriais
   ============================================================ */
@keyframes q-kenburns { from { transform: scale(1.03); } to { transform: scale(1.11); } }
@media (prefers-reduced-motion: no-preference) {
    .hero-main.is-carousel .hero-slide.active img,
    .hero-main:not(.is-carousel) > img {
        animation: q-kenburns 8s ease-out both;
        will-change: transform;
    }
}

/* Títulos de trilho da home um pouco maiores/presentes — sensação editorial.
   Escopado a .rail-title (não afeta .section-title do admin nem os <h1>). */
.section-title.rail-title {
    font-size: clamp(1.35rem, 2.4vw, 1.6rem);
    letter-spacing: -0.025em;
}

/* ============================================================
   Anel de progresso do curso + ✓ nas aulas concluídas
   ============================================================ */
.course-progress-ring { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; }
.course-progress-ring svg { flex: none; transform: rotate(-90deg); }
.course-progress-ring .ring-track { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 4; }
.course-progress-ring .ring-fill { fill: none; stroke: var(--qplay-primary); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.course-progress-text strong { display: block; font-size: 1.15rem; color: var(--qplay-text, #fff); line-height: 1.1; }
.course-progress-text span { font-size: 0.8rem; color: var(--qplay-muted, #9b8a95); }
html[data-theme="light"] .course-progress-ring .ring-track { stroke: rgba(0,0,0,0.1); }

.lesson-card-done { display: inline-flex; align-items: center; gap: 4px; color: #46e99a; font-size: 0.72rem; font-weight: 600; }
.lesson-card-done [data-lucide] { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .course-progress-ring .ring-fill { transition: none; } }

/* =====================================================================
   Barra de navegação inferior (mobile) — estilo app/PWA.
   Só aparece < 992px (mesma faixa do menu hamburguer, navbar-expand-lg).
   ===================================================================== */
.mobile-tabbar { display: none; }

@media (max-width: 991.98px) {
  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    background: color-mix(in srgb, var(--qplay-surface) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
    /* Respeita a barra de gestos do iOS. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 7px;
    color: var(--qplay-muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 140ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-tab [data-lucide] {
    width: 22px;
    height: 22px;
    stroke-width: 2;
  }

  .mobile-tab.active,
  .mobile-tab:active {
    color: var(--qplay-primary);
  }

  /* Indicador de aba ativa: barrinha rosa no topo do item. */
  .mobile-tab.active {
    position: relative;
  }
  .mobile-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--qplay-primary);
    transform: translateX(-50%);
  }

  /* Espaço para o conteúdo não ficar escondido atrás da barra. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }

  /* Alguns rodapés/CTAs fixos precisam subir acima da barra. */
  .cpf-pending-banner { bottom: calc(58px + env(safe-area-inset-bottom, 0)); }

  /* App-like: a barra inferior é a navegação do mobile, então o menu
     hambúrguer (e a busca dele) somem — evita dois menus. Vídeos/Cursos
     seguem pelo Explorar; conta/tema/notificações pelo topo direito. */
  .qplay-nav .navbar-toggler { display: none; }
  .qplay-nav .navbar-collapse { display: none !important; }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
  .mobile-tab { transition: color 140ms ease, transform 140ms ease; }
  .mobile-tab:active { transform: translateY(1px); }
}

/* =====================================================================
   Player "grudento" (picture-in-picture na página) — setupStickyPlayer.
   Ao rolar além do vídeo, o player ancora num canto e continua tocando.
   ===================================================================== */
/* Card "Entrar na reunião" (sala externa Zoom/Meet): fundo escuro liso por padrão; com .has-art
   recebe o banner da reunião como background (o degradê escuro vem inline junto da url). */
.qplay-meeting-cta {
  background-color: #0d0d14;
  border-radius: 12px;
  padding: 24px;
  gap: 14px;
  background-size: cover;
  background-position: center;
  color: var(--qplay-muted);
}
.qplay-meeting-cta.has-art { color: rgba(255, 255, 255, 0.92); }
.qplay-meeting-cta.has-art p { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }

.qplay-player-sentinel { height: 0; scroll-margin-top: 84px; }
.qplay-dock-controls { display: none; }

.qplay-player-shell.is-docked {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(380px, 46vw);
  z-index: 1050;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: qDockIn 220ms var(--ease-apple, ease);
}

@keyframes qDockIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.qplay-player-shell.is-docked .qplay-dock-controls {
  display: flex;
  gap: 6px;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}

.qplay-dock-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: rgba(9, 4, 9, 0.7);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 140ms ease;
}
.qplay-dock-btn:hover { background: rgba(9, 4, 9, 0.95); }
.qplay-dock-btn [data-lucide] { width: 16px; height: 16px; }

/* No mobile a barra inferior ocupa o rodapé: o player sobe acima dela. */
@media (max-width: 991.98px) {
  .qplay-player-shell.is-docked {
    width: min(280px, 62vw);
    right: 10px;
    bottom: calc(66px + env(safe-area-inset-bottom, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .qplay-player-shell.is-docked { animation: none; }
}

/* =====================================================================
   Mobile app-like: ícone de busca no topo + painel "Mais" (bottom sheet).
   ===================================================================== */
.qplay-mobile-search { display: none; }

@media (max-width: 991.98px) {
  /* Busca vira ícone no topo (a barra inferior não tem mais aba de busca). */
  .qplay-mobile-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
  }
  .qplay-mobile-search [data-lucide] { width: 20px; height: 20px; }
}

/* Aba "Mais" é um <button>: herda o visual de .mobile-tab (o tamanho de fonte
   vem da classe .mobile-tab; aqui só zeramos o chrome do botão). */
.mobile-tab[data-more-toggle] { background: none; border: 0; cursor: pointer; color: inherit; font-family: inherit; }

.mobile-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1055;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 220ms ease;
}
.mobile-more-backdrop.is-open { opacity: 1; }

.mobile-more-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1060;
  max-height: 78vh;
  overflow-y: auto;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0));
  background: var(--qplay-surface);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-more-sheet.is-open { transform: translateY(0); }

.mobile-more-grip {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  margin: 6px auto 12px;
}

.mobile-more-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-more-head .qplay-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  font-size: 1rem;
}
.mobile-more-head > div { display: flex; flex-direction: column; line-height: 1.25; }
.mobile-more-head strong { font-size: 1rem; }
.mobile-more-head a { color: var(--qplay-primary); font-size: 0.82rem; text-decoration: none; }
.mobile-more-close {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.mobile-more-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px 0 4px;
}
.mobile-more-links a,
.mobile-more-links button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: var(--qplay-surface-2);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.mobile-more-links a:active,
.mobile-more-links button:active { transform: translateY(1px); }
.mobile-more-links [data-lucide] { width: 20px; height: 20px; color: var(--qplay-primary); flex: 0 0 auto; }

.mobile-more-logout { margin-top: 12px; }
.mobile-more-logout button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border: 1px solid rgba(233, 30, 99, 0.35);
  border-radius: 14px;
  background: transparent;
  color: #ff6b9a;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.mobile-more-logout [data-lucide] { width: 18px; height: 18px; }

/* Toque app-like na aba ativa: ícone sobe levemente. */
.mobile-tab.active [data-lucide] { transform: translateY(-1px); }

/* =====================================================================
   Ações rápidas na home (só mobile): atalhos redondos estilo app.
   ===================================================================== */
.quick-actions { display: none; }

@media (max-width: 991.98px) {
  .quick-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    margin: 4px 0 18px;
  }

  .quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 4px 2px;
    color: var(--qplay-muted);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
    -webkit-tap-highlight-color: transparent;
  }

  .quick-action-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: var(--qplay-surface-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--qplay-primary);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
    transition: transform 140ms ease, background-color 140ms ease;
  }
  .quick-action-icon [data-lucide] { width: 24px; height: 24px; }

  .quick-action:active .quick-action-icon { transform: translateY(1px) scale(0.96); }
}

/* Índice de coleções (/colecoes): tiles com gradiente da marca. */
.colecoes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.colecao-tile {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
  padding: 16px;
  border-radius: var(--qplay-radius-card, 14px);
  background: var(--qplay-gradient);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
  transition: transform 200ms var(--ease-apple, ease), box-shadow 200ms ease;
}
.colecao-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px -14px rgba(175, 70, 148, 0.6);
}

/* =====================================================================
   Header mobile minimalista: só o logo centralizado, e some ao rolar
   para baixo (reaparece ao subir). Tudo o mais está na barra inferior,
   nos botões de ação rápida e no painel "Mais".
   ===================================================================== */
@media (max-width: 991.98px) {
  .qplay-header { transition: transform 280ms ease; will-change: transform; }
  .qplay-header.nav-hidden { transform: translateY(-100%); }

  /* Topo mobile estilo HBO Max: LOGO à esquerda; SINO + AVATAR pequenos à direita.
     O hambúrguer já está oculto (a navegação é o bottom nav + o dropdown do avatar);
     a busca fica na home (atalhos) e no painel "Mais", o tema no dropdown/"Mais". */
  .qplay-header .qplay-brand { margin-inline: 0; margin-right: auto; }
  .qplay-header .qplay-nav-actions { display: flex; gap: 8px; margin-left: auto; }
  .qplay-header .qplay-nav-actions .qplay-mobile-search,
  .qplay-header .qplay-nav-actions .qplay-theme-toggle,
  .qplay-header .qplay-nav-actions .qplay-messages-link { display: none; }

  /* Sino + avatar compactos. */
  .qplay-header .qplay-notification-link { width: 34px; height: 34px; }
  .qplay-header .qplay-notification-link [data-lucide] { width: 19px; height: 19px; }
  .qplay-header .qplay-avatar-button { height: 34px; padding: 2px 6px 2px 2px; gap: 2px; }
  .qplay-header .qplay-avatar { width: 28px; height: 28px; }
  .qplay-header .qplay-avatar-button > [data-lucide] { width: 14px; height: 14px; }
}

/* Saudação da home (só mobile, quando logado). */
.mobile-greeting { display: none; }
@media (max-width: 991.98px) {
  .mobile-greeting {
    display: block;
    margin: 4px 0 14px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--qplay-muted);
  }
  .mobile-greeting strong { color: var(--qplay-text, #fff); font-weight: 800; }
}

/* =====================================================================
   Banner grande da live prioritária (no ar ou começando em ≤30min).
   Toma o lugar do carrossel "Em destaque" no topo da home — mobile e desktop —
   pra facilitar a entrada. Substitui o antigo .live-now-banner (só mobile).
   ===================================================================== */
.live-hero {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 420px);
  overflow: hidden;
  border-radius: 16px;
  background: var(--qplay-surface);
  margin: 0 0 clamp(20px, 3vw, 28px);
  color: inherit;
  text-decoration: none;
}
.live-hero.is-live {
  box-shadow: 0 0 0 1px rgba(233, 30, 99, 0.55), 0 18px 48px rgba(233, 30, 99, 0.16);
}
.live-hero.locked { cursor: default; }

.live-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.live-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(9, 4, 9, 0.94) 0%, rgba(9, 4, 9, 0.55) 42%, transparent 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(9, 4, 9, 0.6) 40%, transparent 78%);
}

.live-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(10px, 1.4vw, 16px);
  max-width: 46rem;
  padding: clamp(20px, 3vw, 40px);
}
.live-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.live-hero.is-live .live-hero-badge {
  background: rgba(233, 30, 99, 0.22);
  border: 1px solid rgba(233, 30, 99, 0.5);
  color: #ff6b8f;
}
.live-hero.is-soon .live-hero-badge {
  background: rgba(245, 179, 66, 0.16);
  border: 1px solid rgba(245, 179, 66, 0.45);
  color: #ffcf87;
}
.live-hero-badge [data-lucide] { width: 15px; height: 15px; }
.live-hero-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff3b6b;
  box-shadow: 0 0 0 0 rgba(255, 59, 107, 0.6);
  animation: liveHeroPulse 1.6s ease-out infinite;
}
@keyframes liveHeroPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 107, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(255, 59, 107, 0); }
}
.live-hero-content h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-hero-cta { margin-top: 4px; width: fit-content; }
.live-hero-cta.locked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--qplay-muted);
  font-weight: 700;
}

@media (max-width: 991.98px) {
  /* No mobile: arte GRANDE em cima (16:9) e o conteúdo (selo/título/botão) FORA da arte, num painel
     abaixo — mais destaque e leitura do que o texto sobreposto. */
  .live-hero {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .live-hero-bg {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .live-hero::after { content: none; } /* sem véu — a arte fica limpa e o texto vai pra baixo */
  .live-hero-content {
    position: static;
    inset: auto;
    max-width: none;
    gap: 10px;
    padding: 14px 16px 18px;
    background: var(--qplay-surface);
  }
  .live-hero-content h1 { font-size: 1.4rem; -webkit-line-clamp: 3; }
  .live-hero-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .live-hero-dot { animation: none; } }

/* =====================================================================
   Preview como bottom-sheet no mobile (desliza de baixo). Reaproveita o
   mesmo modal do desktop; só muda a ancoragem/forma via CSS.
   ===================================================================== */
@media (max-width: 991.98px) {
  .preview-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .preview-modal {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: previewSheetUp 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes previewSheetUp {
    from { transform: translateY(100%); }
    to { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .preview-modal { animation: none; }
  }
}

/* =====================================================================
   Página do vídeo (assistir) no mobile: barra de ações em linha única
   rolável (app-like) e toques mais confortáveis.
   ===================================================================== */
@media (max-width: 991.98px) {
  /* Ações (Favoritar/Salvar/curtir/descurtir) numa linha só que rola no eixo X. */
  .watch-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    margin-inline: -2px;
    padding-inline: 2px;
  }
  .watch-actions::-webkit-scrollbar { display: none; }
  .watch-actions > form,
  .watch-actions > form > button,
  .watch-actions > span { flex: 0 0 auto; white-space: nowrap; }

  /* Botões de ação com altura confortável ao toque. */
  .watch-body .qplay-button-outline { min-height: 44px; }

  /* Estrelas de avaliação maiores no toque. */
  .watch-body .star-btn { font-size: 1.9rem; padding: 2px 4px; }
}

/* =====================================================================
   Home mobile: hero mais compacto (menos rolagem até os trilhos). A ordem
   saudação → botões → hero vem do markup (esses dois são mobile-only).
   ===================================================================== */
@media (max-width: 991.98px) {
  .hero-main { height: clamp(190px, 44vw, 280px); }
  .hero-content h1 { font-size: clamp(1.35rem, 6vw, 1.9rem); }
  .hero-content .eyebrow { font-size: 0.66rem; }
  .hero-split { margin-bottom: 20px; }
}

/* =====================================================================
   Refinamentos de toque mobile — curso/aula e sala de live já são
   responsivos (empilham); aqui só melhoramos conforto de toque e altura.
   ===================================================================== */
@media (max-width: 991.98px) {
  /* Aulas: alvo de toque confortável e busca em largura cheia. */
  .lesson-card { min-height: 60px; align-items: center; }
  .lesson-search { max-width: none !important; width: 100%; }

  /* Sala de live: chat usa a altura DINÂMICA do viewport (dvh evita ser
     cortado pela barra do navegador mobile) e deixa folga para a barra inferior. */
  .live-side .live-chat-card { height: min(62dvh, calc(100dvh - 235px)); }
}

/* App-like: no mobile o rodapé completo do site some (a navegação é a barra
   inferior). Reduz o padding extra do body, já que não há footer. */
@media (max-width: 991.98px) {
  .qplay-footer { display: none; }
}

/* =====================================================================
   Sensação de app no mobile: toques nativos + banner "instalar na tela inicial".
   ===================================================================== */
@media (max-width: 991.98px) {
  /* Sem o flash cinza ao tocar e sem seleção acidental de texto na navegação. */
  body { -webkit-tap-highlight-color: transparent; }
  .mobile-tabbar, .qplay-header, .quick-actions, .mobile-more-sheet, .live-now-banner {
    -webkit-user-select: none;
    user-select: none;
  }
  /* Rolagem contida (menos "puxão" de recarregar a página). */
  html, body { overscroll-behavior-y: contain; }
}

/* Banner de instalação (PWA) — mobile, acima da barra inferior. */
.pwa-install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(66px + env(safe-area-inset-bottom, 0));
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--qplay-surface) 96%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  animation: pwaBannerUp 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pwaBannerUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.pwa-install-icon { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.pwa-install-copy { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pwa-install-copy strong { font-size: 0.92rem; }
.pwa-install-copy span { font-size: 0.76rem; color: var(--qplay-muted); }
.pwa-install-go {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--qplay-gradient);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.pwa-install-go [data-lucide] { width: 16px; height: 16px; }
.pwa-install-x {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--qplay-muted);
  cursor: pointer;
}
.pwa-install-x [data-lucide] { width: 16px; height: 16px; }
/* Só faz sentido no mobile; no desktop (se o evento disparar) fica escondido. */
@media (min-width: 992px) { .pwa-install-banner { display: none; } }

/* ===== Perfil público + microblog (/u/{username}) e busca de pessoas (/pessoas) ===== */
.uprofile-page { max-width: 720px; margin: 0 auto; }
.uprofile-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--qplay-border);
  border-radius: 18px;
  background: var(--qplay-surface);
  margin-bottom: 20px;
}
.uprofile-avatar {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
}
.uprofile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.uprofile-avatar-fallback { font-size: 2rem; font-weight: 700; color: var(--qplay-text); }
.uprofile-head-main { flex: 1; min-width: 0; }
.uprofile-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.uprofile-handle { display: block; color: var(--qplay-muted); font-size: 0.95rem; margin-top: 2px; }
.uprofile-bio { margin: 10px 0 0; color: var(--qplay-text); white-space: pre-wrap; word-break: break-word; }
.uprofile-socials { display: flex; gap: 10px; margin-top: 10px; }
.uprofile-socials a { color: var(--qplay-muted); }
.uprofile-socials a:hover { color: var(--qplay-primary); }
.uprofile-socials [data-lucide] { width: 20px; height: 20px; }
.uprofile-stats { display: flex; gap: 18px; margin-top: 12px; color: var(--qplay-muted); font-size: 0.9rem; }
.uprofile-stat { display: inline-flex; align-items: center; gap: 6px; }
.uprofile-stat strong { color: var(--qplay-text); }
.uprofile-stat [data-lucide] { width: 15px; height: 15px; }
.uprofile-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.uprofile-actions [data-lucide] { width: 15px; height: 15px; vertical-align: middle; }
.js-follow-btn.active { background: var(--qplay-primary); }

.uprofile-private {
  text-align: center;
  padding: 48px 20px;
  border: 1px solid var(--qplay-border);
  border-radius: 18px;
  background: var(--qplay-surface);
  color: var(--qplay-muted);
}
.uprofile-private [data-lucide] { width: 40px; height: 40px; color: var(--qplay-muted); }
.uprofile-private h2 { margin: 14px 0 6px; color: var(--qplay-text); font-size: 1.2rem; }

.uprofile-card {
  border: 1px solid var(--qplay-border);
  border-radius: 18px;
  background: var(--qplay-surface);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.uprofile-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.uprofile-card-head h2 { font-size: 1.05rem; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.uprofile-card-head h2 [data-lucide] { width: 18px; height: 18px; }
.uprofile-badge-count { color: var(--qplay-muted); font-size: 0.85rem; }
.uprofile-see-all { margin-left: auto; color: var(--qplay-primary); font-size: 0.85rem; }
.uprofile-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.uprofile-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(175, 70, 148, 0.16);
  border: 1px solid rgba(175, 70, 148, 0.35);
  color: var(--qplay-text);
  font-size: 0.82rem;
  font-weight: 600;
}
.uprofile-badge-chip [data-lucide] { width: 14px; height: 14px; color: var(--qplay-primary); }

.upost-compose textarea { resize: vertical; }
.upost-compose-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.upost-counter { margin-right: auto; color: var(--qplay-muted); font-size: 0.8rem; }
.upost-compose-foot [data-lucide] { width: 15px; height: 15px; vertical-align: middle; }

.upost-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.upost { display: flex; gap: 12px; }
.upost-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  font-weight: 600;
}
.upost-avatar img { width: 100%; height: 100%; object-fit: cover; }
.upost-body { flex: 1; min-width: 0; }
.upost-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; }
.upost-author { font-weight: 600; color: var(--qplay-text); }
.upost-handle { color: var(--qplay-muted); }
.upost-time { color: var(--qplay-muted); font-size: 0.75rem; }
.upost-text { margin: 4px 0 8px; color: var(--qplay-text); white-space: pre-wrap; word-break: break-word; }
.upost-text a { color: var(--qplay-primary); }

/* Menções (@usuario) e hashtags (#tag) — usadas no servidor (ChatLinkifier) e no cliente
   (linkifyMentionsHashtags): posts, respostas, comentários e chat da live. Discretas: cor de
   destaque, sem sublinhado; sublinha só no hover. */
.mention, .hashtag { color: var(--qplay-primary); text-decoration: none; font-weight: 600; }
.mention:hover, .hashtag:hover { text-decoration: underline; }

/* Timestamp clicavel em comentario de video (MM:SS -> pula o player). */
.ts-seek { color: var(--qplay-primary); text-decoration: none; font-weight: 600; cursor: pointer; }
.ts-seek:hover { text-decoration: underline; }

/* Botao discreto "Marcar o minuto" na caixa de comentar da pagina de video. */
.ts-mark-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid rgba(255, 255, 255, .18);
  color: var(--qplay-muted); border-radius: 999px;
  padding: 5px 12px; font-size: .8125rem; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.ts-mark-btn:hover { color: var(--qplay-primary); border-color: var(--qplay-primary); }
.ts-mark-btn[hidden] { display: none; }
.upost-actions { display: flex; align-items: center; gap: 16px; }
.upost-actions form { margin: 0; display: inline; }
.upost-action {
  background: none;
  border: 0;
  padding: 0;
  color: var(--qplay-muted);
  cursor: pointer;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.upost-action [data-lucide] { width: 15px; height: 15px; }
.upost-action.active { color: var(--qplay-primary); }
.upost-action.active [data-lucide] { fill: currentColor; }
.upost-action-danger:hover { color: #e2557b; }
.upost-replies { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 14px; }
.upost-reply { padding-left: 6px; }
.upost-reply .upost-avatar { width: 32px; height: 32px; }
.uprofile-empty { color: var(--qplay-muted); text-align: center; padding: 12px 0; }

/* Busca de pessoas */
.psearch-page { max-width: 640px; margin: 0 auto; }
.psearch-box { position: relative; margin-bottom: 16px; }
.psearch-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--qplay-muted); }
.psearch-icon [data-lucide] { width: 18px; height: 18px; }
.psearch-input { width: 100%; padding-left: 42px; }
.psearch-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.psearch-item { border: 1px solid var(--qplay-border); border-radius: 14px; background: var(--qplay-surface); display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.psearch-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--qplay-text); }
.psearch-link:hover { background: rgba(255, 255, 255, 0.04); }
.psearch-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); }
.psearch-avatar-fallback { font-weight: 700; color: var(--qplay-text); }
.psearch-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.psearch-name { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.psearch-handle { color: var(--qplay-muted); font-size: 0.85rem; }
.psearch-link [data-lucide] { width: 18px; height: 18px; color: var(--qplay-muted); }
/* Botão Seguir/Seguindo inline nos resultados de busca (Comunidade e /pessoas). */
.psearch-follow { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--qplay-primary); background: transparent; color: var(--qplay-primary); font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.psearch-follow:hover { background: rgba(175, 70, 148, 0.12); }
.psearch-follow.active { background: var(--qplay-primary); color: #fff; }
.psearch-follow[disabled] { opacity: 0.6; cursor: default; }
.psearch-follow [data-lucide] { width: 15px; height: 15px; }
.psearch-hint { color: var(--qplay-muted); text-align: center; padding: 16px 0; }

@media (max-width: 640px) {
  .uprofile-header { flex-direction: column; align-items: center; text-align: center; }
  .uprofile-stats, .uprofile-actions, .uprofile-socials { justify-content: center; }
}

/* -------------------------------------------------------------------------------------------- */
/* Mensagens diretas (DM) — caixa de entrada 1:1. Tema escuro/pink; bolhas estilo chat da live. */
/* -------------------------------------------------------------------------------------------- */
.dm-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  min-height: 60vh;
  height: min(72vh, 720px);
}
.dm-list-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--qplay-surface);
  border: 1px solid var(--qplay-border);
  border-radius: 16px;
  overflow: hidden;
}
.dm-list-head { padding: 14px 16px; border-bottom: 1px solid var(--qplay-border); }
.dm-list-head h2 { margin: 0; font-size: 1rem; }
.dm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; }
.dm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--qplay-muted); text-align: center; padding: 28px 16px; font-size: 0.9rem;
}
.dm-empty [data-lucide] { width: 30px; height: 30px; opacity: 0.6; }
.dm-conv {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 12px; background: transparent;
  color: var(--qplay-text); text-align: left; cursor: pointer;
}
.dm-conv:hover { background: rgba(255, 255, 255, 0.05); }
.dm-conv.is-active { background: rgba(175, 70, 148, 0.16); }
.dm-conv-avatar, .dm-peer-avatar {
  width: 42px; height: 42px; border-radius: 999px; object-fit: cover; flex-shrink: 0;
  display: block; overflow: hidden;
}
.dm-avatar-fallback {
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.95rem;
}
.dm-conv-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dm-conv-name { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-conv-time { color: var(--qplay-muted); font-size: 0.72rem; flex-shrink: 0; }
.dm-conv-preview {
  color: var(--qplay-muted); font-size: 0.82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-conv-unread {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--qplay-primary); color: #fff; font-size: 0.68rem; font-weight: 700;
  line-height: 18px; text-align: center;
}
.dm-conversation-col {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--qplay-surface); border: 1px solid var(--qplay-border);
  border-radius: 16px; overflow: hidden;
}
.dm-placeholder {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--qplay-muted); text-align: center; padding: 24px;
}
.dm-placeholder [data-lucide] { width: 40px; height: 40px; opacity: 0.5; }
.dm-placeholder h2 { margin: 0; font-size: 1.05rem; color: var(--qplay-text); }
.dm-conversation { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.dm-conversation-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--qplay-border);
}
.dm-back {
  display: none; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 0; border-radius: 999px; background: transparent; color: var(--qplay-text); cursor: pointer;
}
.dm-back:hover { background: rgba(255, 255, 255, 0.06); }
.dm-peer { display: flex; align-items: center; gap: 10px; color: var(--qplay-text); text-decoration: none; min-width: 0; }
.dm-peer-info { display: flex; flex-direction: column; min-width: 0; }
.dm-peer-info strong { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-peer-handle { color: var(--qplay-muted); font-size: 0.78rem; }
.dm-messages {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
}
.dm-message { display: flex; flex-direction: column; max-width: 78%; gap: 2px; }
.dm-message-mine { align-self: flex-end; align-items: flex-end; }
.dm-message-theirs { align-self: flex-start; align-items: flex-start; }
.dm-bubble {
  padding: 8px 12px; border-radius: 14px; font-size: 0.9rem; line-height: 1.35;
  word-break: break-word; overflow-wrap: anywhere;
  background: rgba(255, 255, 255, 0.07); color: var(--qplay-text);
}
.dm-message-mine .dm-bubble {
  background: var(--qplay-primary); color: #fff; border-bottom-right-radius: 4px;
}
.dm-message-theirs .dm-bubble { border-bottom-left-radius: 4px; }
.dm-bubble a { color: inherit; text-decoration: underline; }
.dm-time { color: var(--qplay-muted); font-size: 0.68rem; padding: 0 4px; }
.dm-compose {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--qplay-border);
}
.dm-compose .auth-input { flex: 1 1 auto; margin: 0; }
.dm-compose .qplay-button { flex-shrink: 0; padding: 9px 14px; }
.dm-error { color: var(--qplay-danger); font-size: 0.82rem; padding: 0 14px 12px; margin: 0; }

@media (max-width: 820px) {
  .dm-shell { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .dm-list-col { height: min(60vh, 520px); }
  .dm-conversation-col { display: none; height: min(72vh, 620px); }
  .dm-page.dm-show-conversation .dm-list-col { display: none; }
  .dm-page.dm-show-conversation .dm-conversation-col { display: flex; }
  .dm-back { display: inline-flex; }
}

/* Modal de login na própria página (live/vídeo público) — entrar sem sair da página. */
.login-modal { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-modal[hidden] { display: none; }
.login-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); backdrop-filter: blur(2px); }
.login-modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--qplay-surface, #1c0f1a); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px;
  padding: 24px 22px; color: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.login-modal-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; border: none; border-radius: 9px; background: rgba(255, 255, 255, .06); color: var(--qplay-muted, #9b8a95); cursor: pointer;
}
.login-modal-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.login-modal-close [data-lucide] { width: 18px; height: 18px; }
.login-modal-title { margin: 0 0 6px; font-size: 1.25rem; font-weight: 700; }
.login-modal-sub { margin: 0 0 18px; font-size: .9rem; color: var(--qplay-muted, #9b8a95); }
.login-modal-sso {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px;
  border-radius: 10px; background: #fff; color: #1c0f1a; font-weight: 600; text-decoration: none; border: 1px solid rgba(0, 0, 0, .08);
}
.login-modal-sso:hover { background: #f2f2f2; color: #1c0f1a; }
.login-modal-sso .sgaf-mark { width: 22px; height: 22px; object-fit: contain; }
.login-modal-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--qplay-muted, #9b8a95); font-size: .8rem; }
.login-modal-or::before, .login-modal-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }
.login-modal-error {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: .875rem;
  background: rgba(220, 53, 69, .14); border: 1px solid rgba(220, 53, 69, .45); color: #ffb3bb;
}
.login-modal-error[hidden] { display: none; }
.login-modal-form { display: flex; flex-direction: column; gap: 12px; }
.login-modal-label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--qplay-muted, #9b8a95); }
.login-modal-label input {
  width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18);
  background: var(--qplay-surface-2, #0f0710); color: #fff; font-size: .95rem;
}
.login-modal-label input:focus { outline: none; border-color: var(--qplay-primary, #af4694); }
.login-modal-submit { width: 100%; justify-content: center; margin-top: 4px; }
.login-modal-links { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 4px; font-size: .85rem; flex-wrap: wrap; }
.login-modal-links a { color: var(--qplay-primary, #af4694); text-decoration: none; }
.login-modal-links a:hover { text-decoration: underline; }
.login-modal-cpf {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 14px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: var(--qplay-muted, #9b8a95);
  font-size: .85rem; text-decoration: none;
}
.login-modal-cpf:hover { border-color: rgba(255, 255, 255, .32); color: #fff; }
.login-modal-cpf [data-lucide] { width: 16px; height: 16px; }
body.login-modal-open { overflow: hidden; }