/* Evita zoom automático em inputs no iOS; melhora leitura em PWA */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --bg:         #0a0d14;
  --surface:    #111827;
  --surface2:   #1a2235;
  --accent:     #6366f1;
  --accent2:    #4f46e5;
  --green:      #10b981;
  --red:        #ef4444;
  --yellow:     #f59e0b;
  --radius:     12px;
  --radius-lg:  18px;
  --border:     rgba(255,255,255,.07);
  --border2:    rgba(255,255,255,.12);
  --text:       #f0f4ff;
  --text-dim:   rgba(240,244,255,.45);
  --text-muted: rgba(240,244,255,.25);
  /* Reserva de altura para barra de sessões inferior (pós-lobby) */
  --postlobby-tabbar-h: 92px;
  /* Padrão visual tipo modal VIP «Abrir selecionadas»: vidro + sombra */
  --app-glass-blur: blur(14px) saturate(1.12);
  --app-glass-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --app-glass-shadow-modal: 0 30px 60px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --app-glass-veil: rgba(255, 255, 255, 0.04);
}
/* --- PRODUCTION HARDENING UTILITIES --- */
.u-cursor-pointer { cursor: pointer !important; }
.u-text-dim-small { font-size: 12px !important; color: var(--text-dim) !important; }
.u-flex-gap-8 { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.u-flex-col-gap-8 { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.u-display-none { display: none !important; }
.u-flex-center-gap-10 { display: flex !important; align-items: center !important; gap: 10px !important; }
.u-flex-center-gap-8 { display: flex !important; align-items: center !important; gap: 8px !important; }
.u-flex-center-gap { display: flex !important; align-items: center !important; gap: 6px !important; }
.u-align-center-gap-10 { display: flex !important; align-items: center !important; gap: 10px !important; }
.u-cursor-help { cursor: help !important; }
.u-w-full { width: 100% !important; }
.u-w-180 { width: 180px !important; }
.u-ml-10 { margin-left: 10px !important; }
.u-border-dashed { border-style: dashed !important; }
.u-border-top-default { border-top: 2px solid var(--border) !important; }
.u-border-top-accent { border-top: 2px solid var(--border) !important; }
.u-accent { color: var(--accent) !important; }
.u-purple { color: #a855f7 !important; }
.u-yellow { color: var(--yellow) !important; }
.u-list-header { padding: 8px 16px !important; background: rgba(255,255,255,0.03) !important; border-bottom: 1px solid var(--border) !important; font-size: 11px !important; font-weight: bold !important; letter-spacing: 1px !important; text-transform: uppercase !important; }
.u-card-condensed { margin-bottom: 16px !important; border: 1px solid var(--border) !important; border-radius: 10px !important; padding: 10px 12px !important; background: rgba(0,0,0,.08) !important; }
.u-flex-between-center { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; }

/* Contas PIX — select «Ações»: ocultar só no dropdown (atalhos Nodal Helper / JS inalterados) */
#pix-actions option.pix-actions-visually-hidden {
  display: none !important;
}

/* ── THEME PALETTES ────────────────────────── */

/* 1. FairyBox (Default) */
body.theme-fairy {
  --bg:         #0f0a14;
  --surface:    rgba(21, 17, 32, 0.86);
  --surface2:   rgba(35, 28, 52, 0.82);
  --accent:     #FF2D75;
  --accent2:    #DB2777;
  --green:      #10b981;
  --red:        #ef4444;
  --yellow:     #f59e0b;
  --pink-glow:  rgba(255, 45, 117, 0.4);
}

/* 2. DarkFairyBox Cinematic (Dramatic Thunderstorm) */
body.theme-dark-cinematic {
  --bg:         #010203;
  --surface:    rgba(10, 4, 22, 0.55);
  --surface2:   rgba(5, 2, 14, 0.62);
  --accent:     #A855F7;
  --accent2:    #8B5CF6;
  --accent-pink:#FF2D75;
  --green:      #00FF88;
  --red:        #FF004C;
  --yellow:     #FF4FD8;
  background-image: url('/static/img/cinematic_storm_bg.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  animation: thunder-flicker 8s infinite;
}

/* Rain overlay layer 1 — fast heavy rain */
body.theme-dark-cinematic::before {
  content: '';
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  height: calc(100% + 100px);
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      175deg,
      transparent 0px,
      transparent 3px,
      rgba(180, 140, 255, 0.12) 3px,
      rgba(180, 140, 255, 0.12) 4px
    );
  background-size: 8px 120px;
  animation: rain-fall 0.35s linear infinite;
}

/* Rain overlay layer 2 — slower lighter rain */
body.theme-dark-cinematic::after {
  content: '';
  position: fixed;
  top: -200px;
  left: 0;
  width: 100%;
  height: calc(100% + 200px);
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      178deg,
      transparent 0px,
      transparent 6px,
      rgba(140, 100, 220, 0.07) 6px,
      rgba(140, 100, 220, 0.07) 7px
    );
  background-size: 14px 180px;
  animation: rain-fall 0.65s linear infinite;
}

@keyframes rain-fall {
  from { background-position: 0 0; }
  to   { background-position: 20px 120px; }
}

@keyframes thunder-flicker {
  0%   { filter: brightness(1); }
  2%   { filter: brightness(1.35) saturate(1.4); }
  4%   { filter: brightness(1); }
  6%   { filter: brightness(1.25) saturate(1.3); }
  8%   { filter: brightness(1); }
  /* long quiet period */
  35%  { filter: brightness(1); }
  36%  { filter: brightness(1.6) saturate(1.6); }
  37%  { filter: brightness(0.95); }
  38%  { filter: brightness(1.5) saturate(1.5); }
  40%  { filter: brightness(1); }
  100% { filter: brightness(1); }
}

/* ── Cinematic: Glass panels ───────────────── */
body.theme-dark-cinematic .panel {
  background: rgba(8, 3, 18, 0.72) !important; /* Fallback slightly more opaque for non-glass browsers */
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-color: rgba(168, 85, 247, 0.18) !important;
}

body.theme-dark-cinematic .panel-header {
  background: rgba(168, 85, 247, 0.06) !important;
  border-bottom-color: rgba(168, 85, 247, 0.12) !important;
}

body.theme-dark-cinematic .topbar {
  background: rgba(5, 2, 12, 0.82) !important; /* Fallback for non-glass browsers */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(168, 85, 247, 0.15) !important;
}

/* Cards: slightly more opaque so text stays sharp */
body.theme-dark-cinematic .conta-card {
  background: rgba(14, 6, 28, 0.85) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body.theme-dark-cinematic .fin-card {
  background: rgba(12, 5, 24, 0.85) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* QR area: keep readable / solid */
body.theme-dark-cinematic #panel-qr .panel {
  background: rgba(6, 2, 16, 0.80) !important;
}

/* Modals: keep solid so QR codes scan correctly */
body.theme-dark-cinematic .modal {
  background: rgba(8, 3, 20, 0.98) !important;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
body.theme-dark-crime-boss {
  --bg:         #050505;
  --surface:    rgba(15, 15, 15, 0.85);
  --surface2:   rgba(25, 25, 25, 0.9);
  --accent:     #FF00FF; /* Neon Pink */
  --accent2:    #D400D4;
  --green:      #2ECC71; /* Money Green */
  --red:        #E74C3C;
  --yellow:     #F1C40F;
  background-image: url('/static/img/crime_boss_bg.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* 4. DarkFairyBox Trading Empire (Institutional / Clean / Professional) */
body.theme-dark-trading-empire {
  --bg:         #0b0e14;
  --surface:    rgba(23, 31, 46, 0.85);
  --surface2:   rgba(30, 41, 59, 0.9);
  --accent:     #3B82F6; /* Professional Blue */
  --accent2:    #2563EB;
  --green:      #10B981;
  --red:        #EF4444;
  --yellow:     #F59E0B;
  background-image: url('/static/img/trading_empire_bg.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Specificity override for personal themes when a DarkFairyBox variant is active */
body[class*="theme-dark-"].theme-fadas {
  /* Inherit the background from the dark theme, don't let theme-fadas win */
  transition: background 0.5s ease;
}




body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse at 10% 0%, rgba(99,102,241,.12) 0, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(16,185,129,.08) 0, transparent 50%);
}

/* ── TOPBAR ────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10020;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  box-sizing: border-box;
  min-height: 46px;
  height: auto;
  max-height: none;
  background: rgba(10, 13, 20, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(56, 189, 248, 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* visible: overflow:hidden cortava .dropdown-menu («Ações», tema) abaixo da barra */
  overflow: visible !important;
}
.topbar.minimized {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 5px 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10, 13, 20, 0.75) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 0 0 18px 18px;
  width: fit-content;
  max-width: 92vw;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-top: none;
  z-index: 10020;
}


@media (max-width: 768px) {
  .topbar.minimized {
    padding: 2px 8px !important;
    max-width: 96vw;
    min-height: 32px !important;
  }
  /* HIDE BULKY MEDIA PLAYER IN MINIMIZED MOBILE MODE */
  .topbar.minimized .topbar-center .topbar-spotify-wrap {
    display: flex !important;
    max-width: 40px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .topbar.minimized .topbar-center .topbar-spotify-wrap .topbar-wmp-chrome,
  .topbar.minimized .topbar-center .topbar-spotify-wrap .topbar-wmp-tabs,
  .topbar.minimized .topbar-center .topbar-spotify-wrap .topbar-wmp-grip,
  .topbar.minimized .topbar-center .topbar-spotify-wrap .topbar-wmp-ctrl-group,
  .topbar.minimized .topbar-center .topbar-spotify-wrap button:not(.topbar-wmp-dock-btn) {
    display: none !important;
  }
  .topbar.minimized .topbar-center .topbar-spotify-wrap .topbar-spotify-bar {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  .topbar.minimized .topbar-center .topbar-spotify-wrap .topbar-spotify-dock-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 16px !important;
  }
  .topbar.minimized .topbar-center {
    gap: 8px !important;
  }
  .topbar.minimized .topbar-center-metrics > .top-stat:last-child,
  .topbar.minimized .topbar-center-metrics > .top-stat#stat-gastos,
  .topbar.minimized .topbar-center-metrics > .top-stat#stat-comissao {
    display: none !important; /* Esconde labels secundários no modo extra-compacto */
  }
  .topbar.minimized .stat-val {
    font-size: 10px !important;
    font-weight: 700 !important;
  }
  .topbar.minimized .topbar-left {
    margin-right: 4px;
    gap: 4px;
  }
  .topbar.minimized .topbar-right {
    margin-left: 4px;
    gap: 4px;
  }
  .topbar.minimized #btn-retrair-topbar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px;
  }
}

.topbar.minimized .topbar-left {
  display: flex !important;
  min-width: auto !important;
  margin-right: 15px;
}

.topbar.minimized .logo-text,
.topbar.minimized .stat-label, 
.topbar.minimized .top-divider,
.topbar.minimized #main-logo-sub {
  display: none !important;
}

.topbar.minimized .topbar-center {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex: none;
  width: auto !important;
  overflow: visible !important;
}

@media (max-width: 600px) {
  .topbar.minimized .topbar-center {
    gap: 5px !important;
  }
}


.topbar.minimized .top-stat {
  padding: 0;
}

.topbar.minimized .stat-val {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  margin-top: 0;
  white-space: nowrap;
}

.topbar.minimized .topbar-right {
  min-width: auto;
  margin-left: 15px;
}

.topbar.minimized #topbar-actions {
  display: none !important;
}

#btn-retrair-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px !important;
  height: 32px !important;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

#btn-retrair-topbar:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.1);
  border-color: var(--accent);
}

/* --- Paolinha.m Special Theme --- */
.user-paolinham .topbar {
  background: linear-gradient(rgba(10, 5, 20, 0.55), rgba(10, 5, 20, 0.55)), 
              url('/static/img/paolinha_bg.png') center top/cover no-repeat !important;
  border-bottom: 2px solid #ff00ff;
  box-shadow: 0 0 16px rgba(255, 0, 255, 0.35);
  padding: 4px 12px;
  max-height: none;
}

.user-paolinham .topbar.minimized {
  background: rgba(20, 0, 30, 0.85) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid #ff00ff !important;
  border-top: none !important;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
}

.user-paolinham .stat-label {
  color: #ff00ff !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 4px rgba(255, 0, 255, 0.8), 0 0 8px rgba(0, 0, 0, 0.8) !important;
}

.user-paolinham .stat-val {
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff !important;
}

.user-paolinham .logo-text {
  color: #ff00ff !important;
  font-weight: 900 !important;
  font-family: 'Cinzel Decorative', cursive !important;
  font-size: clamp(13px, 1.8vw, 17px) !important;
  line-height: 1.1;
  -webkit-text-stroke: 1px white;
  text-shadow: 
    0 0 7px #ff00ff, 
    0 0 15px #ff00ff, 
    0 0 25px #ff00ff,
    0 0 40px rgba(255, 0, 255, 0.4) !important;
  letter-spacing: 1px;
  animation: neon-pulse 3s infinite alternate;
}

@keyframes neon-pulse {
  from {
    text-shadow: 0 0 7px #ff00ff, 0 0 15px #ff00ff, 0 0 25px #ff00ff !important;
  }
  to {
    text-shadow: 0 0 12px #ff00ff, 0 0 25px #ff00ff, 0 0 40px #ff00ff, 0 0 60px rgba(255, 0, 255, 0.6) !important;
    transform: scale(1.02);
  }
}


.user-paolinham .btn-icon, 
.user-paolinham .btn-panel-toggle {
  color: #ff00ff !important;
  text-shadow: 0 0 5px #ff00ff;
}

.user-paolinham .top-divider {
  background: rgba(255, 0, 255, 0.3) !important;
}





.topbar-left  { display:flex; align-items:center; gap:8px; min-width:0; max-width:min(280px, 32vw); flex-shrink:0; }
.topbar-center{
  display:flex; align-items:center; gap:8px; flex:1 1 auto; justify-content:center; min-width:0;
  overflow-x: hidden;
}

/* Entretenimento na top bar (aba removida da barra inferior quando POST_LOBBY_ENTRETENIMENTO_TAB_HIDDEN) */
.topbar-entretenimento-btn {
  display: none;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.topbar-entretenimento-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.topbar-entretenimento-btn.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset;
}
.topbar-entretenimento-ico {
  font-size: 14px;
  line-height: 1;
}
.topbar-entretenimento-label {
  white-space: nowrap;
}
@media (max-width: 420px) {
  .topbar-entretenimento-label {
    display: none;
  }
  .topbar-entretenimento-btn {
    padding: 6px 10px;
  }
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 0 auto;
  flex-shrink: 0;
  justify-content: flex-end;
  overflow: visible;
  white-space: nowrap;
}
.topbar-nodal-mobile-btn { display: inline-flex; align-items:center; justify-content:center; }

/* Top bar — botões alinhados (altura uniforme, sem esmagar o bloco central) */
.topbar:not(.minimized) .topbar-right > .btn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.topbar:not(.minimized) .topbar-right #topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
.topbar:not(.minimized) .topbar-right #topbar-actions .btn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 15px !important;
}
.topbar:not(.minimized) .topbar-right #dropdown-acoes > .btn-ghost {
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .topbar:not(.minimized) {
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 8px;
    padding: 6px 10px;
  }
  .topbar:not(.minimized) .topbar-center,
  .topbar:not(.minimized) .topbar-center-wrap {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    justify-content: center;
  }
  .topbar:not(.minimized) .topbar-right {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
    white-space: normal;
  }
  .topbar:not(.minimized) .topbar-right > .btn-icon,
  .topbar:not(.minimized) .topbar-right #dropdown-acoes > .btn-ghost {
    min-height: 30px;
    height: 30px;
  }
  .topbar:not(.minimized) .topbar-right > .btn-icon {
    width: 30px;
    min-width: 30px;
  }
  .topbar:not(.minimized) .topbar-right #dropdown-acoes > .btn-ghost {
    padding: 0 9px;
    font-size: 11px;
  }
}

/* ── Inteligência de Áudio (topbar + player fixo) ── */
.topbar-spotify-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(360px, 40vw);
}
/* Player compacto no centro: não estica a largura inteira da topbar */
.topbar:not(.minimized) .topbar-center > .topbar-spotify-wrap {
  max-width: min(380px, 46vw);
  width: auto;
  align-self: center;
}
.topbar-spotify-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  padding: 2px 0;
  row-gap: 4px;
}
.topbar-spotify-label {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.topbar-spotify-select {
  flex-shrink: 0;
  max-width: 118px;
  padding: 4px 6px !important;
  font-size: 11px !important;
  height: 28px !important;
}
.topbar-spotify-meta {
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  flex-shrink: 1;
}
.topbar-spotify-sep {
  margin: 0 4px;
  opacity: 0.5;
}
.topbar-spotify-user {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-spotify-search {
  flex: 1 1 80px;
  min-width: 72px;
  max-width: 200px;
  padding: 5px 8px !important;
  font-size: 11px !important;
  height: 28px !important;
}
.topbar-spotify-btn {
  padding: 4px 8px !important;
  font-size: 11px !important;
  height: 28px !important;
  flex-shrink: 0;
}
.topbar-spotify-dock-btn {
  width: 30px !important;
  height: 28px !important;
  flex-shrink: 0;
  font-size: 13px !important;
}
/* Spotify embed: mantido no DOM para SpotifyService; não ocupa espaço visual */
.spotify-iframe-host-sr {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 80px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0.02;
  pointer-events: none;
  z-index: 0;
  clip-path: inset(0 0 0 0);
}
.spotify-iframe-host-sr iframe {
  display: block;
  border: 0;
}

/* Ícone flutuante → abre modal Entretenimento (Spotify + YouTube) */
.spotify-music-fab-wrap {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
.spotify-music-fab-wrap .spotify-music-fab,
.spotify-music-fab-wrap .spotify-music-fab__dismiss {
  pointer-events: auto;
}
.spotify-music-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(56, 189, 248, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.spotify-music-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 16px rgba(56, 189, 248, 0.2);
}
.spotify-music-fab__ico {
  font-size: 22px;
  line-height: 1;
}
.spotify-music-fab--pulse {
  animation: spotify-fab-pulse 1.2s ease-out 2;
  box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.45);
}
@keyframes spotify-fab-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.35);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(56, 189, 248, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  }
}
.spotify-music-fab__dismiss {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.85);
  color: rgba(248, 250, 252, 0.75);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.spotify-music-fab-wrap:hover .spotify-music-fab__dismiss {
  opacity: 1;
}
.spotify-music-fab__dismiss:hover {
  color: #fff;
  background: rgba(239, 68, 68, 0.35);
  border-color: rgba(248, 113, 113, 0.5);
}
.spotify-music-fab-wrap.is-hidden {
  display: none !important;
}

@media (hover: none) {
  .spotify-music-fab__dismiss {
    opacity: 0.55;
  }
}

/* ── Windows Media Player–style topbar (Nodal Media Player + gaveta Spotify) ── */
/* Elite V3: Dedicated Slim Bar for Topbar */
.topbar-wmp-mini {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  display: flex;
  align-items: center;
  height: 100%;
}
.wmp-modal-metrics-container {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  margin: 15px 0;
}

.wmp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.wmp-metrics-grid .top-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 8px;
  min-width: 0;
}

.wmp-metrics-grid .stat-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.wmp-metrics-grid .stat-val {
  font-size: 14px;
  font-weight: 700;
}

.wmp-metrics-grid .top-divider { display: none; }

.topbar-wmp-mini .topbar-spotify-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 8px;
}
.topbar-wmp-mini .topbar-spotify-select {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  height: 24px !important;
  font-size: 10px !important;
  padding: 0 4px !important;
}
.topbar-wmp-mini .topbar-spotify-label {
  font-size: 14px;
}

.topbar-wmp-chrome {
  border-radius: 9px 9px 0 0;
  overflow: hidden;
}

.topbar-wmp-chrome {
  border-radius: 9px 9px 0 0;
  overflow: hidden;
}
.topbar-wmp-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 2px;
  background: linear-gradient(180deg, #3a4149 0%, #23272e 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.topbar-wmp-orbs {
  display: flex;
  gap: 4px;
}
.topbar-wmp-orbs span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #9aa0a8, #3d434a 70%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.topbar-wmp-title {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e8eef7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.topbar-wmp-sub {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: #7eb6ff;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 120, 215, 0.35), rgba(0, 80, 160, 0.2));
  border: 1px solid rgba(120, 180, 255, 0.35);
  box-shadow: 0 0 12px rgba(0, 140, 255, 0.25);
}
.topbar-wmp-tabs {
  display: flex;
  align-items: stretch;
  gap: 3px;
  padding: 2px 6px 0;
  background: linear-gradient(180deg, #1e2228 0%, #12151a 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}
.topbar-wmp-tab {
  font-size: 10px;
  font-weight: 600;
  color: rgba(230, 238, 255, 0.75);
  padding: 4px 10px 5px;
  border-radius: 6px 6px 0 0;
  border: 1px solid transparent;
  cursor: default;
}
.topbar-wmp-tab--active {
  color: #fff;
  background: linear-gradient(180deg, #1a6fc4 0%, #0c4d9e 55%, #083a78 100%);
  border-color: rgba(160, 210, 255, 0.45);
  box-shadow:
    0 0 16px rgba(0, 140, 255, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.25) inset;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.topbar-wmp-tab--lib {
  cursor: pointer;
  font: inherit;
  background: transparent;
  color: rgba(200, 210, 230, 0.85);
}
.topbar-wmp-tab--lib:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.topbar-wmp-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 8px 6px !important;
  background: linear-gradient(180deg, #2b3139 0%, #1a1e25 55%, #14171d 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset;
}
/* Trilho «encaixado» estilo WMP: campo escuro + Ouvir separado, sem sobreposição cinza */
.topbar-wmp-ctrl-group {
  display: flex;
  align-items: stretch;
  flex: 1 1 120px;
  min-width: 110px;
  max-width: min(260px, 34vw);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.75);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    inset 0 3px 10px rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, #0f1216 0%, #080a0d 100%);
}
.topbar-wmp .topbar-spotify-select {
  background: linear-gradient(180deg, #2c323a, #1a1e24) !important;
  border: 1px solid rgba(0, 0, 0, 0.65) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
  color: #e8eef7 !important;
  font-size: 10px !important;
  height: 26px !important;
  padding: 2px 4px !important;
  max-width: 100px !important;
}
.topbar-wmp .topbar-wmp-main-search,
.topbar-wmp .topbar-wmp-ctrl-group .topbar-spotify-search {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f0f5ff !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  height: auto !important;
  min-height: 26px;
  outline: none;
}
.topbar-wmp .topbar-wmp-main-search::placeholder {
  color: rgba(170, 190, 220, 0.5);
}
.topbar-wmp .topbar-wmp-main-search:focus {
  background: rgba(0, 100, 200, 0.08) !important;
}
.topbar-wmp-btn-ouvir.topbar-wmp-btn-primary {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(0, 0, 0, 0.55) !important;
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
  padding: 4px 12px !important;
  min-height: 26px;
  font-size: 11px !important;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.topbar-wmp-btn-primary {
  background: linear-gradient(180deg, #4a9eee 0%, #1f7ad4 38%, #0d5cad 100%) !important;
  border: 1px solid rgba(160, 210, 255, 0.5) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 0 18px rgba(0, 140, 255, 0.22) !important;
}
.topbar-wmp-btn-ouvir:hover {
  filter: brightness(1.06);
}
.topbar-wmp-btn-secondary {
  background: linear-gradient(180deg, #3d4654 0%, #282e38 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #d4e6ff !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  padding: 3px 10px !important;
  height: 26px !important;
  border-radius: 6px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.topbar-wmp-btn-secondary:hover {
  border-color: rgba(120, 180, 255, 0.35) !important;
  color: #fff !important;
}
.topbar-wmp-dock-btn {
  width: 28px !important;
  height: 26px !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #363e4a 0%, #222830 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  font-size: 14px !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.topbar-wmp-dock-btn:hover {
  border-color: rgba(100, 160, 255, 0.35) !important;
  filter: brightness(1.08);
}
.topbar-wmp-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 3px 8px 4px;
  border: none;
  border-radius: 0 0 11px 11px;
  cursor: row-resize;
  background: linear-gradient(180deg, #1a1e24 0%, #0f1115 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(180, 200, 230, 0.9);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.topbar-wmp-grip:hover {
  color: #fff;
  background: linear-gradient(180deg, #222831 0%, #12151a 100%);
}
.topbar-wmp-grip-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.topbar-wmp-grip-lines span {
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 180, 255, 0.5), transparent);
}
.topbar-wmp-grip-chev {
  font-size: 9px;
  opacity: 0.85;
}
/* ── MODAL WMP PREMIUM STYLES ──────────────── */
/* ── MODAL WMP PREMIUM STYLES ──────────────── */
:root {
  --wmp-primary-dark: #0f172a;
  --wmp-accent-glow: #38bdf8;
  --wmp-glow-secondary: #0ea5e9;
}

.wmp-theme-deepsea {
  --wmp-primary-dark: #0f172a; --wmp-accent-glow: #38bdf8; --wmp-glow-secondary: #0ea5e9;
}
.wmp-theme-sunset {
  --wmp-primary-dark: #1c1917; --wmp-accent-glow: #fb923c; --wmp-glow-secondary: #f59e0b;
}
.wmp-theme-forest {
  --wmp-primary-dark: #022c22; --wmp-accent-glow: #10b981; --wmp-glow-secondary: #059669;
}
.wmp-theme-midnight {
  --wmp-primary-dark: #1e1b4b; --wmp-accent-glow: #818cf8; --wmp-glow-secondary: #6366f1;
}
.wmp-theme-rose {
  --wmp-primary-dark: #2d0612; --wmp-accent-glow: #fb7185; --wmp-glow-secondary: #f43f5e;
}
/* Turbo: Motivational Performance Mode */
.wmp-theme-turbo {
  --wmp-primary-dark: #020617; 
  --wmp-accent-glow: #22d3ee; 
  --wmp-glow-secondary: #a855f7;
  --wmp-background-accent: radial-gradient(circle at 50% -20%, rgba(34, 211, 238, 0.15) 0%, transparent 70%);
}

.wmp-glass {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(2, 6, 23, 0.85)) !important;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.65), 
    0 0 40px rgba(var(--wmp-accent-glow), 0.12),
    inset 0 0 20px rgba(255, 255, 255, 0.02) !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.wmp-liquid-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--wmp-primary-dark);
  transition: background-color 1s ease;
}

/* ── HIGH-ENERGY VISUALIZER ── */
@keyframes wmp-bar-dance {
  0%, 100% { height: 12px; filter: brightness(1); }
  50% { height: 50px; filter: brightness(1.4) drop-shadow(0 0 8px var(--wmp-accent-glow)); }
}
.v-bar-turbo {
  width: 8px;
  height: 12px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--wmp-accent-glow), var(--wmp-glow-secondary));
  transition: height 0.1s ease;
  animation: wmp-bar-dance 0.8s infinite ease-in-out;
  animation-play-state: paused;
}
.v-bar-turbo:nth-child(2n) { animation-delay: 0.1s; animation-duration: 0.7s; }
.v-bar-turbo:nth-child(3n) { animation-delay: 0.2s; animation-duration: 1.1s; }
.v-bar-turbo:nth-child(4n) { animation-delay: 0.3s; animation-duration: 0.9s; }
.v-bar-turbo:nth-child(5n) { animation-delay: 0.15s; animation-duration: 0.6s; }

/* Spinning Vinyl / Album Art Aura */
@keyframes art-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.wmp-art-rotating {
  animation: art-spin 20s linear infinite;
  box-shadow: 0 0 30px rgba(var(--wmp-accent-glow), 0.3);
}

.wmp-engine-trigger {
  background: linear-gradient(135deg, var(--wmp-accent-glow), var(--wmp-glow-secondary));
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 12px 24px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(var(--wmp-accent-glow), 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  text-transform: uppercase;
  font-size: 14px;
}
.wmp-engine-trigger:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(var(--wmp-accent-glow), 0.6);
}
.wmp-liquid-aura::before {
  top: -20%;
  left: -20%;
  background: radial-gradient(circle at center, var(--wmp-accent-glow) 0%, transparent 60%);
  opacity: 0.15;
  filter: blur(80px);
  animation: liquid-drift 12s infinite alternate ease-in-out;
}

.wmp-liquid-aura::after {
  background: radial-gradient(circle at center, var(--wmp-glow-secondary) 0%, transparent 50%);
  animation-duration: 18s;
  animation-delay: -5s;
  opacity: 0.1;
}

@keyframes liquid-drift {
  0% { transform: translate(-5%, -5%) scale(1); }
  50% { transform: translate(5%, 5%) scale(1.1); }
  100% { transform: translate(-2%, 8%) scale(0.95); }
}

/* CAROUSEL STYLES */
.wmp-carousel-wrap {
  position: relative;
  width: 100%;
  padding: 10px 0;
  overflow: hidden;
}

.wmp-carousel-inner {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Hide scrollbar */
  padding: 10px 40px;
  -webkit-overflow-scrolling: touch;
}

.wmp-carousel-inner::-webkit-scrollbar {
  display: none;
}

.wmp-carousel-card {
  flex: 0 0 160px;
  scroll-snap-align: center;
  aspect-ratio: 1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.wmp-carousel-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--wmp-accent-glow);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4), 0 0 15px rgba(var(--wmp-accent-glow), 0.2);
}

.wmp-carousel-card.is-active {
  flex: 0 0 200px;
  border-color: var(--wmp-accent-glow);
  box-shadow: 0 15px 30px rgba(0,0,0,0.5), 0 0 25px rgba(var(--wmp-accent-glow), 0.3);
}

.wmp-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.wmp-carousel-card:hover .wmp-carousel-img {
  transform: scale(1.1);
}

.wmp-carousel-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
  color: #fff;
  font-size: 11px;
  text-align: left;
}

.wmp-carousel-title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.wmp-carousel-sub {
  opacity: 0.7;
  font-size: 10px;
}

/* Player embutido na aba Entretenimento (não é modal) */
.wmp-entretenimento-shell {
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  max-width: 100%;
}

.lobby-metrics-grid {
  max-width: 100%;
}

.wmp-tab-content {
  padding: 0; 
  min-height: 420px;
  background: rgba(0, 0, 0, 0.2);
}

.wmp-now-playing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  text-align: center;
  padding: 40px 20px;
}

.wmp-visualizer-box {
  width: 240px;
  height: 140px;
  background: #000;
  border: 2px solid #333;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 255, 100, 0.1);
}

#wmp-visualizer-inner {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(0deg, #00ff88 0%, transparent 100%);
  opacity: 0.3;
  animation: wmp-vibe 1.5s infinite alternate ease-in-out;
}

@keyframes wmp-vibe {
  from { height: 20%; opacity: 0.2; }
  to { height: 80%; opacity: 0.4; }
}

.wmp-song-info h4 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.wmp-song-info p {
  color: #7eb6ff;
  font-weight: 600;
  margin: 5px 0;
}

/* CLIPS / VIDEO SECTION */
.wmp-clips-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}

.wmp-video-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.wmp-video-placeholder {
  color: #444;
  font-size: 14px;
  font-weight: 600;
}

.wmp-video-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.topbar-wmp-drawer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 14px 10px;
  max-height: min(380px, 68vh);
  overflow: hidden;
}
.topbar-wmp-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.topbar-wmp-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topbar-wmp-col-title {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(180, 205, 255, 0.85);
  text-shadow: 0 1px 2px #000;
}
.topbar-wmp-search-row {
  display: flex;
  gap: 6px;
}
.topbar-wmp-drawer-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, #252b33, #15191f);
  color: #f0f5ff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    inset 0 2px 8px rgba(0, 0, 0, 0.2);
}
.topbar-wmp-drawer-input::placeholder {
  color: rgba(170, 190, 220, 0.45);
}
.topbar-wmp-drawer-input:focus {
  outline: none;
  border-color: rgba(80, 150, 240, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 120, 220, 0.25),
    inset 0 2px 8px rgba(0, 0, 0, 0.2);
}
.topbar-wmp-drawer-btn {
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(140, 190, 255, 0.4);
  background: linear-gradient(180deg, #2a7fd4, #155a9e);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
.topbar-wmp-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #cde;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.topbar-wmp-icon-btn:hover {
  background: rgba(0, 140, 255, 0.2);
  border-color: rgba(120, 180, 255, 0.35);
}
.topbar-wmp-hint {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(180, 195, 220, 0.85);
}
.topbar-wmp-hint a {
  color: #7eb6ff;
}
.topbar-wmp-results,
.topbar-wmp-playlists {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
  max-height: 280px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, 0.65);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, transparent 14px),
    linear-gradient(180deg, #1a1f28 0%, #0e1118 50%, #0a0c10 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    inset 0 8px 24px rgba(0, 0, 0, 0.25);
}
.topbar-wmp-results::-webkit-scrollbar,
.topbar-wmp-playlists::-webkit-scrollbar {
  width: 6px;
}
.topbar-wmp-results::-webkit-scrollbar-thumb,
.topbar-wmp-playlists::-webkit-scrollbar-thumb {
  background: rgba(80, 140, 220, 0.35);
  border-radius: 4px;
}
.topbar-wmp-li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: #e8eef7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: default;
}
.topbar-wmp-li--playlist,
.topbar-wmp-li--result {
  cursor: pointer;
}
.topbar-wmp-li--playlist:hover,
.topbar-wmp-li--result:hover {
  background: linear-gradient(90deg, rgba(0, 120, 215, 0.25), transparent);
}
.topbar-wmp-li--muted {
  color: rgba(180, 190, 210, 0.75);
  font-size: 11px;
}
.topbar-wmp-li--muted a {
  color: #8ec5ff;
}
.topbar-wmp-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.topbar-wmp-thumb--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2a3440, #1a2230);
  font-size: 14px;
  color: rgba(180, 200, 255, 0.6);
}
.topbar-wmp-li-text {
  min-width: 0;
  flex: 1;
}
.topbar-wmp-li-text b {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-wmp-li-sub {
  display: block;
  font-size: 10px;
  color: rgba(180, 195, 220, 0.7);
  margin-top: 2px;
}
.topbar-wmp-type {
  flex-shrink: 0;
  width: 26px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  border-radius: 4px;
  background: rgba(0, 120, 215, 0.25);
  border: 1px solid rgba(120, 180, 255, 0.25);
  color: #b8d8ff;
}
.topbar-wmp-visualizer {
  height: 6px;
  margin: 0 12px 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, #0a1628, #1a4a7a, #0a6ec2, #1a4a7a, #0a1628);
  background-size: 200% 100%;
  animation: wmp-viz-shift 4s linear infinite;
  opacity: 0.65;
  box-shadow: 0 0 12px rgba(0, 140, 255, 0.35);
}
@keyframes wmp-viz-shift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@media (max-width: 900px) {
  .topbar-wmp-drawer-inner {
    grid-template-columns: 1fr;
    max-height: min(520px, 75vh);
  }
  .topbar-wmp-results,
  .topbar-wmp-playlists {
    max-height: 200px;
  }
}

/* Modo retrátil: player visível em faixa única minimalista (antes estava oculto) */
.topbar.minimized .topbar-spotify-wrap.topbar-wmp {
  display: flex !important;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(100%, 520px);
  margin: 0 4px;
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 4px 16px rgba(0, 0, 0, 0.35);
}
.topbar.minimized .topbar-wmp-visualizer {
  display: none !important;
}
.topbar.minimized .topbar-wmp-titlebar {
  display: none !important;
}
.topbar.minimized .topbar-wmp-tab--active {
  display: none !important;
}
.topbar.minimized .topbar-wmp-tabs {
  padding: 2px 6px 0;
  gap: 2px;
  border-bottom: none;
  background: linear-gradient(180deg, #22272f 0%, #16191f 100%);
}
.topbar.minimized .topbar-wmp-tab--lib {
  padding: 3px 10px 5px;
  font-size: 10px;
  border-radius: 6px 6px 0 0;
  margin-left: auto;
}
.topbar.minimized .topbar-wmp-toolbar {
  flex-wrap: nowrap !important;
  gap: 5px !important;
  padding: 4px 6px 4px !important;
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.topbar.minimized .topbar-wmp .topbar-spotify-label {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.topbar.minimized .topbar-wmp .topbar-spotify-select {
  max-width: 86px !important;
  height: 26px !important;
  min-height: 26px !important;
  font-size: 9px !important;
  padding: 2px 4px !important;
  flex-shrink: 0;
}
.topbar.minimized .topbar-spotify-meta,
.topbar.minimized .topbar-spotify-user {
  display: none !important;
}
.topbar.minimized .topbar-wmp-ctrl-group {
  flex: 1 1 90px;
  min-width: 72px;
  max-width: min(200px, 28vw);
  border-radius: 6px;
}
.topbar.minimized .topbar-wmp .topbar-wmp-main-search,
.topbar.minimized .topbar-wmp .topbar-wmp-ctrl-group .topbar-spotify-search {
  font-size: 10px !important;
  padding: 4px 6px !important;
  min-height: 26px !important;
}
.topbar.minimized .topbar-wmp-btn-ouvir.topbar-wmp-btn-primary {
  padding: 4px 8px !important;
  min-height: 26px !important;
  font-size: 10px !important;
}
.topbar.minimized .topbar-wmp-btn-secondary {
  height: 26px !important;
  min-height: 26px !important;
  padding: 2px 6px !important;
  font-size: 0 !important;
  width: 28px !important;
  min-width: 28px !important;
  border-radius: 6px !important;
  position: relative;
  color: transparent !important;
}
.topbar.minimized .topbar-wmp-btn-secondary::after {
  content: 'S';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
  font-weight: 800;
  color: #d4e6ff;
  letter-spacing: 0;
}
.topbar.minimized .topbar-wmp-dock-btn {
  width: 28px !important;
  height: 26px !important;
  min-height: 26px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  flex-shrink: 0;
}
.topbar.minimized .topbar-wmp-grip {
  padding: 2px 8px 3px;
  gap: 0;
  font-size: 0;
  border-radius: 0 0 7px 7px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  min-height: 0;
}
.topbar.minimized .topbar-wmp-grip-label,
.topbar.minimized .topbar-wmp-grip-chev {
  display: none !important;
}
.topbar.minimized .topbar-wmp-grip-lines {
  gap: 2px;
}
.topbar.minimized .topbar-wmp-grip-lines span {
  width: 20px;
  height: 1px;
  opacity: 0.85;
}
@media (max-width: 1200px) {
  .topbar-spotify-meta {
    display: none;
  }
  .topbar-spotify-wrap {
    max-width: min(380px, 50vw);
  }
}
@media (max-width: 900px) {
  .topbar-spotify-user {
    display: none;
  }
  .topbar-spotify-wrap {
    max-width: min(320px, 70vw);
  }
}
@media (max-width: 720px) {
  .topbar-spotify-wrap {
    max-width: 100%;
  }
}

.logo-badge {
  width:36px; height:36px;
  background: linear-gradient(135deg,var(--accent),var(--green));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  box-shadow:0 4px 14px rgba(99,102,241,.4);
}
.logo-text  { font-size:15px; font-weight:700; letter-spacing:-.2px; }
.logo-sub   { font-size:10px; color:var(--text-dim); display:block; }

.top-stat   { padding:0 12px; text-align:center; }
.stat-label { display:block; font-size:10px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
.stat-val   { display:block; font-size:16px; font-weight:700; margin-top:2px; }
.top-divider{ width:1px; height:32px; background:var(--border); flex-shrink:0; }

/* Topbar compacta: rótulo + valor na mesma linha (menos altura) */
/* Centro em duas linhas: Spotify | métricas (scroll horizontal só na faixa de números) */
.topbar:not(.minimized) .topbar-center {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  padding: 2px 0;
  min-width: 0;
}
.topbar:not(.minimized) .topbar-center-metrics {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.topbar:not(.minimized) #topbar-bloco-caixa {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  scrollbar-width: thin;
  max-height: 100%;
}
.topbar:not(.minimized) .topbar-center-metrics > .top-stat {
  flex-shrink: 0;
}
.topbar:not(.minimized) #topbar-bloco-caixa .top-stat,
.topbar:not(.minimized) .topbar-center-metrics > .top-stat {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 8px;
  text-align: left;
  flex-shrink: 0;
}
.topbar:not(.minimized) .topbar-center .stat-label {
  display: inline;
  margin: 0;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}
.topbar:not(.minimized) .topbar-center .stat-val {
  display: inline;
  margin: 0;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
}
.topbar:not(.minimized) .topbar-center .top-divider {
  height: 20px;
  align-self: center;
}

.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-yellow { color: var(--yellow); }
.accent { color: var(--accent); }

/* WS dot only (compact for topbar-left) */
#ws-status-wrapper .ws-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

#ws-status-wrapper.connected .ws-dot {
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: pulse-ws 2s infinite;
}

@keyframes pulse-ws { 
  0%, 100% { opacity: 1; transform: scale(1); } 
  50% { opacity: 0.6; transform: scale(0.8); } 
}

/* Original indicator (if still used elsewhere, though removed from topbar) */
.ws-indicator { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  font-size: 11px; 
  font-weight: 700;
  color: rgba(255,255,255,0.4); 
  background: rgba(0,0,0,0.2);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.3s ease;
}
.ws-indicator.connected {
  color: rgba(255,255,255,0.8);
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.05);
}

.user-badge {
  background:rgba(99,102,241,.2);
  border: 1px solid rgba(99,102,241,.3);
  border-radius:20px;
  padding:4px 12px;
  font-size:12px; font-weight:600; color:var(--accent);
}

/* ── MAIN LAYOUT ───────────────────────────── */
.main-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px 24px;
  min-height: calc(100vh - 62px);
}

/* Pós-Lobby: barra de sessões inferior (taskbar / app) — desktop Windows + mobile */
.main-layout.postlobby-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  min-height: calc(100vh - 62px);
}
.postlobby-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}
.postlobby-sidebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  /* Acima do lobby RH cinematográfico (#lobby-rh-overlay z-index 99998) para as abas sempre funcionarem */
  z-index: 100000;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--border2);
  border-bottom: none;
  box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: rgba(15, 23, 42, 0.88); /* Production hardening fallback */
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  max-height: none;
  overflow: visible;
}
.postlobby-sidebar-head {
  display: none;
}
.postlobby-sidebar-toggle { display: none; }
.postlobby-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.postlobby-nav::-webkit-scrollbar {
  height: 6px;
}
.postlobby-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}
.postlobby-nav-item {
  flex: 0 0 auto;
  min-width: 88px;
  max-width: 180px;
  white-space: normal;
  text-align: center;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 250, 252, 0.88);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.postlobby-nav-item:hover {
  color: var(--text);
  border-color: var(--border2);
  background: rgba(255, 255, 255, 0.08);
}
.postlobby-nav-item.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent) inset;
}
.postlobby-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-width: 0;
  flex: 1 1 auto;
  padding-bottom: calc(var(--postlobby-tabbar-h) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.postlobby-content > .panel {
  grid-column: 1 / -1 !important;
}

/* ── Fullscreen split: área principal + «Resumo de Operadores» (50/50, só fullscreen real) ── */
.postlobby-main-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.operadores-resumo-panel {
  display: none;
  flex: 0 0 auto;
  box-sizing: border-box;
}
body.is-browser-fullscreen .postlobby-main-stage {
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
  min-height: min(calc(100vh - 62px), calc(100dvh - 62px));
  transition: gap 0.22s ease, flex-direction 0.22s ease;
}
body.is-browser-fullscreen .postlobby-content {
  flex: 1 1 50%;
  max-width: 50%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 62px - var(--postlobby-tabbar-h));
}
body.is-browser-fullscreen .operadores-resumo-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  max-width: 50%;
  min-width: 0;
  max-height: calc(100vh - 62px - var(--postlobby-tabbar-h));
  padding: 0;
  margin: 0;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border2));
  background: linear-gradient(
    165deg,
    rgba(15, 23, 42, 0.92) 0%,
    rgba(17, 24, 39, 0.78) 55%,
    rgba(30, 41, 59, 0.55) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  animation: operadores-resumo-fs-in 0.26s ease-out;
}
@keyframes operadores-resumo-fs-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.operadores-resumo-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  padding: 14px 14px 12px;
}
.operadores-resumo-head {
  flex-shrink: 0;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.operadores-resumo-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.96);
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent);
}
.operadores-resumo-sub {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.78;
}
.operadores-resumo-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}
.operadores-resumo-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.operadores-resumo-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}
.operadores-resumo-placeholder {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.75;
  padding: 12px 4px;
}
.operadores-resumo-card {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  padding: 12px 12px 10px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.operadores-resumo-card:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.05);
}
.operadores-resumo-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.operadores-resumo-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}
.operadores-resumo-card-user {
  font-size: 11px;
  opacity: 0.72;
  font-family: ui-monospace, monospace;
}
.operadores-resumo-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
.operadores-resumo-metric {
  min-width: 0;
}
.operadores-resumo-metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
  margin-bottom: 2px;
}
.operadores-resumo-metric-val {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(248, 250, 252, 0.95);
  line-height: 1.15;
}
.operadores-resumo-status {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 11px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--accent) 55%, rgba(226, 232, 240, 0.95));
}
@media (max-width: 1100px) {
  body.is-browser-fullscreen .postlobby-main-stage {
    flex-direction: column;
    gap: 12px;
  }
  body.is-browser-fullscreen .postlobby-content,
  body.is-browser-fullscreen .operadores-resumo-panel {
    flex: 1 1 auto;
    max-width: 100%;
    max-height: none;
  }
  body.is-browser-fullscreen .postlobby-content {
    min-height: min(52vh, 420px);
  }
  body.is-browser-fullscreen .operadores-resumo-panel {
    min-height: min(44vh, 380px);
  }
}

/* Campos de criação/motor: mantidos no DOM para o JS; visíveis só indiretamente via ⚡ Nodal Helper. */
#panel-criacao-contas.nodal-criacao-contas--helper-only {
  display: none !important;
}

/* Nodal — sub-abas (PIX/inbox): compacto, centrado, sem “banner” alto */
.nodal-subnav,
.nodal-subnav.nodal-quick-actions-strip,
.nodal-subnav.finance-email-shortcuts-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: unset;
  height: auto;
  padding: 8px 12px;
  margin: 8px 12px 6px;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 12px rgba(0, 0, 0, 0.18);
  grid-column: 1 / -1;
}
.nodal-subnav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  height: 36px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(2, 6, 23, 0.5);
  color: rgba(248, 250, 252, 0.92);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
@media (max-width: 600px) {
  .nodal-subnav,
  .nodal-subnav.nodal-quick-actions-strip {
    padding: 8px 10px;
    margin: 8px 10px 6px;
    gap: 8px;
  }
  .nodal-subnav-item {
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    font-size: 11px;
  }
}

/* Atalhos Contas Evolução: mantêm pill largo (não confundir com faixa PIX/Inbox) */
.contas-evolucao-subtabs-bar .nodal-subnav-item {
  border-radius: 999px;
  height: auto;
  min-height: 36px;
  padding: 8px 14px;
  line-height: 1.2;
}
.nodal-subnav-item:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}
.nodal-subnav-item.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 60%, rgba(255, 255, 255, 0.35));
  background: color-mix(in srgb, var(--accent) 22%, rgba(15, 23, 42, 0.85));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset,
    0 1px 10px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* PIX / Inbox na topbar — mesmo #nodal-subnav, sem “card” largo do main */
#topbar-actions .nodal-subnav.nodal-subnav--topbar {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  grid-column: unset;
  min-height: unset;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

#topbar-actions .nodal-subnav--topbar .nodal-subnav-item.topbar-btn {
  min-height: unset;
  height: auto;
}

.topbar-btn {
  margin-left: 0;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: all 0.2s ease;
}

.topbar-btn:hover {
  background: rgba(0, 200, 255, 0.15);
  border-color: rgba(0, 200, 255, 0.4);
}

/* Contas Evolução — atalhos (mesmo critério que «Filtro da lista») */
.contas-evolucao-subtabs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.32);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.cn-op-bands .contas-evolucao-subtabs-bar {
  border: 0;
  background: transparent;
  padding: 4px 0 0;
}
.contas-evolucao-subtabs-bar__label {
  font-weight: 600;
  opacity: 0.88;
  letter-spacing: 0.02em;
  color: rgba(248, 250, 252, 0.88);
}

/* VIP's: ocupar altura útil da página (área acima da barra de sessões) */
.central-nodal-legacy-vips-nav,
.central-nodal-technical-copy,
#contas-evolucao-summary,
#contas-evolucao-registro-hint,
#contas-evolucao-filtro-agg {
  display: none !important;
}
.central-nodal-panel-header {
  border-left: 4px solid #38bdf8 !important;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(15, 23, 42, 0.1)),
    color-mix(in srgb, var(--surface) 92%, transparent);
}
.central-nodal-panel #vip-panel-heading {
  letter-spacing: 0.01em;
}
.central-nodal-hero {
  padding: 12px 12px 10px !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 36%),
    linear-gradient(165deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.9)) !important;
}
.central-nodal-hero-title > div:first-child {
  font-size: 20px !important;
  letter-spacing: 0.02em !important;
  text-transform: none;
  color: #e0f2fe !important;
}
.central-nodal-hero-title > div:last-child {
  font-size: 12px !important;
  color: #a5b4fc !important;
}
#cn-root #cn-kpis-wrap {
  max-width: min(920px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#cn-root #cn-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
#cn-root #cn-kpis-row2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
@media (max-width: 720px) {
  #cn-root #cn-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
#cn-root .cn-kpi {
  padding: 7px 9px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.58) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
#cn-root .cn-kpi-l {
  font-size: 10px !important;
}
#cn-root .cn-kpi-v {
  font-size: 15px !important;
}
#cn-filter-type,
#cn-filter-status,
#cn-filter-source {
  display: none !important;
}
#cn-universal-filters.cn-universal-filters--search-only {
  display: flex !important;
}
.central-nodal-filter-panel,
.central-nodal-actions-panel,
.contas-evolucao-subtabs-bar,
.vip-toolbar-pagination {
  position: relative;
  padding: 34px 14px 14px !important;
  margin: 12px 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: rgba(15, 23, 42, 0.42) !important;
}
.central-nodal-filter-panel::before,
.central-nodal-actions-panel::before,
.contas-evolucao-subtabs-bar::before,
.vip-toolbar-pagination::before {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
}
.central-nodal-filter-panel::before { content: "Filtros"; }
.central-nodal-actions-panel::before { content: "Ações"; }
.contas-evolucao-subtabs-bar::before { content: "Atalhos"; }
.vip-toolbar-pagination::before { content: "Paginação"; }
.central-nodal-actions-panel--secondary::before {
  content: "Ações";
}
/* Faixas novas: sem pseudo-títulos herdados */
.cn-op-bands .contas-evolucao-subtabs-bar::before,
.cn-op-bands .central-nodal-filter-panel::before,
.cn-op-bands .central-nodal-actions-panel::before {
  display: none !important;
}
.central-nodal-live-panel {
  max-width: none !important;
  background: rgba(15, 23, 42, 0.34) !important;
  border-color: rgba(56, 189, 248, 0.2) !important;
}
.central-nodal-list-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #cbd5e1 !important;
}

/* Central Nodal — financeiro integrado logo abaixo dos KPIs */
#panel-vips .central-nodal-financeiro-block--below-kpi {
  margin: 10px auto 14px;
  padding: 14px 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, 0.26);
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.9));
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.06);
  max-width: min(960px, 100%);
  width: 100%;
  box-sizing: border-box;
}
#panel-vips .cn-financeiro-ssot-hint {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#panel-vips #cn-central-financeiro-bloco > p.txt-small:first-of-type {
  display: none !important;
}
#panel-vips .cn-financeiro-elite-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 200px;
  min-width: min(220px, 100%);
  margin: 0;
}
#panel-vips .cn-financeiro-elite-header__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.55), transparent);
}
#panel-vips .cn-financeiro-elite-header__title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e2e8f0;
  white-space: nowrap;
}
#panel-vips .central-nodal-financeiro-block--below-kpi .cc-bucket-block {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: rgba(0, 0, 0, 0.18);
  padding: 10px 10px 8px;
}
@media (max-width: 720px) {
  #panel-vips .central-nodal-financeiro-block--below-kpi {
    margin-top: 8px;
    margin-bottom: 12px;
    padding: 12px 10px 14px;
  }
  #panel-vips .cn-financeiro-elite-header__title {
    letter-spacing: 0.12em;
    font-size: 10px;
  }
}

/* ── Central Nodal — faixas operacionais (.cn-op-*) — layout compacto (densidade) ── */
.central-nodal-panel .vip-panel-inner {
  padding: 8px 12px 10px !important;
}
.cn-op-bands {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(960px, 100%);
}
.cn-op-band {
  position: relative;
  padding: 6px 8px 8px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: rgba(15, 23, 42, 0.28);
}
.cn-op-band__title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(148, 163, 184, 0.95);
}
.cn-op-band__row--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cn-op-band--quick .cn-op-band__row--inline .btn-ghost {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 11px;
  line-height: 1.2;
  box-sizing: border-box;
}
.cn-op-sf-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.35fr);
  gap: 8px 10px;
  align-items: start;
}
@media (max-width: 900px) {
  .cn-op-sf-grid {
    grid-template-columns: 1fr;
  }
}
.cn-op-sf-chips .cn-op-band__title,
.cn-op-sf-fields .cn-op-band__title {
  margin-bottom: 4px;
}
/*
 * Oculta só a coluna de atalhos (chips) — não afeta o <select id="contas-evolucao-filtro-lista">:
 * em «Filtro da lista» mantêm-se «Valores no cartão» (sem saldo / sem coleta / ambos / coleta hoje), etc.
 */
.cn-op-band--shortcuts-filters .cn-op-sf-chips {
  display: none !important;
}
.cn-op-band--shortcuts-filters .cn-op-sf-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
.cn-op-filters-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 8px;
  width: 100%;
  align-items: end;
}
@media (max-width: 900px) and (min-width: 721px) {
  .cn-op-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cn-op-field--grow {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .cn-op-filters-grid {
    grid-template-columns: 1fr;
  }
}
.cn-op-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cn-op-field--grow {
  grid-column: span 1;
}
#vip-admin-operator-filter-wrap.cn-op-field--grow {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .cn-op-field--grow,
  #vip-admin-operator-filter-wrap.cn-op-field--grow {
    grid-column: span 1;
  }
}
.cn-op-field__lbl {
  font-size: 10px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.88);
}
.cn-op-field__lbl-note {
  font-weight: 400;
  opacity: 0.8;
}
.cn-op-input,
.cn-op-band .select-full {
  min-height: 32px;
  padding: 4px 6px !important;
  font-size: 11px !important;
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.cn-op-input--narrow {
  width: auto !important;
  min-width: 4.25rem;
  max-width: 5.5rem;
}
.cn-op-subtabs-integrated .contas-evolucao-subtab {
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px !important;
  line-height: 1.25;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent) !important;
  background: rgba(30, 41, 59, 0.55) !important;
}
.cn-op-live-strip {
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  max-width: min(960px, 100%) !important;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
  background: rgba(15, 23, 42, 0.35) !important;
}
.cn-op-live-strip__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 26px;
}
.cn-op-live-strip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
  flex-shrink: 0;
}
.cn-op-live-strip__label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(186, 230, 253, 0.9);
  flex-shrink: 0;
}
.cn-op-live-strip__msg {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.95);
  opacity: 0.8;
  line-height: 1.3;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  max-width: min(52ch, 58vw);
  text-align: right;
  min-height: 26px;
  padding: 4px 10px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.cn-op-live-strip__cards {
  margin-top: 4px;
}
@media (max-width: 640px) {
  .cn-op-live-strip__row {
    flex-wrap: wrap;
  }
  .cn-op-live-strip__msg {
    margin-left: 0;
    max-width: 100%;
    text-align: left;
    justify-content: flex-start;
    flex: 1 1 100%;
  }
}
.cn-op-live-strip__empty {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
  color: rgba(148, 163, 184, 0.95);
  font-size: 11px;
  line-height: 1.35;
}
#vip-admin-operator-filter-wrap.cn-op-field {
  flex-direction: column;
  align-items: stretch;
}
.cn-op-listops__primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}
#panel-vips .cn-op-listops__primary.u-flex-center-gap-10 {
  gap: 6px !important;
}
.cn-op-listops__primary .btn-ghost {
  min-height: 28px;
  padding: 3px 7px !important;
  font-size: 11px !important;
  box-sizing: border-box;
}
.cn-op-band--listops .cn-op-listops-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cn-pagination-compact {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
  font-size: 11px;
}
.cn-pagination-compact.cn-pagination-compact--visible {
  display: flex !important;
}
.cn-pagination-exibir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}
.cn-pagination-exibir__lbl {
  opacity: 0.85;
  font-size: 11px;
}
.cn-pagination-sep {
  opacity: 0.35;
  user-select: none;
  padding: 0 2px;
}
.cn-pagination-meta {
  opacity: 0.9;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cn-pagination-navbtn {
  min-height: 28px;
  padding: 3px 7px !important;
  font-size: 11px !important;
  white-space: nowrap;
  box-sizing: border-box;
}
#panel-vips .cn-pagination-compact .cn-op-input,
#panel-vips .cn-pagination-compact .cn-op-input--narrow {
  min-height: 28px;
  padding: 3px 5px !important;
  font-size: 10px !important;
}
@media (max-width: 720px) {
  .cn-op-band--listops .cn-op-listops-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .cn-pagination-compact {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * Toolbar mesclada — Filtros + Ações + Paginação em um único container
 * premium. Responsiva, compacta, sem flicker.
 * ───────────────────────────────────────────────────────────────────── */
.cn-op-band--toolbar-merged {
  padding: 8px 10px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.42) 0%,
    rgba(15, 23, 42, 0.28) 100%
  );
  box-shadow: 0 1px 0 rgba(56, 189, 248, 0.06) inset;
}
.cn-op-toolbar-merged {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cn-op-toolbar-merged__filters {
  width: 100%;
}
.cn-op-toolbar-merged__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
}
.cn-op-toolbar-merged__actions .btn-ghost,
.cn-op-toolbar-merged__actions .btn-primary {
  min-height: 28px;
  padding: 3px 9px !important;
  font-size: 11px !important;
  border-radius: 7px;
  box-sizing: border-box;
}
.cn-op-toolbar-merged__selectall {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  font-size: 11px;
}
.cn-op-toolbar-merged__pagination {
  margin-left: 0;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  justify-content: flex-end;
}
.cn-op-toolbar-merged__pagination.cn-pagination-compact--visible {
  display: flex !important;
}
@media (max-width: 720px) {
  .cn-op-toolbar-merged__pagination {
    justify-content: flex-start;
  }
}

/* Bloco "Jogáveis em tempo real" removido: oculta variantes legacy se
 * algum render dinâmico tentar reaparecer.
 */
#contas-evolucao-jogaveis-live-panel,
#contas-evolucao-jogaveis-live-cards {
  display: none !important;
}

/* Central Nodal — tabela snapshot + cartões: densidade (escopo #panel-vips) */
#panel-vips #cn-view-table {
  margin-bottom: 8px !important;
}
#panel-vips #cn-view-table table {
  font-size: 10px !important;
}
#panel-vips #cn-view-table thead tr {
  height: 34px;
}
#panel-vips #cn-view-table thead th {
  padding: 6px 8px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  vertical-align: middle;
}
#panel-vips #cn-view-table tbody td {
  padding: 6px 8px !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  min-height: 30px;
  box-sizing: border-box;
  vertical-align: middle;
}
#panel-vips #contas-evolucao-summary {
  margin: 4px 0 !important;
}
#panel-vips #contas-evolucao-registro-hint {
  margin: 0 0 4px !important;
}
#panel-vips .central-nodal-list-title {
  margin: 6px 0 4px !important;
}
#panel-vips .vip-toolbar-secondary.cn-op-filters-grid {
  margin-bottom: 0;
  padding-top: 0;
  border-top: none;
}
#panel-vips .vip-accounts-preview-wrap {
  padding: 8px;
  min-height: 100px;
}
#panel-vips #contas-evolucao-list-refresh-indicator.register-list-refresh-indicator {
  top: 6px;
  right: 8px;
  min-height: 26px;
  padding: 4px 10px;
  box-sizing: border-box;
  font-size: 9px;
}
#panel-vips #contas-evolucao-accounts-cards.vip-accounts-cards {
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
#panel-vips #contas-evolucao-filtro-agg {
  margin: 0 0 6px !important;
  padding: 6px 8px !important;
}
#panel-vips #vip-tab-extracao-unificada {
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
}

.postlobby-layout.postlobby-vips-active #postlobby-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.postlobby-layout.postlobby-vips-active #panel-vips.panel {
  flex: 1 1 auto;
  min-height: calc(100vh - var(--postlobby-tabbar-h, 92px) - 40px);
  max-height: none;
}
.postlobby-layout.postlobby-vips-active #panel-vips .vip-panel-inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Lista única na tab VIP's: grelha principal = contas evolução (painel). */
.postlobby-layout.postlobby-vips-active #contas-evolucao-cards-preview {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: none !important;
}
.postlobby-layout.postlobby-vips-active #vip-accounts-preview {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none !important;
}

/* Mães / Filhas — mesma lógica de altura útil que VIP's */
.postlobby-layout.postlobby-maes-filhas-active #postlobby-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.postlobby-layout.postlobby-maes-filhas-active #panel-maes-filhas.panel {
  flex: 1 1 auto;
  min-height: calc(100vh - var(--postlobby-tabbar-h, 92px) - 40px);
  max-height: none;
}
.postlobby-layout.postlobby-maes-filhas-active #panel-maes-filhas .vip-panel-inner.maes-filhas-panel-inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* ── MOTOR — CONTAS (painel online): subtabs + grid compacto espelho BOT OFFLINE ── */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motor-contas-mirror-subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(234, 179, 8, 0.22);
}

.motor-contas-mirror-subtab {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.65);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.motor-contas-mirror-subtab:hover {
  color: var(--text);
  border-color: rgba(234, 179, 8, 0.45);
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.12);
}

.motor-contas-mirror-subtab--active {
  color: #fef9c3;
  border-color: rgba(234, 179, 8, 0.55);
  background: linear-gradient(165deg, rgba(234, 179, 8, 0.16), rgba(15, 23, 42, 0.85));
  box-shadow:
    0 0 24px rgba(234, 179, 8, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.motor-contas-mirror-subtab-count {
  font-weight: 800;
  opacity: 0.92;
  margin-left: 4px;
}

.motor-contas-mirror-panes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.motor-contas-mirror-pane[hidden] {
  display: none !important;
}

.motor-contas-grid-wrap {
  overflow: visible;
  max-height: none;
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(0, 0, 0, 0.18);
}

.postlobby-layout.postlobby-maes-filhas-active .motor-contas-grid-wrap {
  max-height: none;
  min-height: 80px;
}

.motor-contas-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
  overflow: visible;
}

@media (min-width: 1100px) {
  .motor-contas-compact-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (min-width: 1600px) {
  .motor-contas-compact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 2200px) {
  .motor-contas-compact-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.motor-contas-compact-card {
  position: relative;
  border-radius: 12px;
  padding: 12px 12px 10px;
  min-height: 108px;
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.92));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.motor-contas-compact-card:hover {
  transform: scale(1.02);
  border-color: rgba(234, 179, 8, 0.42);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(234, 179, 8, 0.08);
}

.motor-contas-compact-card:focus {
  outline: 2px solid rgba(234, 179, 8, 0.55);
  outline-offset: 2px;
}

.motor-contas-compact-card__login {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
  margin-bottom: 4px;
}

.motor-contas-compact-card__platform {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.95;
  margin-bottom: 8px;
}

.motor-contas-compact-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.motor-contas-compact-badge--status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #6ee7b7;
}

.motor-contas-compact-type {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 252, 0.92);
}

.motor-contas-compact-type--mae {
  background: rgba(234, 179, 8, 0.18);
  border-color: rgba(234, 179, 8, 0.4);
  color: #fde68a;
}

.motor-contas-compact-type--filha {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.38);
  color: #bae6fd;
}

.motor-contas-compact-type--orfa {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.38);
  color: #ddd6fe;
}

.motor-contas-compact-card__saldo {
  font-size: 11px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.92);
}

.motor-contas-detail-modal-body {
  max-height: min(78vh, 900px);
  overflow: auto;
}

.motor-contas-detail-card-host .vip-account-card {
  max-width: 100%;
}

.motor-contas-detail-card-host .vip-card-selector {
  display: none;
}

.postlobby-layout.postlobby-maes-filhas-active .motor-contas-mirror-panes {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#panel-maes-filhas .vip-panel-inner.maes-filhas-panel-inner {
  padding: 14px 20px 20px;
}

.maes-filhas-panel-intro {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 8px;
  line-height: 1.5;
}

/* MOTOR — CONTAS: central de criação (cards por tipo) */
.motor-central-hero {
  margin: 0 0 16px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(15, 23, 42, 0.72));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
.motor-central-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text);
}
.motor-central-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}
/* MOTOR — CONTAS: aviso explícito quando não há mães no registo (modal filha). */
.motor-filha-no-mothers-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.22);
  font-size: 12px;
  line-height: 1.45;
  color: #fecaca;
}

.motor-central-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.motor-action-card {
  position: relative;
  text-align: left;
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 16px 16px 18px;
  cursor: pointer;
  background: var(--surface2);
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  overflow: hidden;
  font: inherit;
}
.motor-action-card:focus-visible {
  outline: 2px solid rgba(234, 179, 8, 0.65);
  outline-offset: 2px;
}
.motor-action-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.motor-action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}
.motor-action-card:hover::before {
  opacity: 1;
}
.motor-action-card--mae::before {
  background: radial-gradient(circle at 20% 20%, rgba(234, 179, 8, 0.24), transparent 55%);
}
.motor-action-card--filha::before {
  background: radial-gradient(circle at 80% 10%, rgba(56, 189, 248, 0.22), transparent 50%);
}
.motor-action-card--orfa::before {
  background: radial-gradient(circle at 50% 90%, rgba(167, 139, 250, 0.26), transparent 55%);
}
.motor-action-card--mae:hover {
  border-color: rgba(234, 179, 8, 0.55);
}
.motor-action-card--filha:hover {
  border-color: rgba(56, 189, 248, 0.5);
}
.motor-action-card--orfa:hover {
  border-color: rgba(167, 139, 250, 0.5);
}
.motor-action-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid var(--border2);
  color: #f8fafc;
}
.motor-action-card__kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  padding-right: 56px;
}
.motor-action-card__headline {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.motor-action-card__desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  flex: 1 1 auto;
}
.motor-action-card__desc code {
  font-size: 10px;
}
.motor-action-card__cta {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #eab308;
}
.motor-action-card--filha .motor-action-card__cta {
  color: #38bdf8;
}
.motor-action-card--orfa .motor-action-card__cta {
  color: #c4b5fd;
}

/* MOTOR — cockpit (hub alinhado ao centro operacional local) */
.motor-cockpit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.motor-cockpit-status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.motor-cockpit-status-strip__cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.motor-cockpit-status-strip__cluster--right {
  justify-content: flex-end;
  text-align: right;
}
.motor-cockpit-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border2);
}
.motor-cockpit-pill--accent {
  border-color: rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.12);
  color: #fde68a;
}
.motor-cockpit-meta {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.35;
  max-width: 42ch;
}
.motor-cockpit-cta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.motor-cockpit-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.motor-cockpit-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
}
.motor-cockpit-cta__icon {
  font-size: 18px;
  line-height: 1;
  opacity: 0.95;
}
.motor-cockpit-cta--mae {
  border-color: rgba(234, 179, 8, 0.45);
  background: linear-gradient(165deg, rgba(234, 179, 8, 0.14), rgba(15, 23, 42, 0.85));
}
.motor-cockpit-cta--filha {
  border-color: rgba(56, 189, 248, 0.42);
  background: linear-gradient(165deg, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 0.85));
}
.motor-cockpit-cta--orfa {
  border-color: rgba(167, 139, 250, 0.42);
  background: linear-gradient(165deg, rgba(167, 139, 250, 0.12), rgba(15, 23, 42, 0.85));
}
.motor-creation-center {
  border-radius: 14px;
  border: 1px solid rgba(234, 179, 8, 0.22);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.92));
  padding: 12px 14px 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.motor-creation-center__head {
  margin-bottom: 10px;
}
.motor-creation-center__title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fde68a;
}
.motor-hub-creation-kind {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}
.motor-hub-creation-kind strong {
  color: var(--text);
}
.motor-hub-modal-mount {
  min-height: 0;
}
.motor-hub-modal-mount:empty {
  min-height: 0;
}
.motor-hub-hint {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
#motor-hub-modal-mount .modal-overlay.motor-hub-modal--embedded {
  position: relative;
  inset: auto;
  z-index: 4;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  overflow: visible;
  align-items: flex-start;
  justify-content: stretch;
}
#motor-hub-modal-mount .modal-overlay.motor-hub-modal--embedded.open {
  display: flex;
}
#motor-hub-modal-mount .modal-overlay.motor-hub-modal--embedded .modal {
  max-width: min(560px, 100%);
  width: 100%;
  max-height: min(78vh, 720px);
  margin: 0 auto;
}
.motor-cockpit-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.motor-cockpit-toc__link {
  font-size: 11px;
  font-weight: 700;
  color: #93c5fd;
  text-decoration: none;
  padding: 4px 0;
}
.motor-cockpit-toc__link:hover {
  text-decoration: underline;
}
.motor-cockpit-section {
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.12);
}
.motor-cockpit-section + .motor-cockpit-section {
  margin-top: 8px;
}
.motor-cockpit-section summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 10px 4px;
  list-style: none;
  color: var(--text);
}
.motor-cockpit-section summary::-webkit-details-marker {
  display: none;
}
.motor-cockpit-section__body {
  padding: 0 4px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}
.motor-cockpit-section__p {
  margin: 0 0 8px;
}
.motor-cockpit-kpi-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 8px;
}
.motor-cockpit-kpi {
  font-size: 12px;
  color: var(--text-dim);
}
.motor-cockpit-kpi__n {
  font-weight: 800;
  color: #fde68a;
  margin-right: 4px;
}
.motor-cockpit-ul {
  margin: 0;
  padding-left: 18px;
}
.motor-platforms-details {
  margin: 0 0 12px;
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 8px 10px 10px;
  background: rgba(15, 23, 42, 0.45);
}
.motor-platforms-details__summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.motor-platforms-details__toolbar {
  margin: 8px 0 8px;
}
.motor-platform-filter-input {
  width: 100%;
  max-width: 360px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
}
.motor-platforms-scroll.maes-filhas-jogobr-platforms {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.maes-filhas-jogobr-platforms .maes-filhas-jogobr-grid {
  margin-top: 0;
}
.maes-filhas-pager--empty {
  display: none !important;
}
.motor-mirror-empty {
  margin: 0;
  padding: 10px 6px;
  font-size: 12px;
  text-align: center;
  color: var(--text-dim);
}
.maes-filhas-block-title-count {
  font-weight: 700;
  color: var(--text-dim);
  font-size: 0.95em;
}
[id^='motor-cockpit-section-'] {
  scroll-margin-top: 16px;
}

/* MOTOR — CONTAS (painel online): índice, blocos «gestão online»/estruturas/etc. e referências jogobr/técnicas ocultos — criação/espelho permanecem visíveis. */
#panel-maes-filhas.motor-panel--hide-cockpit-docs .motor-cockpit-toc,
#panel-maes-filhas.motor-panel--hide-cockpit-docs #motor-cockpit-root > details.motor-cockpit-section,
#panel-maes-filhas.motor-panel--hide-cockpit-docs .maes-filhas-jogobr-platforms-wrap,
#panel-maes-filhas.motor-panel--hide-cockpit-docs .maes-filhas-tech-details {
  display: none !important;
}

.maes-filhas-tech-details {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 12px;
  line-height: 1.45;
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--surface2);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
}
.maes-filhas-tech-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.maes-filhas-tech-details summary::-webkit-details-marker {
  display: none;
}
.maes-filhas-tech-details-body {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.maes-filhas-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.maes-filhas-summary-line {
  font-size: 12px;
  color: var(--text-dim);
}
.maes-filhas-source-line {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 10px;
  line-height: 1.45;
}

.maes-filhas-error-banner {
  font-size: 11px;
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.maes-filhas-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 42%;
}
.maes-filhas-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.maes-filhas-block-title {
  color: #eab308;
}
.maes-filhas-block-sub {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
  opacity: 0.9;
}
.maes-filhas-count-chip {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.14);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #fbbf24;
}

.maes-filhas-table-shell {
  overflow: auto;
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 10px;
  background: var(--surface2);
  min-height: 120px;
  max-height: 320px;
  flex: 1 1 auto;
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 36px rgba(0, 0, 0, 0.22);
}
.postlobby-layout.postlobby-maes-filhas-active .maes-filhas-table-shell,
.postlobby-layout.postlobby-maes-filhas-active .maes-filhas-table-shell--tall,
.postlobby-layout.postlobby-maes-filhas-active .maes-filhas-filhas-cards-shell {
  max-height: min(280px, 40vh);
  min-height: 64px;
}
.maes-filhas-table-shell--tall {
  min-height: 180px;
  max-height: 380px;
}

.maes-filhas-maes-cards-shell {
  max-height: min(280px, 40vh);
  padding: 10px;
}
.maes-filhas-maes-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.maes-filhas-mae-card {
  border: 1px solid color-mix(in srgb, #eab308 35%, var(--border2));
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(165deg, rgba(234, 179, 8, 0.07), rgba(15, 23, 42, 0.55));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.maes-filhas-mae-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(234, 179, 8, 0.2);
}
.maes-filhas-mae-card-title {
  font-weight: 700;
  font-size: 13px;
  color: color-mix(in srgb, var(--text) 90%, #eab308);
  word-break: break-word;
}
.maes-filhas-mae-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.maes-filhas-mae-remove {
  color: color-mix(in srgb, #f87171 85%, var(--text));
  border-color: rgba(248, 113, 113, 0.35);
}
.maes-filhas-filha-remove {
  font-size: 11px;
  padding: 4px 8px;
  color: color-mix(in srgb, #f87171 85%, var(--text));
  border-color: rgba(248, 113, 113, 0.35);
}
.maes-filhas-filha-actions {
  white-space: nowrap;
}
.maes-filhas-mae-card-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.maes-filhas-mae-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
}
.maes-filhas-mae-field span:first-child {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  color: rgba(234, 179, 8, 0.85);
}
.maes-filhas-mae-field input {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: rgba(15, 23, 42, 0.65);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

/* ── PIX Selector ── */
.maes-filhas-pix-field .mae-pix-selector-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.mae-pix-selector-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(234, 179, 8, 0.35);
  background: rgba(15, 23, 42, 0.65);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s, background 0.16s;
  min-height: 32px;
  white-space: nowrap;
  overflow: hidden;
}
.mae-pix-selector-btn:hover {
  border-color: rgba(234, 179, 8, 0.65);
  background: rgba(30, 41, 59, 0.75);
}
.mae-pix-selector-val {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
}
.mae-pix-selector-ico {
  flex: 0 0 auto;
  font-size: 14px;
  opacity: 0.55;
  color: rgba(234, 179, 8, 0.85);
}

/* ── PIX Popover ── */
.mf-pix-seletor-popover {
  z-index: 99999;
  background: var(--surface, #0f172a);
  border: 1px solid rgba(234, 179, 8, 0.30);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  overflow: hidden;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  min-width: 280px;
  max-width: 420px;
}
.mf-pix-seletor-header {
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(234, 179, 8, 0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.mf-pix-seletor-header small {
  font-weight: 400;
  opacity: 0.6;
  text-transform: none;
  letter-spacing: 0;
}
.mf-pix-seletor-list {
  overflow-y: auto;
  flex: 1 1 0;
  padding: 4px 0;
}
.mf-pix-seletor-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  transition: background 0.12s;
  border-radius: 0;
}
.mf-pix-seletor-item:hover {
  background: rgba(234, 179, 8, 0.10);
}
.mf-pix-seletor-item.selected {
  background: rgba(234, 179, 8, 0.13);
}
/* CAMADA A: chave já usada na plataforma — visível mas não selecionável */
.mf-pix-seletor-item--bloqueada {
  cursor: not-allowed !important;
  opacity: 0.72;
  border-left: 2px solid rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.04);
  pointer-events: none;
}
.mf-pix-seletor-item--bloqueada:hover {
  background: rgba(245, 158, 11, 0.06) !important;
}
.mf-pix-item-email {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mf-pix-item-banco {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.75;
  white-space: nowrap;
}
.mf-pix-item-badge {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(234, 179, 8, 0.20);
  color: rgba(234, 179, 8, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mf-pix-seletor-loading,
.mf-pix-seletor-empty {
  padding: 16px 14px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}
.mf-pix-seletor-footer {
  padding: 6px 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}
.mf-pix-seletor-cancel {
  font-size: 11px !important;
  padding: 4px 10px !important;
}

.maes-filhas-mae-card-hint {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-dim);
  opacity: 0.9;
}
.maes-filhas-mae-save {
  flex-shrink: 0;
  font-weight: 600;
}

/* MOTOR - CONTAS — órfãs: grelha de cards (separado de filhas) */
.motor-contas-orfas-cards-shell {
  border-radius: 12px;
  border: 1px solid rgba(234, 179, 8, 0.28);
  background: rgba(15, 23, 42, 0.55);
  padding: 10px;
  max-height: min(280px, 40vh);
  overflow: auto;
}
.motor-contas-orfas-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.motor-orfa-card {
  border: 1px solid rgba(234, 179, 8, 0.38);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.99));
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}
.motor-orfa-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.motor-orfa-card-cb input {
  margin: 0;
  opacity: 0.5;
}
.motor-orfa-card-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #0f172a;
  background: linear-gradient(135deg, #fbbf24, #eab308);
  padding: 2px 8px;
  border-radius: 6px;
}
.motor-orfa-card-login {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #fef9c3;
  text-align: right;
  word-break: break-all;
}
.motor-orfa-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font-size: 11px;
  flex: 1;
}
.motor-orfa-card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.motor-orfa-card-stat-l {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.motor-orfa-card-stat-v {
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
}
.motor-orfa-card-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
}
.motor-orfa-card-foot .btn-ghost {
  font-size: 11px;
  padding: 4px 10px;
}
.maes-filhas-block--orfas .maes-filhas-block-title {
  color: #fde68a;
}

#panel-maes-filhas .maes-filhas-fin-table thead th {
  background: linear-gradient(135deg, #713f12, #a16207);
  color: #fff;
  border-bottom: 2px solid #eab308;
}
#panel-maes-filhas .maes-filhas-fin-table tbody tr:hover {
  background: rgba(234, 179, 8, 0.06);
}

.maes-filhas-col-login {
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 92%, #eab308);
}
.maes-filhas-col-url {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maes-filhas-phone-ddi {
  font-weight: 800;
  color: #eab308;
  margin-right: 2px;
}

.maes-filhas-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-dim);
}
.maes-filhas-pager .btn-ghost {
  font-size: 11px;
  padding: 4px 10px;
}
.maes-filhas-page-size-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-weight: 600;
  color: var(--text-dim);
}
.maes-filhas-page-size-label .select-small {
  min-width: 64px;
}
.maes-filhas-pageinfo {
  min-width: 12em;
  line-height: 1.35;
}

/* Referência jogobr.online — plataformas para criação rápida */
.maes-filhas-jogobr-platforms {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: rgba(0, 0, 0, 0.14);
}
.maes-filhas-jogobr-head {
  margin-bottom: 12px;
}
.maes-filhas-jogobr-head h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.maes-filhas-jogobr-head p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}
.maes-filhas-jogobr-head a {
  color: #86efac;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.maes-filhas-jogobr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.maes-filhas-jogobr-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: var(--surface2);
}
.maes-filhas-jogobr-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.maes-filhas-jogobr-rank {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dim);
  min-width: 1.5em;
}
.maes-filhas-jogobr-rank--1 {
  color: #f87171;
}
.maes-filhas-jogobr-rank--2 {
  color: #4ade80;
}
.maes-filhas-jogobr-rank--3 {
  color: #60a5fa;
}
.maes-filhas-jogobr-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.maes-filhas-jogobr-blurb {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
  min-height: 2.6em;
}
.maes-filhas-jogobr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.maes-filhas-jogobr-jogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.maes-filhas-jogobr-jogo:hover {
  filter: brightness(1.08);
}
.maes-filhas-jogobr-url {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: var(--text-dim);
  word-break: break-all;
  opacity: 0.9;
}

/* VIP 4444WIN: textos instrucionais / faixa de estado ocultos (UI mais limpa) */
#vip-panel-intro-copy,
#vip-console-hint,
#vip-hint-banner {
  display: none !important;
}

/* Barra de ferramentas VIP: ações separadas de métricas (só organização visual) */
.vip-toolbar-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.vip-toolbar-primary__cta {
  background: linear-gradient(135deg, #14532d, #22c55e);
  border: none;
  font-weight: 800;
}
.vip-toolbar-primary__danger {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}
.vip-toolbar-metrics {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--surface2) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.vip-toolbar-metrics__summary {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.vip-toolbar-metrics__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.vip-metric-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-height: 3.25rem;
}
.vip-metric-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.2;
}
.vip-metric-card__value {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vip-metric-card--wallet .vip-metric-card__value {
  color: #22c55e;
}
.vip-metric-card--wallet {
  border-color: rgba(34, 197, 94, 0.35);
  background: linear-gradient(
    165deg,
    rgba(34, 197, 94, 0.14) 0%,
    color-mix(in srgb, var(--surface) 94%, rgba(34, 197, 94, 0.06)) 100%
  );
}
.vip-metric-card--bonus .vip-metric-card__value {
  color: #fbbf24;
}
.vip-metric-card--bonus {
  border-color: rgba(234, 179, 8, 0.38);
  background: linear-gradient(
    165deg,
    rgba(234, 179, 8, 0.12) 0%,
    color-mix(in srgb, var(--surface) 94%, rgba(234, 179, 8, 0.05)) 100%
  );
}
.vip-metric-card--cycle .vip-metric-card__value {
  color: #eab308;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vip-metric-card--cycle {
  border-color: rgba(234, 179, 8, 0.28);
  background: linear-gradient(
    165deg,
    rgba(234, 179, 8, 0.1) 0%,
    color-mix(in srgb, var(--surface) 95%, rgba(234, 179, 8, 0.04)) 100%
  );
}
.vip-metric-card__value--cycle {
  font-size: 16px;
}

/* ── Lista extração (painel): HUD operacional + refresh não destrutivo ── */
.register-extracao-hud {
  position: relative;
  padding: 2px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--border) 55%, transparent) 0%,
    color-mix(in srgb, var(--surface2) 92%, #0ea5e9 4%) 50%,
    color-mix(in srgb, var(--border) 50%, transparent) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent),
    0 8px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.register-extracao-hud__cards {
  gap: 10px;
  padding: 2px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}
.register-extracao-hud.register-hud--refreshing .register-hud-card {
  animation: register-hud-refresh-glow 1.4s ease-in-out infinite;
}
@keyframes register-hud-refresh-glow {
  0%,
  100% {
    filter: brightness(1);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  50% {
    filter: brightness(1.04);
    box-shadow:
      0 0 0 1px color-mix(in srgb, #38bdf8 35%, transparent),
      0 4px 16px rgba(14, 165, 233, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}
.register-hud-card {
  position: relative;
  overflow: hidden;
  border-radius: 11px !important;
  backdrop-filter: blur(6px);
}
.register-hud-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%);
  transform: translateX(-100%);
}
.register-extracao-hud.register-hud--refreshing .register-hud-card::after {
  animation: register-hud-sheen 2s ease-in-out infinite;
}
@keyframes register-hud-sheen {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.register-hud-value {
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    filter 0.22s ease;
  letter-spacing: 0.02em;
  font-weight: 800;
  font-feature-settings: 'tnum' 1;
}
.register-hud-value.register-hud-value--pulse {
  opacity: 0.88;
  transform: scale(0.985);
  filter: brightness(1.12);
}
.register-hud-cycle-track {
  margin-top: 4px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface2) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  overflow: hidden;
}
.register-hud-cycle-fill {
  height: 100%;
  width: 0%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.55), #eab308 45%, rgba(250, 204, 21, 0.95));
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.35);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.register-list-refresh-indicator {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 88%, #38bdf8);
  background: color-mix(in srgb, var(--surface2) 82%, transparent);
  border: 1px solid color-mix(in srgb, #38bdf8 32%, var(--border));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.register-list-refresh-indicator__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.75);
  animation: register-hud-dot-pulse 1s ease-in-out infinite;
}
@keyframes register-hud-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.92);
  }
}

.vip-toolbar-last-batch {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 12px 0;
  line-height: 1.45;
  padding: 0 2px;
}
.vip-toolbar-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.vip-toolbar-secondary__open {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  border: none;
  font-weight: 800;
}
.vip-toolbar-secondary__opts {
  font-size: 12px;
}
.vip-toolbar-secondary__clear {
  font-size: 11px;
}
.vip-toolbar-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.vip-toolbar-pagination__hint {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.45;
  max-width: min(52ch, 100%);
}
.vip-toolbar-pagination__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vip-accounts-preview-wrap {
  overflow: auto;
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 10px;
  background: var(--surface2);
  min-height: 120px;
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.vip-accounts-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  align-content: start;
}
.vip-accounts-cards--brushing {
  -webkit-user-select: none;
  user-select: none;
}
.vip-accounts-cards--brushing .vip-account-card {
  cursor: crosshair;
}
.vip-account-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  cursor: default;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    var(--surface);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.14s ease;
}
.vip-account-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border2));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.vip-account-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Conta marcada para abrir / em destaque — leitura clara «online na fila» */
.vip-account-card--selected {
  border-color: rgba(34, 197, 94, 0.72);
  background: linear-gradient(
    160deg,
    rgba(34, 197, 94, 0.2) 0%,
    rgba(34, 197, 94, 0.08) 38%,
    color-mix(in srgb, var(--surface) 92%, rgba(34, 197, 94, 0.12)) 100%
  );
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.45),
    0 12px 32px rgba(34, 197, 94, 0.18),
    0 14px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.vip-account-card--selected::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #16a34a, #4ade80, #22c55e);
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.55);
  pointer-events: none;
  z-index: 1;
}
.vip-account-card--selected .vip-card-selector {
  accent-color: #22c55e;
}
.vip-account-card--selected:hover {
  border-color: rgba(74, 222, 128, 0.9);
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.55),
    0 16px 40px rgba(34, 197, 94, 0.22),
    0 18px 44px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}
.vip-account-card .vip-card-selector {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #38bdf8;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.vip-account-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  cursor: pointer;
  padding-top: 8px;
}
.vip-account-card-head {
  padding: 14px 42px 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border2) 70%, transparent);
}
.vip-account-card-login {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  word-break: break-word;
  line-height: 1.3;
  color: var(--text);
}
/* Plataforma no card VIP: oculto (JS antigo em cache ainda injeta .vip-account-card-meta) */
#vip-accounts-cards .vip-account-card-meta {
  display: none !important;
}
.vip-account-card-stats {
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
}
.vip-account-card-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 10px;
  line-height: 1.25;
}
.vip-account-card-stat-label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  flex-shrink: 0;
}
.vip-account-card-stat-val {
  font-weight: 700;
  font-size: 11px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.vip-account-card-stat-val--bonus {
  color: color-mix(in srgb, #22c55e 88%, var(--text));
  font-size: 12px;
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.16);
}
/* Barra «Total no filtro activo» (lista VIP): COLETA alinhada ao valor dos cartões (texto principal). */
.vip-filtro-agg .vip-filtro-agg-coleta {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.vip-account-card-stat-val--email {
  font-size: 10px;
  font-weight: 600;
  word-break: break-all;
  line-height: 1.2;
  text-align: right;
  max-width: 62%;
}
.vip-account-card-stat-val--empty {
  opacity: 0.45;
  font-weight: 600;
}
.vip-account-card-stat-val--platform-id {
  letter-spacing: 0.02em;
}
.vip-account-card-stat-val--warn {
  color: color-mix(in srgb, #f59e0b 88%, var(--text));
}
.vip-account-card-footer {
  padding: 0 14px 11px;
  margin-top: auto;
}
.vip-account-card-badge {
  display: inline-block;
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.14);
  color: #bae6fd;
  border: 1px solid rgba(56, 189, 248, 0.32);
  font-weight: 600;
}
.vip-account-card-badge--muted {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-dim);
  border-color: rgba(148, 163, 184, 0.28);
}

/* MOTOR — CONTAS: cartões alinhados ao padrão VIP (AccountCard) */
#panel-maes-filhas .vip-accounts-cards.maes-filhas-maes-cards,
#panel-maes-filhas .vip-accounts-cards.maes-filhas-filhas-cards,
#panel-maes-filhas .vip-accounts-cards.motor-contas-orfas-cards {
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  align-content: start;
}
.maes-filhas-filhas-cards-shell {
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: rgba(0, 0, 0, 0.12);
  padding: 12px;
  max-height: none;
  overflow: visible;
}
.account-card.account-card--motor {
  position: relative;
}
.account-card-head--stacked .account-card-head-text {
  padding-right: 28px;
}
.account-card-platform {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  line-height: 1.3;
  word-break: break-word;
}
.account-card-stats-grid {
  padding: 8px 14px 4px;
}
.account-card-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.account-card-stats-row + .account-card-stats-row {
  margin-top: 8px;
}
.account-card-stat-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.account-card-stat-col .vip-account-card-stat-label {
  display: block;
}
.account-card-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 6px 14px 8px;
}
.account-card-chip {
  font-size: 9px;
  line-height: 1.35;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: var(--text-dim);
  max-width: 100%;
  word-break: break-word;
}
.account-card-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 4px 14px 8px;
}
.account-card-type-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.account-card-type-badge--mae {
  background: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(234, 179, 8, 0.45);
}
.account-card-type-badge--filha {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.42);
}
.account-card-type-badge--orfa {
  background: rgba(168, 85, 247, 0.22);
  color: #e9d5ff;
  border: 1px solid rgba(168, 85, 247, 0.45);
}
.account-card-footer--motor {
  padding: 0 14px 12px !important;
  margin-top: auto;
}
.account-card-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}
.account-card-btn-hist {
  font-size: 11px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}
.account-card-footer-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border2) 70%, transparent);
}
.account-card-motor-fields {
  padding: 0 0 2px;
  border-top: 1px solid color-mix(in srgb, var(--border2) 55%, transparent);
  margin-top: 4px;
}
.account-card-motor-fields .maes-filhas-mae-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 14px 0;
}
@media (min-width: 520px) {
  .account-card-motor-fields .maes-filhas-mae-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.maes-filhas-jogobr-jogo--btn {
  font: inherit;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#panel-maes-filhas .vip-account-card.account-card--motor-mae {
  border-color: color-mix(in srgb, #eab308 28%, var(--border2));
}
#panel-maes-filhas .vip-account-card.account-card--motor-filha {
  border-color: color-mix(in srgb, #3b82f6 28%, var(--border2));
}
#panel-maes-filhas .vip-account-card.account-card--motor-orfa {
  border-color: color-mix(in srgb, #a855f7 30%, var(--border2));
}

/* Flutuantes: ficam acima da barra de sessões (Nodal Helper, Spotify dock) */
body:has(#postlobby-layout.postlobby-layout) .chat-widget {
  bottom: calc(var(--postlobby-tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  z-index: 100000;
}
body:has(#postlobby-layout.postlobby-layout) .spotify-music-fab-wrap {
  bottom: calc(var(--postlobby-tabbar-h) + 16px);
  z-index: 100000;
}
body:has(#postlobby-layout.postlobby-layout) .spotify-iframe-host-sr {
  bottom: 0;
}
body:has(#postlobby-layout.postlobby-layout) .toast-container {
  bottom: calc(var(--postlobby-tabbar-h) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 100070;
}

/* Criação de Contas sempre abaixo de Contas PIX (não lado a lado no grid de 2 colunas) */
#panel-contas,
#panel-criacao-contas {
  grid-column: 1 / -1;
}

/* Caixa de email aninhada dentro do mesmo cartão que Contas PIX */
#panel-contas #panel-caixa-operacional.ceo-panel--nested {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  border-radius: 12px;
  align-self: stretch;
  min-width: 0;
}

#panel-emails, 
#panel-financeiro, 
#panel-atividade,
#panel-admin-global {
  grid-column: 1 / 3;
}

/* ── PANELS ────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow: var(--app-glass-shadow);
}
.panel-activity { grid-column: 1 / 3; }
#panel-financeiro { grid-column: 1 / 3; }
#panel-emails { grid-column: 1 / 3; }
#container-emails { max-height: unset !important; height: auto !important; }

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--app-glass-veil);
  flex-shrink:0;
  flex-wrap: wrap;
  gap: 10px;
}
.panel-title { font-size:14px; font-weight:600; letter-spacing:-.1px; }
.panel-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Panel Minimize/Collapse */
.panel.minimized {
  height: auto !important;
  min-height: unset !important;
  margin-bottom: 12px;
}
.panel.minimized > *:not(.panel-header) {
  display: none !important;
}
.panel.minimized .panel-header {
  border-bottom: none;
}

.btn-panel-toggle {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  color: var(--text-dim);
}
.btn-panel-toggle:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
  color: var(--text);
  border-color: var(--accent);
}
.panel.minimized .btn-panel-toggle {
  background: rgba(255,255,255,0.1);
  color: var(--accent);
}

/* ── CONTA CARDS ───────────────────────────── */
.bank-filters {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.panel-scroller::-webkit-scrollbar {
  display: none;
}
.bank-filters::-webkit-scrollbar { display: none; }

.bank-chip {
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bank-chip img { width: 14px; height: 14px; border-radius: 4px; }
.bank-chip:hover { border-color: var(--accent); color: var(--text); background: rgba(99, 102, 241, 0.1); }
.bank-chip.active { background: var(--accent); color: #fff; border-color: var(--accent2); box-shadow: 0 0 12px rgba(99, 102, 241, 0.3); }

.contas-list {
  padding: 12px;
  padding-bottom: 120px; /* Garante que o menu da última chave não seja cortado */
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.conta-card {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  display: flex; flex-direction: column; gap: 6px;
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.conta-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(99,102,241,.2); transform:translateY(-1px); }
.conta-card.selected { border-color: var(--accent); background: rgba(99,102,241,.08); }

.conta-top { display:flex; align-items:center; justify-content:space-between; }
.conta-email { font-size:14px; font-weight:600; color:var(--text); }
.conta-banco { font-size:12px; color:var(--text-dim); }
.conta-actions { display:flex; gap:6px; }

/* ── Contas PIX: organização visual (desktop) ───────────────────────────── */
#panel-contas .panel-header {
  align-items: center;
}
#panel-contas .panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#panel-contas .select-small {
  min-width: 140px;
  height: 34px;
}
#panel-contas .contas-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-content: start;
  align-items: stretch;
}
@media (min-width: 1024px) {
  #panel-contas .contas-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
#panel-contas .conta-card {
  min-height: 180px;
  padding: 16px;
  gap: 8px;
  display: flex;
  flex-direction: column;
}
#panel-contas .conta-top {
  align-items: center;
  gap: 6px;
}
#panel-contas .conta-email {
  line-height: 1.25;
  word-break: break-word;
}
#panel-contas .bank-badge {
  margin-top: 2px;
}
#panel-contas .conta-operador {
  margin-top: 2px !important;
}

.badge {
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding: 3px 8px; border-radius:20px;
}
.badge-ativo   { background:rgba(16,185,129,.15); color:var(--green); border:1px solid rgba(16,185,129,.25); }
.badge-inativo { background:rgba(239,68,68,.12); color:var(--red); border:1px solid rgba(239,68,68,.2); }
/* EM USO: chave ATIVA alocada a conta Financeiro/Contas com status PENDENTE */
.badge-em_uso  { background:rgba(245,158,11,.15); color:var(--yellow); border:1px solid rgba(245,158,11,.3); }
/* Contas PIX: sem ambiguidade — ATIVO verde, INATIVO vermelho (sobrepor temas claros). */
#panel-contas .badge-ativo {
  background: linear-gradient(180deg, rgba(16,185,129,0.95), rgba(5,150,105,0.98)) !important;
  color: #ecfdf5 !important;
  border: 1px solid rgba(16,185,129,0.9) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset;
}
#panel-contas .badge-inativo {
  background: linear-gradient(180deg, rgba(248,113,113,0.95), rgba(220,38,38,0.98)) !important;
  color: #fff5f5 !important;
  border: 1px solid rgba(239,68,68,0.9) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset;
}
/* EM USO: chave alocada a conta pendente — amarelo sólido no contexto Contas PIX */
#panel-contas .badge-em_uso {
  background: linear-gradient(180deg, rgba(251,191,36,0.95), rgba(217,119,6,0.98)) !important;
  color: #fffbeb !important;
  border: 1px solid rgba(245,158,11,0.9) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset;
}
.badge-pendente{ background:rgba(245,158,11,.12); color:var(--yellow); border:1px solid rgba(245,158,11,.2); }
.badge-concluido{ background:rgba(16,185,129,.12); color:var(--green); border:1px solid rgba(16,185,129,.2); }
.badge-op { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); font-size: 10px; padding: 2px 4px; }
.badge-live { background:rgba(239,68,68,.15); color:var(--red); border:1px solid rgba(239,68,68,.25); padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; animation:pulse 2s infinite; }

/* Multi-Theme Overrides */
body[class*="theme-dark-"] .panel {
  background: var(--surface);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow:
    var(--app-glass-shadow),
    0 0 0 1px rgba(168, 85, 247, 0.06);
  border: 1px solid var(--border2);
}

body[class*="theme-dark-"] .topbar {
  background: rgba(3, 3, 4, 0.85);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}

body.theme-dark-crime-boss .topbar {
  border-bottom-color: rgba(255, 0, 255, 0.3);
}

body.theme-dark-trading-empire .topbar {
  border-bottom-color: rgba(59, 130, 246, 0.3);
}

body[class*="theme-dark-"] .btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 24px rgba(99,102,241,.25);
}

body[class*="theme-dark-"] .stat-val {
  text-shadow: 0 0 12px rgba(255,255,255,0.2);
}



/* ── QR AREA ───────────────────────────────── */
.qr-area {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  gap: 16px;
}
.qr-empty { color:var(--text-dim); font-size:13px; text-align:center; max-width:220px; line-height:1.6; }
.qr-container { display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; }
.qr-img {
  border-radius: 16px;
  padding: 12px;
  background: white;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  width: 220px; height: 220px; object-fit: contain;
}
.qr-tag { font-size:12px; color:var(--text-dim); font-weight:500; }
.qr-payload-box {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px 14px;
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  font-size:11px; color:var(--text-dim); font-family:monospace;
  word-break:break-all; max-width:100%; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
}
.qr-buttons { display:flex; gap:8px; }

/* ── FINANCEIRO ────────────────────────────── */
.fin-list {
  padding: 12px;
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.fin-card {
  background: rgba(15, 23, 42, 0.88);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fin-top { display:flex; justify-content:space-between; align-items:center; }
.fin-conta{ font-size:13px; font-weight:600; }
.fin-vals { display:flex; gap:16px; flex-wrap:wrap; }
.fin-val  { font-size:12px; color:var(--text-dim); }
.fin-val span{ font-weight:600; }
.fin-lucro-block { display:flex; gap:12px; align-items:center; padding:8px 0; border-top:1px solid var(--border); }
.fin-actions { display:flex; gap:6px; }

/* Criação de contas — blocos separados (GASTO / mãe-filha / órfãs) */
.cc-bucket-block {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.cc-bucket-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--text);
}
.cc-bucket-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 10px 0;
  line-height: 1.45;
}

/* Status na tabela Criação de Contas / Financeiro (tons leves) */
.cc-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 96px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.cc-status-pill:hover {
  filter: brightness(0.97);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.cc-status-pill.cc-status-pendente {
  background: #fff9e6;
  color: #7a5f00;
  border-color: rgba(234, 179, 8, 0.35);
}
.cc-status-pill.cc-status-concluido {
  background: #e8f7ec;
  color: #1b5e20;
  border-color: rgba(34, 197, 94, 0.35);
}
.cc-status-pill.cc-status-outro {
  background: rgba(148, 163, 184, 0.14);
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.3);
}

/* Ocultar só a coluna ID (1ª coluna) nos 3 blocos Financeiro/Contas — DOM intacto.
   Linhas com um único td.empty-state (carregando / vazio) não são afetadas. */
#panel-criacao-contas .cc-bucket-block .fin-table thead th:first-child,
#panel-criacao-contas .cc-bucket-block .fin-table tbody td:first-child:not(.empty-state),
#panel-contas .cc-after-pix-block .cc-bucket-block .fin-table thead th:first-child,
#panel-contas .cc-after-pix-block .cc-bucket-block .fin-table tbody td:first-child:not(.empty-state) {
  display: none;
}

/* Card conta mãe + filha (modal criação de contas) */
#modal-cc-detail.cc-modal-wide .modal {
  max-width: min(1120px, 98vw) !important;
}
.cc-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 920px) {
  .cc-card-grid { grid-template-columns: 1fr; }
}
.cc-card-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.18);
}
.cc-card-panel-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px 0;
  letter-spacing: 0.04em;
  color: #c4b5fd;
}
.cc-card-panel--filha .cc-card-panel-title {
  color: #5eead4;
}
.cc-card-dl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.cc-card-dl-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  align-items: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 6px;
}
.cc-card-dl-k {
  color: var(--text-dim);
  font-weight: 600;
}
.cc-card-dl-v {
  word-break: break-word;
  color: var(--text);
}
.cc-card-sync {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: var(--text-dim);
}
.cc-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ── PLANILHA (SPREADSHEET) ────────────────── */
.table-container {
  flex: 1;
  overflow: auto;
  border-radius: var(--radius);
  background: var(--surface2);
  border: 1px solid var(--border2);
  margin-top: 4px;
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── THEME SWITCH ──────────────────────────── */
.theme-switch-group {
  display: flex;
  background: rgba(0,0,0,0.2);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  margin: 0 10px;
}
.btn-theme-toggle {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-theme-toggle.active {
  background: rgba(168, 85, 247, 0.15);
  color: #A855F7;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.1);
}
.theme-fairy .logo-text, 
.theme-fairy .btn-waiting-toggle.active .text,
.theme-fairy .stat-val.accent {
  background: linear-gradient(135deg, #FF2D75, #fb7299);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: 'Cinzel Decorative', cursive;
  filter: drop-shadow(0 0 8px rgba(255, 45, 117, 0.4));
}

.theme-fairy .btn-primary,
.theme-fairy .badge-ativo {
  box-shadow: 0 0 15px var(--pink-glow);
}

.theme-dark-fairy-box .btn-theme-toggle.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(219, 39, 119, 0.2));
  color: #fff;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text);
  min-width: 900px;
}
.fin-table thead th {
  position: sticky; top: 0;
  background: #064e3b; /* Verde Escuro (Spreadsheet Style) */
  color: #fff;
  text-align: left;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  border-bottom: 2px solid #059669;
  border-right: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.fin-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .2s;
}
.fin-table tbody tr:hover { background: rgba(52, 211, 153, 0.05); }
.fin-table td {
  padding: 6px 12px;
  white-space: nowrap;
  border-right: 1px solid var(--border);
}
.fin-table td:last-child, .fin-table th:last-child { border-right: none; }
.txt-small { font-size: 11px; color: var(--text-dim); }
.bold { font-weight: 700; color: var(--text); }

/* ── TOTAIS POR TABELA ── linha de total no tfoot das tabelas Financeiro/Contas */
.cc-totals-row {
  background: rgba(5, 150, 105, 0.12);
  border-top: 2px solid rgba(5, 150, 105, 0.4);
}
.cc-totals-row td {
  padding: 7px 12px;
  font-size: 12px;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.cc-totals-row td:last-child { border-right: none; }
.cc-totals-label {
  font-weight: 700;
  color: #6ee7b7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.9;
}
.cc-totals-value {
  font-weight: 700;
  color: #a7f3d0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Ocultar a coluna ID também no tfoot (alinhada com thead/tbody) */
#panel-criacao-contas .cc-bucket-block .fin-table tfoot td:first-child,
#panel-contas .cc-after-pix-block .cc-bucket-block .fin-table tfoot td:first-child {
  display: none;
}

.btn-icon-s {
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  border-radius:5px; color:#fff;
  padding:4px 7px; font-size:11px; cursor:pointer;
}
.btn-icon-s:hover { background:rgba(255,255,255,.12); }

/* ── ACTIVTY FEED ──────────────────────────── */
.activity-feed {
  flex:1; overflow-y:auto; padding:12px;
  display:flex; flex-direction:column; gap:6px;
}
.activity-item {
  display:flex; align-items:flex-start; gap:10px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 10px 14px;
  animation: fadeSlide 0.3s ease;
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
@keyframes fadeSlide {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.act-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.act-body { flex:1; }
.act-action{ font-size:13px; font-weight:500; color:var(--text); }
.act-meta  { font-size:11px; color:var(--text-dim); margin-top:2px; }
.act-time  { font-size:11px; color:var(--text-muted); flex-shrink:0; }

/* ── EMPTY STATE ───────────────────────────── */
.empty-state { color:var(--text-muted); font-size:13px; text-align:center; padding:32px 16px; }

/* ── BUTTONS ───────────────────────────────── */
.btn-primary {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:none; border-radius:8px; color:#fff;
  padding:8px 14px; font-size:13px; font-weight:600;
  cursor:pointer; font-family:'Inter',sans-serif;
  transition:transform .15s, box-shadow .15s;
  white-space:nowrap;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(99,102,241,.4); }
.btn-primary:active{ transform:translateY(0); }

.btn-ghost {
  background:transparent; border:1px solid var(--border2);
  border-radius:8px; color:var(--text-dim);
  padding:8px 14px; font-size:13px; font-weight:500;
  cursor:pointer; font-family:'Inter',sans-serif;
  transition:border-color .2s, color .2s;
}
.btn-ghost:hover { border-color:var(--text-dim); color:var(--text); }

/* ── EXTRAÇÃO: LISTAS DE ARQUIVOS ───────────────────── */
/* Painel web: extração desligada (POST_LOBBY_EXTRACAO_TAB_HIDDEN em app_v2.js) — não mostrar mesmo com JS antigo */
body.postlobby-extracao-disabled #panel-extracao {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#panel-extracao {
  justify-content: flex-start !important;
  align-content: flex-start !important;
  width: 100% !important;
  min-height: auto !important;
  height: auto !important;
}
#panel-extracao > #extracao-source-folders,
#panel-extracao > .panel-header,
#panel-extracao > .extracao-container,
#panel-extracao > .pagination-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: stretch !important;
}
#panel-extracao > .extracao-container {
  flex: 0 0 auto !important;
  align-content: start !important;
}
#extracao-source-folders {
  padding: 12px 16px 6px !important;
  gap: 10px !important;
  align-content: start !important;
  justify-content: start !important;
}
#extracao-source-folders .stat-card {
  border-radius: 10px;
  padding: 10px 12px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: stretch;
  height: auto !important;
  min-height: 0 !important;
}
.extracao-source-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.extracao-source-card-hint {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.35;
  margin-bottom: 8px;
  opacity: 0.95;
}
.extracao-source-mount {
  margin-top: 2px;
}
.extracao-source-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-align: left;
  line-height: 1.45;
}
.extracao-source-meta strong {
  color: var(--text);
  font-weight: 600;
}
.extracao-source-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(320px, 38vh);
  overflow: auto;
  padding: 4px 4px 4px 0;
  align-content: flex-start;
}
.extracao-file-link {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-size: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  transition: border-color 0.15s, background 0.15s;
}
.extracao-file-link-glyph {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.35;
  opacity: 0.9;
  margin-top: 1px;
}
.extracao-file-link-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.extracao-file-link-title {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.extracao-file-link-sub {
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-dim);
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  word-break: break-all;
  overflow-wrap: anywhere;
  opacity: 0.92;
}
.extracao-file-link:hover {
  border-color: rgba(96, 165, 250, 0.85);
  background: rgba(96, 165, 250, 0.1);
}
.extracao-source-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
}
.extracao-mini-btn {
  background: rgba(2, 6, 23, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: var(--text);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
}
.extracao-mini-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.extracao-source-footnote {
  font-size: 11px;
  color: var(--text-dim);
}

.btn-icon {
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:7px; color:var(--text-dim);
  padding:5px 10px; font-size:12px; cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:background .2s, color .2s;
}
.btn-icon:hover{ background:rgba(255,255,255,.1); color:var(--text); }

.btn-danger {
  background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.25);
  border-radius:7px; color:var(--red);
  padding:5px 10px; font-size:12px; cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:background .2s;
}
.btn-danger:hover{ background:rgba(239,68,68,.25); }

.btn-green {
  background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.25);
  border-radius:7px; color:var(--green);
  padding:5px 10px; font-size:12px; cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:background .2s;
}
.btn-green:hover{ background:rgba(16,185,129,.25); }

.btn-waiting-toggle {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: rgba(255,255,255,0.6);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-waiting-toggle:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
  transform: translateY(-1px);
}
.btn-waiting-toggle.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.5);
  color: #fff;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
  animation: glow-green 2s infinite ease-in-out;
}
@keyframes glow-green {
  0%, 100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.5); }
}

.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-icon-only:hover {
  transform: translateY(-1px);
}

/* ── SELECTS ───────────────────────────────── */
.select-small, .select-full {
  background:rgba(255,255,255,.06);
  border:1px solid var(--border2);
  border-radius:8px;
  color:var(--text);
  font-size:13px;
  font-family:'Inter',sans-serif;
  outline:none;
  cursor:pointer;
  transition:border-color .2s;
}
.select-small { padding:6px 10px; }
.select-full  { width:100%; padding:12px 14px; }
.select-small:focus, .select-full:focus{ border-color:var(--accent); }
.select-small option, .select-full option { background:#1a2235; color:#fff; }

/* ── MODAIS ────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display:none; align-items:center; justify-content:center;
  /* Acima do onboarding institucional (#nodal-operador-onboarding-root z-index 100020) para GA / vincular WA / modais não ficarem por baixo do guia. */
  z-index:100025;
  animation:fadeIn .2s ease;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal-overlay.open { display:flex; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.modal-entretenimento-wmp-hint {
  margin: 0;
  padding: 10px 16px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim, #94a3b8);
  opacity: 0.92;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: min(92vh, calc(100dvh - 24px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--app-glass-shadow-modal);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  animation: slideUp 0.25s ease;
  touch-action: manipulation;
}
@keyframes slideUp{ from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.modal-header h3 { font-size:16px; font-weight:600; }
.modal-close { background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:background .2s; }
.modal-close:hover{ background:rgba(255,255,255,.08); color:var(--text); }

.modal-body {
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-footer{
  display:flex; justify-content:flex-end; gap:10px; padding:16px 24px;
  border-top:1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* ── Modal Gestão de Operadores (#modal-equipe) ─────────────────────────── */
.modal.modal-equipe {
  max-width: min(960px, 94vw);
  width: 100%;
}
.modal.modal-equipe .modal-equipe-body {
  max-height: min(78vh, 820px);
  overflow-y: auto;
  padding: 16px 20px 20px;
  gap: 14px;
}
.equipe-list-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Abas Operador / Public user (modal Gestão de Equipe) */
.equipe-member-tabs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.equipe-member-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border);
}
.equipe-member-tab {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.equipe-member-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.equipe-member-tab--active {
  color: var(--text);
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.equipe-member-tab-count {
  font-weight: 700;
  opacity: 0.9;
}
.equipe-member-tab-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.equipe-member-tab-panel--active {
  display: flex;
}
.equipe-resumo {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid var(--accent);
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 2px;
}
.equipe-resumo-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.equipe-resumo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 12px;
}
.equipe-metric {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.equipe-metric--wide {
  grid-column: 1 / -1;
}
.equipe-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.equipe-metric-value {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.equipe-resumo-actions {
  margin-top: 12px;
}
.equipe-resumo-actions .btn-ghost {
  padding: 8px 12px;
  font-size: 12px;
}

/* Equipe — envios caixa (admin): declarações dos operadores por dia */
.equipe-envios-caixa {
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: linear-gradient(
    165deg,
    rgba(99, 102, 241, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 55%,
    rgba(0, 0, 0, 0.06) 100%
  );
}
.equipe-envios-caixa-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 10px;
}
.equipe-envios-caixa-title {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0;
}
.equipe-envios-caixa-desc {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 52ch;
}
.equipe-envios-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border);
}
.equipe-envios-toolbar label.equipe-envios-date-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.equipe-envios-toolbar input[type="date"] {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  min-width: 148px;
}
.equipe-envios-toolbar .equipe-envios-todas-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.equipe-envios-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.equipe-envios-stat {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
}
.equipe-envios-stat strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #6366f1);
}
.equipe-envios-table-wrap {
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: auto;
  max-height: min(42vh, 320px);
  background: var(--surface2, rgba(0, 0, 0, 0.15));
}
.equipe-envios-table-wrap .fin-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(99, 102, 241, 0.85);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.equipe-envios-table-wrap .fin-table tbody td {
  font-size: 13px;
  vertical-align: middle;
}
.equipe-envios-loading,
.equipe-envios-empty {
  text-align: center;
  padding: 16px 12px !important;
  color: var(--text-dim);
}

/* Equipe — bloco unificado: envios à caixa + comissões pagas */
.equipe-finance-admin {
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: linear-gradient(
    165deg,
    rgba(99, 102, 241, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
}
.equipe-finance-admin-head {
  margin-bottom: 14px;
}
.equipe-finance-admin-desc {
  margin-top: 6px;
  max-width: none;
}
.equipe-finance-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .equipe-finance-admin-grid {
    grid-template-columns: 1fr;
  }
}
.equipe-finance-panel {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border);
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.equipe-finance-panel-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  flex-shrink: 0;
}
.equipe-finance-hint {
  margin: 0 0 10px;
  line-height: 1.4;
  flex-shrink: 0;
}
.equipe-finance-hint--toolbar {
  margin: 0;
  max-width: none;
}
/* Alinha altura com a linha de hint do painel «Envios» (sem texto novo). */
.equipe-finance-hint-spacer {
  flex-shrink: 0;
  margin: 0 0 10px;
  min-height: 2.6em;
}
.equipe-finance-panel .equipe-envios-toolbar {
  box-sizing: border-box;
  min-height: 5.25rem;
}
.equipe-finance-toolbar--comissoes {
  align-items: center;
}
.equipe-finance-toolbar {
  margin-bottom: 10px;
  flex-shrink: 0;
}
.equipe-finance-panel > .equipe-envios-stats {
  flex-shrink: 0;
}
.equipe-finance-panel > .equipe-envios-table-wrap {
  flex: 1 1 auto;
  min-height: 200px;
}
.equipe-finance-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: auto;
  padding-top: 12px;
  flex-shrink: 0;
}
.equipe-finance-panel-actions .btn-danger,
.equipe-finance-panel-actions .btn-ghost {
  font-size: 12px;
  padding: 8px 12px;
}
.equipe-col-cb {
  width: 38px;
  text-align: center;
  vertical-align: middle;
}
.equipe-col-cb input[type="checkbox"] {
  cursor: pointer;
}

.equipe-op-card {
  display: grid;
  grid-template-columns: minmax(248px, 320px) 1fr;
  gap: 16px 20px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.equipe-op-stats {
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.22);
  background: linear-gradient(
    165deg,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 48%,
    rgba(255, 255, 255, 0.02) 100%
  );
  overflow: hidden;
}
.equipe-op-stats-body {
  cursor: pointer;
  padding: 12px 12px 10px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.equipe-op-stats-body:hover {
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2);
}
.equipe-op-stats-body:active {
  transform: translateY(0);
}
.equipe-op-stats-foot {
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(99, 102, 241, 0.14);
  background: rgba(0, 0, 0, 0.12);
}
.equipe-op-btn-edit-ficha {
  width: 100%;
  justify-content: center;
  font-size: 11px !important;
  padding: 7px 10px !important;
  border-radius: 8px;
}
@keyframes equipeOpEditPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
  35% {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}
.equipe-op-main.equipe-op-edit-pulse {
  animation: equipeOpEditPulse 1.1s ease-out 2;
  border-radius: 10px;
}
.equipe-op-name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  line-height: 1.25;
  color: var(--text);
}
.equipe-op-stats-hint {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  opacity: 0.9;
}
.equipe-op-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.equipe-op-metric {
  padding: 10px 10px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.07);
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.equipe-op-metric--gastos {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.06);
}
.equipe-op-metric--comissao {
  border-color: rgba(99, 102, 241, 0.28);
  background: rgba(99, 102, 241, 0.08);
}
.equipe-op-metric--hoje {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.07);
}
.equipe-op-metric-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 5px;
  line-height: 1.2;
}
.equipe-op-metric-value {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.equipe-op-metric-value.accent {
  font-weight: 800;
}
.equipe-op-metric-value--green {
  color: var(--green);
  font-weight: 800;
}
.equipe-op-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.equipe-op-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.equipe-op-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 12px;
}
.equipe-op-fields .form-group {
  margin: 0;
}
.equipe-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.equipe-op-fields input[type="text"],
.equipe-op-fields input[type="password"],
.equipe-op-fields input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border2);
  color: inherit;
  font-size: 13px;
  box-sizing: border-box;
}
.equipe-field-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}
.equipe-field-inline input {
  flex: 1;
  min-width: 0;
}
.equipe-field-suffix {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  flex-shrink: 0;
}
.equipe-op-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.equipe-flag-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}
.equipe-flag-label--accent {
  color: var(--accent);
  font-weight: 600;
}
.equipe-op-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Liberações do operador: colunas por aba do BOT OFFLINE (EXTRAÇÃO / JOGÁVEIS / CONTAS / FERRAMENTAS) */
.equipe-op-api-mod-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.equipe-api-mod-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.equipe-api-mod-group-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.equipe-api-mod-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 12px;
}
.equipe-tab-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  margin: 0;
}

/* Categoria de cargo no painel esquerdo do card (OPERADOR / PUBLIC USER) */
.equipe-op-categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}
.equipe-op-categoria-k {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.equipe-op-categoria-v {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.equipe-op-categoria--operador {
  border-color: rgba(99, 102, 241, 0.45);
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.06));
}
.equipe-op-categoria--operador .equipe-op-categoria-v {
  color: var(--accent);
}
.equipe-op-categoria--public {
  border-color: rgba(148, 163, 184, 0.35);
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.12), rgba(255, 255, 255, 0.04));
}
.equipe-op-categoria--public .equipe-op-categoria-v {
  color: rgba(226, 232, 240, 0.92);
}

.equipe-op-stats-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.equipe-op-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--text);
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.35), rgba(99, 102, 241, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.35);
  flex-shrink: 0;
}
.equipe-op-stats-titles {
  min-width: 0;
}
.equipe-op-stats-titles .equipe-op-name {
  margin-bottom: 2px;
}
.equipe-op-stats-titles .equipe-op-stats-hint {
  margin-bottom: 0;
}

.equipe-op-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 14px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.equipe-op-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}
.equipe-op-toolbar-left--nome {
  flex-direction: column;
  align-items: stretch;
  align-self: flex-end;
  flex: 1 1 260px;
  max-width: min(100%, 520px);
  gap: 4px;
}
.equipe-op-toolbar-left--nome .equipe-field-label {
  margin: 0;
}
.equipe-op-toolbar-left--nome input {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border2);
  color: inherit;
  font-size: 13px;
}
.equipe-op-cargo-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.equipe-op-cargo-field .equipe-op-role-label {
  display: block;
  margin-bottom: 4px;
}
.equipe-op-role-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.equipe-op-role-select {
  min-width: 140px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border2);
  color: inherit;
  font-size: 13px;
  cursor: pointer;
}
.equipe-novo-op-role {
  width: 100%;
  max-width: 220px;
}
.equipe-op-role-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.equipe-op-role-badge--op {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.28);
}
.equipe-op-role-badge--public {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
}

.equipe-op-actions--toolbar {
  justify-content: flex-end;
  flex: 1 1 200px;
}
.equipe-op-btn-secondary {
  font-size: 12px;
}
.equipe-op-btn-save {
  font-weight: 700;
  min-width: 88px;
}
.equipe-op-btn-del {
  font-size: 12px;
}

.equipe-op-permissoes {
  margin-top: 2px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.equipe-op-permissoes-sum {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 12px;
  user-select: none;
}
.equipe-op-permissoes-sum::-webkit-details-marker {
  display: none;
}
.equipe-op-permissoes-sum::after {
  content: "▾";
  float: right;
  opacity: 0.55;
  font-size: 11px;
}
.equipe-op-permissoes[open] .equipe-op-permissoes-sum::after {
  content: "▴";
}
.equipe-op-permissoes-body {
  padding: 0 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.equipe-op-meupix {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 720px) {
  .equipe-op-card {
    grid-template-columns: 1fr;
  }
  .equipe-op-actions {
    justify-content: flex-start;
  }
  .equipe-op-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .equipe-op-actions--toolbar {
    justify-content: flex-start;
  }
}

/* ── Modal Dispositivos confiáveis (TOTP / admin) ───────────────────────── */
.modal.modal-trusted-dev {
  max-width: min(720px, 94vw);
  width: 100%;
}
.modal-trusted-dev-body {
  max-height: min(75vh, 640px);
  overflow-y: auto;
  padding: 14px 18px 18px;
}
.td-dev-intro {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.td-dev-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.td-dev-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid transparent;
}
.td-dev-alert-glyph {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.td-dev-alert--urgent {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(251, 191, 36, 0.12));
  border-color: rgba(245, 158, 11, 0.55);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15), 0 4px 18px rgba(245, 158, 11, 0.12);
}
.td-dev-alert--wait {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(99, 102, 241, 0.1));
  border-color: rgba(56, 189, 248, 0.4);
  color: var(--text);
  box-shadow: 0 2px 14px rgba(56, 189, 248, 0.08);
}
.td-dev-list-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.td-dev-card {
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.td-dev-card--active {
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow: 0 2px 14px rgba(34, 197, 94, 0.08);
}
.td-dev-card--pending_admin {
  border-color: rgba(234, 179, 8, 0.4);
}
.td-dev-card--needs-admin {
  border-color: rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2), 0 4px 22px rgba(245, 158, 11, 0.14);
}
.td-dev-card--enrolling {
  border-color: rgba(148, 163, 184, 0.35);
}
.td-dev-card--enrolling-live {
  border-color: rgba(56, 189, 248, 0.5) !important;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.07), var(--surface2));
  box-shadow: 0 2px 16px rgba(56, 189, 248, 0.1);
}
.td-dev-ribbon-wrap {
  padding: 0;
  margin: 0;
}
.td-dev-ribbon {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.td-dev-ribbon--approve {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.35), rgba(251, 191, 36, 0.28));
  color: #fbbf24;
  border-bottom: 1px solid rgba(245, 158, 11, 0.45);
}
.td-dev-ribbon--wait {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.28), rgba(99, 102, 241, 0.22));
  color: #7dd3fc;
  border-bottom: 1px solid rgba(56, 189, 248, 0.4);
}
.td-dev-card--revoked {
  opacity: 0.72;
  border-color: rgba(239, 68, 68, 0.25);
}
.td-dev-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.td-dev-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.td-dev-user {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.td-dev-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.td-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.td-status--active {
  background: rgba(34, 197, 94, 0.18);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.td-status--pending {
  background: rgba(234, 179, 8, 0.16);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.35);
}
.td-status--enrolling {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.45);
}
.td-status--revoked {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.28);
}
.td-status--unknown {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.td-dev-main {
  padding: 12px 14px 14px;
}
.td-dev-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
}
.td-dev-browser {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.td-dev-browser-pill {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: var(--text);
}
.td-dev-ua {
  font-size: 11px;
  color: var(--text-dim);
}
.td-dev-ua summary {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  font-weight: 600;
  padding: 4px 0;
}
.td-dev-ua summary:hover {
  color: var(--accent);
}
.td-dev-ua-pre {
  margin: 8px 0 0;
  padding: 10px;
  font-size: 10px;
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid var(--border);
  max-height: 120px;
  overflow-y: auto;
}
.td-dev-fallback {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  word-break: break-word;
}
.td-dev-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.td-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.td-chip--tz {
  color: var(--text-dim);
}
.td-dev-meta {
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.td-dev-meta-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 12px;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 12px;
}
.td-dev-meta-row:last-child {
  margin-bottom: 0;
}
.td-dev-meta-row dt {
  margin: 0;
  font-weight: 600;
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.td-dev-meta-row dd {
  margin: 0;
  min-width: 0;
  word-break: break-word;
}
.td-code {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
}
.td-code--break {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
}
.td-muted {
  color: var(--text-dim);
  font-style: italic;
  font-size: 12px;
}
.td-dev-foot {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
}
.td-dev-hint {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px dashed rgba(56, 189, 248, 0.35);
}
.td-dev-btn {
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}
.td-dev-btn.btn-danger {
  border: 1px solid rgba(239, 68, 68, 0.45);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.12);
}
.td-dev-btn.btn-primary {
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
@keyframes td-dev-pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45), 0 2px 12px rgba(245, 158, 11, 0.2);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12), 0 4px 18px rgba(245, 158, 11, 0.35);
  }
}
.td-dev-btn--pulse {
  animation: td-dev-pulse-glow 2s ease-in-out infinite;
}
@media (max-width: 520px) {
  .td-dev-meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* VIP: modal acima de chat/widget (evita parecer que «não abre nada») */
.modal-vip-premium-opener-overlay.modal-overlay {
  z-index: 12000 !important;
}

/* VIP tab — modal "Abrir selecionadas" */
.vip-premium-modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  margin: 20px auto;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--app-glass-shadow-modal);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  animation: slideUp 0.25s ease;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: var(--text);
}
.vip-premium-title {
  font-size: 17px;
  font-weight: 700;
  padding: 20px 24px 8px;
  letter-spacing: -0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.vip-premium-title-mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 1;
}
.vip-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.vip-premium-sub {
  font-size: 13px;
  color: var(--text-dim);
  padding: 12px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vip-option-group {
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vip-option-group:last-of-type {
  border-bottom: none;
}
.vip-option-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.vip-radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* «Abrir selecionadas»: duas opções por linha (ícones transparentes no vidro) */
#modal-vip-premium-opener .vip-radio-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vip-radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
  padding: 10px 12px;
  margin: 0 -10px;
  border-radius: 10px;
  transition: background 0.15s;
  position: relative;
}
#modal-vip-premium-opener .vip-radio-item {
  margin: 0;
  min-width: 0;
}
.vip-radio-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.vip-radio-item input[type='radio'] {
  margin-top: 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
#modal-vip-premium-opener .vip-modal-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 1;
}
#modal-vip-premium-opener .vip-radio-item:hover .vip-modal-icon {
  opacity: 1;
  filter: brightness(1.06);
}
.vip-hint-box {
  margin: 0 24px 16px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
}
.vip-hint-box strong {
  color: var(--text);
  font-weight: 600;
}
.vip-premium-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.vip-btn-cancel {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.vip-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border);
}
.vip-btn-open {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
  transition: filter 0.15s, transform 0.1s;
}
.vip-btn-open:hover {
  filter: brightness(1.08);
}
.vip-btn-open:active {
  transform: translateY(1px);
}

/* Modal «Conta VIP»: glass como «Abrir selecionadas», grelha 3 colunas — sem scroll interno no corpo */
#modal-vip-account-detail .modal.modal-vip-account-glass {
  width: min(900px, 96vw);
  max-width: min(900px, 96vw) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 20px;
  box-shadow: var(--app-glass-shadow-modal) !important;
  backdrop-filter: var(--app-glass-blur) !important;
  -webkit-backdrop-filter: var(--app-glass-blur) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(94vh, 880px);
}

#modal-vip-account-detail .modal-vip-account-glass__head {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#modal-vip-account-detail .vip-detail-modal-body {
  overflow: visible;
  max-height: none;
  padding: 10px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}

#modal-vip-account-detail .vip-detail-banner.v6-info-banner {
  margin-bottom: 0;
  padding: 6px 10px;
  font-size: 10px;
  line-height: 1.35;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-left: 3px solid rgba(99, 102, 241, 0.55);
}

#modal-vip-account-detail .vip-detail-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 10px;
  align-items: end;
}

#modal-vip-account-detail .vip-detail-field-span-3 {
  grid-column: 1 / -1;
}

#modal-vip-account-detail .vip-detail-fields .form-group {
  margin: 0;
  gap: 2px;
}

#modal-vip-account-detail .vip-detail-fields .v6-label {
  margin-bottom: 1px;
  font-size: 9px;
  letter-spacing: 0.04em;
}

#modal-vip-account-detail .vip-detail-fields .input-full {
  padding: 5px 8px !important;
  font-size: 12px !important;
  border-radius: 8px;
  min-height: 0;
}

#modal-vip-account-detail .vip-detail-fields .v6-input-mono {
  font-size: 12px !important;
}

#modal-vip-account-detail .vip-detail-senha-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

#modal-vip-account-detail .vip-detail-senha-col {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#modal-vip-account-detail .vip-detail-profile.v6-footer-info {
  margin-top: 4px;
  padding-top: 6px;
  margin-bottom: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

#modal-vip-account-detail .vip-detail-profile .v6-text-dim-small {
  font-size: 10px;
  line-height: 1.3;
  word-break: break-word;
}

#modal-vip-account-detail .modal-footer.v6-modal-footer {
  flex-shrink: 0;
  margin-top: 0;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 720px) {
  #modal-vip-account-detail .vip-detail-fields {
    grid-template-columns: 1fr;
  }
  #modal-vip-account-detail .vip-detail-field-span-3 {
    grid-column: 1;
  }
}

/* Nova conta mãe — layout compacto (toolbar + grelha + detalhes) */
#modal-mae-create-card .mae-create-card-shell {
  width: min(620px, 96vw) !important;
  max-width: min(620px, 96vw) !important;
  max-height: min(92vh, 740px);
}

#modal-mae-create-card .mae-create-modal-body {
  overflow: auto;
  max-height: min(73vh, 580px);
  padding: 12px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#modal-mae-create-card .mae-create-banner.v6-info-banner {
  margin-bottom: 0;
  padding: 6px 10px;
  font-size: 10px;
  line-height: 1.35;
  border-radius: 10px;
}

#modal-mae-create-card .mae-create-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#modal-mae-create-card .btn-mae-tool {
  font-size: 11px !important;
  padding: 6px 12px !important;
  border-radius: 8px;
}

#modal-mae-create-card .mae-create-fields-main,
#modal-mae-create-card .mae-create-fields-extra {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  align-items: end;
}

#modal-mae-create-card .mae-create-field-span-all,
#modal-mae-create-card .mae-create-fields-extra .vip-detail-field-span-3 {
  grid-column: 1 / -1;
}

#modal-mae-create-card .mae-create-pix-group {
  grid-column: 1 / -1;
}

#modal-mae-create-card .mae-create-fields-main .form-group,
#modal-mae-create-card .mae-create-fields-extra .form-group {
  margin: 0;
  gap: 2px;
}

#modal-mae-create-card .mae-create-fields-main .v6-label,
#modal-mae-create-card .mae-create-fields-extra .v6-label {
  margin-bottom: 1px;
  font-size: 9px;
  letter-spacing: 0.04em;
}

#modal-mae-create-card .mae-create-login-row,
#modal-mae-create-card .mae-create-pix-row,
#modal-mae-create-card .mae-create-5sim-row,
#modal-mae-create-card .mae-create-senha-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}

#modal-mae-create-card .mae-create-senha-col {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#modal-mae-create-card .mae-create-senha-row .input-full {
  flex: 1 1 0;
  min-width: 0;
}

#modal-mae-create-card .mae-create-login-input {
  flex: 1 1 160px;
  min-width: 0;
}

#modal-mae-create-card .mae-create-pix-row .input-full {
  flex: 1 1 180px;
  min-width: 0;
}

#modal-mae-create-card .btn-mae-pix {
  flex: 0 0 auto;
  font-size: 11px !important;
  padding: 6px 10px !important;
  white-space: nowrap;
  border-radius: 8px;
}

#modal-mae-create-card .mae-create-5sim-row .input-full {
  flex: 1 1 100px;
  min-width: 0;
  font-size: 11px !important;
  padding: 5px 8px !important;
}

#modal-mae-create-card .mae-create-details {
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
  padding: 4px 10px 8px;
  background: rgba(99, 102, 241, 0.06);
}

#modal-mae-create-card .mae-create-details-summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim, #64748b);
  padding: 4px 0;
  list-style: none;
}

#modal-mae-create-card .mae-create-details-summary::-webkit-details-marker {
  display: none;
}

#modal-mae-create-card .mae-create-profile-foot {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

#modal-mae-create-card .modal-footer.v6-modal-footer {
  flex-shrink: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 520px) {
  #modal-mae-create-card .mae-create-fields-main,
  #modal-mae-create-card .mae-create-fields-extra {
    grid-template-columns: 1fr;
  }
  #modal-mae-create-card .mae-create-fields-extra .vip-detail-field-span-3 {
    grid-column: 1;
  }
  .mae-create-url-row {
    flex-wrap: wrap;
  }
  .btn-mae-save-url {
    width: 100%;
    justify-content: center;
  }
}

/* ── Título de seção do card CRIAR MÃES ── */
.mae-create-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.65);
  padding: 6px 0 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2px;
}
.mae-create-section-title:first-child { border-top: none; margin-top: 0; }

/* ── URL block destacado ── */
.mae-create-url-block {
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 12px;
  padding: 10px 12px 8px;
}
.mae-create-url-block .v6-label {
  color: rgba(165, 180, 252, 0.95) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.07em !important;
}
.mae-create-url-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.mae-create-url-row .input-full {
  flex: 1 1 0;
  min-width: 0;
  font-size: 12.5px !important;
}
.mae-create-url-hint {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.6);
  margin-top: 4px;
  line-height: 1.35;
  min-height: 1.2em;
}

/* ── Botão Salvar URL ── */
.btn-mae-save-url {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px !important;
  font-size: 11px !important;
  font-weight: 600;
  border-radius: 9px;
  background: rgba(99, 102, 241, 0.18) !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  color: rgba(165, 180, 252, 0.95) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.btn-mae-save-url:hover {
  background: rgba(99, 102, 241, 0.30) !important;
  border-color: rgba(165, 180, 252, 0.6) !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.22);
}
.btn-mae-save-url:active { transform: scale(0.97); }
.btn-mae-save-url.saved {
  background: rgba(52, 211, 153, 0.18) !important;
  border-color: rgba(52, 211, 153, 0.50) !important;
  color: rgba(110, 231, 183, 0.95) !important;
  animation: maeUrlSavePop 0.3s ease;
}
@keyframes maeUrlSavePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* OldWindows: cabeçalho do modal VIP alinhado ao vidro (não barra azul sólida) */
body.theme-oldwindows #modal-vip-account-detail .modal-vip-account-glass__head {
  background: rgba(255, 255, 255, 0.22) !important;
  border-bottom: 1px solid rgba(18, 53, 95, 0.18) !important;
}
body.theme-oldwindows #modal-vip-account-detail .modal-vip-account-glass__head h3,
body.theme-oldwindows #modal-vip-account-detail .modal-vip-account-glass__head .modal-close {
  color: var(--text) !important;
  text-shadow: none;
}

/* Nodal Helper — grelha multi-coluna para evitar scroll em viewports típicos */
#modal-topbar-nodal-mobile .modal.nodal-helper-modal {
  width: min(1040px, 98vw) !important;
  max-width: min(1040px, 98vw) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 20px;
  box-shadow: var(--app-glass-shadow-modal) !important;
  backdrop-filter: var(--app-glass-blur) !important;
  -webkit-backdrop-filter: var(--app-glass-blur) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(96vh, 920px);
}

#modal-topbar-nodal-mobile .nodal-helper-modal-head {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#modal-topbar-nodal-mobile .nodal-helper-body {
  padding: 10px 14px 10px;
  overflow: visible;
  overflow-x: hidden;
  flex: 0 1 auto;
  min-height: 0;
}

#modal-topbar-nodal-mobile .nodal-helper-command-input {
  padding: 7px 9px !important;
  font-size: 12px !important;
  margin-bottom: 6px;
}

#modal-topbar-nodal-mobile .nodal-helper-sections-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: start;
}

#modal-topbar-nodal-mobile .nodal-helper-section {
  margin-top: 0;
  min-width: 0;
}

#modal-topbar-nodal-mobile .nodal-helper-section-title--pix-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

#modal-topbar-nodal-mobile .nodal-helper-section-title--pix-row > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

#modal-topbar-nodal-mobile .nodal-helper-solicitar-chave-operador-wrap {
  flex: 0 1 auto;
  max-width: 100%;
}

#modal-topbar-nodal-mobile .nodal-helper-action--pix-solicitar {
  width: auto;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  white-space: normal;
}

#modal-topbar-nodal-mobile .nodal-helper-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, #38bdf8);
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent, #38bdf8) 55%, transparent);
  line-height: 1.2;
}

#modal-topbar-nodal-mobile .nodal-helper-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#modal-topbar-nodal-mobile .nodal-helper-action {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 6px 8px;
  min-height: 0;
  line-height: 1.25;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

#modal-topbar-nodal-mobile .nodal-helper-action:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border2));
}

#modal-topbar-nodal-mobile .nodal-helper-action:active {
  transform: translateY(1px);
}

#modal-topbar-nodal-mobile .nodal-helper-action--danger {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

#modal-topbar-nodal-mobile .nodal-helper-action--danger:hover {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.12);
}

#modal-topbar-nodal-mobile .nodal-helper-action--gold {
  border-color: rgba(234, 179, 8, 0.45);
  background: linear-gradient(135deg, rgba(113, 63, 18, 0.55), rgba(202, 138, 4, 0.35));
  color: #fef9c3;
  font-weight: 700;
}

#modal-topbar-nodal-mobile .nodal-helper-action--gold:hover {
  border-color: rgba(250, 204, 21, 0.65);
  background: linear-gradient(135deg, rgba(146, 64, 14, 0.7), rgba(234, 179, 8, 0.45));
  color: #fffbeb;
}

#modal-topbar-nodal-mobile .nodal-helper-section--local-motor {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

#modal-topbar-nodal-mobile .nodal-helper-local-hint {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim, #94a3b8);
  margin: 0 0 8px 0;
}

#modal-topbar-nodal-mobile .nodal-helper-local-hint code {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador-toggle-wrap {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 12px;
  line-height: 1.4;
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador-toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  color: inherit;
  opacity: 0.92;
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador-toggle-label input {
  margin-top: 2px;
  flex-shrink: 0;
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador {
  margin: 10px 0 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(15, 23, 42, 0.45);
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v6-blue, #38bdf8);
  margin-bottom: 8px;
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador-badge {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 10px;
  opacity: 0.85;
  color: var(--text-dim, #94a3b8);
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim, #94a3b8);
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador-steps li {
  margin-bottom: 6px;
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador-steps code {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  word-break: break-all;
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador-origin {
  margin: 10px 0 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim, #94a3b8);
}

#modal-topbar-nodal-mobile .nodal-helper-sandbox-operador-origin code {
  font-size: 10px;
  display: inline-block;
  margin-top: 4px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  word-break: break-all;
  max-width: 100%;
}

#modal-topbar-nodal-mobile .nodal-helper-local-input {
  font-size: 12px !important;
  padding: 8px 10px !important;
}

#modal-topbar-nodal-mobile .nodal-helper-local-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

#modal-topbar-nodal-mobile .nodal-helper-local-btn {
  font-size: 11px !important;
  padding: 6px 10px !important;
}

#modal-topbar-nodal-mobile .nodal-helper-footnote {
  font-size: 10px;
  color: var(--text-dim);
  margin: 8px 0 0 0;
  line-height: 1.3;
}

#modal-topbar-nodal-mobile .nodal-helper-criar-email-inline {
  margin-top: 10px;
  padding: 12px 12px 10px;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background: rgba(0, 0, 0, 0.22);
}

#modal-topbar-nodal-mobile .nodal-helper-criar-email-intro {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 10px 0;
  line-height: 1.35;
}

#modal-topbar-nodal-mobile .nodal-helper-picpay-inline {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 11px;
  font-weight: normal;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

#modal-topbar-nodal-mobile .nodal-helper-criar-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

#modal-topbar-nodal-mobile .nodal-helper-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 14px 12px;
}

@media (max-width: 900px) {
  #modal-topbar-nodal-mobile .modal.nodal-helper-modal {
    width: min(96vw, 720px) !important;
    max-width: min(96vw, 720px) !important;
  }
  #modal-topbar-nodal-mobile .nodal-helper-sections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }
}

@media (max-width: 520px) {
  #modal-topbar-nodal-mobile .modal.nodal-helper-modal {
    width: min(100vw, 100%) !important;
    max-width: 100% !important;
    max-height: 100dvh;
    border-radius: 0;
  }
  #modal-topbar-nodal-mobile .nodal-helper-sections-grid {
    grid-template-columns: 1fr;
  }
  #modal-topbar-nodal-mobile .nodal-helper-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
  }
}

body.theme-oldwindows #modal-topbar-nodal-mobile .modal.nodal-helper-modal {
  background: rgba(247, 251, 255, 0.92) !important;
  border: 1px solid rgba(18, 53, 95, 0.2) !important;
}

body.theme-oldwindows #modal-topbar-nodal-mobile .nodal-helper-modal-head {
  background: rgba(255, 255, 255, 0.35) !important;
  border-bottom: 1px solid rgba(18, 53, 95, 0.15) !important;
}

body.theme-oldwindows #modal-topbar-nodal-mobile .nodal-helper-modal-head h3,
body.theme-oldwindows #modal-topbar-nodal-mobile .nodal-helper-modal-head .modal-close {
  color: var(--text) !important;
}

/* Solicitar chave (Nodal Helper) — modal acima do overlay padrão */
#modal-solicitar-chave-nodal-helper {
  z-index: 240;
}
#modal-solicitar-chave-nh-pick-operador {
  z-index: 250;
}
.solicitar-chave-nh-operador-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.28);
  margin-bottom: 4px;
}
.solicitar-chave-nh-sep-after-op {
  margin: 14px 0 16px;
  padding: 0;
  border: none;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.solicitar-chave-nh-divider {
  margin: 14px 0 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim, #64748b);
}

.solicitar-chave-nh-add-key-bar {
  margin: 12px 0 4px;
}
#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-btn-add-key {
  width: 100%;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border-style: dashed;
}
.solicitar-chave-nh-extra-keys-block {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}
.solicitar-chave-nh-extra-keys-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.solicitar-chave-nh-extra-keys-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim, #64748b);
}
.solicitar-chave-nh-extra-keys-sub {
  opacity: 0.85;
  font-weight: 400;
  font-size: 12px;
}
#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-btn-remove-extra {
  font-size: 12px;
  padding: 6px 10px;
}

#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-intro {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 14px;
  line-height: 1.45;
}
#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 420px) {
  #modal-solicitar-chave-nodal-helper .solicitar-chave-nh-row2 {
    grid-template-columns: 1fr;
  }
}
#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-chave-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-chave-row .solicitar-chave-nh-chave-input {
  flex: 1 1 160px;
  min-width: 0;
}
#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-btn-gerar {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 8px;
}
@media (max-width: 420px) {
  #modal-solicitar-chave-nodal-helper .solicitar-chave-nh-btn-gerar {
    flex: 1 1 100%;
    width: 100%;
  }
}
#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-label-block {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
}
#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-tipo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  font-size: 13px;
  flex: 1 1 140px;
}
#modal-solicitar-chave-nodal-helper .solicitar-chave-nh-radio input {
  accent-color: var(--accent);
}

body.theme-oldwindows #modal-topbar-nodal-mobile .nodal-helper-action {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(18, 53, 95, 0.14);
  color: var(--text);
}

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:11px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
.form-group input, .form-group textarea {
  background:rgba(255,255,255,.06); border:1px solid var(--border2);
  border-radius:8px; padding:11px 14px; color:var(--text);
  font-size:14px; font-family:'Inter',sans-serif; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.form-group textarea { resize:vertical; min-height:80px; }
.hint { font-size:12px; color:var(--text-muted); }

.calc-preview {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.calc-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-dim); }
.calc-row span:last-child { font-weight:700; font-size:15px; }

/* ── DATE FILTER ────────────────────────────── */
.date-filter-group {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.btn-date {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-dim);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.btn-date:hover { background: rgba(255,255,255,.08); color: var(--text); }
.btn-date.active { background: var(--accent); color: #fff; }

.input-date {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
}
.input-date:focus { border-color: var(--accent); }
.input-date::-webkit-calendar-picker-indicator { filter: invert(.6); cursor: pointer; }

/* ── SCROLLBAR ─────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
 
/* ── PAGINATION ────────────────────────────── */
.pagination-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.01);
}
#page-info {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
 
/* ── TOAST ─────────────────────────────────── */
/* z-index acima dos modais (ex. #modal-ai-settings 100060) e da barra de sessões; bottom reservado quando há post-lobby */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:100070; display:flex; flex-direction:column-reverse; gap:8px; }
.toast {
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:10px; padding:12px 18px;
  font-size:13px; color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:toastRise .35s ease;
  max-width:300px;
}
.toast.success{ border-left:3px solid var(--green); }
.toast.error  { border-left:3px solid var(--red); }
.toast.info   { border-left:3px solid var(--accent); }

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

/* ── MOBILE RESPONSIVENESS ─────────────────── */
@media (max-width: 1024px) {
  .topbar {
    height: auto;
    min-height: 48px;
    max-height: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 6px 10px;
    gap: 8px;
  }
  .topbar-left {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
    max-width: 40%;
  }
  .topbar-center {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    overflow: visible;
  }
  .topbar-right {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
    min-width: 0;
  }
  .top-divider {
    display: block;
  }
  .main-layout {
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
  }
  .panel-activity {
    max-height: 400px;
    grid-column: unset;
  }
  .panel {
    min-height: 300px;
  }
  .panel-actions {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 8px; /* space for scrollbar */
    padding-top: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .panel-actions button, .panel-actions select {
    flex-shrink: 0;
  }
  .qr-img {
    width: 180px;
    height: 180px;
  }
}

/* --- CHAT WIDGET --- */
.chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10050;
  font-family: 'Inter', sans-serif;
}

.chat-toggle-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.chat-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.chat-box {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 350px;
  height: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-toggle-btn {
  cursor: move;
}

.chat-header {
  cursor: move;
}

.chat-header {
  background: var(--accent);
  color: white;
  padding: 15px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-online-list {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
}

.online-user-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.online-user-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.online-user-tag.online .dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.online-user-tag.offline {
  opacity: 0.5;
  border-color: transparent;
  background: rgba(255,255,255,0.02);
}
.online-user-tag.offline .dot {
  background: #555;
  box-shadow: none;
}

.online-user-tag.waiting {
  border-color: var(--yellow);
  color: var(--yellow);
}
.online-user-tag.waiting .dot {
  background: var(--yellow);
  box-shadow: 0 0 8px var(--yellow);
  animation: pulse-wait 1.5s infinite;
}
@keyframes pulse-wait {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

.conta-operador {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 10px;
  border-radius: 6px;
  margin-top: 8px !important;
  border: 1px solid var(--border);
  width: fit-content;
}

.pulse-wait-text {
  color: var(--yellow) !important;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
  animation: pulse-text 1.5s infinite;
}

@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(15, 23, 42, 0.3);
}

.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.4;
}

.chat-msg.me {
  align-self: flex-end;
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 2px;
}

.chat-msg.other {
  align-self: flex-start;
  background: var(--surface2);
  color: var(--text);
  border-bottom-left-radius: 2px;
}

.chat-sender {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--accent);
}
.chat-msg.me .chat-sender { color: #fff; opacity: 0.8; }

.chat-time {
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.6;
  text-align: right;
}

.chat-input-area {
  padding: 15px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

.chat-input-area input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
  outline: none;
  font-size: 14px;
}

.chat-input-area input:focus {
  border-color: var(--accent);
}

.chat-badge {
  background: var(--red);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .chat-toggle-btn {
    padding: 8px 12px;
    font-size: 11px;
    bottom: 10px; right: 10px;
  }
  .chat-box {
    width: calc(100vw - 40px);
    right: 0;
    bottom: 60px;
  }
}
/* ── THEME: FADAS (PAOLINHA.M) ──────────────── */
body.theme-fadas {
  --bg:         #0f051a;
  --surface:    #1e0a2e;
  --surface2:   #2a0f3d;
  --accent:     #ff2d75;
  --accent2:    #db2777;
  --green:      #b9fbc0;
  --text:       #ffeefc;
  --border:     rgba(255,45,117,.25);
  --pink-glow:  rgba(255, 45, 117, 0.5);
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255,45,117,.2) 0, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,122,236,.15) 0, transparent 60%),
    url('/static/img/fairy_bg.png');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

body.theme-fadas::before {
  content: "";
  position: fixed; inset: 0;
  background: rgba(15, 5, 26, 0.7);
  z-index: -1;
}

body.theme-fadas .panel {
  background: rgba(30, 10, 46, 0.6);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 45, 117, 0.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255,45,117,0.1);
}

body.theme-fadas .conta-card {
  background: rgba(42, 15, 61, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 45, 117, 0.2);
}

body.theme-fadas .logo-badge {
  background: linear-gradient(135deg, var(--accent), #ff75c3);
  box-shadow: 0 0 25px rgba(255,45,117,.7);
}

body.theme-fadas .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(255,45,117,.4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

body.theme-fadas .user-badge {
  background: rgba(255,45,117,.2);
  border-color: var(--accent);
  color: var(--accent);
}

/* Pink Selects, Inputs and Buttons */
body.theme-fadas select,
body.theme-fadas input:not([type="checkbox"]),
body.theme-fadas .topbar-right .btn-ghost,
body.theme-fadas .pagination-area button,
body.theme-fadas .btn-icon-s {
  border-color: rgba(255, 45, 117, 0.4) !important;
  color: #ffeefc !important;
  background: rgba(45, 15, 61, 0.4) !important;
}

body.theme-fadas select:hover,
body.theme-fadas input:not([type="checkbox"]):focus,
body.theme-fadas .pagination-area button:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px var(--pink-glow) !important;
  outline: none;
}

body.theme-fadas * {
  text-shadow: 0 0 8px rgba(255,45,117,.3);
}

/* Premium Snow Particles (Natural) */
body.theme-fadas::after {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  background-image: 
    radial-gradient(circle, #fff 1px, transparent 1px),
    radial-gradient(circle, #fff 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px);
  background-size: 250px 250px, 350px 350px, 450px 450px;
  background-position: 0 0, 30px 60px, 110px 110px;
  animation: snow-anim 30s linear infinite;
  opacity: 0.5;
  z-index: 9999;
}

@keyframes snow-anim {
  0% { transform: translateY(-250px) rotate(0deg); }
  100% { transform: translateY(250px) rotate(5deg); }
}
/* ── DROPDOWN MENU ────────────────────────── */
.dropdown { position: relative; display: inline-block; }
/* Dropdowns na topbar: acima do conteúdo e de decorações body (ex.: neve theme-fadas z-index 9999) */
.topbar .dropdown.active {
  position: relative;
  z-index: 10030;
}
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0; top: 100%;
  background: var(--surface2);
  min-width: 180px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  border-radius: 10px;
  padding: 6px 0;
  z-index: 10035;
  border: 1px solid var(--border2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  margin-top: 8px;
}
.dropdown.active .dropdown-menu { display: block; animation: dropAnim 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes dropAnim { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform: translateY(0); } }

.dropdown-menu.portal-active {
  display: block !important;
  position: fixed !important;
  z-index: 9999999 !important;
  animation: dropAnim 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Melhoria: Dropdown invertido (abrir para cima) quando necessário */
.dropdown.drop-up .dropdown-menu {
  top: auto;
  bottom: 110%;
  margin-bottom: 8px;
  margin-top: 0;
  animation: dropAnimUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dropAnimUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* Melhorado: Garante que o card com dropdown aberto fique por cima de tudo */
.conta-card:has(.dropdown.active), 
.conta-card.dropdown-open {
  z-index: 10001 !important;
  position: relative;
}

.dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  border: none; background: transparent; width: 100%; text-align: left;
}
.dropdown-item:hover { background: rgba(255,255,255,0.08); }
.dropdown-item.danger { color: var(--red); }
.dropdown-item.danger:hover { background: rgba(239,68,68,0.1); }

/* Tema Fadas - Dropdown */
body.theme-fadas .dropdown-menu {
  background: rgba(61, 27, 90, 1.0); /* Opaco para não aparecer o que está atrás */
  border-color: rgba(255,122,236,0.5);
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
body.theme-fadas .dropdown-item:hover { background: rgba(255,122,236,0.25); }

/* ── GESTÃO DE OPERADORES (MODERNO) ─────────── */
.op-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.op-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.op-card::before {
  content: "";
  position: absolute; top:0; left:0; width:4px; height:100%;
  background: var(--accent); opacity: 0; transition: opacity 0.3s;
}
.op-card:hover::before { opacity: 1; }

.op-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.op-info h4 { font-size: 16px; font-weight: 700; margin: 0; color: #fff; }
.op-info span { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }

.op-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.op-stat-item {
  background: rgba(0,0,0,0.2);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
}
.op-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.op-stat-value { font-size: 14px; font-weight: 700; color: var(--text); }
.op-stat-value.accent { color: var(--accent); }
.op-stat-value.green { color: var(--green); }

.op-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  gap: 10px;
}

.perf-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,215,0,0.15);
  color: #ffd700;
  border: 1px solid rgba(255,215,0,0.3);
}

body.theme-fadas .op-card {
  background: rgba(42, 15, 61, 0.4);
  border-color: rgba(255, 45, 117, 0.2);
}
body.theme-fadas .op-card:hover { border-color: var(--accent); }

/* DarkFairyBox Global Adjustments */
.theme-dark-fairy-box .form-group input, 
.theme-dark-fairy-box .form-group textarea,
.theme-dark-fairy-box .select-small,
.theme-dark-fairy-box .select-full,
.theme-dark-fairy-box .input-date {
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}

.theme-dark-fairy-box .form-group input:focus, 
.theme-dark-fairy-box .form-group textarea:focus,
.theme-dark-fairy-box .select-small:focus,
.theme-dark-fairy-box .select-full:focus,
.theme-dark-fairy-box .input-date:focus {
  border-color: rgba(168,85,247,0.55);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.12), 0 0 24px rgba(168,85,247,0.18);
}

.theme-dark-fairy-box .top-divider {
  background: rgba(168, 85, 247, 0.1);
}

.theme-dark-fairy-box .stat-label {
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px;
}

.theme-dark-fairy-box .modal {
  background: rgba(13, 7, 20, 0.92);
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow: var(--app-glass-shadow-modal);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
}

.theme-dark-fairy-box .modal-header {
  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
}

.theme-dark-fairy-box .modal-footer {
  border-top: 1px solid rgba(168, 85, 247, 0.1);
}

.theme-dark-fairy-box .conta-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 85, 247, 0.18);
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.theme-dark-fairy-box .conta-card:hover {
  background: rgba(168, 85, 247, 0.05);
  border-color: rgba(168, 85, 247, 0.3);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.theme-dark-fairy-box .badge-op {
  background: rgba(168, 85, 247, 0.1);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

/* DarkFairyBox Dropdown */
.theme-dark-fairy-box .dropdown-menu {
  background: rgba(13, 7, 20, 0.95);
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.theme-dark-fairy-box .dropdown-item:hover {
  background: rgba(168, 85, 247, 0.15);
  color: #fff;
}

/* ═══════════════════════════════════════════
   THEME: FADAS NASCENDO (FAIRY BORN)
   ═══════════════════════════════════════════ */
body.theme-fadas-nascendo {
  background: url('../img/fairy_born_bg.png') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
}
body.theme-fadas-nascendo .topbar {
  background: rgba(20, 10, 30, 0.4);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 45, 117, 0.3);
  box-shadow: 0 4px 30px rgba(255, 45, 117, 0.15);
}
body.theme-fadas-nascendo .panel {
  background: rgba(15, 5, 25, 0.6);
  border: 1px solid rgba(255, 45, 117, 0.2);
  -webkit-backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 0 20px rgba(255, 45, 117, 0.05);
}
body.theme-fadas-nascendo .panel-header {
  background: linear-gradient(135deg, rgba(255, 45, 117, 0.2) 0%, rgba(138, 43, 226, 0.1) 100%);
  border-bottom: 1px solid rgba(255, 45, 117, 0.2);
}
body.theme-fadas-nascendo .btn-primary {
  background: linear-gradient(135deg, #FF2D75 0%, #B829FF 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(255, 45, 117, 0.4);
}
body.theme-fadas-nascendo .btn-primary:hover {
  box-shadow: 0 6px 25px rgba(255, 45, 117, 0.6);
  transform: translateY(-2px);
}
body.theme-fadas-nascendo .dropdown-menu {
  background: rgba(20, 10, 30, 0.95);
  border: 1px solid rgba(255, 45, 117, 0.4);
  backdrop-filter: blur(20px);
}
body.theme-fadas-nascendo .dropdown-item:hover {
  background: rgba(255, 45, 117, 0.2);
}

@keyframes fairyBreathe {
  0% { box-shadow: 0 0 10px rgba(255,45,117,0.2); transform: scale(1); }
  50% { box-shadow: 0 0 20px rgba(255,45,117,0.6); transform: scale(1.05); }
  100% { box-shadow: 0 0 10px rgba(255,45,117,0.2); transform: scale(1); }
}
body.theme-fadas-nascendo #fairy-badge {
  display: inline-flex !important;
  animation: fairyBreathe 3s infinite ease-in-out;
}
/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE & NOTEBOOK
   ═══════════════════════════════════════════ */

/* ── Notebook / Small Desktop (821px - 1400px) ── */
@media (min-width: 821px) and (max-width: 1400px) {
  .main-layout {
    display: grid !important;
    grid-template-columns: 1fr 360px; /* Contas (flex) + QR Code (fixed) */
    gap: 16px;
    padding: 16px;
    align-items: start;
  }

  .sidebar { display: none; }

  /* Grid Area Assignments */
  #panel-contas,
  #panel-criacao-contas {
    grid-column: 1 / -1;
  }
  #panel-qr { grid-column: 2; height: 100%; min-height: 400px; }
  #panel-financeiro, #panel-atividade, #panel-extracao { 
    grid-column: 1 / span 2; 
  }

  /* Topbar Compression */
  .topbar {
    padding: 6px 12px;
    height: auto;
    min-height: 48px;
    max-height: none;
  }
  .topbar-center { gap: 6px; }
  .top-stat { min-width: unset; }
  .stat-label { font-size: 9px; }
  .stat-val { font-size: 13px; }

  /* Shrink Chat Button in Topbar */
  .chat-toggle-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    height: 34px !important;
  }

  /* Panel Padding Reduction */
  .panel {
    margin-bottom: 0; /* Managed by grid gap */
  }
  .panel-header {
    padding: 8px 16px;
  }
  .panel-header h2 { font-size: 14px; }
  
  .contas-list {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }

  /* Tables: denser on notebooks */
  .fin-table th, .fin-table td {
    padding: 6px 8px;
    font-size: 12px;
  }

  /* Financeiro Controls */
  .date-filter-group { gap: 4px; }
  .btn-date { padding: 4px 8px; font-size: 11px; }
  .input-date { padding: 6px 8px; font-size: 12px; }

  .modal {
    max-width: 90vw;
  }
}


/* ── Tablet / Small Desktop ≤ 820px ── */
@media (max-width: 820px) {
  /* Topbar: uma linha; stats rolam horizontalmente se precisar */
  .topbar {
    flex-direction: row;
    align-items: center;
    padding: 0 8px !important;
    gap: 6px;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
  .topbar-left {
    width: auto;
    max-width: 38%;
    flex-shrink: 0;
  }
  .topbar-center,
  .topbar-right {
    width: auto;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .topbar-center {
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
  }
  .topbar-right {
    justify-content: flex-end;
    flex-shrink: 0;
  }
  #topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
  }
  /* Stats bar */
  .top-stat { min-width: 80px; }
  .stat-val  { font-size: 14px; }

  /* Logo */
  .logo-text { font-size: 15px; }

  /* Main layout: single column */
  .main-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 12px;
    padding: 8px;
  }
  /* Pós-lobby tablet/celular: barra mais compacta */
  :root {
    --postlobby-tabbar-h: 88px;
  }
  .postlobby-layout {
    gap: 10px;
  }
  .postlobby-nav {
    gap: 4px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .postlobby-nav::-webkit-scrollbar {
    display: none;
    height: 0;
  }
  .postlobby-nav-item {
    min-width: 76px;
    max-width: 130px;
    font-size: 10px;
    padding: 8px 8px;
  }
  .postlobby-content {
    padding-bottom: calc(var(--postlobby-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:has(#postlobby-layout.postlobby-layout) .chat-widget {
    bottom: calc(var(--postlobby-tabbar-h) + 14px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    z-index: 100000;
  }
  body:has(#postlobby-layout.postlobby-layout) .spotify-music-fab-wrap {
    bottom: calc(var(--postlobby-tabbar-h) + 14px);
    z-index: 100000;
  }
  body:has(#postlobby-layout.postlobby-layout) .toast-container {
    bottom: calc(var(--postlobby-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
    right: 12px;
  }

  /* Panels */
  .panel { border-radius: 10px; }
  .panel-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }

  /* Tables: scrollable */
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fin-table { min-width: 620px; font-size: 12px; }

  /* Financeiro pagination */
  .pagination-area {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 12px;
    gap: 8px;
  }

  /* Activity / sidebar */
  .sidebar { display: none; }
  #panel-activity { display: none; }

  /* Extração grid: 2 cols on tablet */
  .extracao-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Modal */
  .modal { width: 95vw !important; max-width: 95vw !important; margin: 12px auto; max-height: min(90vh, calc(100dvh - 32px)) !important; }
  .modal-body { max-height: min(58vh, calc(100dvh - 140px)); }
  .modal.modal-equipe .modal-equipe-body {
    max-height: min(72vh, calc(100dvh - 120px));
  }
  .modal-trusted-dev-body {
    max-height: min(68vh, calc(100dvh - 140px));
  }
}

/* ── Mobile ≤ 520px ── */
@media (max-width: 520px) {
  :root {
    --postlobby-tabbar-h: 82px;
  }
  .postlobby-layout {
    gap: 8px;
  }
  .postlobby-sidebar {
    border-radius: 14px 14px 0 0;
  }
  .postlobby-nav {
    gap: 3px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .postlobby-nav-item {
    min-width: 68px;
    max-width: 108px;
    padding: 7px 4px;
    font-size: 9px;
  }
  .postlobby-content {
    padding-bottom: calc(var(--postlobby-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:has(#postlobby-layout.postlobby-layout) .chat-widget {
    bottom: calc(var(--postlobby-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
    right: 10px;
    z-index: 100000;
  }
  body:has(#postlobby-layout.postlobby-layout) .spotify-music-fab-wrap {
    bottom: calc(var(--postlobby-tabbar-h) + 12px);
    z-index: 100000;
  }
  body:has(#postlobby-layout.postlobby-layout) .toast-container {
    bottom: calc(var(--postlobby-tabbar-h) + 10px + env(safe-area-inset-bottom, 0px));
    right: 10px;
  }

  /* Topbar: uma faixa baixa; stats em scroll horizontal */
  .topbar { 
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    max-height: none !important;
    min-height: 46px;
    padding: 4px 6px; 
    gap: 4px; 
    align-items: center;
  }
  
  .topbar-left { 
    width: auto;
    max-width: 34%;
    text-align: left;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .logo-text { font-size: 13px !important; letter-spacing: 0.3px; }
  .logo-sub  { display: none; }

  .topbar-center {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 4px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .topbar.minimized .topbar-center {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .topbar:not(.minimized) #topbar-bloco-caixa {
    flex: 1 1 auto;
    min-width: 0;
  }
  .top-stat { 
    flex-direction: row !important;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0 3px !important;
    border-radius: 0;
    min-width: 0;
  }
  .topbar-center .stat-val  { font-size: 11px !important; font-weight: 800; }
  .topbar-center .stat-label { font-size: 7px !important; margin-bottom: 0 !important; }
  .top-divider { display: block !important; height: 14px !important; }

  .topbar-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
    align-items: center;
  }
  .topbar-nodal-mobile-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 14px;
  }

  #btn-waiting-qr {
    display: flex !important;
    justify-content: center;
    padding: 6px;
    font-size: 11px;
  }
  
  .ws-indicator {
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 4px;
  }

  .theme-dropdown { flex-shrink: 0; }
  .theme-btn { width: 34px !important; height: 34px !important; border-radius: 8px !important; }

  #btn-caixa, #btn-equipe, #btn-extracao, #btn-hist-qr {
      width: auto;
      justify-content: center;
  }

  .user-badge { justify-content: center; }

  .topbar-right .btn-ghost,
  .topbar-right .btn-primary,
  .topbar-right .btn-icon {
    font-size: 11px;
    padding: 5px 6px;
    height: 34px;
  }

  #btn-retrair-topbar {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px;
  }

  /* Main layout */
  .main-layout { padding: 6px; gap: 8px; }
  .panel-header h2 { font-size: 14px; }
  .panel-header { padding: 10px 12px; }

  /* Contas PIX: touch-friendly cards */
  .conta-card { padding: 10px 12px; }
  .conta-email { font-size: 12px; }
  .conta-banco { font-size: 11px; }

  /* QR area */
  .qr-img { max-width: 180px !important; }
  .qr-buttons { flex-direction: column; gap: 8px; }
  .qr-buttons button { width: 100%; height: 44px; font-size: 14px; }

  /* Financeiro */
  .df-btns { flex-wrap: wrap; gap: 6px; }
  #df-hoje,#df-ontem,#df-semana,#df-mes,#df-tudo {
    padding: 5px 10px; font-size: 11px;
  }
  #find-search { font-size: 12px; }

  /* Financial cards */
  .fin-card { padding: 10px 12px; }
  .fin-vals { font-size: 12px; gap: 8px; }
  .fin-lucro-block { font-size: 12px; }

  /* Extração: single column */
  .extracao-container {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  #panel-extracao .panel-header { flex-direction: column; align-items: flex-start; }

  /* Chat widget: posição vertical vem da regra .chat-widget acima (acima da barra de sessões) */
  .chat-box { width: 90vw !important; max-height: min(55vh, calc(100dvh - 200px)) !important; }

  /* Modais: o cartão é .modal dentro de .modal-overlay (não usar .modal como fullscreen) */
  .modal { width: 98vw !important; max-width: 98vw !important; border-radius: 10px; max-height: min(88vh, calc(100dvh - 28px)) !important; }
  .modal-body { max-height: min(52vh, calc(100dvh - 160px)); }
  .modal.modal-equipe .modal-equipe-body {
    max-height: min(64vh, calc(100dvh - 140px));
  }
  .modal-trusted-dev-body {
    max-height: min(58vh, calc(100dvh - 160px));
  }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
  .modal-footer button { flex: 1; min-width: 120px; min-height: 44px; }

  /* Forms inside modals */
  .form-row { flex-direction: column !important; }
  .form-group { width: 100% !important; }

  /* Batch launch button */
  #btn-batch-financeiro { width: 100%; }

  /* Pagination */
  .pagination-area { flex-direction: column; align-items: center; gap: 6px; }
}

/* Ocultar duplicata de nome a pedido do usuário */
#user-badge { display: none !important; }

/* =========================================================
   12. THEME: EliteSuite (Ultra Luxury & Wealth)
========================================================= */
.theme-EliteSuite {
  --bg-color: #010101;
  --surface: rgba(10, 10, 10, 0.88);
  --surface2: rgba(15, 15, 15, 0.95);
  --border: rgba(212, 175, 55, 0.3); /* Brushed Gold */
  --border2: rgba(229, 231, 235, 0.1); 
  --text: #ffffff;
  --text-dim: #999;
  
  --accent: #d4af37; /* Gold */
  --accent2: #b8860b; 
  
  --green: #2ecc71;
  --red: #e74c3c;
  --yellow: #f1c40f;
  
  --blue: #d4af37;
  --blue-dark: #b8860b;
  
  background: url('../img/elite_luxury_bg.png') center/cover no-repeat fixed !important;
}

.theme-EliteSuite .panel {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px rgba(0,0,0,0.9);
  background: rgba(10, 10, 10, 0.65);
}

.theme-EliteSuite .topbar {
  background: rgba(0, 0, 0, 1);
  border-bottom: 2px solid var(--accent);
}

.theme-EliteSuite .logo-badge {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #000;
  font-weight: 900;
}

.theme-EliteSuite .btn-primary {
  background: linear-gradient(180deg, #d4af37, #b8860b);
  color: #000;
  font-weight: 800;
  border-radius: 4px; /* More angular/formal */
}

.theme-EliteSuite .fin-card {
  background: #0a0a0a;
  border: 1px solid rgba(212, 175, 55, 0.1);
}

.theme-EliteSuite th {
  background: #000;
  color: #d4af37;
  border-bottom: 2px solid #d4af3733;
}


/* =========================================================
   11. THEME: NodalSignature (RedBull + GTA Vibe)
========================================================= */
.theme-NodalSignature {
  --bg-color: #000a1f; /* very dark blue */
  --surface: rgba(0, 10, 31, 0.85);
  --surface2: rgba(10, 25, 60, 0.75);
  --border: rgba(227, 25, 55, 0.3); /* red border */
  --border2: rgba(255, 194, 32, 0.2); /* yellow subtle */
  --text: #f0f0f0;
  --text-dim: #a0aabf;

  /* Primary buttons use Redbull Red */
  --blue: #e31937;
  --blue-dark: #b01026;

  /* Accent elements use Redbull Yellow */
  --purple: #ffc220;
  --purple-dark: #cca012;

  --green: #00ff88;
  --red: #ff3333;
  --yellow: #ffc220;
  --accent: var(--yellow);

  background: url('../img/nodal_signature_bg.png') center/cover no-repeat fixed;
}
.theme-NodalSignature .panel {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 2px solid var(--blue);
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
.theme-NodalSignature table th {
  background: rgba(227, 25, 55, 0.15); /* Redbull red hint */
  color: #fff;
  border-bottom: 2px solid var(--blue);
}
.theme-NodalSignature .fin-card {
  background: linear-gradient(135deg, rgba(10,25,60,0.8), rgba(0,10,31,0.95));
  border: 1px solid var(--border);
}
.theme-NodalSignature .badge-op {
  background: var(--blue);
  color: white;
  border: 1px solid #ffc220;
}
.theme-NodalSignature .top-nav {
  background: rgba(0, 10, 31, 0.95);
  border-bottom: 2px solid var(--blue);
}
/* Fairy Logo Style */
.theme-fadas .logo-text,
.theme-fairy .logo-text,
.theme-cinematic .logo-text {
  font-family: 'Cinzel Decorative', cursive;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #FFB6C1, #E6E6FA, #FFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 5px rgba(255,192,203,0.3));
}

/* --- HISTÓRICO OPERADOR (#modal-hist-operador) — contraste e leitura --- */
.modal.modal-hist-operador {
  max-width: min(820px, 96vw);
  width: 100%;
}
.modal-hist-operador__header {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(59, 130, 246, 0.88));
  border-bottom: none;
  border-radius: 20px 20px 0 0;
}
.modal-hist-operador__header h3 {
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.modal-hist-operador__header .modal-close {
  color: rgba(255, 255, 255, 0.85);
}
.modal-hist-operador__header .modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.modal-body--hist-op {
  gap: 22px;
  padding-top: 18px;
}
.hist-op-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hist-op-section__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hist-op-section__title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}
.hist-op-section__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 52em;
}
.hist-op-month-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.hist-op-month-filter__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}
.hist-op-month-filter__input {
  min-width: 168px;
  max-width: 100%;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 10px;
}
.hist-op-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 620px) {
  .hist-op-kpi-grid {
    grid-template-columns: 1fr;
  }
}
.hist-op-kpi {
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hist-op-kpi__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}
.hist-op-kpi__value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.hist-op-kpi--lucro {
  border-left: 4px solid #2563eb;
  background: linear-gradient(160deg, rgba(37, 99, 235, 0.16), var(--surface2));
}
.hist-op-kpi--gasto {
  border-left: 4px solid #dc2626;
  background: linear-gradient(160deg, rgba(220, 38, 38, 0.14), var(--surface2));
}
.hist-op-kpi--gasto .hist-op-kpi__value {
  color: #e11d48;
}
.hist-op-kpi--comissao {
  border-left: 4px solid #7c3aed;
  background: linear-gradient(160deg, rgba(124, 58, 237, 0.16), var(--surface2));
}
.hist-op-kpi--comissao .hist-op-kpi__value {
  color: #6366f1;
}
.hist-op-table-scroll {
  max-height: min(380px, 48vh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.premium-table--hist-op th,
.premium-table--hist-op td {
  padding: 8px 10px;
  font-size: 12px;
}
.premium-table--hist-op th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 800;
}
.premium-table--hist-op .hist-op-th-num {
  text-align: right;
}
.premium-table--hist-op td.hist-op-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.premium-table--hist-op td.hist-op-td-date {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.premium-table--hist-op td.hist-op-td-gasto {
  color: #f87171;
  font-weight: 600;
}
.premium-table--hist-op td.hist-op-td-comissao {
  color: #818cf8;
  font-weight: 700;
}
.premium-table--hist-op tbody tr:hover {
  background: rgba(99, 102, 241, 0.08);
}

/* Legado: outras telas que ainda usem .hist-summary-cards + .stat-card */
.hist-summary-cards .stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 15px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hist-summary-cards .stat-card .label { font-size: 11px; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.hist-summary-cards .stat-card .val { font-size: 18px; font-weight: 700; color: var(--text); }

/* Theme Dropdown / Brush Button */
.theme-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.theme-btn:hover {
  transform: scale(1.1) rotate(8deg);
  filter: brightness(1.2);
}

.theme-fadas .theme-btn {
  background: rgba(255, 45, 117, 0.2) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 15px var(--pink-glow);
}

.theme-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

.premium-table {
  width: 100%;
  border-collapse: collapse;
}
.premium-table th {
  text-align: left;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 2px solid var(--border);
}
.premium-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.premium-table tr:hover {
  background: rgba(255,255,255,0.02);
}

/* Polished Topbar Buttons */
.topbar-right .btn-ghost, .topbar-right .btn-icon-s {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.op-card.premium-shadow {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  padding: 24px;
}

.status-indicator.online {
  background: #2ecc71;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.perc-control-group {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.perc-input-modern {
  width: 42px;
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 14px;
  outline: none;
}

.perc-symbol {
  color: var(--accent);
  font-weight: 800;
  font-size: 12px;
}

.btn-icon-modern {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-icon-modern:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.btn-icon-modern.danger:hover {
  background: rgba(255, 77, 77, 0.2);
  border-color: #ff4d4d;
}

.op-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0;
}

.op-stat-item {
  background: rgba(0, 0, 0, 0.2);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.op-stat-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.op-stat-value {
  font-size: 18px;
  font-weight: 800;
}

/* ========================================= */
/* ELITE OPERATOR CARD STYLES                */
/* ========================================= */

.elite-card {
  background: var(--bg-light);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}
.elite-card:hover { border-color: rgba(59, 130, 246, 0.3); transform: translateY(-2px); }

.elite-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 16px;
}

.elite-info { display: flex; flex-direction: column; gap: 4px; }
.elite-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
.elite-subtitle { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }

.elite-badge {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #fbbf24;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.elite-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.elite-stat-item {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.elite-stat-label { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.elite-stat-value { font-size: 18px; font-weight: 800; }

.elite-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
}

.elite-perc-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.elite-perc-input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 8px;
  width: 50px;
  padding: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.elite-perc-symbol { color: var(--text-dim); font-size: 14px; font-weight: 700; }

.elite-btn-save {
  background: transparent;
  color: #9ca3af;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.elite-btn-save:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }

.elite-btn-delete {
  background: rgba(255, 77, 77, 0.1);
  border: 1px solid rgba(255, 77, 77, 0.2);
  color: #ff4d4d;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.elite-btn-delete:hover { background: rgba(255, 77, 77, 0.2); border-color: rgba(255, 77, 77, 0.4); }

/* Ajustes visuais mobile — Criação de Contas */
@media (max-width: 520px) {
  #panel-criacao-contas .panel-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    width: 100%;
  }

  #panel-criacao-contas .panel-actions > * {
    width: 100%;
    min-width: 0;
  }

  #panel-criacao-contas .ceo-bot-codes-wrap > div {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #panel-criacao-contas .ceo-bot-codes-wrap label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  #panel-criacao-contas .ceo-bot-codes-wrap input,
  #panel-criacao-contas .ceo-bot-codes-wrap select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #panel-criacao-contas .table-wrap,
  #panel-contas #cc-pix-financeiro-bloco .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  #panel-criacao-contas .fin-table,
  #panel-contas #cc-pix-financeiro-bloco .fin-table {
    min-width: 760px;
    font-size: 11px;
  }
}

/* ── Fix Topbar Spotify ───────────────────────────────────────────────────── */
/* Layout clássico (grid): 8 filhos. Nodal WMP usa flex no .topbar-wmp-toolbar. */
.topbar:not(.minimized) .topbar-spotify-wrap {
  width: 100%;
  max-width: 100%;
}

.topbar:not(.minimized) .topbar-spotify-bar:not(.topbar-wmp-toolbar) {
  display: grid;
  grid-template-columns: auto auto auto auto minmax(120px, 1fr) auto auto auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  padding: 4px 8px;
  background: rgba(15, 23, 42, 0.35);
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-sizing: border-box;
}

.topbar:not(.minimized) .topbar-spotify-bar.topbar-wmp-toolbar {
  width: 100%;
  box-sizing: border-box;
}

.topbar:not(.minimized) .topbar-wmp-ctrl-group {
  flex: 1 1 180px;
  max-width: min(360px, 42vw);
}

.topbar:not(.minimized) .topbar-spotify-search:not(.topbar-wmp-main-search) {
  width: 100%;
  max-width: none;
  min-width: 90px;
}

.topbar:not(.minimized) .topbar-spotify-meta,
.topbar:not(.minimized) .topbar-spotify-user {
  max-width: 100%;
}

@media (max-width: 1320px) {
  .topbar:not(.minimized) .topbar-spotify-bar:not(.topbar-wmp-toolbar) {
    grid-template-columns: auto auto auto auto minmax(100px, 1fr) auto auto auto;
    gap: 5px;
  }
  .topbar:not(.minimized) .topbar-spotify-search:not(.topbar-wmp-main-search) {
    min-width: 80px;
  }
  .topbar:not(.minimized) .topbar-spotify-select {
    max-width: 98px;
    font-size: 10px !important;
  }
  .topbar:not(.minimized) .topbar-spotify-btn {
    padding: 4px 7px !important;
    font-size: 10px !important;
  }
  #topbar-actions .theme-dropdown {
    display: none !important;
  }
}

@media (max-width: 1280px) {
  .topbar:not(.minimized) .topbar-spotify-user {
    display: none;
  }
  .topbar:not(.minimized) .topbar-spotify-bar:not(.topbar-wmp-toolbar) {
    grid-template-columns: auto auto auto minmax(100px, 1fr) auto auto auto;
  }
}

@media (max-width: 1100px) {
  .topbar:not(.minimized) .topbar-spotify-meta {
    display: none;
  }
  .topbar:not(.minimized) .topbar-spotify-bar:not(.topbar-wmp-toolbar) {
    grid-template-columns: auto auto minmax(100px, 1fr) auto auto auto;
  }
}

/* Prioriza controles Spotify quando topo fica apertado */
@media (max-width: 1450px) {
  .topbar {
    gap: 4px;
  }
  .topbar-left {
    max-width: min(220px, 24vw);
  }
  .topbar-right {
    min-width: 0;
  }
  #topbar-actions {
    gap: 6px !important;
  }
  #topbar-actions .theme-btn {
    width: 34px !important;
    height: 34px !important;
  }
  #fairy-badge {
    display: none !important;
  }
  #dropdown-acoes > .btn-ghost {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

/* Ações (tabelas criação de contas) — contraste fixo + coluna não colapsa */
/* Barra «Anterior / Próxima» é irmã abaixo do .table-wrap; sem z-index o navegador pinta
   essa barra depois da tabela e o dropdown absoluto fica por baixo do botão Próxima. */
#panel-criacao-contas .cc-bucket-block > .table-wrap,
#panel-contas .cc-after-pix-block .cc-bucket-block > .table-wrap {
  position: relative;
  z-index: 1;
}
#panel-criacao-contas .cc-bucket-block > .table-wrap + div,
#panel-contas .cc-after-pix-block .cc-bucket-block > .table-wrap + div {
  position: relative;
  z-index: 0;
}
#panel-criacao-contas .fin-table th:last-child,
#panel-criacao-contas .fin-table td:last-child,
#panel-contas .cc-after-pix-block .fin-table th:last-child,
#panel-contas .cc-after-pix-block .fin-table td:last-child {
  min-width: 56px;
  width: 1%;
  text-align: center;
  vertical-align: middle;
}
#panel-criacao-contas .fin-table td:last-child,
#panel-contas .cc-after-pix-block .fin-table td:last-child {
  overflow: visible;
}
.cc-actions-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  /* .fin-table td usa white-space: nowrap — sem isso os botões do pop ficam em linha */
  white-space: normal;
}
#panel-criacao-contas .cc-actions-menu.open,
#panel-contas #cc-pix-financeiro-bloco .cc-actions-menu.open {
  z-index: 10050;
}
.cc-actions-glyph {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.cc-actions-trigger {
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
}
/* Garante botão visível em qualquer tema (evita ícone “sumido”) */
#panel-criacao-contas .cc-actions-trigger,
#panel-contas #cc-pix-financeiro-bloco .cc-actions-trigger {
  color: #e2e8f0 !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  text-shadow: none !important;
}
#panel-criacao-contas .cc-actions-trigger:hover,
#panel-contas #cc-pix-financeiro-bloco .cc-actions-trigger:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(148, 163, 184, 0.65) !important;
}
.cc-actions-pop {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 132px;
  max-width: min(220px, 92vw);
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  /* Dentro do contexto do .cc-actions-menu.open (z-index alto no painel criação) */
  z-index: 2;
  padding: 6px;
  white-space: normal;
  box-sizing: border-box;
}
.cc-actions-menu.open .cc-actions-pop {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
/* Portal: clone em document.body (app_v2.js) — não herda overflow dos cards */
.cc-actions-pop.cc-actions-pop--floating {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  position: fixed;
  min-width: 132px;
  max-width: min(220px, 92vw);
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  z-index: 2147483000;
  padding: 6px;
  white-space: normal;
  box-sizing: border-box;
}
body.theme-fadas .cc-actions-pop.cc-actions-pop--floating,
body.theme-fadas .cc-actions-pop.cc-actions-pop--floating button {
  text-shadow: none !important;
}
.cc-actions-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: transparent;
  border: none;
  color: #e2e8f0;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-shadow: none !important;
  white-space: nowrap;
}
.cc-actions-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}
.cc-actions-item--danger {
  color: #fecaca !important;
}
.cc-actions-item--danger:hover {
  color: #fee2e2 !important;
  background: rgba(239, 68, 68, 0.22);
}
body.theme-fadas #panel-criacao-contas .cc-actions-pop,
body.theme-fadas #panel-criacao-contas .cc-actions-pop button,
body.theme-fadas #panel-contas #cc-pix-financeiro-bloco .cc-actions-pop,
body.theme-fadas #panel-contas #cc-pix-financeiro-bloco .cc-actions-pop button {
  text-shadow: none !important;
}

/* ── GLASSMOPHISM COMPATIBILITY BLINDAGEM (PRODUCTION) ── */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel, .conta-card, .modal, .wmp-glass, .dropdown-menu, .postlobby-sidebar, .calc-preview {
    background-color: var(--surface) !important;
    background-image: none !important;
  }
  .wmp-glass {
    background: #1a1f26 !important;
  }
}

/* Reforço final: bloco criação/motor só no DOM (Nodal Helper) — ganha a temas / ordem de CSS */
section#panel-criacao-contas.panel.ceo-panel.nodal-criacao-contas--helper-only,
section#panel-criacao-contas.panel.ceo-panel.ceo-panel--nested.nodal-criacao-contas--helper-only {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  pointer-events: none !important;
}

/* ── Modal Deploy Engine: download onefile BOT OFFLINE (premium HUD) ── */
.modal-overlay.modal-boi-installer-cinematic {
  position: fixed;
  z-index: 100045;
  background: radial-gradient(ellipse 130% 90% at 50% -10%, rgba(40, 80, 140, 0.22) 0%, rgba(4, 8, 18, 0.94) 48%, rgba(0, 0, 0, 0.97) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  animation: boi-cine-overlay-in 0.55s ease-out both;
}
.modal-boi-installer-cinematic .boi-cine-ambient {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.modal-boi-installer-cinematic .boi-cine-ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  animation: boi-cine-ambient-drift 22s ease-in-out infinite;
}
.modal-boi-installer-cinematic .boi-cine-ambient-blob--a {
  width: min(55vw, 420px);
  height: min(55vw, 420px);
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, rgba(80, 140, 220, 0.35) 0%, transparent 68%);
  animation-delay: 0s;
}
.modal-boi-installer-cinematic .boi-cine-ambient-blob--b {
  width: min(50vw, 380px);
  height: min(50vw, 380px);
  bottom: -18%;
  right: -12%;
  background: radial-gradient(circle, rgba(60, 100, 180, 0.28) 0%, transparent 70%);
  animation-delay: -11s;
  animation-duration: 26s;
}
.modal-boi-installer-cinematic .boi-cine-ambient-noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: boi-cine-noise-flicker 8s steps(4) infinite;
}
@keyframes boi-cine-ambient-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(2%, 3%) scale(1.04); }
  66% { transform: translate(-2%, 1%) scale(0.98); }
}
@keyframes boi-cine-noise-flicker {
  0%, 100% { opacity: 0.035; }
  50% { opacity: 0.055; }
}
@keyframes boi-cine-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-boi-installer-cinematic .boi-cine-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 472px;
  margin: 0 auto;
  padding: 32px 30px 30px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(16, 22, 36, 0.99) 0%, rgba(6, 8, 16, 0.995) 42%, rgba(2, 4, 10, 1) 100%);
  border: 1px solid rgba(130, 170, 255, 0.16);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 100px rgba(48, 110, 200, 0.1),
    0 36px 110px rgba(0, 0, 0, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
  animation: boi-cine-card-in 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.modal-boi-installer-cinematic .boi-cine-corner-accents {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.modal-boi-installer-cinematic .boi-cine-corner-accents span {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: rgba(140, 180, 255, 0.22);
  border-style: solid;
  border-width: 0;
}
.modal-boi-installer-cinematic .boi-cine-corner-accents span:nth-child(1) {
  top: 12px;
  left: 12px;
  border-top-width: 1px;
  border-left-width: 1px;
  border-radius: 4px 0 0 0;
}
.modal-boi-installer-cinematic .boi-cine-corner-accents span:nth-child(2) {
  top: 12px;
  right: 12px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-radius: 0 4px 0 0;
}
.modal-boi-installer-cinematic .boi-cine-corner-accents span:nth-child(3) {
  bottom: 12px;
  left: 12px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-radius: 0 0 0 4px;
}
.modal-boi-installer-cinematic .boi-cine-corner-accents span:nth-child(4) {
  bottom: 12px;
  right: 12px;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-radius: 0 0 4px 0;
}
.modal-boi-installer-cinematic .boi-cine-hud-grid {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(120, 170, 255, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 170, 255, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 85% 72% at 50% 32%, black 0%, transparent 78%);
  animation: boi-cine-grid-breathe 14s ease-in-out infinite;
}
@keyframes boi-cine-grid-breathe {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.24; }
}
.modal-boi-installer-cinematic .boi-cine-scanline {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  opacity: 0.35;
  mix-blend-mode: overlay;
}
@keyframes boi-cine-card-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(16px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}
.modal-boi-installer-cinematic .boi-cine-vignette {
  pointer-events: none;
  position: absolute;
  inset: -40%;
  background: radial-gradient(ellipse at 50% 0%, rgba(91, 140, 255, 0.18) 0%, transparent 55%);
  opacity: 0.9;
}
.modal-boi-installer-cinematic .boi-cine-shine {
  pointer-events: none;
  position: absolute;
  top: -50%;
  left: -30%;
  width: 80%;
  height: 100%;
  background: linear-gradient(125deg, transparent 0%, rgba(255, 255, 255, 0.04) 45%, transparent 70%);
  transform: rotate(-12deg);
}
.modal-boi-installer-cinematic .boi-cine-kicker {
  position: relative;
  z-index: 3;
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(165, 200, 255, 0.9);
}
.modal-boi-installer-cinematic .boi-cine-kicker-sep {
  opacity: 0.45;
  padding: 0 0.15em;
}
.modal-boi-installer-cinematic .boi-cine-title {
  position: relative;
  z-index: 3;
  margin: 0 0 12px;
  font-size: 1.32rem;
  font-weight: 650;
  letter-spacing: 0.025em;
  line-height: 1.28;
  color: #eef3fc;
  text-shadow: 0 2px 32px rgba(70, 130, 220, 0.22), 0 2px 24px rgba(0, 0, 0, 0.48);
}
.modal-boi-installer-cinematic .boi-cine-sub {
  position: relative;
  z-index: 3;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(212, 220, 235, 0.76);
}
.modal-boi-installer-cinematic .boi-cine-code {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(120, 160, 255, 0.22);
  color: rgba(186, 210, 255, 0.95);
}
/* Hero loader HUD + anéis */
.modal-boi-installer-cinematic .boi-cine-hero {
  position: relative;
  z-index: 3;
  margin: 8px 0 4px;
  min-height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-boi-installer-cinematic .boi-cine-hud-arc {
  pointer-events: none;
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  border-radius: 100px 100px 0 0;
  border: 1px solid transparent;
  border-top-color: rgba(120, 170, 255, 0.14);
  border-left-color: rgba(120, 170, 255, 0.06);
  border-right-color: rgba(120, 170, 255, 0.06);
  opacity: 0.65;
  box-shadow: 0 -8px 32px rgba(60, 120, 200, 0.08);
  animation: boi-cine-arc-glow 5s ease-in-out infinite;
}
@keyframes boi-cine-arc-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.75; }
}
.modal-boi-installer-cinematic .boi-cine-loader-wrap {
  position: relative;
  width: 138px;
  height: 138px;
  margin: 18px auto 0;
}
.modal-boi-installer-cinematic .boi-cine-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(130, 175, 255, 0.52);
  border-right-color: rgba(130, 175, 255, 0.1);
  box-shadow: 0 0 28px rgba(80, 140, 255, 0.14);
}
.modal-boi-installer-cinematic .boi-cine-orbit--outer {
  inset: -10px;
  border-style: dashed;
  border-top-color: rgba(110, 160, 230, 0.22);
  border-right-color: rgba(110, 160, 230, 0.08);
  animation: boi-cine-spin 9.5s linear infinite;
  opacity: 0.55;
}
.modal-boi-installer-cinematic .boi-cine-orbit--slow {
  inset: 2px;
  animation: boi-cine-spin 4.4s linear infinite;
  opacity: 0.88;
}
.modal-boi-installer-cinematic .boi-cine-orbit--mid {
  inset: 16px;
  border-top-color: rgba(160, 200, 255, 0.42);
  animation: boi-cine-spin 2.75s linear infinite reverse;
  opacity: 0.78;
}
.modal-boi-installer-cinematic .boi-cine-orbit--fast {
  inset: 30px;
  border-top-color: rgba(200, 220, 255, 0.62);
  animation: boi-cine-spin 1.05s linear infinite;
  opacity: 0.92;
}
.modal-boi-installer-cinematic .boi-cine-particles {
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.modal-boi-installer-cinematic .boi-cine-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(200, 220, 255, 0.5);
  box-shadow: 0 0 6px rgba(160, 200, 255, 0.45);
  animation: boi-cine-particle 3.2s ease-in-out infinite;
}
.modal-boi-installer-cinematic .boi-cine-particle:nth-child(1) {
  top: 12%;
  left: 22%;
  animation-delay: 0s;
}
.modal-boi-installer-cinematic .boi-cine-particle:nth-child(2) {
  top: 24%;
  right: 14%;
  animation-delay: 0.7s;
}
.modal-boi-installer-cinematic .boi-cine-particle:nth-child(3) {
  bottom: 20%;
  left: 18%;
  animation-delay: 1.4s;
}
.modal-boi-installer-cinematic .boi-cine-particle:nth-child(4) {
  bottom: 14%;
  right: 22%;
  animation-delay: 2.1s;
}
@keyframes boi-cine-particle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.95; transform: scale(1.15); }
}
.modal-boi-installer-cinematic .boi-cine-core-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(210, 230, 255, 0.38), rgba(60, 120, 220, 0.12) 58%, transparent 72%);
  animation: boi-cine-core-pulse 2.5s ease-in-out infinite;
}
.modal-boi-installer-cinematic .boi-cine-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0f6ff, rgba(110, 160, 255, 0.9));
  box-shadow:
    0 0 22px rgba(150, 190, 255, 0.7),
    inset 0 0 9px rgba(255, 255, 255, 0.38);
}
@keyframes boi-cine-core-pulse {
  0%, 100% { transform: scale(1); opacity: 0.88; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes boi-cine-spin {
  to { transform: rotate(360deg); }
}
/* Progresso estimado + fase */
.modal-boi-installer-cinematic .boi-cine-progress-section {
  position: relative;
  z-index: 3;
  margin-top: 10px;
}
.modal-boi-installer-cinematic .boi-cine-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.modal-boi-installer-cinematic .boi-cine-progress-est {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(155, 185, 225, 0.55);
}
.modal-boi-installer-cinematic .boi-cine-phase {
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(186, 215, 255, 0.88);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(120, 165, 230, 0.22);
  background: rgba(0, 12, 32, 0.45);
  box-shadow: 0 0 20px rgba(80, 140, 220, 0.12);
  max-width: 100%;
  text-align: center;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.modal-boi-installer-cinematic .boi-cine-progress-block {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 0;
  margin-bottom: 0;
}
.modal-boi-installer-cinematic .boi-cine-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(120, 160, 255, 0.16);
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}
.modal-boi-installer-cinematic .boi-cine-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(70, 130, 210, 0.9),
    rgba(150, 205, 255, 0.98) 45%,
    rgba(110, 175, 240, 0.92) 100%
  );
  box-shadow: 0 0 16px rgba(130, 185, 255, 0.42);
  transition: width 0.42s cubic-bezier(0.25, 0.85, 0.35, 1);
  position: relative;
}
.modal-boi-installer-cinematic .boi-cine-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 100%
  );
  animation: boi-cine-fill-sheen 2.8s ease-in-out infinite;
  opacity: 0.7;
}
@keyframes boi-cine-fill-sheen {
  0%, 100% { transform: translateX(-60%); }
  50% { transform: translateX(60%); }
}
.modal-boi-installer-cinematic .boi-cine-progress-pct {
  min-width: 46px;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(200, 225, 255, 0.98);
  text-shadow: 0 0 16px rgba(100, 160, 255, 0.4);
  text-align: right;
}
.modal-boi-installer-cinematic .boi-cine-pct-suffix {
  font-size: 0.72em;
  opacity: 0.75;
  margin-left: 1px;
}
.modal-boi-installer-cinematic .boi-cine-status {
  position: relative;
  z-index: 3;
  margin: 16px 0 0;
  min-height: 2.85em;
  font-size: 12.5px;
  line-height: 1.48;
  color: rgba(205, 218, 238, 0.9);
  letter-spacing: 0.018em;
  transition: opacity 0.28s ease;
}
.modal-boi-installer-cinematic .boi-cine-footer {
  position: relative;
  z-index: 3;
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(155, 178, 210, 0.62);
  font-style: italic;
  letter-spacing: 0.035em;
  transition: opacity 0.38s ease;
}
@media (max-width: 520px) {
  .modal-boi-installer-cinematic .boi-cine-card {
    max-width: calc(100vw - 28px);
    padding: 26px 20px 24px;
  }
  .modal-boi-installer-cinematic .boi-cine-title {
    font-size: 1.14rem;
  }
  .modal-boi-installer-cinematic .boi-cine-hero {
    min-height: 148px;
  }
  .modal-boi-installer-cinematic .boi-cine-hud-arc {
    width: 170px;
    margin-left: -85px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal-boi-installer-cinematic .boi-cine-ambient-blob,
  .modal-boi-installer-cinematic .boi-cine-hud-grid,
  .modal-boi-installer-cinematic .boi-cine-orbit,
  .modal-boi-installer-cinematic .boi-cine-particle,
  .modal-boi-installer-cinematic .boi-cine-core-glow,
  .modal-boi-installer-cinematic .boi-cine-progress-fill::after {
    animation: none !important;
  }
  .modal-boi-installer-cinematic .boi-cine-progress-fill {
    transition: width 0.2s ease;
  }
}

/* --- PROGRESSO DA IMPORTAÇÃO (TOPBAR) --- */
#topbarImportProgress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.88) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 4px 12px rgba(8, 47, 73, 0.4);
  white-space: nowrap;
  animation: topbar-import-enter 300ms ease-out both;
}
.topbar-import-text {
  font-size: 10px;
  font-weight: 700;
  color: rgba(130, 200, 255, 0.95);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.topbar-import-bar-bg {
  width: 80px;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.topbar-import-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.topbar-import-bar-fill.failed {
  background: linear-gradient(90deg, #991b1b, #ef4444);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.topbar-import-bar-fill.success {
  background: linear-gradient(90deg, #166534, #22c55e);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.topbar-import-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #e2e8f0;
}
.topbar-import-sep {
  color: rgba(255, 255, 255, 0.2);
}
@keyframes topbar-import-enter {
  from { opacity: 0; transform: translateY(-5px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Modal global: PIX e chaves (#modalPix) ---
   z-index acima da topbar (10020) e da taskbar inferior .postlobby-sidebar (100000),
   senão o overlay fica «por baixo» e o painel parece ancorado ao fundo. */
#modalPix.nodal-modal {
  position: fixed;
  inset: 0;
  z-index: 100055;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  isolation: isolate;
}

#modalPix.nodal-modal.hidden {
  display: none !important;
}

#modalPix .nodal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#modalPix .nodal-modal-content {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  max-height: min(85vh, calc(100dvh - 24px));
  overflow: auto;
  background: #0f172a;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

#modalPix .nodal-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
  color: #e2e8f0;
  flex-shrink: 0;
}

#modalPix .nodal-modal-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 8px;
}

#modalPix .nodal-modal-close:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}

#modalPix .nodal-modal-body {
  min-height: 0;
}

#modalPixBody #panel-contas {
  margin: 0;
  max-width: none;
  position: relative;
}

/* NODAL VIEW — navegação no modo foco e remoção definitiva do placeholder */
.nodal-view-card.has-frame .nodal-view-empty,
.nodal-view-empty[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.nodal-view-focus__bar {
  display: grid !important;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
}

.nodal-view-focus__navigation {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(140px, 1fr) minmax(110px, auto);
  align-items: center;
  gap: 12px;
}

.nodal-view-focus__title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.nodal-view-focus__title-wrap strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#nodal-view-focus-counter {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(226, 232, 240, .62);
}

.nodal-view-focus__nav {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid rgba(96, 165, 250, .42);
  background: linear-gradient(180deg, rgba(30, 64, 175, .34), rgba(15, 23, 42, .68));
  color: #eff6ff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.nodal-view-focus__nav:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, .78);
  background: linear-gradient(180deg, rgba(37, 99, 235, .5), rgba(15, 23, 42, .82));
}

.nodal-view-focus__nav:active:not(:disabled) {
  transform: translateY(0);
}

.nodal-view-focus__nav:disabled {
  opacity: .35;
  cursor: default;
}

@media (max-width: 760px) {
  .nodal-view-focus__bar {
    grid-template-columns: auto 1fr auto;
    gap: 7px;
  }
  .nodal-view-focus__back {
    font-size: 0 !important;
    width: 38px;
    min-width: 38px;
    padding: 0 !important;
  }
  .nodal-view-focus__back::before {
    content: '←';
    font-size: 18px;
  }
  .nodal-view-focus__navigation {
    grid-template-columns: 42px minmax(90px, 1fr) 42px;
    gap: 6px;
  }
  .nodal-view-focus__nav {
    min-width: 42px;
    width: 42px;
    padding: 0;
    font-size: 0;
  }
  #nodal-view-focus-prev::before { content: '←'; font-size: 19px; }
  #nodal-view-focus-next::before { content: '→'; font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════════
   NODAL VOICE V2 — layout compacto, participantes em destaque
   ═══════════════════════════════════════════════════════════════ */
#nodal-voice-panel.nodal-voice-v2 {
  padding: 24px !important;
  border: 1px solid rgba(124, 92, 255, .34) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(103, 74, 255, .12), transparent 38%),
    linear-gradient(145deg, rgba(8, 13, 29, .97), rgba(10, 17, 36, .95)) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.035);
  overflow: hidden;
}
.nodal-voice-v2 .nodal-voice-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 20px;
  align-items: stretch;
}
.nodal-voice-v2 .nodal-voice-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nodal-voice-v2 .nodal-voice-hero--v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 0 2px 14px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}
.nodal-voice-v2 .nodal-voice-hero__identity { display:flex;align-items:center;gap:14px;min-width:0; }
.nodal-voice-v2 .nodal-voice-logo {
  width: 48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:23px;
  color:#fff;background:linear-gradient(145deg,#7147ff,#4b2bc7);
  border:1px solid rgba(174,150,255,.55);box-shadow:0 10px 24px rgba(91,51,214,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.nodal-voice-v2 .nodal-voice-kicker { display:block;font-size:9px;font-weight:800;letter-spacing:.17em;color:#a98bff;text-transform:uppercase;margin-bottom:5px; }
.nodal-voice-v2 .nodal-voice-hero h3 { margin:0;color:#f6f7ff;font-size:24px;line-height:1.05;letter-spacing:-.025em; }
.nodal-voice-v2 .nodal-voice-hero p { margin:5px 0 0;color:rgba(205,214,235,.58);font-size:12px; }
.nodal-voice-v2 .nodal-voice-live-card {
  flex:0 0 auto;display:flex;align-items:center;gap:10px;min-width:136px;padding:11px 14px;border-radius:13px;
  background:rgba(7,12,27,.72);border:1px solid rgba(104,130,195,.22);
}
.nodal-voice-live-dot { width:8px;height:8px;border-radius:50%;background:#64748b;box-shadow:0 0 0 4px rgba(100,116,139,.1);flex:none; }
.nodal-voice-v2 .nodal-voice-status { display:block;font-size:10px;font-weight:850;letter-spacing:.09em;color:#b2bed5; }
.nodal-voice-v2 .nodal-voice-status.is-online { color:#5ef0ac; }
.nodal-voice-v2 .nodal-voice-status.is-online ~ * {}
.nodal-voice-v2 .nodal-voice-live-card:has(.nodal-voice-status.is-online) .nodal-voice-live-dot { background:#4df5a3;box-shadow:0 0 0 4px rgba(77,245,163,.1),0 0 15px rgba(77,245,163,.65); }
.nodal-voice-v2 .nodal-voice-count { display:block;margin-top:3px;font-size:10px;color:rgba(175,188,216,.48); }
.nodal-voice-v2 .nodal-voice-channel-card {
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(18,26,51,.64);border:1px solid rgba(111,89,227,.2);
}
.nodal-voice-v2 .nodal-voice-channel-card__icon { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:900;color:#bdaaff;background:rgba(108,72,220,.18);border:1px solid rgba(137,105,242,.24); }
.nodal-voice-v2 .nodal-voice-channel-card__body { min-width:0;display:flex;flex-direction:column;gap:2px; }
.nodal-voice-v2 .nodal-voice-channel-card__body span { font-size:8px;font-weight:800;letter-spacing:.13em;color:rgba(171,183,211,.45); }
.nodal-voice-v2 .nodal-voice-channel-card__body strong { font-size:13px;color:#edf1ff;text-transform:capitalize; }
.nodal-voice-v2 .nodal-voice-channel-card__privacy { margin-left:auto;padding:4px 7px;border-radius:6px;background:rgba(255,255,255,.04);font-size:8px;font-weight:800;letter-spacing:.1em;color:rgba(183,194,219,.48); }
.nodal-voice-v2 .nodal-voice-control-card { padding:0; }
.nodal-voice-v2 .nodal-voice-controls--v2 { display:grid !important;grid-template-columns:minmax(150px,1.4fr) repeat(4,minmax(90px,1fr));gap:9px !important;margin:0 !important; }
.nodal-voice-v2 .nodal-voice-control {
  min-height:64px;padding:10px 8px;border-radius:13px;border:1px solid rgba(119,135,177,.18);background:rgba(17,25,48,.8);color:#dce4f7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:10px;font-weight:700;cursor:pointer;transition:.18s ease;
}
.nodal-voice-v2 .nodal-voice-control:hover:not(:disabled) { transform:translateY(-1px);border-color:rgba(143,116,255,.45);background:rgba(29,38,69,.94); }
.nodal-voice-v2 .nodal-voice-control:disabled { opacity:.35;cursor:not-allowed;filter:saturate(.5); }
.nodal-voice-v2 .nodal-voice-control__icon { font-size:18px;line-height:1; }
.nodal-voice-v2 .nodal-voice-control--join { background:linear-gradient(155deg,#378ff4,#246bc8);border-color:rgba(111,184,255,.68);color:#fff;box-shadow:0 10px 24px rgba(35,116,211,.22); }
.nodal-voice-v2 .nodal-voice-control--danger:not(:disabled) { color:#ffb8c5;border-color:rgba(255,91,121,.25);background:rgba(100,27,47,.25); }
.nodal-voice-v2 .nodal-voice-control.is-active { color:#d9ccff;border-color:rgba(151,112,255,.62);background:rgba(108,65,224,.2);box-shadow:inset 0 0 0 1px rgba(150,117,255,.1); }
.nodal-voice-v2 .nodal-voice-control.is-talking { box-shadow:0 0 0 3px rgba(77,245,163,.13),0 0 24px rgba(77,245,163,.22);border-color:#4df5a3; }
.nodal-voice-v2 .nodal-voice-sidebar {
  min-width:0;padding:17px;border-radius:17px;background:rgba(7,12,27,.66);border:1px solid rgba(113,92,224,.24);display:flex;flex-direction:column;
}
.nodal-voice-v2 .nodal-voice-participants-head { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 1px 13px;border-bottom:1px solid rgba(255,255,255,.07); }
.nodal-voice-v2 .nodal-voice-participants-head strong { display:block;font-size:15px;color:#f2f4ff; }
.nodal-voice-v2 .nodal-voice-participants-badge { min-width:26px;height:26px;padding:0 7px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#cdbfff;background:rgba(108,72,220,.18);border:1px solid rgba(137,105,242,.25); }
.nodal-voice-v2 .nodal-voice-participants { display:flex;flex-direction:column;gap:8px;padding:13px 0;min-height:185px; }
.nodal-voice-v2 .nodal-voice-person { display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;background:rgba(20,29,53,.62);border:1px solid transparent;transition:.18s ease; }
.nodal-voice-v2 .nodal-voice-person.is-speaking { border-color:rgba(65,237,160,.48);background:rgba(19,55,50,.48);box-shadow:0 0 22px rgba(65,237,160,.08); }
.nodal-voice-v2 .nodal-voice-avatar { position:relative;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#4c3f71,#2a2341);color:#f5efff;font-size:11px;font-weight:850;letter-spacing:.02em; }
.nodal-voice-v2 .nodal-voice-avatar i { position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:#8793aa;border:2px solid #0e162b; }
.nodal-voice-v2 .is-speaking .nodal-voice-avatar i { background:#4df5a3;box-shadow:0 0 9px rgba(77,245,163,.75); }
.nodal-voice-v2 .is-muted .nodal-voice-avatar i { background:#ff526f; }
.nodal-voice-v2 .nodal-voice-person__body { min-width:0;display:flex;flex-direction:column;gap:3px; }
.nodal-voice-v2 .nodal-voice-person__name { color:#eaf0ff;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.nodal-voice-v2 .nodal-voice-person__name em { margin-left:5px;padding:2px 5px;border-radius:5px;background:rgba(116,89,229,.18);color:#bba8ff;font-size:7px;font-style:normal;text-transform:uppercase;letter-spacing:.07em; }
.nodal-voice-v2 .nodal-voice-person__state { color:rgba(181,194,221,.5);font-size:9px; }
.nodal-voice-v2 .nodal-voice-person__state-icon { margin-left:auto;color:rgba(183,195,221,.55);font-size:11px; }
.nodal-voice-v2 .is-speaking .nodal-voice-person__state,.nodal-voice-v2 .is-speaking .nodal-voice-person__state-icon { color:#62efb0; }
.nodal-voice-v2 .nodal-voice-sidebar-note { margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:8px;font-size:8px;line-height:1.5;color:rgba(171,184,211,.36); }
.nodal-voice-v2 .nodal-voice-sidebar-note .nodal-voice-live-dot { width:6px;height:6px;background:#4df5a3;box-shadow:0 0 8px rgba(77,245,163,.55); }
.nodal-voice-v2 .nodal-voice-invites { padding:16px !important;border-radius:16px !important;background:rgba(12,19,39,.72) !important;border:1px solid rgba(112,89,224,.2) !important;margin:0 !important; }
.nodal-voice-v2 .nodal-voice-invites__head { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:13px; }
.nodal-voice-v2 .nodal-voice-invites__head h4 { margin:0;color:#eef2ff;font-size:14px; }
.nodal-voice-v2 .nodal-voice-invites__head p { margin:4px 0 0;color:rgba(184,197,224,.48);font-size:10px; }
.nodal-voice-action-primary,.nodal-voice-action-secondary,.nodal-voice-revoke { border-radius:9px;font:inherit;font-size:9px;font-weight:800;cursor:pointer;transition:.16s ease; }
.nodal-voice-action-primary { padding:9px 12px;color:#fff;background:linear-gradient(145deg,#479cf4,#2776cf);border:1px solid rgba(119,190,255,.58); }
.nodal-voice-action-secondary { padding:9px 12px;color:#cbd5e8;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1); }
.nodal-voice-v2 .nodal-voice-invite-form { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto auto;align-items:end;gap:9px;padding:12px;margin-bottom:12px;border-radius:12px;background:rgba(5,10,24,.55);border:1px solid rgba(255,255,255,.07); }
.nodal-voice-v2 .nodal-voice-invite-form[hidden] { display:none !important; }
.nodal-voice-v2 .nodal-voice-invite-form label { display:flex;flex-direction:column;gap:5px;font-size:8px;font-weight:700;color:rgba(188,200,225,.55);text-transform:uppercase;letter-spacing:.06em; }
.nodal-voice-v2 .nodal-voice-invite-form select,.nodal-voice-v2 .nodal-voice-invite-form input,.nodal-voice-v2 .nodal-voice-invite-result input { min-width:0;padding:9px 10px;border-radius:8px;border:1px solid rgba(124,139,177,.18);background:#0c1428;color:#e8edfa;font:inherit;font-size:10px; }
.nodal-voice-v2 .nodal-voice-invite-check { flex-direction:row !important;align-items:center;padding-bottom:9px;white-space:nowrap; }
.nodal-voice-v2 .nodal-voice-invite-result { display:flex;gap:8px;margin-bottom:11px; }
.nodal-voice-v2 .nodal-voice-invite-result[hidden] { display:none !important; }
.nodal-voice-v2 .nodal-voice-invite-result input { flex:1; }
.nodal-voice-v2 .nodal-voice-invite-list { display:flex;flex-direction:column;gap:7px; }
.nodal-voice-v2 .nodal-voice-invite-section-title { display:flex;align-items:center;gap:7px;color:rgba(198,209,232,.58);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.09em;margin:1px 0 3px; }
.nodal-voice-v2 .nodal-voice-invite-section-title b { min-width:18px;height:18px;border-radius:6px;display:grid;place-items:center;background:rgba(106,76,218,.18);color:#bca9ff;font-size:8px; }
.nodal-voice-v2 .nodal-voice-invite-row { display:grid;grid-template-columns:31px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;background:rgba(8,14,29,.62);border:1px solid rgba(255,255,255,.055); }
.nodal-voice-v2 .nodal-voice-invite-row__icon { width:29px;height:29px;border-radius:9px;display:grid;place-items:center;color:#75eeb4;background:rgba(50,191,125,.1);font-weight:800; }
.nodal-voice-v2 .nodal-voice-invite-row__body,.nodal-voice-v2 .nodal-voice-invite-row__meta { display:flex;flex-direction:column;gap:2px;min-width:0; }
.nodal-voice-v2 .nodal-voice-invite-row__body strong { color:#dfe6f8;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize; }
.nodal-voice-v2 .nodal-voice-invite-row small { color:rgba(176,189,216,.38);font-size:8px; }
.nodal-voice-v2 .nodal-voice-invite-row__meta { align-items:flex-end; }
.nodal-voice-v2 .nodal-voice-invite-badge { color:#65efaf;font-size:7px;font-weight:850;letter-spacing:.07em; }
.nodal-voice-v2 .nodal-voice-invite-row.is-inactive { opacity:.46; }
.nodal-voice-v2 .nodal-voice-invite-row.is-inactive .nodal-voice-invite-badge { color:#d294a6; }
.nodal-voice-revoke { padding:7px 9px;border:1px solid rgba(255,103,129,.2);background:rgba(107,31,50,.18);color:#ec9caf; }
.nodal-voice-revoke:hover { border-color:rgba(255,103,129,.45);background:rgba(107,31,50,.34); }
.nodal-voice-v2 .nodal-voice-invite-history { margin-top:5px;border-top:1px solid rgba(255,255,255,.055);padding-top:7px; }
.nodal-voice-v2 .nodal-voice-invite-history summary { display:flex;align-items:center;justify-content:space-between;padding:7px 3px;color:rgba(184,197,222,.5);font-size:9px;font-weight:700;cursor:pointer;list-style:none; }
.nodal-voice-v2 .nodal-voice-invite-history summary::-webkit-details-marker { display:none; }
.nodal-voice-v2 .nodal-voice-invite-history summary::before { content:'›';margin-right:7px;transition:transform .15s ease; }
.nodal-voice-v2 .nodal-voice-invite-history[open] summary::before { transform:rotate(90deg); }
.nodal-voice-v2 .nodal-voice-invite-history summary span { margin-left:auto;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.04); }
.nodal-voice-v2 .nodal-voice-invite-history__list { display:flex;flex-direction:column;gap:6px;padding-top:4px; }
.nodal-voice-v2 .nodal-voice-empty { padding:18px;border-radius:12px;text-align:center;color:rgba(183,196,222,.42);font-size:10px;background:rgba(5,10,23,.34);border:1px dashed rgba(134,149,183,.13); }
.nodal-voice-v2 .nodal-voice-empty--participants { min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; }
.nodal-voice-v2 .nodal-voice-empty--participants span { font-size:22px;opacity:.45; }
.nodal-voice-v2 .nodal-voice-empty--participants strong { color:rgba(215,224,241,.62);font-size:11px; }
.nodal-voice-v2 .nodal-voice-empty--participants small { color:rgba(173,187,214,.35);font-size:8px; }
.nodal-voice-v2 .nodal-voice-empty--compact { padding:11px; }
@media (max-width: 1080px) {
  .nodal-voice-v2 .nodal-voice-shell { grid-template-columns:1fr; }
  .nodal-voice-v2 .nodal-voice-sidebar { min-height:0; }
  .nodal-voice-v2 .nodal-voice-participants { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0; }
}
@media (max-width: 760px) {
  #nodal-voice-panel.nodal-voice-v2 { padding:15px !important; }
  .nodal-voice-v2 .nodal-voice-hero--v2 { align-items:flex-start; }
  .nodal-voice-v2 .nodal-voice-live-card { min-width:0; }
  .nodal-voice-v2 .nodal-voice-controls--v2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nodal-voice-v2 .nodal-voice-control--join { grid-column:1/-1; }
  .nodal-voice-v2 .nodal-voice-invite-form { grid-template-columns:1fr; }
  .nodal-voice-v2 .nodal-voice-invite-row { grid-template-columns:31px minmax(0,1fr) auto; }
  .nodal-voice-v2 .nodal-voice-invite-row__meta { display:none; }
}
@media (max-width: 500px) {
  .nodal-voice-v2 .nodal-voice-hero--v2 { flex-direction:column; }
  .nodal-voice-v2 .nodal-voice-live-card { width:100%;box-sizing:border-box; }
  .nodal-voice-v2 .nodal-voice-participants { grid-template-columns:1fr; }
  .nodal-voice-v2 .nodal-voice-invites__head { align-items:flex-start;flex-direction:column; }
}


/* NODAL VOICE — participantes com avatar e controles após ingresso */
.nodal-voice-v2 .nodal-voice-controls--v2.is-joined {
  grid-template-columns: repeat(4, minmax(90px, 1fr)) !important;
}
.nodal-voice-v2 #nodal-voice-join[hidden] {
  display: none !important;
}
.nodal-voice-v2 .nodal-voice-avatar {
  overflow: visible;
  border-radius: 50%;
}
.nodal-voice-v2 .nodal-voice-avatar > img,
.nodal-voice-v2 .nodal-voice-avatar > span {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.nodal-voice-v2 .nodal-voice-avatar > img {
  display: block;
  object-fit: cover;
  object-position: center;
  background: rgba(24, 31, 54, .95);
}
.nodal-voice-v2 .nodal-voice-avatar > span {
  display: grid;
  place-items: center;
}
.nodal-voice-v2 .nodal-voice-avatar > span[hidden] {
  display: none;
}
@media (max-width: 760px) {
  .nodal-voice-v2 .nodal-voice-controls--v2.is-joined {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}