/* ==========================================================================
   ZAOIO — Design System OIOAZ Nocturne v2.2
   Plano Único 3D, Cortina Redimensionável, HUD no Topo & Controles Flutuantes
   ========================================================================== */

:root {
  --bg-deep: #07131F;
  --bg-surface: #0E1D2B;
  --bg-glass: rgba(14, 29, 43, 0.92);
  
  --gold-primary: #D8AE62;
  --gold-light: #FAF5E8;
  --gold-glow: rgba(216, 174, 98, 0.45);

  --copper-primary: #B46E47;
  --copper-light: #D97757;
  
  --blue-cyan: #5CA9D6;
  --blue-cyan-glow: rgba(92, 169, 214, 0.4);
  
  --text-primary: #F4EFE4;
  --text-muted: #8E9EA9;

  --font-serif: 'Lora', Georgia, serif;
  --font-display: 'Cinzel', serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

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

body.theme-nocturne {
  background-color: var(--bg-deep);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(180, 110, 71, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(92, 169, 214, 0.07) 0%, transparent 40%),
    radial-gradient(circle at 50% 85%, rgba(216, 174, 98, 0.06) 0%, transparent 50%);
  color: var(--text-primary);
  font-family: var(--font-sans);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   1. APPSHELL: HEADER SUPERIOR FIXO (ÚNICO CABEÇALHO)
   ========================================================================== */
.app-header-v2 {
  height: 52px;
  background: rgba(7, 19, 31, 0.98);
  border-bottom: 1px solid rgba(216, 174, 98, 0.25);
  backdrop-filter: blur(16px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1000;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-badge-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.brand-badge-interactive {
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.25s ease;
  user-select: none;
}

.brand-badge-interactive:hover {
  background: rgba(216, 174, 98, 0.12);
  transform: translateY(-1px);
}

/* ==========================================================================
   MENU NOBRE DO LOGO ZAOIO (#dockRoleMenu) - 100% RESPONSIVO MOBILE & DESKTOP
   ========================================================================== */
.logo-dock-dropdown {
  position: fixed !important;
  top: 56px !important;
  left: 14px !important;
  width: 520px !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 72px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 174, 98, 0.4) rgba(7, 19, 31, 0.5);
  background: rgba(7, 19, 31, 0.98) !important;
  border: 1px solid rgba(216, 174, 98, 0.55) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 24px rgba(216, 174, 98, 0.25) !important;
  padding: 14px !important;
  z-index: 999999 !important;
  backdrop-filter: blur(24px) !important;
  box-sizing: border-box !important;
  display: flex;
  flex-direction: column !important;
  gap: 10px !important;
}

.logo-dock-dropdown::-webkit-scrollbar {
  width: 6px;
}
.logo-dock-dropdown::-webkit-scrollbar-track {
  background: rgba(7, 19, 31, 0.5);
  border-radius: 4px;
}
.logo-dock-dropdown::-webkit-scrollbar-thumb {
  background: rgba(216, 174, 98, 0.4);
  border-radius: 4px;
}
.logo-dock-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(216, 174, 98, 0.7);
}

.dock-menu-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
}

.dock-menu-header .dock-role-active-banner {
  flex: 1 !important;
}

.dock-menu-close-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(216, 174, 98, 0.4) !important;
  color: var(--gold-light, #FAF5E8) !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.dock-menu-close-btn:hover {
  background: rgba(216, 174, 98, 0.2) !important;
  border-color: var(--gold-primary, #D8AE62) !important;
  color: #FFF !important;
  transform: scale(1.08) !important;
}

.dock-role-active-banner {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.18), rgba(180, 110, 71, 0.12)) !important;
  border: 1px solid rgba(216, 174, 98, 0.45) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.dock-role-active-banner .active-badge-tag {
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  color: var(--gold-primary, #D8AE62) !important;
  text-transform: uppercase !important;
}

.dock-role-active-banner .active-role-name {
  font-size: 0.88rem !important;
  color: #FFF !important;
  font-family: var(--font-display, inherit) !important;
  letter-spacing: 0.5px !important;
}

.dock-section-title {
  font-family: var(--font-display, inherit) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--gold-primary, #D8AE62) !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid rgba(216, 174, 98, 0.2) !important;
  text-transform: uppercase !important;
}

.logo-dock-dropdown .dock-buttons,
.logo-dock-dropdown .dock-subactions {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.logo-dock-dropdown .btn-dock-role,
.logo-dock-dropdown .btn-dock-action {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(14, 29, 43, 0.95) !important;
  border: 1px solid rgba(216, 174, 98, 0.3) !important;
  color: #E2E8F0 !important;
  padding: 8px 10px !important;
  min-height: 50px !important;
  border-radius: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex;
  align-items: center !important;
  gap: 8px !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.logo-dock-dropdown .btn-dock-role[style*="display: none"],
.logo-dock-dropdown .btn-dock-action[style*="display: none"],
#roleSwitcher[style*="display: none"],
.role-tab[style*="display: none"] {
  display: none !important;
}

.logo-dock-dropdown .dock-btn-icon {
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.logo-dock-dropdown .dock-btn-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.logo-dock-dropdown .dock-btn-main {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  line-height: 1.2 !important;
}

.logo-dock-dropdown .dock-btn-sub {
  font-size: 0.65rem !important;
  color: #94A3B8 !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

.logo-dock-dropdown .btn-dock-role:hover,
.logo-dock-dropdown .btn-dock-action:hover {
  background: rgba(216, 174, 98, 0.18) !important;
  border-color: var(--gold-primary, #D8AE62) !important;
  transform: translateY(-1px) !important;
}

.logo-dock-dropdown .btn-dock-role.active {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.32), rgba(180, 110, 71, 0.22)) !important;
  border-color: var(--gold-primary, #D8AE62) !important;
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.3) !important;
}

.logo-dock-dropdown .btn-dock-role.active .dock-btn-main {
  color: var(--gold-light, #FAF5E8) !important;
}

.logo-dock-dropdown .btn-dock-role.active .dock-btn-sub {
  color: #E2E8F0 !important;
}

.logo-dock-dropdown .btn-dock-action.full-width {
  grid-column: span 2 !important;
}

.logo-dock-dropdown .btn-dock-action.highlight-feedback {
  background: rgba(216, 174, 98, 0.14) !important;
  border-color: rgba(216, 174, 98, 0.55) !important;
}

.logo-dock-dropdown .btn-dock-action.highlight-feedback .dock-btn-main {
  color: var(--gold-light, #FAF5E8) !important;
}

.logo-dock-dropdown .btn-dock-action.highlight-support {
  background: rgba(92, 169, 214, 0.14) !important;
  border-color: rgba(92, 169, 214, 0.5) !important;
}

.logo-dock-dropdown .btn-dock-action.highlight-support .dock-btn-main {
  color: #BAE6FD !important;
}

.logo-dock-dropdown .btn-dock-action.highlight-connections {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.15), rgba(7, 19, 31, 0.95)) !important;
  border-color: rgba(216, 174, 98, 0.6) !important;
}

/* Regras Responsivas para Celular / Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .logo-dock-dropdown {
    position: fixed !important;
    top: 54px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 64px) !important;
    padding: 12px 10px !important;
    gap: 9px !important;
    border-radius: 14px !important;
  }

  .logo-dock-dropdown .dock-buttons,
  .logo-dock-dropdown .dock-subactions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
  }

  .logo-dock-dropdown .btn-dock-role,
  .logo-dock-dropdown .btn-dock-action {
    padding: 8px 8px !important;
    min-height: 48px !important;
    gap: 6px !important;
  }

  .logo-dock-dropdown .dock-btn-icon {
    font-size: 1.15rem !important;
  }

  .logo-dock-dropdown .dock-btn-main {
    font-size: 0.74rem !important;
  }

  .logo-dock-dropdown .dock-btn-sub {
    font-size: 0.62rem !important;
  }
}

/* Telas ultra estreitas (ex: celulares < 350px) */
@media (max-width: 350px) {
  .logo-dock-dropdown .dock-buttons,
  .logo-dock-dropdown .dock-subactions {
    grid-template-columns: 1fr !important;
  }
  .logo-dock-dropdown .btn-dock-action.full-width {
    grid-column: span 1 !important;
  }
}

/* ==========================================================================
   MODAL DE FEEDBACK & AVALIAÇÃO ZAOIO (#modalFeedbackZaoio)
   ========================================================================== */
.feedback-modal-card {
  max-width: 540px;
  width: 92%;
}

.feedback-stars-block {
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 10px;
  padding: 14px 10px;
  margin-bottom: 14px;
}

.feedback-block-label {
  display: block;
  font-size: 0.88rem;
  color: #E2E8F0;
  font-weight: 600;
  margin-bottom: 8px;
}

.feedback-stars-row {
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}

.btn-star {
  background: transparent;
  border: none;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 4px;
  line-height: 1;
}

.btn-star.active,
.btn-star.hover {
  color: #ECC94B;
  text-shadow: 0 0 12px rgba(236, 201, 75, 0.6);
  transform: scale(1.15);
}

.stars-label-hint {
  font-size: 0.78rem;
  color: var(--gold-primary);
  font-weight: 600;
  margin-top: 6px;
}

.feedback-questions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feedback-q-item {
  background: rgba(14, 29, 43, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}

.feedback-q-item .q-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #CBD5E1;
  margin-bottom: 8px;
}

.q-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.q-opt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 5px 11px;
  font-size: 0.75rem;
  color: #E2E8F0;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.q-opt-pill:hover {
  background: rgba(216, 174, 98, 0.15);
  border-color: var(--gold-primary);
}

.q-opt-pill input[type="radio"] {
  accent-color: #ECC94B;
  margin: 0;
}

.q-opt-pill:has(input[type="radio"]:checked) {
  background: rgba(216, 174, 98, 0.22);
  border-color: #ECC94B;
  color: #FFE58F;
  font-weight: 600;
}
  border-color: #5CA9D6;
  color: #FFF;
  box-shadow: 0 0 12px rgba(92, 169, 214, 0.35);
  transform: translateY(-1px);
}

.support-modal-card {
  max-width: 580px;
  width: 92%;
}

.brand-title-v2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold-light);
}

.btn-header-history {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.45);
  border-radius: 18px;
  padding: 5px 11px;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
}

.btn-header-history:hover {
  background: rgba(22, 45, 68, 0.95);
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.35);
  transform: translateY(-1px);
}

.btn-header-history .btn-hist-icon {
  font-size: 0.88rem;
}

.badge-header-hist-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--gold-primary);
  color: #07131F;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.reading-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 29, 43, 0.7);
  border: 1px solid rgba(216, 174, 98, 0.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  color: var(--text-primary);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-primary);
  box-shadow: 0 0 8px var(--gold-primary);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

.header-center {
  display: flex;
  align-items: center;
}

.role-switcher-v2 {
  display: flex;
  gap: 4px;
  background: rgba(11, 23, 36, 0.8);
  border: 1px solid rgba(180, 110, 71, 0.2);
  padding: 3px;
  border-radius: 8px;
}

.role-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.role-tab:hover { color: var(--text-primary); }

.role-tab.active {
  background: rgba(216, 174, 98, 0.15);
  color: var(--gold-light);
  font-weight: 600;
  border: 1px solid rgba(216, 174, 98, 0.35);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.credits-pill-v2 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid var(--gold-primary);
  padding: 4px 10px;
  border-radius: 16px;
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.2);
}

.user-avatar-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1A344A, #0B1724);
  border: 1px solid var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--gold-light);
}

.btn-header-action {
  background: rgba(14, 29, 43, 0.75);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--gold-light);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-header-action:hover {
  background: rgba(216, 174, 98, 0.2);
  border-color: var(--gold-primary);
  color: #FFF;
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.3);
  transform: translateY(-1px);
}

/* Dropdown Solene do Perfil do Usuário (#userProfilePopover) */
.user-profile-popover {
  position: absolute;
  top: 54px;
  right: 12px;
  width: 290px;
  max-width: calc(100vw - 24px);
  background: #091523;
  border: 1.5px solid var(--gold-primary);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), 0 0 20px rgba(216, 174, 98, 0.2);
  z-index: 10010;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  animation: fadeInModal 0.2s ease;
}

.profile-popover-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(216, 174, 98, 0.2);
  padding-bottom: 10px;
}

.user-avatar-circle.lg {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  font-size: 0.9rem;
}

.popover-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.popover-meta strong {
  font-size: 0.78rem;
  color: #FFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popover-role-tag {
  font-size: 0.65rem;
  color: var(--gold-light);
}

.popover-credits-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: #A0B2C6;
  background: rgba(14, 29, 43, 0.7);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(216, 174, 98, 0.25);
}

.popover-credits-val {
  color: var(--gold-primary);
  font-size: 0.95rem;
}

.popover-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-popover-recharge {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-primary), var(--copper-primary));
  color: #07131F;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-popover-recharge:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-popover-switch-acc {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: #ECEFF4;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-popover-switch-acc:hover {
  background: rgba(216, 174, 98, 0.15);
  color: #FFF;
}

.btn-popover-logout:hover {
  background: rgba(239, 68, 68, 0.28) !important;
  border-color: rgba(239, 68, 68, 0.7) !important;
  color: #FFF !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   2. WORKSPACE: ESTRUTURA GERAL (SEM RODAPÉ LIMITADOR)
   ========================================================================== */
.zaoio-main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.zaoio-workspace {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   3. COLUNA ESQUERDA: HISTÓRICO DE CICLOS & CONTINUIDADE
   ========================================================================== */
.pane-history-cycles {
  width: 260px;
  padding: 14px 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 20;
  flex-shrink: 0;
}

.panel-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}

.history-container-card {
  flex: 1;
  background: rgba(11, 23, 36, 0.8);
  border: 1px solid rgba(216, 174, 98, 0.28);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.history-mode-tabs {
  display: flex;
  gap: 4px;
  background: rgba(7, 18, 29, 0.7);
  padding: 3px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.hist-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.hist-tab.active {
  background: rgba(216, 174, 98, 0.2);
  color: var(--gold-light);
  border: 1px solid rgba(216, 174, 98, 0.35);
}

.cycle-current-box {
  background: rgba(14, 29, 43, 0.75);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.cycle-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cycle-meta-tag {
  font-family: var(--font-display);
  font-size: 0.62rem;
  color: var(--gold-primary);
  letter-spacing: 0.5px;
}

.cycle-deck-badge {
  font-size: 0.65rem;
  color: var(--gold-light);
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid rgba(216, 174, 98, 0.3);
  padding: 1px 6px;
  border-radius: 8px;
}

.cycle-active-name {
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(216, 174, 98, 0.3);
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 0.88rem;
  padding: 2px 0;
}

.cycle-active-name:focus {
  outline: none;
  border-bottom-style: solid;
  border-color: var(--gold-primary);
}

.cycle-sub-desc {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.episodes-timeline-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.episodes-timeline-list::-webkit-scrollbar { width: 4px; }
.episodes-timeline-list::-webkit-scrollbar-thumb { background: rgba(216, 174, 98, 0.25); border-radius: 4px; }

.episode-hist-card {
  background: rgba(7, 18, 29, 0.65);
  border-left: 3px solid rgba(216, 174, 98, 0.3);
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.episode-hist-card:hover, .episode-hist-card.active {
  background: rgba(14, 29, 43, 0.95);
  border-left-color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.2);
}

.ep-header-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  font-size: 0.68rem;
}

.ep-badge {
  color: var(--gold-light);
  font-weight: 700;
  font-family: var(--font-display);
}

.ep-date { color: var(--text-muted); }

.ep-question-title {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 4px;
  word-break: break-word;
}

.ep-question-title.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.7em;
}

.ep-question-title.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  max-height: none;
}

.btn-ep-expand {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--gold-secondary, #d8ae62);
  font-size: 0.65rem;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 0 0 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}

.btn-ep-expand:hover {
  opacity: 1;
  color: var(--gold-light, #ffd700);
}

.ep-preview-pills {
  display: flex;
  gap: 4px;
}

.preview-mini-pill {
  background: rgba(216, 174, 98, 0.1);
  border: 1px solid rgba(216, 174, 98, 0.2);
  color: var(--gold-primary);
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 6px;
}

.hist-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  margin-bottom: 8px;
}
.hist-scroll::-webkit-scrollbar {
  width: 4px;
}
.hist-scroll::-webkit-scrollbar-thumb {
  background: rgba(216, 174, 98, 0.35);
  border-radius: 4px;
}

.history-actions-row {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(216, 174, 98, 0.22);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(11, 23, 36, 0.95);
}

.btn-new-independent-thread {
  width: 100%;
  background: rgba(14, 29, 43, 0.9);
  border: 1px solid rgba(216, 174, 98, 0.35);
  color: var(--gold-light);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.btn-new-independent-thread .btn-glyph {
  font-size: 0.95rem;
  color: var(--gold-primary);
}

.btn-new-independent-thread .btn-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.15;
}

.btn-new-independent-thread .btn-txt small {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 400;
}

.btn-new-independent-thread:hover:not(:disabled) {
  background: rgba(216, 174, 98, 0.2);
  border-color: var(--gold-primary);
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.3);
}

.btn-new-independent-thread:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}

.btn-new-independent-thread.btn-novo-ciclo-highlight {
  background: rgba(216, 174, 98, 0.28) !important;
  border-color: var(--gold-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(216, 174, 98, 0.5) !important;
  transform: scale(1.02);
}

.btn-new-cycle-episode {
  width: 100%;
  background: rgba(14, 29, 43, 0.95);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.btn-new-cycle-episode .btn-glyph {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--gold-primary);
}

.btn-new-cycle-episode .btn-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.15;
}

.btn-new-cycle-episode .btn-txt small {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 400;
}

.btn-new-cycle-episode:hover:not(:disabled) {
  background: rgba(216, 174, 98, 0.25);
  box-shadow: 0 0 14px rgba(216, 174, 98, 0.35);
}

.btn-new-cycle-episode:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-style: dashed;
}

.btn-new-cycle-episode.pulse-glow {
  animation: pulseComplementarGlow 1.8s infinite alternate ease-in-out;
  border-color: #F2D59A !important;
}

@keyframes pulseComplementarGlow {
  0% {
    box-shadow: 0 0 6px rgba(216, 174, 98, 0.3);
    border-color: rgba(216, 174, 98, 0.6);
  }
  100% {
    box-shadow: 0 0 20px rgba(242, 213, 154, 0.8), 0 0 30px rgba(216, 174, 98, 0.5);
    border-color: #F2D59A;
    background: rgba(216, 174, 98, 0.32);
  }
}

/* ==========================================================================
   CICLOS & TIRAGENS: HIERARQUIA, ACORDEOM & TEMAS INTERCALADOS (OURO / VERDE)
   ========================================================================== */
.cycle-group-container {
  margin-bottom: 12px;
  border-radius: 8px;
  transition: all 0.2s;
}

/* Tema Ouro Solar */
.cycle-theme-gold .cycle-master-card {
  border-left: 4px solid #D8AE62;
  background: rgba(14, 29, 43, 0.85);
}
.cycle-theme-gold .cycle-badge-meta {
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: #F2D59A;
}
.cycle-theme-gold .episodes-spine {
  border-left: 2px dashed rgba(216, 174, 98, 0.4);
}
.cycle-theme-gold .sub-episode-card {
  border-left: 2px solid rgba(216, 174, 98, 0.5);
}

/* Tema Verde Esmeralda Alquímico */
.cycle-theme-green .cycle-master-card {
  border-left: 4px solid #2BB374;
  background: rgba(10, 32, 28, 0.85);
}
.cycle-theme-green .cycle-badge-meta {
  background: rgba(43, 179, 116, 0.18);
  border: 1px solid rgba(43, 179, 116, 0.45);
  color: #6ee7b7;
}
.cycle-theme-green .episodes-spine {
  border-left: 2px dashed rgba(43, 179, 116, 0.4);
}
.cycle-theme-green .sub-episode-card {
  border-left: 2px solid rgba(43, 179, 116, 0.5);
}

.cycle-master-card {
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.cycle-master-card:hover, .cycle-master-card.active {
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.25);
  filter: brightness(1.1);
}
.cycle-master-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cycle-accordion-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 2px 4px;
  cursor: pointer;
  transition: transform 0.2s;
}
.cycle-accordion-btn:hover {
  color: var(--gold-light);
}

.cycle-episodes-drawer {
  margin-left: 14px;
  padding-left: 12px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.sub-episode-card {
  background: rgba(7, 18, 29, 0.7);
  border-radius: 0 6px 6px 0;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.sub-episode-card:hover, .sub-episode-card.active {
  background: rgba(14, 29, 43, 0.95);
  filter: brightness(1.1);
}

/* TIRAGENS AVULSAS INTERCALADAS (OURO / VERDE) */
.single-card-gold {
  border-left: 3px solid rgba(216, 174, 98, 0.6) !important;
}
.single-card-green {
  border-left: 3px solid rgba(43, 179, 116, 0.6) !important;
}
.single-card-gold .ep-badge {
  background: rgba(216, 174, 98, 0.15);
  color: #F2D59A;
  border: 1px solid rgba(216, 174, 98, 0.3);
}
.single-card-green .ep-badge {
  background: rgba(43, 179, 116, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(43, 179, 116, 0.3);
}
.selected-single-card {
  box-shadow: 0 0 14px rgba(216, 174, 98, 0.4) !important;
  background: rgba(18, 38, 56, 0.95) !important;
}

/* NOVO CONTÊINER: CRUZAMENTO EXPLÍCITO ENTRE MESAS */
.pergaminho-cruzamento-theme {
  background: linear-gradient(180deg, rgba(14, 38, 36, 0.92) 0%, rgba(9, 24, 28, 0.92) 100%) !important;
  border: 1px solid rgba(43, 179, 116, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(43, 179, 116, 0.08) !important;
}
.pergaminho-cruzamento-theme .pergaminho-seal {
  color: #6ee7b7 !important;
  text-shadow: 0 0 10px rgba(43, 179, 116, 0.6);
}
.pergaminho-cruzamento-theme h4 {
  color: #a7f3d0 !important;
}

/* CHIPS VERMELHOS RUBI: CARTAS ANCESTRAIS DA MESA ANTERIOR (NÃO ACENDEM O ALTAR) */
.card-chip.card-chip-ancestral,
.card-chip[data-origem="anterior"] {
  background: rgba(230, 57, 70, 0.22) !important;
  border: 1px solid rgba(255, 77, 77, 0.85) !important;
  color: #ff8585 !important;
  box-shadow: 0 0 10px rgba(255, 42, 42, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.card-chip.card-chip-ancestral:hover,
.card-chip[data-origem="anterior"]:hover {
  transform: translateY(-1px) !important;
  background: rgba(230, 57, 70, 0.38) !important;
  border-color: #ff4d4d !important;
  color: #ffffff !important;
  box-shadow: 0 0 13.2px 3.5px rgba(255, 42, 42, 0.7) !important;
}

/* ==========================================================================
   4. CENTRO: O ALTAR 3D EM PLANO ÚNICO COM ZOOM & PAN
   ========================================================================== */
.pane-altar-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
overflow: hidden;
}

/* Botão Nobre de Informação & Capacidades da Mesa (Acima dos controles de Zoom) */
.btn-info-capacidades-altar {
  position: absolute;
  bottom: 68px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 23, 36, 0.92);
  border: 1px solid rgba(216, 174, 98, 0.45);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 940;
  transform: translateZ(200px);
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(216, 174, 98, 0.25);
  transition: all 0.2s ease;
}

.btn-info-capacidades-altar:hover {
  background: rgba(216, 174, 98, 0.22);
  border-color: var(--gold-primary);
  color: #FFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(216, 174, 98, 0.45);
}

.btn-info-capacidades-altar .info-icon {
  font-size: 0.95rem;
}

/* Desktop: Botão Capacidades fica atrás do Painel Direito (#paneRightModal z-index: 100) e aparece apenas com o painel fechado */
@media (min-width: 901px) {
  .btn-info-capacidades-altar {
    z-index: 80;
    transform: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background 0.2s ease;
  }

  body.desktop-right-panel-open .btn-info-capacidades-altar,
  .zaoio-workspace:has(#paneRightModal:not(.collapsed)) .btn-info-capacidades-altar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }
}

/* Aviso Simples de Expiração em 2 Dias do Histórico do Teste Grátis (Exibido ao Zerar Saldo) */
.trial-expiry-history-banner {
  margin: 8px 10px 4px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(216, 174, 98, 0.13);
  border: 1px solid rgba(216, 174, 98, 0.45);
  color: #FAF5E8;
  font-size: 0.74rem;
  line-height: 1.42;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trial-expiry-history-banner strong {
  color: var(--gold-light);
}

.trial-expiry-history-banner .btn-keep-history-pkg {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(216, 174, 98, 0.65);
  background: rgba(216, 174, 98, 0.22);
  color: #FFF;
  font-size: 0.71rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease;
}

.trial-expiry-history-banner .btn-keep-history-pkg:hover {
  background: rgba(216, 174, 98, 0.38);
}

/* Controles Flutuantes de Zoom (Reposicionados no canto inferior direito para não colidir no topo) */
.altar-zoom-controls {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(11, 23, 36, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.35);
  padding: 4px 8px;
  border-radius: 20px;
  z-index: 80;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.btn-zoom-act {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--gold-light);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-zoom-act:hover {
  background: rgba(216, 174, 98, 0.2);
  color: var(--gold-primary);
}

.btn-zoom-act.reset {
  width: auto;
  border-radius: 12px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-family: var(--font-sans);
}

/* Botão Nobre de Confirmação da Leitura da Mesa (Chama Oráculo IA Gemini 1.5 Pro) */
.btn-confirm-board-reading {
  position: absolute;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.35), rgba(180, 110, 71, 0.45));
  border: 1.5px solid var(--gold-primary);
  color: #FFF;
  padding: 10px 24px;
  border-radius: 30px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  z-index: 95;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(216, 174, 98, 0.4);
  transition: all 0.25s ease;
}

.btn-confirm-board-reading:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.55), rgba(180, 110, 71, 0.65));
  box-shadow: 0 10px 35px rgba(216, 174, 98, 0.6);
  transform: translateY(-2px) scale(1.02);
}

.btn-confirm-board-reading.loading {
  pointer-events: none;
  opacity: 0.85;
}

.btn-confirm-board-reading.ai-processing-banner {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  cursor: default;
  pointer-events: none;
  animation: goldPulseGlow 2.4s infinite ease-in-out;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.45), rgba(180, 110, 71, 0.55));
  border: 1.5px solid var(--gold-primary);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 25px rgba(216, 174, 98, 0.6);
  z-index: 600;
  white-space: nowrap;
}

@keyframes goldPulseGlow {
  0% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(216, 174, 98, 0.4); }
  50% { box-shadow: 0 8px 35px rgba(0, 0, 0, 0.95), 0 0 32px rgba(216, 174, 98, 0.85); }
  100% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(216, 174, 98, 0.4); }
}

.btn-confirm-credit-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(4, 10, 18, 0.75);
  border: 1px solid rgba(247, 215, 136, 0.6);
  border-radius: 14px;
  padding: 3px 9px;
  color: #FAF5E8;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.btn-confirm-credit-tag strong {
  color: #F8DA8D;
  font-weight: 700;
}

.chat-cost-announcement-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(9, 21, 33, 0.92);
  border: 1px solid rgba(216, 174, 98, 0.35);
  border-radius: 10px;
  padding: 6px 12px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  color: #C0CFDF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.chat-pill-icon {
  font-size: 0.95rem;
  margin-right: 6px;
}

.chat-pill-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: #E2C285;
  letter-spacing: 0.5px;
}

.chat-pill-cost-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(216, 174, 98, 0.16);
  border: 1px solid #D8AE62;
  border-radius: 12px;
  padding: 2px 8px;
  color: #F8DA8D;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  white-space: nowrap;
}

.btn-star-halo.halo-pulse {
  display: inline-block;
  animation: starSpinScale 2.8s infinite linear;
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(255, 223, 140, 0.95);
}

@keyframes starSpinScale {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.3) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* Pílula Flutuante de Síntese */
.floating-synthesis-pill {
  position: absolute;
  top: 14px;
  background: rgba(11, 23, 36, 0.88);
  border: 1px solid rgba(216, 174, 98, 0.4);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--text-primary);
  z-index: 60;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.synthesis-star {
  color: var(--gold-primary);
}

.altar-hud-top {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  z-index: 70;
  pointer-events: none;
  background: rgba(11, 23, 36, 0.95);
  padding: 30px;
  border-radius: 20px;
  border: 1px solid rgba(216, 174, 98, 0.5);
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

.altar-timer-box-top, .altar-enter-box-top {
  pointer-events: auto;
}

.altar-timer-box-top {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 23, 36, 0.9);
  border: 1px solid rgba(216, 174, 98, 0.35);
  padding: 5px 12px 5px 8px;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  user-select: none;
}

.timer-halo-ring {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timer-halo-ring svg {
  transform: rotate(-90deg);
  width: 42px;
  height: 42px;
}

.timer-center-label {
  position: absolute;
  display: flex;
  align-items: baseline;
  color: var(--gold-light);
  font-family: var(--font-display);
}

.timer-seconds-big {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

.timer-unit {
  font-size: 0.62rem;
  color: var(--gold-primary);
  margin-left: 1px;
}

.timer-action-text {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--gold-primary);
}

.enter-pill-button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(11, 23, 36, 0.9);
  border: 1px solid rgba(216, 174, 98, 0.4);
  padding: 7px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}

.enter-pill-button:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 0 16px rgba(216, 174, 98, 0.35);
  transform: translateY(-2px);
}

.enter-labels strong {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold-light);
}

.enter-labels small {
  font-size: 0.62rem;
  color: var(--text-muted);
}

/* O Plano da Mesa & Viewport */
.altar-3d-viewport {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1250px;
  perspective-origin: 50% 48%;
  position: relative;
}

.altar-plane-scaler {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tábua da Mesa Circular do Altar no Último Plano (Halo Translúcido Sutil de 4mm e Reflexo Crepuscular) */
@keyframes pulsoDiscoMesaDourado {
  0% {
    border-color: rgba(247, 215, 136, 0.34) !important;
    box-shadow: 
      0 25px 75px rgba(0, 0, 0, 0.92),
      0 6px 26px rgba(234, 124, 48, 0.28),
      0 0 3mm rgba(247, 215, 136, 0.36),
      0 0 6mm rgba(216, 174, 98, 0.20),
      inset 0 -18px 34px rgba(246, 158, 66, 0.28),
      inset 0 0 22px rgba(168, 85, 247, 0.42),
      inset 0 0 3mm rgba(247, 215, 136, 0.22) !important;
  }
  50% {
    border-color: rgba(218, 166, 92, 0.26) !important;
    box-shadow: 
      0 25px 75px rgba(0, 0, 0, 0.92),
      0 4px 20px rgba(218, 108, 42, 0.22),
      0 0 3mm rgba(218, 166, 92, 0.30),
      0 0 6mm rgba(175, 122, 58, 0.16),
      inset 0 -16px 30px rgba(234, 138, 54, 0.22),
      inset 0 0 18px rgba(168, 85, 247, 0.34),
      inset 0 0 3mm rgba(218, 166, 92, 0.18) !important;
  }
  100% {
    border-color: rgba(247, 215, 136, 0.34) !important;
    box-shadow: 
      0 25px 75px rgba(0, 0, 0, 0.92),
      0 6px 26px rgba(234, 124, 48, 0.28),
      0 0 3mm rgba(247, 215, 136, 0.36),
      0 0 6mm rgba(216, 174, 98, 0.20),
      inset 0 -18px 34px rgba(246, 158, 66, 0.28),
      inset 0 0 22px rgba(168, 85, 247, 0.42),
      inset 0 0 3mm rgba(247, 215, 136, 0.22) !important;
  }
}

.altar-disc-3d {
  width: 590px;
  height: 590px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #15273C 0%, #0B1827 55%, #050E17 100%);
  position: relative;
  transform: rotateX(0deg) rotateZ(0deg);
  transform-style: preserve-3d;
  will-change: transform;
  border: 4mm solid rgba(247, 215, 136, 0.26) !important;
  box-shadow: 
    0 25px 75px rgba(0, 0, 0, 0.95),
    0 0 3mm rgba(247, 215, 136, 0.32),
    0 0 6mm rgba(216, 174, 98, 0.18),
    0 0 10mm rgba(247, 215, 136, 0.08),
    inset 0 0 3mm rgba(247, 215, 136, 0.18),
    inset 0 0 60px rgba(5, 14, 23, 0.85) !important;
  animation: pulsoDiscoMesaDourado 3.2s ease-in-out infinite !important;
  transition: transform 0.15s ease-out;
}

/* Constelação de micro-estrelas ao redor da tábua circular */
.altar-disc-3d::before,
.altar-disc-3d::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.altar-disc-3d::before {
  background-image:
    radial-gradient(1.5px 1.5px at 50% 1%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 62% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 74% 5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 85% 10%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 93% 18%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 98% 28%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 99% 39%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 99% 50%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 98% 61%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 93% 72%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 86% 82%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 76% 91%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 63% 97%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 50% 99%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 37% 97%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 24% 91%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 14% 82%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 7% 72%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 2% 61%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 1% 50%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 2% 39%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 7% 28%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 14% 18%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 25% 10%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 38% 5%, #ffffff, rgba(255,255,255,0));
  animation: cintilacaoEstrelasDisco1 3.4s ease-in-out infinite alternate;
}

.altar-disc-3d::after {
  background-image:
    radial-gradient(2px 2px at 56% 1.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 68% 3.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 80% 7.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 89% 14%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 96% 23%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 99% 34%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2px 2px at 99% 45%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 99% 56%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 96% 67%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 90% 77%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 81% 87%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 70% 94.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 57% 98.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 44% 98.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 31% 94.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 19% 87%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 10% 77%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 4% 67%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 1% 56%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 1% 45%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 4% 34%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 10% 23%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 19% 14%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 31% 7.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 44% 3.5%, #e9d5ff, rgba(233,213,255,0));
  animation: cintilacaoEstrelasDisco2 2.9s ease-in-out infinite alternate-reverse;
}

@keyframes cintilacaoEstrelasDisco1 {
  0% { opacity: 0.35; }
  50% { opacity: 1; }
  100% { opacity: 0.45; }
}

@keyframes cintilacaoEstrelasDisco2 {
  0% { opacity: 0.95; }
  50% { opacity: 0.28; }
  100% { opacity: 0.92; }
}

.sacred-geometry-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Nós de Callout */
.altar-callout {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
  transform: translateZ(15px);
}

.node-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0B1724;
  border: 1px solid var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold-light);
  box-shadow: 0 0 8px rgba(216, 174, 98, 0.4);
}

.node-info strong {
  font-size: 0.72rem;
  color: var(--gold-light);
  white-space: nowrap;
  display: block;
}

.node-info small {
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.node-dashed-line {
  width: 30px;
  height: 1px;
  border-top: 1px dashed rgba(216, 174, 98, 0.5);
}

.callout-01 { top: 75px; left: -20px; }
.callout-02 { top: 85px; right: -25px; }
.callout-03 { top: 255px; left: -45px; }
.callout-04 { top: 285px; right: -50px; }
.callout-05 { bottom: 75px; left: -35px; }

/* Grade 4x5 das 20 Casas (Com Brilho Púrpuro de 8mm e Magia Estelar ao Redor da Mesa) */
.cards-grid-4x5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(10px);
  display: grid;
  grid-template-columns: repeat(5, 74px);
  grid-template-rows: repeat(4, 108px);
  gap: 10px 8px;
  transform-style: preserve-3d;
  box-shadow: 
    0 0 8mm rgba(168, 85, 247, 0.65), 
    0 0 16mm rgba(126, 34, 206, 0.45), 
    inset 0 0 4mm rgba(192, 132, 252, 0.25) !important;
  border: 1.5px solid rgba(192, 132, 252, 0.5) !important;
  border-radius: 16px !important;
  padding: 12px 10px !important;
}

/* Constelação de estrelas cintilantes ao redor da borda da mesa */
.cards-grid-4x5::before,
.cards-grid-4x5::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 24px;
  pointer-events: none;
  z-index: 1;
}

.cards-grid-4x5::before {
  background-image: 
    radial-gradient(1.5px 1.5px at 4% 4%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 10% 2.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 16% 5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 22% 2%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 29% 4.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 36% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 43% 4%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 50% 1.5%, #e0f2fe, rgba(224,242,254,0)),
    radial-gradient(1.5px 1.5px at 57% 4.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 64% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 71% 4%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 78% 2%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 85% 5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 92% 2.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 97% 6%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 98.5% 12%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 97% 18%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 98.5% 25%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 97.5% 32%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 99% 39%, #e0f2fe, rgba(224,242,254,0)),
    radial-gradient(1.5px 1.5px at 97% 46%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 98.5% 54%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 97% 62%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 98.5% 70%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 97% 78%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 98.5% 85%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 97% 93%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 92% 97.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 85% 96%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 78% 98%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 71% 96%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 64% 98.5%, #e0f2fe, rgba(224,242,254,0)),
    radial-gradient(1.5px 1.5px at 57% 96%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 50% 98.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 43% 96%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 36% 98%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 29% 96%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 22% 98%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 15% 96%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 8% 97.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 2.5% 92%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 1.5% 84%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 2.5% 76%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 1% 68%, #e0f2fe, rgba(224,242,254,0)),
    radial-gradient(1.5px 1.5px at 2.5% 60%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 1.5% 52%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 2.5% 44%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 1% 36%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 2.5% 28%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 1.5% 20%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 2.5% 12%, #ffffff, rgba(255,255,255,0));
  animation: cintilacaoEstrelasMesa1 3.2s ease-in-out infinite alternate;
}

.cards-grid-4x5::after {
  background-image: 
    radial-gradient(2px 2px at 7% 2%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 13% 4%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 19% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 25% 4.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 32% 1.5%, #e0f2fe, rgba(224,242,254,0)),
    radial-gradient(1.5px 1.5px at 39% 4%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 46% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 53% 4.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 60% 1.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 67% 4%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 74% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 81% 4.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 88% 2%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 94% 4.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 98% 9%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 97% 15%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 98.5% 21%, #e0f2fe, rgba(224,242,254,0)),
    radial-gradient(1.5px 1.5px at 97% 28%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 99% 35%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 97% 42%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 98.5% 50%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 97% 58%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 99% 66%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 97% 74%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 98.5% 82%, #e0f2fe, rgba(224,242,254,0)),
    radial-gradient(1.5px 1.5px at 97% 89%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 95% 96%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 88% 97.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 81% 96%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 74% 98%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 67% 96%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 60% 98%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 53% 96%, #e0f2fe, rgba(224,242,254,0)),
    radial-gradient(1.5px 1.5px at 46% 98%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 39% 96%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 32% 98%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 25% 96%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 18% 98%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 11% 96%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 5% 97.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 1.5% 88%, #e0f2fe, rgba(224,242,254,0)),
    radial-gradient(1.5px 1.5px at 2.5% 80%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 1% 72%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 2.5% 64%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 1% 56%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.5px 1.5px at 2.5% 48%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 1% 40%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 2.5% 32%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 1% 24%, #e0f2fe, rgba(224,242,254,0)),
    radial-gradient(1.5px 1.5px at 2.5% 16%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 1% 8%, #fef08a, rgba(254,240,138,0));
  animation: cintilacaoEstrelasMesa2 2.8s ease-in-out infinite alternate-reverse;
}

@keyframes cintilacaoEstrelasMesa1 {
  0% { opacity: 0.38; }
  50% { opacity: 1; }
  100% { opacity: 0.48; }
}

@keyframes cintilacaoEstrelasMesa2 {
  0% { opacity: 0.92; }
  50% { opacity: 0.30; }
  100% { opacity: 0.96; }
}

.card-slot-v2 {
  position: relative;
  width: 74px;
  height: 108px;
  perspective: 600px;
  cursor: pointer;
}

.slot-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
  border: 1px dashed rgba(216, 174, 98, 0.35);
  background: rgba(7, 18, 29, 0.45);
}

.slot-frame .card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
  display: none;
}

.card-slot-v2.has-card .slot-frame {
  border: none;
  background: transparent;
}

.card-slot-v2.has-card .slot-frame .card-face {
  display: block;
}

.slot-frame .card-face.back {
  background: url('../assets/zaoio_card_back.jpg') center/cover no-repeat;
  border: 1px solid rgba(216, 174, 98, 0.6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), 0 0 8px rgba(216, 174, 98, 0.25);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.slot-frame .card-face.front {
  transform: rotateY(180deg) translateZ(1.5px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1.5px solid var(--gold-primary);
  background: #081420;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.85), 0 0 12px rgba(216, 174, 98, 0.35);
  overflow: hidden;
}

.card-slot-v2.revealed .slot-frame .card-face.back {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.card-slot-v2.revealed .slot-frame .card-face.front {
  opacity: 1 !important;
  visibility: visible !important;
}

.slot-frame .card-face.front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: brightness(1.08) contrast(1.08) saturate(1.1);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.house-plaque {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%) translateZ(40px);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--gold-primary);
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,1), 0 0 8px rgba(216, 174, 98, 0.6);
  z-index: 999;
}

.card-slot-v2.revealed .slot-frame {
  transform: rotateY(180deg);
}

/* Cartas Diretas: Orientação em pé com Iluminação Dourada Sagrada */
.card-slot-v2.revealed:not(.inverted) .slot-frame .card-face.front {
  border: 1.5px solid #E5C378;
  box-shadow: 
    0 4px 18px rgba(0, 0, 0, 0.85),
    0 0 16px rgba(216, 174, 98, 0.55),
    inset 0 0 8px rgba(255, 235, 170, 0.2);
}

/* Cartas Invertidas: Orientação física de cabeça para baixo (rotateZ 180deg) nítida e iluminada */
.card-slot-v2.revealed.inverted .slot-frame {
  transform: rotateZ(180deg) rotateY(180deg);
}

.card-slot-v2.revealed.inverted .slot-frame .card-face.front {
  border: 1.5px solid #6EB5E5;
  box-shadow: 
    0 4px 18px rgba(0, 0, 0, 0.85),
    0 0 16px rgba(110, 181, 229, 0.65),
    inset 0 0 8px rgba(186, 230, 253, 0.22);
}

.card-slot-v2.revealed.inverted .house-plaque {
  color: #7DD3FC;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(92, 169, 214, 0.6);
}

/* Efeito Hover Iluminado e Nítido */
.card-slot-v2:hover .slot-frame {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.9), 0 0 22px rgba(216, 174, 98, 0.9);
  transform: rotateY(180deg) scale(1.06) translateZ(12px);
  z-index: 25;
}

.card-slot-v2.inverted:hover .slot-frame {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.9), 0 0 22px rgba(92, 169, 214, 0.95);
  transform: rotateZ(180deg) rotateY(180deg) scale(1.06) translateZ(12px);
}

.card-slot-v2:hover .slot-frame .card-face.front img {
  filter: brightness(1.15) contrast(1.1) saturate(1.15);
}

/* Foco Cirúrgico */
.card-slot-v2.focus-highlight .slot-frame {
  box-shadow: 0 0 30px rgba(216, 174, 98, 1), 0 0 45px rgba(92, 169, 214, 0.85);
  transform: scale(1.1) translateZ(25px);
  z-index: 30;
}
.card-slot-v2.revealed.focus-highlight .slot-frame {
  transform: rotateY(180deg) scale(1.1) translateZ(25px);
}
.card-slot-v2.revealed.inverted.focus-highlight .slot-frame {
  transform: rotateZ(180deg) rotateY(180deg) scale(1.1) translateZ(25px);
}

.cards-grid-4x5.dimmed .card-slot-v2:not(.focus-highlight) {
  opacity: 1 !important;
  filter: none !important;
  transition: all 0.3s;
}

/* ==========================================================================
   5. COLUNA DIREITA: MAPA DA MESA (MODAL CORTINA REDIMENSIONÁVEL)
   ========================================================================== */
.pane-reading-map.resizable-curtain {
  width: 380px;
  min-width: 280px;
  max-width: 75vw;
  background: rgba(10, 22, 34, 0.94);
  backdrop-filter: blur(24px);
  border-left: 1px solid rgba(216, 174, 98, 0.3);
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 100;
  flex-shrink: 0;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}

.pane-reading-map.collapsed {
  transform: translateX(100%);
  width: 0 !important;
  min-width: 0 !important;
  border-left: none;
}

/* Puxador de Redimensionamento Horizontal */
.resize-curtain-handle {
  position: absolute;
  left: -5px;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
}

.handle-line {
  width: 2px;
  height: 40px;
  background: rgba(216, 174, 98, 0.4);
  border-radius: 1px;
  transition: background 0.2s, height 0.2s;
}

.resize-curtain-handle:hover .handle-line {
  background: var(--gold-primary);
  height: 60px;
}

.curtain-header-bar {
  padding: 12px 14px;
  background: rgba(7, 18, 29, 0.98);
  border-bottom: 1px solid rgba(216, 174, 98, 0.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto !important;
  position: relative;
  z-index: 30;
}

.curtain-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-mode-toggle {
  background: rgba(14, 29, 43, 0.8);
  border: 1px solid rgba(216, 174, 98, 0.25);
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-mode-toggle.active {
  background: rgba(216, 174, 98, 0.25);
  border-color: var(--gold-primary);
  color: var(--gold-light);
}

.btn-toggle-modal-drawer {
  background: transparent;
  border: none;
  color: var(--gold-light);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 4px;
}

.reading-map-inner {
  padding: 14px 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reading-map-inner::-webkit-scrollbar { width: 4px; }
.reading-map-inner::-webkit-scrollbar-thumb { background: rgba(216, 174, 98, 0.3); border-radius: 4px; }

/* Modo Pesquisa / Títulos */
.pane-reading-map.mode-titles .chapter-tile .tile-content {
  display: none !important;
}

.map-explanation-box {
  background: rgba(7, 18, 29, 0.85);
  border-left: 3px solid var(--gold-primary);
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.map-explanation-box strong {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--gold-light);
}

.map-explanation-box p {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Pílulas de Taxonomia */
.taxonomy-tags-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(7, 18, 29, 0.6);
  border: 1px solid rgba(180, 110, 71, 0.2);
  border-radius: 10px;
  padding: 10px;
}

.tax-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tax-title {
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: var(--gold-light);
}

.tax-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tax-pill {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.2);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.tax-pill:hover, .tax-pill.active {
  background: rgba(216, 174, 98, 0.25);
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.3);
}

.domain-material { border-color: #5CA9D6; color: #7DD3FC; }
.domain-emocional { border-color: #B46E47; color: #D97757; }
.domain-mental { border-color: #38BDF8; color: #BAE6FD; }
.domain-espiritual { border-color: #D8AE62; color: #FAF5E8; }

.axis-acao { background: rgba(92, 169, 214, 0.15); }
.axis-indiv { background: rgba(168, 85, 247, 0.15); border-color: #C084FC; }
.axis-plan { background: rgba(180, 110, 71, 0.15); border-color: #B46E47; }

/* Cascatas: Cabeçalho da Seção de Leitura e Aconselhamento */
.section-title-bar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: linear-gradient(135deg, rgba(14, 29, 45, 0.95), rgba(7, 18, 29, 0.98));
  border: 1px solid rgba(216, 174, 98, 0.35);
  padding: 8px 10px;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.title-with-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.title-with-badge h4 {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-light);
  margin: 0;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-with-badge small {
  font-family: var(--font-sans);
  font-size: 0.60rem;
  font-weight: 600;
  color: var(--gold-dim);
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.25);
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.section-title-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.btn-section-dossier,
.btn-section-audio {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.45);
  color: var(--gold-light);
  padding: 5px 8px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1.2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.btn-section-dossier span,
.btn-section-audio span {
  font-size: 0.72rem;
  line-height: 1;
}

.btn-section-dossier {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.24), rgba(180, 110, 71, 0.28));
  border-color: var(--gold-primary);
  color: #FFF;
}

.btn-section-dossier:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.45), rgba(180, 110, 71, 0.55));
  border-color: #FFF;
  color: #FFF;
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.5);
  transform: translateY(-1px);
}

.btn-section-audio:hover {
  background: rgba(216, 174, 98, 0.28);
  border-color: var(--gold-light);
  color: #FFF;
  box-shadow: 0 0 8px rgba(216, 174, 98, 0.35);
  transform: translateY(-1px);
}

.btn-section-dossier:active,
.btn-section-audio:active {
  transform: translateY(0);
}

.chapters-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.chapter-tile {
  background: rgba(7, 18, 29, 0.65);
  border: 1px solid rgba(180, 110, 71, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.chapter-tile:hover, .chapter-tile.active-focus {
  background: rgba(14, 29, 43, 0.9);
  border-color: var(--gold-primary);
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.25);
}

.tile-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tile-num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold-primary);
}

.tile-header h5 {
  font-family: var(--font-display);
  font-size: 0.76rem;
  color: var(--text-primary);
}

.tile-content {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 4px;
}

/* ==========================================================================
   6. BOTÕES FLUTUANTES (BARALHO NO CANTO ESQ · CHAT NO CANTO DIR)
   ========================================================================== */
/* Botão Flutuante do Baralho */
.floating-deck-trigger {
  position: absolute;
  bottom: 20px;
  left: 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 23, 36, 0.92);
  border: 1px solid var(--gold-primary);
  padding: 6px 12px;
  border-radius: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 15px rgba(216, 174, 98, 0.3);
  cursor: pointer;
  z-index: 90;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-deck-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(216, 174, 98, 0.5);
}

.deck-icon-stack {
  position: relative;
  width: 22px;
  height: 32px;
}

.deck-card-mini.back {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(216, 174, 98, 0.6);
}

.deck-card-mini.back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.deck-star-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  font-size: 0.75rem;
  color: var(--gold-primary);
  text-shadow: 0 0 6px var(--gold-glow);
}

.deck-badge-counter {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-light);
}

/* ==========================================================================
   BOTÃO FLUTUANTE DO CHAT (EM CIMA DO BARALHO NO CANTO INFERIOR ESQUERDO)
   ========================================================================== */
.floating-chat-trigger {
  position: absolute;
  bottom: 74px;
  left: 280px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #1A344A, #0B1724);
  border: 1.5px solid var(--gold-primary);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8), 0 0 16px rgba(216, 174, 98, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 95;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-chat-trigger:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9), 0 0 22px rgba(216, 174, 98, 0.6);
}

.chat-trigger-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: 0.65rem;
  color: var(--gold-primary);
  text-shadow: 0 0 6px var(--gold-glow);
}

.chat-icon-glyph {
  font-size: 1.25rem;
}

/* ==========================================================================
   CARD UNIFICADO DO CHAT: RITUAL & APROFUNDAMENTOS
   ========================================================================== */
.floating-chat-card {
  position: absolute;
  bottom: 60px;
  left: 280px;
  width: 580px;
  max-width: min(680px, calc(100vw - 310px));
  height: min(720px, calc(100vh - 100px));
  max-height: calc(100vh - 100px);
  background: rgba(8, 18, 29, 0.98);
  border: 1.5px solid rgba(216, 174, 98, 0.5);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(216, 174, 98, 0.25);
  z-index: 130;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  backdrop-filter: blur(20px);
  animation: fadeInUp 0.25s ease;
  overflow: hidden;
}

.floating-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(216, 174, 98, 0.2);
  padding-bottom: 8px;
}

.chat-header-tabs {
  display: flex;
  gap: 6px;
}

.chat-tab-btn {
  background: rgba(14, 29, 43, 0.7);
  border: 1px solid rgba(216, 174, 98, 0.25);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.chat-tab-btn:hover {
  color: #FFF;
  border-color: var(--gold-primary);
}

.chat-tab-btn.active {
  background: rgba(216, 174, 98, 0.2);
  border-color: var(--gold-primary);
  color: var(--gold-light);
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.2);
}

.btn-close-floating-chat {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.btn-close-floating-chat:hover {
  color: #FFF;
}

.chat-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: calc(100vh - 210px);
  padding-right: 2px;
}

/* Painel do Ritual */
.chat-ritual-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  color: var(--gold-light);
}

.chat-question-box {
  width: 100%;
}

.chat-question-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(4, 10, 18, 0.75);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 8px 10px;
  resize: none;
  line-height: 1.35;
  outline: none;
  transition: border-color 0.2s;
}
.chat-question-textarea:focus {
  border-color: var(--gold-primary);
}

.chat-deck-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(14, 29, 43, 0.6);
  border: 1px solid rgba(216, 174, 98, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
}

.chat-deck-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #D3DEE9;
}

.chat-cycle-badge {
  font-size: 0.68rem;
  color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.chat-ritual-actions-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-chat-start-root, .btn-chat-start-comp {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.25), rgba(180, 110, 71, 0.25));
  border: 1px solid var(--gold-primary);
  border-radius: 8px;
  padding: 10px 12px;
  color: #FFF;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
.btn-chat-start-root:hover, .btn-chat-start-comp:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.4), rgba(180, 110, 71, 0.4));
  box-shadow: 0 0 14px rgba(216, 174, 98, 0.3);
}

.btn-glyph {
  font-size: 1.2rem;
  color: var(--gold-primary);
}

.btn-txt-col strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.84rem;
  color: var(--gold-light);
}
.btn-txt-col small {
  display: block;
  font-size: 0.70rem;
  color: #A0B2C6;
}

/* Box de Embaralhamento Ativo no Chat */
.chat-shuffle-active-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(4, 10, 18, 0.7);
  border: 1px dashed var(--gold-primary);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}

.chat-timer-halo {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-timer-halo svg {
  transform: rotate(-90deg);
  position: absolute;
  top: 0;
  left: 0;
}
.chat-timer-digits {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-primary);
  display: flex;
  align-items: baseline;
  z-index: 2;
}
.chat-timer-digits small {
  font-size: 0.7rem;
  margin-left: 1px;
}

.chat-shuffle-msg strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.84rem;
  color: #FFF;
  margin-bottom: 2px;
}
.chat-shuffle-msg p {
  font-size: 0.72rem;
  color: #A0B2C6;
  margin: 0;
}

.btn-chat-hold-button {
  background: linear-gradient(135deg, var(--gold-primary), #B46E47);
  border: none;
  border-radius: 8px;
  color: #040A12;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.1s, box-shadow 0.2s;
  user-select: none;
  -webkit-user-select: none;
}
.btn-chat-hold-button:active {
  transform: scale(0.96);
  box-shadow: 0 0 16px var(--gold-glow);
}

/* Box de Revelação Ativa no Chat */
.chat-reveal-active-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(4, 10, 18, 0.6);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
}
.chat-reveal-info strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.84rem;
  color: var(--gold-light);
}
.chat-reveal-info small {
  font-size: 0.7rem;
  color: #8C9BAE;
}
.chat-reveal-btn-group {
  display: flex;
  gap: 8px;
}
.btn-chat-reveal-next, .btn-chat-reveal-all {
  flex: 1;
  background: rgba(216, 174, 98, 0.2);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-chat-reveal-next:hover, .btn-chat-reveal-all:hover {
  background: var(--gold-primary);
  color: #040A12;
}

/* Painel de Aprofundamentos & Diálogo */
.compass-routes-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(7, 19, 31, 0.9);
  border: 1px solid rgba(216, 174, 98, 0.2);
  border-radius: 8px;
  padding: 3px 5px;
  overflow-x: auto;
}

.route-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(14, 29, 43, 0.75);
  border: 1px solid rgba(180, 110, 71, 0.2);
  color: var(--text-muted);
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.68rem;
  white-space: nowrap;
  cursor: pointer;
}

.route-btn.active {
  background: rgba(216, 174, 98, 0.22);
  border-color: var(--gold-primary);
  color: var(--gold-light);
  font-weight: 600;
}

.route-cost-indicator {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  color: var(--gold-light);
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid rgba(216, 174, 98, 0.3);
  padding: 1px 5px;
  border-radius: 6px;
}

.chat-feed-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px;
  background: rgba(4, 10, 18, 0.6);
  border-radius: 10px;
  border: 1px solid rgba(216, 174, 98, 0.15);
}

.oracle-chat-text {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.65;
  color: #EDE5D8;
  word-break: break-word;
  white-space: normal;
  overflow: visible;
}
.oracle-chat-text p {
  margin: 0 0 0.85rem 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  color: #EDE5D8 !important;
}
.oracle-chat-text p:last-child {
  margin-bottom: 0 !important;
}

.chat-bubble-entry {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.5;
}
.chat-bubble-entry.oracular {
  background: rgba(14, 29, 43, 0.9);
  border-left: 3px solid var(--gold-primary);
  color: var(--text-primary);
}
.chat-bubble-entry.user {
  background: rgba(92, 169, 214, 0.18);
  border-right: 3px solid #5CA9D6;
  color: #ECEFF4;
  margin-left: 30px;
}
.bubble-emblem {
  color: var(--gold-primary);
  font-size: 0.95rem;
}
.bubble-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--gold-light);
  margin-bottom: 3px;
}
.bubble-body p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.84rem;
  line-height: 1.45;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  background: rgba(7, 18, 29, 0.95);
  border: 1.5px solid rgba(216, 174, 98, 0.4);
  border-radius: 12px;
  padding: 6px 8px 6px 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.main-chat-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  padding: 4px 0;
}
.main-chat-input:focus { outline: none; }

.btn-chat-send {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, var(--gold-primary), var(--copper-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ==========================================================================
   7. MODAIS AUXILIARES: CONTROLE DO BARALHO E INSTRUÇÕES
   ========================================================================== */
.deck-controller-modal, .ritual-instruction-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 11, 18, 0.88);
  backdrop-filter: blur(12px);
}

.deck-modal-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(4, 11, 18, 0.85);
  backdrop-filter: blur(12px);
}

.deck-modal-dialog, .instruction-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--gold-primary);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(216, 174, 98, 0.25);
  border-radius: 16px;
  padding: 24px;
  max-width: 540px;
  width: 92%;
  max-height: 88vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 174, 98, 0.55) rgba(8, 15, 26, 0.6);
  z-index: 410;
}

.btn-close-deck-modal {
  position: sticky;
  top: 0;
  float: right;
  margin-top: -6px;
  margin-right: -6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(12, 20, 34, 0.92);
  border: 1px solid rgba(216, 174, 98, 0.55);
  color: #F6E2B3;
  font-size: 1.35rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 35;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
}

.btn-close-deck-modal:hover {
  background: rgba(216, 174, 98, 0.25);
  color: #FFFFFF;
  transform: scale(1.06);
}

.deck-dialog-header {
  text-align: center;
  margin-bottom: 16px;
}

.deck-emblem-icon {
  font-size: 2rem;
}

.deck-dialog-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-light);
  margin-top: 4px;
}

.deck-dialog-header p {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.deck-text-input {
  width: 100%;
  background: rgba(7, 18, 29, 0.85);
  border: 1px solid rgba(180, 110, 71, 0.35);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-top: 4px;
}

.deck-text-input:focus {
  outline: none;
  border-color: var(--gold-primary);
}

.deck-rule-reminder {
  background: rgba(216, 174, 98, 0.08);
  border-left: 3px solid var(--gold-primary);
  padding: 8px 10px;
  margin: 14px 0;
  border-radius: 0 6px 6px 0;
  font-size: 0.72rem;
  color: var(--gold-light);
  line-height: 1.4;
}

.deck-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn-action-primary, .btn-action-secondary, .btn-instruction-start {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-action-primary, .btn-instruction-start {
  background: linear-gradient(135deg, var(--gold-primary), var(--copper-primary));
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  border: none;
}

.btn-action-secondary {
  background: rgba(14, 29, 43, 0.9);
  border: 1px solid var(--copper-primary);
  color: var(--gold-light);
}

.instruction-card {
  text-align: center;
}

.instruction-icon {
  font-size: 2.2rem;
  color: var(--gold-primary);
}

.instruction-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-light);
  margin: 6px 0 10px 0;
}

.instruction-p {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.instruction-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* ==========================================================================
   8. MODAL DE INSPEÇÃO 3D
   ========================================================================== */
.card-inspection-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inspection-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(3, 8, 14, 0.88);
  backdrop-filter: blur(16px);
}

.inspection-3d-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--gold-primary);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  border-radius: 16px;
  padding: 24px;
  max-width: 620px;
  width: 90%;
  display: flex;
  gap: 20px;
  z-index: 510;
}

.btn-close-inspection {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  cursor: pointer;
}

.inspection-card-face {
  width: 190px;
  height: 285px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--gold-primary);
  flex-shrink: 0;
}

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

.inspect-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold-light);
}

/* Indicador Discreto de Origem da Mesa (Seção 12 do PDF) */
.reading-origin-pill {
  position: absolute;
  top: 14px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 23, 36, 0.88);
  border: 1px solid rgba(216, 174, 98, 0.35);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  color: var(--gold-light);
  backdrop-filter: blur(12px);
  z-index: 50;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.reading-origin-pill .origin-icon {
  font-size: 0.8rem;
}

/* Botão de Perguntar sobre esta Carta no Chat */
.btn-inspect-ask-chat {
  width: 100%;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.25), rgba(180, 110, 71, 0.25));
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-inspect-ask-chat:hover {
  background: linear-gradient(135deg, var(--gold-primary), var(--copper-primary));
  color: #07131F;
}

/* Botão de Exportar Ciclo no Histórico */
.btn-export-cycle {
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--gold-light);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s;
}

.btn-export-cycle:hover {
  background: rgba(216, 174, 98, 0.25);
  border-color: var(--gold-primary);
}

/* Marcador de Contexto no Balão de Chat (Seção 12 do PDF) */
.chat-context-marker {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #5CA9D6;
  background: rgba(92, 169, 214, 0.12);
  border: 1px solid rgba(92, 169, 214, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 5px;
}

/* Cartas Bloqueadas na Tiragem Simples (14 Casas com Verso ZAOIO Dourado) */
.card-slot-v2.locked {
  cursor: pointer;
  position: relative;
  filter: brightness(0.85);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-slot-v2.locked:hover {
  transform: translateY(-4px) scale(1.03);
  filter: brightness(1.05);
  box-shadow: 0 8px 24px rgba(216, 174, 98, 0.4);
}

.card-slot-v2.locked .lock-overlay-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: rgba(7, 19, 31, 0.88);
  border: 1px solid var(--gold-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.6);
  z-index: 5;
}

/* Barra de Áudio Neural MP3 */
.audio-narration-bar {
  display: flex;
  gap: 10px;
  margin: 10px 0 6px 0;
}

.btn-audio-narrate {
  flex: 1;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.18), rgba(92, 169, 214, 0.15));
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s;
}

.btn-audio-narrate:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.35), rgba(92, 169, 214, 0.3));
  box-shadow: 0 0 16px rgba(216, 174, 98, 0.3);
  transform: translateY(-1px);
}

.btn-audio-narrate.playing {
  background: linear-gradient(135deg, var(--gold-primary), var(--copper-primary));
  color: #07131F;
  animation: pulseAudioGlow 2s infinite ease-in-out;
}

@keyframes pulseAudioGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(216, 174, 98, 0.4); }
  50% { box-shadow: 0 0 24px rgba(216, 174, 98, 0.8); }
}

.btn-audio-control {
  background: rgba(14, 29, 43, 0.9);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.25s;
}

.btn-audio-control:hover {
  background: rgba(216, 174, 98, 0.25);
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.3);
  transform: translateY(-1px);
}

.btn-show-conversion-modal {
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--gold-light);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-show-conversion-modal:hover {
  border-color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.15);
}

.audio-player-status {
  background: rgba(7, 19, 31, 0.95);
  border: 1px solid rgba(92, 169, 214, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audio-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.audio-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-primary), #5CA9D6);
  transition: width 0.2s linear;
}

.audio-status-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-serif);
}

/* Modal da Carta Prévia (Seção 1.4.3) */
.preview-card-modal,
.conversion-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-dialog-preview {
  position: relative;
  width: 90%;
  max-width: 520px;
  background: linear-gradient(170deg, #0d1b2a 0%, #07131f 100%);
  border: 1px solid var(--gold-primary);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 32px rgba(216, 174, 98, 0.25);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 2;
  animation: zoomInModal 0.3s ease-out;
}

@keyframes zoomInModal {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.preview-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.preview-tag {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--gold-light);
}

.preview-header h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #FFF5D6;
  margin: 0;
}

.preview-body {
  display: flex;
  gap: 20px;
  align-items: center;
  background: rgba(7, 19, 31, 0.6);
  border: 1px solid rgba(216, 174, 98, 0.2);
  border-radius: 12px;
  padding: 16px;
}

.preview-card-frame {
  width: 96px;
  height: 144px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gold-primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.preview-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-card-meta h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-light);
  margin: 0 0 4px 0;
}

.preview-card-archetype {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: #5CA9D6;
}

.preview-phrase-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview-phrase-box label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: var(--gold-light);
  letter-spacing: 1px;
}

.preview-phrase-text {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #FAF5E8;
  border-left: 2px solid var(--gold-primary);
  padding-left: 10px;
}

.preview-phrase-counter {
  align-self: flex-end;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.preview-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.btn-action-copy,
.btn-action-solo,
.btn-action-live {
  padding: 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-action-copy {
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--text-primary);
}

.btn-action-solo {
  background: linear-gradient(135deg, var(--gold-primary), var(--copper-primary));
  border: none;
  color: #07131F;
}

.btn-action-live {
  background: linear-gradient(135deg, #b44747, #d86262);
  border: none;
  color: #FFF;
}

/* Modal de Conversão (Seção 1.10) */
.modal-dialog-conversion {
  position: relative;
  width: 90%;
  max-width: 760px;
  background: linear-gradient(170deg, #0d1b2a 0%, #07131f 100%);
  border: 1px solid var(--gold-primary);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(216, 174, 98, 0.3);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 2;
  animation: zoomInModal 0.3s ease-out;
}

.conversion-header {
  text-align: center;
}

.star-badge-glow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--gold-light);
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid var(--gold-primary);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.conversion-header h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #FFF5D6;
  margin: 0 0 6px 0;
}

.conversion-header p {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.conversion-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 20px;
}

.conversion-column {
  background: rgba(7, 19, 31, 0.75);
  border: 1px solid rgba(180, 110, 71, 0.25);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.conversion-column.highlight {
  border: 2px solid var(--gold-primary);
  background: linear-gradient(170deg, rgba(216, 174, 98, 0.12) 0%, rgba(7, 19, 31, 0.9) 100%);
  position: relative;
}

.badge-featured {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--gold-primary);
  color: #07131F;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}

.col-head h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #FFF;
  margin: 0 0 4px 0;
}

.col-price {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--gold-light);
  font-weight: 700;
}

.col-features {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--text-primary);
}

.col-features li strong {
  color: var(--gold-light);
}

.btn-stay-trial {
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--text-muted);
  padding: 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-buy-full {
  background: linear-gradient(135deg, var(--gold-primary), var(--copper-primary));
  border: none;
  color: #07131F;
  padding: 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(216, 174, 98, 0.4);
  transition: all 0.25s;
}

.btn-buy-full:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(216, 174, 98, 0.6);
}

/* Modo Live TikTok: Console Privado em 4 Regiões */
.live-layout {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.live-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 12px;
  padding: 12px 20px;
  gap: 16px;
}

.live-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.live-status-badge {
  background: #B44747;
  color: #FFF;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  animation: blinkRed 1.5s infinite;
}

@keyframes blinkRed {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.live-bar-left h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #FAF5E8;
}

.live-timer-counter {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.live-temp-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 19, 31, 0.8);
  border: 1px solid rgba(216, 174, 98, 0.2);
  padding: 5px 12px;
  border-radius: 8px;
}

.live-temp-link-box .link-label {
  font-size: 0.7rem;
  color: var(--gold-light);
}

.live-temp-link-box code {
  font-size: 0.75rem;
  color: #5CA9D6;
}

.btn-live-copy-link,
.btn-toggle-scene-view,
.btn-end-live {
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-live-copy-link {
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
}

.btn-toggle-scene-view {
  background: rgba(92, 169, 214, 0.18);
  border: 1px solid #5CA9D6;
  color: #5CA9D6;
}

.btn-end-live {
  background: rgba(180, 71, 71, 0.2);
  border: 1px solid #B44747;
  color: #FF8F8F;
}

/* Grade do Console Live */
.live-console-grid {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  gap: 16px;
  flex: 1;
}

.live-queue-pane,
.live-actions-pane {
  background: rgba(14, 29, 43, 0.75);
  border: 1px solid rgba(216, 174, 98, 0.2);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.queue-pane-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.queue-title-row h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold-light);
}

.queue-count-badge {
  font-size: 0.7rem;
  background: rgba(92, 169, 214, 0.15);
  color: #5CA9D6;
  padding: 2px 6px;
  border-radius: 4px;
}

.btn-random-draw-queue {
  background: linear-gradient(135deg, var(--gold-primary), var(--copper-primary));
  border: none;
  color: #07131F;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.queue-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 480px;
}

.queue-item {
  background: rgba(7, 19, 31, 0.7);
  border: 1px solid rgba(216, 174, 98, 0.15);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.queue-item.selected {
  border-color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.08);
}

.queue-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.queue-code {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-light);
}

.queue-status-tag {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.queue-status-tag.in_session {
  background: rgba(216, 174, 98, 0.2);
  color: var(--gold-light);
}

.queue-question {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  margin: 0;
  color: var(--text-primary);
  line-height: 1.35;
}

.queue-consent-tags {
  display: flex;
  gap: 4px;
}

.consent-pill {
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(92, 169, 214, 0.15);
  color: #5CA9D6;
}

.consent-pill.locked {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

/* Região Central: Altar Live */
.live-altar-pane {
  background: rgba(7, 19, 31, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.live-active-consulente-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 29, 43, 0.9);
  border: 1px solid var(--gold-primary);
  border-radius: 8px;
  padding: 10px 16px;
}

.banner-code-circle {
  width: 32px;
  height: 32px;
  background: var(--gold-primary);
  color: #07131F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-display);
}

.banner-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.banner-info strong {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: #FFF5D6;
}

.banner-info span {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.live-reveal-pill {
  background: rgba(92, 169, 214, 0.15);
  border: 1px solid #5CA9D6;
  color: #5CA9D6;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
}

.live-cards-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px;
  background: radial-gradient(circle, rgba(14, 29, 43, 0.6) 0%, rgba(7, 19, 31, 0.9) 100%);
  border-radius: 10px;
  border: 1px solid rgba(216, 174, 98, 0.15);
}

/* Região Direita: Ações Live */
.actions-pane-header h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold-light);
}

.live-controls-cluster {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-live-control {
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-live-control.primary {
  background: linear-gradient(135deg, var(--gold-primary), var(--copper-primary));
  border: none;
  color: #07131F;
}

.btn-live-control.secondary {
  background: rgba(14, 29, 43, 0.9);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
}

.live-mode-switch-row {
  display: flex;
  gap: 6px;
}

.btn-mode-pill {
  flex: 1;
  background: rgba(7, 19, 31, 0.8);
  border: 1px solid rgba(216, 174, 98, 0.2);
  color: var(--text-muted);
  padding: 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-mode-pill.active {
  border-color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.15);
  color: var(--gold-light);
}

.live-narrative-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.live-narrative-box label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: var(--gold-light);
}

.live-narrative-textarea {
  background: rgba(7, 19, 31, 0.8);
  border: 1px solid rgba(216, 174, 98, 0.2);
  border-radius: 6px;
  padding: 8px;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: #FFF;
  resize: vertical;
}

.btn-update-snippet {
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--gold-light);
  padding: 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
}

.live-compliance-notice {
  margin-top: auto;
  background: rgba(7, 19, 31, 0.6);
  border: 1px dashed rgba(216, 174, 98, 0.3);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-compliance-notice span {
  font-size: 0.68rem;
  color: var(--gold-light);
  font-weight: 600;
}

.live-compliance-notice small {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Cena Pública 9:16 (Overlay para TikTok / OBS) */
.live-public-scene-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #03080e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scene-close-bar {
  position: absolute;
  top: 14px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.btn-close-scene {
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  cursor: pointer;
}

.scene-res-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-display);
}

.scene-916-container {
  width: 420px;
  height: 746px; /* Proporção 9:16 vertical TikTok/OBS */
  max-width: 90vw;
  max-height: 88vh;
  background: radial-gradient(circle at 50% 30%, #0d2238 0%, #040a12 100%);
  border: 2px solid var(--gold-primary);
  border-radius: 16px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(216, 174, 98, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 16px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Espaço Reservado da Câmera do Criador (OBS / TikTok Studio) */
.scene-camera-cutout {
  width: 100%;
  height: 180px;
  min-height: 160px;
  border: 2px dashed rgba(216, 174, 98, 0.45);
  border-radius: 12px;
  background: rgba(7, 19, 31, 0.35);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.camera-cutout-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  color: var(--gold-primary);
}

.camera-cutout-inner .cam-icon {
  font-size: 1.6rem;
}

.camera-cutout-inner .cam-text {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.camera-cutout-inner small {
  font-size: 0.65rem;
  color: #A0B2C6;
  max-width: 260px;
}

.scene-top-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(216, 174, 98, 0.2);
  flex-shrink: 0;
}

.scene-brand-badge {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 2px;
  color: var(--gold-light);
  font-weight: 700;
}

.scene-active-tag {
  background: #B44747;
  color: #FFF;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.scene-altar-spotlight {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  overflow: hidden;
}

.scene-cards-halo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  height: 100%;
  max-width: 380px;
  max-height: 280px;
}

.scene-card-slot {
  width: 100%;
  height: 100%;
  min-height: 58px;
  border-radius: 6px;
  border: 1px solid rgba(216, 174, 98, 0.35);
  background: rgba(14, 29, 43, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.scene-card-slot.revealed {
  border: 1.5px solid var(--gold-primary);
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.4);
}

.scene-card-slot.focus-highlight {
  border: 2px solid #FFF;
  box-shadow: 0 0 16px rgba(216, 174, 98, 0.85);
  transform: scale(1.05);
  z-index: 5;
}

.scene-card-slot img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.scene-card-slot .slot-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(216, 174, 98, 0.65);
}

.scene-consulente-card {
  background: rgba(7, 19, 31, 0.88);
  border: 1px solid rgba(216, 174, 98, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 6px;
}

.scene-code-pill {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(216, 174, 98, 0.2);
  color: var(--gold-light);
  padding: 2px 10px;
  border-radius: 8px;
  letter-spacing: 1px;
}

.scene-active-q {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: #FAF5E8;
  margin: 0;
  line-height: 1.35;
}

.scene-oracle-phrase {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.74rem;
  color: #5CA9D6;
  line-height: 1.3;
}

/* Painel do Divulgador (Seção 1.11) */
.dash-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.referrer-badge-pill {
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
}

.dash-links-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.friendly-link-card,
.live-link-card {
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 14px;
}

.friendly-link-card .card-icon,
.live-link-card .card-icon {
  font-size: 1.6rem;
}

.card-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-details h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: #FFF5D6;
}

.link-display-row {
  display: flex;
  gap: 8px;
}

.friendly-url-input {
  flex: 1;
  background: rgba(7, 19, 31, 0.9);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  color: var(--gold-light);
}

.btn-copy-friendly {
  background: var(--gold-primary);
  color: #07131F;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-revoke-live {
  background: rgba(180, 71, 71, 0.25);
  border: 1px solid #B44747;
  color: #FF8F8F;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.72rem;
  cursor: pointer;
}

.card-details small {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.dash-funnel-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.metric-card {
  background: rgba(7, 19, 31, 0.7);
  border: 1px solid rgba(180, 110, 71, 0.2);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-card.highlight {
  border-color: #5CA9D6;
  background: rgba(92, 169, 214, 0.08);
}

.metric-card.gold {
  border-color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.1);
}

.metric-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: var(--text-muted);
}

.metric-number {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #FFF5D6;
}

.metric-card.gold .metric-number {
  color: var(--gold-light);
}

.metric-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.referrer-actions-bar {
  display: flex;
  justify-content: flex-end;
}

.btn-open-live-from-ref {
  background: linear-gradient(135deg, #B44747, #d86262);
  border: none;
  color: #FFF;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-open-live-from-ref:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(180, 71, 71, 0.4);
}

/* =========================================================================
   RESPONSIVIDADE MOBILE IMERSIVA & NATIVA (MAX-WIDTH: 900PX)
   Eliminação total de scroll lateral, header adaptativo e gavetas off-canvas
   ========================================================================= */
html {
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
    max-width: 100vw;
  }

  body.theme-nocturne {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* 1. CABEÇALHO MOBILE COMPACTO */
  .app-header-v2 {
    height: 50px;
    padding: 0 10px;
    gap: 8px;
    justify-content: space-between;
    overflow: visible !important;
    position: relative;
    z-index: 1000;
  }

  .header-left {
    gap: 6px;
    flex-shrink: 0;
  }

  .brand-title-v2 {
    font-size: 1.1rem;
    letter-spacing: 1px;
  }

  .brand-logo-icon {
    width: 24px;
    height: 24px;
  }

  /* No mobile, a pílula de status no topo é oculta para liberar espaço às abas */
  .reading-status-pill {
    display: none !important;
  }

  /* Abas do Header: Scroll horizontal táctil suave */
  .header-center {
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 4px;
  }

  .header-center::-webkit-scrollbar {
    display: none;
  }

  .role-switcher-v2 {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    max-width: none;
    gap: 3px;
    padding: 2px;
  }

  .role-tab {
    padding: 4px 8px;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  .header-right {
    gap: 6px;
    flex-shrink: 0;
  }

  .credits-pill-v2 {
    padding: 3px 8px;
    font-size: 0.72rem;
  }

  .user-avatar-circle {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }

  .btn-header-action {
    display: none;
  }

  /* 2. WORKSPACE MOBILE: ALTAR 3D EM TELA CHEIA (SEM EMPILHAMENTO VERTICAL) */
  .zaoio-main-wrapper {
    height: calc(100dvh - 50px);
    overflow: hidden;
    position: relative;
    width: 100vw;
  }

  .zaoio-workspace {
    flex-direction: row;
    height: 100%;
    width: 100vw;
    overflow: hidden;
    position: relative;
  }

  .pane-altar-stage {
    width: 100vw !important;
    height: 100% !important;
    flex: 1;
    overflow: hidden;
    padding: 0;
    position: relative;
  }

  .altar-disc-3d {
    width: 90vw;
    height: 90vw;
    max-width: 350px;
    max-height: 350px;
    transform: rotateX(20deg);
  }

  .cards-grid-4x5 {
    grid-template-columns: repeat(5, 46px);
    grid-template-rows: repeat(4, 68px);
    gap: 5px 4px;
  }

  .card-slot-v2 {
    width: 46px;
    height: 68px;
  }

  .altar-callout {
    display: none;
  }

  /* 3. GAVETAS OFF-CANVAS DESLIZANTES NO MOBILE */
  .pane-history-cycles {
    position: fixed !important;
    top: 50px;
    left: 0;
    bottom: 0;
    width: 86vw !important;
    max-width: 320px !important;
    z-index: 600;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(7, 18, 29, 0.98) !important;
    backdrop-filter: blur(24px);
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.85);
    padding: 12px !important;
    overflow-y: auto;
  }

  .pane-history-cycles:not(.collapsed) {
    transform: translateX(0) !important;
  }

  .pane-history-cycles.collapsed {
    transform: translateX(-100%) !important;
    width: 86vw !important;
  }

  .pane-reading-map.resizable-curtain {
    position: fixed !important;
    top: 50px;
    right: 0;
    bottom: 0;
    width: 90vw !important;
    max-width: 360px !important;
    z-index: 600;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(8, 20, 32, 0.98) !important;
    backdrop-filter: blur(24px);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.85);
    padding: 0 !important;
    overflow-y: auto;
  }

  .pane-reading-map.resizable-curtain:not(.collapsed) {
    transform: translateX(0) !important;
  }

  .pane-reading-map.resizable-curtain.collapsed {
    transform: translateX(100%) !important;
    width: 90vw !important;
  }

  .resize-curtain-handle {
    display: none !important;
  }

  /* Puxadores de borda no mobile: Botões táteis fixos */
  .drawer-edge-toggle.left {
    position: fixed !important;
    left: 0;
    top: 50%;
    z-index: 700;
    padding: 8px 6px;
    border-radius: 0 8px 8px 0;
  }

  .drawer-edge-toggle.right {
    position: fixed !important;
    right: 0;
    top: 50%;
    z-index: 700;
    padding: 8px 6px;
    border-radius: 8px 0 0 8px;
  }

  /* 4. CONTROLES TÁTEIS FLUTUANTES NO MOBILE */
  .floating-deck-trigger {
    left: 16px;
    bottom: 16px;
    width: 50px;
    height: 70px;
  }

  .floating-chat-trigger,
  .chat-floating-trigger {
    left: 16px;
    right: auto;
    bottom: 96px;
    width: 46px;
    height: 46px;
  }

  .floating-chat-card {
    left: 10px;
    right: 10px;
    bottom: 80px;
    width: auto;
    max-width: none;
    max-height: 80vh;
  }

  .altar-zoom-controls {
    top: 8px;
    left: 8px;
    transform: scale(0.85);
    transform-origin: top left;
  }

  /* 5. PAINÉIS DE OUTROS WORKSPACES EM SCROLL NATURAL */
  #viewLive, #viewPromoter, #viewGov {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: calc(100dvh - 50px);
    padding: 12px;
  }

  .live-console-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dash-links-section {
    grid-template-columns: 1fr;
  }

  .dash-funnel-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .conversion-grid {
    grid-template-columns: 1fr;
  }

  .roles-grants-grid {
    grid-template-columns: 1fr;
  }

  .preview-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .preview-actions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   ESTILOS ADICIONAIS: LIMPEZA DE FILA, COMISSÃO MANUAL & DURAÇÃO DE 7 DIAS
   ========================================================================= */

/* Cluster de Ações da Fila da Live */
.queue-actions-cluster {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-clear-queue {
  background: rgba(180, 110, 71, 0.18);
  border: 1px solid rgba(180, 110, 71, 0.45);
  color: #E2B878;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.btn-clear-queue:hover {
  background: rgba(180, 110, 71, 0.35);
  border-color: #B46E47;
  color: #FFF;
  box-shadow: 0 0 10px rgba(180, 110, 71, 0.4);
}

/* Botão de Ajuste Manual de Comissão */
.btn-adjust-commission-trigger {
  background: rgba(216, 174, 98, 0.2);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s;
}

.btn-adjust-commission-trigger:hover {
  background: var(--gold-primary);
  color: #07131F;
}

/* Controles de Validade do Link de Live (7 Dias) */
.live-link-header-with-duration {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.live-duration-control-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #A9B7C6;
}

.live-duration-select {
  background: rgba(7, 19, 31, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: var(--gold-light);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.btn-generate-live-link {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.25), rgba(92, 169, 214, 0.25));
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-generate-live-link:hover {
  background: var(--gold-primary);
  color: #07131F;
}

/* Modal de Ajuste de Comissão */
.commission-modal-card {
  max-width: 440px;
  background: #0E1D2B;
  border: 1px solid rgba(216, 174, 98, 0.4);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  padding: 24px;
  color: #ECEFF4;
}

.commission-input-group {
  display: flex;
  align-items: center;
  margin: 16px 0;
  background: rgba(7, 19, 31, 0.9);
  border: 2px solid var(--gold-primary);
  border-radius: 8px;
  padding: 6px 14px;
}

.currency-prefix {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold-primary);
  margin-right: 8px;
}

.input-custom-commission {
  background: transparent;
  border: none;
  color: #FFF;
  font-size: 1.4rem;
  font-weight: 700;
  width: 100%;
  outline: none;
}

.commission-quick-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.btn-quick-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--gold-light);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-quick-pill:hover,
.btn-quick-pill.active {
  background: var(--gold-primary);
  color: #07131F;
  border-color: var(--gold-primary);
}

.field-hint {
  font-size: 0.72rem;
  color: #8C9BAE;
  margin-top: 8px;
  line-height: 1.4;
}

/* =============================================================================
   CENTRAL DE GOVERNANÇA DO FUNDADOR / GUARDIÃO RAIZ (CSS CANÔNICO)
   ============================================================================= */

.governance-founder-box {
  background: #0B1724;
  border: 1px solid rgba(216, 174, 98, 0.35);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  margin-bottom: 40px;
}

.gov-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(216, 174, 98, 0.25);
  padding-bottom: 18px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.gov-title-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gov-badge-emblem {
  font-size: 2.2rem;
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid rgba(216, 174, 98, 0.4);
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gov-title-cluster h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #FAF5E8;
  margin: 0 0 4px 0;
  letter-spacing: 0.5px;
}

.gov-title-cluster p {
  color: #8C9BAE;
  font-size: 0.8rem;
  margin: 0;
}

.gov-meta-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gov-status-pill {
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid #4CAF50;
  color: #81C784;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #4CAF50;
  border-radius: 50%;
  box-shadow: 0 0 8px #4CAF50;
  animation: pulseDotAnim 1.8s infinite;
}

@keyframes pulseDotAnim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.gov-user-id {
  font-size: 0.78rem;
  color: #BAC7D5;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 6px;
}

.btn-refresh-gov {
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--gold-light);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-refresh-gov:hover {
  background: var(--gold-primary);
  color: #07131F;
}

.gov-main-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gov-card {
  background: #0E1D2B;
  border: 1px solid rgba(216, 174, 98, 0.22);
  border-radius: 12px;
  padding: 20px;
}

.gov-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.card-icon-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gov-icon {
  font-size: 1.4rem;
}

.card-icon-title h3 {
  font-size: 1.05rem;
  color: #FAF5E8;
  margin: 0;
  font-family: var(--font-display);
}

.card-icon-title small {
  color: #8C9BAE;
  font-size: 0.73rem;
}

.btn-gov-primary {
  background: linear-gradient(135deg, var(--gold-primary), #B46E47);
  border: none;
  color: #07131F;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-gov-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(216, 174, 98, 0.4);
}

.btn-gov-action {
  background: rgba(92, 169, 214, 0.15);
  border: 1px solid rgba(92, 169, 214, 0.4);
  color: #5CA9D6;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-gov-action:hover {
  background: #5CA9D6;
  color: #07131F;
}

/* Conexões Externas */
.connections-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.conn-item {
  background: rgba(7, 19, 31, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.conn-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.conn-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  background: #777;
}

.conn-status-indicator.active {
  background: #4CAF50;
  box-shadow: 0 0 8px #4CAF50;
}

.conn-detail {
  display: block;
  font-size: 0.72rem;
  color: #8C9BAE;
  margin-top: 2px;
}

.conn-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn-conn-test {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(216, 174, 98, 0.25);
  color: var(--gold-light);
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-conn-test:hover {
  background: rgba(216, 174, 98, 0.2);
}

/* Comissões & Payouts */
.commission-overview-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.commission-metric-badge {
  background: rgba(7, 19, 31, 0.7);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.commission-metric-badge.warning {
  border-color: rgba(255, 152, 0, 0.5);
  background: rgba(255, 152, 0, 0.05);
}

.commission-metric-badge .badge-label {
  font-size: 0.72rem;
  color: #8C9BAE;
}

.commission-metric-badge .badge-val {
  font-size: 1.4rem;
  color: var(--gold-primary);
  font-family: var(--font-display);
}

.commission-metric-badge small {
  font-size: 0.68rem;
  color: #BAC7D5;
}

.gov-table-wrapper {
  overflow-x: auto;
  margin-top: 14px;
}

.gov-table-wrapper h4, .gov-payouts-section h4 {
  font-size: 0.82rem;
  color: var(--gold-light);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gov-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.gov-table th, .gov-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gov-table th {
  color: #8C9BAE;
  font-weight: 600;
  background: rgba(7, 19, 31, 0.5);
}

.rate-tag {
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.btn-sm-action {
  background: rgba(92, 169, 214, 0.15);
  border: 1px solid rgba(92, 169, 214, 0.3);
  color: #5CA9D6;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-sm-action:hover {
  background: #5CA9D6;
  color: #07131F;
}

.gov-payouts-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.empty-state-notice {
  font-size: 0.76rem;
  color: #6C7D93;
  padding: 12px;
  background: rgba(7, 19, 31, 0.4);
  border-radius: 6px;
  text-align: center;
}

/* RBAC & Escopos */
.roles-grants-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .roles-grants-grid { grid-template-columns: 1fr; }
}

.roles-col h4 {
  font-size: 0.8rem;
  color: var(--gold-light);
  margin: 0 0 10px 0;
}

.approval-item {
  background: rgba(7, 19, 31, 0.6);
  border: 1px solid rgba(216, 174, 98, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.appr-meta strong {
  display: block;
  font-size: 0.78rem;
  color: #FFF;
}

.appr-meta span {
  font-size: 0.7rem;
  color: #8C9BAE;
}

.appr-meta mark {
  background: rgba(216, 174, 98, 0.2);
  color: var(--gold-light);
  padding: 1px 4px;
  border-radius: 3px;
}

.appr-actions {
  display: flex;
  gap: 6px;
}

.btn-appr-accept {
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid #4CAF50;
  color: #81C784;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
}

.btn-appr-reject {
  background: rgba(244, 67, 54, 0.2);
  border: 1px solid #F44336;
  color: #E57373;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
}

.grant-box {
  background: rgba(7, 19, 31, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}

.grant-box strong {
  display: block;
  font-size: 0.78rem;
  color: #FFF;
  margin-bottom: 6px;
}

.scopes-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scope-tag {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: #8C9BAE;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.scope-tag.active {
  background: rgba(92, 169, 214, 0.15);
  color: #5CA9D6;
  border-color: rgba(92, 169, 214, 0.4);
}

/* DRE Executivo */
.dre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.dre-col {
  background: rgba(7, 19, 31, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dre-col.highlight {
  border-color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.08);
}

.dre-lbl {
  font-size: 0.7rem;
  color: #8C9BAE;
}

.dre-val {
  font-size: 1.25rem;
  font-family: var(--font-display);
}

.dre-val.gross { color: #81C784; }
.dre-val.expense { color: #E57373; }
.dre-val.net { color: var(--gold-primary); font-weight: 700; }

.dre-margin {
  font-size: 0.72rem;
  color: #5CA9D6;
  font-weight: 700;
}

/* Feature Flags */
.flags-toggles-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.flag-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 19, 31, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.76rem;
  color: #BAC7D5;
}

.flag-toggle-item input[type="checkbox"] {
  accent-color: var(--gold-primary);
  width: 16px;
  height: 16px;
}

/* Trilha de Auditoria */
.audit-counter-badge {
  font-size: 0.72rem;
  color: #81C784;
  background: rgba(76, 175, 80, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

.audit-feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.audit-feed-item {
  background: rgba(7, 19, 31, 0.5);
  border-left: 3px solid var(--gold-primary);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.73rem;
}

.audit-event-name {
  color: #FAF5E8;
  font-weight: 600;
}

.audit-event-actor {
  color: #5CA9D6;
  margin-left: 6px;
}

.audit-event-time {
  color: #6C7D93;
  font-size: 0.68rem;
}

/* Modal de Conexões */
.connections-modal-card {
  max-width: 580px;
  background: #0E1D2B;
  border: 1px solid rgba(216, 174, 98, 0.4);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  padding: 24px;
  color: #ECEFF4;
}

.modal-sub {
  font-size: 0.76rem;
  color: #8C9BAE;
  margin-bottom: 16px;
}

.form-group-gov {
  margin-bottom: 14px;
}

.form-group-gov label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 4px;
}

.form-group-gov small {
  display: block;
  font-size: 0.68rem;
  color: #8C9BAE;
  margin-top: 3px;
  line-height: 1.3;
}

.form-group-gov code {
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 4px;
  border-radius: 3px;
  color: #5CA9D6;
}

.gov-input {
  width: 100%;
  background: rgba(7, 19, 31, 0.9);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  color: #FFF;
  font-size: 0.82rem;
  outline: none;
  box-sizing: border-box;
}

.gov-input:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 8px rgba(216, 174, 98, 0.4);
}

/* Modais de Governança e Configurações (Estilos Globais Herméticos) */
.zaoio-modal-card .modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-right: 36px;
}

.zaoio-modal-card .modal-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold-light, #F5D77F);
}

.zaoio-modal-card .modal-header .btn-close-modal {
  position: absolute;
  top: 0;
  right: 0;
}

.zaoio-modal-card .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(216, 174, 98, 0.2);
}

.btn-modal-primary {
  background: linear-gradient(135deg, var(--gold-primary), #B4863E);
  color: #07131F;
  border: 1px solid #F5D77F;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(216, 174, 98, 0.35);
  transition: all 0.2s ease;
}

.btn-modal-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 18px rgba(216, 174, 98, 0.5);
  transform: translateY(-1px);
}

.btn-modal-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-modal-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFF;
  border-color: var(--gold-light);
}

/* Modal de Ajuste de Comissão */
.commission-modal-card {
  max-width: 440px;
  background: #0E1D2B;
  border: 1px solid var(--gold-primary);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  padding: 24px;
  color: #ECEFF4;
}

.commission-input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0;
}

.commission-input-group .currency-prefix {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold-light);
}

.input-custom-commission {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  text-align: center;
  width: 140px;
  background: rgba(7, 19, 31, 0.95);
  border: 1.5px solid var(--gold-primary);
  border-radius: 8px;
  color: #FFF;
  padding: 6px 10px;
  outline: none;
}

.commission-quick-pills {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.btn-quick-pill {
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.35);
  color: var(--gold-light);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-quick-pill.active,
.btn-quick-pill:hover {
  background: var(--gold-primary);
  color: #07131F;
  border-color: #F5D77F;
  font-weight: 800;
}

.field-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 10px;
}

.lock-commission-tag {
  font-size: 0.7rem;
  color: #5CA9D6;
  margin-right: 4px;
}

.badge-vault {
  background: rgba(39, 174, 96, 0.15);
  border: 1px solid rgba(39, 174, 96, 0.5);
  color: #2ECC71;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-family: var(--font-display);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   PUXADORES FIXOS DE BORDA (RETRATIBILIDADE BI-DIRECIONAL PERFEITA)
   ========================================================================== */
.drawer-edge-toggle {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 850 !important;
  background: rgba(14, 29, 43, 0.94);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 10px 8px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.75);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
}

.drawer-edge-toggle:hover {
  background: rgba(22, 45, 68, 0.98);
  box-shadow: 0 0 16px rgba(216, 174, 98, 0.5);
  transform: translateY(-50%) scale(1.05) !important;
}

.drawer-edge-toggle.left {
  left: 0 !important;
  border-left: none;
  border-radius: 0 10px 10px 0;
}

.drawer-edge-toggle.right {
  right: 0 !important;
  border-right: none;
  border-radius: 10px 0 0 10px;
}

.eyebrow-title-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-collapse-drawer-top {
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.35);
  color: var(--gold-primary);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-collapse-drawer-top:hover {
  background: rgba(216, 174, 98, 0.28);
  border-color: var(--gold-primary);
  transform: scale(1.05);
}

.pane-history-cycles {
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), width 0.3s cubic-bezier(0.2, 1, 0.3, 1), padding 0.3s;
}

.pane-history-cycles.collapsed {
  transform: translateX(-100%);
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: none;
}

.pane-reading-map.collapsed {
  transform: translateX(100%);
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-left: none;
}



.btn-tile-chat-deepen {
  margin-top: 8px;
  background: rgba(7, 19, 31, 0.7);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--gold-light);
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font-serif);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-tile-chat-deepen:hover {
  border-color: var(--gold-primary);
  background: rgba(14, 29, 43, 0.9);
}

/* BÚSSOLA DE ROTAS AO FIM DO ACONSELHAMENTO */
.compass-deepening-section {
  margin-top: 14px;
  background: rgba(7, 19, 31, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compass-section-header .compass-badge {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--gold-primary);
  letter-spacing: 0.5px;
}

.compass-section-header small {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.compass-routes-bar.inline-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.suggested-questions-card {
  background: rgba(14, 29, 43, 0.7);
  border-left: 3px solid var(--gold-primary);
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
}

.card-hint {
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: var(--gold-light);
  display: block;
  margin-bottom: 6px;
}

.suggested-questions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.suggested-q-chip {
  background: rgba(10, 22, 34, 0.8);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-serif);
  font-size: 0.76rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s;
}

.suggested-q-chip:hover {
  border-color: var(--gold-primary);
  background: rgba(18, 36, 54, 0.95);
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.25);
}

.suggested-q-chip .chip-action {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--gold-primary);
  margin-left: 8px;
}

/* CÂMERA DO CRIADOR & MODO LIVE OBS */
.scene-camera-cutout {
  width: 100%;
  height: 200px;
  border: 2px dashed rgba(216, 174, 98, 0.45);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.camera-cutout-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: var(--gold-light);
}

.camera-cutout-inner .cam-icon {
  font-size: 1.5rem;
}

.camera-cutout-inner .cam-text {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
}

.camera-cutout-inner small {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.btn-toggle-obs-transparent {
  background: rgba(92, 169, 214, 0.2);
  border: 1px solid #5CA9D6;
  color: #5CA9D6;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-toggle-obs-transparent.active {
  background: #5CA9D6;
  color: #07131F;
}

.live-public-scene-overlay.obs-transparent {
  background: transparent !important;
}

.live-public-scene-overlay.obs-transparent .scene-916-container {
  background: transparent !important;
  box-shadow: none !important;
}

.live-public-scene-overlay.obs-transparent .scene-camera-cutout {
  background: transparent !important;
  border-color: transparent !important;
}

.live-public-scene-overlay.obs-transparent .camera-cutout-inner {
  display: none !important;
}

/* MODAL LEITURA INTEGRAL LIVE */
.live-full-reading-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.live-full-reading-card {
  width: 680px;
  max-width: 92vw;
  max-height: 88vh;
  background: #0B1724;
  border: 1.5px solid var(--gold-primary);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
}

.live-full-reading-body {
  padding: 20px;
  overflow-y: auto;
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 0.86rem;
  line-height: 1.6;
}

.live-actions-row-extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.live-actions-row-extra .btn-live-control {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.76rem;
}

.btn-live-control.audio-btn {
  background: rgba(216, 174, 98, 0.18);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
}

.btn-live-control.full-btn {
  background: rgba(92, 169, 214, 0.18);
  border: 1px solid #5CA9D6;
  color: #5CA9D6;
}

/* =========================================================================
   PÁGINA DE ENTRADA DO CLIENTE & ACOLHIMENTO DE CAMPANHA (#clientLandingModal)
   ========================================================================= */
.zaoio-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 10, 18, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  overflow-y: scroll !important;
  padding: 30px 16px;
  box-sizing: border-box;
}

.landing-modal-card {
  max-width: 860px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto !important;
  margin: auto;
  background: radial-gradient(circle at 50% 10%, #0E1D2B 0%, #060F18 100%);
  border: 2px solid var(--gold-primary);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(216, 174, 98, 0.25);
  padding: 28px 32px;
  color: #ECEFF4;
  box-sizing: border-box;
  animation: fadeInModal 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-primary) rgba(7, 19, 31, 0.9);
}

.landing-modal-card::-webkit-scrollbar {
  width: 8px;
}
.landing-modal-card::-webkit-scrollbar-track {
  background: rgba(7, 19, 31, 0.9);
  border-radius: 4px;
}
.landing-modal-card::-webkit-scrollbar-thumb {
  background: var(--gold-primary);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(216, 174, 98, 0.6);
}

.landing-header {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(216, 174, 98, 0.25);
  padding-bottom: 18px;
  position: relative;
}

.campaign-welcome-tag {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--gold-primary);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.landing-title-box h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #FFF;
  margin: 0 0 4px 0;
}

.landing-title-box p {
  font-size: 0.85rem;
  color: #A0B2C6;
  margin: 0;
}

.consulente-id-card {
  background: rgba(14, 29, 43, 0.75);
  border: 1.5px solid rgba(216, 174, 98, 0.4);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.code-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: var(--gold-light);
  display: block;
  margin-bottom: 4px;
}

.code-value-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.demo-code-text {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--gold-primary);
  letter-spacing: 3px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 16px;
  border-radius: 8px;
  border: 1px dashed rgba(216, 174, 98, 0.5);
}

.btn-copy-code {
  background: rgba(216, 174, 98, 0.2);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-copy-code:hover {
  background: var(--gold-primary);
  color: #040A12;
}

.code-tip {
  display: block;
  font-size: 0.72rem;
  color: #8C9BAE;
  margin-top: 6px;
}

.promo-credits-chip {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.25), rgba(92, 169, 214, 0.25));
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}

.journey-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.journey-card {
  background: rgba(7, 19, 31, 0.8);
  border: 1.5px solid rgba(216, 174, 98, 0.3);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s, border-color 0.2s;
}
.journey-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-primary);
}

.journey-card.highlight {
  border-color: #5CA9D6;
  background: radial-gradient(circle at 50% 0%, rgba(92, 169, 214, 0.12) 0%, rgba(7, 19, 31, 0.85) 100%);
}

.journey-badge {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold-primary);
  display: inline-block;
  margin-bottom: 6px;
}
.journey-badge.live {
  color: #5CA9D6;
}

.journey-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #FFF;
  margin: 0 0 6px 0;
}

.journey-card p {
  font-size: 0.8rem;
  color: #A0B2C6;
  line-height: 1.4;
  margin: 0 0 14px 0;
}

.journey-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}
.journey-features li {
  font-size: 0.78rem;
  color: #D3DEE9;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-start-journey-solo {
  background: linear-gradient(135deg, #D8AE62 0%, #B46E47 100%);
  border: none;
  color: #07131F;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.2s;
}
.btn-start-journey-solo:hover {
  opacity: 0.92;
}

.live-question-form label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 4px;
}

.landing-textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(92, 169, 214, 0.4);
  border-radius: 8px;
  color: #FFF;
  font-size: 0.8rem;
  padding: 8px 10px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.consent-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 14px;
}
.consent-checkbox-row span {
  font-size: 0.72rem;
  color: #A0B2C6;
  line-height: 1.3;
}

.btn-start-journey-live {
  background: linear-gradient(135deg, #2D6898 0%, #153B5B 100%);
  border: 1px solid #5CA9D6;
  color: #FFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
}
.btn-start-journey-live:hover {
  background: #5CA9D6;
  color: #040A12;
}

/* =========================================================================
   MODAL DE CHECKOUT MULTI-MÉTODOS (#checkoutModal)
   ========================================================================= */
.checkout-modal-card {
  max-width: 860px;
  width: 95vw;
  background: radial-gradient(circle at 50% 10%, #0E1D2B 0%, #050D15 100%);
  border: 2px solid var(--gold-primary);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(216, 174, 98, 0.25);
  padding: 28px;
  color: #ECEFF4;
  box-sizing: border-box;
  animation: fadeInModal 0.3s ease;
}

.checkout-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(216, 174, 98, 0.25);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.checkout-secure-badge {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 2px;
  color: #5CA9D6;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.checkout-header h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #FFF;
  margin: 0 0 4px 0;
}

.checkout-header p {
  font-size: 0.82rem;
  color: #A0B2C6;
  margin: 0;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 24px;
}
@media (max-width: 820px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
}

.checkout-order-summary {
  background: rgba(14, 29, 43, 0.7);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-product-box {
  display: flex;
  gap: 12px;
  align-items: center;
}
.product-icon {
  width: 42px;
  height: 42px;
  background: rgba(216, 174, 98, 0.2);
  border: 1px solid var(--gold-primary);
  color: var(--gold-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
}
.product-info h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #FFF;
  margin: 0 0 2px 0;
}
.product-info p {
  font-size: 0.72rem;
  color: #8C9BAE;
  margin: 0;
  line-height: 1.3;
}

.summary-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #D3DEE9;
}
.pix-price-highlight {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-primary);
}

.summary-divider {
  height: 1px;
  background: rgba(216, 174, 98, 0.2);
  margin: 4px 0;
}

.summary-perks {
  list-style: none;
  padding: 0;
  margin: 0;
}
.summary-perks li {
  font-size: 0.72rem;
  color: #A0B2C6;
  padding: 4px 0;
  line-height: 1.3;
}

.checkout-payment-box {
  display: flex;
  flex-direction: column;
}

.payment-method-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid rgba(216, 174, 98, 0.2);
  margin-bottom: 18px;
}

.pay-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8C9BAE;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.pay-tab:hover {
  color: #FFF;
}
.pay-tab.active {
  color: var(--gold-primary);
  border-bottom-color: var(--gold-primary);
}

.payment-tab-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pix-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  border: 1px dashed rgba(216, 174, 98, 0.35);
}

.pix-amount-badge {
  font-size: 0.84rem;
  color: #A0B2C6;
}
.pix-amount-badge strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-primary);
}

.copia-cola-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.pix-input-code {
  flex: 1;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 6px;
  color: #5CA9D6;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  padding: 8px 10px;
  outline: none;
}

.btn-copy-pix {
  background: rgba(216, 174, 98, 0.2);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-copy-pix:hover {
  background: var(--gold-primary);
  color: #040A12;
}

.pix-status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  background: rgba(92, 169, 214, 0.1);
  border-radius: 8px;
  color: #5CA9D6;
  font-size: 0.76rem;
}

.status-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #5CA9D6;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.btn-confirm-pix-manual {
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-confirm-pix-manual:hover {
  background: var(--gold-primary);
  color: #040A12;
}

/* Formulário do Cartão */
.card-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.card-form-grid .form-group.full-w {
  width: 100%;
}
.card-form-grid .form-group.half-w {
  width: calc(50% - 6px);
}

.card-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.card-input-wrapper .gov-input {
  padding-right: 40px;
}
.card-brand-icon {
  position: absolute;
  right: 12px;
  font-size: 1.1rem;
}

.card-security-notice {
  font-size: 0.72rem;
  color: #8C9BAE;
  margin-top: 4px;
}

.btn-submit-card-pay {
  background: linear-gradient(135deg, #D8AE62 0%, #B46E47 100%);
  border: none;
  color: #07131F;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  transition: opacity 0.2s;
}
.btn-submit-card-pay:hover {
  opacity: 0.92;
}

/* Carteira Google (Google Pay) */
.gpay-showcase {
  text-align: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Marca Oficial de Aceitação Google Pay (Diretrizes Google Pay Brand Guidelines) */
.pay-tab[data-tab="gpay"] {
  font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif) !important;
  text-transform: none !important;
  font-variant: normal !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

.pay-tab[data-tab="gpay"] > span:last-child {
  font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif) !important;
  text-transform: none !important;
  font-variant: normal !important;
  white-space: nowrap !important;
  font-size: 0.86rem;
  font-weight: 600;
}

.gpay-tab-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 9999px;
  padding: 0;
  margin-right: 6px;
  line-height: 0;
  flex-shrink: 0;
}

.gpay-tab-mark svg {
  display: block;
  border-radius: 9999px;
}

.gpay-official-acceptance-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 9999px;
  padding: 0;
  margin: 6px 0 4px;
  line-height: 0;
}

.gpay-official-acceptance-mark svg {
  display: block;
  border-radius: 9999px;
}

.gpay-showcase h3 {
  font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
  text-transform: none !important;
  font-variant: normal !important;
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFF;
  margin: 0;
  text-align: center;
}
.gpay-showcase p {
  font-size: 0.8rem;
  color: #A0B2C6;
  max-width: 420px;
  margin: 0;
  line-height: 1.4;
  text-align: center;
}

.gpay-button-container {
  width: 100%;
  max-width: 300px;
  min-height: 48px;
  margin: 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gpay-button-container > div,
.gpay-button-container gpay-button {
  width: 100%;
}

.btn-official-gpay {
  width: 100%;
  min-width: 240px;
  height: 48px;
  background: #FFFFFF;
  border: 1px solid #747775;
  color: #3C4043;
  font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 0 24px;
  border-radius: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-official-gpay:hover {
  background: #F8F9FA;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.gpay-btn-text {
  color: #3C4043;
  font-weight: 500;
  line-height: 1;
}

.gpay-benefits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.74rem;
  color: #8C9BAE;
  margin-top: 6px;
}

/* =========================================================================
   CRITÉRIOS DE CRÉDITOS & PROTOCOLO DO SISTEMA (#creditsCriteriaModal)
   ========================================================================= */
.btn-checkout-view-criteria {
  width: 100%;
  margin-top: 14px;
  background: rgba(216, 174, 98, 0.08);
  border: 1px dashed rgba(216, 174, 98, 0.4);
  color: #E2C285;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-checkout-view-criteria:hover {
  background: rgba(216, 174, 98, 0.18);
  border-color: #D8AE62;
  color: #FFF;
  transform: translateY(-1px);
}

.btn-popover-criteria {
  width: 100%;
  background: rgba(92, 169, 214, 0.12);
  border: 1px solid rgba(92, 169, 214, 0.35);
  color: #8FD5FF;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.btn-popover-criteria:hover {
  background: rgba(92, 169, 214, 0.22);
  border-color: #5CA9D6;
  color: #FFF;
}

.credits-criteria-card {
  max-width: 880px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 10%, #0D1C2B 0%, #050B12 100%);
  border: 2px solid var(--gold-primary);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(216, 174, 98, 0.25);
  padding: 28px;
  color: #ECEFF4;
  box-sizing: border-box;
  animation: fadeInModal 0.3s ease;
}

.criteria-table-wrap {
  margin: 18px 0 24px 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(216, 174, 98, 0.25);
  background: rgba(4, 10, 18, 0.7);
}

.criteria-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.86rem;
}

.criteria-table thead {
  background: rgba(216, 174, 98, 0.12);
}

.criteria-table th {
  padding: 12px 16px;
  color: #D8AE62;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(216, 174, 98, 0.2);
}

.criteria-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
  line-height: 1.45;
}

.criteria-table td strong {
  display: block;
  color: #FFF;
  font-size: 0.92rem;
  margin-bottom: 2px;
}

.criteria-table td small {
  color: #8C9BAE;
  font-size: 0.75rem;
}

.criteria-table td em {
  display: block;
  color: #A0B2C6;
  font-style: italic;
  font-size: 0.78rem;
  margin-top: 4px;
}

.credit-pill-cost {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid #D8AE62;
  border-radius: 16px;
  color: #F8DA8D;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.credit-pill-bonus {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(72, 187, 120, 0.18);
  border: 1px solid #48BB78;
  border-radius: 16px;
  color: #68D391;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.credit-pill-recharge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(92, 169, 214, 0.2);
  border: 1px solid #5CA9D6;
  border-radius: 16px;
  color: #A6D8FF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
}

.criteria-protocol-rules {
  background: rgba(92, 169, 214, 0.06);
  border: 1px solid rgba(92, 169, 214, 0.25);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.criteria-protocol-rules h4 {
  margin: 0 0 10px 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: #5CA9D6;
}

.criteria-rules-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.82rem;
  color: #C0CFDF;
  line-height: 1.55;
}

.criteria-rules-list li {
  margin-bottom: 6px;
}

.criteria-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(216, 174, 98, 0.2);
}

.btn-criteria-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #A0B2C6;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.86rem;
  transition: all 0.2s ease;
}
.btn-criteria-close:hover {
  border-color: #FFF;
  color: #FFF;
}

.btn-criteria-buy {
  background: linear-gradient(135deg, #D8AE62 0%, #B46E47 100%);
  border: none;
  color: #07131F;
  padding: 12px 24px;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 4px 18px rgba(216, 174, 98, 0.35);
  transition: all 0.2s ease;
}
.btn-criteria-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(216, 174, 98, 0.5);
  color: #000;
}

/* =========================================================================
   DOCK DE HOMOLOGAÇÃO / SIMULADOR DE PERFIS (#devRoleDock)
   ========================================================================= */
.dev-role-dock {
  position: fixed;
  bottom: 12px;
  right: 16px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.btn-dock-toggle {
  background: rgba(14, 29, 43, 0.92);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 7px 14px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
  transition: all 0.2s;
}
.btn-dock-toggle:hover {
  background: var(--gold-primary);
  color: #040A12;
}

.dock-flask {
  font-size: 0.9rem;
}

.dock-menu {
  background: #0B1724;
  border: 1px solid var(--gold-primary);
  border-radius: 12px;
  padding: 14px;
  width: 310px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeInModal 0.2s ease;
}

.dock-hint {
  font-size: 0.72rem;
  color: #8C9BAE;
  line-height: 1.3;
}

.dock-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-dock-role {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(216, 174, 98, 0.25);
  color: #ECEFF4;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-dock-role:hover {
  background: rgba(216, 174, 98, 0.15);
  border-color: var(--gold-primary);
}
.btn-dock-role.active {
  background: rgba(216, 174, 98, 0.25);
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  font-weight: 700;
}

.dock-subactions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px;
}

.btn-dock-action {
  background: rgba(92, 169, 214, 0.12);
  border: 1px solid rgba(92, 169, 214, 0.4);
  color: #5CA9D6;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-dock-action:hover {
  background: rgba(92, 169, 214, 0.25);
  color: #FFF;
}

/* Título de Cabeçalho do Cliente */
.client-header-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sacred-motto {
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 3px;
  color: var(--gold-light);
  opacity: 0.85;
}

/* Indicador de Perfil Ativo */
.profile-role-badge {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 1px;
}
.profile-role-badge.live {
  background: rgba(180, 71, 71, 0.25);
  border: 1px solid #B44747;
  color: #FF8080;
}
.profile-role-badge.referrer {
  background: rgba(92, 169, 214, 0.2);
  border: 1px solid #5CA9D6;
  color: #5CA9D6;
}
.profile-role-badge.admin {
  background: rgba(216, 174, 98, 0.25);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
}

/* =========================================================================
   SELETOR DE PACOTES DE CRÉDITOS NO CHECKOUT
   ========================================================================= */
.checkout-package-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}
.package-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(4, 10, 18, 0.65);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.package-card:hover {
  border-color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.08);
}
.package-card.active {
  border-color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.16);
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.18);
}
.package-card input[type="radio"] {
  accent-color: var(--gold-primary);
  margin-top: 3px;
  cursor: pointer;
}
.package-info {
  flex: 1;
}
.pkg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.pkg-header strong {
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: #FFF;
}
.pkg-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(216, 174, 98, 0.25);
  color: var(--gold-light);
  border: 1px solid var(--gold-primary);
  letter-spacing: 0.5px;
}
.pkg-tag.test-tag {
  background: rgba(92, 169, 214, 0.2);
  color: #5CA9D6;
  border-color: #5CA9D6;
}
.package-info p {
  font-size: 0.70rem;
  color: #8C9BAE;
  margin: 0 0 4px 0;
  line-height: 1.25;
}
.pkg-price {
  font-size: 0.78rem;
  color: #D3DEE9;
}
.pkg-price strong {
  font-family: var(--font-display);
  color: var(--gold-primary);
  font-size: 0.95rem;
}
.pkg-sub {
  font-size: 0.68rem;
  color: #8C9BAE;
  margin-left: 4px;
}
.pix-qr-img {
  max-width: 150px;
  max-height: 150px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.25);
  background: #FFF;
  padding: 6px;
  display: block;
}

/* ==========================================================================
   PORTAL DE AUTENTICAÇÃO GOOGLE & ACOLHIMENTO
   ========================================================================== */
.google-auth-welcome-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(14, 29, 43, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.4);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.auth-welcome-left .auth-box-title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.auth-welcome-left .auth-box-sub {
  margin: 0;
  font-size: 0.74rem;
  color: #A0B2C6;
  line-height: 1.3;
}

.auth-welcome-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-guest-continue {
  background: transparent;
  border: 1px solid rgba(180, 110, 71, 0.4);
  color: var(--gold-light);
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-guest-continue:hover {
  border-color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.15);
  color: #FFF;
}

/* Botões de Aprofundamento dos Capítulos do Mapa de Tiragem */
.btn-tile-chat-deepen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.35);
  color: var(--gold-light);
  font-size: 0.74rem;
  font-family: var(--font-display);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tile-chat-deepen:hover {
  background: rgba(216, 174, 98, 0.28);
  border-color: var(--gold-primary);
  color: #FFF;
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.3);
  transform: translateY(-1px);
}

/* Botão Assinar Agora na Barra Direita */
.btn-show-conversion-modal {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.35), rgba(180, 110, 71, 0.45));
  border: 1px solid var(--gold-primary);
  color: #FFF;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.25);
  animation: pulseGlow 3s infinite alternate;
}

.btn-show-conversion-modal:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.6), rgba(180, 110, 71, 0.7));
  box-shadow: 0 0 20px rgba(216, 174, 98, 0.5);
  transform: translateY(-1px);
}

/* =========================================================================
   7. REFORMULAÇÃO ARQUITETURAL: 9 CAMADAS CANÔNICAS & DOSSIÊ ORACULAR
   ========================================================================= */

/* Badges e Cabeçalhos de Domínio */
.reading-chapter-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg, rgba(216, 174, 98, 0.22), rgba(92, 169, 214, 0.12));
  border-left: 3px solid var(--gold-primary);
  padding: 4px 10px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-light);
  text-transform: uppercase;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.reading-lead-paragraph {
  font-family: var(--font-serif);
  font-size: 0.83rem;
  line-height: 1.55;
  color: #E2E8F0;
  margin-bottom: 12px;
  font-style: italic;
  padding-left: 6px;
  border-left: 2px solid rgba(216, 174, 98, 0.35);
}

/* Blocos de Casas Herméticas */
.reading-house-block {
  background: rgba(9, 21, 35, 0.7);
  border: 1px solid rgba(216, 174, 98, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.reading-house-block:hover {
  background: rgba(14, 29, 45, 0.85);
  border-color: rgba(216, 174, 98, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.reading-house-block.focus-node {
  background: linear-gradient(135deg, rgba(9, 21, 35, 0.88), rgba(18, 38, 60, 0.88));
  border-color: rgba(92, 169, 214, 0.55);
  box-shadow: 0 0 14px rgba(92, 169, 214, 0.15);
}

.reading-house-block.central-intervention {
  background: linear-gradient(135deg, rgba(9, 21, 35, 0.9), rgba(50, 20, 24, 0.9));
  border-color: rgba(224, 86, 96, 0.55);
  box-shadow: 0 0 14px rgba(224, 86, 96, 0.18);
}

.house-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.house-num-tag {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.05em;
}

.house-title-tag {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.reading-house-block p {
  font-family: var(--font-serif);
  font-size: 0.81rem;
  line-height: 1.55;
  color: #CBD5E1;
  margin: 0;
}

.reading-transition-note {
  font-family: var(--font-serif);
  font-size: 0.77rem;
  font-style: italic;
  color: var(--gold-dim);
  background: rgba(216, 174, 98, 0.06);
  border-left: 2px dashed var(--gold-dim);
  padding: 6px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  border-radius: 0 6px 6px 0;
  line-height: 1.45;
}

/* Espinha Dorsal de Manifestação (Eixo 3 -> 8 -> 13 -> 18) */
.reading-spine-manifestation-box {
  background: linear-gradient(135deg, rgba(14, 28, 48, 0.92), rgba(7, 18, 29, 0.96));
  border: 1.5px solid var(--gold-primary);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 0 16px rgba(216, 174, 98, 0.2);
}

.reading-spine-manifestation-box h4 {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--gold-light);
  margin-bottom: 6px;
}

/* Casas Prioritárias de Ação (1, 8, 13 e 20) */
.reading-priority-house-card {
  background: rgba(9, 21, 35, 0.8);
  border: 1px solid rgba(216, 174, 98, 0.28);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 8px;
}

.reading-priority-house-card strong {
  font-family: var(--font-display);
  font-size: 0.76rem;
  color: var(--gold-light);
}

/* Chips Interativos de Cartas (<span class="card-chip">) */
.card-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.22), rgba(180, 110, 71, 0.26));
  border: 1px solid rgba(216, 174, 98, 0.5);
  color: #F8E7C9;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  vertical-align: baseline;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  user-select: none;
}

.card-chip::before {
  content: "✦";
  font-size: 0.6rem;
  color: var(--gold-primary);
  opacity: 0.85;
}

.card-chip:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.45), rgba(180, 110, 71, 0.55));
  border-color: #FFF;
  color: #FFF;
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.6);
  transform: translateY(-1px) scale(1.02);
}

.card-chip:active {
  transform: translateY(0) scale(0.98);
}

/* Pulso de Foco no Altar quando Clicado no Chip */
@keyframes chipPulseGlow {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(216, 174, 98, 0.8); }
  50% { transform: scale(1.06); box-shadow: 0 0 28px 8px rgba(216, 174, 98, 0.95); }
  100% { transform: scale(1); box-shadow: 0 0 12px 2px rgba(216, 174, 98, 0.4); }
}

.card-slot-v2.chip-selected-pulse {
  animation: chipPulseGlow 1.4s ease-out;
  border-color: #FFF !important;
  z-index: 100 !important;
}

/* Acordeom nos Capítulos e Suporte a Modo Títulos */
.chapter-tile {
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.chapter-tile .tile-header {
  position: relative;
  cursor: pointer;
  padding-right: 20px;
}

.chapter-tile .tile-header::after {
  content: "▾";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--gold-primary);
  transition: transform 0.2s ease;
}

.chapter-tile.expanded .tile-header::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Quando expandido, exibe o conteúdo mesmo no Modo Títulos */
.pane-reading-map.mode-titles .chapter-tile.expanded .tile-content {
  display: block !important;
  animation: fadeInTileContent 0.25s ease-out;
}

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

.tile-reading-body {
  margin-top: 6px;
  margin-bottom: 8px;
}

/* =========================================================================
   8. MODAL DE DOSSIÊ ORACULAR INTEGRAL (LEITURA CONTÍNUA ESTILO LIVRO)
   ========================================================================= */
.full-reading-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.modal-backdrop,
.inspection-backdrop,
.deck-modal-backdrop,
.full-reading-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 8, 14, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1;
}

.full-reading-dialog {
  position: relative;
  z-index: 2;
  width: 940px;
  max-width: 95vw;
  height: 88vh;
  max-height: 88vh;
  background: linear-gradient(180deg, #091523 0%, #060E18 100%);
  border: 1.5px solid var(--gold-primary);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 30px rgba(216, 174, 98, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.full-reading-header {
  padding: 18px 24px;
  background: rgba(7, 18, 29, 0.96);
  border-bottom: 1px solid rgba(216, 174, 98, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.full-reading-header-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dossier-emblem-tag {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-primary);
}

.full-reading-header h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #FFF;
  margin: 0;
  letter-spacing: 0.03em;
}

.dossier-sub-meta {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  color: var(--text-muted);
}

.full-reading-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-dossier-action {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-dossier-action:hover {
  background: rgba(216, 174, 98, 0.28);
  border-color: var(--gold-light);
  color: #FFF;
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.35);
  transform: translateY(-1px);
}

.full-reading-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px 40px;
  color: #E2E8F0;
  font-family: var(--font-serif);
  font-size: 0.94rem;
  line-height: 1.8;
  background: radial-gradient(circle at top center, rgba(14, 30, 50, 0.4) 0%, transparent 70%);
}

.full-reading-body::-webkit-scrollbar {
  width: 6px;
}

.full-reading-body::-webkit-scrollbar-thumb {
  background: rgba(216, 174, 98, 0.35);
  border-radius: 6px;
}

.full-reading-body h1 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--gold-light);
  text-align: center;
  margin-top: 0;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.full-reading-body h2 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--gold-primary);
  margin-top: 28px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  border-left: 3px solid var(--gold-primary);
  padding-left: 12px;
}

.full-reading-body h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: #FFF;
  margin-top: 20px;
  margin-bottom: 8px;
}

.full-reading-body p {
  margin-bottom: 14px;
  text-align: justify;
}

.full-reading-body blockquote {
  background: rgba(216, 174, 98, 0.08);
  border-left: 3px solid var(--gold-primary);
  padding: 14px 20px;
  margin: 18px 0;
  font-style: italic;
  border-radius: 0 8px 8px 0;
  color: #F8E7C9;
}

.full-reading-body hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 174, 98, 0.4), transparent);
  margin: 26px 0;
}

.dossier-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.dossier-empty-icon {
  font-size: 3rem;
  margin-bottom: 14px;
  opacity: 0.7;
}

.dossier-empty-state h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold-light);
  margin-bottom: 8px;
}

.dossier-empty-state p {
  max-width: 480px;
  font-family: var(--font-serif);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.full-reading-footer {
  padding: 14px 24px;
  background: rgba(7, 18, 29, 0.96);
  border-top: 1px solid rgba(216, 174, 98, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dossier-footer-seal {
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--gold-dim);
  letter-spacing: 0.05em;
}

.btn-dossier-footer-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFF;
  font-family: var(--font-display);
  font-size: 0.76rem;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-dossier-footer-close:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #FFF;
}

/* Impressão Limpa e Editorial do Dossiê */
@media print {
  body * {
    visibility: hidden;
  }
  .full-reading-modal, .full-reading-dialog, .full-reading-body, .full-reading-body * {
    visibility: visible;
  }
  .full-reading-modal {
    position: absolute;
    inset: 0;
    padding: 0;
    background: #FFF;
  }
  .full-reading-dialog {
    width: 100%;
    height: auto;
    max-height: none;
    border: none;
    box-shadow: none;
    background: #FFF;
  }
  .full-reading-header-actions, .full-reading-footer, .btn-close-modal {
    display: none !important;
  }
  .full-reading-body {
    color: #111;
    background: #FFF;
    padding: 20px;
    font-size: 11pt;
  }
  .full-reading-body h1, .full-reading-body h2, .full-reading-body h3 {
    color: #000;
  }
}

/* =========================================================================
   BOTÃO DE REFINAMENTO OPCIONAL DA PERGUNTA COM O ORÁCULO
   ========================================================================= */
.btn-refine-question-opt {
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: var(--gold-light);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.btn-refine-question-opt:hover {
  background: rgba(216, 174, 98, 0.25);
  border-color: var(--gold-primary);
  color: #FFF;
  box-shadow: 0 0 14px rgba(216, 174, 98, 0.35);
  transform: translateY(-1px);
}

/* =========================================================================
   DESTAQUE POR FRASE NO ALTAR & APÊNDICE TÉCNICO (BLUEPRINT v3.0)
   ========================================================================= */
.card-slot-v2.phrase-highlight {
  box-shadow: 0 0 18px 4px var(--gold-primary), inset 0 0 10px var(--cyan-accent) !important;
  border-color: var(--gold-primary) !important;
  transform: translateY(-4px) scale(1.04) !important;
  transition: all 0.22s ease !important;
  z-index: 25 !important;
}

.tile-reading-body:hover {
  background: rgba(216, 174, 98, 0.04);
  border-radius: 6px;
  transition: background 0.2s ease;
}

#zaoioTechnicalAppendix {
  transition: all 0.3s ease;
}

#btnToggleAppendix:hover {
  background: rgba(216, 174, 98, 0.1) !important;
  color: #FFF !important;
}

/* =========================================================================
   ESTILOS ORACULARES DEFINITIVOS: VEREDITO, 4 ARCOS & MAPA DAS 20 LÂMINAS
   ========================================================================= */

/* Veredito Frontal da Mesa */
.veredito-frontal-card {
  background: linear-gradient(135deg, rgba(20, 24, 33, 0.95), rgba(12, 16, 24, 0.98));
  border: 1px solid rgba(216, 174, 98, 0.5);
  border-left: 4px solid var(--gold-primary);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

.veredito-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.veredito-p {
  color: #F0F4F8;
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0 0 12px 0;
  text-align: justify;
}

.veredito-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(216, 174, 98, 0.2);
}

.veredito-meta-item {
  font-size: 0.8rem;
  line-height: 1.4;
}

.veredito-meta-item strong {
  color: var(--gold-light);
}

.veredito-meta-item.tendencia {
  color: #92DCFF;
  background: rgba(0, 229, 255, 0.08);
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 2px solid var(--cyan-accent);
}

.veredito-meta-item.condicao {
  color: #E2E8F0;
  background: rgba(216, 174, 98, 0.08);
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 2px solid var(--gold-primary);
}

.veredito-meta-item.livrearbitrio {
  color: #CBD5E1;
  font-style: italic;
  padding: 4px 8px;
}

/* 4 Arcos de Aconselhamento Contextual */
.arco-tile {
  background: rgba(14, 20, 29, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.arco-tile:hover {
  border-color: rgba(216, 174, 98, 0.35);
  background: rgba(18, 25, 36, 0.85);
}

.arco-header {
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.arco-header h5 {
  margin: 0;
  font-size: 0.86rem;
  color: var(--gold-light);
  font-family: var(--font-display);
}

.arco-content {
  padding: 12px 14px;
}

.arco-narrativa-p {
  font-size: 0.84rem;
  line-height: 1.6;
  color: #DDE5ED;
  text-align: justify;
  margin: 0 0 12px 0;
}

.arco-perguntas-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(216, 174, 98, 0.15);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arco-pergunta-row {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.arco-pergunta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.arco-pergunta-local {
  font-size: 0.76rem;
  font-style: italic;
  color: #94A3B8;
  margin-bottom: 4px;
}

.arco-pergunta-resposta {
  font-size: 0.82rem;
  color: #F1F5F9;
  line-height: 1.5;
}

/* Casas Prioritárias de Intervenção */
.prioritarias-box {
  background: linear-gradient(135deg, rgba(30, 20, 10, 0.6), rgba(15, 20, 28, 0.8));
  border: 1px solid var(--gold-primary);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0;
}

.prioritarias-title {
  color: var(--gold-light);
  font-size: 0.84rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.prioritarias-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.prioritaria-item {
  font-size: 0.8rem;
  color: #E2E8F0;
  line-height: 1.4;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

/* Síntese Soberana de Conduta */
.sintese-soberana-box {
  background: rgba(10, 22, 35, 0.9);
  border: 1px solid var(--cyan-accent);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0;
}

.sintese-soberana-title {
  color: var(--cyan-accent);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sintese-soberana-p {
  color: #FAF5E8;
  font-size: 0.84rem;
  line-height: 1.6;
  margin: 0;
  text-align: justify;
}

/* Mapa das 20 Lâminas na Mesa */
.mapa20-accordion-card {
  margin-top: 18px;
  border: 1px solid rgba(216, 174, 98, 0.35);
  border-radius: 8px;
  background: rgba(9, 14, 22, 0.85);
  overflow: hidden;
}

.mapa20-toggle-btn {
  padding: 12px 16px;
  background: rgba(216, 174, 98, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: var(--gold-light);
  font-size: 0.84rem;
  font-weight: 600;
  font-family: var(--font-display);
}

.mapa20-toggle-btn:hover {
  background: rgba(216, 174, 98, 0.16);
}

.mapa20-content {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  border-top: 1px solid rgba(216, 174, 98, 0.2);
}

.mapa20-card-item {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mapa20-card-item:hover {
  border-color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.mapa20-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.mapa20-card-casa {
  font-size: 0.72rem;
  color: var(--gold-primary);
  font-weight: 700;
}

.mapa20-card-polaridade {
  font-size: 0.68rem;
  color: #94A3B8;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.mapa20-card-fala {
  font-size: 0.75rem;
  color: #CBD5E1;
  line-height: 1.4;
  margin-bottom: 4px;
}

.mapa20-card-fala strong {
  color: #92DCFF;
}

/* ==========================================================================
   SANTUÁRIO DA LEITURA ORACULAR (SUPER NARRATIVA & AS 3 ROTAS DE OURO)
   ========================================================================== */

/* 1. Card de Veredito & Celebração / Acolhimento */
.veredito-celebracao-card {
  background: radial-gradient(circle at top left, rgba(35, 27, 18, 0.95), rgba(12, 16, 24, 0.98));
  border: 1px solid rgba(216, 174, 98, 0.55);
  border-left: 5px solid var(--gold-primary);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 16px rgba(216, 174, 98, 0.15);
  position: relative;
  

  min-height: fit-content;}

.veredito-celebracao-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(216, 174, 98, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.veredito-badge-glow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.25), rgba(180, 110, 71, 0.2));
  border: 1px solid rgba(216, 174, 98, 0.6);
  color: #FFF2D1;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.25);

  flex-wrap: wrap;}

.veredito-badge-glow .sparkle {
  color: var(--gold-light);
  animation: pulseGold 2s infinite ease-in-out;
}

.veredito-resposta-hero {
  margin-bottom: 16px;
}

.veredito-resposta-hero h3 {
  color: #FFF;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.veredito-celebracao-p {
  color: #F7FAFC;
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
  text-align: justify;
}

/* 2. O Pergaminho da Super Narrativa Oracular */
.pergaminho-narrativo-card {
  background: linear-gradient(180deg, rgba(16, 22, 34, 0.95) 0%, rgba(9, 13, 20, 0.98) 100%);
  border: 1px solid rgba(216, 174, 98, 0.45);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 22px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.6);
  position: relative;
}

.pergaminho-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(216, 174, 98, 0.25);
  margin-bottom: 18px;
}

.pergaminho-title-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pergaminho-seal {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 8px rgba(216, 174, 98, 0.4));
}

.pergaminho-headings h4 {
  margin: 0;
  font-size: 1.05rem;
  font-family: var(--font-display);
  color: var(--gold-light);
  letter-spacing: 0.05em;
}

.pergaminho-headings small {
  display: block;
  font-size: 0.76rem;
  color: #94A3B8;
  margin-top: 2px;
}

.pergaminho-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-pergaminho-audio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(0, 150, 200, 0.3));
  border: 1px solid var(--cyan-accent);
  color: #E0F7FF;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}

.btn-pergaminho-audio:hover {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(0, 180, 240, 0.45));
  color: #FFF;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.45);
}

.btn-pergaminho-audio.playing {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.3), rgba(180, 110, 71, 0.4));
  border-color: var(--gold-light);
  color: #FFF;
  animation: pulseGold 2s infinite ease-in-out;
}

.pergaminho-corpo,
.veredito-orientacao-corpo {
  color: #EDF2F7;
  font-size: 0.94rem;
  line-height: 1.85;
  text-align: justify;
}

.pergaminho-paragrafo {
  margin: 0 0 16px 0;
  position: relative;
  text-indent: 1.5em;
}

.pergaminho-paragrafo:first-of-type {
  text-indent: 0;
}

.pergaminho-paragrafo:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 2.2rem;
  float: left;
  line-height: 0.9;
  margin-right: 8px;
  color: var(--gold-light);
  text-shadow: 0 0 10px rgba(216, 174, 98, 0.5);
}

.narrativa-placeholder {
  padding: 24px;
  text-align: center;
  color: #A0AEC0;
  font-style: italic;
}

/* 3. Resumo Sintético das Combinações ZAOIO */
.zaoio-combinations-section {
  margin-bottom: 24px;
}

.zaoio-comb-header {
  margin-bottom: 16px;
  text-align: center;
}

.zaoio-comb-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.09em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.zaoio-comb-subtitle {
  display: block;
  font-size: 0.8rem;
  color: #94A3B8;
  letter-spacing: 0.02em;
}

.zaoio-comb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.zaoio-comb-card {
  background: rgba(14, 20, 30, 0.88);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.zaoio-comb-card:hover {
  transform: translateY(-2px);
}

.zaoio-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.zaoio-card-icon {
  font-size: 1.25rem;
}

.zaoio-card-head h5 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
}

.zaoio-card-body p {
  font-size: 0.84rem;
  line-height: 1.6;
  color: #E2E8F0;
  margin: 0;
  text-align: justify;
}

/* Card 1: Domínios (Azul Safira Místico) */
.zaoio-card-dominios {
  border: 1px solid rgba(99, 179, 237, 0.4);
  border-top: 3px solid #63B3ED;
  background: linear-gradient(180deg, rgba(20, 35, 55, 0.75) 0%, rgba(14, 20, 30, 0.92) 100%);
}
.zaoio-card-dominios h5 { color: #BEE3F8; }
.zaoio-card-dominios:hover {
  border-color: #63B3ED;
  box-shadow: 0 6px 20px rgba(99, 179, 237, 0.25);
}

/* Card 2: Forças em Jogo (Ouro Âmbar) */
.zaoio-card-forcas {
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-top: 3px solid #FFD700;
  background: linear-gradient(180deg, rgba(45, 38, 15, 0.75) 0%, rgba(14, 20, 30, 0.92) 100%);
}
.zaoio-card-forcas h5 { color: #FFEBAA; }
.zaoio-card-forcas:hover {
  border-color: #FFD700;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
}

/* Card 3: Tramas Yin-Yang (Verde Esmeralda Relacional) */
.zaoio-card-tramas {
  border: 1px solid rgba(72, 187, 120, 0.4);
  border-top: 3px solid #48BB78;
  background: linear-gradient(180deg, rgba(15, 42, 28, 0.75) 0%, rgba(14, 20, 30, 0.92) 100%);
}
.zaoio-card-tramas h5 { color: #C6F6D5; }
.zaoio-card-tramas:hover {
  border-color: #48BB78;
  box-shadow: 0 6px 20px rgba(72, 187, 120, 0.25);
}

/* Linha Temporal dos Cinco Eixos */
.zaoio-timeline-card {
  background: linear-gradient(180deg, rgba(28, 22, 45, 0.8) 0%, rgba(14, 20, 30, 0.95) 100%);
  border: 1px solid rgba(183, 148, 244, 0.4);
  border-top: 3px solid #B794F4;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.zaoio-timeline-card h5 { color: #E9D8FD; }

.zaoio-timeline-intro {
  font-size: 0.82rem;
  color: #CBD5E0;
  margin-bottom: 14px;
}

.zaoio-timeline-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.timeline-step {
  background: rgba(10, 14, 22, 0.7);
  border: 1px solid rgba(183, 148, 244, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  transition: all 0.2s ease;
}

.timeline-step:hover {
  border-color: #B794F4;
  background: rgba(18, 20, 32, 0.9);
  transform: translateY(-1px);
}

.step-badge {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  color: #D6BCFA;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.step-content {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #E2E8F0;
  text-align: justify;
}

/* 4. Sentença Lapidar / Frase de Poder */
.frase-poder-box {
  background: linear-gradient(135deg, rgba(30, 22, 14, 0.9), rgba(12, 16, 26, 0.95));
  border: 1px solid rgba(216, 174, 98, 0.6);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 22px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(216, 174, 98, 0.1);
}

.frase-poder-seal {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.frase-poder-box blockquote {
  font-family: 'Cinzel', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #FFF;
  margin: 0;
  padding: 0 16px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* ==========================================================================
   ✦ AUDIO CONTROLS SOFISTICADOS (LUXURY GOLD & GLASSMORPHISM)
   ========================================================================== */
.luxury-audio-bar {
  background: linear-gradient(135deg, rgba(20, 16, 10, 0.85), rgba(12, 16, 26, 0.9));
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 215, 0, 0.15);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.luxury-master-btn {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(184, 134, 11, 0.45));
  border: 1px solid var(--gold-primary, #D4AF37);
  color: #FFF;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.25);
}

.luxury-master-btn:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), rgba(184, 134, 11, 0.65));
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.45);
  transform: translateY(-1px);
}

.luxury-master-btn.playing {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.5));
  border-color: #34D399;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.4);
}

.luxury-control-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #FAF5E8;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.luxury-control-btn:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold-primary, #D4AF37);
}

.luxury-player-status {
  margin-top: -6px;
  margin-bottom: 16px;
  padding: 8px 14px;
  background: rgba(10, 14, 24, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.luxury-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.luxury-progress-glow {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #D4AF37, #FDE68A, #6EE7B7);
  box-shadow: 0 0 8px rgba(253, 230, 138, 0.7);
  transition: width 0.15s linear;
}

/* ==========================================================================
   ✦ PLAYERS MODULARES POR BLOCO (DESIGN SOFISTICADO)
   ========================================================================== */
.modular-audio-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(12, 16, 26, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
  position: relative;
}

.modular-audio-pill:hover {
  border-color: rgba(212, 175, 55, 0.7);
  box-shadow: 0 3px 12px rgba(212, 175, 55, 0.2);
}

.btn-modular-play {
  background: transparent;
  border: none;
  color: var(--gold-light, #FDE68A);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  transition: color 0.2s ease;
}

.btn-modular-play:hover {
  color: #FFF;
}

.btn-modular-restart {
  background: transparent;
  border: none;
  color: #A0AEC0;
  font-size: 0.76rem;
  cursor: pointer;
  padding: 0 2px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.btn-modular-restart:hover {
  color: #FFF;
  transform: scale(1.15);
}

.modular-progress-track {
  width: 50px;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 4px;
}

.modular-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #D4AF37, #FDE68A);
  box-shadow: 0 0 6px rgba(253, 230, 138, 0.8);
  transition: width 0.15s linear;
}

.modular-audio-pill.playing {
  border-color: #34D399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.modular-audio-pill.playing .btn-modular-play {
  color: #34D399;
}

/* ==========================================================================
   ✦ SINCRONIA DE LEITURA & PARÁGRAFO ATIVO
   ========================================================================== */
.reading-para-active {
  border-left: 2px solid rgba(212, 175, 55, 0.4) !important;
  padding-left: 10px !important;
  transition: border-left 0.25s ease;
}

.pergaminho-paragrafo,
.veredito-celebracao-p,
.prioritaria-chip-badge,
.zaoio-comb-card,
.timeline-step {
  cursor: pointer;
  transition: all 0.22s ease-in-out;
}

.pergaminho-paragrafo:hover,
.veredito-celebracao-p:hover {
  background: rgba(212, 175, 55, 0.06);
  border-left: 2px solid rgba(212, 175, 55, 0.55);
  padding-left: 8px;
  border-radius: 0 6px 6px 0;
}

/* ==========================================================================
   ✦ TEMAS DOS NOVOS CARDS DE ACONSELHAMENTO & CONCLUSÃO
   ========================================================================== */
.veredito-orientacao-theme {
  background: linear-gradient(135deg, rgba(10, 24, 20, 0.92), rgba(14, 18, 30, 0.95)) !important;
  border: 1px solid rgba(52, 211, 153, 0.45) !important;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45), inset 0 0 18px rgba(52, 211, 153, 0.08) !important;
  margin-bottom: 22px;
}

.veredito-orientacao-theme .veredito-badge-glow {
  border-color: rgba(52, 211, 153, 0.5);
  color: #6EE7B7;
}

.casas-prioritarias-box {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
}

.prioritarias-header {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.8rem;
  color: var(--gold-light, #FDE68A);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.prioritarias-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prioritaria-chip-badge {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.5);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #FAF5E8;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.prioritaria-chip-badge:hover {
  background: rgba(212, 175, 55, 0.35);
  border-color: var(--gold-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.orientacao-sintese-box {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(52, 211, 153, 0.08);
  border-left: 3px solid #34D399;
  border-radius: 0 6px 6px 0;
}

.sintese-label {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.76rem;
  font-weight: 700;
  color: #6EE7B7;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.sintese-content {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #E6FFFA;
}

.pergaminho-aconselhamento-theme {
  border-color: rgba(52, 211, 153, 0.35) !important;
}

.pergaminho-aconselhamento-theme .pergaminho-header {
  border-bottom: 1px solid rgba(52, 211, 153, 0.2);
}

.pergaminho-aconselhamento-theme .pergaminho-headings h4 {
  color: #A7F3D0;
}

.veredito-conclusao-theme {
  border-color: rgba(216, 174, 98, 0.7) !important;
  background: linear-gradient(135deg, rgba(22, 18, 12, 0.95), rgba(12, 16, 26, 0.98)) !important;
}

.veredito-actions-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: -6px;
  margin-bottom: 8px;
}

/* ==========================================================================
   ✦ ACONSELHAMENTO CARTA A CARTA (ÚLTIMA ETAPA NO FINAL DO PAINEL)
   ========================================================================== */
.mapa20-section-card {
  background: linear-gradient(135deg, rgba(14, 18, 28, 0.95), rgba(8, 12, 20, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.5);
}

.mapa20-header-nobel {
  text-align: center;
  margin-bottom: 16px;
}

.mapa20-badge {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-light, #FDE68A);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mapa20-header-nobel small {
  display: block;
  font-size: 0.74rem;
  color: #A0AEC0;
  margin-top: 4px;
}

.mapa20-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.mapa20-item-box {
  background: rgba(18, 22, 34, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mapa20-item-box:hover {
  border-color: rgba(212, 175, 55, 0.6);
  background: rgba(24, 30, 46, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.mapa20-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  margin-bottom: 2px;
}

.mapa20-item-casa {
  color: var(--gold-primary, #D4AF37);
  font-weight: 700;
}

.mapa20-item-pol {
  color: #94A3B8;
  font-size: 0.7rem;
}

.mapa20-item-fala {
  font-size: 0.76rem;
  line-height: 1.45;
  color: #CBD5E1;
}

.mapa20-item-fala strong {
  color: #E2E8F0;
}

/* ==========================================================================
   ✦ RESPONSIVIDADE MOBILE REFINADA
   ========================================================================== */
@media (max-width: 900px) {
  .app-container, .main-layout {
    flex-direction: column !important;
  }

  .altar-viewport-section, #altarContainer, .board-container {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    max-height: 42vh !important;
    min-height: 280px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
    background: rgba(6, 8, 14, 0.98) !important;
  }

  .reading-panel-section, .cascades-wrapper, #rightPanel {
    width: 100% !important;
    overflow-y: visible !important;
    padding-top: 10px !important;
  }

  .luxury-audio-bar {
    position: sticky;
    top: 42vh;
    z-index: 39;
  }

  .mapa20-grid {
    grid-template-columns: 1fr;
  }
}


.card-chip.chip-speak-active { background: rgba(216, 174, 98, 0.4) !important; color: #FFF !important; transform: scale(1.1); box-shadow: 0 0 12px var(--gold-primary); }

/* ==========================================================================
   FASE 4 CANÔNICA: CONTROLES FLUTUANTES, KARAOKÊ E GAVETAS LATERAIS
   ========================================================================== */

/* Controles Flutuantes: Posicionamento Discreto e Livre de Interferência com o Altar */
.floating-oracular-controls {
  position: fixed !important;
  bottom: 24px !important;
  left: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 500 !important;
  pointer-events: auto !important;
  transition: left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.floating-oracular-controls button,
.floating-oracular-controls .btn-floating-deck,
.floating-oracular-controls .btn-floating-chat {
  pointer-events: auto !important;
  cursor: pointer !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: rgba(11, 23, 36, 0.92) !important;
  border: 1px solid var(--gold-secondary) !important;
  color: var(--gold-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 10px rgba(216, 174, 98, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.floating-oracular-controls button:hover,
.floating-oracular-controls .btn-floating-deck:hover,
.floating-oracular-controls .btn-floating-chat:hover {
  transform: translateY(-2px) scale(1.03) !important;
  border-color: var(--gold-primary) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9), 0 0 16px rgba(216, 174, 98, 0.4) !important;
  color: #FAF5E8 !important;
}

.floating-oracular-controls .deck-counter-badge,
.floating-oracular-controls .chat-badge {
  background: var(--gold-primary) !important;
  color: #08121D !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 12px !important;
  min-width: 18px !important;
  text-align: center !important;
}

/* Quando o painel esquerdo está recolhido, controles deslizam suavemente para o canto */
.panel-hidden-left .floating-oracular-controls,
body.left-drawer-collapsed .floating-oracular-controls {
  left: 20px !important;
}

/* Gavetas e Toggles das Bordas Laterais */
.panel-hidden-left .sidebar-left,
.panel-hidden-left #paneLeftHistory {
  transform: translateX(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.panel-hidden-right .sidebar-right,
.panel-hidden-right #paneRightModal {
  transform: translateX(100%) !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Karaokê Dinâmico Interativo e Iluminação Carta a Carta */
.karaoke-word {
  display: inline !important;
  cursor: pointer !important;
  transition: color 0.15s ease, text-shadow 0.15s ease, background 0.15s ease !important;
  padding: 1px 2px !important;
  border-radius: 3px !important;
}
.karaoke-word:hover {
  background: rgba(216, 174, 98, 0.25) !important;
  color: #FFFFFF !important;
  text-shadow: 0 0 6px var(--gold-primary) !important;
}
.karaoke-passed {
  color: #9AA7B5 !important;
}
.karaoke-active {
  color: #FFFFFF !important;
  background: rgba(216, 174, 98, 0.35) !important;
  text-shadow: 0 0 10px rgba(216, 174, 98, 0.95), 0 0 20px rgba(216, 174, 98, 0.6) !important;
  font-weight: 600 !important;
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.5) !important;
  border-radius: 4px !important;
}

/* Garantia de exibição permanente da Super Narrativa e Aconselhamento */
#listSuperNarrativa .tile-content,
#listAconselhamento .tile-content,
#listSuperNarrativa.chapters-list .tile-content,
#listAconselhamento.chapters-list .tile-content {
  display: block !important;
}

/* Modo Live (9:16) - Altar 65% e Leitura 2 a 3 Linhas */
.scene-916-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
}
.scene-top-brand {
  flex-shrink: 0 !important;
}
.scene-altar-spotlight {
  height: 64% !important;
  min-height: 64% !important;
  max-height: 65% !important;
  flex: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.scene-cards-halo {
  width: 98% !important;
  height: 98% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
  gap: 4px !important;
}
.scene-consulente-card {
  flex: 1 !important;
  max-height: 28% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
}
.scene-active-q {
  font-size: 0.82rem !important;
  max-height: 48px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  color: var(--gold-light) !important;
  margin: 0 !important;
}
.scene-oracle-phrase,
.scene-live-narrative-box {
  min-height: 52px !important;
  max-height: 72px !important;
  overflow-y: hidden !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
  color: #FAF5E8 !important;
  border: 1px solid rgba(216, 174, 98, 0.3) !important;
  background: rgba(8, 18, 29, 0.9) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6) !important;
}

/* Lupa de Leitura Imersiva (Overlay Fullscreen) */
#fullscreenReadingOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(6, 14, 22, 0.97);
  z-index: 99999;
  overflow-y: auto;
  padding: 48px 24px;
  backdrop-filter: blur(16px);
}
#fullscreenReadingOverlay .reading-modal-inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  background: rgba(11, 23, 36, 0.7);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 16px;
  padding: 36px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
}


/* ==========================================================================
   ILUMINAÇÃO DE CARTAS NO ALTAR 3D E MODO LIVE (MESA VIVA SEM ESCURECER)
   ========================================================================== */
@keyframes pulsoDouradoMesclado {
  0% {
    border-color: #f7d788 !important;
    box-shadow: 
      0 0 22px rgba(247, 215, 136, 0.95),
      0 0 45px rgba(216, 174, 98, 0.8),
      0 0 70px rgba(247, 215, 136, 0.4),
      inset 0 0 16px rgba(247, 215, 136, 0.55) !important;
  }
  50% {
    border-color: #ba8c48 !important;
    box-shadow: 
      0 0 28px rgba(186, 140, 72, 0.95),
      0 0 55px rgba(155, 112, 50, 0.85),
      0 0 80px rgba(186, 140, 72, 0.45),
      inset 0 0 20px rgba(186, 140, 72, 0.6) !important;
  }
  100% {
    border-color: #f7d788 !important;
    box-shadow: 
      0 0 22px rgba(247, 215, 136, 0.95),
      0 0 45px rgba(216, 174, 98, 0.8),
      0 0 70px rgba(247, 215, 136, 0.4),
      inset 0 0 16px rgba(247, 215, 136, 0.55) !important;
  }
}

.card-slot-v2.chip-selected-pulse,
.card-slot-v2.focus-highlight {
  z-index: 300 !important;
  transition: transform 0.6s cubic-bezier(0.34, 1.25, 0.64, 1), box-shadow 0.6s ease !important;
}

/* Brilho Vermelho Constante de 3,5 mm (~13.2px) para a carta elevada no Altar */
.card-slot-v2.focus-highlight .slot-frame,
.card-slot-v2.chip-selected-pulse .slot-frame {
  transform: translateY(-16px) scale(1.18) translateZ(48px) !important;
  border-color: #ff4d4d !important;
  box-shadow: 
    0 0 13.2px 3.5px #ff2a2a,
    0 0 28px rgba(255, 42, 42, 0.75),
    inset 0 0 10px rgba(255, 77, 77, 0.5) !important;
  animation: none !important;
  z-index: 300 !important;
}

.card-slot-v2.revealed.focus-highlight .slot-frame,
.card-slot-v2.revealed.chip-selected-pulse .slot-frame {
  transform: rotateY(180deg) translateY(-16px) scale(1.18) translateZ(48px) !important;
  border-color: #ff4d4d !important;
  box-shadow: 
    0 0 13.2px 3.5px #ff2a2a,
    0 0 28px rgba(255, 42, 42, 0.75),
    inset 0 0 10px rgba(255, 77, 77, 0.5) !important;
  animation: none !important;
  z-index: 300 !important;
}

.card-slot-v2.revealed.inverted.focus-highlight .slot-frame,
.card-slot-v2.revealed.inverted.chip-selected-pulse .slot-frame {
  transform: rotateZ(180deg) rotateY(180deg) translateY(-16px) scale(1.18) translateZ(48px) !important;
  border-color: #ff4d4d !important;
  box-shadow: 
    0 0 13.2px 3.5px #ff2a2a,
    0 0 28px rgba(255, 42, 42, 0.75),
    inset 0 0 10px rgba(255, 77, 77, 0.5) !important;
  animation: none !important;
  z-index: 300 !important;
}

/* =========================================================================
   CASE FLUTUANTE DA CARTA ANCESTRAL (MESA ANTERIOR NO CRUZAMENTO)
   ========================================================================= */
.floating-ancestral-card-anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  animation: ancestralCardAppear 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: auto;
  z-index: 520;
}

@keyframes ancestralCardAppear {
  0% { opacity: 0; transform: translateY(14px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1.0); }
}

.ancestral-card-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Tamanho idêntico à carta do altar a 100% de zoom: 74px x 108px */
.ancestral-slot-case.card-slot-v2 {
  width: 74px !important;
  height: 108px !important;
  cursor: default !important;
  perspective: none !important;
  position: relative !important;
  display: block !important;
}

.ancestral-slot-case .slot-frame {
  width: 100% !important;
  height: 100% !important;
  border-radius: 6px !important;
  border: 1.5px solid #ff4d4d !important;
  /* Brilho vermelho constante de 3,5 mm (~13.2px) */
  box-shadow: 
    0 0 13.2px 3.5px #ff2a2a,
    0 0 24px rgba(255, 42, 42, 0.65),
    inset 0 0 8px rgba(255, 77, 77, 0.4) !important;
  animation: none !important;
  transform: none !important;
  background: #081420 !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

.ancestral-slot-case .card-face,
.ancestral-slot-case .card-face.front {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: transparent !important;
  backface-visibility: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ancestral-slot-case .card-face.front img,
.ancestral-slot-case img#ancestralCardImg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
  filter: brightness(1.08) contrast(1.08) saturate(1.1) !important;
  opacity: 1;
  visibility: visible;
}

.ancestral-slot-case .card-face.front img.is-swapping,
.ancestral-slot-case img.is-swapping,
.ancestral-slot-case img#ancestralCardImg.is-swapping {
  opacity: 0 !important;
  visibility: hidden !important;
}

.ancestral-slot-case.inverted .card-face.front img,
.ancestral-slot-case.inverted img#ancestralCardImg {
  transform: rotate(180deg) !important;
}

.ancestral-slot-case .house-plaque {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: #110507;
  border: 1px solid #ff4d4d;
  color: #ff8585;
  font-family: var(--font-display, serif);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(255, 42, 42, 0.6);
  white-space: nowrap;
  letter-spacing: 0.05em;
  z-index: 10;
}

.ancestral-badge-flag {
  margin-top: 14px;
  font-family: var(--font-display, serif);
  font-size: 0.62rem;
  font-weight: 800;
  color: #ff8585;
  background: rgba(30, 8, 12, 0.92);
  border: 1px solid rgba(255, 77, 77, 0.7);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  box-shadow: 0 0 10px rgba(255, 42, 42, 0.45);
  text-align: center;
  white-space: nowrap;
}

/* Mesa sem escurecer: todas as 20 cartas permanecem na sua claridade e beleza viva */
.cards-grid-4x5.dimmed .card-slot-v2:not(.focus-highlight):not(.chip-selected-pulse) {
  opacity: 1 !important;
  filter: none !important;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease, transform 0.4s ease !important;
}

/* Transição viva quando a mesa foca as lâminas */
.cards-grid-4x5 .card-slot-v2 {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease, transform 0.4s ease, box-shadow 0.4s ease !important;
}

/* Chips de carta no texto da narração */
.card-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid rgba(216, 174, 98, 0.5);
  color: var(--gold-primary) !important;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 2px;
}

.card-chip:hover {
  background: rgba(216, 174, 98, 0.35);
  border-color: #FFF;
  color: #FFF !important;
  transform: translateY(-1px);
}

.card-chip.karaoke-active {
  background: var(--gold-primary) !important;
  color: #07121D !important;
  box-shadow: 0 0 12px var(--gold-primary) !important;
  transform: scale(1.08);
}

/* Palavras do Karaokê */
.karaoke-word {
  display: inline;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.15s ease, background-color 0.15s ease, text-shadow 0.15s ease;
}
.karaoke-word:hover {
  background-color: rgba(216, 174, 98, 0.2);
  color: #FFF;
}
.karaoke-passed {
  color: #E2CF9D !important;
}
.karaoke-active {
  color: #FFFFFF !important;
  background-color: rgba(216, 174, 98, 0.35) !important;
  text-shadow: 0 0 10px rgba(216, 174, 98, 1), 0 0 16px rgba(255, 255, 255, 0.8) !important;
  font-weight: 800 !important;
  padding: 0 2px;
  border-radius: 3px;
}

/* ==========================================================================
   PAINEL DIREITO LATERAL (MAPA DA MESA & NARRATIVA) - SEM CONTAINER INFERIOR
   ========================================================================== */
.pane-reading-map.resizable-curtain {
  width: 440px !important;
  min-width: 340px !important;
  max-width: 48vw !important;
  background: rgba(10, 22, 34, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  border-left: 1px solid rgba(216, 174, 98, 0.35) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 100 !important;
  flex-shrink: 0 !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.75) !important;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.pane-reading-map.collapsed {
  transform: translateX(100%) !important;
  width: 0 !important;
  min-width: 0 !important;
  border-left: none !important;
}

/* Área interna de leitura com rolagem vertical fluida */
.reading-map-inner {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px 18px 60px 18px !important;
  scroll-behavior: smooth !important;
}

/* Adaptação para telas compactas e mobile: Gaveta lateral deslizante à direita */
@media (max-width: 900px) {
  .pane-reading-map.resizable-curtain {
    position: fixed !important;
    top: 50px !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 90vw !important;
    max-width: 400px !important;
    height: calc(100dvh - 50px) !important;
    z-index: 600 !important;
    transform: translateX(0) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.9) !important;
  }

  .pane-reading-map.resizable-curtain.collapsed {
    transform: translateX(105%) !important;
    pointer-events: none !important;
  }

  .pane-history-cycles {
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 88vw !important;
    max-width: 340px !important;
    height: calc(100dvh - 50px) !important;
    z-index: 600 !important;
    transform: translateX(0) !important;
  }

  .pane-history-cycles.collapsed {
    transform: translateX(-105%) !important;
    pointer-events: none !important;
  }
}

/* ==========================================================================
   ESTILIZAÇÃO DO KARAOKÊ (REALCE LUMINOSO E ACOMPANHAMENTO VISUAL)
   ========================================================================== */
.karaoke-word {
  display: inline;
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
  transition: color 0.15s ease, background-color 0.15s ease, text-shadow 0.15s ease;
}

.karaoke-word:hover {
  background-color: rgba(216, 174, 98, 0.25) !important;
  color: #FFF !important;
}

.karaoke-passed {
  color: #D6C298 !important;
}

.karaoke-active {
  color: #FFFFFF !important;
  background-color: rgba(216, 174, 98, 0.45) !important;
  box-shadow: 0 0 14px rgba(216, 174, 98, 0.9) !important;
  text-shadow: 0 0 8px #FFF, 0 0 16px rgba(216, 174, 98, 1) !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
  display: inline-block !important;
}


/* ==========================================================================
   TOOLBARS DE ÁUDIO ESTÉTICAS (OUVIR, PAUSAR, REINICIAR) E CONTAINER DE PRÉVIA
   ========================================================================== */
.zaoio-audio-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 29, 44, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.4);
  padding: 4px 8px;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

.zaoio-audio-toolbar-full {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.btn-audio-ctrl {
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid var(--gold-secondary);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.btn-audio-ctrl:hover {
  background: var(--gold-primary);
  color: #07121D;
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.6);
  transform: translateY(-1px);
}

.btn-audio-play {
  border-color: var(--gold-primary);
  color: #FFF;
}

.btn-audio-pause {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
  color: #DDD;
}
.btn-audio-pause:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFF;
}

.btn-audio-restart {
  background: rgba(92, 169, 214, 0.1);
  border-color: rgba(92, 169, 214, 0.4);
  color: #88C4EA;
}
.btn-audio-restart:hover {
  background: #5CA9D6;
  color: #07121D;
  box-shadow: 0 0 12px rgba(92, 169, 214, 0.6);
}

/* ANTI-QUEBRA DE CARTAS: Garante que as cartas NUNCA quebrem no meio ou nos finais das linhas */
.card-chip {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  vertical-align: baseline !important;
  background: rgba(216, 174, 98, 0.18) !important;
  border: 1px solid var(--gold-primary) !important;
  color: var(--gold-light) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

/* RETIRADA DA BARRA DE MOVIMENTAÇÃO LATERAL */
.resize-curtain-handle {
  display: none !important;
  width: 0 !important;
  pointer-events: none !important;
}
.pane-reading-map, .pane-history-cycles, .reading-map-inner, .zaoio-workspace {
  overflow-x: hidden !important;
}

/* ESTILOS DO CONTAINER DE PRÉVIA NO PAINEL ESQUERDO */
.revelation-preview-card {
  background: rgba(11, 25, 38, 0.95);
  border: 1px solid rgba(216, 174, 98, 0.4);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

.revelation-preview-header {
  border-bottom: 1px solid rgba(216, 174, 98, 0.2);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.preview-badge-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(216, 174, 98, 0.3);
  margin-bottom: 8px;
}

.preview-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #FFF;
  margin: 0 0 6px 0;
  letter-spacing: 0.5px;
}

.preview-subtitle {
  font-size: 0.8rem;
  color: #AAA;
  line-height: 1.4;
  margin: 0;
}

.preview-modules-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-module-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(216, 174, 98, 0.12);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.preview-module-item:hover {
  background: rgba(216, 174, 98, 0.08);
  border-color: rgba(216, 174, 98, 0.3);
  transform: translateX(2px);
}

.module-icon {
  font-size: 1.1rem;
  line-height: 1;
  margin-top: 2px;
}

.module-info strong {
  display: block;
  font-size: 0.82rem;
  color: var(--gold-light);
  margin-bottom: 2px;
}

.module-info small {
  display: block;
  font-size: 0.73rem;
  color: #888;
  line-height: 1.35;
}
/* =========================================================================
   RESIZERS PARA OS PAINÉIS (MOUSE/POINTER)
   ========================================================================= */
.pane-edge-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  z-index: 1000;
  background: transparent;
  transition: background 0.2s;
}

.pane-edge-resizer:hover, .pane-edge-resizer:active {
  background: rgba(216, 174, 98, 0.4);
}

.pane-edge-resizer.edge-right {
  right: -5px;
}

.pane-edge-resizer.edge-left {
  left: -5px;
}
/* =========================================================================
   DECK CONTEXT MODAL (FASE 4)
   ========================================================================= */
.deck-context-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 34, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.deck-context-modal {
  background: rgba(11, 25, 38, 0.95);
  border: 1px solid rgba(216, 174, 98, 0.4);
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  padding: 24px;
  color: var(--gold-light);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.deck-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(216, 174, 98, 0.2);
  padding-bottom: 12px;
}
.deck-modal-header h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--gold-primary);
}
.btn-close-deck-modal {
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s;
}
.btn-close-deck-modal:hover {
  color: var(--gold-primary);
}
.deck-modal-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deck-modal-group label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-dark);
}
.deck-modal-group textarea {
  width: 100%;
  background: rgba(4, 9, 15, 0.6);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 6px;
  padding: 10px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  resize: vertical;
  min-height: 80px;
}
.deck-modal-group textarea:focus {
  outline: none;
  border-color: var(--gold-primary);
}
.deck-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}
.btn-deck-advance {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-primary));
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-family: var(--font-serif);
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-deck-advance:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(216, 174, 98, 0.4);
}
.floating-oracular-controls .btn-floating-deck {
  width: 70px !important;
  height: 100px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  position: relative;
}

/* =========================================================================
   LUPA CHAT OVERLAY (ETAPA 3 - LEITURA FÁCIL)
   ========================================================================= */
.chat-fullscreen-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 999999;
  justify-content: center;
  align-items: center;
  display: flex;
  background: rgba(5, 7, 11, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.chat-fullscreen-modal {
  position: relative;
  width: 90%;
  max-width: 820px;
  max-height: 85vh;
  /* Fundo de papel pergaminho envelhecido com alta opacidade e legibilidade soberba */
  background: #1b1611;
  background-image: radial-gradient(circle at 50% 0%, rgba(216, 174, 98, 0.16), transparent 70%),
                    linear-gradient(145deg, rgba(34, 27, 19, 0.98) 0%, rgba(22, 17, 12, 0.99) 100%);
  border: 2px solid rgba(216, 174, 98, 0.5);
  border-radius: 14px;
  padding: 42px 48px;
  overflow-y: auto;
  box-shadow: 0 25px 80px rgba(0,0,0,0.95), inset 0 0 50px rgba(0,0,0,0.65), 0 0 35px rgba(216, 174, 98, 0.25);
  font-family: 'Cinzel', 'Lora', Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.85;
  color: #f7eedd;
  text-align: justify;
}
.chat-fullscreen-modal p {
  margin-bottom: 1.5rem;
  color: #f5edd8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.chat-fullscreen-content {
  color: #f7eedd;
  font-size: 1.15rem;
  line-height: 1.9;
}
.chat-fullscreen-content p {
  margin-bottom: 1.4rem;
  color: #f4ebd7;
}
.chat-fullscreen-content strong {
  color: var(--gold-light, #ffd57e);
}
.btn-chat-lupa {
  position: absolute;
  top: 10px; right: 10px;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: var(--gold-primary);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}
.chat-bubble-entry.oracular { position: relative; }
.btn-chat-lupa:hover {
  opacity: 1;
  transform: scale(1.1);
}
.btn-close-fullscreen-chat,
#btnCloseFullscreenChat,
#btnCloseChatFullscreen {
  position: absolute;
  top: 14px; right: 20px;
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.4);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-primary, #d8ae62);
  font-size: 1.6rem;
  cursor: pointer;
  transition: all 0.25s ease;
  line-height: 1;
  z-index: 10;
}
.btn-close-fullscreen-chat:hover,
#btnCloseFullscreenChat:hover,
#btnCloseChatFullscreen:hover {
  background: rgba(216, 174, 98, 0.28);
  color: #fff;
  transform: scale(1.1);
  border-color: rgba(216, 174, 98, 0.9);
}

/* Continuidade Linear entre Contêineres Autônomos */
.bloco-continuidade-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed rgba(216, 174, 98, 0.25);
  display: flex;
  justify-content: center;
}
.btn-continuar-narrativa {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.2) 0%, rgba(138, 98, 30, 0.3) 100%);
  border: 1px solid rgba(216, 174, 98, 0.6);
  color: var(--gold-primary, #d8ae62);
  padding: 10px 22px;
  border-radius: 8px;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.btn-continuar-narrativa:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.35) 0%, rgba(138, 98, 30, 0.5) 100%);
  color: #fff;
  border-color: rgba(216, 174, 98, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(216, 174, 98, 0.3);
}
.proximo-bloco-ativo {
  border-color: rgba(216, 174, 98, 0.8) !important;
  box-shadow: 0 0 25px rgba(216, 174, 98, 0.35) !important;
  animation: pulseProximoBloco 2.5s infinite ease-in-out;
}
@keyframes pulseProximoBloco {
  0%, 100% { box-shadow: 0 0 15px rgba(216, 174, 98, 0.25); }
  50% { box-shadow: 0 0 30px rgba(216, 174, 98, 0.6); }
}

/* =========================================================================
   CHAT INPUT AREA
   ========================================================================= */
.chat-input-area {
  display: flex;
  padding: 15px;
  background: rgba(10, 12, 16, 0.95);
  border-top: 1px solid var(--border-light);
  gap: 10px;
  align-items: flex-end;
}
.chat-main-input {
  flex: 1;
  background: var(--surface-hover);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  resize: none;
  min-height: 45px;
  max-height: 120px;
  transition: border-color 0.2s;
  outline: none;
}
.chat-main-input:focus {
  border-color: var(--gold-primary);
}
.btn-chat-send {
  background: var(--gold-primary);
  color: #000;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  flex-shrink: 0;
}
.btn-chat-send:hover {
  transform: scale(1.05);
  background: #E5C37A;
}
.chat-msg.user-msg {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.chat-msg.user-msg .msg-bubble {
  background: rgba(216, 174, 98, 0.1);
  border: 1px solid rgba(216, 174, 98, 0.3);
  padding: 12px 16px;
  border-radius: 16px 16px 0 16px;
  max-width: 85%;
  color: var(--text-primary);
}
.chat-bubble-entry.oracular {
  background: rgba(10, 12, 16, 0.8);
  border: 1px solid var(--border-light);
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 15px;
  display: flex;
  gap: 12px;
}
.chat-bubble-entry.oracular .bubble-emblem {
  font-size: 1.5rem;
  color: var(--gold-primary);
  flex-shrink: 0;
}


/* =========================================================================
   PEDIDOS DE ESTÉTICA
   ========================================================================= */

/* Remover escritos da mesa 3D */
.altar-callout { 
  display: none !important; 
}

/* Painel Direito Elegante */
.rd-about-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}
.rd-about-facts span {
  background: rgba(216, 174, 98, 0.1);
  border: 1px solid rgba(216, 174, 98, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--gold-primary);
  font-family: var(--font-display);
}
.rd-steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 25px;
}
.rd-step {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: rgba(255, 255, 255, 0.02);
  padding: 15px;
  border-radius: 12px;
  border-left: 2px solid var(--gold-secondary);
}
.rd-step-num {
  background: var(--gold-secondary);
  color: #000;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.rd-step div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rd-step strong {
  color: #fff;
  font-size: 0.95rem;
}
.rd-step small {
  color: #aaa;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Fix chat wrapper if any */
.chat-input-wrapper {
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: center;
}

/* =========================================================================
   AURAS BRILHANTES DOS BOTÕES FLUTUANTES (DECK DOURADO & CHAT VERDE)
   ========================================================================= */
.floating-oracular-controls .btn-floating-deck {
  width: 56px !important;
  height: 80px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #0B1724 !important;
  border: 1.5px solid rgba(216, 174, 98, 0.95) !important;
  box-shadow: 0 0 18px rgba(216, 174, 98, 0.9), 0 0 35px rgba(216, 174, 98, 0.5), inset 0 0 10px rgba(255, 230, 160, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.floating-oracular-controls .btn-floating-deck:hover {
  transform: translateY(-3px) scale(1.05) !important;
  border-color: #FAF5E8 !important;
  box-shadow: 0 0 26px rgba(216, 174, 98, 1), 0 0 45px rgba(216, 174, 98, 0.75), inset 0 0 14px rgba(255, 240, 180, 0.7) !important;
}

.floating-oracular-controls .btn-floating-deck img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  display: block !important;
  margin: auto !important;
}

.floating-oracular-controls .deck-counter-badge {
  display: none !important; /* Retirada de escrita/contador no botão do deck */
}

.floating-oracular-controls .btn-floating-chat,
.btn-floating-chat {
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(11, 23, 36, 0.95) !important;
  border: 1.5px solid #2ECC71 !important;
  box-shadow: 0 0 18px rgba(46, 204, 113, 0.9), 0 0 35px rgba(46, 204, 113, 0.5), inset 0 0 10px rgba(130, 255, 180, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #2ECC71 !important;
  cursor: pointer !important;
  transform: scale(1.0) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.floating-oracular-controls .btn-floating-chat:hover,
.btn-floating-chat:hover {
  transform: translateY(-3px) scale(1.08) !important;
  border-color: #A9DFBF !important;
  box-shadow: 0 0 26px rgba(46, 204, 113, 1), 0 0 45px rgba(46, 204, 113, 0.75), inset 0 0 14px rgba(160, 255, 200, 0.7) !important;
  color: #FAF5E8 !important;
}

.floating-oracular-controls .btn-floating-chat .chat-icon {
  font-size: 1.35rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: auto !important;
}

.floating-chat-card {
  z-index: 1000 !important;
}

/* =========================================================================
   DESLOCAMENTO DOS BOTÕES E EXPANSÃO DO ALTAR (DESKTOP)
   ========================================================================= */
.floating-oracular-controls {
  position: fixed !important;
  bottom: 24px !important;
  left: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 500 !important;
  pointer-events: auto !important;
  transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.35s ease !important;
}

/* Quando o painel esquerdo está recolhido, controles deslizam suavemente para o canto */
body.left-drawer-collapsed .floating-oracular-controls,
.pane-history-cycles.collapsed ~ * .floating-oracular-controls,
.panel-hidden-left .floating-oracular-controls {
  left: 20px !important;
  bottom: 24px !important;
}

/* =========================================================================
   RESIZABLE HANDLES & CORTINAS (PAINEL ESQUERDO E DIREITO)
   ========================================================================= */
.resize-curtain-handle {
  position: absolute;
  top: 0;
  width: 12px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
  z-index: 100;
  transition: background 0.2s;
}
.resize-curtain-handle:hover, .resize-curtain-handle:active {
  background: rgba(216, 174, 98, 0.2);
}
#resizeHandleLeft {
  right: -6px;
}
#resizeHandleRight {
  left: -6px;
}
.pane-history-cycles, .pane-reading-map {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1), min-width 0.35s, padding 0.35s;
}
.pane-history-cycles.collapsed {
  transform: translateX(-100%) !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.pane-reading-map.collapsed {
  transform: translateX(100%) !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* O Painel Direito pode ser ampliado cortinado para acomodar grande fluxo textual */
.pane-reading-map {
  width: 460px;
  min-width: 340px;
  max-width: 65vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* =========================================================================
   CONTAINERS DE SAÍDA RESPONSIVOS E FIXADOS NO PAINEL DIREITO
   ========================================================================= */
.reading-map-inner {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 12px 84px 12px !important;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-secondary) transparent;
}
.cascades-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Ancoragem e agregação limpa dos cabeçalhos das seções (incluindo Aconselhamento Oracular) dentro do Painel Direito */
#readingMapInner .pergaminho-narrativo-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
}

#readingMapInner .pergaminho-narrativo-card > .pergaminho-header {
  position: sticky;
  top: -14px;
  z-index: 18;
  background: #0B1624;
  margin: -18px -20px 16px -20px;
  padding: 14px 20px 12px 20px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 6px 14px rgba(3, 8, 15, 0.72);
}

#readingMapInner .focal-aconselhamento-card > .pergaminho-header,
#readingMapInner .pergaminho-aconselhamento-theme > .pergaminho-header {
  background: linear-gradient(180deg, #13221D 0%, #0E1A16 100%) !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.35) !important;
  box-shadow: 0 6px 16px rgba(4, 12, 10, 0.85) !important;
}

#readingMapInner .focal-revelacoes-card > .pergaminho-header {
  background: linear-gradient(180deg, #171226 0%, #110D1D 100%) !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.32) !important;
}

#readingMapInner .focal-veredito-card > .pergaminho-header {
  background: linear-gradient(180deg, #18140E 0%, #101520 100%) !important;
  border-bottom: 1px solid rgba(216, 174, 98, 0.38) !important;
}

@media (max-width: 900px) {
  #readingMapInner .pergaminho-narrativo-card > .pergaminho-header {
    top: -14px;
    margin: -14px -14px 12px -14px;
    padding: 11px 14px 10px 14px;
  }
}
.pergaminho-corpo,
.pergaminho-aconselhamento-corpo,
.veredito-orientacao-corpo {
  max-height: none !important;
  overflow-y: visible !important;
  word-break: break-word !important;
  line-height: 1.75 !important;
}
.section-resumo-combinacoes-zaoio {
  max-height: none !important;
  overflow: visible !important;
}

/* =========================================================================
   ARQUITETURA MOBILE ESPECÍFICA (SEM CONFLITO COM DESKTOP)
   ========================================================================= */
@media (max-width: 900px) {
  /* Altar no topo ocupando espaço generoso */
  .pane-altar-stage,
  #paneCenter {
    width: 100vw !important;
    height: 100vh !important;
    position: relative !important;
    transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Quando um painel é aberto no mobile, o Altar divide a tela generosamente no topo */
  body.mobile-panel-open .pane-altar-stage,
  body.mobile-panel-open #paneCenter {
    height: 52vh !important;
    overflow: hidden !important;
  }

  /* Painel aberto no mobile surge na metade inferior (Bottom Split) */
  .pane-history-cycles:not(.collapsed),
  .pane-reading-map:not(.collapsed) {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 48vh !important;
    max-height: 48vh !important;
    z-index: 900 !important;
    background: rgba(7, 19, 31, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1.5px solid var(--gold-secondary) !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9) !important;
    overflow-y: auto !important;
    transform: none !important;
  }

  /* Controles flutuantes no mobile: discretos no canto sem cobrir o altar */
  .floating-oracular-controls {
    left: auto !important;
    right: 14px !important;
    bottom: 14px !important;
    gap: 8px !important;
    z-index: 950 !important;
  }

  body.mobile-panel-open .floating-oracular-controls {
    bottom: calc(48vh + 10px) !important;
  }

  .floating-oracular-controls .btn-floating-deck {
    width: 48px !important;
    height: 68px !important;
  }

  .floating-oracular-controls .btn-floating-chat,
  .btn-floating-chat {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ==========================================================================
   CANÔNICO: APROFUNDAMENTO DA MESA, NOVO MODAL DO BARALHO & PROMO CARD DO ALTAR
   ========================================================================== */

/* 1. Chat: Aprofundamento da Mesa */
.chat-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.04em;
}

.chat-header-title .tab-icon {
  font-size: 1.1rem;
}

/* Lupa no balão de resposta da IA */
.chat-bubble-entry.oracular {
  position: relative !important;
  padding-right: 36px !important;
}

.btn-chat-lupa {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: rgba(216, 174, 98, 0.12) !important;
  border: 1px solid rgba(216, 174, 98, 0.3) !important;
  border-radius: 6px !important;
  color: var(--gold-primary) !important;
  font-size: 0.85rem !important;
  padding: 3px 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
  z-index: 5 !important;
}

.btn-chat-lupa:hover {
  background: rgba(216, 174, 98, 0.28) !important;
  border-color: var(--gold-primary) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.3) !important;
}

/* 2. Novo Modal do Baralho */
.deck-emblem-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}

.deck-status-badge {
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid rgba(216, 174, 98, 0.35);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-family: var(--font-display);
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.deck-form-group {
  margin-bottom: 14px;
}

.deck-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.deck-label-row label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-light);
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-clear-deck-inputs {
  background: transparent;
  border: 1px dashed rgba(216, 174, 98, 0.35);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-family: var(--font-sans);
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-clear-deck-inputs:hover {
  color: #FFF;
  border-color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.1);
}

.deck-text-area-ampliado {
  width: 100%;
  background: rgba(4, 9, 15, 0.75);
  border: 1px solid rgba(216, 174, 98, 0.35);
  border-radius: 8px;
  padding: 12px;
  color: #FFF;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 85px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.deck-text-area-ampliado:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 14px rgba(216, 174, 98, 0.25);
}

.deck-text-area-ampliado::placeholder {
  color: rgba(250, 245, 232, 0.45);
  font-style: italic;
  font-size: 0.88rem;
}

.deck-modal-actions-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.btn-deck-ritual-primary {
  width: 100%;
  background: linear-gradient(135deg, #D8AE62 0%, #B46E47 100%);
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  color: #040A12 !important;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  box-shadow: 0 4px 18px rgba(216, 174, 98, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-deck-ritual-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(216, 174, 98, 0.55);
}

.btn-deck-ritual-primary .btn-glyph {
  font-size: 1.4rem;
}

.btn-deck-ritual-primary .btn-txt-col strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: #040A12;
  letter-spacing: 0.04em;
}

.btn-deck-ritual-primary .btn-txt-col small {
  display: block;
  font-size: 0.74rem;
  color: rgba(4, 10, 18, 0.85);
  margin-top: 2px;
}

.btn-deck-ritual-comp {
  width: 100%;
  background: rgba(14, 29, 43, 0.9);
  border: 1px solid var(--gold-primary);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--gold-light) !important;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.btn-deck-ritual-comp:hover {
  background: rgba(216, 174, 98, 0.15);
  border-color: var(--gold-light);
  transform: translateY(-2px);
}

.btn-deck-ritual-comp .btn-glyph {
  font-size: 1.4rem;
  color: var(--gold-primary);
}

.btn-deck-ritual-comp .btn-txt-col strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--gold-light);
  letter-spacing: 0.04em;
}

.btn-deck-ritual-comp .btn-txt-col small {
  display: block;
  font-size: 0.74rem;
  color: #94A3B8;
  margin-top: 2px;
  line-height: 1.35;
}

/* 3. Card Promocional & Educativo no Altar (Tempo de Espera da IA) */
.altar-waiting-promo-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 550;
  width: 92%;
  max-width: 820px;
  max-height: 86vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(5, 12, 22, 0.96);
  backdrop-filter: blur(24px);
  border: 1.5px solid rgba(216, 174, 98, 0.6);
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 50px rgba(216, 174, 98, 0.28);
  padding: 24px 28px;
  animation: fadeInZoom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInZoom {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.promo-card-inner {
  position: relative;
}

.btn-close-promo {
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: var(--gold-light);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.btn-close-promo:hover {
  background: rgba(216, 174, 98, 0.3);
  border-color: var(--gold-primary);
  color: #FFF;
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.4);
}

.promo-header {
  text-align: center;
  margin-bottom: 18px;
}

.promo-seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.4);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.promo-seal .seal-sparkle {
  color: var(--gold-primary);
  font-size: 0.8rem;
}

.promo-seal .seal-text {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  font-weight: 700;
  text-transform: uppercase;
}

.promo-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #FFF;
  margin: 4px 0 6px 0;
  letter-spacing: 0.03em;
}

.promo-subtitle {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: #94A3B8;
  line-height: 1.45;
  margin: 0;
}

.promo-features-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.promo-feature-card {
  background: rgba(14, 29, 43, 0.75);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.promo-feature-card:hover {
  border-color: var(--gold-primary);
  transform: translateY(-2px);
}

.feature-loc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(216, 174, 98, 0.12);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.68rem;
  color: var(--gold-light);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.feature-visual-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.feature-thumb {
  flex-shrink: 0;
}

.deck-thumb img {
  width: 36px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(216, 174, 98, 0.6);
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.4);
}

.chat-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(46, 204, 113, 0.15);
  border: 1.5px solid #2ECC71;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.4);
}

.feature-text h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold-light);
  margin: 0 0 4px 0;
  letter-spacing: 0.02em;
}

.feature-text p {
  font-size: 0.76rem;
  color: #CBD5E1;
  line-height: 1.45;
  margin: 0;
}

.feature-text strong {
  color: #FFF;
}

.promo-instructions-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

.promo-step-item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.72rem;
  color: #94A3B8;
  line-height: 1.35;
}

.promo-step-item .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(216, 174, 98, 0.18);
  border: 1px solid rgba(216, 174, 98, 0.45);
  color: var(--gold-light);
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.promo-step-item strong {
  color: var(--gold-light);
}

.promo-ceremonial-progress-block {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(216, 174, 98, 0.2);
}

.promo-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid rgba(216, 174, 98, 0.25);
}

.promo-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #B46E47, #D8AE62, #FAF5E8);
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.8);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-hermetic, .feature-neural {
  border-color: rgba(216, 174, 98, 0.35);
}

.hermetic-thumb, .neural-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.promo-footer-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 4px;
}

.promo-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(216, 174, 98, 0.3);
  border-top-color: var(--gold-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.promo-loading-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--gold-light);
}

/* Casas Prioritárias de Intervenção em Prosa Contínua */
.narrativa-casas-prioritarias {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.orientacao-para {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.6;
  color: #E2E8F0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(14, 29, 43, 0.35);
  border-left: 3px solid rgba(216, 174, 98, 0.4);
  transition: all 0.25s ease;
  cursor: pointer;
  margin-bottom: 0;
}

.orientacao-para:hover {
  background: rgba(216, 174, 98, 0.08);
  border-left-color: var(--gold-primary);
}

.orientacao-casa-label {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  margin-right: 6px;
}

/* Karaokê Frase a Frase & Iluminação Mantida no Altar */
.karaoke-phrase {
  display: inline;
  padding: 1px 2px;
  border-radius: 3px;
  transition: background-color 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
  cursor: pointer;
}

.karaoke-phrase:hover {
  background-color: rgba(216, 174, 98, 0.15);
}

.karaoke-phrase.active-phrase {
  background: linear-gradient(90deg, rgba(216, 174, 98, 0.35), rgba(216, 174, 98, 0.2));
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(216, 174, 98, 0.8), 0 0 20px rgba(216, 174, 98, 0.4);
  border-bottom: 2px solid var(--gold-primary);
  font-weight: 500;
}

.karaoke-phrase.card-chip-ancestral.active-phrase,
.karaoke-phrase[data-origem="anterior"].active-phrase {
  background: linear-gradient(90deg, rgba(255, 77, 77, 0.45), rgba(255, 77, 77, 0.25)) !important;
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(255, 42, 42, 0.95), 0 0 22px rgba(255, 77, 77, 0.6) !important;
  border-bottom: 2px solid #ff4d4d !important;
  font-weight: 600;
}

.reading-para-map-item {
  position: relative;
  transition: all 0.25s ease;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 6px;
}

.reading-para-map-item:hover {
  background: rgba(216, 174, 98, 0.06);
}

.reading-para-active {
  border-left: 2px solid var(--gold-primary) !important;
}

@keyframes litCardPulse {
  0%, 100% {
    box-shadow: 
      0 0 13.2px 3.5px #ff2a2a,
      0 0 28px rgba(255, 42, 42, 0.75),
      inset 0 0 10px rgba(255, 77, 77, 0.5) !important;
  }
  50% {
    box-shadow: 
      0 0 15px 4px #ff3333,
      0 0 34px rgba(255, 42, 42, 0.9),
      inset 0 0 12px rgba(255, 77, 77, 0.65) !important;
  }
}

.card-slot-v2.chip-selected-pulse .slot-frame,
.card-slot-v2.focus-highlight .slot-frame {
  border-color: #ff4d4d !important;
  animation: litCardPulse 2s infinite ease-in-out !important;
}

/* 4. Adaptações Responsivas no Mobile */
@media (max-width: 900px) {
  .floating-chat-card {
    left: 12px !important;
    right: 12px !important;
    bottom: 84px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: min(540px, calc(100vh - 120px)) !important;
    max-height: calc(100vh - 120px) !important;
    padding: 14px !important;
    z-index: 960 !important;
  }

  .deck-modal-dialog {
    padding: 18px 14px !important;
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }

  .deck-text-area-ampliado {
    min-height: 70px !important;
    font-size: 0.88rem !important;
    padding: 10px !important;
  }

  .altar-waiting-promo-card {
    width: 95% !important;
    padding: 18px 14px !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
  }

  .promo-features-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .promo-title {
    font-size: 1.1rem !important;
  }

  .chat-fullscreen-modal {
    width: 95% !important;
    padding: 24px 16px !important;
    font-size: 1.05rem !important;
  }
}

/* =========================================================================
   5. BOTÕES DE REVELAÇÃO RÁPIDA (ALTAR & MODAL DO BARALHO - CONFORME PRINT)
   ========================================================================= */
.btn-quick-reveal-all {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.22), rgba(180, 110, 71, 0.25));
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-quick-reveal-all:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.4), rgba(180, 110, 71, 0.45));
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(216, 174, 98, 0.4);
  transform: translateY(-1px);
}

.deck-reveal-actions-block {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(4, 10, 18, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.35);
  border-radius: 10px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.5);
}

.deck-reveal-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.deck-reveal-header strong {
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--gold-light);
  letter-spacing: 0.05em;
}

.deck-reveal-header small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.deck-reveal-buttons-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-deck-reveal-next,
.btn-deck-reveal-all {
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  border: 1px solid rgba(216, 174, 98, 0.4);
}

.btn-deck-reveal-next {
  background: rgba(18, 30, 48, 0.85);
  color: var(--text-bright);
}

.btn-deck-reveal-next:hover {
  background: rgba(26, 42, 68, 0.95);
  border-color: var(--gold-primary);
  color: var(--gold-light);
}

.btn-deck-reveal-all {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.2), rgba(180, 110, 71, 0.3));
  color: var(--gold-light);
  border-color: var(--gold-primary);
}

.btn-deck-reveal-all:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.4), rgba(180, 110, 71, 0.5));
  color: #FFF;
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.35);
}

@media (max-width: 600px) {
  .deck-reveal-buttons-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .altar-hud-top {
    transform: translate(-50%, -50%) scale(1.0) !important;
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    padding: 16px 12px !important;
    z-index: 850 !important;
  }

  .altar-enter-box-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: stretch;
  }

  .btn-quick-reveal-all {
    justify-content: center;
    padding: 10px;
    font-size: 0.85rem;
  }

  .pane-history-cycles {
    transform: translateX(-100%) !important;
  }

  .pane-history-cycles.open {
    transform: translateX(0) !important;
  }
}

/* Ocultação solicitada dos dois blocos de veredito supérfluos no painel da leitura */
#cardVereditoOrientacao,
#cardVereditoCelebracao {
  display: none !important;
}

/* Transições fluidas e harmoniosas para iluminação no Altar 3D */
.card-slot-v2 {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease !important;
}

.card-slot-v2 .slot-frame {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease !important;
}

.cards-grid-4x5.dimmed .card-slot-v2:not(.focus-highlight):not(.chip-selected-pulse) {
  opacity: 1 !important;
  filter: none !important;
}

.card-slot-v2.focus-highlight,
.card-slot-v2.chip-selected-pulse {
  z-index: 180 !important;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* ==========================================================================
   6. ATIVAÇÃO DAS PÁGINAS SECUNDÁRIAS & SCROLL VERTICAL COMPLETO
   ========================================================================== */
.header-center {
  display: flex;
  align-items: center;
  gap: 14px;
}

#roleSwitcher {
  display: none;
}

#viewLive,
#viewReferrer,
#viewAdmin,
.live-layout,
.referrer-layout,
.admin-layout {
  width: 100%;
  height: calc(100vh - 52px) !important;
  max-height: calc(100vh - 52px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px 32px 110px 32px !important;
  box-sizing: border-box !important;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-primary) rgba(7, 19, 31, 0.9);
}

#viewLive::-webkit-scrollbar,
#viewReferrer::-webkit-scrollbar,
#viewAdmin::-webkit-scrollbar,
.checkout-modal-card::-webkit-scrollbar,
.modal-dialog-conversion::-webkit-scrollbar,
.modal-dialog-preview::-webkit-scrollbar,
.connections-modal-card::-webkit-scrollbar,
.commission-modal-card::-webkit-scrollbar,
.dock-menu::-webkit-scrollbar {
  width: 8px;
}

#viewLive::-webkit-scrollbar-track,
#viewReferrer::-webkit-scrollbar-track,
#viewAdmin::-webkit-scrollbar-track,
.checkout-modal-card::-webkit-scrollbar-track,
.modal-dialog-conversion::-webkit-scrollbar-track,
.modal-dialog-preview::-webkit-scrollbar-track,
.connections-modal-card::-webkit-scrollbar-track,
.commission-modal-card::-webkit-scrollbar-track,
.dock-menu::-webkit-scrollbar-track {
  background: rgba(7, 19, 31, 0.9);
  border-radius: 4px;
}

#viewLive::-webkit-scrollbar-thumb,
#viewReferrer::-webkit-scrollbar-thumb,
#viewAdmin::-webkit-scrollbar-thumb,
.checkout-modal-card::-webkit-scrollbar-thumb,
.modal-dialog-conversion::-webkit-scrollbar-thumb,
.modal-dialog-preview::-webkit-scrollbar-thumb,
.connections-modal-card::-webkit-scrollbar-thumb,
.commission-modal-card::-webkit-scrollbar-thumb,
.dock-menu::-webkit-scrollbar-thumb {
  background: var(--gold-primary);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(216, 174, 98, 0.5);
}

.referrer-layout .dashboard-box,
.admin-layout .dashboard-box {
  max-width: 1280px;
  margin: 0 auto 40px auto;
}

/* Garantir scroll interno e externo fluido e z-index soberano em todos os modais */
.preview-card-modal,
.conversion-modal,
.full-reading-modal,
.card-inspection-modal,
.zaoio-modal-backdrop,
.live-public-scene-overlay {
  overflow-y: auto !important;
  z-index: 10005 !important;
}

.btn-close-modal,
.btn-close-inspection {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  background: rgba(216, 174, 98, 0.14) !important;
  border: 1px solid rgba(216, 174, 98, 0.45) !important;
  color: var(--gold-light, #F5D77F) !important;
  font-size: 1.25rem !important;
  font-weight: 300 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.btn-close-modal:hover,
.btn-close-inspection:hover {
  background: rgba(216, 174, 98, 0.3) !important;
  border-color: var(--gold-light, #F5D77F) !important;
  color: #FFF !important;
  transform: scale(1.06) !important;
}

.checkout-modal-card,
.modal-dialog-conversion,
.modal-dialog-preview,
.connections-modal-card,
.commission-modal-card {
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.dock-menu {
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  width: 330px;
}

.dev-role-dock {
  flex-direction: column-reverse !important;
  z-index: 950 !important;
}

/* ==========================================================================
   7. PORTÃO DE ENTRADA CONTA GOOGLE & BIFURCAÇÃO DE LINKS (LIVE VS CAMPANHA)
   ========================================================================== */
.google-auth-gate-card {
  max-width: 540px;
  width: 94%;
  padding: 34px 32px;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(22, 48, 72, 0.98) 0%, rgba(6, 15, 25, 0.99) 100%);
  border: 1.5px solid rgba(216, 174, 98, 0.55);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(216, 174, 98, 0.18);
  position: relative;
}

.google-gate-emblem {
  margin: 0 auto 12px auto;
  display: flex;
  justify-content: center;
}

.google-auth-gate-card h2 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  color: var(--gold-light);
  margin: 6px 0 10px 0;
  letter-spacing: 0.06em;
}

.google-gate-subtitle {
  font-size: 0.92rem;
  color: #B4C6D8;
  line-height: 1.5;
  margin-bottom: 20px;
}

.gate-link-origin-selector {
  background: rgba(10, 22, 36, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.28);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 22px;
}

.origin-selector-label {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-primary);
  margin-bottom: 10px;
  font-weight: 700;
}

.origin-pills-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn-origin-mode {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(216, 174, 98, 0.3);
  background: rgba(14, 29, 45, 0.7);
  color: #C2D2E2;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-origin-mode.active {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.28), rgba(216, 174, 98, 0.12));
  border-color: var(--gold-primary);
  color: var(--gold-light);
  box-shadow: 0 0 15px rgba(216, 174, 98, 0.25);
}

.google-gate-action-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.btn-google-one-click-login {
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1.5px solid #4285F4;
  background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
  color: #0F172A;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(66, 133, 244, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-google-one-click-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(66, 133, 244, 0.5);
}

.google-g-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);
  color: #FFF;
  font-weight: 900;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.google-gate-security-note {
  font-size: 0.76rem;
  color: #8CA0B6;
}

/* Barra de Conta Google + Alternador no Acolhimento */
.landing-top-auth-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(216, 174, 98, 0.2);
}

.authenticated-google-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(43, 179, 116, 0.14);
  border: 1px solid rgba(43, 179, 116, 0.45);
  color: #A7F3D0;
  font-size: 0.78rem;
}

.landing-reality-switcher {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-reality-switch {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(216, 174, 98, 0.3);
  background: rgba(10, 22, 36, 0.8);
  color: #B4C6D8;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-reality-switch.active {
  background: rgba(216, 174, 98, 0.25);
  border-color: var(--gold-primary);
  color: var(--gold-light);
}

/* Card Sorteado das 78 Cartas no Link de Live (Substituto do Print 1) */
.live-drawn-card-banner {
  display: flex !important;
  align-items: center;
  gap: 18px;
  padding: 16px 20px !important;
  background: linear-gradient(135deg, rgba(16, 34, 54, 0.95), rgba(8, 19, 31, 0.98)) !important;
  border: 1.5px solid var(--gold-primary) !important;
  border-radius: 14px;
  margin-bottom: 16px;
}

.drawn-card-visual-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.landing-live-card-thumb {
  width: 78px;
  height: 122px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--gold-primary);
  box-shadow: 0 0 18px rgba(216, 174, 98, 0.45);
}

.btn-redraw-78 {
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(216, 174, 98, 0.4);
  background: rgba(14, 29, 45, 0.9);
  color: var(--gold-light);
  cursor: pointer;
}

.drawn-card-text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.drawn-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.tiktok-char-counter {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(92, 169, 214, 0.18);
  border: 1px solid rgba(92, 169, 214, 0.45);
  color: #92DCFF;
}

.tiktok-copy-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(5, 12, 20, 0.9);
  border: 1px solid rgba(216, 174, 98, 0.4);
  border-radius: 10px;
  padding: 10px 12px;
}

.tiktok-formatted-phrase {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: #FAF5E8;
  line-height: 1.4;
  word-break: break-word;
}

.live-only-journey-card {
  width: 100%;
  max-width: 100%;
}

.landing-input-text {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(216, 174, 98, 0.35);
  background: rgba(5, 13, 22, 0.88);
  color: #FAF5E8;
  font-size: 0.88rem;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* ==========================================================================
   8. BANNERS FLUTUANTES NA MESA PRINCIPAL & CADEADOS DO TESTE GRATUITO
   ========================================================================== */
/* ==========================================================================
   8. BANNERS FLUTUANTES NA MESA PRINCIPAL & CADEADOS DO TESTE GRATUITO
   ========================================================================== */
.live-main-table-floating-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(8, 19, 31, 0.94);
  border: 1.5px solid var(--gold-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 15px rgba(216, 174, 98, 0.25);
  max-width: 420px;
  width: auto;
  backdrop-filter: blur(8px);
  user-select: none;
}

.live-mt-drag-handle {
  cursor: grab;
  color: var(--gold-primary);
  font-size: 0.95rem;
  letter-spacing: -2px;
  padding: 2px 4px;
  user-select: none;
  opacity: 0.85;
}
.live-mt-drag-handle:active {
  cursor: grabbing;
  opacity: 1;
}

.btn-live-mt-minimize {
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: var(--gold-light);
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-live-mt-minimize:hover {
  background: rgba(230, 57, 70, 0.3);
  border-color: #E63946;
  color: #FFF;
}

.live-banner-collapsed-pill {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 260;
  background: linear-gradient(135deg, #E63946, #D90429);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(230, 57, 70, 0.7), 0 0 10px rgba(230, 57, 70, 0.4);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: pulseNeonRed 2s infinite ease-in-out;
}
@keyframes pulseNeonRed {
  0% { box-shadow: 0 4px 14px rgba(230, 57, 70, 0.6); }
  50% { box-shadow: 0 4px 22px rgba(230, 57, 70, 0.9), 0 0 14px rgba(255, 255, 255, 0.6); }
  100% { box-shadow: 0 4px 14px rgba(230, 57, 70, 0.6); }
}

.trial-solo-floating-banner {
  display: none !important;
}

.live-mt-left,
.trial-mt-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #FAF5E8;
}

.live-mt-dot {
  background: #E53935;
  color: #FFF;
  font-weight: 800;
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.06em;
}

.live-mt-card-tag,
.trial-mt-badge {
  background: rgba(216, 174, 98, 0.2);
  border: 1px solid rgba(216, 174, 98, 0.5);
  color: var(--gold-light);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
}

.live-mt-actions,
.trial-mt-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-live-mt-scene,
.btn-trial-mt-unlock {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--gold-primary);
  background: linear-gradient(135deg, #D8AE62, #B68634);
  color: #07131F;
  font-weight: 800;
  font-size: 0.72rem;
  cursor: pointer;
}

.btn-live-mt-back {
  padding: 4px 9px;
  border-radius: 14px;
  border: 1px solid rgba(92, 169, 214, 0.5);
  background: rgba(14, 29, 45, 0.9);
  color: #92DCFF;
  font-weight: 600;
  font-size: 0.72rem;
  cursor: pointer;
}

/* Painel Nobre com Aura Sagrada para o Consulente da Live (Estética Sagrada ZAOIO) */
.live-spectator-waiting-cloud {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  background: linear-gradient(145deg, rgba(10, 20, 32, 0.96), rgba(6, 12, 20, 0.98));
  border: 1.5px solid #D8AE62;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(216, 174, 98, 0.35);
  border-radius: 20px;
  padding: 18px 22px;
  text-align: center;
  max-width: 540px;
  width: calc(100% - 32px);
  backdrop-filter: blur(14px);
  color: #FAF5E8;
  animation: cloudPulseAura 3s infinite alternate ease-in-out;
}
@keyframes cloudPulseAura {
  0% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 18px rgba(216, 174, 98, 0.25); }
  100% { box-shadow: 0 12px 38px rgba(0, 0, 0, 0.85), 0 0 28px rgba(216, 174, 98, 0.45); }
}

.live-spectator-waiting-cloud .waiting-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.live-spectator-waiting-cloud .waiting-card-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #FAF5E8;
  background: rgba(216, 174, 98, 0.16);
  border: 1px solid rgba(216, 174, 98, 0.4);
  border-radius: 12px;
  padding: 3px 10px;
  text-transform: uppercase;
}
.live-spectator-waiting-cloud .btn-close-waiting-card {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
.live-spectator-waiting-cloud .btn-close-waiting-card:hover {
  color: #FAF5E8;
}

.live-spectator-waiting-cloud .waiting-participants-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.live-spectator-waiting-cloud .participant-badge {
  flex: 1;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
  text-align: left;
}
.live-spectator-waiting-cloud .participant-badge.streamer {
  border-color: rgba(92, 169, 214, 0.4);
  background: rgba(92, 169, 214, 0.08);
  color: #5CA9D6;
}
.live-spectator-waiting-cloud .participant-badge.spectator {
  border-color: rgba(216, 174, 98, 0.4);
  background: rgba(216, 174, 98, 0.08);
  color: #D8AE62;
}
.live-spectator-waiting-cloud .participant-badge .role-lbl {
  font-size: 0.68rem;
  display: block;
  opacity: 0.85;
}

.live-spectator-waiting-cloud .waiting-card-main-msg,
.live-spectator-waiting-cloud .cloud-main-msg {
  font-size: 0.94rem;
  font-weight: 700;
  color: #FAF5E8;
  line-height: 1.4;
  text-shadow: 0 0 10px rgba(216, 174, 98, 0.3);
  margin-bottom: 12px;
}
.live-spectator-waiting-cloud .cloud-streamer-nick {
  color: #5CA9D6;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.live-spectator-waiting-cloud .waiting-possibilities-box {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  border: 1px solid rgba(216, 174, 98, 0.2);
  padding: 10px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.live-spectator-waiting-cloud .possibility-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.76rem;
  color: #CCD6E0;
  line-height: 1.35;
}
.live-spectator-waiting-cloud .possibility-icon {
  font-size: 0.88rem;
  flex-shrink: 0;
}
.live-spectator-waiting-cloud .possibility-text strong {
  color: #FAF5E8;
}

.live-spectator-waiting-cloud .waiting-card-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.live-spectator-waiting-cloud .btn-waiting-live-tiktok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #1C5384, #0F2D48);
  border: 1px solid #5CA9D6;
  color: #FFF;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 8px 18px;
  border-radius: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.live-spectator-waiting-cloud .btn-waiting-live-tiktok:hover {
  background: linear-gradient(135deg, #256bb0, #133a5e);
  box-shadow: 0 0 14px rgba(92, 169, 214, 0.5);
  color: #FFF;
}
.live-spectator-waiting-cloud .btn-waiting-ok-minimize {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.35), rgba(216, 174, 98, 0.65));
  border: 1px solid #D8AE62;
  color: #FAF5E8;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 8px 18px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.live-spectator-waiting-cloud .btn-waiting-ok-minimize:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.5), rgba(216, 174, 98, 0.85));
  box-shadow: 0 0 14px rgba(216, 174, 98, 0.4);
}
.live-spectator-waiting-cloud .btn-waiting-buy-shortcut {
  background: transparent;
  border: 1px solid rgba(92, 169, 214, 0.5);
  color: #5CA9D6;
  font-weight: 700;
  font-size: 0.80rem;
  padding: 8px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.live-spectator-waiting-cloud .btn-waiting-buy-shortcut:hover {
  background: rgba(92, 169, 214, 0.12);
}

/* Pill de Status da Live no Topo da Mesa (Aguardando / Liberado) */
.live-waiting-top-pill {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 920;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 20, 32, 0.94);
  border: 1.5px solid rgba(216, 174, 98, 0.7);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(216, 174, 98, 0.3);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  color: #FAF5E8;
  font-size: 0.78rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  animation: livePillSlowPulse 27s infinite ease-in-out;
}
@keyframes livePillSlowPulse {
  0%, 94%, 100% {
    border-color: rgba(216, 174, 98, 0.7);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(216, 174, 98, 0.3);
  }
  97% {
    border-color: #5CA9D6;
    box-shadow: 0 4px 22px rgba(92, 169, 214, 0.7), 0 0 22px rgba(92, 169, 214, 0.5);
  }
}
.live-waiting-top-pill.liberated {
  border-color: #2EC4B6 !important;
  background: rgba(6, 28, 30, 0.96) !important;
  box-shadow: 0 0 22px rgba(46, 196, 182, 0.5) !important;
  color: #A7F3D0 !important;
}
.live-waiting-top-pill .live-pill-status-dot {
  font-size: 0.88rem;
}
.live-waiting-top-pill .live-pill-info-icon {
  font-size: 0.72rem;
  opacity: 0.8;
}
.live-waiting-top-pill .btn-close-live-top-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #FAF5E8;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.live-waiting-top-pill .btn-close-live-top-pill:hover {
  background: rgba(231, 76, 60, 0.85);
  border-color: #FF8A80;
  color: #FFFFFF;
  transform: scale(1.08);
}

/* Inteligência de Vendas no Modo Live: Badges de Contagem de Teste por E-mail */
.live-selected-test-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: fit-content;
}
.live-selected-test-count-badge.badge-primeiro-teste {
  background: rgba(46, 196, 182, 0.16);
  border: 1px solid rgba(46, 196, 182, 0.7);
  color: #2EC4B6;
  box-shadow: 0 0 10px rgba(46, 196, 182, 0.25);
}
.live-selected-test-count-badge.badge-primeiro-teste strong {
  color: #A7F3D0;
}
.live-selected-test-count-badge.badge-recorrente {
  background: rgba(216, 174, 98, 0.18);
  border: 1px solid rgba(216, 174, 98, 0.75);
  color: #F3CA7E;
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.25);
}
.live-selected-test-count-badge.badge-recorrente strong {
  color: #FFE6A7;
}

.showcase-test-pill {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin: 4px auto 6px auto;
  text-align: center;
  width: fit-content;
  letter-spacing: 0.02em;
}
.showcase-test-pill.pill-inedito {
  background: rgba(46, 196, 182, 0.2);
  border: 1px solid rgba(46, 196, 182, 0.6);
  color: #2EC4B6;
}
.showcase-test-pill.pill-recorrente {
  background: rgba(216, 174, 98, 0.22);
  border: 1px solid rgba(216, 174, 98, 0.7);
  color: #F3CA7E;
}

.queue-row-test-tag {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 6px;
  display: inline-block;
}
.queue-row-test-tag.tag-inedito {
  background: rgba(46, 196, 182, 0.18);
  color: #2EC4B6;
  border: 1px solid rgba(46, 196, 182, 0.5);
}
.queue-row-test-tag.tag-recorrente {
  background: rgba(216, 174, 98, 0.2);
  color: #F3CA7E;
  border: 1px solid rgba(216, 174, 98, 0.55);
}

/* Abas de Escolha de Modo no Card de Acolhimento da Live (Live Stream vs Teste Solo 250 ✦) */
.live-entry-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
  background: rgba(7, 19, 31, 0.7);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(216, 174, 98, 0.25);
}
.btn-live-entry-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #8C9BAE;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}
.btn-live-entry-tab .tab-icon {
  font-size: 1.15rem;
}
.btn-live-entry-tab .tab-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #BAC7D5;
}
.btn-live-entry-tab .tab-sub {
  font-size: 0.68rem;
  color: #718096;
}
.btn-live-entry-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #FAF5E8;
}
.btn-live-entry-tab.active {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.2), rgba(92, 169, 214, 0.15));
  border-color: rgba(216, 174, 98, 0.65);
  box-shadow: 0 0 14px rgba(216, 174, 98, 0.25);
}
.btn-live-entry-tab.active .tab-label {
  color: #FFE58F;
}
.btn-live-entry-tab.active .tab-sub {
  color: #D8AE62;
}

/* Badges de Modalidade na Fila do Console Live */
.showcase-entry-pill {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.showcase-entry-pill.entry-live {
  background: rgba(246, 135, 179, 0.18);
  border: 1px solid rgba(246, 135, 179, 0.6);
  color: #FBB6CE;
}
.showcase-entry-pill.entry-solo {
  background: rgba(46, 196, 182, 0.18);
  border: 1px solid rgba(46, 196, 182, 0.65);
  color: #A7F3D0;
}

.queue-row-entry-tag {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 6px;
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
}
.queue-row-entry-tag.entry-live {
  background: rgba(246, 135, 179, 0.15);
  color: #FBB6CE;
  border: 1px solid rgba(246, 135, 179, 0.4);
}
.queue-row-entry-tag.entry-solo {
  background: rgba(46, 196, 182, 0.15);
  color: #A7F3D0;
  border: 1px solid rgba(46, 196, 182, 0.45);
}

.live-selected-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 4px;
  width: fit-content;
}
.live-selected-mode-badge.mode-solo {
  background: rgba(46, 196, 182, 0.16);
  border: 1px solid rgba(46, 196, 182, 0.65);
  color: #A7F3D0;
}
.live-selected-mode-badge.mode-live {
  background: rgba(246, 135, 179, 0.16);
  border: 1px solid rgba(246, 135, 179, 0.65);
  color: #FBB6CE;
}

.btn-concluir-atendimento-item {
  background: rgba(46, 196, 182, 0.2);
  border: 1px solid rgba(46, 196, 182, 0.6);
  color: #A7F3D0;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.68rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-concluir-atendimento-item:hover {
  background: rgba(46, 196, 182, 0.4);
  transform: translateY(-1px);
}


/* Botão Play Flutuante no Canto Inferior Direito do Altar da Cena 9:16 (Rente à borda direita e tangente ao quadro da câmera, fora do Altar) */
.scene-zone-middle-altar .btn-scene-playpause-live {
  position: absolute !important;
  bottom: 0px !important;
  right: 0px !important;
  z-index: 120 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  background: linear-gradient(135deg, rgba(16, 42, 67, 0.96), rgba(7, 19, 31, 0.99)) !important;
  border: 1.5px solid rgba(216, 174, 98, 0.85) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.75), 0 0 10px rgba(216, 174, 98, 0.4) !important;
  border-radius: 14px !important;
  color: #F3CA7E !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.scene-zone-middle-altar .btn-scene-playpause-live:hover {
  transform: translateY(-1px);
  border-color: #F3CA7E;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.8), 0 0 14px rgba(216, 174, 98, 0.6);
}

/* Painel Promocional Soberano da Live (Entre Tiragens e Modo Espera na Cena 9:16 - Zero Scroll) */
.scene-cloned-cascades-viewport.is-promo-mode {
  overflow: hidden !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}
.scene-cloned-cascades-viewport.is-promo-mode .scene-cloned-cascades-content {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}
.scene-live-promo-broadcast {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 3px 10px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 1px;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(16, 42, 67, 0.75) 0%, rgba(4, 10, 18, 0.96) 100%);
  border: 1px solid rgba(216, 174, 98, 0.4);
  border-radius: 10px;
  box-shadow: inset 0 0 16px rgba(216, 174, 98, 0.12);
}
.promo-broadcast-badge {
  font-size: clamp(0.52rem, 1.25vh, 0.64rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(216, 174, 98, 0.9);
  text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap;
}
.promo-broadcast-main-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 1.05;
}
.promo-broadcast-brand {
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 2.2vh, 1.24rem);
  font-weight: 900;
  color: #D8AE62;
  letter-spacing: 0.1em;
  text-shadow: 0 0 12px rgba(216, 174, 98, 0.65);
  line-height: 1.05;
}
.promo-broadcast-sep {
  color: rgba(216, 174, 98, 0.6);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.8vh, 1rem);
}
.promo-broadcast-credits {
  font-family: var(--font-display);
  font-size: clamp(0.86rem, 2.05vh, 1.12rem);
  font-weight: 900;
  color: #F8D98C;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(248, 217, 140, 0.55);
  line-height: 1.05;
}
.promo-broadcast-sub {
  font-size: clamp(0.62rem, 1.45vh, 0.76rem);
  font-weight: 700;
  color: #A7F3D0;
  text-shadow: 0 0 8px rgba(46, 196, 182, 0.35);
  letter-spacing: 0.01em;
  line-height: 1.08;
  white-space: nowrap;
}
.promo-broadcast-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 1px;
  line-height: 1;
}
.promo-broadcast-price {
  font-family: var(--font-display);
  font-size: clamp(0.94rem, 2.2vh, 1.2rem);
  font-weight: 900;
  color: #2EC4B6;
  text-shadow: 0 0 14px rgba(46, 196, 182, 0.8), 0 1px 3px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
}
.promo-broadcast-link-pill {
  position: static !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  background: rgba(216, 174, 98, 0.18);
  border: 1px solid rgba(216, 174, 98, 0.7);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: clamp(0.56rem, 1.35vh, 0.68rem);
  font-weight: 800;
  color: #FAF5E8;
  letter-spacing: 0.05em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Botão de LIVE ESPERA no Cabeçalho do Console Live TikTok */
.btn-live-espera-toggle {
  background: rgba(216, 174, 98, 0.18) !important;
  border-color: rgba(216, 174, 98, 0.6) !important;
  color: #F3CA7E !important;
  font-weight: 700;
  transition: all 0.25s ease;
}
.btn-live-espera-toggle:hover {
  background: rgba(216, 174, 98, 0.3) !important;
  border-color: var(--gold-primary) !important;
  color: #FFF !important;
  box-shadow: 0 0 14px rgba(216, 174, 98, 0.4);
}
.btn-live-espera-toggle.active {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.9), rgba(180, 110, 71, 0.95)) !important;
  color: #040A12 !important;
  font-weight: 900 !important;
  border-color: #FFF !important;
  box-shadow: 0 0 20px rgba(216, 174, 98, 0.8), 0 0 8px #FFF !important;
  animation: pulseEsperaBtn 2s infinite ease-in-out;
}
@keyframes pulseEsperaBtn {
  0% { transform: scale(1); box-shadow: 0 0 14px rgba(216, 174, 98, 0.6); }
  50% { transform: scale(1.03); box-shadow: 0 0 24px rgba(216, 174, 98, 0.9), 0 0 12px #2EC4B6; }
  100% { transform: scale(1); box-shadow: 0 0 14px rgba(216, 174, 98, 0.6); }
}
  box-shadow: 0 0 12px rgba(216, 174, 98, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Botões de Exclusão Nobres de Ciclos, Episódios e Fila */
.btn-delete-item-trash {
  background: transparent;
  border: none;
  color: rgba(230, 57, 70, 0.65);
  font-size: 0.82rem;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
}
.btn-delete-item-trash:hover {
  color: #FF4D4D;
  background: rgba(230, 57, 70, 0.2);
  transform: scale(1.1);
}
.btn-delete-queue-item {
  background: rgba(230, 57, 70, 0.15);
  border: 1px solid rgba(230, 57, 70, 0.4);
  color: #FFAAA6;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
}
.btn-delete-queue-item:hover {
  background: #E63946;
  color: #FFF;
}

/* Cadeado Nobre sobre os Pergaminhos Bloqueados no Teste Gratuito */
.trial-locked-container {
  position: relative !important;
  overflow: hidden !important;
}

.trial-locked-container > *:not(.trial-padlock-overlay) {
  filter: blur(4.5px);
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}

.trial-padlock-overlay {
  position: absolute;
  inset: 0;
  z-index: 45;
  background: linear-gradient(180deg, rgba(7, 19, 31, 0.65) 0%, rgba(7, 19, 31, 0.92) 100%);
  border: 1.5px solid rgba(216, 174, 98, 0.55);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  gap: 8px;
  backdrop-filter: blur(2px);
}

.trial-padlock-icon {
  font-size: 1.9rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(216, 174, 98, 0.18);
  border: 1.5px solid var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(216, 174, 98, 0.35);
}

.trial-padlock-overlay h5 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-light);
  letter-spacing: 0.05em;
  margin: 0;
}

.trial-padlock-overlay p {
  font-size: 0.8rem;
  color: #B4C6D8;
  max-width: 380px;
  margin: 0;
  line-height: 1.4;
}

.btn-unlock-padlock-cta {
  margin-top: 6px;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--gold-light);
  background: linear-gradient(135deg, #D8AE62 0%, #B3832D 100%);
  color: #07131F;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(216, 174, 98, 0.4);
  transition: transform 0.2s ease;
}

.btn-unlock-padlock-cta:hover {
  transform: scale(1.04);
}

/* ==========================================================================
   9. ABA LIVE TIKTOK REFORMULADA EM 3 COLUNAS (PRINTS 2 E 3)
   ========================================================================== */
.live-three-columns-refactored {
  display: grid !important;
  grid-template-columns: 370px 1fr 350px !important;
  gap: 18px !important;
  align-items: start !important;
}

@media (max-width: 1280px) {
  .live-three-columns-refactored {
    grid-template-columns: 1fr !important;
  }
}

.live-left-deck-clone-pane {
  background: rgba(8, 19, 31, 0.94);
  border: 1.5px solid rgba(216, 174, 98, 0.45);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.65);
}

.live-cloned-deck-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.live-selected-spectator-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 12px 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(20, 42, 66, 0.9), rgba(10, 22, 36, 0.95));
  border: 1px solid var(--gold-primary);
}

.live-mini-card-thumb {
  width: 46px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1.5px solid var(--gold-primary);
  flex-shrink: 0;
}

.live-selected-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.live-selected-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.live-selected-top-row strong {
  color: var(--gold-light);
  font-size: 0.92rem;
}

.live-selected-order-tag {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(216, 174, 98, 0.22);
  color: var(--gold-primary);
}

.live-selected-card-tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: #92DCFF;
}

.live-selected-meta small {
  font-size: 0.7rem;
  color: #8CA0B6;
}

/* Coluna Central: Vitrine das Cartas da Fila por Ordem de Chegada */
.live-center-showcase-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(8, 19, 31, 0.9);
  border: 1px solid rgba(216, 174, 98, 0.35);
  border-radius: 16px;
  padding: 16px;
}

.live-queue-cards-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 14px;
  min-height: 360px;
  padding: 6px 2px;
}

.live-showcase-card-item,
.showcase-queue-card-item {
  background: linear-gradient(180deg, rgba(16, 33, 52, 0.92) 0%, rgba(8, 18, 29, 0.98) 100%);
  border: 1.5px solid rgba(216, 174, 98, 0.35);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.live-showcase-card-item:hover,
.showcase-queue-card-item:hover {
  transform: translateY(-3px);
  border-color: var(--gold-primary);
}

.live-showcase-card-item.active-drawn,
.showcase-queue-card-item.drawn-winner {
  border: 2px solid var(--gold-light);
  box-shadow: 0 0 24px rgba(216, 174, 98, 0.55);
  background: linear-gradient(180deg, rgba(38, 62, 90, 0.95) 0%, rgba(14, 29, 45, 0.98) 100%);
}

.live-showcase-card-item.roulette-flash {
  border-color: #FF3B30 !important;
  box-shadow: 0 0 28px rgba(255, 59, 48, 0.85) !important;
  transform: scale(1.04);
}

.showcase-order-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(7, 19, 31, 0.92);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 8px;
  z-index: 3;
}

.showcase-card-img-wrap,
.showcase-card-art-wrap {
  width: 96px !important;
  height: 148px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  min-height: 148px !important;
  max-height: 148px !important;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--gold-primary);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.showcase-card-img-wrap img,
.showcase-card-art-wrap img,
#liveQueueCardsShowcaseGrid img {
  width: 96px !important;
  height: 148px !important;
  max-width: 96px !important;
  max-height: 148px !important;
  object-fit: cover !important;
  display: block !important;
}

.showcase-nick,
.showcase-nick-pill {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold-light);
  margin-top: 14px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase-card-hashtag,
.showcase-card-title {
  font-size: 0.73rem;
  font-weight: 700;
  color: #92DCFF;
  line-height: 1.25;
}

.btn-showcase-unlock-ritual,
.btn-showcase-unlock-single {
  width: 100%;
  margin-top: auto;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(92, 169, 214, 0.45);
  background: rgba(14, 34, 54, 0.9);
  color: #92DCFF;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-showcase-unlock-ritual.unlocked,
.btn-showcase-unlock-single.unlocked {
  border-color: rgba(43, 179, 116, 0.65);
  background: rgba(16, 52, 38, 0.9);
  color: #6EE7B7;
}

.live-center-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(14, 29, 45, 0.88);
  border: 1px solid rgba(216, 174, 98, 0.4);
  flex-wrap: wrap;
}

.center-footer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.center-footer-info span {
  font-size: 0.82rem;
  color: var(--gold-light);
}

.center-footer-info small {
  font-size: 0.74rem;
  color: #9FB2C6;
}

.btn-unlock-all-live-banner {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--gold-light);
  background: linear-gradient(135deg, #D8AE62, #B68634);
  color: #07131F;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
}

/* Coluna Direita: Fila por Ordem de Chegada com Checkboxes */
.queue-selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(14, 29, 45, 0.75);
  border-bottom: 1px solid rgba(216, 174, 98, 0.2);
  font-size: 0.78rem;
  color: var(--gold-light);
}

.queue-select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
}

.queue-selected-counter {
  font-size: 0.72rem;
  color: #92DCFF;
}

.queue-item-clean-row,
.live-queue-row-clean {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(12, 25, 40, 0.88);
  border: 1px solid rgba(216, 174, 98, 0.22);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
}

.queue-item-clean-row:hover,
.queue-item-clean-row.selected,
.live-queue-row-clean:hover,
.live-queue-row-clean.active-drawn {
  border-color: var(--gold-primary);
  background: rgba(22, 43, 66, 0.92);
}

.queue-row-mini-card,
#liveQueueList img {
  width: 44px !important;
  height: 68px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1.5px solid var(--gold-primary) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.queue-item-clean-info,
.queue-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.queue-item-clean-top,
.queue-row-nick-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.queue-item-nick,
.queue-row-nick {
  font-weight: 800;
  font-size: 0.84rem;
  color: var(--gold-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-row-order {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--gold-primary);
  background: rgba(216, 174, 98, 0.16);
  padding: 1px 6px;
  border-radius: 6px;
}

.queue-item-card-pill,
.queue-row-card-tag {
  font-size: 0.72rem;
  color: #92DCFF;
  font-weight: 600;
}

.queue-item-google-sub,
.queue-row-hidden-hint {
  font-size: 0.68rem;
  color: #8CA0B6;
}

.queue-pane-footer {
  padding-top: 10px;
  border-top: 1px solid rgba(216, 174, 98, 0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-unlock-selected-queue {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(43, 179, 116, 0.65);
  background: linear-gradient(135deg, rgba(22, 82, 58, 0.95), rgba(12, 48, 34, 0.98));
  color: #A7F3D0;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
}

.queue-footer-hint {
  font-size: 0.68rem;
  color: #7D91A6;
  text-align: center;
  line-height: 1.3;
}

/* ==========================================================================
   10. CENA PÚBLICA 9:16 (TOPO 100% CLONE PAINEL DIREITO + CENTRO ALTAR COM ZOOM + BASE CÂMERA LIMPA SEM CORTES)
   ========================================================================== */
.live-public-scene-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: #03080e !important;
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 50px 12px 8px 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.scene-close-bar {
  position: fixed !important;
  top: 6px !important;
  left: 14px !important;
  right: 14px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  z-index: 20 !important;
}

.scene-bar-controls-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.btn-scene-ctrl {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(216, 174, 98, 0.35);
  background: rgba(12, 26, 42, 0.9);
  color: #D0DFEE;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-scene-ctrl.active {
  background: rgba(216, 174, 98, 0.28);
  border-color: var(--gold-primary);
  color: var(--gold-light);
}

.btn-scene-ctrl.gold {
  background: linear-gradient(135deg, #D8AE62, #B68634);
  color: #07131F;
  border-color: var(--gold-light);
}

.scene-divider-pipe {
  color: rgba(216, 174, 98, 0.35);
}

/* Container 9:16 Responsivo: adapta-se a qualquer altura de tela (PC, Notebook 768p ou Celular) sem NUNCA cortar a câmera */
.scene-916-three-zones {
  height: calc(100vh - 54px) !important;
  max-height: 880px !important;
  width: calc((100vh - 54px) * 9 / 16) !important;
  max-width: min(495px, 96vw) !important;
  aspect-ratio: 9 / 16 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: 8px !important;
  border-radius: 22px !important;
  background: radial-gradient(circle at 50% 42%, #132238 0%, #060D17 100%) !important;
  border: 2px solid rgba(216, 174, 98, 0.65) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(216, 174, 98, 0.22) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: auto !important;
}

/* ZONA 1: TOPO (21% da altura) - 100% Ocupado pelo Clone do Painel Direito da Consultoria */
.scene-zone-top-oracle {
  flex: 0 0 21% !important;
  height: 21% !important;
  min-height: 0 !important;
  width: 100% !important;
  background: #08121E;
  border: 1.5px solid rgba(216, 174, 98, 0.5);
  border-radius: 14px;
  padding: 0 8px 4px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 5;
}

.scene-cloned-cascades-viewport {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 0 !important;
  padding-right: 4px;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-primary) transparent;
}

.scene-cloned-cascades-content {
  font-size: 0.78rem;
  line-height: 1.46;
  color: #E2E8F0;
}

.scene-cloned-cascades-content .pergaminho-header,
.scene-cloned-cascades-content .bloco-continuidade-footer,
.scene-cloned-cascades-content .veredito-actions-bar,
.scene-cloned-cascades-content .trial-padlock-overlay {
  display: none !important;
}

.scene-cloned-cascades-content .pergaminho-narrativo-card,
.scene-cloned-cascades-content .veredito-celebracao-card,
.scene-cloned-cascades-content .zaoio-combinations-section {
  padding: 6px 8px !important;
  margin-bottom: 6px !important;
  background: rgba(12, 25, 40, 0.65) !important;
  border-radius: 8px !important;
}

.scene-cloned-cascades-content .pergaminho-paragrafo {
  font-size: 0.78rem !important;
  line-height: 1.44 !important;
  margin-bottom: 6px !important;
}

/* ZONA 2: CENTRO (44% da altura) - Mesa Centralizada com Respiro Simétrico entre o Topo e a Câmera (Sem Sobreposição) */
.scene-zone-middle-altar {
  flex: 1 1 44% !important;
  height: 44% !important;
  min-height: 0 !important;
  width: 100% !important;
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  z-index: 2;
}

.scene-altar-clone-stage {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene-cloned-altar-target {
  width: 510px !important;
  height: 510px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: scale(0.64);
  transform-origin: center center !important;
  margin: 0 !important;
  pointer-events: none;
  flex-shrink: 0;
}

.scene-cloned-altar-target .altar-disc-3d {
  width: 510px !important;
  height: 510px !important;
  min-width: 510px !important;
  min-height: 510px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  position: relative !important;
}

.scene-cloned-altar-target .cards-grid-4x5 {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 422px !important;
  height: 486px !important;
  grid-template-columns: repeat(5, 74px) !important;
  grid-template-rows: repeat(4, 108px) !important;
  gap: 10px 8px !important;
  padding: 12px 10px !important;
  transform: translate(-50%, -50%) scale(0.92) !important;
  transform-origin: center center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.scene-cloned-altar-target .card-slot-v2 {
  width: 74px !important;
  height: 108px !important;
}

.scene-cloned-ancestral-target {
  position: absolute;
  bottom: 4px;
  left: 6px;
  transform: scale(0.68);
  transform-origin: bottom left;
  z-index: 40;
}

/* ZONA 3: BASE (33% da altura = Proporção Nativa 16:10 / 4:3 da Câmera) - Enquadramento Total Sem Cortes e Sem Textos */
.scene-zone-bottom-camera {
  flex: 0 0 33% !important;
  height: 33% !important;
  min-height: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 5 !important;
  border: 2px solid rgba(216, 174, 98, 0.55) !important;
  background: #081320 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.scene-webcam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scaleX(-1); /* Espelho natural de webcam / câmera frontal do celular */
}

.scene-presenter-preview-box {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.presenter-studio-bg {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 45%, rgba(48, 28, 72, 0.85) 0%, rgba(10, 20, 34, 0.98) 78%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Grade fotográfica sutil (Regra dos Terços) para evidenciar o enquadramento total da lente */
.camera-framing-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(216, 174, 98, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(216, 174, 98, 0.08) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
  pointer-events: none;
}

.presenter-full-frame-subject {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.presenter-halo-ring {
  position: absolute;
  width: 138px;
  height: 138px;
  max-width: 58%;
  max-height: 68%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid rgba(216, 174, 98, 0.45);
  box-shadow: 0 0 35px rgba(216, 174, 98, 0.3), inset 0 0 25px rgba(146, 220, 255, 0.2);
}

.presenter-silhouette-avatar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.presenter-head {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, #D8AE62 0%, #8A6421 100%);
  border: 2px solid #FAF5E8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.presenter-shoulders {
  width: 118px;
  height: 56px;
  margin-top: 6px;
  border-radius: 58px 58px 12px 12px;
  background: linear-gradient(180deg, #1E3A5F 0%, #0D1F33 100%);
  border: 2px solid rgba(216, 174, 98, 0.65);
}

.live-public-scene-overlay.obs-transparent,
body.obs-transparent-mode,
html.obs-transparent-html {
  background: transparent !important;
}

.live-public-scene-overlay.obs-transparent .scene-916-three-zones,
body.obs-transparent-mode .scene-916-three-zones {
  background: transparent !important;
  box-shadow: none !important;
}

.live-public-scene-overlay.obs-transparent .scene-zone-middle-altar,
body.obs-transparent-mode .scene-zone-middle-altar {
  background:
    radial-gradient(ellipse 88% 46% at 50% 103%,
      rgba(252, 186, 88, 0.52) 0%,
      rgba(234, 124, 48, 0.34) 42%,
      rgba(164, 62, 38, 0.14) 72%,
      rgba(10, 16, 30, 0) 100%),
    radial-gradient(ellipse 135% 62% at 50% 100%,
      rgba(218, 108, 42, 0.36) 0%,
      rgba(148, 56, 40, 0.22) 54%,
      rgba(12, 18, 34, 0) 88%),
    linear-gradient(0deg,
      #8A431E 0%,
      #5E2C1F 20%,
      #351E33 44%,
      #161932 68%,
      #091124 86%,
      #050A15 100%) !important;
  border-radius: 16px 16px 11px 11px !important;
  border-bottom: 1px solid rgba(251, 176, 76, 0.32) !important;
}

.live-public-scene-overlay.obs-transparent .scene-zone-bottom-camera,
body.obs-transparent-mode .scene-zone-bottom-camera {
  background: transparent !important;
  box-shadow: none !important;
  border: 2px solid rgba(216, 174, 98, 0.65) !important;
}

.camera-cutout-inner,
#sceneObsCutoutInner {
  background: transparent !important;
  pointer-events: none !important;
}
.camera-cutout-inner .cam-icon {
  display: none !important;
}

/* =========================================================================
   CONTROLES DE CÂMERA DO CELULAR E MOBILE HUD (ZONA 3 DA CENA PÚBLICA 9:16)
   ========================================================================= */
.btn-scene-touch-activate-cam {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.95), rgba(182, 134, 52, 0.95));
  color: #050d18;
  border: 1px solid #FAF5E8;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), 0 0 16px rgba(216, 174, 98, 0.45);
  transition: all 0.2s ease;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-scene-touch-activate-cam:hover,
.btn-scene-touch-activate-cam:active {
  transform: translateX(-50%) scale(1.04);
  box-shadow: 0 6px 22px rgba(216, 174, 98, 0.65);
}

.scene-camera-floating-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 19, 32, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(216, 174, 98, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
}

.btn-scene-hud-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(216, 174, 98, 0.35);
  color: #E2E8F0;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn-scene-hud-action:hover,
.btn-scene-hud-action:active {
  background: rgba(216, 174, 98, 0.28);
  border-color: var(--gold-primary);
  color: var(--gold-light);
}

.btn-scene-hud-action.active {
  background: rgba(216, 174, 98, 0.35);
  border-color: var(--gold-light);
  color: #FAF5E8;
}

.btn-scene-hud-action.hud-stop {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
}

.btn-scene-hud-action.hud-stop:hover,
.btn-scene-hud-action.hud-stop:active {
  background: rgba(239, 68, 68, 0.38);
  border-color: #ef4444;
  color: #ffffff;
}

.scene-camera-status-banner {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  background: rgba(24, 12, 14, 0.94);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #fecaca;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.76rem;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 18;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.scene-camera-status-banner.info {
  background: rgba(10, 24, 40, 0.94);
  border-color: rgba(96, 165, 250, 0.6);
  color: #bfdbfe;
}

.btn-close-camera-status {
  background: none;
  border: none;
  color: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  margin-left: auto;
  padding: 2px 6px;
  opacity: 0.8;
}

@media (max-width: 640px) {
  .live-public-scene-overlay {
    padding: 48px 4px 6px 4px !important;
  }
  .scene-close-bar {
    top: 4px !important;
    left: 4px !important;
    right: 4px !important;
    height: 40px !important;
    overflow-x: auto !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .scene-close-bar::-webkit-scrollbar {
    display: none !important;
  }
  .btn-close-scene {
    font-size: 0.72rem !important;
    padding: 5px 8px !important;
    flex-shrink: 0 !important;
  }
  .scene-bar-controls-group {
    flex-shrink: 0 !important;
    gap: 4px !important;
  }
  .btn-scene-ctrl {
    font-size: 0.68rem !important;
    padding: 4px 8px !important;
    flex-shrink: 0 !important;
  }
  .scene-res-label {
    display: none !important;
  }
  .scene-916-three-zones {
    width: 100% !important;
    max-width: 100vw !important;
    height: calc(100dvh - 50px) !important;
    max-height: calc(100dvh - 50px) !important;
    border-radius: 16px !important;
    padding: 6px !important;
  }
  .btn-scene-touch-activate-cam {
    bottom: 10px !important;
    padding: 7px 14px !important;
    font-size: 0.76rem !important;
  }
  .scene-camera-floating-controls {
    bottom: 44px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: calc(100% - 12px) !important;
    justify-content: center !important;
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  .btn-scene-hud-action {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
  }
}

/* =========================================================================
   RESPONSIVIDADE CANÔNICA MOBILE DA PÁGINA DE CONSULTORIA (#viewConsulting)
   - Mesa Fixa no Topo (100% quando painéis ocultos · 43dvh quando painel aberto)
   - Ícones de Chat e Baralho sempre presentes na área da Mesa
   - Botões nas bordas esquerda (🏛️) e direita (🧭) da Mesa
   - Painel Esquerdo ou Direito surge ABAIXO da Mesa Fixa (57dvh) com scroll
   ========================================================================= */
@media (max-width: 900px) {
  /* 1. Área da Mesa (#paneCenter): Tela inteira quando painéis recolhidos, Topo Fixo (43dvh) quando painel aberto */
  #viewConsulting {
    display: none;
    flex-direction: column !important;
    width: 100vw !important;
    height: calc(100dvh - 50px) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  body[data-app-role="user"] #viewConsulting,
  body:not([data-app-role]) #viewConsulting {
    display: flex !important;
  }

  body[data-app-role="referrer"] #floatingOracularControls,
  body[data-app-role="live"] #floatingOracularControls,
  body[data-app-role="admin"] #floatingOracularControls,
  body[data-app-role="referrer"] .drawer-edge-toggle,
  body[data-app-role="live"] .drawer-edge-toggle,
  body[data-app-role="admin"] .drawer-edge-toggle {
    display: none !important;
  }

  #paneCenter,
  .pane-altar-stage {
    width: 100vw !important;
    height: calc(100dvh - 50px) !important;
    max-height: calc(100dvh - 50px) !important;
    flex: 0 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: none !important;
  }

  body.mobile-panel-open #paneCenter,
  body.mobile-panel-open .pane-altar-stage {
    height: 43dvh !important;
    max-height: 43dvh !important;
  }

  #paneCenter .altar-3d-viewport {
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: none !important;
  }

  body.mobile-panel-open #paneCenter .altar-3d-viewport {
    padding-top: 2.5mm !important;
    padding-bottom: 2.5mm !important;
    box-sizing: border-box !important;
    perspective-origin: 50% 50% !important;
  }

  /* Mantém a proporção canônica nítida de 510x510px do Disco e escala como unidade via JS */
  #paneCenter .altar-disc-3d {
    width: 510px !important;
    height: 510px !important;
    min-width: 510px !important;
    min-height: 510px !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transform-origin: center center !important;
    transition: none !important;
    touch-action: none !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  #paneCenter .altar-disc-3d.smooth-return {
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  }

  #paneCenter .cards-grid-4x5 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 422px !important;
    height: 486px !important;
    grid-template-columns: repeat(5, 74px) !important;
    grid-template-rows: repeat(4, 108px) !important;
    gap: 10px 8px !important;
    padding: 12px 10px !important;
    transform: translate(-50%, -50%) translateZ(14px) scale(0.96) !important;
    transform-origin: center center !important;
    transform-style: preserve-3d !important;
    will-change: transform !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #paneCenter .card-slot-v2 {
    width: 74px !important;
    height: 108px !important;
  }

  /* 2. Botões Laterais nas Bordas Esquerda e Direita da Mesa Fixa */
  .drawer-edge-toggle.left,
  #btnEdgeToggleLeft {
    position: fixed !important;
    left: 0 !important;
    top: calc(50px + 38dvh) !important;
    transform: translateY(-50%) !important;
    z-index: 945 !important;
    padding: 10px 7px !important;
    border-radius: 0 12px 12px 0 !important;
    background: rgba(8, 19, 32, 0.94) !important;
    border: 1.5px solid rgba(216, 174, 98, 0.65) !important;
    border-left: none !important;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.75) !important;
    transition: none !important;
  }

  .drawer-edge-toggle.right,
  #btnEdgeToggleRight {
    position: fixed !important;
    right: 0 !important;
    top: calc(50px + 38dvh) !important;
    transform: translateY(-50%) !important;
    z-index: 945 !important;
    padding: 10px 7px !important;
    border-radius: 12px 0 0 12px !important;
    background: rgba(8, 19, 32, 0.94) !important;
    border: 1.5px solid rgba(216, 174, 98, 0.65) !important;
    border-right: none !important;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.75) !important;
    transition: none !important;
  }

  body.mobile-panel-open .drawer-edge-toggle.left,
  body.mobile-panel-open #btnEdgeToggleLeft,
  body.mobile-panel-open .drawer-edge-toggle.right,
  body.mobile-panel-open #btnEdgeToggleRight {
    top: calc(50px + 13dvh) !important;
  }

  .drawer-edge-toggle.active-mobile-drawer {
    background: linear-gradient(135deg, rgba(216, 174, 98, 0.38), rgba(180, 110, 71, 0.45)) !important;
    border-color: #f7d788 !important;
    box-shadow: 0 0 16px rgba(216, 174, 98, 0.55) !important;
  }

  /* 3. Ícones de Chat e Baralho Sempre Presentes na Mesa (Canto Inferior Esquerdo da Área da Mesa) */
  #floatingOracularControls,
  .floating-oracular-controls {
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    bottom: 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 10px !important;
    z-index: 940 !important;
    transition: none !important;
  }

  body.mobile-panel-open #floatingOracularControls,
  body.mobile-panel-open .floating-oracular-controls {
    left: 4px !important;
    bottom: calc(57dvh - 44px) !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  body.mobile-panel-open #floatingOracularControls .btn-floating-chat {
    width: 36px !important;
    height: 36px !important;
  }

  body.mobile-panel-open #floatingOracularControls .btn-floating-deck {
    width: 36px !important;
    height: 52px !important;
  }

  body.mobile-panel-open #floatingAncestralCardAnchor {
    transform: scale(0.62) !important;
    transform-origin: bottom left !important;
  }

  /* Controles de Capacidades na base direita da Mesa */
  #paneCenter .btn-info-capacidades-altar {
    bottom: 44px !important;
    right: 10px !important;
    padding: 5px 10px !important;
    font-size: 0.68rem !important;
    z-index: 940 !important;
    transform: translateZ(200px) !important;
  }

  body.mobile-panel-open #paneCenter .btn-info-capacidades-altar {
    bottom: 6px !important;
    right: 6px !important;
    padding: 4px 7px !important;
    z-index: 940 !important;
    transform: translateZ(200px) !important;
  }

  body.mobile-panel-open #paneCenter .btn-info-capacidades-altar .info-label {
    display: none !important;
  }

  #paneCenter .altar-zoom-controls {
    display: none !important;
  }

  /* Banners superiores, HUD do Ritual (08s + ENTER 00/20) e botão Confirmar Leitura na Mesa Mobile */
  #paneCenter #altarHudTop[style*="display: none"],
  #paneCenter .altar-hud-top[style*="display: none"],
  #paneCenter #altarHudTop.hidden,
  #paneCenter .altar-hud-top.hidden {
    display: none !important;
  }

  /* RITUAL ORACULAR NA PARTE INFERIOR DA MESA MOBILE (Zona de Alcance Fácil do Polegar) */
  #paneCenter #altarHudTop:not([style*="display: none"]),
  #paneCenter .altar-hud-top:not([style*="display: none"]) {
    position: absolute !important;
    top: auto !important;
    bottom: 84px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: rgba(8, 20, 32, 0.96) !important;
    border: 1.5px solid rgba(216, 174, 98, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), 0 0 20px rgba(216, 174, 98, 0.18) !important;
    z-index: 930 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }

  #paneCenter #altarHudTop #altarTimerBox {
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 2px 4px 6px 4px !important;
    border-bottom: 1px solid rgba(216, 174, 98, 0.22) !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
    transform: none !important;
    width: 100% !important;
  }

  #paneCenter #altarHudTop #altarTimerBox .timer-halo-ring {
    width: 34px !important;
    height: 34px !important;
  }

  #paneCenter #altarHudTop #altarTimerBox .timer-halo-ring svg {
    width: 34px !important;
    height: 34px !important;
  }

  #paneCenter #altarHudTop #altarTimerBox .timer-seconds-big {
    font-size: 0.92rem !important;
  }

  #paneCenter #altarHudTop #altarTimerBox .timer-action-text {
    font-size: 0.74rem !important;
    color: var(--gold-light) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
  }

  #paneCenter #altarHudTop #altarEnterBox {
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
    transform: none !important;
  }

  #paneCenter #altarHudTop .enter-pill-button {
    flex: 1 1 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 8px !important;
    border-radius: 10px !important;
    background: rgba(14, 29, 43, 0.95) !important;
    border: 1px solid rgba(216, 174, 98, 0.55) !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  #paneCenter #altarHudTop .enter-labels strong {
    font-size: 0.72rem !important;
    color: var(--gold-light) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #paneCenter #altarHudTop .enter-labels small {
    display: none !important;
  }

  #paneCenter #altarHudTop .btn-reveal-all-direct {
    flex: 1 1 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 8px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(216, 174, 98, 0.3), rgba(182, 134, 52, 0.45)) !important;
    border: 1px solid var(--gold-primary) !important;
    color: #FFF !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 10px rgba(216, 174, 98, 0.25) !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }

  #paneCenter .btn-confirm-board-reading,
  #paneCenter .live-spectator-waiting-cloud {
    top: 8px !important;
    padding: 8px 14px !important;
    font-size: 0.76rem !important;
    max-width: calc(100vw - 24px) !important;
    white-space: normal !important;
    text-align: center !important;
    z-index: 932 !important;
  }

  /* Banners Flutuantes dos Fluxos na Mesa Principal (Live & Teste Gratuito Solo) */
  #paneCenter .trial-solo-floating-banner {
    display: none !important;
  }
  #paneCenter .live-main-table-floating-banner[style*="display: none"] {
    display: none !important;
  }

  #paneCenter .live-main-table-floating-banner:not([style*="display: none"]) {
    top: 8px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    transform: none !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85) !important;
    z-index: 930 !important;
    box-sizing: border-box !important;
  }

  #paneCenter .live-mt-left,
  #paneCenter .trial-mt-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    width: 100% !important;
  }

  #paneCenter .live-mt-actions,
  #paneCenter .trial-mt-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 6px !important;
  }

  #paneCenter .btn-live-mt-scene,
  #paneCenter .btn-live-mt-back,
  #paneCenter .btn-trial-mt-unlock {
    width: 100% !important;
    text-align: center !important;
    padding: 8px 12px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  /* Card de Capacidades da Mesa / Espera Cerimonial da IA (#altarWaitingPromoCard) */
  #paneCenter #altarWaitingPromoCard {
    position: fixed !important;
    inset: 54px 8px 12px 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 66px) !important;
    margin: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 975 !important;
    border-radius: 18px !important;
    background: rgba(5, 12, 22, 0.98) !important;
    border: 1.5px solid rgba(216, 174, 98, 0.6) !important;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(216, 174, 98, 0.25) !important;
    padding: 16px 14px 34px 14px !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(216, 174, 98, 0.6) rgba(5, 12, 22, 0.9) !important;
  }

  #paneCenter #altarWaitingPromoCard::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
  }

  #paneCenter #altarWaitingPromoCard::-webkit-scrollbar-thumb {
    background: rgba(216, 174, 98, 0.6) !important;
    border-radius: 10px !important;
  }

  #paneCenter #altarWaitingPromoCard .promo-card-inner {
    position: relative !important;
    width: 100% !important;
  }

  #paneCenter #altarWaitingPromoCard .btn-close-promo {
    position: absolute !important;
    top: -6px !important;
    right: -4px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(216, 174, 98, 0.18) !important;
    border: 1px solid rgba(216, 174, 98, 0.5) !important;
    color: var(--gold-light) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 30 !important;
  }

  #paneCenter #altarWaitingPromoCard .promo-header {
    text-align: center !important;
    margin-bottom: 14px !important;
    padding-top: 6px !important;
    padding-right: 30px !important;
  }

  #paneCenter #altarWaitingPromoCard .promo-seal {
    font-size: 0.66rem !important;
    padding: 4px 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #paneCenter #altarWaitingPromoCard .promo-title {
    font-size: 1.15rem !important;
    margin: 6px 0 !important;
    line-height: 1.3 !important;
    color: #FFF !important;
  }

  #paneCenter #altarWaitingPromoCard .promo-subtitle {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    color: #A0B2C6 !important;
  }

  #paneCenter #altarWaitingPromoCard .promo-features-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #paneCenter #altarWaitingPromoCard .promo-feature-card {
    background: rgba(11, 23, 38, 0.95) !important;
    border: 1px solid rgba(216, 174, 98, 0.4) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  #paneCenter #altarWaitingPromoCard .feature-visual-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #paneCenter #altarWaitingPromoCard .promo-instructions-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  #paneCenter #altarWaitingPromoCard .promo-step-item {
    display: block !important;
    position: relative !important;
    padding-left: 24px !important;
    font-size: 0.74rem !important;
    color: #CBD5E1 !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }

  #paneCenter #altarWaitingPromoCard .promo-step-item .step-num {
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: rgba(216, 174, 98, 0.22) !important;
    border: 1px solid rgba(216, 174, 98, 0.5) !important;
    color: var(--gold-light) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
  }

  /* 4. Painéis da Esquerda (#paneLeftHistory) e da Direita (#paneRightModal) Rolando Abaixo da Mesa Fixa */
  #paneLeftHistory,
  .pane-history-cycles,
  #paneRightModal,
  .pane-reading-map.resizable-curtain {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: calc(57dvh - 50px) !important;
    max-height: calc(57dvh - 50px) !important;
    z-index: 935 !important;
    background: rgba(7, 18, 30, 0.99) !important;
    backdrop-filter: blur(24px) !important;
    border-top: 2px solid rgba(216, 174, 98, 0.75) !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.92) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    transition: none !important;
  }

  #paneLeftHistory.collapsed,
  .pane-history-cycles.collapsed,
  #paneRightModal.collapsed,
  .pane-reading-map.resizable-curtain.collapsed {
    transform: translateY(108%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #paneLeftHistory:not(.collapsed),
  .pane-history-cycles:not(.collapsed),
  #paneRightModal:not(.collapsed),
  .pane-reading-map.resizable-curtain:not(.collapsed) {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Estrutura interna idêntica de Cabeçalho + Corpo Rolável para Painel Direito e Esquerdo */
  #paneRightModal .curtain-header-bar,
  #paneLeftHistory > .panel-eyebrow {
    flex: 0 0 auto !important;
    min-height: 46px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(216, 174, 98, 0.28) !important;
    background: rgba(10, 22, 36, 0.98) !important;
  }

  #paneRightModal .curtain-header-bar .panel-eyebrow,
  #paneLeftHistory .eyebrow-title-cluster {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: var(--font-display) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: var(--gold-light) !important;
    text-transform: uppercase !important;
  }

  #paneRightModal #btnToggleSideModal,
  #paneLeftHistory #btnCollapseLeftTop {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    background: rgba(216, 174, 98, 0.14) !important;
    border: 1px solid rgba(216, 174, 98, 0.45) !important;
    color: var(--gold-light) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
  }

  #paneLeftHistory .history-mode-tabs {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
  }

  #paneLeftHistory .hist-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #paneRightModal #readingMapInner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 12px 44px 12px !important;
  }

  #paneRightModal #cascadesWrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #paneLeftHistory .history-container-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 10px 12px 14px 12px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  #paneLeftHistory .history-mode-tabs {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
  }

  #paneLeftHistory .hist-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    border: 1px solid rgba(216, 174, 98, 0.35) !important;
    background: rgba(14, 28, 42, 0.85) !important;
    color: var(--gold-light) !important;
    cursor: pointer !important;
  }

  #paneLeftHistory .hist-tab.active {
    background: rgba(216, 174, 98, 0.25) !important;
    border-color: var(--gold-primary) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(216, 174, 98, 0.3) !important;
  }

  #paneLeftHistory .hist-tab .hist-count {
    padding: 1px 6px !important;
    border-radius: 10px !important;
    background: rgba(216, 174, 98, 0.25) !important;
    font-size: 0.68rem !important;
    color: var(--gold-light) !important;
  }

  #paneLeftHistory .hist-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Os 2 botões de ação do Painel Esquerdo no Mobile: Novo Ciclo & Tiragem Complementar */
  #paneLeftHistory .history-actions-row {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(216, 174, 98, 0.28) !important;
    background: transparent !important;
  }

  #paneLeftHistory #btnNovoCiclo,
  #paneLeftHistory #btnNewCycleEpisode {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    background: rgba(14, 29, 43, 0.95) !important;
    border: 1px solid rgba(216, 174, 98, 0.5) !important;
    color: var(--gold-light) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
    cursor: pointer !important;
  }

  #paneLeftHistory #btnNovoCiclo:disabled,
  #paneLeftHistory #btnNewCycleEpisode:disabled {
    opacity: 0.72 !important;
    background: rgba(11, 23, 36, 0.88) !important;
    border: 1px dashed rgba(216, 174, 98, 0.4) !important;
    color: rgba(220, 205, 175, 0.85) !important;
    cursor: not-allowed !important;
  }

  #paneLeftHistory #btnNovoCiclo .btn-glyph,
  #paneLeftHistory #btnNewCycleEpisode .btn-glyph {
    font-size: 1rem !important;
    color: var(--gold-primary) !important;
    margin-right: 8px !important;
  }

  #paneLeftHistory #btnNovoCiclo .btn-txt,
  #paneLeftHistory #btnNewCycleEpisode .btn-txt {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    line-height: 1.2 !important;
  }

  #paneLeftHistory #btnNovoCiclo .btn-txt strong,
  #paneLeftHistory #btnNewCycleEpisode .btn-txt strong {
    font-size: 0.76rem !important;
    color: var(--gold-light) !important;
  }

  #paneLeftHistory #btnNovoCiclo .btn-txt small,
  #paneLeftHistory #btnNewCycleEpisode .btn-txt small {
    font-size: 0.64rem !important;
    color: var(--gold-secondary) !important;
  }

  body.mobile-left-open #paneLeftHistory #btnCollapseLeftTop .collapse-arrow::after {
    content: " RECOLHER";
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-left: 4px;
  }

  /* 5. Header Superior Limpo & Dock de Navegação Mobile */
  .app-header-v2 {
    height: 50px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 1000 !important;
    overflow: visible !important;
  }

  .app-header-v2 .header-center {
    display: none !important;
  }

  .dev-role-dock {
    position: fixed !important;
    bottom: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 950 !important;
  }

  .dev-role-dock .btn-dock-toggle {
    font-size: 0.68rem !important;
    padding: 6px 12px !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 16px !important;
    background: rgba(9, 21, 35, 0.94) !important;
    border: 1px solid var(--gold-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8) !important;
  }

  .dev-role-dock .dock-menu {
    width: calc(100vw - 16px) !important;
    max-width: 340px !important;
    max-height: calc(100dvh - 80px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 10px !important;
    border-radius: 14px !important;
    border: 1px solid var(--gold-primary) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95) !important;
  }

  /* 6. Responsividade Completa das Demais Views (#viewLive, #viewReferrer, #viewAdmin) */
  #viewLive,
  #viewReferrer,
  #viewAdmin {
    width: 100vw !important;
    height: calc(100dvh - 50px) !important;
    max-height: calc(100dvh - 50px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 10px 84px 10px !important;
    box-sizing: border-box !important;
  }

  #viewLive .live-console-v2-shell,
  #viewLive .live-console-3col-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 14px !important;
  }

  #viewLive .live-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #viewLive .live-streamer-mini-altar-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  /* 7. Responsividade Completa do CHAT (#floatingChatCard) e da LUPA DO CHAT (#chatFullscreenOverlay) */
  #floatingChatCard,
  .floating-chat-card {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: 60dvh !important;
    max-height: calc(100dvh - 64px) !important;
    z-index: 985 !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.92) !important;
  }

  #floatingChatCard[style*="display: none"] {
    display: none !important;
  }

  #floatingChatCard .floating-chat-header {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
  }

  #floatingChatCard #chatFeedBox {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
  }

  #floatingChatCard .chat-bubble-entry.oracular {
    position: relative !important;
    padding: 12px 40px 12px 12px !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }

  #floatingChatCard .btn-chat-lupa {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
  }

  #floatingChatCard .chat-input-row {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  /* Lupa do Chat: Modal de Leitura Ampliada em Tela Cheia (#chatFullscreenOverlay) */
  #chatFullscreenOverlay,
  .chat-fullscreen-overlay {
    padding: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10005 !important;
  }

  #chatFullscreenOverlay .chat-fullscreen-modal {
    position: relative !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 18px 14px !important;
    border-radius: 18px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  #chatFullscreenOverlay .chat-fullscreen-header {
    padding-right: 28px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
  }

  #chatFullscreenOverlay .chat-fullscreen-header span {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    display: inline-block !important;
  }

  #chatFullscreenOverlay #chatFullscreenContent {
    font-size: 0.94rem !important;
    line-height: 1.65 !important;
  }

  /* 8. Responsividade Completa do BARALHO (#deckControllerModal) e do RITUAL (#ritualInstructionOverlay) */
  #deckControllerModal,
  .deck-controller-modal {
    padding: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9950 !important;
  }

  #deckControllerModal .deck-modal-dialog {
    position: relative !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 14px !important;
    border-radius: 18px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  #deckControllerModal .deck-dialog-header {
    padding-right: 28px !important;
    margin-bottom: 10px !important;
  }

  #deckControllerModal .deck-dialog-header h3 {
    font-size: 1.05rem !important;
  }

  #deckControllerModal .deck-dialog-header p {
    font-size: 0.78rem !important;
  }

  #deckControllerModal .deck-label-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #deckControllerModal .deck-text-area-ampliado {
    font-size: 0.85rem !important;
    padding: 8px 10px !important;
    min-height: 62px !important;
  }

  #deckControllerModal .btn-deck-ritual-primary,
  #deckControllerModal .btn-deck-ritual-comp {
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #deckControllerModal .btn-deck-ritual-primary strong,
  #deckControllerModal .btn-deck-ritual-comp strong {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

  #deckControllerModal .deck-reveal-buttons-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Instruções Pré-Ritual 8s (#ritualInstructionOverlay) */
  #ritualInstructionOverlay,
  .ritual-instruction-overlay {
    padding: 12px !important;
    z-index: 9960 !important;
  }

  #ritualInstructionOverlay .instruction-card {
    width: calc(100vw - 24px) !important;
    max-width: 370px !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  #ritualInstructionOverlay .btn-instruction-start {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 0.86rem !important;
  }

  /* 9. Responsividade Soberana dos Modais da Fase 1 (Dossiê, Checkout, Conversão, Inspeção 3D, Carta Prévia) */
  #fullReadingModal,
  #checkoutModal,
  #conversionModal,
  #cardInspectionModal,
  #previewCardModal,
  #liveFullReadingModal,
  #googleAuthGateModal,
  #clientLandingModal {
    z-index: 10006 !important;
  }

  /* 9.1 Dossiê Oracular Integral (#fullReadingModal) */
  #fullReadingModal {
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
  }

  #fullReadingModal .full-reading-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 16px !important;
    border: 1.5px solid var(--gold-primary) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95) !important;
  }

  #fullReadingModal .full-reading-header {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px 10px 14px !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(216, 174, 98, 0.3) !important;
    background: rgba(7, 18, 29, 0.98) !important;
  }

  #fullReadingModal .full-reading-header-info {
    text-align: left !important;
  }

  #fullReadingModal .dossier-emblem-tag {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
  }

  #fullReadingModal .full-reading-header h2 {
    font-size: 1.08rem !important;
    line-height: 1.25 !important;
    margin: 2px 0 2px 0 !important;
  }

  #fullReadingModal .dossier-sub-meta {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
  }

  #fullReadingModal .full-reading-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #fullReadingModal .btn-dossier-action {
    flex: 1 1 auto !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  #fullReadingModal .btn-close-modal {
    position: static !important;
    flex: 0 0 32px !important;
  }

  #fullReadingModal .full-reading-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 14px 24px 14px !important;
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    text-align: left !important;
  }

  #fullReadingModal .full-reading-body h1 {
    font-size: 1.28rem !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }

  #fullReadingModal .full-reading-body h2 {
    font-size: 1.05rem !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
    padding-left: 8px !important;
    text-align: left !important;
  }

  #fullReadingModal .full-reading-body p {
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  #fullReadingModal .full-reading-body blockquote {
    padding: 10px 14px !important;
    margin: 12px 0 !important;
    font-size: 0.84rem !important;
    text-align: left !important;
  }

  #fullReadingModal .full-reading-footer {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-top: 1px solid rgba(216, 174, 98, 0.25) !important;
    background: rgba(7, 18, 29, 0.98) !important;
    text-align: center !important;
  }

  #fullReadingModal .dossier-footer-seal {
    font-size: 0.65rem !important;
    color: var(--text-muted) !important;
  }

  #fullReadingModal .btn-dossier-footer-close {
    width: 100% !important;
    padding: 10px !important;
    font-size: 0.85rem !important;
  }

  /* 9.2 Modal de Checkout Multi-Métodos (#checkoutModal) */
  #checkoutModal {
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
  }

  #checkoutModal .checkout-modal-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 18px 14px 26px 14px !important;
    border-radius: 18px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  #checkoutModal .checkout-header {
    position: relative !important;
    padding-right: 38px !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
  }

  #checkoutModal .checkout-header h2 {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  #checkoutModal .checkout-header p {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
  }

  #checkoutModal #btnCloseCheckoutModal {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
  }

  #checkoutModal .checkout-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  #checkoutModal .checkout-order-summary {
    padding: 14px 12px !important;
  }

  #checkoutModal .summary-product-box {
    gap: 10px !important;
  }

  #checkoutModal .product-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.15rem !important;
  }

  #checkoutModal .product-info h4 {
    font-size: 0.88rem !important;
  }

  #checkoutModal .package-card {
    padding: 10px 12px !important;
  }

  #checkoutModal .pkg-header strong {
    font-size: 0.85rem !important;
  }

  #checkoutModal .pkg-price {
    font-size: 0.82rem !important;
  }

  #checkoutModal .summary-pricing-row {
    font-size: 0.78rem !important;
  }

  #checkoutModal .pix-price-highlight {
    font-size: 1.15rem !important;
  }

  #checkoutModal .payment-method-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
  }

  #checkoutModal .pay-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 4px !important;
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    border-radius: 8px !important;
    background: rgba(14, 29, 43, 0.6) !important;
    border: 1px solid rgba(216, 174, 98, 0.25) !important;
    color: #A0B2C6 !important;
    gap: 4px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #checkoutModal .pay-tab.active {
    background: rgba(216, 174, 98, 0.18) !important;
    border-color: var(--gold-primary) !important;
    color: var(--gold-light) !important;
    box-shadow: 0 0 10px rgba(216, 174, 98, 0.2) !important;
    font-weight: 700 !important;
  }

  #checkoutModal .pay-tab .tab-icon {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
  }

  #checkoutModal .pix-qr-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #checkoutModal .pix-qr-img {
    max-width: 170px !important;
    height: auto !important;
  }

  #checkoutModal .pix-copy-input-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  #checkoutModal .btn-copy-pix {
    width: 100% !important;
    padding: 12px !important;
    font-size: 0.85rem !important;
  }

  #checkoutModal .card-form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #checkoutModal .card-row-double {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #checkoutModal .btn-submit-card-pay {
    width: 100% !important;
    padding: 12px !important;
    font-size: 0.88rem !important;
  }

  /* 9.3 Modal de Conversão & Comparação (#conversionModal) */
  #conversionModal {
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
  }

  #conversionModal .modal-dialog-conversion {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 22px 14px 28px 14px !important;
    border-radius: 18px !important;
    position: relative !important;
    box-sizing: border-box !important;
    gap: 14px !important;
  }

  #conversionModal #btnCloseConversionModal {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
  }

  #conversionModal .conversion-header {
    text-align: center !important;
    padding-top: 12px !important;
  }

  #conversionModal .conversion-header h2 {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  #conversionModal .conversion-header p {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  #conversionModal .conversion-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  #conversionModal .conversion-column {
    padding: 16px 14px !important;
    border-radius: 12px !important;
  }

  #conversionModal .col-head h3 {
    font-size: 1.05rem !important;
  }

  #conversionModal .col-price {
    font-size: 1.1rem !important;
  }

  #conversionModal .col-features {
    margin: 12px 0 !important;
    gap: 8px !important;
    font-size: 0.8rem !important;
  }

  #conversionModal .btn-stay-trial,
  #conversionModal .btn-buy-full {
    width: 100% !important;
    padding: 12px !important;
    font-size: 0.84rem !important;
    box-sizing: border-box !important;
  }

  /* 9.4 Modal de Inspeção 3D da Carta (#cardInspectionModal) */
  #cardInspectionModal {
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
  }

  #cardInspectionModal .inspection-3d-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 22px 14px 24px 14px !important;
    border-radius: 18px !important;
    position: relative !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }

  #cardInspectionModal #btnCloseInspection {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
  }

  #cardInspectionModal .inspection-card-face {
    width: 140px !important;
    height: 210px !important;
    flex-shrink: 0 !important;
    margin: 10px auto 4px auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 2px solid var(--gold-primary) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(216, 174, 98, 0.3) !important;
  }

  #cardInspectionModal .inspection-card-face img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #cardInspectionModal .inspection-details-panel {
    width: 100% !important;
    text-align: left !important;
  }

  #cardInspectionModal .inspect-house-tag {
    font-size: 0.68rem !important;
    letter-spacing: 1px !important;
  }

  #cardInspectionModal .inspect-title {
    font-size: 1.25rem !important;
    margin: 2px 0 2px 0 !important;
  }

  #cardInspectionModal .inspect-polarity {
    font-size: 0.74rem !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
  }

  #cardInspectionModal .inspect-block h4 {
    font-size: 0.78rem !important;
    color: var(--gold-light) !important;
    margin: 8px 0 2px 0 !important;
  }

  #cardInspectionModal .inspect-block p {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin: 0 0 6px 0 !important;
    color: #D8E2EC !important;
  }

  #cardInspectionModal .btn-inspect-ask-chat {
    width: 100% !important;
    padding: 12px !important;
    font-size: 0.86rem !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
  }

  /* 9.5 Modal da Carta Prévia (#previewCardModal) */
  #previewCardModal {
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
  }

  #previewCardModal .modal-dialog-preview {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 22px 14px 26px 14px !important;
    border-radius: 18px !important;
    position: relative !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }

  #previewCardModal #btnClosePreviewCard {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
  }

  #previewCardModal .preview-header {
    text-align: center !important;
    padding-top: 10px !important;
  }

  #previewCardModal .preview-header h3 {
    font-size: 1.15rem !important;
  }

  #previewCardModal .preview-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  #previewCardModal .preview-card-frame {
    width: 110px !important;
    height: 165px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1.5px solid var(--gold-primary) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  }

  #previewCardModal .preview-card-meta h4 {
    font-size: 1.1rem !important;
    margin: 0 0 2px 0 !important;
  }

  #previewCardModal .preview-phrase-box {
    padding: 10px 12px !important;
    text-align: center !important;
  }

  #previewCardModal .preview-phrase-text {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }

  #previewCardModal .preview-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #previewCardModal .btn-copy-phrase,
  #previewCardModal .btn-advance-trial,
  #previewCardModal .btn-enter-live-queue {
    width: 100% !important;
    padding: 12px !important;
    font-size: 0.84rem !important;
    box-sizing: border-box !important;
  }

  /* 9.6 Modais Auxiliares e de Fluxo */
  #liveFullReadingModal .live-full-reading-card,
  #googleAuthGateModal .google-auth-gate-card,
  #clientLandingModal .landing-modal-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 auto !important;
    padding: 16px 14px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  #clientLandingModal .landing-dual-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Banners e Controles Internos dos Fluxos de Entrada (Live TikTok & Campanha Solo) */
  #clientLandingModal .landing-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 26px 10px 14px 10px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    position: relative !important;
    border-bottom: 1px solid rgba(216, 174, 98, 0.25) !important;
  }

  #clientLandingModal .landing-brand-emblem {
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  #clientLandingModal .landing-title-box {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
  }

  #clientLandingModal .landing-title-box h2 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin: 4px 0 6px 0 !important;
    text-align: center !important;
    color: #FFF !important;
  }

  #clientLandingModal .landing-title-box p {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    color: #A0B2C6 !important;
    text-align: center !important;
    margin: 0 !important;
  }

  #clientLandingModal .campaign-welcome-tag {
    font-size: 0.7rem !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    display: block !important;
    margin-bottom: 4px !important;
  }

  #clientLandingModal #btnCloseLandingModal {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
  }

  #clientLandingModal .landing-top-auth-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid rgba(216, 174, 98, 0.2) !important;
  }

  #clientLandingModal .authenticated-google-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    font-size: 0.74rem !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }

  #clientLandingModal .landing-reality-switcher {
    display: none !important;
  }

  #clientLandingModal .btn-reality-switch {
    display: none !important;
  }

  #clientLandingModal .consulente-id-card.live-drawn-card-banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 14px 12px !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #clientLandingModal .drawn-card-visual-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #clientLandingModal .landing-live-card-thumb {
    width: 90px !important;
    height: 140px !important;
    border-radius: 8px !important;
  }

  #clientLandingModal .drawn-card-text-col {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    text-align: center !important;
  }

  #clientLandingModal .drawn-card-header-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }

  #clientLandingModal .code-label {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: var(--gold-light) !important;
  }

  #clientLandingModal .tiktok-char-counter {
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
  }

  #clientLandingModal .tiktok-copy-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: rgba(5, 12, 20, 0.95) !important;
    border: 1px solid rgba(216, 174, 98, 0.45) !important;
    border-radius: 10px !important;
  }

  #clientLandingModal .tiktok-formatted-phrase {
    display: block !important;
    width: 100% !important;
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
    color: #FAF5E8 !important;
    word-break: normal !important;
    white-space: normal !important;
    text-align: left !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  #clientLandingModal .btn-copy-code {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  #clientLandingModal .landing-modal-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(216, 174, 98, 0.6) rgba(5, 12, 22, 0.9) !important;
    padding: 16px 14px 40px 14px !important;
    box-sizing: border-box !important;
  }

  #clientLandingModal .landing-modal-card::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
  }

  #clientLandingModal .landing-modal-card::-webkit-scrollbar-thumb {
    background: rgba(216, 174, 98, 0.6) !important;
    border-radius: 10px !important;
  }

  #clientLandingModal .landing-modal-card::-webkit-scrollbar-track {
    background: rgba(5, 12, 22, 0.9) !important;
  }

  #clientLandingModal .landing-body {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
    padding-bottom: 30px !important;
    box-sizing: border-box !important;
  }

  #clientLandingModal .journey-card,
  #clientLandingModal .live-only-journey-card {
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    padding: 16px 14px !important;
    background: rgba(10, 24, 40, 0.95) !important;
    border: 1.5px solid rgba(92, 169, 214, 0.5) !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7) !important;
  }

  #clientLandingModal .live-only-journey-card .journey-card-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    gap: 6px !important;
  }

  #clientLandingModal .live-only-journey-card .journey-badge.live {
    font-size: 0.72rem !important;
    padding: 4px 12px !important;
    background: rgba(92, 169, 214, 0.22) !important;
    border: 1px solid rgba(92, 169, 214, 0.5) !important;
    color: #92DCFF !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
  }

  #clientLandingModal .live-only-journey-card h3 {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    color: #FFF !important;
    margin: 4px 0 !important;
    text-align: center !important;
  }

  #clientLandingModal .live-only-journey-card p {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    color: #A0B2C6 !important;
    text-align: center !important;
  }

  #clientLandingModal .live-question-form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: left !important;
  }

  #clientLandingModal .live-question-form label {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: var(--gold-light) !important;
    display: block !important;
    margin-bottom: 4px !important;
  }

  #clientLandingModal .live-question-form .landing-input-text,
  #clientLandingModal .live-question-form .landing-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.8rem !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: rgba(5, 12, 20, 0.9) !important;
    border: 1px solid rgba(216, 174, 98, 0.4) !important;
    color: #FAF5E8 !important;
    line-height: 1.35 !important;
  }

  #clientLandingModal .live-question-form .consent-checkbox-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 0.74rem !important;
    color: #B4C6D8 !important;
    line-height: 1.35 !important;
    margin: 4px 0 8px 0 !important;
    cursor: pointer !important;
  }

  #clientLandingModal .btn-start-journey-live {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1C5384, #0F2D48) !important;
    border: 1.5px solid #5CA9D6 !important;
    color: #FFF !important;
    box-shadow: 0 4px 20px rgba(92, 169, 214, 0.4) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin-top: 6px !important;
  }

  #clientLandingModal .live-stream-direct-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(14, 28, 44, 0.9) !important;
    border: 1px solid rgba(216, 174, 98, 0.45) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 6px 0 10px 0 !important;
    box-sizing: border-box !important;
  }
  #clientLandingModal .stream-direct-icon {
    font-size: 1.4rem !important;
    filter: drop-shadow(0 0 6px rgba(216, 174, 98, 0.6)) !important;
    flex-shrink: 0 !important;
  }
  #clientLandingModal .stream-direct-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: left !important;
  }
  #clientLandingModal .stream-direct-title {
    font-size: 0.72rem !important;
    color: var(--gold-light, #D8AE62) !important;
    font-weight: 700 !important;
  }
  #clientLandingModal .stream-direct-link {
    font-size: 0.82rem !important;
    color: #5CA9D6 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    word-break: break-all !important;
  }
  #clientLandingModal .stream-direct-link:hover {
    color: #8ed0f8 !important;
  }
  #clientLandingModal .stream-direct-sub {
    font-size: 0.68rem !important;
    color: #9DB4CA !important;
    line-height: 1.3 !important;
  }

  #googleAuthGateModal .google-auth-gate-card {
    position: relative !important;
    text-align: center !important;
    padding-top: 28px !important;
  }

  #googleAuthGateModal #btnCloseGoogleGateModal {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
  }

  #googleAuthGateModal .google-gate-emblem {
    margin: 4px auto 10px auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  #googleAuthGateModal .origin-pills-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  #googleAuthGateModal .btn-origin-mode {
    width: 100% !important;
    text-align: center !important;
    padding: 10px !important;
    font-size: 0.78rem !important;
    box-sizing: border-box !important;
  }

  #googleAuthGateModal .btn-google-one-click-login {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 0.82rem !important;
    box-sizing: border-box !important;
  }

  /* =========================================================================
     FASE 3 — RESPONSIVIDADE DO PAINEL DO DIVULGADOR & AFILIADOS (#viewReferrer)
     ========================================================================= */
  #viewReferrer,
  .referrer-layout {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - 50px) !important;
    max-height: calc(100dvh - 50px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 12px 100px 12px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
  }

  .referrer-layout .dashboard-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .referrer-layout .dash-top-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  .referrer-layout .dash-top-header h2 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  .referrer-layout .dash-top-header p {
    font-size: 0.76rem !important;
    color: var(--text-muted) !important;
    margin: 4px 0 0 0 !important;
  }

  .referrer-layout .referrer-badge-pill {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 0.74rem !important;
    background: rgba(216, 174, 98, 0.12) !important;
    border: 1px solid rgba(216, 174, 98, 0.45) !important;
  }

  .referrer-layout .dash-links-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .referrer-layout .friendly-link-card,
  .referrer-layout .live-link-card {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    background: rgba(14, 29, 43, 0.92) !important;
    border: 1px solid rgba(216, 174, 98, 0.3) !important;
  }

  .referrer-layout .friendly-link-card .card-icon,
  .referrer-layout .live-link-card .card-icon {
    display: none !important;
  }

  .referrer-layout .card-details {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .referrer-layout .card-details h4 {
    font-size: 0.88rem !important;
    margin: 0 !important;
    color: #FFF5D6 !important;
  }

  .referrer-layout .live-link-header-with-duration {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .referrer-layout .live-duration-control-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .referrer-layout .live-duration-control-row label {
    font-size: 0.74rem !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
  }

  .referrer-layout .live-duration-select {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 0.74rem !important;
    background: rgba(7, 19, 31, 0.95) !important;
    color: var(--gold-light) !important;
    border: 1px solid rgba(216, 174, 98, 0.4) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  .referrer-layout .btn-generate-live-link {
    padding: 8px 12px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    background: rgba(216, 174, 98, 0.2) !important;
    border: 1px solid var(--gold-primary) !important;
    color: var(--gold-light) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
  }

  .referrer-layout .link-display-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .referrer-layout .friendly-url-input {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.74rem !important;
    padding: 9px 10px !important;
    background: rgba(7, 19, 31, 0.95) !important;
    border: 1px solid rgba(216, 174, 98, 0.3) !important;
    border-radius: 6px !important;
    color: var(--gold-light) !important;
  }

  .referrer-layout .btn-copy-friendly {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    border-radius: 6px !important;
    background: var(--gold-primary) !important;
    color: #07131F !important;
    cursor: pointer !important;
  }

  .referrer-layout .btn-revoke-live {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    font-size: 0.74rem !important;
    text-align: center !important;
    border-radius: 6px !important;
    cursor: pointer !important;
  }

  .referrer-layout .card-details small {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    color: var(--text-muted) !important;
  }

  .referrer-layout .dash-funnel-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
  }

  .referrer-layout .metric-card {
    padding: 10px !important;
    border-radius: 8px !important;
    gap: 3px !important;
    box-sizing: border-box !important;
  }

  .referrer-layout .metric-label {
    font-size: 0.65rem !important;
  }

  .referrer-layout .metric-number {
    font-size: 1.15rem !important;
  }

  .referrer-layout .metric-sub {
    font-size: 0.62rem !important;
  }

  .referrer-layout .metric-card.gold {
    grid-column: span 2 !important;
    background: linear-gradient(135deg, rgba(216, 174, 98, 0.2), rgba(180, 110, 71, 0.15)) !important;
    border: 1.5px solid var(--gold-primary) !important;
    padding: 12px 14px !important;
  }

  .referrer-layout .metric-card.gold .metric-number {
    font-size: 1.35rem !important;
    color: #FFF5D6 !important;
  }

  .referrer-layout .referrer-actions-bar {
    width: 100% !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
  }

  .referrer-layout .btn-open-live-from-ref {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 16px !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #C23B3B, #8B1E1E) !important;
    border: 1px solid #FF8F8F !important;
    color: #FFF !important;
    box-shadow: 0 4px 18px rgba(194, 59, 59, 0.45) !important;
    cursor: pointer !important;
  }

  /* =========================================================================
     FASE 4 — CENTRAL DE GOVERNANÇA DO FUNDADOR (#viewAdmin) E MODAIS DE GESTÃO
     ========================================================================= */
  #viewAdmin,
  .admin-layout {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - 50px) !important;
    max-height: calc(100dvh - 50px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 12px 100px 12px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
  }

  .admin-layout .dashboard-box,
  .governance-founder-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .gov-top-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  .gov-title-cluster {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .gov-badge-emblem {
    font-size: 1.5rem !important;
    flex-shrink: 0 !important;
  }

  .gov-title-cluster h2 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  .gov-title-cluster p {
    font-size: 0.74rem !important;
    margin: 4px 0 0 0 !important;
    color: var(--text-muted) !important;
  }

  .gov-meta-status {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .gov-status-pill {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 10px !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
  }

  .gov-user-id {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 7px 10px !important;
    background: rgba(7, 19, 31, 0.9) !important;
    border: 1px solid rgba(216, 174, 98, 0.3) !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    color: var(--gold-light) !important;
  }

  .btn-refresh-gov {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    background: rgba(216, 174, 98, 0.18) !important;
    border: 1px solid var(--gold-primary) !important;
    color: var(--gold-light) !important;
  }

  .gov-main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .gov-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    border-radius: 12px !important;
    background: rgba(14, 29, 43, 0.92) !important;
    border: 1px solid rgba(216, 174, 98, 0.3) !important;
  }

  .gov-card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .card-icon-title {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .card-icon-title h3 {
    font-size: 0.95rem !important;
    margin: 0 !important;
    color: #FFF5D6 !important;
  }

  .card-icon-title small {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
  }

  .btn-gov-action,
  .btn-gov-primary {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }

  .connections-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .conn-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 8px !important;
    background: rgba(7, 19, 31, 0.7) !important;
    border: 1px solid rgba(216, 174, 98, 0.2) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .conn-info {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .conn-info strong {
    font-size: 0.8rem !important;
    display: block !important;
    color: #FFF !important;
  }

  .conn-detail {
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    word-break: break-all !important;
    display: block !important;
    margin-top: 2px !important;
  }

  .conn-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .conn-actions .badge-vault {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 6px 10px !important;
  }

  .btn-conn-test {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    font-size: 0.74rem !important;
    text-align: center !important;
    border-radius: 6px !important;
  }

  .commission-overview-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .commission-metric-badge {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background: rgba(7, 19, 31, 0.8) !important;
    border: 1px solid rgba(216, 174, 98, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .gov-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    margin-bottom: 14px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(216, 174, 98, 0.25) !important;
  }

  .gov-table {
    min-width: 520px !important;
    width: 100% !important;
    font-size: 0.74rem !important;
  }

  .gov-table th,
  .gov-table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* Modais de Governança no Mobile */
  .connections-modal-card,
  .commission-modal-card {
    width: 100% !important;
    max-width: 94vw !important;
    max-height: 88dvh !important;
    padding: 18px 14px 14px 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .connections-modal-card .modal-body {
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    max-height: calc(88dvh - 130px) !important;
    padding-right: 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  .connections-modal-card .modal-footer,
  .commission-modal-card .modal-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    flex-shrink: 0 !important;
  }

  .connections-modal-card .btn-modal-primary,
  .connections-modal-card .btn-modal-secondary,
  .commission-modal-card .btn-modal-primary,
  .commission-modal-card .btn-modal-secondary {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .commission-quick-pills {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn-quick-pill {
    padding: 8px 4px !important;
    font-size: 0.72rem !important;
    text-align: center !important;
  }

  /* =========================================================================
     FASE 5 — CONSOLE DO OPERADOR DE LIVE (#viewLive) & CENA PÚBLICA 9:16
     ========================================================================= */
  #viewLive,
  .live-layout {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - 50px) !important;
    max-height: calc(100dvh - 50px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px 10px 100px 10px !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
  }

  .live-top-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .live-bar-left {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .live-bar-left h3 {
    width: 100% !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    margin: 4px 0 0 0 !important;
  }

  .live-bar-center {
    width: 100% !important;
  }

  .live-temp-link-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .live-temp-link-box code {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 8px !important;
    font-size: 0.72rem !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    background: rgba(4, 10, 18, 0.9) !important;
    border-radius: 4px !important;
  }

  .live-bar-right {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .live-bar-right button {
    width: 100% !important;
    padding: 8px 4px !important;
    font-size: 0.68rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  /* Grade em Coluna Única no Mobile */
  .live-console-grid,
  .live-three-columns-refactored {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .live-left-deck-clone-pane,
  .live-altar-pane,
  .live-center-showcase-pane,
  .live-queue-pane,
  .live-right-queue-pane {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* DIAGRAMAÇÃO DO BANNER DE CARTAS NA FILA */
  .live-active-consulente-banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  .live-active-consulente-banner .banner-code-circle {
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 1rem !important;
  }

  .live-active-consulente-banner .banner-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .live-active-consulente-banner .banner-info strong {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    color: #FFF5D6 !important;
    display: block !important;
  }

  .live-active-consulente-banner .banner-info span {
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
    color: var(--text-muted) !important;
    display: block !important;
  }

  .btn-random-draw-queue {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--gold-primary), #B4863E) !important;
    color: #07131F !important;
    box-shadow: 0 4px 14px rgba(216, 174, 98, 0.4) !important;
    cursor: pointer !important;
  }

  /* Vitrine das Cartas da Fila */
  .live-queue-cards-showcase-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .live-queue-card-slot {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 8px !important;
  }

  .live-center-footer-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }

  .btn-unlock-all-live-banner {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  /* Modal de Leitura Integral da Live */
  .live-full-reading-modal .live-full-reading-card {
    width: 100% !important;
    max-width: 94vw !important;
    max-height: 86dvh !important;
    padding: 16px 14px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .live-full-reading-card .modal-head {
    position: relative !important;
    padding-right: 36px !important;
    margin-bottom: 12px !important;
  }

  .live-full-reading-card .modal-head .btn-close-modal {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Cena Pública 9:16 no Mobile */
  .live-public-scene-overlay {
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  .scene-close-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    background: rgba(7, 19, 31, 0.95) !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
  }

  .btn-close-scene {
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 0.74rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }

  .scene-bar-controls-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .scene-bar-controls-group .btn-scene-ctrl {
    padding: 6px 8px !important;
    font-size: 0.65rem !important;
    white-space: nowrap !important;
    border-radius: 5px !important;
  }

  .scene-res-label,
  .scene-divider-pipe {
    display: none !important;
  }
}

/* ==========================================================================
   BOTÃO NOBRE DE PLAY/PAUSE/CARREGANDO NA BARRA DO PAINEL DA LEITURA ORACULAR
   Posicionado centralizado na barra superior do painel (.curtain-header-bar),
   nunca interferindo na Mesa Oracular nem colidindo com a Casa 20.
   Em estado de carregamento, exibe um círculo rodando sem quebrar a diagramação.
   ========================================================================== */
.audio-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 229, 143, 0.28);
  border-top-color: #FFE58F;
  border-radius: 50%;
  animation: spinAudioLoading 0.75s linear infinite;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

@keyframes spinAudioLoading {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.btn-floating-narrativa-playpause {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  background: rgba(14, 29, 43, 0.95) !important;
  border: 1.5px solid #FFE58F !important;
  color: #FFE58F !important;
  font-family: var(--font-display, 'Cinzel', serif) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 229, 143, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  margin: 0 6px !important;
  box-sizing: border-box !important;
}

.btn-floating-narrativa-playpause:hover {
  background: linear-gradient(135deg, rgba(255, 229, 143, 0.2), rgba(216, 174, 98, 0.3)) !important;
  border-color: #FFF2A8 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75), 0 0 14px rgba(255, 229, 143, 0.6) !important;
}

.btn-floating-narrativa-playpause.is-playing {
  border-color: #FFF2A8 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.35), rgba(181, 138, 54, 0.45)) !important;
  animation: yellowGlowPulse 2s infinite ease-in-out !important;
}

.btn-floating-narrativa-playpause.is-loading {
  min-width: 32px !important;
  width: 32px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-color: #FFE58F !important;
}

.btn-floating-narrativa-playpause .audio-playpause-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFE58F;
  filter: drop-shadow(0 0 4px rgba(255, 229, 143, 0.8));
  transition: transform 0.2s ease;
}

.btn-floating-narrativa-playpause:hover .audio-playpause-icon {
  transform: scale(1.1);
  color: #FFFFFF;
}

@media (max-width: 900px) {
  .curtain-header-bar .btn-floating-narrativa-playpause {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    font-size: 0.68rem !important;
    margin: 0 4px !important;
  }
  .curtain-header-bar .btn-floating-narrativa-playpause.is-loading {
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
  }
}

/* Botão Play/Pause no Canto Superior Direito do Painel da Câmera (Zona 3 da Cena 9:16, fora do Altar) */
.btn-scene-playpause-live {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(11, 23, 36, 0.94) !important;
  border: 1.5px solid #FFE58F !important;
  color: #FFE58F !important;
  font-family: var(--font-display, 'Cinzel', serif) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  font-weight: 800 !important;
  padding: 5px 11px !important;
  border-radius: 14px !important;
  z-index: 120 !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.75), 0 0 10px rgba(255, 229, 143, 0.45) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-scene-playpause-live:hover,
.btn-scene-playpause-live.is-playing {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.35), rgba(181, 138, 54, 0.45)) !important;
  color: #FFF !important;
  border-color: #FFF2A8 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.85), 0 0 16px rgba(255, 229, 143, 0.75) !important;
}

/* ==========================================================================
   GATILHO DISCRETO ^ NO CANTO INFERIOR ESQUERDO DO PAINEL DA CÂMERA (PRINT 4)
   Oculta os botões por padrão, revelando-os suavemente e CENTRALIZADOS ao clicar no ^
   ========================================================================== */
.btn-camera-hud-toggle {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 23, 36, 0.75);
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: #FFE58F;
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 6px;
  z-index: 55;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
}

.btn-camera-hud-toggle:hover {
  background: rgba(20, 32, 48, 0.95);
  border-color: #FFE58F;
  box-shadow: 0 0 10px rgba(255, 229, 143, 0.6);
  transform: scale(1.08);
}

.btn-camera-hud-toggle .hud-toggle-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  line-height: 1;
}

.btn-camera-hud-toggle.is-open .hud-toggle-arrow {
  transform: rotate(180deg);
}

/* O HUD da câmera fica 100% CENTRALIZADO dentro do painel da câmera quando aberto */
.scene-camera-floating-controls {
  position: absolute !important;
  bottom: 46px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: calc(100% - 14px) !important;
  display: flex;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(11, 23, 36, 0.95) !important;
  border: 1.5px solid rgba(216, 174, 98, 0.6) !important;
  padding: 5px 10px !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85), 0 0 12px rgba(216, 174, 98, 0.35) !important;
  z-index: 60 !important;
  box-sizing: border-box !important;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ==========================================================================
   PORTAL SAGRADO CIRCULAR DE ENTRADA (LIVE · CAMPANHA · INSTITUCIONAL)
   Estética Alquímica Circular Sagrada com Astrolábio Dourado e Brilhos da Mesa
   ========================================================================== */
.portal-backdrop {
  background: rgba(3, 7, 12, 0.94);
  backdrop-filter: blur(14px);
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.portal-backdrop[style*="display: none"] {
  display: none !important;
}

.sacred-circular-portal {
  position: relative;
  width: min(92vw, 490px);
  height: min(92vw, 490px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0d2136 0%, #071321 65%, #02070c 100%);
  border: 2px solid #D8AE62;
  box-shadow: 0 0 50px rgba(216, 174, 98, 0.45), 0 0 100px rgba(255, 229, 143, 0.22), inset 0 0 45px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: visible;
  animation: portalBreath 5s infinite ease-in-out;
}

@keyframes portalBreath {
  0%, 100% {
    box-shadow: 0 0 40px rgba(216, 174, 98, 0.4), 0 0 80px rgba(255, 229, 143, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.9);
  }
  50% {
    box-shadow: 0 0 65px rgba(216, 174, 98, 0.65), 0 0 120px rgba(255, 229, 143, 0.35), inset 0 0 55px rgba(0, 0, 0, 0.8);
  }
}

/* Anéis Concêntricos do Astrolábio */
.portal-outer-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(216, 174, 98, 0.35);
  pointer-events: none;
}

.portal-dashed-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 229, 143, 0.45);
  pointer-events: none;
  animation: spinPortalRing 100s linear infinite;
}

@keyframes spinPortalRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.portal-inner-glow {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(216, 174, 98, 0.25);
  pointer-events: none;
}

.btn-close-portal-circular {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(11, 23, 36, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: #FFE58F;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-close-portal-circular:hover {
  background: rgba(216, 174, 98, 0.25);
  border-color: #FFE58F;
  color: #FFF;
  transform: scale(1.1);
}

.portal-circle-content {
  position: relative;
  z-index: 10;
  width: 82%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.portal-circle-emblem {
  margin-bottom: 6px;
  filter: drop-shadow(0 0 10px rgba(255, 229, 143, 0.5));
}

.portal-badge-pill {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 14px;
  background: rgba(216, 174, 98, 0.18);
  border: 1px solid rgba(255, 229, 143, 0.4);
  color: #FFE58F;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.portal-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-shadow: 0 0 14px rgba(255, 229, 143, 0.6);
  margin: 0 0 4px 0;
}

.portal-referrer-tag {
  font-family: var(--font-body, 'Lora', serif);
  font-style: italic;
  font-size: 0.82rem;
  color: #D8AE62;
  margin-bottom: 10px;
}

.portal-subtitle {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #CBD5E1;
  max-width: 320px;
  margin: 0 0 16px 0;
}

.portal-action-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.btn-portal-google-login {
  width: 86%;
  max-width: 290px;
  padding: 11px 18px;
  border-radius: 26px;
  border: 1.5px solid #4285F4;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  color: #0F172A;
  font-size: 0.88rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(66, 133, 244, 0.4), 0 0 14px rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-portal-google-login:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px rgba(66, 133, 244, 0.6), 0 0 20px rgba(255, 255, 255, 0.5);
}

.portal-security-badge {
  font-size: 0.65rem;
  color: #94A3B8;
  letter-spacing: 0.03em;
}

/* Modos de Portal */
.sacred-circular-portal.portal-live {
  border-color: #EF4444;
  box-shadow: 0 0 50px rgba(239, 68, 68, 0.45), 0 0 90px rgba(216, 174, 98, 0.3), inset 0 0 45px rgba(0, 0, 0, 0.9);
}

.sacred-circular-portal.portal-live .portal-badge-pill {
  background: rgba(239, 68, 68, 0.25);
  border-color: #EF4444;
  color: #FCA5A5;
}

.sacred-circular-portal.portal-campaign {
  border-color: #D8AE62;
  box-shadow: 0 0 50px rgba(216, 174, 98, 0.5), 0 0 100px rgba(255, 229, 143, 0.3), inset 0 0 45px rgba(0, 0, 0, 0.9);
}

.sacred-circular-portal.portal-campaign .portal-badge-pill {
  background: rgba(216, 174, 98, 0.2);
  border-color: #FFE58F;
  color: #FFE58F;
}

.sacred-circular-portal.portal-root {
  border-color: #5CA9D6;
  box-shadow: 0 0 50px rgba(92, 169, 214, 0.4), 0 0 90px rgba(216, 174, 98, 0.3), inset 0 0 45px rgba(0, 0, 0, 0.9);
}

.sacred-circular-portal.portal-root .portal-badge-pill {
  background: rgba(92, 169, 214, 0.2);
  border-color: #5CA9D6;
  color: #BAE6FD;
}

/* Ajustes Mobile Finos para o Portal */
@media (max-width: 480px) {
  .sacred-circular-portal {
    width: 94vw;
    height: 94vw;
  }
  .portal-title {
    font-size: 1.4rem;
  }
  .portal-subtitle {
    font-size: 0.75rem;
    line-height: 1.35;
    margin-bottom: 12px;
  }
  .btn-portal-google-login {
    padding: 9px 14px;
    font-size: 0.82rem;
  }
}

/* ==========================================================================
   BARRA DE SELEÇÃO & MONITORAMENTO DE LIVE DOS DIVULGADORES (ABA FUNDADOR)
   ========================================================================== */
.gov-referrer-monitor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(11, 23, 36, 0.95);
  border: 1.5px solid rgba(216, 174, 98, 0.5);
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 10px rgba(216, 174, 98, 0.2);
}

.monitor-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.monitor-bar-left .monitor-icon {
  font-size: 1.4rem;
}

.monitor-bar-left strong {
  display: block;
  font-family: var(--font-display, 'Cinzel', serif);
  color: var(--gold-light);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.monitor-bar-left small {
  color: #94A3B8;
  font-size: 0.76rem;
}

.monitor-bar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.select-admin-referrer {
  background: #08121E;
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: #E2E8F0;
  font-size: 0.84rem;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
}

.select-admin-referrer:focus {
  border-color: var(--gold-primary);
}

.btn-admin-watch-live {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.4));
  border: 1.5px solid #EF4444;
  color: #FFF;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  transition: all 0.2s ease;
}

.btn-admin-watch-live:hover {
  background: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
  transform: translateY(-1px);
}

.live-dot-pulse {
  animation: liveDotPulse 1.4s infinite;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* ==========================================================================
   FORMULÁRIO DE CONCESSÃO DIRETA DE DIVULGADOR & TABELA
   ========================================================================== */
.grant-role-direct-form {
  background: rgba(14, 29, 45, 0.6);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

.grant-inputs-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.grant-input-col {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.grant-input-col.narrow {
  flex: 0 0 100px;
  min-width: 90px;
}

.grant-input-col.btn-col {
  flex: 0 0 auto;
}

.grant-input-col label {
  font-size: 0.72rem;
  color: #CBD5E1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-input-txt {
  background: #08121E;
  border: 1px solid rgba(216, 174, 98, 0.35);
  border-radius: 6px;
  color: #F8FAFC;
  padding: 8px 12px;
  font-size: 0.84rem;
  outline: none;
}

.admin-input-txt:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 8px rgba(216, 174, 98, 0.3);
}

.btn-admin-grant-role {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.3), rgba(181, 138, 54, 0.45));
  border: 1.5px solid var(--gold-primary);
  color: #FFF;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.80rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(216, 174, 98, 0.3);
  transition: all 0.2s ease;
}

.btn-admin-grant-role:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.5), rgba(181, 138, 54, 0.65));
  box-shadow: 0 4px 14px rgba(216, 174, 98, 0.5);
  transform: translateY(-1px);
}

.approved-referrers-table-box h4 {
  font-family: var(--font-display, 'Cinzel', serif);
  color: var(--gold-light);
  font-size: 0.88rem;
  margin: 0 0 10px 0;
  letter-spacing: 0.05em;
}

.approved-referrers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.approved-ref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 22, 36, 0.8);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
}

.approved-ref-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ref-role-badge {
  background: rgba(43, 179, 116, 0.2);
  border: 1px solid #2BB374;
  color: #86EFAC;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.70rem;
  font-weight: 700;
}

.ref-rate-badge {
  color: var(--gold-light);
  font-weight: 700;
}

.btn-ref-revoke {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #F87171;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ref-revoke:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #EF4444;
}

/* ==========================================================================
   CLONAGEM 2D SIMPLIFICADA E BLINDADA PARA A CENA PÚBLICA 9:16 (DESKTOP & MOBILE)
   Garante 100% das 20 cartas íntegras na Zona 2 com Moldura Estrelada Dourada + Aura Roxa
   e Preenchimento Total Inteligente da Narrativa na Zona 1 para Lives do TikTok
   ========================================================================== */
.live-public-scene-overlay {
  padding: 4px !important;
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.scene-close-bar {
  display: none !important;
}

.scene-916-container.scene-916-three-zones {
  height: calc(100dvh - 8px) !important;
  max-height: 920px !important;
  width: min(calc((100dvh - 8px) * 9 / 16), 98vw) !important;
  max-width: min(495px, 98vw) !important;
  aspect-ratio: 9 / 16 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 5px !important;
  padding: 5px !important;
  margin: auto !important;
  box-sizing: border-box !important;
}

/* BLOCO 1 (TOPO - 46.5% DA ALTURA 9:16): ALTAR COM AURORA DO FIM DO DIA (PÔR DO SOL SUTIL NA BASE ESCURECENDO ATÉ O TOPO) */
.scene-zone-middle-altar {
  order: 1 !important;
  flex: 0 0 46.5% !important;
  height: 46.5% !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 14px 14px 11px 11px !important;
  border-bottom: 1px solid rgba(251, 176, 76, 0.30) !important;
  background:
    radial-gradient(ellipse 88% 46% at 50% 103%,
      rgba(252, 186, 88, 0.52) 0%,
      rgba(234, 124, 48, 0.34) 42%,
      rgba(164, 62, 38, 0.14) 72%,
      rgba(10, 16, 30, 0) 100%),
    radial-gradient(ellipse 135% 62% at 50% 100%,
      rgba(218, 108, 42, 0.36) 0%,
      rgba(148, 56, 40, 0.22) 54%,
      rgba(12, 18, 34, 0) 88%),
    linear-gradient(0deg,
      #8A431E 0%,
      #5E2C1F 20%,
      #351E33 44%,
      #161932 68%,
      #091124 86%,
      #050A15 100%) !important;
}

/* BLOCO 2 (MEIO - 21.5% DA ALTURA 9:16): PAINEL DE SAÍDA DA NARRATIVA CLONADA (TELEPROMPTER AMPLIADO + FOCO CENTRALIZADO) */
.scene-zone-top-oracle {
  order: 2 !important;
  flex: 0 0 21.5% !important;
  height: 21.5% !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(11, 24, 42, 0.98) 0%, rgba(6, 14, 26, 0.99) 100%) !important;
  border: 1.5px solid rgba(255, 229, 143, 0.82) !important;
  border-radius: 13px !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.88),
    0 0 12px rgba(216, 174, 98, 0.25),
    inset 0 0 16px rgba(216, 174, 98, 0.14) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Vinheta suave superior/inferior para valorizar o trecho central lido e o contexto imediato acima/abaixo */
.scene-zone-top-oracle::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(6, 14, 26, 0) 0%,
    rgba(6, 14, 26, 0) 78%,
    rgba(6, 14, 26, 0.82) 100%
  );
}

.scene-zone-top-oracle:has(.is-promo-mode)::after {
  display: none !important;
}

.scene-cloned-cascades-viewport {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-snap-type: none !important;
  scrollbar-width: none !important;
  box-sizing: border-box !important;
}

.scene-cloned-cascades-viewport::-webkit-scrollbar {
  display: none !important;
}

.scene-cloned-cascades-content {
  width: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* BLOCO 3 (BASE - 32% DA ALTURA 9:16): PAINEL DA CÂMERA COM TODOS OS CONTROLES */
.scene-zone-bottom-camera {
  order: 3 !important;
  flex: 1 1 32% !important;
  height: 32% !important;
  min-height: 0 !important;
  width: 100% !important;
}

/* Botão Voltar Discreto no Canto Superior Esquerdo do Painel da Câmera (Simétrico ao Play/Pause) */
.btn-scene-back-live {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: rgba(11, 23, 36, 0.92) !important;
  border: 1.5px solid rgba(255, 229, 143, 0.72) !important;
  color: #FFE58F !important;
  font-family: var(--font-display, 'Cinzel', serif) !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  z-index: 120 !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.75), 0 0 10px rgba(216, 174, 98, 0.32) !important;
  transition: all 0.2s ease !important;
}

.btn-scene-back-live:hover {
  background: rgba(216, 174, 98, 0.28) !important;
  border-color: #FFF2A8 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

#sceneClonedAltarTarget {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  perspective: none !important;
}

/* PALCO DO ALTAR PÚBLICO: Contém a Mesa Redonda Sagrada (.scene-round-table-circle) + Grade Quadrada 4x5 (.scene-simple-grid-4x5) */
.scene-simple-altar-disc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

/* MESA REDONDA SAGRADA (DISCO CIRCULAR ATRÁS E AO REDOR DA GRADE 4X5 COM REFLEXO CREPUSCULAR NA BASE) */
.scene-round-table-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(2px 2px at 16% 18%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.6px 1.6px at 84% 18%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(1.8px 1.8px at 18% 82%, #fde68a, rgba(253,230,138,0)),
    radial-gradient(2px 2px at 82% 82%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 50% 4%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 50% 96%, #fed7aa, rgba(254,215,170,0)),
    radial-gradient(1.8px 1.8px at 4% 50%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(1.8px 1.8px at 96% 50%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(ellipse 86% 48% at 50% 98%,
      rgba(248, 166, 74, 0.44) 0%,
      rgba(206, 96, 42, 0.24) 48%,
      rgba(44, 21, 84, 0) 85%),
    linear-gradient(0deg,
      rgba(138, 64, 32, 0.62) 0%,
      rgba(86, 36, 68, 0.68) 32%,
      rgba(52, 22, 92, 0.76) 62%,
      rgba(22, 16, 52, 0.88) 100%);
  border: 2.5px solid #FFE58F;
  box-shadow:
    0 0 10px rgba(255, 229, 143, 0.88),
    0 4px 20px rgba(234, 124, 48, 0.34),
    0 6px 22px rgba(0, 0, 0, 0.88),
    inset 0 -14px 26px rgba(246, 158, 66, 0.32),
    inset 0 0 18px rgba(168, 85, 247, 0.72),
    inset 0 0 5px rgba(255, 229, 143, 0.65);
}

/* Anel Sagrado Interno tracejado da Mesa Redonda */
.scene-round-table-circle::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 229, 143, 0.45);
  box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.45);
  pointer-events: none;
}

/* Constelação Estrelada Dourada e Lilás na Borda Circular da Mesa Redonda */
.scene-round-table-circle::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  background-image:
    radial-gradient(2.2px 2.2px at 50% 1%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 68% 4.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.2px 2.2px at 83% 14.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 94% 30%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2.2px 2.2px at 99% 50%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 94% 70%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.2px 2.2px at 83% 85.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 68% 95.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2.2px 2.2px at 50% 99%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 32% 95.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.2px 2.2px at 17% 85.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 6% 70%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2.2px 2.2px at 1% 50%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 6% 30%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.2px 2.2px at 17% 14.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 32% 4.5%, #e9d5ff, rgba(233,213,255,0));
  will-change: opacity;
  animation: cintilacaoEstrelasDisco1 3.2s ease-in-out infinite alternate;
}

/* BORDA INTERNA DO QUADRADO DO ALTAR (ENTRE AS CARTAS): Aurora do Fim do Dia na base escurecendo suavemente até o topo */
.scene-simple-grid-4x5 {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 4px 5px;
  width: 84%;
  height: 88%;
  padding: 5px 6px;
  border-radius: 12px;
  background:
    radial-gradient(ellipse 94% 54% at 50% 104%,
      rgba(251, 178, 82, 0.46) 0%,
      rgba(222, 110, 44, 0.28) 44%,
      rgba(142, 54, 40, 0.12) 72%,
      rgba(8, 14, 26, 0) 100%),
    linear-gradient(0deg,
      rgba(126, 58, 26, 0.74) 0%,
      rgba(82, 38, 34, 0.76) 24%,
      rgba(40, 25, 48, 0.80) 50%,
      rgba(15, 22, 42, 0.88) 76%,
      rgba(6, 12, 24, 0.95) 100%);
  border: 2px solid #FFE58F;
  box-shadow:
    0 0 8px rgba(255, 229, 143, 0.90),
    0 4px 18px rgba(234, 124, 48, 0.30),
    0 0 18px rgba(168, 85, 247, 0.78),
    inset 0 -12px 24px rgba(246, 158, 66, 0.22),
    inset 0 0 8px rgba(255, 229, 143, 0.38);
  box-sizing: border-box;
  align-items: stretch;
  justify-items: center;
}

/* Constelação de Estrelas Douradas e Brancas ao Redor da Borda Quadrada Interna do Altar (GPU-only opacity) */
.scene-simple-grid-4x5::before,
.scene-simple-grid-4x5::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  pointer-events: none;
  z-index: 4;
  will-change: opacity;
}

.scene-simple-grid-4x5::before {
  background-image:
    radial-gradient(2px 2px at 5% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 18% 1.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.2px 2.2px at 32% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 48% 1%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.2px 2.2px at 64% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 80% 1.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2px 2px at 94% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 98.5% 15%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.2px 2.2px at 99% 35%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 98.5% 55%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2px 2px at 99% 75%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 98.5% 92%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2.2px 2.2px at 86% 98.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 68% 99%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 50% 98.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 32% 99%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2.2px 2.2px at 14% 98.5%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 1.5% 88%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 1% 68%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 1.5% 48%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2.2px 2.2px at 1% 28%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 1.5% 10%, #ffffff, rgba(255,255,255,0));
  animation: cintilacaoEstrelasMesa1 3.0s ease-in-out infinite alternate;
}

.scene-simple-grid-4x5::after {
  background-image:
    radial-gradient(1.8px 1.8px at 11% 1.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2.2px 2.2px at 25% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 40% 1.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 56% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 72% 1.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2.2px 2.2px at 88% 2%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 99% 24%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2.2px 2.2px at 98.5% 44%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 99% 64%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 98.5% 84%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 78% 98.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2.2px 2.2px at 58% 99%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 40% 98.5%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 22% 99%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 6% 98.5%, #e9d5ff, rgba(233,213,255,0)),
    radial-gradient(2.2px 2.2px at 1.5% 78%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.5px 1.5px at 1% 58%, #ffffff, rgba(255,255,255,0)),
    radial-gradient(2px 2px at 1.5% 38%, #fef08a, rgba(254,240,138,0)),
    radial-gradient(1.8px 1.8px at 1% 18%, #e9d5ff, rgba(233,213,255,0));
  animation: cintilacaoEstrelasMesa2 2.7s ease-in-out infinite alternate-reverse;
}

.scene-simple-card-slot {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(8, 18, 32, 0.95);
  border: 1.2px solid rgba(216, 174, 98, 0.62);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
  overflow: visible;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.scene-simple-card-frame {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060e1a;
}

.scene-simple-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}

.scene-simple-card-slot.inverted .scene-simple-card-frame img {
  transform: rotate(180deg);
}

.scene-simple-house-plaque {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #162B45 0%, #091526 100%);
  border: 1px solid rgba(216, 174, 98, 0.78);
  color: #FFE58F;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.50rem;
  font-weight: 800;
  line-height: 1;
  padding: 1.5px 4px;
  border-radius: 4px;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.scene-simple-card-slot.speaking-card,
.scene-simple-card-slot.focus-highlight {
  border: 2px solid #FF2A2A !important;
  box-shadow:
    0 0 10px rgba(255, 42, 42, 0.95),
    0 0 20px rgba(255, 42, 42, 0.65),
    inset 0 0 6px rgba(255, 80, 80, 0.5) !important;
  transform: scale(1.07);
  z-index: 12;
}

/* Stream de Leitura Teleprompter Ampliado com Seções Agregadas e Cabeçalho Fixado no Topo do Painel (9:16 Live Pública & TikTok Studio) */
.scene-simple-reading-stream {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 0 72px 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.scene-simple-section {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.scene-simple-section[data-sec-key="Aconselhamento"] {
  background: linear-gradient(180deg, rgba(16, 36, 30, 0.42) 0%, rgba(8, 18, 30, 0.15) 100%) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(52, 211, 153, 0.24) !important;
  padding-bottom: 4px !important;
}

.scene-simple-para {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 6px 10px 8px 10px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  scroll-snap-align: none !important;
}

.scene-simple-para-top-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 16 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 6px 10px 6px 10px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #08121E !important;
  border-bottom: 1px solid rgba(216, 174, 98, 0.42) !important;
  box-shadow: 0 4px 10px rgba(4, 10, 18, 0.92) !important;
  flex-shrink: 0 !important;
}

.scene-simple-section[data-sec-key="Aconselhamento"] > .scene-simple-para-top-bar {
  background: #0B1B18 !important;
  border-bottom-color: rgba(52, 211, 153, 0.45) !important;
  border-radius: 9px 9px 0 0 !important;
}

.scene-simple-section[data-sec-key="Aconselhamento"] .scene-simple-sec-title {
  color: #6EE7B7 !important;
}

.scene-simple-subkicker {
  font-family: var(--font-display, 'Cinzel', serif) !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  color: #6EE7B7 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.25 !important;
}

.scene-simple-para-head-left {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.scene-simple-sec-title {
  font-family: var(--font-display, 'Cinzel', serif) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #FFE58F !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.scene-simple-head-sep {
  color: rgba(255, 229, 143, 0.65) !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  flex-shrink: 0 !important;
}

.scene-simple-para-kicker-inline {
  font-family: var(--font-display, 'Cinzel', serif) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  color: #FDE68A !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.scene-simple-sec-play-btn {
  background: rgba(216, 174, 98, 0.24) !important;
  border: 1px solid rgba(255, 229, 143, 0.72) !important;
  color: #FFE58F !important;
  font-family: var(--font-display, 'Cinzel', serif) !important;
  font-size: 0.60rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.scene-simple-para-body {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: stretch !important;
}

.scene-simple-para-text-inner {
  width: 100% !important;
  font-family: var(--font-serif, 'Lora', serif) !important;
  font-size: 18px;
  line-height: 1.46;
  font-weight: 500;
  color: #EFF6FF !important;
  text-align: left !important;
}

.scene-simple-para .card-chip,
.scene-simple-para .card-chip.card-chip-ancestral {
  display: inline-block !important;
  padding: 1px 6px !important;
  margin: 0 2px !important;
  font-size: 0.80em !important;
  line-height: 1.2 !important;
  border-radius: 4px !important;
  vertical-align: baseline !important;
  box-shadow: none !important;
}

.scene-simple-para .karaoke-phrase {
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 3px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

#sceneClonedCascadesContent.has-active-karaoke .scene-simple-para .karaoke-phrase:not(.active-phrase) {
  color: rgba(212, 226, 244, 0.54) !important;
}

#sceneClonedCascadesContent.has-active-karaoke .scene-simple-para .karaoke-phrase:not(.active-phrase) .card-chip {
  opacity: 0.72;
}

.scene-simple-para .karaoke-phrase.active-phrase {
  background: linear-gradient(90deg, rgba(216, 174, 98, 0.46), rgba(255, 229, 143, 0.32)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(255, 229, 143, 0.35);
  font-weight: 600 !important;
  padding: 1px 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (max-width: 900px) {
  .live-public-scene-overlay {
    padding: 3px !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .scene-close-bar {
    display: none !important;
  }

  .scene-916-container.scene-916-three-zones {
    width: 100% !important;
    max-width: 430px !important;
    flex: 1 1 auto !important;
    height: calc(100dvh - 6px) !important;
    max-height: calc(100dvh - 6px) !important;
    padding: 4px !important;
    gap: 4px !important;
  }

  .scene-simple-grid-4x5 {
    padding: 4px 5px !important;
    gap: 4px 5px !important;
    border-radius: 11px !important;
  }

  .btn-scene-playpause-live {
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    padding: 4px 10px !important;
    font-size: 0.62rem !important;
    border-radius: 12px !important;
  }

  .btn-scene-back-live {
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    padding: 4px 9px !important;
    font-size: 0.60rem !important;
    border-radius: 12px !important;
  }
}


/* ==========================================================================
   PAINEL DO DIVULGADOR & GOVERNANÇA: NOVOS ESTILOS V2 (PERÍODOS, LINKS, REPASSES)
   ========================================================================== */

/* Barra de Filtro de Períodos */
.dash-period-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: rgba(14, 29, 43, 0.7);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.period-presets-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.period-label-hint {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-light, #d8ae62);
  font-weight: 600;
  margin-right: 4px;
}

.btn-period-preset {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #CBD5E0;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-period-preset:hover {
  background: rgba(216, 174, 98, 0.15);
  border-color: rgba(216, 174, 98, 0.4);
  color: #FFF;
}

.btn-period-preset.active {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.3), rgba(216, 174, 98, 0.15));
  border-color: var(--gold-primary, #d8ae62);
  color: #FFF;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(216, 174, 98, 0.2);
}

.period-custom-calendar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #A0AEC0;
}

.period-date-input {
  background: rgba(4, 10, 18, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #EDF2F7;
  padding: 5px 8px;
  font-size: 0.78rem;
  font-family: inherit;
  outline: none;
}

.period-date-input:focus {
  border-color: var(--gold-primary, #d8ae62);
  box-shadow: 0 0 6px rgba(216, 174, 98, 0.3);
}

.btn-period-apply {
  background: rgba(216, 174, 98, 0.2);
  border: 1px solid var(--gold-primary, #d8ae62);
  color: var(--gold-light, #f7fafc);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-period-apply:hover {
  background: var(--gold-primary, #d8ae62);
  color: #040A12;
}

/* Acordeão de Links Elegíveis */
.links-accordion-section {
  background: rgba(14, 29, 43, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 24px;
  overflow: hidden;
}

.links-accordion-header {
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s;
}

.links-accordion-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.accordion-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accordion-badge {
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid rgba(216, 174, 98, 0.3);
  color: var(--gold-light, #ecc94b);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}

.accordion-selected-hint {
  font-size: 0.8rem;
  color: #68D391;
  font-weight: 600;
}

.accordion-toggle-arrow {
  color: #A0AEC0;
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.links-accordion-section.open .accordion-toggle-arrow {
  transform: rotate(180deg);
}

.links-accordion-content {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 16px;
  background: rgba(4, 10, 18, 0.4);
}

.links-accordion-section.open .links-accordion-content {
  display: block;
}

.accordion-quick-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.btn-show-all-links {
  background: none;
  border: 1px dashed rgba(216, 174, 98, 0.4);
  color: var(--gold-light, #ecc94b);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.74rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-show-all-links:hover {
  background: rgba(216, 174, 98, 0.1);
}

.links-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.link-accordion-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.2s;
}

.link-accordion-item:hover {
  border-color: rgba(216, 174, 98, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.link-accordion-item.selected {
  border-color: #68D391;
  background: rgba(104, 211, 145, 0.08);
  box-shadow: 0 0 12px rgba(104, 211, 145, 0.15);
}

.link-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.link-type-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.link-type-tag.campaign {
  background: rgba(49, 130, 206, 0.2);
  color: #63B3ED;
  border: 1px solid rgba(49, 130, 206, 0.4);
}

.link-type-tag.live {
  background: rgba(246, 135, 179, 0.2);
  color: #F687B3;
  border: 1px solid rgba(246, 135, 179, 0.4);
}

.link-metrics-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: #A0AEC0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 6px;
}

.link-metrics-row strong {
  color: #EDF2F7;
}

.btn-elect-link {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #EDF2F7;
  padding: 6px;
  border-radius: 5px;
  font-size: 0.74rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-elect-link:hover {
  background: rgba(216, 174, 98, 0.2);
  border-color: var(--gold-primary, #d8ae62);
  color: #FFF;
}

.link-accordion-item.selected .btn-elect-link {
  background: #68D391;
  color: #040A12;
  border-color: #68D391;
}

/* Status de Repasse e Validação */
.payout-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
}

.payout-status-badge.confirmed {
  background: rgba(104, 211, 145, 0.15);
  border: 1px solid #68D391;
  color: #68D391;
}

.payout-status-badge.pending {
  background: rgba(236, 201, 75, 0.15);
  border: 1px solid #ECC94B;
  color: #ECC94B;
}

.payout-request-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.payout-request-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.btn-mark-paid {
  background: linear-gradient(135deg, #38A169, #2F855A);
  border: 1px solid #68D391;
  color: #FFF;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-mark-paid:hover {
  background: #48BB78;
  box-shadow: 0 0 10px rgba(104, 211, 145, 0.3);
}

.credit-counter-pill {
  background: rgba(49, 130, 206, 0.2);
  border: 1px solid rgba(49, 130, 206, 0.4);
  color: #63B3ED;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* =========================================================================
   NOVO BOTÃO R$ COMPRAR PACOTE NO CABEÇALHO & PULSO DOURADO NO TESTE
   ========================================================================= */
.btn-header-buy-package {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.18), rgba(180, 110, 71, 0.28));
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.btn-header-buy-package:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.35), rgba(180, 110, 71, 0.45));
  border-color: #FFE58F;
  color: #FFFDF8;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(216, 174, 98, 0.4);
}

.btn-header-buy-package .badge-rs-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #D8AE62, #B68634);
  color: #07131F;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

.btn-header-buy-package .btn-buy-lock-icon {
  font-size: 0.95rem;
}

/* Animação Contínua Suave a cada 27 segundos durante todo o Teste Gratuito */
@keyframes pulseGoldRs {
  0%, 88%, 100% {
    box-shadow: 0 0 0 0 rgba(216, 174, 98, 0), 0 2px 8px rgba(0, 0, 0, 0.4);
    border-color: #D8AE62;
    transform: scale(1);
  }
  92% {
    box-shadow: 0 0 16px 3px rgba(255, 229, 143, 0.9), 0 0 24px rgba(216, 174, 98, 0.5);
    border-color: #FFF8DB;
    transform: scale(1.04);
  }
  96% {
    box-shadow: 0 0 6px 1px rgba(216, 174, 98, 0.4);
    transform: scale(1);
  }
}

.pulse-gold-rs-active {
  animation: pulseGoldRs 27s infinite ease-in-out !important;
}

/* Tag de Teste Grátis no Chat */
.chat-trial-free-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(43, 179, 116, 0.12);
  border: 1px solid rgba(43, 179, 116, 0.45);
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 0.72rem;
  color: #A7F3D0;
  margin-left: 6px;
  vertical-align: middle;
}

.chat-trial-free-tag .trial-tag-badge {
  color: #34D399;
  font-weight: 600;
  font-size: 0.7rem;
}

.chat-trial-free-tag strong {
  color: #FFF;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* =========================================================================
   MODAL DE BOAS-VINDAS & INSTRUÇÕES DO TESTE GRATUITO (PRINT 2 REFINADO)
   ========================================================================= */
.trial-welcome-card {
  max-width: 580px;
  width: 92%;
  background: rgba(7, 19, 31, 0.98);
  border: 1.5px solid var(--gold-primary);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(216, 174, 98, 0.25);
  border-radius: 16px;
  overflow: hidden;
  animation: fadeInModal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.trial-head {
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(216, 174, 98, 0.15), rgba(7, 19, 31, 0.9));
  border-bottom: 1px solid rgba(216, 174, 98, 0.3);
}

.trial-welcome-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trial-welcome-banner-highlight {
  background: rgba(216, 174, 98, 0.08);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
}

.trial-highlight-pill {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: var(--gold-light);
  margin-bottom: 6px;
}

.trial-highlight-lead {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #ECEFF4;
  margin: 0;
}

.trial-features-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trial-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.trial-feature-item.locked {
  background: rgba(230, 57, 70, 0.06);
  border-color: rgba(230, 57, 70, 0.25);
}

.trial-feature-item .feat-icon {
  font-size: 1.15rem;
  line-height: 1.2;
}

.trial-feature-item .feat-text {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #D8DEE9;
}

.trial-action-instruction-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.16), rgba(80, 50, 20, 0.25));
  border: 1px solid var(--gold-primary);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(216, 174, 98, 0.15);
}

.trial-action-instruction-card .instruction-icon-col {
  font-size: 1.6rem;
}

.trial-action-instruction-card h4 {
  margin: 0 0 4px 0;
  font-size: 0.84rem;
  font-family: 'Cinzel', serif;
  color: var(--gold-light);
}

.trial-action-instruction-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #FFFDF8;
}

.tag-rs-mini {
  background: #D8AE62;
  color: #07131F;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
  font-size: 0.74rem;
}

.trial-welcome-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-trial-buy-direct {
  flex: 1;
  padding: 12px 18px;
  background: linear-gradient(135deg, #D8AE62, #B68634);
  color: #07131F;
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(216, 174, 98, 0.35);
  transition: all 0.2s;
  text-align: center;
}

.btn-trial-buy-direct:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(216, 174, 98, 0.55);
}

.btn-trial-start-ok {
  flex: 1;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.06);
  color: #ECEFF4;
  border: 1px solid rgba(216, 174, 98, 0.5);
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.btn-trial-start-ok:hover {
  background: rgba(216, 174, 98, 0.16);
  border-color: var(--gold-light);
  color: #FFF;
}

/* =========================================================================
   BARRA DE INSTALAÇÃO DO APP PWA & DESTAQUE NO ACOLHIMENTO
   ========================================================================= */
.landing-app-install-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(90deg, rgba(92, 169, 214, 0.12), rgba(216, 174, 98, 0.12));
  border: 1px solid rgba(92, 169, 214, 0.35);
  border-radius: 12px;
  margin-bottom: 16px;
}

.app-install-lead {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-icon-badge {
  font-size: 1.6rem;
}

.app-install-text strong {
  display: block;
  font-size: 0.86rem;
  color: #FFF;
}

.app-install-text small {
  display: block;
  font-size: 0.74rem;
  color: #A0B4C8;
}

.btn-install-pwa-action {
  padding: 8px 16px;
  background: linear-gradient(135deg, #5CA9D6, #2B6CB0);
  color: #FFF;
  font-weight: 700;
  font-size: 0.8rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(43, 108, 176, 0.4);
  transition: all 0.2s;
}

.btn-install-pwa-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(43, 108, 176, 0.6);
}

.journey-card.highlight-royal {
  background: linear-gradient(180deg, rgba(16, 32, 50, 0.95), rgba(7, 19, 31, 0.98));
  border: 2px solid var(--gold-primary);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.8), 0 0 25px rgba(216, 174, 98, 0.25);
  position: relative;
}

.journey-badge.royal {
  background: linear-gradient(135deg, #D8AE62, #B68634);
  color: #07131F;
  font-weight: 800;
}

.package-price-highlight {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 6px 0;
  padding: 8px 14px;
  background: rgba(216, 174, 98, 0.1);
  border-radius: 8px;
  border: 1px dashed rgba(216, 174, 98, 0.35);
}

.package-price-highlight .price-val {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
}

.package-price-highlight .price-val.free {
  color: #68D391;
}

.package-price-highlight .price-quota {
  font-size: 0.78rem;
  color: #CBD5E0;
}

.btn-start-journey-royal {
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, #D8AE62, #B68634);
  color: #07131F;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(216, 174, 98, 0.4);
  transition: all 0.2s;
  letter-spacing: 0.5px;
}

.btn-start-journey-royal:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(216, 174, 98, 0.6);
}

.package-card-note {
  display: block;
  font-size: 0.7rem;
  color: #8C9CAE;
  text-align: center;
  margin-top: 6px;
}

.trial-mt-instruction-hint {
  display: block;
  font-size: 0.76rem;
  color: #E2E8F0;
  margin-top: 3px;
}

.btn-trial-mt-info {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(216, 174, 98, 0.4);
  color: var(--gold-light);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-trial-mt-info:hover {
  background: rgba(216, 174, 98, 0.2);
  border-color: var(--gold-light);
}

/* =========================================================================
   RESPONSIVIDADE MOBILE PARA BOTÃO R$, TESTE GRATUITO E MODAIS
   ========================================================================= */
@media (max-width: 768px) {
  .btn-header-buy-package .btn-buy-text {
    display: none;
  }
  .btn-header-buy-package {
    padding: 5px 8px;
    gap: 4px;
  }
  .trial-welcome-footer-actions {
    flex-direction: column;
    gap: 10px;
  }
  .btn-trial-buy-direct,
  .btn-trial-start-ok {
    width: 100%;
  }
  .landing-app-install-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .app-install-lead {
    flex-direction: column;
    text-align: center;
  }
  .btn-install-pwa-action {
    width: 100%;
  }
}

.journey-card.highlight-royal,
.journey-card {
  padding: 18px 20px !important;
}

.journey-card .journey-features {
  margin: 8px 0 !important;
  gap: 6px !important;
}

.journey-card .journey-features li {
  margin-bottom: 5px !important;
  font-size: 0.81rem !important;
  line-height: 1.35 !important;
}

/* =========================================================================
   BOTÃO BAIXAR APP (PWA) NO CABEÇALHO & MODAL DE INSTALAÇÃO
   ========================================================================= */
.btn-header-install-pwa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(92, 169, 214, 0.15), rgba(43, 108, 176, 0.25));
  border: 1px solid rgba(92, 169, 214, 0.4);
  color: #63B3ED;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.btn-header-install-pwa:hover {
  background: linear-gradient(135deg, rgba(92, 169, 214, 0.3), rgba(43, 108, 176, 0.45));
  border-color: #90CDF4;
  color: #FFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(66, 153, 225, 0.35);
}

.btn-header-install-pwa .pwa-header-icon {
  font-size: 0.95rem;
}

.pwa-install-modal-card {
  max-width: 520px;
  width: 92%;
  background: rgba(7, 19, 31, 0.98);
  border: 1.5px solid rgba(92, 169, 214, 0.5);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(92, 169, 214, 0.25);
  border-radius: 16px;
  overflow: hidden;
  animation: fadeInModal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pwa-guide-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pwa-guide-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 16px;
}

.pwa-app-icon-preview {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: #07131F;
  border: 1.5px solid var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.pwa-hero-meta h4 {
  margin: 0 0 4px 0;
  font-size: 0.92rem;
  font-family: 'Cinzel', serif;
  color: var(--gold-light);
}

.pwa-hero-meta p {
  margin: 0;
  font-size: 0.78rem;
  color: #A0B4C8;
  line-height: 1.35;
}

.pwa-os-instructions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-os-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 16px;
}

.pwa-os-badge {
  font-size: 0.76rem;
  font-weight: 800;
  color: #E2E8F0;
  margin-bottom: 6px;
}

.pwa-os-box ol {
  margin: 0;
  padding-left: 20px;
  font-size: 0.78rem;
  color: #CBD5E0;
  line-height: 1.45;
}

.btn-pwa-direct-install {
  margin-top: 10px;
  width: 100%;
  padding: 9px 14px;
  background: linear-gradient(135deg, #5CA9D6, #2B6CB0);
  border: none;
  border-radius: 8px;
  color: #FFF;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-pwa-direct-install:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(43, 108, 176, 0.5);
}

.pwa-advantage-banner {
  background: rgba(216, 174, 98, 0.08);
  border: 1px dashed rgba(216, 174, 98, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.76rem;
  color: var(--gold-light);
  line-height: 1.4;
}

.btn-popover-install-pwa {
  background: rgba(92, 169, 214, 0.12);
  border: 1px solid rgba(92, 169, 214, 0.35);
  color: #63B3ED;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: left;
}

.btn-popover-install-pwa:hover {
  background: rgba(92, 169, 214, 0.25);
  color: #FFF;
}

@media (max-width: 768px) {
  .btn-header-install-pwa .pwa-header-text {
    display: none;
  }
  .btn-header-install-pwa {
    padding: 5px 8px;
  }
}

/* =========================================================================
   REGRAS CONSOLIDADAS DE RESPONSIVIDADE MOBILE & ESTILO HERMÉTICO
   (Acolhimento Live/Solo, Painel do Divulgador, Central de Governança e Live)
   ========================================================================= */

/* 1. Caixa Nobre de Saque & Comissões do Divulgador (.referrer-payout-box) */
.referrer-payout-box {
  background: linear-gradient(135deg, rgba(14, 28, 44, 0.95), rgba(7, 18, 30, 0.98));
  border: 1.5px solid rgba(216, 174, 98, 0.45);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 18px 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}

.payout-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.commission-sub-pill {
  background: rgba(7, 19, 31, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.commission-sub-pill .pill-lbl {
  font-size: 0.72rem;
  color: #A0B2C6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.commission-sub-pill .pill-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FAF5E8;
  font-family: 'Cinzel', serif;
}

.commission-sub-pill.total {
  border-color: rgba(216, 174, 98, 0.6);
  background: rgba(216, 174, 98, 0.12);
}

.commission-sub-pill.total .pill-val.gold {
  color: #D8AE62;
}

.commission-sub-pill.available {
  border-color: rgba(72, 187, 120, 0.6);
  background: rgba(72, 187, 120, 0.12);
}

.commission-sub-pill.available .pill-val.green {
  color: #48BB78;
}

.payout-action-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(216, 174, 98, 0.25);
  padding-top: 16px;
}

.payout-inputs-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.payout-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 220px;
}

.payout-input-group.narrow {
  flex: 0 0 130px;
  min-width: 120px;
}

.payout-input-group label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-light);
}

.payout-input-group .admin-input-txt {
  background: rgba(5, 12, 22, 0.95);
  border: 1px solid rgba(216, 174, 98, 0.4);
  border-radius: 8px;
  padding: 9px 12px;
  color: #FAF5E8;
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}

.btn-request-pix {
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.35), rgba(72, 187, 120, 0.75));
  border: 1.5px solid #48BB78;
  color: #FFF;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  transition: all 0.2s ease;
}

.btn-request-pix:hover {
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.5), rgba(72, 187, 120, 0.95));
  box-shadow: 0 0 15px rgba(72, 187, 120, 0.4);
}

/* 2. Payout Requests Ledger List (.payout-request-item) */
.payout-request-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: rgba(7, 19, 31, 0.75);
  border: 1px solid rgba(216, 174, 98, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

/* =========================================================================
   MEDIA QUERIES GLOBAIS PARA MOBILE (<= 900px e <= 600px)
   ========================================================================= */
@media (max-width: 900px) {

  /* A. DESOBSTRUÇÃO DO RODAPÉ (Dock de Navegação de Perfis) */
  #viewLive,
  #viewReferrer,
  #viewAdmin,
  .live-layout,
  .referrer-layout,
  .admin-layout {
    padding-bottom: 150px !important; /* Espaço seguro para o dock flutuante */
  }

  /* B. PRIORIDADE VISUAL NO ACOLHIMENTO DA LIVE TIKTOK (#clientLandingModal) */
  .live-possibilities-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* O formulário de entrada (Live ou Solo) aparece PRIMEIRO no mobile! */
  #cardJourneyLive {
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
  }

  /* A coluna explicativa de benefícios e possibilidades fica logo abaixo */
  #cardLivePossibilitiesInfo {
    order: 2 !important;
    width: 100% !important;
  }

  /* Modal de Acolhimento confortável e com rolagem suave */
  #clientLandingModal .landing-modal-card,
  .client-landing-container {
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 12px 40px 12px !important;
  }

  /* C. PAINEL DO DIVULGADOR NO MOBILE */
  .referrer-payout-box {
    padding: 14px 12px !important;
    margin: 14px 0 !important;
  }

  .payout-summary-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .commission-sub-pill {
    padding: 8px 10px !important;
  }

  .commission-sub-pill.total {
    grid-column: span 2 !important;
  }

  .commission-sub-pill.available {
    grid-column: span 2 !important;
  }

  .payout-inputs-cluster {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .payout-input-group,
  .payout-input-group.narrow,
  .btn-request-pix {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .btn-request-pix {
    justify-content: center !important;
    height: 44px !important;
    font-size: 0.88rem !important;
  }

  /* D. CENTRAL DE GOVERNANÇA NO MOBILE */
  .gov-referrer-monitor-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .monitor-bar-controls {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .select-admin-referrer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 12px !important;
    font-size: 0.8rem !important;
  }

  .btn-admin-watch-live {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 40px !important;
  }

  /* Tabela de Divulgadores com Rolagem Horizontal Suave */
  .gov-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid rgba(216, 174, 98, 0.3) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
  }

  .gov-table-wrapper::-webkit-scrollbar {
    height: 6px !important;
  }

  .gov-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--gold-primary) !important;
    border-radius: 4px !important;
  }

  .gov-table-wrapper::-webkit-scrollbar-track {
    background: rgba(7, 19, 31, 0.9) !important;
  }

  .gov-table {
    min-width: 620px !important;
    width: 100% !important;
  }

  /* Cards de DRE Tripartido e Consolidado */
  .dre-tripartite-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .dre-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .dre-col.highlight {
    grid-column: span 2 !important;
  }

  /* Bloco de Cortesia e Storage Pruning */
  .grant-cortesia-box,
  .storage-pruning-box {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    box-sizing: border-box !important;
  }

  .grant-cortesia-box > div,
  .storage-pruning-box > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  #inputGovCortesiaEmail {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #btnGovGrantCortesiaAction,
  #btnGovPruneReadingsAction {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: 42px !important;
  }

  /* E. CONSOLE DO STREAMER NO MOBILE (#viewLive) */
  .live-three-columns-refactored {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .live-col-left,
  .live-col-center,
  .live-col-right {
    width: 100% !important;
    min-width: 0 !important;
  }

  .live-queue-carousel,
  .live-queue-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Telas Pequenas (Smartphones <= 600px) */
@media (max-width: 600px) {

  /* Abas do Acolhimento Live vs Solo */
  .live-entry-mode-tabs {
    gap: 6px !important;
    padding: 4px !important;
  }

  .btn-live-entry-tab {
    padding: 8px 6px !important;
  }

  .btn-live-entry-tab .tab-icon {
    font-size: 1.1rem !important;
  }

  .btn-live-entry-tab .tab-label {
    font-size: 0.74rem !important;
  }

  .btn-live-entry-tab .tab-sub {
    font-size: 0.62rem !important;
  }

  /* Payout Ledger Item em Coluna */
  .payout-request-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .payout-request-item > div:last-child {
    width: 100% !important;
  }

  .payout-request-item .btn-mark-paid {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
  }

  .payout-summary-row {
    grid-template-columns: 1fr !important;
  }

  .commission-sub-pill.total,
  .commission-sub-pill.available {
    grid-column: span 1 !important;
  }

  .dre-grid {
    grid-template-columns: 1fr !important;
  }

  .dre-col.highlight {
    grid-column: span 1 !important;
  }
}

/* =========================================================================
   AUDITORIA FINAL DE PRODUÇÃO: MOTOR DE DIÁLOGOS SAGRADOS, TOASTS &
   REFINAMENTOS DE RESPONSIVIDADE MULTI-TELAS (DESKTOP / CELULAR / LIVE)
   ========================================================================= */

.zaoio-sacred-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(3, 8, 16, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  animation: sacredDialogFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sacredDialogFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zaoio-sacred-dialog-card {
  background: linear-gradient(145deg, rgba(14, 26, 42, 0.98), rgba(6, 13, 24, 0.99));
  border: 1.5px solid rgba(216, 174, 98, 0.65);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.88),
    0 0 32px rgba(216, 174, 98, 0.22),
    inset 0 1px 0 rgba(255, 235, 180, 0.2);
  max-width: 480px;
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px 24px;
  box-sizing: border-box;
  color: #FAF5E8;
}

.zaoio-sacred-dialog-crest {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-primary, #D8AE62);
  text-align: center;
  margin-bottom: 6px;
}

.zaoio-sacred-dialog-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.12rem;
  font-weight: 700;
  color: #FFF5D6;
  text-align: center;
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(216, 174, 98, 0.22);
}

.zaoio-sacred-dialog-body {
  font-size: 0.9rem;
  color: #E2E8F0;
  line-height: 1.55;
  overflow-y: auto;
  max-height: 52vh;
  padding-right: 4px;
  margin-bottom: 20px;
}

.zaoio-sacred-dialog-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-sacred-dialog-cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #CBD5E1;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sacred-dialog-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

.btn-sacred-dialog-confirm {
  background: linear-gradient(135deg, #D8AE62, #B47B38);
  border: 1px solid #FFE4A0;
  color: #06101B;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 9px 22px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(216, 174, 98, 0.35);
  transition: all 0.2s ease;
}

.btn-sacred-dialog-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(216, 174, 98, 0.55);
  filter: brightness(1.06);
}

/* Toasts Ocasionais Sagrados */
.zaoio-sacred-toast-container {
  position: fixed;
  top: 72px;
  right: 20px;
  z-index: 999998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(92vw, 380px);
}

.zaoio-sacred-toast {
  background: linear-gradient(135deg, rgba(12, 24, 38, 0.96), rgba(7, 15, 26, 0.98));
  border: 1px solid rgba(216, 174, 98, 0.65);
  border-left: 4px solid #D8AE62;
  color: #FAF5E8;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.4;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.zaoio-sacred-toast .toast-star {
  color: #D8AE62;
  font-size: 1rem;
  flex-shrink: 0;
}

.zaoio-sacred-toast.fade-out {
  opacity: 0;
  transform: translateX(20px);
}

/* Responsividade do Portal Sagrado Circular, Banner Live na Mesa e Barra de Produção */
@media (max-width: 768px) {
  .gov-production-control-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .gov-production-control-bar > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .gov-production-control-bar button {
    width: 100% !important;
    justify-content: center !important;
  }

  #liveMainTableBanner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  #liveMainTableBanner .live-mt-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #liveMainTableBanner .live-mt-actions button {
    flex: 1 1 auto !important;
    justify-content: center !important;
    font-size: 0.74rem !important;
    padding: 6px 10px !important;
  }

  .zaoio-sacred-dialog-card {
    padding: 18px 16px 16px 16px !important;
  }

  .zaoio-sacred-dialog-actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  .btn-sacred-dialog-cancel,
  .btn-sacred-dialog-confirm {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  #sacredCircularPortal {
    width: min(94vw, 370px) !important;
    height: min(94vw, 370px) !important;
    padding: 18px !important;
  }
}

/* =========================================================================
   BLINDAGEM DE VISIBILIDADE DO DECK E CHAT SOMENTE NO ALTAR CONSULTORIA
   ========================================================================= */
body[data-app-role="live"] #floatingOracularControls,
body[data-app-role="referrer"] #floatingOracularControls,
body[data-app-role="admin"] #floatingOracularControls,
body[data-app-role="live"] #floatingChatCard,
body[data-app-role="referrer"] #floatingChatCard,
body[data-app-role="admin"] #floatingChatCard,
body[data-app-role="live"] #floatingAncestralCardAnchor,
body[data-app-role="referrer"] #floatingAncestralCardAnchor,
body[data-app-role="admin"] #floatingAncestralCardAnchor,
body[data-app-role="live"] #statusPill,
body[data-app-role="referrer"] #statusPill,
body[data-app-role="admin"] #statusPill,
body[data-app-role="live"] #btnEdgeToggleLeft,
body[data-app-role="referrer"] #btnEdgeToggleLeft,
body[data-app-role="admin"] #btnEdgeToggleLeft,
body[data-app-role="live"] #btnEdgeToggleRight,
body[data-app-role="referrer"] #btnEdgeToggleRight,
body[data-app-role="admin"] #btnEdgeToggleRight,
#floatingOracularControls.hidden-by-role,
#statusPill.hidden-by-role {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================================
   CORREÇÃO DEFINITIVA DE DIAGRAMACÃO DA PÁGINA DE ACOLHIMENTO LIVE
   (TELA CHEIA, NAVEGADOR INTERMEDIÁRIO ANTIGRAVITY & MOBILE)
   ========================================================================= */
#clientLandingModal .landing-modal-card {
  max-width: 1060px !important;
  width: min(96vw, 1060px) !important;
  box-sizing: border-box !important;
}

#clientLandingModal .live-possibilities-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  width: 100% !important;
}

#clientLandingModal .landing-journey-card {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#clientLandingModal .live-drawn-card-banner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#clientLandingModal .drawn-card-visual-col {
  flex: 0 0 108px !important;
  width: 108px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

#clientLandingModal .drawn-card-text-col {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#clientLandingModal .tiktok-copy-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
}

#clientLandingModal .tiktok-formatted-phrase {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 0.94rem !important;
  line-height: 1.5 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  text-align: left !important;
}

#clientLandingModal .tiktok-copy-box .btn-copy-code {
  width: 100% !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 9px 14px !important;
  flex-shrink: 0 !important;
}

/* Em janelas intermediárias (como o navegador lateral do Antigravity <= 1120px)
   empilha a coluna de Ação da Live acima do informativo para amplitude total */
@media (max-width: 1120px) {
  #clientLandingModal .live-possibilities-grid {
    grid-template-columns: 1fr !important;
  }
  #clientLandingModal #cardJourneyLive {
    order: 1 !important;
  }
  #clientLandingModal #cardLivePossibilitiesInfo {
    order: 2 !important;
  }
}

@media (max-width: 560px) {
  #clientLandingModal .live-drawn-card-banner {
    flex-direction: column !important;
    align-items: center !important;
  }
  #clientLandingModal .drawn-card-visual-col {
    flex: 0 0 auto !important;
    width: 120px !important;
  }
  #clientLandingModal .drawn-card-text-col {
    width: 100% !important;
  }
}

/* =========================================================================
   GAVETA EXPANSÍVEL DE LINKS INDIVIDUAIS NA TABELA DA GOVERNANÇA
   ========================================================================= */
.referrer-links-drawer-row td {
  background: rgba(6, 16, 28, 0.95) !important;
  padding: 14px 18px !important;
  border-bottom: 2px solid rgba(216, 174, 98, 0.35) !important;
}

.referrer-links-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  width: 100%;
}

.referrer-link-subcard {
  background: linear-gradient(145deg, rgba(14, 31, 49, 0.92), rgba(8, 19, 31, 0.96));
  border: 1px solid rgba(216, 174, 98, 0.32);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.referrer-link-subcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.referrer-link-url-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(4, 11, 20, 0.85);
  border: 1px solid rgba(146, 220, 255, 0.22);
  border-radius: 7px;
  padding: 6px 10px;
  font-family: monospace;
  font-size: 0.76rem;
  color: #92DCFF;
  overflow-x: auto;
}

.referrer-link-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.75rem;
  color: #C9D8E8;
}

.referrer-link-kpis span strong {
  color: var(--gold-light);
}

/* =========================================================================
   PAINEL ESQUERDO DE HISTÓRICO REFATORADO: TIRAGENS PRIMÁRIAS & CICLOS UNIFICADOS
   ========================================================================= */

/* Esconde permanentemente o box antigo desacoplado CYC_... */
#cycleCurrentBox {
  display: none !important;
}

.hist-empty-state {
  padding: 18px 14px;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
  background: rgba(8, 19, 31, 0.45);
  border: 1px dashed rgba(216, 174, 98, 0.25);
  border-radius: 10px;
  line-height: 1.45;
}
.hist-empty-state span {
  display: block;
  margin-top: 4px;
  font-size: 0.73rem;
  color: var(--gold-secondary);
}

/* Header e Rodapé modernos dos cards de tiragem */
.modern-ep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.ep-header-left-group,
.ep-header-right-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Badges modernos e refinados (substituem o antigo EP 1 · RAIZ exagerado) */
.ep-pill-modern {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.3;
}

.ep-pill-root {
  background: rgba(216, 174, 98, 0.16);
  color: #F3D28F;
  border: 1px solid rgba(216, 174, 98, 0.45);
}

.ep-pill-comp {
  background: rgba(82, 214, 168, 0.14);
  color: #7CE8C2;
  border: 1px solid rgba(82, 214, 168, 0.42);
}

.ep-pill-cycle-linked {
  display: inline-flex;
  align-items: center;
  font-size: 0.64rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(146, 220, 255, 0.12);
  color: #92DCFF;
  border: 1px solid rgba(146, 220, 255, 0.32);
}

.modern-ep-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
}

.ep-footer-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.pill-cost-tag {
  color: #F3D28F !important;
  border-color: rgba(216, 174, 98, 0.35) !important;
  background: rgba(216, 174, 98, 0.08) !important;
}

/* Botão elegante de abrir mesa diretamente */
.btn-open-ep-mini {
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.38);
  color: #F3D28F;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.btn-open-ep-mini:hover {
  background: rgba(216, 174, 98, 0.26);
  border-color: #F3D28F;
  color: #FFFFFF;
}

/* Botão discreto e elegante de exclusão (sem fundo branco feio) */
.btn-delete-hist-modern {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 95, 109, 0.08);
  border: 1px solid rgba(255, 95, 109, 0.28);
  color: rgba(255, 150, 160, 0.85);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
  flex-shrink: 0;
}
.btn-delete-hist-modern:hover {
  background: rgba(235, 65, 85, 0.25);
  border-color: rgba(255, 110, 125, 0.75);
  color: #FFFFFF;
  transform: scale(1.05);
}

/* =========================================================================
   CARD DE CICLO UNIFICADO (CICLO 1 + NOME EDITÁVEL + MESA RAIZ + COMPLEMENTARES)
   ========================================================================= */
.unified-cycle-card {
  background: linear-gradient(165deg, rgba(11, 25, 40, 0.92), rgba(7, 16, 27, 0.96));
  border: 1px solid rgba(216, 174, 98, 0.35);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.unified-cycle-card.cycle-theme-green {
  border-color: rgba(82, 214, 168, 0.35);
}

.unified-cycle-card.active-cycle-group {
  border-color: rgba(243, 210, 143, 0.82);
  box-shadow: 0 0 18px rgba(216, 174, 98, 0.2);
}

.cycle-unified-header {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(216, 174, 98, 0.2);
}

.cycle-unified-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.cycle-title-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cycle-number-pill {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #071320;
  background: linear-gradient(135deg, #F3D28F, #D8AE62);
  padding: 2px 9px;
  border-radius: 6px;
}

.unified-cycle-card.cycle-theme-green .cycle-number-pill {
  background: linear-gradient(135deg, #7CE8C2, #3BB78F);
  color: #041912;
}

.cycle-ep-counter-pill {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gold-light);
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.28);
  padding: 2px 7px;
  border-radius: 999px;
}

.cycle-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cycle-accordion-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(216, 174, 98, 0.12);
  border: 1px solid rgba(216, 174, 98, 0.35);
  color: var(--gold-light);
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.18s ease;
}
.cycle-accordion-btn:hover {
  background: rgba(216, 174, 98, 0.28);
  color: #FFFFFF;
}

.cycle-name-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(5, 13, 22, 0.65);
  border: 1px solid rgba(216, 174, 98, 0.24);
  border-radius: 7px;
  padding: 4px 8px;
}
.cycle-name-edit-row:focus-within {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 2px rgba(216, 174, 98, 0.15);
}

.cycle-edit-icon {
  font-size: 0.76rem;
  color: var(--gold-secondary);
  opacity: 0.85;
  flex-shrink: 0;
}

.cycle-inline-name-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #F7E7C4;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
}
.cycle-inline-name-input::placeholder {
  color: rgba(201, 216, 232, 0.45);
}

/* Lista conectada de episódios dentro do Ciclo */
.cycle-episodes-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  padding-left: 8px;
  border-left: 2px solid rgba(216, 174, 98, 0.32);
  margin-left: 4px;
}

.unified-cycle-card.cycle-theme-green .cycle-episodes-list {
  border-left-color: rgba(82, 214, 168, 0.35);
}

.cycle-ep-item-card {
  background: rgba(12, 27, 43, 0.82);
  border: 1px solid rgba(216, 174, 98, 0.24);
  border-radius: 9px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}

.cycle-ep-item-card:hover {
  border-color: rgba(216, 174, 98, 0.55);
  background: rgba(16, 35, 55, 0.92);
}

.cycle-ep-item-card.active {
  border-color: #F3D28F;
  background: rgba(26, 48, 72, 0.92);
  box-shadow: inset 0 0 0 1px rgba(243, 210, 143, 0.35);
}

.cycle-ep-item-card.ep-comp-card {
  border-color: rgba(82, 214, 168, 0.28);
}
.cycle-ep-item-card.ep-comp-card.active {
  border-color: #7CE8C2;
}

.btn-cycle-inline-add-comp {
  width: 100%;
  background: linear-gradient(135deg, rgba(82, 214, 168, 0.12), rgba(216, 174, 98, 0.12));
  border: 1px dashed rgba(82, 214, 168, 0.5);
  border-radius: 8px;
  padding: 6px 10px;
  color: #A7F3D0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.18s ease;
}
.btn-cycle-inline-add-comp:hover {
  background: linear-gradient(135deg, rgba(82, 214, 168, 0.24), rgba(216, 174, 98, 0.22));
  border-style: solid;
  color: #FFFFFF;
}

/* =========================================================================
   GAVETA RECOLHE & REVELA DOS 3 BOTÕES DE AÇÃO DO HISTÓRICO (NOVA TIRAGEM, CICLO & COMPLEMENTAR)
   ========================================================================= */
#historyActionsRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px !important;
  flex-shrink: 0;
}

.btn-toggle-history-actions-drawer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(22, 41, 62, 0.96), rgba(12, 24, 38, 0.98));
  border: 1px solid rgba(243, 210, 143, 0.55);
  color: #FAF5E8;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
}

.btn-toggle-history-actions-drawer:hover,
.btn-toggle-history-actions-drawer.open {
  border-color: #F3D28F;
  background: linear-gradient(135deg, rgba(34, 62, 92, 0.96), rgba(18, 35, 54, 0.98));
  box-shadow: 0 4px 14px rgba(216, 174, 98, 0.25);
}

.drawer-toggle-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.drawer-toggle-glyph {
  font-size: 0.92rem;
  line-height: 1;
}

.drawer-toggle-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #F5E3BA;
  letter-spacing: 0.02em;
}

.drawer-toggle-pill {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  color: #09131F;
  background: linear-gradient(135deg, #F5D796, #D8AE62);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.history-actions-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 4px;
}

.history-actions-drawer-body.collapsed {
  display: none !important;
}

.btn-new-primary-reading {
  width: 100%;
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.22), rgba(20, 42, 65, 0.92)) !important;
  border: 1px solid rgba(243, 210, 143, 0.65) !important;
  color: var(--gold-light) !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  transition: all 0.22s ease;
}

.btn-new-primary-reading:hover {
  background: linear-gradient(135deg, rgba(216, 174, 98, 0.36), rgba(32, 62, 92, 0.96)) !important;
  border-color: #F3D28F !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(216, 174, 98, 0.32);
}

.btn-new-primary-reading .btn-glyph {
  font-size: 1rem;
  color: #F3D28F;
  flex-shrink: 0;
}

.btn-new-primary-reading .btn-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.15;
}

.btn-new-primary-reading .btn-txt strong {
  color: #FAF5E8;
  font-size: 0.76rem;
}

.btn-new-primary-reading .btn-txt small {
  font-size: 0.62rem;
  color: #C5D3E3;
  font-weight: 400;
}

/* =========================================================================
   ESTEIRA DE USO & COMPRA DO PACOTE CANÔNICO (ANÚNCIO ATRATIVO NA LEITURA)
   ========================================================================= */
.esteira-promo-conversion-card {
  margin: 22px 0 18px 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(16, 30, 48, 0.96), rgba(9, 18, 30, 0.98));
  border: 1.5px solid rgba(243, 210, 143, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 0 24px rgba(216, 174, 98, 0.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.esteira-promo-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.esteira-promo-kicker {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #F3D28F;
  text-transform: uppercase;
  background: rgba(216, 174, 98, 0.15);
  border: 1px solid rgba(216, 174, 98, 0.38);
  padding: 4px 10px;
  border-radius: 999px;
}

.esteira-promo-tag-comprar {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #09131F;
  background: linear-gradient(135deg, #F5D796, #D8AE62);
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(216, 174, 98, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.esteira-promo-tag-comprar:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 14px rgba(243, 210, 143, 0.65);
}

.esteira-promo-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #FAF5E8;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.esteira-promo-lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #DCE5F0;
  line-height: 1.55;
}

.esteira-potencialidades-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px) {
  .esteira-potencialidades-grid {
    grid-template-columns: 1fr;
  }
}

.esteira-pot-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 11px;
  background: rgba(24, 43, 66, 0.68);
  border: 1px solid rgba(216, 174, 98, 0.25);
}

.esteira-pot-icon {
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 2px;
}

.esteira-pot-item strong {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: #F5E3BA;
  margin-bottom: 3px;
}

.esteira-pot-item p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: #B9C8D8;
  line-height: 1.42;
}

.esteira-package-info-box {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(11, 22, 35, 0.88);
  border: 1px solid rgba(82, 214, 168, 0.38);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.esteira-pkg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.esteira-pkg-badge {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 800;
  color: #7CE8C2;
  letter-spacing: 0.04em;
}

.esteira-pkg-autonomy {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: #F3D28F;
  font-weight: 600;
}

.esteira-pkg-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: #E5EDF6;
}

.esteira-promo-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.btn-esteira-comprar-cta {
  width: 100%;
  padding: 12px 18px;
  border-radius: 11px;
  border: 1px solid #F7E2B0;
  background: linear-gradient(135deg, #F3D28F 0%, #D8AE62 55%, #B88938 100%);
  color: #09131F;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(216, 174, 98, 0.38);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn-esteira-comprar-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(243, 210, 143, 0.55);
  filter: brightness(1.06);
}

.esteira-promo-subnote {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: #9FB2C7;
  text-align: center;
}

.comprar-badge-pill,
.btn-buy-sub-pill {
  font-weight: 800 !important;
  letter-spacing: 0.04em;
}









/* ==========================================================================
   ZAOIO — MODALIDADES FOCAIS (TIRAGEM 8 CARTAS - 75 CRÉDITOS)
   Harmonização geométrica no Altar, Seletor de Lentes e Containers de IA
   ========================================================================== */

/* 1. GRADE DO ALTAR: AMPULHETA HARMONIZADA DE 8 CASAS (CENTRALIZADA EM TODAS AS RESOLUÇÕES) */
#altarDisc3D:has(.cards-grid-focal-8) .altar-callout {
  display: none !important;
}

#paneCenter #cardsGrid4x5.cards-grid-focal-8,
#cardsGrid4x5.cards-grid-focal-8,
.cards-grid-4x5.cards-grid-focal-8 {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) translateZ(14px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 98px) !important;
  grid-template-rows: repeat(4, 122px) !important;
  gap: 10px 22px !important;
  width: max-content !important;
  height: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 24px 34px !important;
  margin: 0 !important;
  justify-content: center !important;
  align-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  box-shadow: 
    0 0 12mm rgba(216, 174, 98, 0.45), 
    0 0 22mm rgba(126, 34, 206, 0.4), 
    inset 0 0 8mm rgba(216, 174, 98, 0.22) !important;
  border: 2px solid rgba(216, 174, 98, 0.7) !important;
  border-radius: 26px !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* ILUMINAÇÃO VERMELHA NO RETÂNGULO DO ALTAR AO ACENDER COM AS CARTAS EM DESTAQUE */
#cardsGrid4x5.cards-grid-focal-8:has(.focus-highlight),
#cardsGrid4x5.cards-grid-focal-8:has(.chip-selected-pulse),
#cardsGrid4x5.cards-grid-focal-8.has-focus-highlight,
#cardsGrid4x5.cards-grid-focal-8.speaking-altar,
#cardsGrid4x5.cards-grid-focal-8.altar-lit,
#cardsGrid4x5:has(.focus-highlight),
#cardsGrid4x5:has(.chip-selected-pulse),
#cardsGrid4x5.has-focus-highlight,
#cardsGrid4x5.speaking-altar,
#cardsGrid4x5.altar-lit,
.cards-grid-4x5:has(.focus-highlight),
.cards-grid-4x5:has(.chip-selected-pulse),
.cards-grid-4x5.speaking-altar,
.cards-grid-4x5.altar-lit,
.cards-grid-focal-8.has-focus-highlight,
.cards-grid-focal-8.speaking-altar,
.cards-grid-focal-8.altar-lit {
  border-color: #ff4d4d !important;
  box-shadow: 
    0 0 18px 4px rgba(255, 42, 42, 0.95),
    0 0 42px 10px rgba(255, 42, 42, 0.65),
    inset 0 0 18px 4px rgba(255, 77, 77, 0.45) !important;
}

#paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2,
#cardsGrid4x5.cards-grid-focal-8 .card-slot-v2,
.cards-grid-focal-8 .card-slot-v2 {
  width: 98px !important;
  height: 122px !important;
  margin: 0 auto !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

#paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame,
#cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame,
.cards-grid-focal-8 .card-slot-v2 .slot-frame {
  width: 98px !important;
  height: 122px !important;
  border-radius: 11px !important;
}

#paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame img,
#cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame img,
.cards-grid-focal-8 .card-slot-v2 .slot-frame img {
  width: 90px !important;
  height: 118px !important;
  border-radius: 10px !important;
}

/* Posicionamento Sagrado da Ampulheta (1 -> 3 -> 3 -> 1) */
.cards-grid-focal-8 .card-slot-v2[data-slot="1"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.cards-grid-focal-8 .card-slot-v2[data-slot="2"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
.cards-grid-focal-8 .card-slot-v2[data-slot="3"] {
  grid-column: 2 !important;
  grid-row: 2 !important;
  border-color: rgba(243, 210, 143, 0.8) !important;
}
.cards-grid-focal-8 .card-slot-v2[data-slot="4"] {
  grid-column: 3 !important;
  grid-row: 2 !important;
}
.cards-grid-focal-8 .card-slot-v2[data-slot="5"] {
  grid-column: 1 !important;
  grid-row: 3 !important;
}
.cards-grid-focal-8 .card-slot-v2[data-slot="6"] {
  grid-column: 2 !important;
  grid-row: 3 !important;
  border-color: rgba(243, 210, 143, 0.8) !important;
}
.cards-grid-focal-8 .card-slot-v2[data-slot="7"] {
  grid-column: 3 !important;
  grid-row: 3 !important;
}
.cards-grid-focal-8 .card-slot-v2[data-slot="8"] {
  grid-column: 2 !important;
  grid-row: 4 !important;
  border-color: rgba(243, 210, 143, 0.8) !important;
}

/* Placa do Slot Focal (Exibe 01 a 08 com subtítulo da casa canônica) */
.cards-grid-focal-8 .house-plaque {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 3px 8px !important;
  background: rgba(15, 18, 28, 0.92) !important;
  border: 1px solid rgba(216, 174, 98, 0.6) !important;
  color: #F6E2B3 !important;
}

/* Destaque do Eixo Decisório (Slots 3, 6, 8 / Casas 8, 13, 18) */
.cards-grid-focal-8.eixo-decisorio-active .card-slot-v2[data-slot="3"] .slot-frame,
.cards-grid-focal-8.eixo-decisorio-active .card-slot-v2[data-slot="6"] .slot-frame,
.cards-grid-focal-8.eixo-decisorio-active .card-slot-v2[data-slot="8"] .slot-frame {
  box-shadow: 0 0 14px rgba(243, 210, 143, 0.85), inset 0 0 8px rgba(243, 210, 143, 0.35) !important;
}

/* 2. SELETOR DE MODALIDADE & LENTES NO MODAL DO BARALHO */
.deck-spread-selector-box {
  background: linear-gradient(135deg, rgba(20, 24, 38, 0.95), rgba(12, 15, 26, 0.98));
  border: 1px solid rgba(216, 174, 98, 0.28);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.deck-spread-selector-label,
.lens-subselector-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #D4AF37;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.deck-spread-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.spread-option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  background: rgba(25, 30, 48, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.spread-option-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.spread-option-card:hover {
  background: rgba(35, 42, 68, 0.85);
  border-color: rgba(216, 174, 98, 0.45);
  transform: translateY(-1px);
}

.spread-option-card.active {
  background: linear-gradient(135deg, rgba(46, 32, 70, 0.9), rgba(28, 22, 48, 0.95));
  border-color: #F3D28F;
  box-shadow: 0 4px 18px rgba(243, 210, 143, 0.25), inset 0 0 10px rgba(243, 210, 143, 0.1);
}

.spread-option-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #F6E2B3;
  background: rgba(216, 174, 98, 0.2);
  border: 1px solid rgba(216, 174, 98, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 6px;
}

.spread-option-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 3px;
}

.spread-option-cost {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ECC94B;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.spread-option-desc {
  font-size: 0.72rem;
  color: #A0AEC0;
  line-height: 1.35;
}

/* Subseletor de Lentes */
.deck-lens-subselector-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(216, 174, 98, 0.2);
}

.lens-pills-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.btn-lens-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(18, 22, 36, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  color: #E2E8F0;
}

.btn-lens-pill .lens-icon {
  font-size: 1.15rem;
  margin-bottom: 3px;
}

.btn-lens-pill strong {
  font-size: 0.75rem;
  color: #FFFFFF;
  line-height: 1.2;
}

.btn-lens-pill small {
  font-size: 0.64rem;
  color: #A0AEC0;
  margin-top: 2px;
}

.btn-lens-pill:hover {
  background: rgba(30, 36, 58, 0.9);
  border-color: rgba(216, 174, 98, 0.4);
}

.btn-lens-pill.active {
  background: linear-gradient(135deg, rgba(58, 38, 92, 0.85), rgba(32, 24, 56, 0.95));
  border-color: #ECC94B;
  box-shadow: 0 0 12px rgba(236, 201, 75, 0.3);
}

.btn-lens-pill.active strong {
  color: #F6E2B3;
}

/* 3. CONTAINERS ORACULARES DA TIRAGEM FOCAL DE 8 CARTAS */

/* Container 1: Veredito Decisório / Sentença Oracular */
.focal-veredito-card {
  background: linear-gradient(145deg, rgba(20, 24, 38, 0.98), rgba(14, 17, 28, 0.98));
  border: 1.5px solid rgba(216, 174, 98, 0.35);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(216, 174, 98, 0.1);
}

.focal-veredito-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.focal-seal-icon {
  font-size: 1.6rem;
  filter: drop-shadow(0 0 8px rgba(216, 174, 98, 0.5));
}

.focal-veredito-titles {
  flex: 1;
}

.focal-kicker-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ECC94B;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.focal-veredito-titles h3 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #FFFFFF;
}

/* Cores de Veredito */
.focal-veredito-card.verdict-sim {
  border-color: rgba(72, 187, 120, 0.6);
  box-shadow: 0 0 20px rgba(72, 187, 120, 0.2);
}
.focal-veredito-card.verdict-sim .focal-veredito-titles h3 {
  color: #48BB78;
  text-shadow: 0 0 12px rgba(72, 187, 120, 0.45);
}

.focal-veredito-card.verdict-nao {
  border-color: rgba(245, 101, 101, 0.6);
  box-shadow: 0 0 20px rgba(245, 101, 101, 0.2);
}
.focal-veredito-card.verdict-nao .focal-veredito-titles h3 {
  color: #F56565;
  text-shadow: 0 0 12px rgba(245, 101, 101, 0.45);
}

.focal-veredito-card.verdict-condicional {
  border-color: rgba(236, 201, 75, 0.6);
  box-shadow: 0 0 20px rgba(236, 201, 75, 0.2);
}
.focal-veredito-card.verdict-condicional .focal-veredito-titles h3 {
  color: #ECC94B;
  text-shadow: 0 0 12px rgba(236, 201, 75, 0.45);
}

.focal-veredito-card.verdict-inconclusivo {
  border-color: rgba(160, 174, 192, 0.6);
}
.focal-veredito-card.verdict-inconclusivo .focal-veredito-titles h3 {
  color: #CBD5E0;
}

.focal-viabilidade-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(12, 15, 26, 0.85);
  border: 1px solid rgba(216, 174, 98, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
}

.viabilidade-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: #F3D28F;
}

.focal-viabilidade-box small {
  font-size: 0.6rem;
  text-transform: uppercase;
  color: #A0AEC0;
}

.focal-sentenca-hero {
  font-size: 0.96rem;
  line-height: 1.6;
  color: #F7FAFC;
  margin-bottom: 12px;
  font-weight: 500;
}

.focal-justificativa-eixo {
  font-size: 0.8rem;
  color: #CBD5E0;
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid #ECC94B;
  line-height: 1.45;
}

.focal-justificativa-eixo .eixo-tag {
  font-weight: 700;
  color: #ECC94B;
  margin-right: 5px;
}

/* Container 3: Revelações Ocultas & Sentimentos Subjacentes */
.focal-revelacoes-card {
  background: linear-gradient(145deg, rgba(24, 20, 38, 0.98), rgba(16, 13, 26, 0.98));
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(168, 85, 247, 0.1);
}

.focal-revelacoes-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.focal-revelacoes-titles h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #E9D5FF;
  letter-spacing: 0.04em;
}

.focal-revelacoes-titles small {
  font-size: 0.72rem;
  color: #C084FC;
}

.focal-revelacoes-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.revelacao-bloco {
  background: rgba(12, 10, 22, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
}

.revelacao-bloco.revelacao-alerta {
  border-color: rgba(236, 201, 75, 0.3);
  background: rgba(28, 24, 16, 0.5);
}

.revelacao-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #D8B4FE;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.revelacao-bloco.revelacao-alerta .revelacao-label {
  color: #ECC94B;
}

.revelacao-bloco p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #F3E8FF;
}

/* Container 4: Aconselhamento Prático & Próximos Passos (Focal 8) */
.focal-aconselhamento-card {
  background: linear-gradient(145deg, rgba(20, 30, 26, 0.98), rgba(12, 20, 18, 0.98));
  border: 1.5px solid rgba(52, 211, 153, 0.35);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(52, 211, 153, 0.08);
}

.focal-aconselhamento-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aconselhamento-bloco {
  background: rgba(10, 22, 18, 0.6);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  transition: all 0.25s ease;
}

.aconselhamento-bloco:hover {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(14, 28, 24, 0.75);
}

.aconselhamento-bloco.aconselhamento-limite {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(28, 14, 16, 0.55);
}

.aconselhamento-bloco.aconselhamento-limite:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(36, 18, 20, 0.7);
}

.aconselhamento-bloco.aconselhamento-executivo {
  border-color: rgba(216, 174, 98, 0.45);
  background: rgba(30, 25, 14, 0.6);
}

.aconselhamento-bloco.aconselhamento-executivo:hover {
  border-color: rgba(216, 174, 98, 0.6);
  background: rgba(38, 32, 18, 0.75);
}

.aconselhamento-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6EE7B7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.aconselhamento-bloco.aconselhamento-limite .aconselhamento-label {
  color: #FCA5A5;
}

.aconselhamento-bloco.aconselhamento-executivo .aconselhamento-label {
  color: #FCD34D;
}

.aconselhamento-bloco p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #ECFDF5;
}

.aconselhamento-bloco.aconselhamento-limite p {
  color: #FFF1F2;
}

.aconselhamento-bloco.aconselhamento-executivo p {
  color: #FEF3C7;
}

/* Responsividade Mobile para Altar Focal de 8 Cartas & Novas Telas */
@media (max-width: 900px) {
  #paneCenter #cardsGrid4x5.cards-grid-focal-8,
  #cardsGrid4x5.cards-grid-focal-8,
  .cards-grid-4x5.cards-grid-focal-8 {
    grid-template-columns: repeat(3, 86px) !important;
    grid-template-rows: repeat(4, 114px) !important;
    gap: 9px 20px !important;
    padding: 22px 30px !important;
    border-radius: 24px !important;
    width: max-content !important;
    height: max-content !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateZ(14px) !important;
  }
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2,
  .cards-grid-focal-8 .card-slot-v2 {
    width: 86px !important;
    height: 114px !important;
  }
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame,
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame img,
  .cards-grid-focal-8 .card-slot-v2 .slot-frame,
  .cards-grid-focal-8 .card-slot-v2 .slot-frame img {
    width: 86px !important;
    height: 114px !important;
  }
  .cards-grid-focal-8 .house-plaque {
    font-size: 8px !important;
    padding: 1px 4px !important;
    bottom: -6px !important;
  }
  .deck-spread-options-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .lens-pills-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .trial-welcome-card {
    max-height: calc(100dvh - 20px) !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 14px !important;
    margin: auto !important;
  }
  .trial-welcome-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 16px !important;
    flex: 1 1 auto !important;
  }
  .gov-somativo-bar {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }
  .gov-somativo-bar > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-right: 0 !important;
    padding-bottom: 10px !important;
  }
  .gov-somativo-bar > div:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

/* 4. PALCO 9:16 DA TRANSMISSÃO AO VIVO (TIKTOK/OBS E CENA PÚBLICA) - GRADE FOCAL 8 CARTAS */
.scene-simple-grid-4x5.scene-simple-grid-focal-8 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: 2.3% 5.2% !important;
  padding: 3.4% 6.9% !important;
  max-width: none !important;
  margin: 0 auto !important;
  align-items: stretch !important;
  justify-items: center !important;
}

.scene-simple-grid-focal-8 .scene-simple-card-slot {
  height: 100% !important;
  width: auto !important;
  aspect-ratio: 0.865 !important;
  max-width: 100% !important;
}

.scene-simple-grid-focal-8 .scene-simple-card-slot[data-slot="1"] { grid-column: 2 !important; grid-row: 1 !important; }
.scene-simple-grid-focal-8 .scene-simple-card-slot[data-slot="2"] { grid-column: 1 !important; grid-row: 2 !important; }
.scene-simple-grid-focal-8 .scene-simple-card-slot[data-slot="3"] { grid-column: 2 !important; grid-row: 2 !important; }
.scene-simple-grid-focal-8 .scene-simple-card-slot[data-slot="4"] { grid-column: 3 !important; grid-row: 2 !important; }
.scene-simple-grid-focal-8 .scene-simple-card-slot[data-slot="5"] { grid-column: 1 !important; grid-row: 3 !important; }
.scene-simple-grid-focal-8 .scene-simple-card-slot[data-slot="6"] { grid-column: 2 !important; grid-row: 3 !important; }
.scene-simple-grid-focal-8 .scene-simple-card-slot[data-slot="7"] { grid-column: 3 !important; grid-row: 3 !important; }
.scene-simple-grid-focal-8 .scene-simple-card-slot[data-slot="8"] { grid-column: 2 !important; grid-row: 4 !important; }

/* 5. PADRONIZAÇÃO VISUAL & RESPONSIVIDADE MOBILE FOCAL */
.pergaminho-narrativo-card.focal-veredito-card,
.pergaminho-narrativo-card.focal-revelacoes-card,
.pergaminho-narrativo-card.focal-aconselhamento-card {
  margin-bottom: 24px;
}

.focal-standard-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-bottom: 1px solid rgba(216, 174, 98, 0.25) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

.focal-standard-header .pergaminho-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 600px) {
  #paneCenter #cardsGrid4x5.cards-grid-focal-8,
  #cardsGrid4x5.cards-grid-focal-8,
  .cards-grid-4x5.cards-grid-focal-8 {
    grid-template-columns: repeat(3, 84px) !important;
    grid-template-rows: repeat(4, 112px) !important;
    gap: 8px 18px !important;
    padding: 20px 28px !important;
    border-radius: 22px !important;
    width: max-content !important;
    height: max-content !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateZ(14px) !important;
  }
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2,
  .cards-grid-focal-8 .card-slot-v2 {
    width: 84px !important;
    height: 112px !important;
  }
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame,
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame img,
  .cards-grid-focal-8 .card-slot-v2 .slot-frame,
  .cards-grid-focal-8 .card-slot-v2 .slot-frame img {
    width: 84px !important;
    height: 112px !important;
  }
  .cards-grid-focal-8 .house-plaque {
    font-size: 8px !important;
    padding: 1px 4px !important;
    bottom: -6px !important;
  }
  .focal-standard-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .focal-standard-header .pergaminho-actions {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .btn-lens-pill {
    flex-direction: row !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 8px 12px !important;
  }
  .btn-lens-pill .lens-icon {
    font-size: 1.1rem !important;
  }
  .frase-poder-box {
    padding: 14px 12px !important;
    margin-bottom: 16px !important;
  }
  .frase-poder-header-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .frase-poder-seal {
    font-size: 0.68rem !important;
    margin-bottom: 2px !important;
  }
  .frase-poder-box blockquote {
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
    padding: 0 4px !important;
  }
  .pergaminho-narrativo-card.focal-veredito-card,
  .pergaminho-narrativo-card.focal-revelacoes-card,
  .pergaminho-narrativo-card.focal-aconselhamento-card {
    padding: 14px 12px !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
  }
  .focal-sentenca-hero {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }
  .focal-justificativa-eixo {
    font-size: 0.76rem !important;
    padding: 8px 10px !important;
    line-height: 1.4 !important;
  }
  #paneCenter .live-main-table-floating-banner:not([style*="display: none"]) {
    top: 6px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }
  #paneCenter .live-mt-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
}

@media (max-width: 480px) {
  #paneCenter #cardsGrid4x5.cards-grid-focal-8,
  #cardsGrid4x5.cards-grid-focal-8,
  .cards-grid-4x5.cards-grid-focal-8 {
    grid-template-columns: repeat(3, 98px) !important;
    grid-template-rows: repeat(4, 122px) !important;
    gap: 10px 22px !important;
    padding: 24px 34px !important;
    border-radius: 26px !important;
    border-width: 2px !important;
    width: max-content !important;
    height: max-content !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateZ(14px) !important;
  }
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2,
  .cards-grid-focal-8 .card-slot-v2 {
    width: 98px !important;
    height: 122px !important;
  }
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame,
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame img,
  .cards-grid-focal-8 .card-slot-v2 .slot-frame,
  .cards-grid-focal-8 .card-slot-v2 .slot-frame img {
    width: 98px !important;
    height: 122px !important;
  }
  .cards-grid-focal-8 .house-plaque {
    font-size: 8px !important;
    padding: 1px 4px !important;
    bottom: -6px !important;
  }
  .deck-spread-options-row {
    grid-template-columns: 1fr !important;
  }
  .lens-pills-row {
    grid-template-columns: 1fr !important;
  }
  .spread-option-card {
    padding: 10px 12px !important;
  }
  .spread-option-title {
    font-size: 0.86rem !important;
  }
  .spread-option-desc {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 360px) {
  #paneCenter #cardsGrid4x5.cards-grid-focal-8,
  #cardsGrid4x5.cards-grid-focal-8,
  .cards-grid-4x5.cards-grid-focal-8 {
    grid-template-columns: repeat(3, 98px) !important;
    grid-template-rows: repeat(4, 122px) !important;
    gap: 10px 22px !important;
    padding: 24px 34px !important;
    border-radius: 26px !important;
    border-width: 2px !important;
  }
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2,
  .cards-grid-focal-8 .card-slot-v2 {
    width: 98px !important;
    height: 122px !important;
  }
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame,
  #paneCenter #cardsGrid4x5.cards-grid-focal-8 .card-slot-v2 .slot-frame img,
  .cards-grid-focal-8 .card-slot-v2 .slot-frame,
  .cards-grid-focal-8 .card-slot-v2 .slot-frame img {
    width: 98px !important;
    height: 122px !important;
  }
}

/* 6. HISTÓRICO DE TIRAGENS: CARD FOCAL 8 CARTAS & BADGES MODERNAS */
.single-card-focal-modern {
  border-left: 3px solid #b794f4 !important;
  background: linear-gradient(135deg, rgba(28, 18, 48, 0.75) 0%, rgba(14, 10, 24, 0.85) 100%) !important;
  border-color: rgba(183, 148, 244, 0.28) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(183, 148, 244, 0.05) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.single-card-focal-modern:hover {
  border-color: rgba(183, 148, 244, 0.6) !important;
  box-shadow: 0 6px 20px rgba(183, 148, 244, 0.2), inset 0 0 16px rgba(183, 148, 244, 0.1) !important;
  transform: translateY(-1px);
}

.single-card-focal-modern.active,
.single-card-focal-modern.selected-single-card {
  box-shadow: 0 0 16px rgba(183, 148, 244, 0.45) !important;
  background: rgba(36, 20, 60, 0.95) !important;
  border-color: rgba(216, 174, 98, 0.6) !important;
}

.ep-pill-focal {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.2) 0%, rgba(216, 174, 98, 0.2) 100%);
  color: #e9d5ff;
  border: 1px solid rgba(183, 148, 244, 0.45);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ep-pill-lens {
  background: rgba(216, 174, 98, 0.12);
  color: #f6e05e;
  border: 1px solid rgba(216, 174, 98, 0.35);
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
}

.ep-veredito-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ep-veredito-badge.verdict-sim {
  background: rgba(72, 187, 120, 0.18);
  color: #68d391;
  border: 1px solid rgba(72, 187, 120, 0.45);
}

.ep-veredito-badge.verdict-nao {
  background: rgba(245, 101, 101, 0.18);
  color: #fc8181;
  border: 1px solid rgba(245, 101, 101, 0.45);
}

.ep-veredito-badge.verdict-condicionado {
  background: rgba(236, 201, 75, 0.18);
  color: #f6e05e;
  border: 1px solid rgba(236, 201, 75, 0.45);
}

.pill-cost-focal {
  color: #d8b4fe !important;
  border-color: rgba(183, 148, 244, 0.4) !important;
  background: rgba(183, 148, 244, 0.1) !important;
  font-weight: 600;
}

.pill-standalone-tag {
  color: #cbd5e0 !important;
  border-color: rgba(203, 213, 224, 0.25) !important;
  background: rgba(203, 213, 224, 0.06) !important;
  font-size: 0.6rem !important;
}

.chat-context-focal {
  box-shadow: 0 0 10px rgba(183, 148, 244, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 7. CABEÇALHO DE ÁUDIO DA SENTENÇA LAPIDAR DO ORÁCULO */
.frase-poder-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(216, 174, 98, 0.22);
}

.frase-poder-header-row .frase-poder-seal {
  margin-bottom: 0 !important;
}

/* 8. MODALIDADE 20 CARTAS BLOQUEADA NA 1ª TIRAGEM DA LIVE */
.spread-option-card.spread-locked-live {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.45);
  border-color: rgba(148, 163, 184, 0.25) !important;
  background: rgba(15, 23, 42, 0.55) !important;
  position: relative;
}

.spread-option-card.spread-locked-live .spread-option-badge {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
}

/* 9. CARD DIFERENCIADO DE TIRAGEM DE CLIENTE LIVE NO HISTÓRICO DO DIVULGADOR / GOVERNANÇA */
.single-card-live-client {
  border-left: 3px solid #38bdf8 !important;
  background: linear-gradient(135deg, rgba(12, 38, 64, 0.85) 0%, rgba(8, 22, 38, 0.92) 100%) !important;
  border-color: rgba(56, 189, 248, 0.42) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), inset 0 0 14px rgba(56, 189, 248, 0.08) !important;
}

.ep-pill-live-client {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(56, 189, 248, 0.18));
  color: #bae6fd;
  border: 1px solid rgba(56, 189, 248, 0.55);
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   10. AURORA DO FIM DO DIA NA PÁGINA DE CONSULTORIA (DESKTOP & MOBILE)
   Horizonte âmbar-dourado sutil na base do Altar escurecendo suavemente até o
   azul-noturno no topo — visível fora do círculo, no disco e entre as cartas.
   ========================================================================== */
#viewConsulting.zaoio-workspace {
  background:
    radial-gradient(ellipse 86% 46% at 50% 103%,
      rgba(252, 186, 88, 0.50) 0%,
      rgba(234, 124, 48, 0.32) 42%,
      rgba(164, 62, 38, 0.14) 72%,
      rgba(10, 16, 30, 0) 100%),
    radial-gradient(ellipse 135% 62% at 50% 100%,
      rgba(218, 108, 42, 0.34) 0%,
      rgba(148, 56, 40, 0.20) 54%,
      rgba(12, 18, 34, 0) 88%),
    linear-gradient(0deg,
      #8A431E 0%,
      #5E2C1F 20%,
      #351E33 44%,
      #161932 68%,
      #091124 86%,
      #050A15 100%) !important;
}

/* No Desktop, mantém #paneCenter transparente para o horizonte da #viewConsulting fluir sem emenda lateral */
@media (min-width: 901px) {
  #viewConsulting #paneCenter,
  #viewConsulting .pane-altar-stage {
    background: transparent !important;
  }
}

/* Na Responsividade Mobile (tela cheia ou dividida 43dvh com leitura aberta), o horizonte acompanha a base exata da janela do Altar (#paneCenter) */
@media (max-width: 900px) {
  #viewConsulting #paneCenter,
  #viewConsulting .pane-altar-stage,
  body.mobile-panel-open #paneCenter,
  body.mobile-panel-open .pane-altar-stage {
    background:
      radial-gradient(ellipse 92% 48% at 50% 103%,
        rgba(252, 186, 88, 0.54) 0%,
        rgba(234, 124, 48, 0.35) 42%,
        rgba(164, 62, 38, 0.15) 72%,
        rgba(10, 16, 30, 0) 100%),
      radial-gradient(ellipse 140% 64% at 50% 100%,
        rgba(218, 108, 42, 0.38) 0%,
        rgba(148, 56, 40, 0.22) 54%,
        rgba(12, 18, 34, 0) 88%),
      linear-gradient(0deg,
        #8A431E 0%,
        #5E2C1F 20%,
        #351E33 44%,
        #161932 68%,
        #091124 86%,
        #050A15 100%) !important;
    border-bottom: 1px solid rgba(251, 176, 76, 0.32) !important;
  }
}

/* Disco Circular Sagrado (#altarDisc3D) com reflexo crepuscular na base e cosmos violeta-noturno no topo */
#viewConsulting #altarDisc3D,
#paneCenter .altar-disc-3d {
  background:
    radial-gradient(ellipse 86% 48% at 50% 98%,
      rgba(248, 166, 74, 0.44) 0%,
      rgba(206, 96, 42, 0.24) 48%,
      rgba(44, 21, 84, 0) 85%),
    linear-gradient(0deg,
      rgba(138, 64, 32, 0.62) 0%,
      rgba(86, 36, 68, 0.68) 32%,
      rgba(52, 22, 92, 0.76) 62%,
      rgba(22, 16, 52, 0.88) 100%) !important;
}

/* Grade Quadrada Interna (entre as 8 ou 20 cartas) na Consultoria Desktop & Mobile */
#paneCenter #cardsGrid4x5,
#paneCenter .cards-grid-4x5,
#paneCenter #cardsGrid4x5.cards-grid-focal-8,
.cards-grid-4x5.cards-grid-focal-8 {
  background:
    radial-gradient(ellipse 94% 54% at 50% 104%,
      rgba(251, 178, 82, 0.46) 0%,
      rgba(222, 110, 44, 0.28) 44%,
      rgba(142, 54, 40, 0.12) 72%,
      rgba(8, 14, 26, 0) 100%),
    linear-gradient(0deg,
      rgba(126, 58, 26, 0.74) 0%,
      rgba(82, 38, 34, 0.76) 24%,
      rgba(40, 25, 48, 0.80) 50%,
      rgba(15, 22, 42, 0.88) 76%,
      rgba(6, 12, 24, 0.95) 100%) !important;
}

/* ==========================================================================
   11. AGREGAÇÃO E ANCORAGEM SOBERANA DO CONTAINER DE ACONSELHAMENTO ORACULAR
       (#cardAconselhamentoFocal8 & #pergaminhoAconselhamentoCard) NO PAINEL DIREITO
   Garante encaixe milimétrico, sem desalinhamento lateral nem cabeçalho solto,
   tanto no Desktop quanto no Mobile (#paneRightModal -> #readingMapInner).
   ========================================================================== */
#paneRightModal #readingMapInner {
  padding-top: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#paneRightModal #cascadesWrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 0 !important;
  box-sizing: border-box !important;
}

#paneRightModal #readingMapInner .pergaminho-narrativo-card,
#paneRightModal #readingMapInner #cardAconselhamentoFocal8,
#paneRightModal #readingMapInner #pergaminhoAconselhamentoCard {
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  display: block;
}

#paneRightModal #readingMapInner #cardAconselhamentoFocal8,
#paneRightModal #readingMapInner #pergaminhoAconselhamentoCard {
  background: linear-gradient(160deg, rgba(16, 30, 25, 0.98) 0%, rgba(10, 19, 17, 0.99) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.42) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 0 14px rgba(52, 211, 153, 0.08) !important;
}

#paneRightModal #readingMapInner .pergaminho-narrativo-card > .pergaminho-header,
#paneRightModal #readingMapInner .pergaminho-narrativo-card > .focal-standard-header {
  position: sticky !important;
  top: -12px !important;
  z-index: 26 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 13px 16px 12px 16px !important;
  box-sizing: border-box !important;
  border-radius: 11px 11px 0 0 !important;
  background: linear-gradient(180deg, #0D1928 0%, #09121E 100%) !important;
  border-bottom: 1px solid rgba(216, 174, 98, 0.30) !important;
  box-shadow: 0 6px 16px rgba(2, 6, 12, 0.85) !important;
}

#paneRightModal #readingMapInner #cardAconselhamentoFocal8 > .pergaminho-header,
#paneRightModal #readingMapInner #pergaminhoAconselhamentoCard > .pergaminho-header {
  background: linear-gradient(180deg, #132620 0%, #0D1B17 100%) !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.40) !important;
  box-shadow: 0 6px 16px rgba(3, 12, 10, 0.90) !important;
}

#paneRightModal #readingMapInner #cardRevelacoesOcultasFocal8 > .pergaminho-header {
  background: linear-gradient(180deg, #181329 0%, #110D1F 100%) !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.36) !important;
}

#paneRightModal #readingMapInner #cardVereditoFocal8 > .pergaminho-header {
  background: linear-gradient(180deg, #1A150E 0%, #101520 100%) !important;
  border-bottom: 1px solid rgba(216, 174, 98, 0.42) !important;
}

#paneRightModal #readingMapInner .pergaminho-narrativo-card > .pergaminho-corpo,
#paneRightModal #readingMapInner .pergaminho-narrativo-card > .focal-aconselhamento-body,
#paneRightModal #readingMapInner .pergaminho-narrativo-card > .focal-revelacoes-body {
  padding: 14px 16px 16px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#paneRightModal #readingMapInner #cardVereditoFocal8 > .focal-sentenca-hero {
  margin: 14px 16px 10px 16px !important;
}

#paneRightModal #readingMapInner #cardVereditoFocal8 > .focal-justificativa-eixo {
  margin: 0 16px 16px 16px !important;
}

#paneRightModal #readingMapInner .pergaminho-narrativo-card > .bloco-continuidade-footer {
  padding: 0 16px 14px 16px !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
}