/* Espectadores.live — camada visual 2026-08-07
   Objetivo: padronização visual sem alterar regras de negócio ou comportamento funcional. */

:root {
  --el-navy: #11243D;
  --el-blue: #2F5BFF;
  --el-blue-hover: #2448D8;
  --el-teal: #18B7A0;
  --el-bg: #F5F7FB;
  --el-card: #FFFFFF;
  --el-text: #0F172A;
  --el-muted: #64748B;
  --el-border: #E2E8F0;
  --el-success: #16A34A;
  --el-danger: #DC2626;
  --el-warning: #D97706;
  --el-shadow-sm: 0 4px 16px rgba(15, 23, 42, .055);
  --el-shadow-md: 0 12px 28px rgba(15, 23, 42, .075);
  --el-radius-sm: 10px;
  --el-radius: 14px;
  --el-radius-lg: 18px;
}

body[class*="el-"] {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[class*="el-"] :focus-visible {
  outline: 3px solid rgba(47, 91, 255, .28);
  outline-offset: 2px;
}

body[class*="el-"] button,
body[class*="el-"] input,
body[class*="el-"] select,
body[class*="el-"] textarea {
  font: inherit;
}

/* =========================================================
   HOME
   ========================================================= */
body.el-home {
  --bg: var(--el-bg);
  --paper: #fff;
  --paper2: #fff;
  --ink: var(--el-text);
  --muted: var(--el-muted);
  --line: var(--el-border);
  --radius: 14px;
  background: var(--el-bg);
  color: var(--el-text);
}

.el-home .header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--el-border);
  box-shadow: 0 1px 8px rgba(15, 23, 42, .035);
  padding: 8px 24px;
  backdrop-filter: blur(12px);
}

.el-home .nav { gap: 20px; }
.el-home .nav a {
  color: #334155;
  font-size: .9rem;
  font-weight: 650;
}
.el-home .nav a:hover { color: var(--el-blue); }
.el-home .nav a::after { background: var(--el-blue); height: 2px; }
.el-home .menu-toggle {
  width: 42px;
  height: 42px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: #fff;
}
.el-home .menu-toggle span { background: var(--el-navy); margin-left: auto; margin-right: auto; }

.el-home .hero {
  padding: 126px 20px 66px;
  background:
    linear-gradient(180deg, #fff 0%, rgba(245, 247, 251, .96) 100%) !important;
  border-bottom: 1px solid var(--el-border);
}
.el-home .hero-title {
  max-width: 920px;
  margin: 0 auto;
  color: var(--el-navy);
  font-size: clamp(2.2rem, 5.5vw, 3.7rem);
  font-weight: 820;
  letter-spacing: -.045em;
}
.el-home .hero-title span {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--el-blue);
}
.el-home .hero-sub {
  color: var(--el-muted);
  max-width: 760px;
  font-size: clamp(1rem, 2.2vw, 1.16rem);
  line-height: 1.7;
}
.el-home .live-counter {
  background: #fff;
  border: 1px solid var(--el-border);
  box-shadow: var(--el-shadow-sm);
  border-radius: var(--el-radius);
  padding: 20px 24px;
  max-width: 380px;
}
.el-home .live-status-dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #16A34A;
}

.el-home .live-status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(22, 163, 74, .42);
  border-radius: 50%;
  animation: elLiveStatusPulse 2.2s ease-out infinite;
}

.el-home .live-count {
  color: var(--el-navy);
  text-shadow: none;
  font-size: clamp(2.15rem, 7vw, 2.8rem);
}
.el-home .live-label { color: var(--el-muted); }

.el-home .platforms { padding: 64px 0 72px; }
.el-home .platform-title,
.el-home .features > h2,
.el-home .garantia h2 {
  color: var(--el-navy) !important;
  letter-spacing: -.025em;
}
.el-home .platform-title { font-size: clamp(1.75rem, 4vw, 2.3rem); }
.el-home .platform-grid { gap: 18px; }
.el-home .card,
.el-home .features .card {
  background: #fff !important;
  border: 1px solid var(--el-border) !important;
  box-shadow: var(--el-shadow-sm);
  border-radius: var(--el-radius);
  padding: 28px 24px;
}
.el-home .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--el-shadow-md);
  border-color: #cbd5e1 !important;
}
.el-home .card h3 { color: var(--el-navy); font-weight: 760; }
.el-home .card p { color: var(--el-muted); }
.el-home .icon svg { filter: none !important; }
.el-home .icon { width: 58px; height: 58px; }
.el-home .service-home-badge.status-active {
  color: #166534;
  background: #F0FDF4;
  border-color: #BBF7D0;
}
.el-home .service-home-badge.status-update {
  color: #92400E;
  background: #FFFBEB;
  border-color: #FDE68A;
}
.el-home .service-home-badge.status-paused {
  color: #991B1B;
  background: #FEF2F2;
  border-color: #FECACA;
}
.el-home .card-unavailable {
  background: #fff !important;
  border-color: #FDE68A !important;
}
.el-home .home-alt-services { border-top-color: var(--el-border); }
.el-home .home-alt-title { color: var(--el-muted); }
.el-home .home-alt-pill {
  background: #F8FAFC;
  color: #334155;
  border-color: var(--el-border);
}
.el-home .home-alt-pill:hover { background: #F1F5F9; }
.el-home .btn {
  border-radius: 10px;
  box-shadow: none;
  font-weight: 750;
}
.el-home .btn:hover { transform: translateY(-1px); opacity: .94; }
.el-home .features,
.el-home .garantia {
  background: #fff !important;
  color: var(--el-text);
  border-top: 1px solid var(--el-border);
}
.el-home .garantia p { color: var(--el-muted) !important; }

/* =========================================================
   PÁGINAS DE VENDA — base Espectadores.live + acento da rede
   ========================================================= */
body.el-sales {
  --bg: var(--el-bg);
  --paper: #fff;
  --ink: var(--el-text);
  --muted: var(--el-muted);
  --line: var(--el-border);
  --radius: 14px;
  --success: var(--el-success);
  --warning: var(--el-warning);
  --el-platform: var(--el-blue);
  --el-platform-2: var(--el-blue-hover);
  --el-platform-soft: rgba(47, 91, 255, .07);
  --el-platform-border: rgba(47, 91, 255, .25);
  background: var(--el-bg);
  color: var(--el-text);
}
body.el-sales.el-youtube {
  --el-platform: #E11D2E;
  --el-platform-2: #B91C1C;
  --el-platform-soft: rgba(225, 29, 46, .065);
  --el-platform-border: rgba(225, 29, 46, .24);
}
body.el-sales.el-facebook {
  --el-platform: #1877F2;
  --el-platform-2: #0F5EC7;
  --el-platform-soft: rgba(24, 119, 242, .07);
  --el-platform-border: rgba(24, 119, 242, .24);
}
body.el-sales.el-instagram {
  --el-platform: #C13584;
  --el-platform-2: #8134AF;
  --el-platform-soft: rgba(193, 53, 132, .07);
  --el-platform-border: rgba(193, 53, 132, .22);
}
body.el-sales.el-tiktok {
  --el-platform: #111827;
  --el-platform-2: #FE2C55;
  --el-platform-soft: rgba(37, 244, 238, .08);
  --el-platform-border: rgba(17, 24, 39, .18);
}
body.el-sales.el-twitch {
  --el-platform: #7C3AED;
  --el-platform-2: #5B21B6;
  --el-platform-soft: rgba(124, 58, 237, .065);
  --el-platform-border: rgba(124, 58, 237, .23);
}
body.el-sales.el-kick {
  --el-platform: #2F9E12;
  --el-platform-2: #237A0C;
  --el-platform-soft: rgba(83, 252, 24, .07);
  --el-platform-border: rgba(47, 158, 18, .24);
}

.el-sales .hero {
  min-height: auto;
  padding: 64px 0 58px;
  background: linear-gradient(180deg, #f2f2f2 0%, #F5F7FB 100%) !important;
  border-bottom: 1px solid var(--el-border);
  overflow: visible;
}
.el-sales .hero::before { display: none !important; }
.el-sales .hero-content { color: var(--el-text); }
.el-sales .network-breadcrumb,
.el-sales .yt-breadcrumb {
  margin-bottom: 20px;
  color: var(--el-muted);
  font-size: .9rem;
}
.el-sales .network-breadcrumb a,
.el-sales .yt-breadcrumb a { color: var(--el-blue); }
.el-sales .network-breadcrumb strong,
.el-sales .yt-breadcrumb strong { color: var(--el-navy); }
.el-sales .hero-title {
  color: var(--el-navy);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 820;
  line-height: 1.08;
  letter-spacing: -.04em;
  text-shadow: none !important;
}
.el-sales .hero-title .gradient {
  background: none !important;
  color: var(--el-platform) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
.el-sales.el-instagram .hero-title .gradient {
  background: linear-gradient(90deg, #F58529, #C13584, #8134AF) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.el-sales.el-tiktok .hero-title .gradient {
  background: linear-gradient(90deg, #111827 12%, #FE2C55 58%, #0EA5A8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.el-sales .hero-subtitle {
  color: var(--el-muted);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

.el-sales .package-customizer {
  position: relative;
  max-width: 820px;
  margin-top: 28px;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--el-border);
  border-top: 4px solid var(--el-platform);
  border-radius: var(--el-radius-lg);
  box-shadow: var(--el-shadow-md);
}
.el-sales .customizer-header { margin-bottom: 24px; }
.el-sales .customizer-title {
  color: var(--el-navy) !important;
  font-weight: 780;
  letter-spacing: -.02em;
}
.el-sales .customizer-subtitle,
.el-sales .link-help,
.el-sales .duration-label,
.el-sales .summary-label { color: var(--el-muted) !important; }
.el-sales .link-input-group { position: relative; }
.el-sales .link-input {
  background: #fff !important;
  color: var(--el-text) !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025);
}
.el-sales .link-input:focus {
  border-color: var(--el-blue) !important;
  box-shadow: 0 0 0 3px rgba(47, 91, 255, .11) !important;
}
.el-sales .link-input::placeholder { color: #94A3B8 !important; }
.el-sales .link-icon { color: var(--el-platform) !important; }
.el-sales .selector-label,
.el-sales .selector-label span { color: var(--el-navy) !important; font-weight: 700; }

.el-sales .viewers-free-card {
  background: linear-gradient(180deg, var(--el-platform-soft), #fff) !important;
  border: 1px solid var(--el-platform-border) !important;
  border-radius: 13px;
  box-shadow: none !important;
}
.el-sales .viewers-free-title { color: var(--el-navy) !important; }
.el-sales .viewers-free-help { color: var(--el-muted) !important; }
.el-sales .viewers-free-input-wrap {
  background: #fff !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}
.el-sales .viewers-free-input-wrap:focus-within {
  border-color: var(--el-blue) !important;
  box-shadow: 0 0 0 3px rgba(47, 91, 255, .10) !important;
}
.el-sales .viewers-number-input { color: var(--el-text) !important; }
.el-sales .viewers-number-suffix { color: var(--el-platform) !important; }
.el-sales .viewer-step-btn {
  background: #fff !important;
  color: var(--el-platform) !important;
  border-color: var(--el-platform-border) !important;
  box-shadow: none !important;
}
.el-sales .viewer-step-btn:hover,
.el-sales .viewer-step-btn:focus-visible {
  background: var(--el-platform-soft) !important;
  color: var(--el-platform) !important;
}
.el-sales .viewer-step-limit { color: #94A3B8 !important; }
.el-sales .viewers-input-status.is-valid { color: #15803D !important; }
.el-sales .viewer-preset,
.el-sales .duration-option {
  background: #fff !important;
  color: var(--el-text) !important;
  border: 1px solid var(--el-border) !important;
  box-shadow: none !important;
}
.el-sales .viewer-preset:hover,
.el-sales .duration-option:hover { border-color: var(--el-platform) !important; }
.el-sales .viewer-preset.active,
.el-sales .duration-option.active {
  color: var(--el-text) !important;
  background: var(--el-platform-soft) !important;
  border-color: var(--el-platform) !important;
  box-shadow: 0 0 0 1px var(--el-platform) inset !important;
}
.el-sales .duration-time,
.el-sales .summary-title,
.el-sales .total-value { color: var(--el-platform) !important; }

.el-sales .order-summary {
  background: #F8FAFC !important;
  border: 1px solid var(--el-border) !important;
  border-radius: 12px;
  box-shadow: none !important;
}
.el-sales .summary-value { color: var(--el-text) !important; }
.el-sales .btn-purchase,
.el-sales .btn-purchase-modal,
.el-sales .youtube-comment-btn,
.el-sales .tiktok-complement-btn {
  background: var(--el-platform) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  font-weight: 760 !important;
}
.el-sales.el-kick .btn-purchase,
.el-sales.el-kick .btn-purchase-modal { color: #fff !important; }
.el-sales .btn-purchase:hover,
.el-sales .btn-purchase-modal:hover,
.el-sales .youtube-comment-btn:hover,
.el-sales .tiktok-complement-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(.94);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .10) !important;
}

.el-sales .features,
.el-sales .seo-content,
.el-sales [class*="faq-"] { background-color: transparent; }
.el-sales .features { background: #fff !important; border-top: 1px solid var(--el-border); }
.el-sales .feature-item,
.el-sales .faq-item,
.el-sales .faq-youtube-item,
.el-sales .faq-tiktok-item,
.el-sales .faq-instagram-item,
.el-sales .faq-twitch-item,
.el-sales .faq-kick-item {
  background: #fff !important;
  border: 1px solid var(--el-border) !important;
  box-shadow: var(--el-shadow-sm) !important;
  border-radius: var(--el-radius) !important;
}
.el-sales .feature-item:hover {
  transform: translateY(-2px) !important;
  border-color: var(--el-platform-border) !important;
}
.el-sales .feature-title,
.el-sales .section-title,
.el-sales .faq-question,
.el-sales .faq-youtube-question,
.el-sales .faq-tiktok-question,
.el-sales .faq-instagram-question,
.el-sales .faq-twitch-question,
.el-sales .faq-kick-question { color: var(--el-navy) !important; }
.el-sales .feature-desc,
.el-sales .faq-answer,
.el-sales .faq-youtube-answer,
.el-sales .faq-tiktok-answer,
.el-sales .faq-instagram-answer,
.el-sales .faq-twitch-answer,
.el-sales .faq-kick-answer { color: var(--el-muted) !important; }
.el-sales .faq-youtube-highlight-box,
.el-sales .faq-tiktok-highlight-box,
.el-sales .faq-instagram-highlight-box,
.el-sales .faq-twitch-highlight-box,
.el-sales .faq-kick-highlight-box {
  background: var(--el-platform-soft) !important;
  border: 1px solid var(--el-platform-border) !important;
  box-shadow: none !important;
}
.el-sales .seo-content { background: var(--el-bg) !important; color: var(--el-muted) !important; }
.el-sales .seo-content > .container > div { color: var(--el-muted) !important; }
.el-sales .seo-content h2,
.el-sales .seo-content h3 { color: var(--el-navy) !important; }

.el-sales .modal-content,
.el-sales .youtube-extra-modal,
.el-sales .tiktok-extra-modal,
.el-sales .cpf-modal {
  background: #fff !important;
  color: var(--el-text) !important;
  border: 1px solid var(--el-border) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .18) !important;
}
.el-sales .modal-header { border-bottom-color: var(--el-border) !important; }
.el-sales .modal-close { color: var(--el-muted) !important; }
.el-sales .form-group label,
.el-sales .cpf-modal-title,
.el-sales .youtube-extra-field label,
.el-sales .tiktok-extra-field label { color: var(--el-navy) !important; }
.el-sales .form-group input,
.el-sales .form-group select,
.el-sales .form-group textarea,
.el-sales .cpf-modal-input,
.el-sales .youtube-extra-input,
.el-sales .youtube-extra-textarea,
.el-sales .tiktok-extra-input,
.el-sales .tiktok-extra-textarea {
  background: #fff !important;
  color: var(--el-text) !important;
  border-color: #CBD5E1 !important;
}

/* =========================================================
   GUIAS / MONEY PAGES
   ========================================================= */
body.el-guide {
  --bg: var(--el-bg);
  --bg-soft: #EEF3F8;
  --card: #fff;
  --card-2: #F8FAFC;
  --line: var(--el-border);
  --text: var(--el-text);
  --muted: var(--el-muted);
  --shadow: var(--el-shadow-sm);
  --radius: 14px;
  --radius-lg: 18px;
  background: var(--el-bg) !important;
  color: var(--el-text) !important;
}
.el-guide .topbar {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--el-border) !important;
  box-shadow: 0 1px 8px rgba(15,23,42,.035);
}
.el-guide .topbar a,
.el-guide .brand { color: var(--el-navy) !important; }
.el-guide .badge {
  background: #fff !important;
  color: #475569 !important;
  border-color: var(--el-border) !important;
}
.el-guide .hero-point,
.el-guide .card,
.el-guide .mini-cta,
.el-guide .faq-item,
.el-guide .plan-card,
.el-guide .proof-card,
.el-guide .hero-side {
  background: #fff !important;
  color: var(--el-text) !important;
  border-color: var(--el-border) !important;
  box-shadow: var(--el-shadow-sm) !important;
}
.el-guide .btn-secondary { background: #fff !important; color: var(--el-navy) !important; border-color: var(--el-border) !important; }
.el-guide .hero p,
.el-guide .hero-point span { color: var(--el-muted) !important; }

/* =========================================================
   ÁREA DO CLIENTE
   ========================================================= */
body.el-client {
  --bg-primary: var(--el-bg);
  --bg-soft: #F8FAFC;
  --bg-card: #fff;
  --text-primary: var(--el-text);
  --text-secondary: #475569;
  --text-tertiary: #718096;
  --border-light: var(--el-border);
  --border-medium: #CBD5E1;
  --accent-primary: var(--el-blue);
  --accent-secondary: var(--el-teal);
  --accent-gradient: var(--el-blue);
  --accent-soft: rgba(47, 91, 255, .075);
  --success: var(--el-success);
  --shadow-sm: var(--el-shadow-sm);
  --shadow-md: var(--el-shadow-md);
  --shadow-lg: 0 18px 42px rgba(15, 23, 42, .11);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;
}
.el-client .client-sidebar {
  background: var(--el-navy) !important;
  border-right: 1px solid #203A59 !important;
  box-shadow: none !important;
}
.el-client .sidebar-balance {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}
.el-client .sidebar-nav-item { border-radius: 9px !important; }
.el-client .sidebar-nav-item.active {
  background: rgba(255,255,255,.12) !important;
  box-shadow: inset 3px 0 0 var(--el-teal) !important;
}
.el-client .client-topbar {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--el-border) !important;
  box-shadow: none !important;
}
.el-client .dashboard-hero {
  background: #fff !important;
  border: 1px solid var(--el-border) !important;
  box-shadow: var(--el-shadow-sm) !important;
  border-radius: var(--el-radius-lg) !important;
}
.el-client .dashboard-hero::before,
.el-client .dashboard-hero::after { opacity: .3 !important; }
.el-client .dashboard-badge {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
}
.el-client .hero-button { border-radius: 10px !important; box-shadow: none !important; }
.el-client .hero-button-primary { background: var(--el-blue) !important; }
.el-client .hero-button-primary:hover { background: var(--el-blue-hover) !important; }
.el-client .hero-button-light,
.el-client .hero-button-outline {
  background: #fff !important;
  color: var(--el-navy) !important;
  border: 1px solid var(--el-border) !important;
}
.el-client .kpi-card,
.el-client .section-card,
.el-client .credit-card,
.el-client .active-complement-card,
.el-client .closed-info-card {
  border-color: var(--el-border) !important;
  box-shadow: var(--el-shadow-sm) !important;
  border-radius: var(--el-radius) !important;
}
.el-client .section-card { background: #fff !important; }
.el-client .kpi-card { background: #fff !important; }
.el-client .shortcut-card,
.el-client .order-card { box-shadow: none !important; }
.el-client .modal-card,
.el-client .shortcut-modal-card {
  border-radius: var(--el-radius-lg) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.18) !important;
}

/* Login da área do cliente */
.el-client .login-card {
  background: #fff !important;
  border: 1px solid var(--el-border) !important;
  box-shadow: var(--el-shadow-md) !important;
  border-radius: var(--el-radius-lg) !important;
}
.el-client .login-card input {
  background: #fff !important;
  color: var(--el-text) !important;
  border-color: #CBD5E1 !important;
}

/* =========================================================
   ADICIONAR SALDO
   ========================================================= */
body.el-wallet {
  --page-bg: var(--el-bg);
  --card: #fff;
  --text: var(--el-text);
  --muted: var(--el-muted);
  --muted-light: #8492A6;
  --border: var(--el-border);
  --border-strong: #CBD5E1;
  --primary: var(--el-blue);
  --primary-dark: var(--el-blue-hover);
  --primary-soft: rgba(47, 91, 255, .075);
  --success: var(--el-success);
  --success-soft: rgba(22, 163, 74, .08);
  --shadow: var(--el-shadow-md);
  --shadow-soft: var(--el-shadow-sm);
}
.el-wallet .wallet-sidebar { background: var(--el-navy) !important; box-shadow: none !important; }
.el-wallet .sidebar-balance { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.13) !important; }
.el-wallet .wallet-topbar { background: rgba(255,255,255,.96) !important; border-bottom-color: var(--el-border) !important; box-shadow: none !important; }
.el-wallet .card,
.el-wallet .balance-overview,
.el-wallet .steps-strip {
  border-color: var(--el-border) !important;
  box-shadow: var(--el-shadow-sm) !important;
}
.el-wallet .card { border-radius: var(--el-radius) !important; }
.el-wallet .amount-option,
.el-wallet input { box-shadow: none !important; }
.el-wallet .amount-option.selected { background: var(--primary-soft) !important; }

/* =========================================================
   CHECKOUT / PAGAMENTO
   ========================================================= */
body.el-checkout {
  --bg: var(--el-bg);
  --surface: #fff;
  --surface2: #F8FAFC;
  --field: #fff;
  --line: var(--el-border);
  --line2: #CBD5E1;
  --text: var(--el-text);
  --muted: var(--el-muted);
  --muted2: #8492A6;
  --primary: var(--el-blue);
  --primary2: var(--el-blue-hover);
  --success: var(--el-success);
  --danger: var(--el-danger);
  --warning: #B45309;
  --shadow: var(--el-shadow-md);
  --radius: 18px;
  background: var(--el-bg) !important;
  color: var(--el-text) !important;
}
.el-checkout .panel,
.el-checkout .summary,
.el-checkout .coupon-widget,
.el-checkout .modal-box {
  background: #fff !important;
  color: var(--el-text) !important;
  border-color: var(--el-border) !important;
  box-shadow: var(--el-shadow-sm) !important;
}
.el-checkout input,
.el-checkout select,
.el-checkout textarea,
.el-checkout .method,
.el-checkout .upsell-option {
  background: #fff !important;
  color: var(--el-text) !important;
  border-color: #CBD5E1 !important;
}
.el-checkout .method:hover,
.el-checkout .upsell-option:hover { border-color: var(--el-blue) !important; }
.el-checkout .btn { box-shadow: none !important; border-radius: 10px !important; }
.el-checkout .btn-pix,
.el-checkout .btn-card { background: var(--el-blue) !important; }
.el-checkout .btn-wallet { background: var(--el-navy) !important; }
.el-checkout .summary { position: sticky; top: 18px; }
.el-checkout .mobile-total-bar { background: rgba(255,255,255,.97) !important; border-top-color: var(--el-border) !important; }

body.el-pix {
  --bg: var(--el-bg);
  --paper: #fff;
  --ink: var(--el-text);
  --muted: var(--el-muted);
  --line: var(--el-border);
  --success: var(--el-success);
  --warning: var(--el-warning);
  --error: var(--el-danger);
  background: var(--el-bg) !important;
  color: var(--el-text) !important;
}
.el-pix .pix-card,
.el-pix .order-info,
.el-pix .phone-fix-box {
  background: #fff !important;
  color: var(--el-text) !important;
  border-color: var(--el-border) !important;
  box-shadow: var(--el-shadow-sm) !important;
}
.el-pix .qrcode-container { background: #fff !important; border-color: var(--el-border) !important; }
.el-pix .pix-code { background: #F8FAFC !important; color: var(--el-text) !important; border-color: var(--el-border) !important; }
.el-pix .copy-btn { box-shadow: none !important; border-radius: 10px !important; }

body.el-payment-return {
  --bg: var(--el-bg);
  --paper: #fff;
  --line: var(--el-border);
  --ink: var(--el-text);
  --muted: var(--el-muted);
  --success: var(--el-success);
  --warning: var(--el-warning);
  --danger: var(--el-danger);
  background: var(--el-bg) !important;
  color: var(--el-text) !important;
}
.el-payment-return .card {
  background: #fff !important;
  border-color: var(--el-border) !important;
  box-shadow: var(--el-shadow-md) !important;
}
.el-payment-return .box { background: #F8FAFC !important; border-color: var(--el-border) !important; }
.el-payment-return .btn { box-shadow: none !important; border-radius: 10px !important; }
.el-payment-return .btn-primary { background: var(--el-blue) !important; }
.el-payment-return .btn-secondary { background: #fff !important; color: var(--el-navy) !important; border-color: var(--el-border) !important; }

/* =========================================================
   AVALIAÇÕES / INSTITUCIONAL / SÓCIOS
   ========================================================= */
body.el-reviews {
  --text: var(--el-text);
  --muted: var(--el-muted);
  --line: var(--el-border);
  --surface: #fff;
  --background: var(--el-bg);
  --shadow: var(--el-shadow-sm);
  --radius: 16px;
  background: var(--el-bg) !important;
}
.el-reviews .site-header { background: rgba(255,255,255,.97) !important; border-bottom-color: var(--el-border) !important; box-shadow: none !important; }
.el-reviews .review-card,
.el-reviews .hero-card { box-shadow: var(--el-shadow-sm) !important; border-color: var(--el-border) !important; border-radius: var(--el-radius) !important; }

body.el-info {
  --bg0: var(--el-bg);
  --bg1: #EEF3F8;
  --card: #fff;
  --card2: #F8FAFC;
  --border: var(--el-border);
  --text: var(--el-text);
  --muted: var(--el-muted);
  --accent: var(--el-blue);
  --accent2: var(--el-teal);
  --shadow: var(--el-shadow-sm);
  --radius: 14px;
  background: var(--el-bg) !important;
  color: var(--el-text) !important;
}
.el-info .header { background: rgba(255,255,255,.97) !important; border-bottom-color: var(--el-border) !important; box-shadow: none !important; }
.el-info .nav a { color: #334155 !important; }
.el-info .card {
  background: #fff !important;
  border-color: var(--el-border) !important;
  box-shadow: var(--el-shadow-sm) !important;
}

body.el-partner-landing {
  --bg: var(--el-bg);
  --bg-soft: #EEF3F8;
  --card: #fff;
  --card-2: #F8FAFC;
  --line: var(--el-border);
  --text: var(--el-text);
  --muted: var(--el-muted);
  --primary: var(--el-blue);
  --primary-2: var(--el-blue-hover);
  --green: var(--el-teal);
  --green-2: #0F8F7F;
  --shadow: var(--el-shadow-sm);
  --radius: 14px;
  --radius-lg: 18px;
  background: var(--el-bg) !important;
  color: var(--el-text) !important;
}
.el-partner-landing .topbar { background: rgba(255,255,255,.97) !important; border-bottom-color: var(--el-border) !important; }
.el-partner-landing .hero { background: linear-gradient(180deg,#fff,var(--el-bg)) !important; }
.el-partner-landing .commission-card,
.el-partner-landing .proof-card,
.el-partner-landing .earn-card,
.el-partner-landing .link-card,
.el-partner-landing .script-card,
.el-partner-landing .card {
  background: #fff !important;
  color: var(--el-text) !important;
  border-color: var(--el-border) !important;
  box-shadow: var(--el-shadow-sm) !important;
}
.el-partner-landing .hero-point { background: #fff !important; border-color: var(--el-border) !important; }

body.el-partner-panel {
  --bg-page: var(--el-bg);
  --bg-card: #fff;
  --bg-soft: #F8FAFC;
  --border-soft: var(--el-border);
  --border-strong: #CBD5E1;
  --text-main: var(--el-text);
  --text-muted: var(--el-muted);
  --accent: var(--el-blue);
  --accent-soft: rgba(47, 91, 255, .075);
  --accent-strong: var(--el-blue-hover);
  --success: var(--el-success);
  --grad-main: linear-gradient(90deg, var(--el-blue), var(--el-teal));
  background: var(--el-bg) !important;
}
.el-partner-panel .socio-topbar { background: rgba(255,255,255,.97) !important; border-bottom-color: var(--el-border) !important; box-shadow: none !important; }
.el-partner-panel .card,
.el-partner-panel .auth-card,
.el-partner-panel .tips-card {
  border-color: var(--el-border) !important;
  box-shadow: var(--el-shadow-sm) !important;
  border-radius: var(--el-radius) !important;
}

/* =========================================================
   FOOTER compartilhado
   ========================================================= */
.site-footer {
  background: var(--el-navy) !important;
  color: #CBD5E1 !important;
  margin-top: 64px !important;
}
.site-footer .footer-container { max-width: 1200px; padding: 44px 22px !important; gap: 36px !important; }
.site-footer .footer-col h4 { color: #fff !important; font-weight: 720; letter-spacing: -.01em; }
.site-footer .footer-col p,
.site-footer .footer-col a { color: #CBD5E1 !important; }
.site-footer .footer-col a:hover { color: #fff !important; }
.site-footer .footer-bottom { background: #0B1B30 !important; color: #94A3B8 !important; border-top: 1px solid rgba(255,255,255,.08); }

/* Tablet/menus: evita que o grande número de itens dispute espaço com a marca. */
@media (max-width: 1120px) {
  .el-home .menu-toggle { display: block !important; }
  .el-home .nav {
    position: fixed;
    top: 66px;
    left: 14px;
    right: 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--el-border);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 18px 44px rgba(15,23,42,.16);
  }
  .el-home .nav.open { display: flex; }
  .el-home .nav a { width: 100%; padding: 12px 11px; border-radius: 9px; }
  .el-home .nav a:hover { background: #F8FAFC; }
  .el-home .nav a::after { display: none; }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 980px) {
  .el-client .client-sidebar,
  .el-wallet .wallet-sidebar { box-shadow: 18px 0 48px rgba(15,23,42,.18) !important; }
}

@media (max-width: 768px) {
  body.el-menu-open { overflow: hidden !important; }

  .el-home .header { padding: 8px 12px; }
  .el-home .logo img { width: 158px; height: auto !important; }
  .el-home .nav {
    top: 66px;
    left: 10px;
    right: 10px;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--el-border);
    border-radius: 14px;
    padding: 10px;
    gap: 2px;
    box-shadow: 0 18px 44px rgba(15,23,42,.16);
  }
  .el-home .nav a {
    width: 100%;
    padding: 12px 11px;
    border-radius: 9px;
  }
  .el-home .nav a:hover { background: #F8FAFC; }
  .el-home .nav a::after { display: none; }
  .el-home .hero { padding: 104px 16px 46px; }
  .el-home .hero-sub { margin: 16px auto 26px; }
  .el-home .platforms { padding: 44px 0 52px; }
  .el-home .platform-grid { padding: 0 12px; gap: 12px; }
  .el-home .card,
  .el-home .features .card { padding: 22px 18px !important; }

  .el-sales .hero { padding: 34px 0 42px; }
  .el-sales .container { padding-left: 12px; padding-right: 12px; }
  .el-sales .package-customizer {
    margin: 22px auto 0;
    padding: 20px 15px;
    border-radius: 14px;
  }
  .el-sales .customizer-header { margin-bottom: 18px; }
  .el-sales .duration-options { gap: 8px !important; }
  .el-sales .duration-option { padding: 14px 8px !important; min-width: 0; }
  .el-sales .summary-details { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .el-sales .features { padding: 44px 0 !important; }
  .el-sales .features-grid { gap: 12px !important; }
  .el-sales .feature-item { padding: 20px 16px !important; }
  .el-sales .seo-content { padding: 42px 0 !important; }

  .el-checkout .checkout-grid { grid-template-columns: 1fr !important; }
  .el-checkout .summary { position: static; }
}

@media (max-width: 430px) {
  .el-home .hero-title { font-size: 2.15rem; }
  .el-home .live-counter { margin-bottom: 16px; width: min(100%, 340px); }
  .el-sales .hero-title { font-size: 2rem; }
  .el-sales .package-customizer { padding: 17px 12px; }
  .el-sales .summary-details { grid-template-columns: 1fr !important; }
  .el-sales .btn-purchase { max-width: none !important; }
  .site-footer .footer-container { text-align: left !important; padding: 36px 18px !important; gap: 28px !important; }
}

@media (max-width: 360px) {
  .el-home .logo img { width: 146px; }
  .el-sales .container { padding-left: 9px; padding-right: 9px; }
  .el-sales .package-customizer { padding: 15px 10px; }
  .el-sales .viewer-step-btn { min-width: 50px !important; }
}


/* =========================================================
   AJUSTES FINOS 2026-08-07 — contraste e mobile
   ========================================================= */

/* Área do cliente: recuperar contraste do bloco principal e reduzir sensação de espaço branco no topo */
.el-client .client-main > .container {
  padding-top: 16px;
}
.el-client .dashboard-hero {
  background:
    radial-gradient(circle at 78% 5%, rgba(24, 183, 160, .18), transparent 32%),
    radial-gradient(circle at 8% 100%, rgba(79, 70, 229, .22), transparent 38%),
    linear-gradient(135deg, #11243D 0%, #1B2F52 55%, #253D66 100%) !important;
  border: 1px solid rgba(17, 36, 61, .08) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14) !important;
}
.el-client .dashboard-hero h1 {
  color: #FFFFFF !important;
}
.el-client .dashboard-hero p {
  color: rgba(255, 255, 255, .86) !important;
}
.el-client .dashboard-hero .dashboard-badge {
  background: rgba(255, 255, 255, .10) !important;
  color: #ECFEFF !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
.el-client .hero-button-light {
  background: #FFFFFF !important;
  color: var(--el-navy) !important;
}
.el-client .hero-button-outline {
  background: rgba(255, 255, 255, .10) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, .22) !important;
}
.el-client .hero-button-outline:hover {
  background: rgba(255, 255, 255, .16) !important;
}
.el-client .kpi-label,
.el-client .orders-count,
.el-client .table-muted,
.el-client .closed-details,
.el-client .client-topbar-copy span {
  color: #64748B !important;
}
.el-client .kpi-value,
.el-client .platform-name,
.el-client .closed-order-price,
.el-client .closed-platform,
.el-client .closed-order-id {
  color: var(--el-text) !important;
}

/* Páginas de venda: dar um pouco mais de contraste aos textos auxiliares */
.el-sales .network-breadcrumb,
.el-sales .yt-breadcrumb,
.el-sales .hero-subtitle,
.el-sales .customizer-subtitle,
.el-sales .link-help,
.el-sales .duration-label,
.el-sales .summary-label,
.el-sales .viewers-free-help,
.el-sales .feature-desc,
.el-sales .faq-answer,
.el-sales .faq-youtube-answer,
.el-sales .faq-tiktok-answer,
.el-sales .faq-instagram-answer,
.el-sales .faq-twitch-answer,
.el-sales .faq-kick-answer,
.el-sales .seo-content,
.el-sales .seo-content > .container > div {
  color: #475569 !important;
}
.el-sales .viewer-step-limit,
.el-sales .link-input::placeholder {
  color: #64748B !important;
}
.el-sales .package-customizer {
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
}

@media (max-width: 768px) {
  .el-client .client-topbar {
    min-height: 64px;
    padding: 10px 12px;
  }
  .el-client .client-main > .container {
    padding-top: 12px;
  }
  .el-client .dashboard-hero {
    padding: 22px 18px !important;
  }
  .el-sales .hero {
    padding-top: 52px;
    padding-bottom: 48px;
  }
  .el-sales .package-customizer {
    padding: 22px 16px;
  }
}


/* =========================================================
   REVISÃO FINAL REDES + FOOTER — 2026-08-08
   Corrige contraste remanescente do antigo tema escuro.
   ========================================================= */

/* O fundo geral das páginas de rede fica levemente cinza para separar os cards brancos. */
body.el-sales {
  background: #F2F2F2 !important;
}
.el-sales .hero {
  background: linear-gradient(180deg, #F2F2F2 0%, #F5F7FB 100%) !important;
}

/* Breadcrumb: o tema antigo usava branco/transparente sobre fundo escuro. */
.el-sales .network-breadcrumb,
.el-sales .yt-breadcrumb {
  color: #64748B !important;
}
.el-sales .network-breadcrumb a,
.el-sales .yt-breadcrumb a {
  color: #2F5BFF !important;
}
.el-sales .network-breadcrumb a:hover,
.el-sales .network-breadcrumb a:focus-visible,
.el-sales .yt-breadcrumb a:hover,
.el-sales .yt-breadcrumb a:focus-visible {
  color: #2448D8 !important;
}
.el-sales .network-breadcrumb span,
.el-sales .yt-breadcrumb span {
  color: #94A3B8 !important;
}
.el-sales .network-breadcrumb strong,
.el-sales .yt-breadcrumb strong {
  color: var(--el-navy) !important;
}

/* Modais claros: neutraliza textos herdados do tema escuro. */
.el-sales .modal-content,
.el-sales .youtube-extra-modal .modal-content,
.el-sales .tiktok-extra-modal .modal-content,
.el-sales .cpf-modal {
  color: var(--el-text) !important;
}
.el-sales .modal-header h2,
.el-sales .modal-header h3,
.el-sales .modal-body h2,
.el-sales .modal-body h3,
.el-sales .youtube-extra-modal h2,
.el-sales .youtube-extra-modal h3,
.el-sales .tiktok-extra-modal h2,
.el-sales .tiktok-extra-modal h3 {
  color: var(--el-navy) !important;
}
.el-sales .youtube-extra-intro,
.el-sales .tiktok-extra-intro,
.el-sales .youtube-extra-help,
.el-sales .tiktok-extra-help {
  color: #64748B !important;
}
.el-sales .youtube-extra-qty-btn,
.el-sales .tiktok-extra-qty-btn {
  background: #FFFFFF !important;
  color: var(--el-text) !important;
  border-color: #CBD5E1 !important;
}
.el-sales .youtube-extra-qty-btn:hover,
.el-sales .tiktok-extra-qty-btn:hover {
  background: #F8FAFC !important;
  border-color: var(--el-platform) !important;
}
.el-sales .youtube-extra-qty-btn.active,
.el-sales .tiktok-extra-qty-btn.active {
  background: var(--el-platform-soft) !important;
  color: var(--el-text) !important;
  border-color: var(--el-platform) !important;
}
.el-sales .youtube-extra-qty-btn span,
.el-sales .tiktok-extra-qty-btn span {
  color: #15803D !important;
}
.el-sales .youtube-extra-counter,
.el-sales .tiktok-extra-counter {
  color: #475569 !important;
}
.el-sales .youtube-extra-counter.ok,
.el-sales .tiktok-extra-counter.ok {
  color: #15803D !important;
}
.el-sales .youtube-extra-counter.warn,
.el-sales .tiktok-extra-counter.warn {
  color: #B91C1C !important;
}
.el-sales #upsellTotalBox {
  color: var(--el-text) !important;
  border-top-color: var(--el-border) !important;
}
.el-sales .modal-body > div[style*="background:#392c00"],
.el-sales .modal-body > div[style*="background: #392c00"] {
  background: #F8FAFC !important;
  color: var(--el-text) !important;
  border-color: var(--el-border) !important;
}

/* Mantém os cards especiais escuros das páginas onde o branco é intencional. */
.el-sales .youtube-comments-extra .youtube-comments-title,
.el-sales .youtube-comments-extra .youtube-comment-name,
.el-sales .tiktok-complements .tiktok-complements-title,
.el-sales .tiktok-complements .tiktok-complement-name {
  color: #FFFFFF !important;
}
.el-sales .youtube-comments-extra .youtube-comments-subtitle,
.el-sales .youtube-comments-extra .youtube-comment-desc,
.el-sales .tiktok-complements .tiktok-complements-subtitle,
.el-sales .tiktok-complements .tiktok-complement-desc {
  color: #CBD5E1 !important;
}

/* Footer: força o componente compartilhado a participar do fluxo e ficar visível. */
body.el-sales .site-footer,
.site-footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  clear: both !important;
  z-index: 2;
  background: #11243D !important;
  color: #CBD5E1 !important;
}
.site-footer .footer-container {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.site-footer .footer-col,
.site-footer .footer-bottom {
  visibility: visible !important;
  opacity: 1 !important;
}
.site-footer .footer-col h4 {
  color: #FFFFFF !important;
}
.site-footer .footer-col p,
.site-footer .footer-col a {
  color: #CBD5E1 !important;
}
.site-footer .footer-col a:hover {
  color: #FFFFFF !important;
}


/* =========================================================
   RITMO VISUAL DAS PÁGINAS DE VENDA — 2026-08-08
   Aproxima o conteúdo do topo e organiza o customizador.
   ========================================================= */

/* O espaço anterior estava grande demais, principalmente no celular. */
.el-sales .hero {
  padding-top: 28px !important;
  padding-bottom: 40px !important;
}
.el-sales .network-breadcrumb,
.el-sales .yt-breadcrumb {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* O cabeçalho do pacote passa a formar um grupo visual único. */
.el-sales .package-customizer {
  padding: 22px !important;
}
.el-sales .customizer-header {
  margin-bottom: 16px !important;
  padding-bottom: 16px;
  border-bottom: 1px solid #E2E8F0;
}
.el-sales .customizer-title {
  margin-bottom: 4px !important;
}

/* Agrupa etapas sem competir com a cor da rede. */
.el-sales .link-input-section,
.el-sales .duration-selector {
  margin-bottom: 14px !important;
  padding: 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
}
.el-sales .viewers-selector {
  margin-bottom: 14px !important;
}
.el-sales .link-input-section .link-help {
  margin-bottom: 0 !important;
}
.el-sales .duration-selector .selector-label {
  margin-top: 0 !important;
}
.el-sales .order-summary {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .el-sales .hero {
    padding-top: 18px !important;
    padding-bottom: 30px !important;
  }
  .el-sales .network-breadcrumb,
  .el-sales .yt-breadcrumb {
    margin-bottom: 10px !important;
  }
  .el-sales .package-customizer {
    padding: 14px !important;
  }
  .el-sales .customizer-header {
    margin-bottom: 13px !important;
    padding-bottom: 13px;
  }
  .el-sales .link-input-section,
  .el-sales .duration-selector {
    padding: 12px;
    margin-bottom: 12px !important;
    border-radius: 11px;
  }
  .el-sales .viewers-selector {
    margin-bottom: 12px !important;
  }
}


/* =========================================================
   RESUMO COMPACTO + CTA — 2026-08-08
   Mantém as informações lado a lado e dá presença ao Comprar Agora.
   ========================================================= */
.el-sales .order-summary .summary-details {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  align-items: start;
}
.el-sales .order-summary .summary-item {
  min-width: 0;
  text-align: center !important;
  padding: 2px 3px;
}
.el-sales .order-summary .summary-label {
  display: block;
  margin-bottom: 4px !important;
  color: #64748B !important;
  font-size: .78rem !important;
  line-height: 1.2;
}
.el-sales .order-summary .summary-value {
  display: block;
  color: #0F172A !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  line-height: 1.2;
  white-space: nowrap;
}
.el-sales .order-summary .summary-total {
  margin-top: 2px;
  padding-top: 13px !important;
  border-top: 1px solid #E2E8F0 !important;
}

/* CTA com profundidade discreta usando somente a cor da própria rede. */
.el-sales .btn-purchase {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid var(--el-platform-2) !important;
  box-shadow:
    0 4px 0 var(--el-platform-2),
    0 10px 20px rgba(15, 23, 42, .13),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  transform: translateY(-1px);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.el-sales .btn-purchase::after {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border: 2px solid var(--el-platform);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: elPurchasePulse 4.2s ease-out infinite;
}
.el-sales .btn-purchase:hover {
  transform: translateY(-3px) !important;
  filter: brightness(1.025) !important;
  box-shadow:
    0 5px 0 var(--el-platform-2),
    0 14px 25px rgba(15, 23, 42, .16),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
.el-sales .btn-purchase:active {
  transform: translateY(2px) !important;
  box-shadow:
    0 1px 0 var(--el-platform-2),
    0 5px 12px rgba(15, 23, 42, .12),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
@keyframes elPurchasePulse {
  0%, 68%, 100% { transform: scale(1); opacity: 0; }
  74% { opacity: .16; }
  88% { transform: scale(1.035); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .el-sales .btn-purchase::after { animation: none !important; }
}

@media (max-width: 430px) {
  .el-sales .order-summary .summary-details {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  .el-sales .order-summary .summary-label {
    font-size: .72rem !important;
  }
  .el-sales .order-summary .summary-value {
    font-size: .94rem !important;
  }
}


/* =========================================================
   INDEX — refinamento final 2026-08-08
   Mantém a estrutura original e melhora hierarquia/contraste.
   ========================================================= */
.el-home .live-counter {
  position: relative;
  overflow: hidden;
  padding: 22px 24px 21px;
  border-color: #D9E2EC !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .075) !important;
}

.el-home .live-counter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 92px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--el-blue), var(--el-teal));
}

.el-home .live-count {
  margin-top: 1px;
  color: var(--el-navy) !important;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}

.el-home .live-count.is-updating {
  animation: elLiveNumberTick .30s ease-out;
}

.el-home .live-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  color: #475569 !important;
  font-size: .9rem;
  font-weight: 600;
}

@keyframes elLiveStatusPulse {
  0% { transform: scale(.75); opacity: .7; }
  65%, 100% { transform: scale(1.7); opacity: 0; }
}

@keyframes elLiveNumberTick {
  0% { transform: translateY(2px); opacity: .72; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Notificações de atividade: contraste garantido no novo tema claro. */
.el-home .live-notification-box .notification-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #11243D !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-left: 4px solid var(--notification-accent) !important;
  border-radius: 13px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .20) !important;
  padding: 15px 16px !important;
  animation: slideIn .5s ease forwards;
}

.el-home .notification-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: #11243D !important;
  border: 2px solid var(--notification-accent);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: none;
}

.el-home .notification-copy {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.el-home .notification-name {
  display: block;
  margin-bottom: 3px;
  color: #FFFFFF !important;
  font-size: .94rem;
  line-height: 1.25;
  font-weight: 800;
}

.el-home .notification-message {
  display: block;
  color: #CBD5E1 !important;
  font-size: .84rem;
  line-height: 1.4;
}

.el-home .notification-message b {
  color: #FFFFFF !important;
  font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
  .el-home .live-status-dot::after,
  .el-home .live-count.is-updating {
    animation: none !important;
  }
}

@media (max-width: 430px) {
  .el-home .live-counter {
    padding: 20px 18px 19px;
  }
  .el-home .live-notification-box .notification-item {
    padding: 13px 14px !important;
  }
  .el-home .notification-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: .86rem;
  }
}


/* =========================================================
   REDE CARDS + SALDO TOPBAR — 2026-08-08
   Corrige contraste dos cards informativos e simplifica o hero do cliente.
   ========================================================= */

/* Cards de orientação das redes: base neutra + acento da plataforma.
   Evita texto claro sobre fundos claros/coloridos. */
.el-sales .faq-youtube-highlight-box,
.el-sales .faq-tiktok-highlight-box,
.el-sales .faq-instagram-highlight-box,
.el-sales .faq-twitch-highlight-box,
.el-sales .faq-kick-highlight-box,
.el-sales .faq-highlight-box {
  background: #FFFFFF !important;
  color: #475569 !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 4px solid var(--el-platform) !important;
  box-shadow: none !important;
}
.el-sales .faq-youtube-highlight-box h3,
.el-sales .faq-tiktok-highlight-box h3,
.el-sales .faq-instagram-highlight-box h3,
.el-sales .faq-twitch-highlight-box h3,
.el-sales .faq-kick-highlight-box h3,
.el-sales .faq-highlight-box h3 {
  color: #0F172A !important;
}
.el-sales .faq-youtube-highlight-box li,
.el-sales .faq-tiktok-highlight-box li,
.el-sales .faq-instagram-highlight-box li,
.el-sales .faq-twitch-highlight-box li,
.el-sales .faq-kick-highlight-box li,
.el-sales .faq-highlight-box li {
  color: #475569 !important;
}
.el-sales .faq-youtube-highlight-box li::before,
.el-sales .faq-tiktok-highlight-box li::before,
.el-sales .faq-instagram-highlight-box li::before,
.el-sales .faq-twitch-highlight-box li::before,
.el-sales .faq-kick-highlight-box li::before,
.el-sales .faq-highlight-box li::before {
  color: var(--el-platform) !important;
}

/* Cliente: saldo vira ação compacta no topo, oposta ao Menu. */
.el-client .client-topbar {
  justify-content: space-between;
}
.el-client .topbar-balance-link {
  margin-left: auto;
  min-height: 46px;
  padding: 6px 12px 6px 7px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #D7E1EC;
  border-radius: 13px;
  background: #FFFFFF;
  color: #11243D;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .055);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.el-client .topbar-balance-link:hover,
.el-client .topbar-balance-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(24, 183, 160, .55);
  background: #FCFFFE;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .08);
}
.el-client .topbar-balance-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(24, 183, 160, .10);
  color: #0F9F8B;
}
.el-client .topbar-balance-icon svg {
  width: 18px;
  height: 18px;
}
.el-client .topbar-balance-copy {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
  line-height: 1;
}
.el-client .topbar-balance-copy span {
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
}
.el-client .topbar-balance-copy strong {
  color: #0F172A;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -.015em;
}
.el-client .dashboard-hero.dashboard-hero--compact {
  grid-template-columns: 1fr !important;
}
.el-client .dashboard-hero.dashboard-hero--compact .dashboard-hero-copy {
  max-width: 980px;
}

@media (max-width: 600px) {
  .el-client .client-topbar {
    gap: 8px;
  }
  .el-client .topbar-balance-link {
    min-height: 44px;
    padding: 5px 9px 5px 6px;
    gap: 7px;
    border-radius: 12px;
  }
  .el-client .topbar-balance-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .el-client .topbar-balance-copy span {
    display: none;
  }
  .el-client .topbar-balance-copy strong {
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .el-client .topbar-balance-link {
    padding-right: 7px;
  }
  .el-client .topbar-balance-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .el-client .topbar-balance-copy strong {
    font-size: 13px;
  }
}


/* Correção robusta 2026-08-08-6: cards informativos claros e saldo realmente compacto. */
body.el-sales div[class*="faq-"][class*="highlight-box"]{
  background:#FFFFFF !important;
  color:#475569 !important;
  border:1px solid #E2E8F0 !important;
  border-left:4px solid var(--el-platform) !important;
  box-shadow:0 4px 16px rgba(15,23,42,.045) !important;
}
body.el-sales div[class*="faq-"][class*="highlight-box"] h3{color:#0F172A !important;}
body.el-sales div[class*="faq-"][class*="highlight-box"] li{color:#475569 !important;}
body.el-client .client-topbar .topbar-balance-icon svg{
  width:17px !important;height:17px !important;min-width:17px !important;max-width:17px !important;min-height:17px !important;max-height:17px !important;display:block !important;
}
.el-client .hero-button-add-balance {
    background: #178F62 !important;
    color: #FFFFFF !important;
    border: 1px solid #147A54 !important;
    box-shadow: 0 4px 10px rgba(23, 143, 98, 0.18) !important;
}

.el-client .hero-button-add-balance:hover {
    background: #147A54 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.el-client .hero-button-add-balance svg {
    color: #FFFFFF !important;
}