/* ==========================================================================
   LOVE B2B — Portal de Assessores & Fornecedores
   Design System (reaproveita os tokens oficiais da Love, layout próprio)
   ========================================================================== */

:root {
  --primary-color: #183b54;
  --primary-blue: #183b54;
  --primary-hover: #122c3f;
  --primary-blue-hover: #122c3f;
  --primary-gradient: linear-gradient(135deg, #183b54 0%, #122c3f 100%);

  --secondary-color: #27394f;
  --secondary-peach: #27394f;
  --secondary-hover: #1d2b3c;

  --coral-accent: #E11D48;
  --bg-dashboard: #FFFFFF;
  --bg-light: #f3f3f3;
  --text-dark: #18181B;
  --text-muted: #71717A;
  --border-light: #F2F3F6;
  --border-card: #E4E4E4;
  --surface-card: #FFFFFF;
  --surface-dark: #333333;

  --sidebar-width: 256px;
  --sidebar-collapsed-width: 80px;
  --topbar-height: 76px;

  --radius-card: 10px;
  --radius-control: 8px;
  --shadow-soft: 0 2px 8px rgba(16,24,40,0.08);
  /* Cards no padrão da plataforma do anfitrião ("Benefícios Love"). */
  /* Cards sem sombra: só a borda fina (identidade sem cara de Tailwind). */
  --card-shadow: none;
  --card-shadow-hover: none;
  --shadow-nav-active: 0 6px 14px rgba(210, 141, 92,0.28);

  /* Margens do conteúdo principal: encolhem de forma gradual conforme a
     tela estreita (em vez de pular de um valor fixo grande direto pro
     valor de mobile), pra as caixas nunca ficarem desproporcionais. */
  --b2b-content-pad-x: clamp(1.25rem, 4vw, 2rem);
  --b2b-content-pad-y: clamp(1.25rem, 4vw, 2rem);
  --b2b-dashboard-pad-x: clamp(1.25rem, 8vw, 5.5rem);
  --b2b-dashboard-pad-y: clamp(1.25rem, 3vw, 2.5rem);
}

/* Transição suave nativa do navegador entre páginas (troca de menu) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.001ms !important;
  }
}

/* TEMA CLARO — cor primária = mesma cor do sidebar (#181D24), escopado para
   não afetar o login (que não tem data-theme e mantém o hero azul original) */
body[data-theme="light"] {
  --primary-color: #181D24;
  --primary-blue: #181D24;
  --primary-hover: #262D36;
  --primary-blue-hover: #262D36;
  --primary-gradient: linear-gradient(135deg, #181D24 0%, #262D36 100%);
}

/* TEMA ESCURO */
body[data-theme="dark"] {
  --bg-dashboard: #252525;
  --surface-dark: #333333;
  --surface-card: #333333;
  --border-light: rgba(255, 255, 255, 0.12);
  --border-card: rgba(255, 255, 255, 0.10);
  --text-dark: #FFFFFF;
  --primary-color: #181D24;
  --primary-blue: #181D24;
  --primary-hover: #262D36;
  --primary-blue-hover: #262D36;
  --primary-gradient: linear-gradient(135deg, #181D24 0%, #262D36 100%);
}

/* TEMA ESCURO — textos que usam --primary-blue como cor de texto (sem fundo
   próprio) ficariam pretos-sobre-preto, pois --primary-blue é preto no
   escuro. Aqui eles viram brancos para continuarem visíveis. */
body[data-theme="dark"] .dash-analytics-period-btn,
body[data-theme="dark"] .category-tab.active,
body[data-theme="dark"] .guide-link--active,
body[data-theme="dark"] .share-board-link-btn,
body[data-theme="dark"] .withdrawal-amount-message-btn,
body[data-theme="dark"] .withdrawal-alt-link,
body[data-theme="dark"] .payment-link-row-copy,
body[data-theme="dark"] .dash-analytics-boost-link,
body[data-theme="dark"] .dash-news-link,
body[data-theme="dark"] .dash-news-footer-link,
body[data-theme="dark"] .verified-badge,
body[data-theme="dark"] .wallet-eye-btn,
body[data-theme="dark"] .dash-analytics-period-popover button.is-active { color: #FFFFFF !important; }

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

html { -webkit-font-smoothing: antialiased; }

body, button, input, select, textarea, p, span, a, label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  color: var(--text-dark);
  background-color: var(--bg-dashboard);
  margin: 0;
  transition: background-color .15s ease, color .15s ease;
}

body[data-theme="dark"] {
  background-color: #252525 !important;
  color: #ffffff !important;
}

p { color: #52525B; line-height: 1.6; }

/* Textos dentro de balões e caixas azuis de mensagens são sempre 100% brancos */
.bg-\[\#183b54\],
.bg-\[\#183b54\] *,
.bubble-out,
.bubble-out * {
  color: #FFFFFF !important;
}

/* Balão de mensagem enviado pelo usuário da direita (Fundo #ebf4ff + Texto na cor primária #183b54) */
.chat-bubble-user-glass {
  background: #ebf4ff !important;
  background-color: #ebf4ff !important;
  border: 1px solid #d4e5ff !important;
  box-shadow: 0 1px 3px rgba(24, 59, 84, 0.08) !important;
  color: #183b54 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

.chat-bubble-user-glass,
.chat-bubble-user-glass p,
.chat-bubble-user-glass span,
.chat-bubble-user-glass div {
  color: #183b54 !important;
  text-shadow: none !important;
}

.chat-read-check { color: var(--primary-color); }

.chat-attach-wrap { position: relative; }
#chat-attach-dropdown { display: none; top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: 190px; }
#chat-attach-dropdown.show { display: flex; }

.chat-form-pick-item { cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.chat-form-pick-item:hover { border-color: var(--primary-blue); background: #F8FAFC; }
body[data-theme="dark"] .chat-form-pick-item:hover { background: #333333 !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D4D4D8; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #A1A1AA; }

/* ==========================================================================
   LANDING (institucional do Portal do Fornecedor, antes do login)
   ========================================================================== */

.landing-header {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  max-width: 1080px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(24, 59, 84, 0.08);
}

.landing-header-inner {
  padding: 0.6rem 0.6rem 0.6rem 1.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-logo { display: flex; align-items: center; }
.landing-logo img { height: 26px; width: auto; object-fit: contain; }

.landing-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.landing-header-actions .btn-secondary { background: rgba(255, 255, 255, 0.6); }
.landing-header-actions .btn-primary,
.landing-header-actions .btn-secondary { padding: 0.55rem 1.1rem; }

.landing-hero {
  background:
    radial-gradient(ellipse 900px 560px at 50% 0%, #EBF4FF 0%, rgba(235, 244, 255, 0) 65%),
    radial-gradient(ellipse 500px 400px at 90% 15%, #EBF4FF 0%, rgba(235, 244, 255, 0) 60%),
    #FFFFFF;
  position: relative;
  overflow: hidden;
  padding: 11rem 1.5rem 7rem;
  text-align: center;
}

.landing-hero::before,
.landing-hero::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgba(24, 59, 84, 0.05);
  filter: blur(2px);
}

.landing-hero::before { width: 420px; height: 420px; top: -180px; right: -140px; }
.landing-hero::after { width: 320px; height: 320px; bottom: -160px; left: -100px; background: rgba(24, 59, 84, 0.04); }

.landing-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.landing-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #EBF4FF;
  color: var(--primary-blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.landing-hero-title {
  color: #10233A;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.landing-hero-subtitle {
  color: #52667A;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 2.25rem;
}

.landing-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.btn-hero-primary,
.btn-hero-secondary {
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.btn-hero-primary {
  background: var(--primary-blue);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 8px 20px rgba(24, 59, 84, 0.25);
}
.btn-hero-primary:hover { background: var(--primary-blue-hover); }

.btn-hero-secondary {
  background: #FFFFFF;
  color: #10233A;
  border: 1.5px solid var(--border-light);
}
.btn-hero-secondary:hover { background: #F4F4F5; }

@media (max-width: 640px) {
  .landing-hero { padding: 7.5rem 1.25rem 4rem; }
  .landing-hero-title { font-size: 2rem; }
  .landing-header { width: calc(100% - 1.5rem); top: 0.875rem; }
  .landing-header-inner { padding: 0.5rem 0.5rem 0.5rem 1rem; }
  .landing-header-actions { gap: 0.4rem; }
  .landing-header-actions .btn-secondary,
  .landing-header-actions .btn-primary { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
}

/* ==========================================================================
   SIGNUP / VERIFICAÇÃO (cadastro do fornecedor)
   ========================================================================== */

.signup-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;
  padding: 2.5rem 1.25rem;
}

.signup-card { width: 100%; max-width: 420px; text-align: center; }

.signup-logo { display: inline-flex; margin-bottom: 1.5rem; }
.signup-logo img { height: 32px; width: auto; object-fit: contain; }

.signup-title { font-size: 1.5rem; font-weight: 800; color: #18181B; margin: 0 0 0.4rem; }
.signup-subtitle { font-size: 0.9375rem; color: #71717A; margin: 0 0 1.75rem; }

.signup-oauth { display: flex; flex-direction: column; gap: 0.75rem; }

.signup-oauth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
  color: #18181B;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.signup-oauth-btn:hover { background: #F4F4F5; border-color: #D4D4D8; }
.signup-oauth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.signup-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: #A1A1AA;
  font-size: 0.8125rem;
  font-weight: 600;
}
.signup-divider::before, .signup-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

.signup-email-form { display: flex; flex-direction: column; gap: 0.75rem; }

.signup-legal { font-size: 0.75rem; color: #A1A1AA; line-height: 1.5; margin: 1.5rem 0 0; }
.signup-legal a { color: #71717A; text-decoration: underline; }

.signup-footer-link { font-size: 0.875rem; color: #71717A; margin-top: 1.75rem; }
.signup-footer-link a { color: var(--primary-blue); font-weight: 600; text-decoration: none; }
.signup-footer-link a:hover { text-decoration: underline; }

.verify-code-inputs { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.75rem; }

.verify-code-box {
  width: 56px;
  height: 64px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #18181B;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.verify-code-box:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(24, 59, 84, 0.15); }

/* ==========================================================================
   ONBOARDING — modal de boas-vindas pós-cadastro
   ========================================================================== */

.onboarding-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

.onboarding-tips { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.onboarding-tips li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: #52525B;
  line-height: 1.5;
  padding: 0.75rem 0.875rem;
  background: var(--bg-light);
  border-radius: var(--radius-control);
}

/* ==========================================================================
   VENDAS — Proposta comercial
   ========================================================================== */

.proposal-items-table th { white-space: nowrap; }
.proposal-items-table td { padding: 0.5rem 0.5rem; vertical-align: middle; }
.proposal-items-table td:first-child { width: 1%; }

.proposal-item-index {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: #F4F4F5; color: #71717A; font-size: 0.75rem; font-weight: 700;
}

.proposal-cell-input {
  width: 100%; min-width: 60px;
  border: 1px solid var(--border-light); border-radius: 6px;
  padding: 0.4rem 0.5rem; font-size: 0.8125rem; color: #18181B; background: #fff;
}
.proposal-cell-input:focus { outline: none; border-color: var(--primary-blue); }
.proposal-cell-readonly { background: #F4F4F5; color: #71717A; }

.proposal-cell-total { font-size: 0.8125rem; font-weight: 700; color: #18181B; white-space: nowrap; }

.proposal-item-icon-btn {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  border: none; background: transparent; color: #A1A1AA; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.proposal-item-icon-btn:hover { background: #F4F4F5; color: var(--primary-blue); }
.proposal-item-remove-btn:hover { color: #B91C1C; }

.proposal-add-item-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: none; background: transparent; color: var(--primary-blue);
  font-size: 0.8125rem; font-weight: 700; cursor: pointer; padding: 0.3rem 0;
}
.proposal-add-item-btn:hover { text-decoration: underline; }

.lead-add-product-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--primary-blue); font-size: 0.8125rem; font-weight: 700;
  margin-top: 0.5rem; text-decoration: none;
}
.lead-add-product-link:hover { text-decoration: underline; }

.proposal-client-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border-card); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
  padding: 0.4rem; max-height: 260px; overflow-y: auto;
}
.proposal-client-dropdown-item { padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer; }
.proposal-client-dropdown-item:hover { background: #F4F4F5; }
.proposal-client-dropdown-item-name { font-size: 0.8125rem; font-weight: 600; color: #18181B; margin: 0; }
.proposal-client-dropdown-item-meta { font-size: 0.75rem; color: #71717A; margin: 0.1rem 0 0; }
.proposal-client-dropdown-add {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.6rem; border-radius: 7px; cursor: pointer;
  color: var(--primary-blue); font-weight: 700; font-size: 0.8125rem;
}
.proposal-client-dropdown-add:hover { background: #F4F4F5; }

body[data-theme="dark"] .proposal-item-index { background: #333333 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .proposal-cell-input { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .proposal-cell-readonly { background: #1c1c1c !important; color: #A1A1AA !important; }
body[data-theme="dark"] .proposal-client-dropdown { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .proposal-client-dropdown-item:hover,
body[data-theme="dark"] .proposal-client-dropdown-add:hover { background: #333333 !important; }
body[data-theme="dark"] .proposal-client-dropdown-item-name { color: #FFFFFF !important; }
body[data-theme="dark"] .proposal-client-dropdown-item-meta { color: #A1A1AA !important; }
body[data-theme="dark"] .proposal-cell-total { color: #FFFFFF !important; }
body[data-theme="dark"] .proposal-item-icon-btn:hover { background: #333333 !important; }

/* -------------------- Notas fiscais (Vendas) -------------------- */

.notas-fiscais-layout { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.notas-fiscais-main { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 1rem; }
.notas-fiscais-sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; }

.notas-fiscais-toolbar { display: flex; gap: 0.75rem; }
.notas-fiscais-search {
  flex: 1; display: flex; align-items: center; gap: 0.5rem;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-control);
  padding: 0.65rem 1rem; color: #A1A1AA;
}
.notas-fiscais-search input {
  flex: 1; border: none; outline: none; background: transparent; font-size: 0.875rem; color: #18181B;
}
.notas-fiscais-print-btn { padding: 0.65rem; }

.notas-fiscais-sidebar-title { font-size: 0.75rem; font-weight: 700; color: #A1A1AA; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.75rem; }
.notas-fiscais-sidebar-action {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  border: none; background: transparent; padding: 0.5rem 0;
  font-size: 0.8125rem; font-weight: 600; color: #3F3F46; cursor: pointer; text-align: left;
}
.notas-fiscais-sidebar-action svg { flex-shrink: 0; color: #A1A1AA; }
.notas-fiscais-sidebar-action:hover { color: var(--primary-blue); }
.notas-fiscais-sidebar-action:hover svg { color: var(--primary-blue); }

.notas-fiscais-info-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; font-size: 0.8125rem; color: #71717A; }
.notas-fiscais-info-row strong { color: #18181B; font-size: 0.9375rem; }

body[data-theme="dark"] .notas-fiscais-search { background: #1c1c1c !important; border-color: #404040 !important; }
body[data-theme="dark"] .notas-fiscais-search input { color: #FFFFFF !important; }
body[data-theme="dark"] .notas-fiscais-sidebar-action { color: #D4D4D8 !important; }
body[data-theme="dark"] .notas-fiscais-info-row strong { color: #FFFFFF !important; }

/* ==========================================================================
   PÁGINAS DO SITE — URL personalizada e personalização da vitrine
   ========================================================================== */

.site-url-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  overflow: hidden;
  max-width: 420px;
}

.site-url-prefix {
  background: var(--bg-light);
  color: #71717A;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 0.875rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-right: 1px solid var(--border-light);
  flex-shrink: 0;
}

.site-url-group input {
  border: none;
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: #18181B;
  background: #fff;
}
.site-url-group input:focus { outline: none; }

.site-upload-zone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-control);
  background: var(--bg-light);
  color: #71717A;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.site-upload-zone:hover { border-color: var(--primary-blue); background: #F4F4F5; }

.color-swatch-row { display: flex; align-items: center; gap: 0.75rem; }

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: transform .15s ease, border-color .15s ease;
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.active { border-color: #18181B; }
.color-swatch.active::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 2px solid #fff;
}

.settings-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-card);
}
.settings-switch-row:last-child { border-bottom: none; padding-bottom: 0; }

.settings-switch-label { font-size: 0.875rem; font-weight: 600; color: #18181B; margin: 0; }
.settings-switch-desc { font-size: 0.75rem; color: #71717A; margin: 0.15rem 0 0; }

.settings-switch { position: relative; display: inline-block; width: 40px; height: 24px; flex-shrink: 0; }
.settings-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }

.settings-switch-track {
  position: absolute;
  inset: 0;
  background: #D4D4D8;
  border-radius: 999px;
  transition: background-color .15s ease;
}
.settings-switch-track::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 999px;
  transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.settings-switch input:checked ~ .settings-switch-track { background: var(--primary-blue); }
.settings-switch input:checked ~ .settings-switch-track::before { transform: translateX(16px); }
#builder-elements-panel .settings-switch input:checked ~ .settings-switch-track { background: #ebf4ff; }

body[data-theme="dark"] .site-url-prefix { background: #333333 !important; border-right-color: #404040 !important; color: #A1A1AA !important; }
body[data-theme="dark"] .site-url-group { border-color: #404040 !important; }
body[data-theme="dark"] .site-url-group input { background: #252525 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .site-upload-zone { background: #333333 !important; border-color: #404040 !important; color: #A1A1AA !important; }
body[data-theme="dark"] .settings-switch-row { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .settings-switch-label { color: #FFFFFF !important; }
body[data-theme="dark"] .settings-switch-track { background: #4b4b4b !important; }

.site-tab-panel { margin-top: 0; }

/* -------------------- Formulários: lista -------------------- */

.forms-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: 720px; }

.form-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: #fff;
}

.form-list-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-light);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.form-list-item-icon svg { width: 19px; height: 19px; }
.form-list-item-icon-edit { background: transparent; color: #333333; }
.form-list-item-icon-edit svg { width: 22px; height: 22px; }
body[data-theme="dark"] .form-list-item-icon-edit { color: #E4E4E7 !important; }

.form-list-item-create {
  cursor: pointer;
  border-style: dashed;
  transition: border-color .15s ease, background-color .15s ease;
}
.form-list-item-create:hover { border-color: var(--primary-blue); background: #F8FAFC; }
.form-list-item-icon-create { background: transparent; color: var(--primary-blue); }
.form-list-item-icon-create svg { width: 22px; height: 22px; }
body[data-theme="dark"] .form-list-item-create:hover { background: #333333 !important; }

.form-list-item-info { flex: 1; min-width: 0; }
.form-list-item-title { font-size: 0.9375rem; font-weight: 700; color: #18181B; margin: 0; }
.form-list-item-meta { font-size: 0.75rem; color: #71717A; margin: 0.2rem 0 0; }

.form-list-item-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.form-list-item-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: #71717A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.form-list-item-btn:hover { background: #F4F4F5; }
.form-list-item-btn svg { width: 15px; height: 15px; }

.forms-empty {
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-card);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #71717A;
  font-size: 0.875rem;
  max-width: 720px;
}

/* -------------------- Formulários: drawer lateral -------------------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.4);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }

.form-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 580px;
  background: #fff;
  background-size: cover;
  background-position: center;
  z-index: 96;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1), background-color .15s ease;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.14);
}
.form-drawer.show { transform: translateX(0); }

/* Padrão de todos os drawers (modelo: Adicionar produto ou serviço):
   cabeçalho cinza bem claro, corpo e rodapé brancos. */
.form-drawer,
.form-drawer-body,
.form-drawer-add-field-wrap,
.form-drawer-footer { background-color: #FFFFFF; }
.form-drawer-header { background-color: #FAFAFA; }
/* Drawer com imagem/cor de fundo própria (editor de formulário): o
   cabeçalho fica transparente pra mostrar o fundo. */
.form-drawer.has-custom-bg .form-drawer-header,
.form-drawer.has-custom-bg .form-drawer-footer { background-color: transparent; }

.form-drawer-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.form-drawer.has-custom-bg .form-drawer-header { border-bottom-color: rgba(255, 255, 255, 0.25); }

.form-drawer.has-custom-bg .form-drawer-header-main {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  backdrop-filter: blur(3px);
}

.form-drawer.has-custom-bg .form-drawer-close {
  background: rgba(255, 255, 255, 0.85);
}
.form-drawer.has-custom-bg .form-drawer-close:hover { background: #fff; }

.form-drawer.has-custom-bg .form-drawer-body,
.form-drawer.has-custom-bg .form-drawer-add-field-wrap {
  background: transparent;
}

.form-drawer-header-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }

.form-drawer-title-input {
  width: 100%;
  font-size: 1.1875rem;
  font-weight: 700;
  color: #18181B;
  border: none;
  outline: none;
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
}
.form-drawer-title-input:focus { border-bottom-color: var(--primary-blue); }

.form-drawer-description-input {
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #71717A;
  padding: 0;
  min-height: 1.4em;
}

.form-drawer-close {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #71717A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s ease;
}
.form-drawer-close:hover { background: #F4F4F5; }

.form-drawer-bg-field { position: relative; flex-shrink: 0; }

.form-drawer-bg-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.92);
  color: #3F3F46;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.form-drawer-bg-edit-btn:hover { background: #fff; border-color: var(--primary-blue); color: var(--primary-blue); }
.form-drawer-bg-edit-btn svg { width: 17px; height: 17px; }

.form-drawer-bg-popover { width: 220px; }

.form-drawer-bg-tabs {
  display: flex;
  gap: 0.3rem;
  background: #F4F4F5;
  border-radius: 8px;
  padding: 0.2rem;
}
.form-drawer-bg-tab {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 0.35rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #71717A;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.form-drawer-bg-tab.active { background: #fff; color: #18181B; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }

.form-drawer-bg-panel { display: flex; flex-direction: column; }

.form-drawer-bg-remove {
  border: none;
  background: transparent;
  color: #B91C1C;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0 0;
  text-align: left;
}
.form-drawer-bg-remove:hover { text-decoration: underline; }

body[data-theme="dark"] .form-drawer.has-custom-bg .form-drawer-header-main { background: rgba(37, 37, 37, 0.85) !important; }
body[data-theme="dark"] .form-drawer.has-custom-bg .form-drawer-close { background: rgba(37, 37, 37, 0.9) !important; }
body[data-theme="dark"] .form-drawer-bg-edit-btn { background: rgba(37, 37, 37, 0.92) !important; border-color: #404040 !important; color: #ebf4ff !important; }
body[data-theme="dark"] .form-drawer-bg-tabs { background: #1c1c1c !important; }
body[data-theme="dark"] .form-drawer-bg-tab { color: #A1A1AA !important; }
body[data-theme="dark"] .form-drawer-bg-tab.active { background: #333333 !important; color: #FFFFFF !important; }

.form-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #FFFFFF;
}

.form-drawer-add-field-wrap { padding: 0 1.5rem 1.5rem; background: #FFFFFF; flex-shrink: 0; }

.form-drawer-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

/* -------------------- Respostas -------------------- */

.responses-drawer-title { font-size: 1.1875rem; font-weight: 700; color: #18181B; margin: 0; }
.responses-drawer-subtitle { font-size: 0.8125rem; color: #71717A; margin: 0.25rem 0 0; }

.responses-drawer-back {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: #71717A;
  padding: 0;
  margin-bottom: 0.5rem;
}
.responses-drawer-back:hover { color: #18181B; }
.responses-drawer-back svg { width: 14px; height: 14px; }

.response-list-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background-color .15s ease;
}
.response-list-row:hover { border-color: var(--primary-blue); background: #F8FAFC; }

.response-list-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.response-list-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.response-list-row-name { font-size: 0.875rem; font-weight: 700; color: #18181B; }
.response-list-row-email { font-size: 0.75rem; color: #71717A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.response-list-row-chevron { display: flex; color: #A1A1AA; flex-shrink: 0; }
.response-list-row-chevron svg { width: 16px; height: 16px; }

.response-answer-row {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-light);
}
.response-answer-row:last-child { border-bottom: none; padding-bottom: 0; }
.response-answer-question { font-size: 0.75rem; font-weight: 600; color: #71717A; margin: 0 0 0.25rem; }
.response-answer-value { font-size: 0.875rem; color: #18181B; margin: 0; line-height: 1.5; white-space: pre-wrap; }

body[data-theme="dark"] .responses-drawer-title { color: #FFFFFF !important; }
body[data-theme="dark"] .responses-drawer-back { color: #A1A1AA !important; }
body[data-theme="dark"] .responses-drawer-back:hover { color: #FFFFFF !important; }
body[data-theme="dark"] .response-list-row { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .response-list-row:hover { background: #3a3a3a !important; }
body[data-theme="dark"] .response-list-row-name,
body[data-theme="dark"] .response-answer-value { color: #FFFFFF !important; }
body[data-theme="dark"] .response-answer-row { border-bottom-color: #404040 !important; }

.form-field-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 1.125rem;
  background: #fff;
}

.form-field-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.form-field-question-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--border-light);
  padding: 0.4rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #18181B;
  background: transparent;
}
.form-field-question-input:focus { outline: none; border-bottom-color: var(--primary-blue); }

.form-field-type-select {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3F3F46;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
}

.form-field-preview-line {
  border: none;
  border-bottom: 1px dashed var(--border-light);
  color: #A1A1AA;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  width: 65%;
  background: transparent;
  pointer-events: none;
}

.form-field-preview-box {
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  color: #A1A1AA;
  font-size: 0.875rem;
  padding: 0.65rem 0.875rem;
  min-height: 64px;
  background: transparent;
}

.form-field-freetext {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.65rem 0.875rem;
  font-size: 0.875rem;
  color: #18181B;
  min-height: 70px;
  font-family: inherit;
  resize: vertical;
}
.form-field-freetext:focus { outline: none; border-color: var(--primary-blue); }

.form-field-options { display: flex; flex-direction: column; gap: 0.6rem; }

.form-field-option-row { display: flex; align-items: center; gap: 0.6rem; }
.form-field-option-row .radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid #A1A1AA;
  flex-shrink: 0;
}
.form-field-option-row .checkbox-square {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #A1A1AA;
  flex-shrink: 0;
}

.form-field-option-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--border-light);
  padding: 0.35rem 0;
  font-size: 0.875rem;
  color: #18181B;
  background: transparent;
}
.form-field-option-input:focus { outline: none; border-bottom-color: var(--primary-blue); }

.form-field-option-remove {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #A1A1AA;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-field-option-remove:hover { color: #B91C1C; }

.form-field-add-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #71717A;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0;
  margin-top: 0.2rem;
}
.form-field-add-option:hover { color: var(--primary-blue); }

.form-field-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-card);
}

.form-field-footer-actions { display: flex; align-items: center; gap: 0.3rem; }

.form-field-icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #71717A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.form-field-icon-btn svg { width: 14px; height: 14px; }
.form-field-icon-btn:hover { background: #F4F4F5; color: #3F3F46; }
.form-field-icon-btn-danger:hover { background: #FEE2E2; color: #B91C1C; }

.form-field-required-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #3F3F46;
  cursor: pointer;
}

.form-fields-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 220px;
  padding: 3.5rem 1.5rem;
  text-align: center;
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-card);
  color: #A1A1AA;
  background: #fff;
}
.form-fields-empty svg { width: 32px; height: 32px; color: #D4D4D8; }
.form-fields-empty span { max-width: 260px; line-height: 1.5; font-size: 0.8125rem; }

.form-add-field-btn {
  width: 100%;
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-card);
  padding: 0.9rem;
  text-align: center;
  color: #71717A;
  font-size: 0.875rem;
  font-weight: 600;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.form-add-field-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); }

@media (max-width: 640px) {
  .form-drawer { max-width: 100%; }
}

body[data-theme="dark"] .form-list-item { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .form-list-item-icon { background: #252525 !important; }
body[data-theme="dark"] .form-list-item-title { color: #FFFFFF !important; }
body[data-theme="dark"] .form-list-item-btn { background: #333333 !important; border-color: #404040 !important; color: #A1A1AA !important; }
body[data-theme="dark"] .form-drawer { background: #252525 !important; }
body[data-theme="dark"] .form-drawer-header { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .form-drawer-title-input { color: #FFFFFF !important; }
body[data-theme="dark"] .form-drawer-description-input { color: #A1A1AA !important; }
body[data-theme="dark"] .form-drawer-body,
body[data-theme="dark"] .form-drawer-add-field-wrap { background: #1c1c1c !important; }
body[data-theme="dark"] .form-drawer-footer { border-top-color: #404040 !important; }
body[data-theme="dark"] .form-drawer:not(.has-custom-bg) .form-drawer-header,
body[data-theme="dark"] .form-drawer:not(.has-custom-bg) .form-drawer-footer { background-color: #252525 !important; }
body[data-theme="dark"] .form-field-card { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .form-field-question-input { color: #FFFFFF !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .form-field-type-select { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .form-field-option-input { color: #FFFFFF !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .form-field-freetext { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .form-add-field-btn { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .form-field-footer { border-top-color: #404040 !important; }
body[data-theme="dark"] .form-field-required-toggle { color: #D4D4D8 !important; }
body[data-theme="dark"] .form-field-icon-btn:hover { background: #404040 !important; }
body[data-theme="dark"] .form-fields-empty { background: #333333 !important; border-color: #404040 !important; }

/* ==========================================================================
   DASHBOARD SHELL — Sidebar fixo (ícone + texto, sem unfold)
   ========================================================================== */

.b2b-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* A página só aparece de uma vez (sidebar, topbar e conteúdo juntos) depois
   que tudo estiver pronto — ver window.b2bPageReady em js/shell.js — em vez
   de cada elemento surgindo num momento diferente conforme vai carregando. */
body:not(.app-ready) .b2b-shell { opacity: 0; visibility: hidden; }

/* O ícone/fundo do loading só aparece num carregamento direto (URL digitada,
   favorito, atualização de página) — numa navegação de dentro do próprio
   B2B (.nav-transition, ver js/shell.js) a transição nativa do navegador já
   cobre a troca, então só o conteúdo fica escondido até ficar pronto, sem
   ícone por cima. Só vale em página com data-page (as que carregam o
   shell.js, único lugar que adiciona .app-ready) — login, signup, index
   etc. não têm shell e ficariam presas no loading pra sempre. */
body[data-page]:not(.app-ready):not(.nav-transition)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
}
body[data-page]:not(.app-ready):not(.nav-transition)::after {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid var(--border-card);
  border-top-color: var(--primary-blue);
  z-index: 10000;
  animation: b2b-app-loading-spin 0.7s linear infinite;
}
@keyframes b2b-app-loading-spin { to { transform: rotate(360deg); } }
body[data-page][data-theme="dark"]:not(.app-ready):not(.nav-transition)::before { background: #181D24; }

.b2b-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
}

body[data-theme="dark"] .b2b-avatar { background: #FFFFFF; }

/* -------------------- Sidebar único (fixo, recolhível) -------------------- */

.b2b-sidebar {
  width: var(--sidebar-width);
  background-color: #181D24;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 2px 0 6px rgba(16, 24, 40, 0.04);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed .b2b-sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .b2b-main { margin-left: var(--sidebar-collapsed-width); }

.sidebar-edge-toggle {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 56px;
  border-radius: 999px;
  background: #181D24;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C4C4CC;
  cursor: pointer;
  padding: 0;
  z-index: 61;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-edge-toggle:hover { background: #22282F; color: #FFFFFF; box-shadow: 0 3px 10px rgba(16, 24, 40, 0.24); }
.sidebar-edge-toggle svg { width: 14px; height: 14px; }

.sidebar-brand-top {
  width: 100%;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 1.375rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.sidebar-collapsed .sidebar-brand-top { justify-content: center; padding: 0; }

.sidebar-brand-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; overflow: hidden; min-width: 0; }
.sidebar-brand-icon { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.sidebar-brand-word { height: 19px; width: auto; object-fit: contain; flex-shrink: 0; }
.sidebar-icon-dark, .sidebar-word-dark { display: none; }
body[data-theme="dark"] .sidebar-icon-light, body[data-theme="dark"] .sidebar-word-light { display: none; }
body[data-theme="dark"] .sidebar-icon-dark, body[data-theme="dark"] .sidebar-word-dark { display: block; }
body.sidebar-collapsed .sidebar-brand-word { display: none; }

/* Rail da sidebar: fundo sempre escuro (claro ou escuro), então a logo usa
   sempre a variante clara — diferente do rodapé, que segue o tema normalmente. */
.sidebar-brand-link .sidebar-icon-light, .sidebar-brand-link .sidebar-word-light { display: none !important; }
.sidebar-brand-link .sidebar-icon-dark, .sidebar-brand-link .sidebar-word-dark { display: block !important; }

/* Recolhido: só o ícone — a palavra "Love" some, em qualquer variante/tema. */
body.sidebar-collapsed .sidebar-brand-link .sidebar-word-dark,
body.sidebar-collapsed .sidebar-brand-link .sidebar-word-light { display: none !important; }

.sidebar-toggle-icon.icon-expand { display: none; }
body.sidebar-collapsed .sidebar-toggle-icon.icon-collapse { display: none; }
body.sidebar-collapsed .sidebar-toggle-icon.icon-expand { display: block; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-control);
  font-size: 0.875rem;
  font-weight: 600;
  color: #C4C4CC;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.sidebar-nav-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-control);
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed .sidebar-nav-item:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: #18181B;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 120;
  pointer-events: none;
  animation: b2b-tooltip-in 0.12s ease both;
}

@keyframes b2b-tooltip-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

body.sidebar-collapsed[data-theme="dark"] .sidebar-nav-item:hover::after {
  background: #FFFFFF !important;
  color: #18181B !important;
}

.sidebar-nav-item svg:not(.sidebar-chevron) {
  width: 23px;
  height: 23px;
  stroke-width: 2.15px;
  color: #C4C4CC;
  flex-shrink: 0;
}

.sidebar-nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.sidebar-nav-item:hover svg:not(.sidebar-chevron) { color: #FFFFFF; }

.sidebar-nav-item.sidebar-nav-label { cursor: default; }
.sidebar-nav-item.sidebar-nav-label:hover { background: transparent; color: #C4C4CC; }
.sidebar-nav-item.sidebar-nav-label:hover svg:not(.sidebar-chevron) { color: rgba(255, 255, 255, 0.4); }

.sidebar-nav-item.active {
  background: transparent;
  color: #FFFFFF;
  border: none;
  box-shadow: none;
}

.sidebar-nav-item.active .sidebar-nav-icon-box {
  background: #EBF4FF;
  border: 1px solid transparent;
  box-shadow: none;
}

.sidebar-nav-item.active svg:not(.sidebar-chevron) { color: #181D24; stroke-width: 2.25px; }

.nav-badge {
  background: #BF612E;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.sidebar-nav-item .nav-badge { margin-left: auto; }

.sidebar-chevron {
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.45);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sidebar-subnav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.2rem 0 0.4rem 2.5rem;
}

.sidebar-subnav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: all 0.15s ease;
}

.sidebar-subnav-item:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }

.sidebar-subnav-item.active {
  background: #EBF4FF;
  color: #333333;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: none;
}

.sidebar-bottom {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.sidebar-collapsed .b2b-sidebar { background-color: #181D24; }
body.sidebar-collapsed .upgrade-card { padding: 0.75rem 0.4rem; background: transparent !important; border-color: transparent !important; }
body.sidebar-collapsed .sidebar-nav-item { justify-content: center; padding: 0.25rem; }
body.sidebar-collapsed .sidebar-nav-item .sidebar-nav-text,
body.sidebar-collapsed .sidebar-chevron,
body.sidebar-collapsed .sidebar-subnav { display: none; }

body.sidebar-collapsed .upgrade-card-title,
body.sidebar-collapsed .upgrade-card-desc,
body.sidebar-collapsed .upgrade-card-btn,
body.sidebar-collapsed .upgrade-card-plan { display: none; }

body.sidebar-collapsed .upgrade-card-icon {
  background: transparent !important;
  border: 1.5px solid #EBF4FF !important;
  color: #EBF4FF !important;
}

body.sidebar-collapsed[data-theme="dark"] .upgrade-card-icon {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Presente (convidar e ganhar): sem círculo em volta, em qualquer estado — só
   o ícone em azul claro, nunca uma bolinha preenchida atrás dele. */
body.sidebar-collapsed .upgrade-card-icon--gift {
  background: transparent !important;
  border: none !important;
  color: #EBF4FF !important;
}

body.sidebar-collapsed[data-theme="dark"] .upgrade-card-icon--gift {
  background: transparent !important;
  border: none !important;
}

.upgrade-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="light"] .upgrade-card { background: rgba(255, 255, 255, 0.06); }

.upgrade-card-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.upgrade-card-face--pro { display: none; }
.upgrade-card.is-pro .upgrade-card-face--free { display: none; }
.upgrade-card.is-pro .upgrade-card-face--pro { display: flex; }

.upgrade-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
  text-decoration: none;
  flex-shrink: 0;
}

.upgrade-card-icon--gift { background: transparent; color: #EBF4FF; width: auto; height: auto; }
.upgrade-card-icon svg { width: 22px; height: 22px; }
.upgrade-card-icon--gift svg { width: 32px; height: 32px; }

.upgrade-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 0.375rem;
}

.upgrade-card-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.upgrade-card-btn { width: 100%; justify-content: center; }

.upgrade-card-face--free .upgrade-card-btn { background: #EBF4FF; color: #333333; }
.upgrade-card-face--free .upgrade-card-btn:hover { background: #DCEAFB; }

.upgrade-card-plan {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.75rem 0 0;
}

.upgrade-card-plan strong { color: rgba(255, 255, 255, 0.8); }

body[data-theme="dark"] .upgrade-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
body[data-theme="dark"] .upgrade-card-icon { background: #4B4B4B; }
body[data-theme="dark"] .upgrade-card-icon--gift { background: transparent; color: #C7305B; }
body[data-theme="dark"] .upgrade-card-title { color: #FFFFFF; }
body[data-theme="dark"] .upgrade-card-desc { color: rgba(255, 255, 255, 0.65); }
body[data-theme="dark"] .upgrade-card-plan { color: rgba(255, 255, 255, 0.5); }
body[data-theme="dark"] .upgrade-card-plan strong { color: rgba(255, 255, 255, 0.8); }

body[data-theme="dark"] .b2b-sidebar { background-color: #181D24 !important; border-right-color: #404040 !important; }
body[data-theme="dark"] .sidebar-brand-top { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .sidebar-edge-toggle { background: #181D24 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #C4C4CC !important; }
body[data-theme="dark"] .sidebar-edge-toggle:hover { background: #262D36 !important; color: #ffffff !important; }
body[data-theme="dark"] .upgrade-card-face--free .upgrade-card-btn { background: #EBF4FF !important; color: #333333 !important; }
body[data-theme="dark"] .upgrade-card-face--free .upgrade-card-btn:hover { background: #DCEAFB !important; }
body[data-theme="dark"] .sidebar-nav-item,
body[data-theme="dark"] .sidebar-nav-item svg,
body[data-theme="dark"] .sidebar-nav-item svg * { color: #ffffff !important; stroke: #ffffff !important; }
body[data-theme="dark"] .sidebar-nav-item:hover { background: #4b4b4b !important; color: #ffffff !important; }
body[data-theme="dark"] .sidebar-nav-item.active { background: #4b4b4b !important; color: #ffffff !important; border: 1px solid #595959 !important; }
body[data-theme="dark"] .sidebar-bottom { border-top-color: #404040 !important; }
body[data-theme="dark"] .sidebar-subnav-item { color: #ffffff !important; }
body[data-theme="dark"] .sidebar-subnav-item:hover { background-color: #404040 !important; color: #ffffff !important; }
body[data-theme="dark"] .sidebar-subnav-item.active { background-color: #4b4b4b !important; color: #ffffff !important; border: 1px solid #595959 !important; }
body[data-theme="dark"] .sidebar-subnav-item .nav-badge,
body[data-theme="dark"] .sidebar-nav-item .nav-badge { background: #4b4b4b !important; color: #ffffff !important; border: 1px solid #595959 !important; }
body[data-theme="dark"] .guias-sidebar h1 { color: #ebf4ff !important; }

/* -------------------- Main / Topbar / Conteúdo -------------------- */

.b2b-main {
  flex: 1;
  height: 100vh;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background-color: var(--bg-light);
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-topbar {
  height: var(--topbar-height);
  background: #F3F3F3;
  border-bottom: 1px solid #E4E4E4;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

body[data-theme="dark"] .b2b-topbar { background: #181D24 !important; border-bottom-color: #404040 !important; }

.b2b-content {
  padding: var(--b2b-content-pad-y) var(--b2b-content-pad-x);
  flex: 1;
  overflow-y: auto;
  background-color: var(--bg-dashboard);
  display: flex;
  flex-direction: column;
}

body[data-page="dashboard"] .b2b-content {
  padding: var(--b2b-dashboard-pad-y) var(--b2b-dashboard-pad-x);
}

body[data-page="dashboard"] .b2b-footer {
  margin: auto calc(-1 * var(--b2b-dashboard-pad-x)) calc(-1 * var(--b2b-dashboard-pad-y));
  padding: 1.75rem var(--b2b-dashboard-pad-x) 1.25rem;
}

.b2b-footer {
  flex-shrink: 0;
  margin: auto calc(-1 * var(--b2b-content-pad-x)) calc(-1 * var(--b2b-content-pad-y));
  padding: 1.75rem var(--b2b-content-pad-x) 1.25rem;
  background: #F3F3F3;
  border-top: 1px solid var(--border-light);
}

/* Barra de cabeçalho de página (título + ação principal) — mesmo padrão
   visual da plataforma logada (ex: "Meus convidados"): uma faixa cinza
   colada nas bordas, com o título e o botão de ação na mesma linha. */
.b2b-header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  /* Altura do botão de cabeçalho (42px) + padding: a barra — e a posição do
     título — fica igual em página com ou sem botão (ex.: Configurações,
     onde Preferências não tem botão e Perfil/Minha Empresa têm). */
  min-height: calc(42px + 1.8rem + 1px); /* + a borda de baixo (box-sizing: border-box) */
  margin: calc(-1 * var(--b2b-content-pad-y)) calc(-1 * var(--b2b-content-pad-x)) 1.25rem;
  padding: 0.9rem var(--b2b-content-pad-x);
  background: #FAFAFA;
  border-bottom: 1px solid var(--border-card);
}
.b2b-header-bar h2 { margin: 0; }
body[data-theme="dark"] .b2b-header-bar { background: #181D24 !important; border-bottom-color: #404040 !important; }

body[data-theme="dark"] .b2b-footer {
  background: #181D24 !important;
  border-top-color: #404040 !important;
}

.b2b-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.b2b-footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.b2b-footer-logo .sidebar-icon-light, .b2b-footer-logo .sidebar-icon-dark { width: 36px; height: 36px; object-fit: contain; }
.b2b-footer-logo .sidebar-word-light, .b2b-footer-logo .sidebar-word-dark { height: 18px; width: auto; object-fit: contain; }

.b2b-footer-desc {
  font-size: 0.8125rem;
  color: #71717A;
  max-width: 380px;
  line-height: 1.5;
}
body[data-theme="dark"] .b2b-footer-desc { color: #A1A1AA !important; }

/* Termos/Privacidade mais perto da linha de baixo que do texto acima —
   mesmo encaixe do rodapé do painel do anfitrião (index.html, !mt-7). */
.b2b-footer-legal-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.b2b-footer-legal-links a {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #18181B;
  text-decoration: none;
}
.b2b-footer-legal-links a:hover { text-decoration: underline; }
body[data-theme="dark"] .b2b-footer-legal-links a { color: #FFFFFF !important; }

.b2b-footer-social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.b2b-footer-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #18181B;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color .15s ease, transform .15s ease;
}
.b2b-footer-social-btn svg { width: 15px; height: 15px; }
.b2b-footer-social-btn:hover { background: var(--primary-color); transform: translateY(-2px); }
body[data-theme="dark"] .b2b-footer-social-btn { background: #4b4b4b !important; }
body[data-theme="dark"] .b2b-footer-social-btn:hover { background: var(--primary-color) !important; }

.b2b-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.75rem;
  color: #71717A;
}
body[data-theme="dark"] .b2b-footer-bottom { border-top-color: #404040 !important; color: #A1A1AA !important; }

body[data-theme="dark"] .b2b-shell,
body[data-theme="dark"] .b2b-content { background-color: #1C2125 !important; }
body[data-theme="dark"] .b2b-main { background-color: #1C2125 !important; }

.b2b-view { display: none; }
.b2b-view.active { display: block; }

/* -------------------- Barra de busca / botão upgrade / ícones topbar -------------------- */

.topbar-account-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: 1.5rem;
  flex-shrink: 0;
}

.topbar-account-name {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #52525B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
body[data-theme="dark"] .topbar-account-name { color: rgba(255, 255, 255, 0.75) !important; }

.topbar-search-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: var(--radius-card);
  padding: 0.5rem 0.875rem;
  color: #71717A;
  font-size: 0.8125rem;
  cursor: pointer;
  width: 340px;
  transition: border-color .15s ease, background-color .15s ease;
}

.topbar-search-trigger:hover { background: #F4F4F5; }
.topbar-search-trigger span { flex: 1; text-align: left; }

.topbar-search-trigger kbd {
  font-size: 0.6875rem;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
  color: #A1A1AA;
}

body[data-theme="dark"] .topbar-search-trigger { background: #4E4E4E !important; color: #ffffff !important; }
body[data-theme="dark"] .topbar-search-trigger:hover { background: #5A5A5A !important; }
body[data-theme="dark"] .topbar-search-trigger kbd { background: #5A5A5A !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; }

.topbar-upgrade-btn {
  display: inline-flex;
  align-items: center;
  color: var(--primary-color);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: color .15s ease;
}

.topbar-upgrade-btn:hover { color: var(--primary-hover); }

body[data-theme="dark"] .topbar-upgrade-btn { color: #FFFFFF !important; }
body[data-theme="dark"] .topbar-upgrade-btn:hover { color: rgba(255, 255, 255, 0.75) !important; }

.topbar-icon-btn-wrap { position: relative; }

.topbar-icon-plain {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background-color .15s ease;
}

.topbar-icon-plain svg { stroke-width: 2px; }
.topbar-services-mobile-link { display: none; }
.topbar-icon-plain:hover { background: rgba(0, 0, 0, 0.06); }
body[data-theme="dark"] .topbar-icon-plain { color: #FFFFFF; }
body[data-theme="dark"] .topbar-icon-plain:hover { background: rgba(255, 255, 255, 0.12); }

.topbar-icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 9999px;
  background: #C7305B;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

body[data-theme="dark"] .topbar-icon-badge { background: #C7305B !important; color: #FFFFFF !important; font-weight: 700; }

.topbar-avatar-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
  padding: 0.5rem;
  z-index: 50;
}

.topbar-dropdown.show { display: block; }

body[data-theme="dark"] .topbar-dropdown { background: #333333 !important; border-color: #404040 !important; }

.topbar-dropdown-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #71717A;
  padding: 0.375rem 0.625rem 0.5rem;
}

.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.625rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: #3F3F46;
  text-decoration: none;
  cursor: pointer;
}

.topbar-dropdown-item:hover { background: #F4F4F5; }
body[data-theme="dark"] .topbar-dropdown-item { color: #FFFFFF !important; }
body[data-theme="dark"] .topbar-dropdown-item:hover { background: rgba(255, 255, 255, 0.1) !important; }

.topbar-dropdown-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0.375rem 0.25rem;
}

.notif-dot-info, .notif-dot-warning, .notif-dot-critical {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 0.375rem;
}

.notif-dot-info { background: #2563EB; }
.notif-dot-warning { background: #B45309; }
.notif-dot-critical { background: #DC2626; }

/* -------------------- Dropdown de perfil -------------------- */

.profile-dropdown { width: 300px; padding: 0.75rem; }

.profile-dropdown-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 0.75rem; }

.profile-dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--primary-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  flex-shrink: 0;
}

body[data-theme="dark"] .profile-dropdown-avatar { background: #000000; }

.profile-dropdown-name { display: block; font-size: 0.875rem; font-weight: 700; color: #18181B; margin: 0; text-decoration: none; }
.profile-dropdown-name:hover { text-decoration: underline; }
.profile-dropdown-email { font-size: 0.75rem; color: #71717A; margin: 0.125rem 0 0; word-break: break-all; }

body[data-theme="dark"] .profile-dropdown-name { color: #FFFFFF !important; }
body[data-theme="dark"] .profile-dropdown-email { color: rgba(255, 255, 255, 0.6) !important; }

.profile-dropdown-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.25rem 0.25rem; font-size: 0.75rem; }
.profile-dropdown-footer a { color: #71717A; text-decoration: none; }
.profile-dropdown-footer a:hover { text-decoration: underline; }
body[data-theme="dark"] .profile-dropdown-footer a:not([style]) { color: rgba(255, 255, 255, 0.6) !important; }

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #F4F4F5;
  border-radius: 10px;
  padding: 0.25rem;
  margin: 0.25rem 0.375rem;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
}

.theme-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: none;
  background: transparent;
  color: #71717A;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 0.5rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.theme-toggle-btn:hover { color: #3F3F46; }

.theme-toggle-btn.active {
  background: #fff;
  color: #18181B;
  box-shadow: 0 1px 2px rgba(16,24,40,0.08);
}

body[data-theme="dark"] .theme-toggle { background-color: var(--surface-dark) !important; }
body[data-theme="dark"] .theme-toggle-btn { color: #FFFFFF !important; }
body[data-theme="dark"] .theme-toggle-btn.active { background-color: rgba(255, 255, 255, 0.16) !important; color: #FFFFFF !important; }

/* Metric cards */

.metric-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-delta {
  font-size: 0.75rem;
  font-weight: 600;
}

.metric-delta.up { color: #16A34A; }
.metric-delta.down { color: #DC2626; }

/* Status badges */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  white-space: nowrap;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.status-novo { background: #EFF6FF; color: #2563EB; }
.status-conversa { background: #FEF3C7; color: #B45309; }
.status-proposta { background: #F3E8FF; color: #7E22CE; }
.status-fechado { background: #DCFCE7; color: #15803D; }
.status-enviado { background: #EFF6FF; color: #2563EB; }
.status-assinado { background: #DCFCE7; color: #15803D; }
.status-recusado { background: #FEE2E2; color: #B91C1C; }
.status-ativo { background: #DCFCE7; color: #15803D; }
.status-inativo { background: #F4F4F5; color: #71717A; }
.status-pendente { background: #FEF3C7; color: #B45309; }

.status-badge-plain { background: transparent !important; padding: 0.25rem 0; }

.status-text {
  display: inline; background: transparent !important; padding: 0; border-radius: 0;
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}

.status-neutral-dark { color: #333333; }
body[data-theme="dark"] .status-neutral-dark { color: #FFFFFF !important; }
.status-text::before { content: none; }

.payment-progress { width: 140px; max-width: 100%; height: 6px; border-radius: 999px; background: #E4E4E7; margin-top: 0.4rem; overflow: hidden; }
.payment-progress-fill { height: 100%; background: var(--primary-blue); border-radius: 999px; }
body[data-theme="dark"] .payment-progress { background: #4B4B4B !important; }

/* Leads table */

.leads-table th {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #A1A1AA;
  text-align: left;
  padding: 0 1rem 0.75rem;
  border-bottom: 1px solid var(--border-card);
}

.leads-table td {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  border-top: 1px solid var(--border-light);
}

.leads-table tr:hover td { background: #FAFAFA; }
.leads-table tbody tr:first-child td { border-top: none; }

/* Listas de dados (Contatos, Gestão de pagamentos, Links de cobrança): mesmo
   padrão das tabelas do Admin — cabeçalho escuro, faixas alternadas
   começando pela cinza, hover azul claro, e as faixas indo de uma borda à
   outra do card (por isso a margem negativa anulando o padding do
   .dash-card; o respiro do texto vem do padding das células). */
.dash-card > .leads-table-wrap { margin: 0 -1.5rem; }
.dash-card > .leads-table-wrap:last-child {
  margin-bottom: -1.5rem;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.leads-table-wrap .leads-table th { color: #333333; font-weight: 700; }

/* Cabeçalho com o mesmo respiro em cima e embaixo (como as linhas de
   dados): a tabela sobe até a borda de cima do card, anulando o padding
   dele, e o th ganha o espaço por conta própria. Antes sobrava 25px em
   cima e 14px embaixo. Notas fiscais tem o estado vazio antes da tabela
   (escondido quando há notas), por isso o segundo seletor. */
.dash-card > .leads-table-wrap:first-child,
.dash-card > .empty-state + .leads-table-wrap { margin-top: -1.5rem; }
.leads-table-wrap .leads-table th { padding-top: 0.875rem; padding-bottom: 0.875rem; }

/* Convidados (Agenda › Contratos): a tabela fica no fim do painel do
   evento, não direto no card — mesma ida de ponta a ponta, até a borda de
   baixo. O título "Convidados" acima já dá o respiro de cima. */
.contratos-convidados-block > .leads-table-wrap {
  margin: 0 -1.5rem -1.5rem;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* Cliente selecionado na lista de contratos: a faixa da linha não pode
   esconder a seleção (o :nth-child(n) só existe pra vencer a especificidade
   das faixas ímpar/par, definidas mais abaixo). */
.leads-table-wrap .leads-table tbody tr.is-selected:nth-child(n) td { background: #EBF4FF; }
body[data-theme="dark"] .leads-table-wrap .leads-table tbody tr.is-selected:nth-child(n) td { background: rgba(255, 255, 255, 0.1) !important; }
.leads-table-wrap .leads-table th:first-child,
.leads-table-wrap .leads-table td:first-child { padding-left: 1.5rem; }
.leads-table-wrap .leads-table th:last-child,
.leads-table-wrap .leads-table td:last-child { padding-right: 1.5rem; }
.leads-table-wrap .leads-table td { vertical-align: middle; transition: background .12s ease; }

.leads-table-wrap .leads-table tbody tr:nth-child(odd) td { background: #F9F9F9; }
.leads-table-wrap .leads-table tbody tr:nth-child(even) td { background: #FFFFFF; }
.leads-table-wrap .leads-table tbody tr:hover td { background: #EBF4FF; }

/* Linha de "nenhum item" não é dado: sem faixa nem hover. */
.leads-table-wrap .leads-table tbody td[colspan],
.leads-table-wrap .leads-table tbody tr:hover td[colspan] { background: transparent; }

body[data-theme="dark"] .leads-table-wrap .leads-table tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.03) !important; }
body[data-theme="dark"] .leads-table-wrap .leads-table tbody tr:nth-child(even) td { background: transparent !important; }
body[data-theme="dark"] .leads-table-wrap .leads-table tbody tr:hover td { background: rgba(255, 255, 255, 0.07) !important; }
body[data-theme="dark"] .leads-table-wrap .leads-table tbody td[colspan] { background: transparent !important; }

/* Messages / chat */

.chat-shell {
  display: flex;
  height: calc(100vh - var(--topbar-height) - 4rem);
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Chat ocupa 100% do espaço disponível, sem respiro ao redor */
body[data-page="chat"] .b2b-content {
  padding: 0;
  height: calc(100vh - var(--topbar-height));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Cabeçalho de título padrão (igual às outras páginas), mas sem o respiro
   lateral do .b2b-content genérico — aqui o padding do conteúdo é 0. */
body[data-page="chat"] .b2b-header-bar {
  margin: 0;
  padding: 0.9rem 1.5rem;
  flex-shrink: 0;
}

/* O rodapé padrão assume o padding genérico de 2rem do .b2b-content pra
   calcular suas margens negativas — na página de Chat o padding é 0
   (interface de chat em tela cheia, sem scroll), então o rodapé saía
   desalinhado. Como a tela de chat não tem espaço/sentido pra um rodapé
   de marketing, ele simplesmente não aparece aqui. */
body[data-page="chat"] .b2b-footer { display: none; }

body[data-page="chat"] .chat-shell {
  height: 100%;
  flex: 1;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  display: flex;
  overflow: hidden;
}

#conv-list {
  width: 100%;
  overflow-y: auto;
}

.conv-item.active {
  background-color: #EBF4FF;
  border-left-color: var(--primary-color);
}

.conv-item.active h4 { color: #122c3f; }

body[data-theme="dark"] .conv-item.active {
  background-color: #EBF4FF !important;
  border-left-color: var(--primary-color) !important;
}

body[data-theme="dark"] .conv-item.active h4,
body[data-theme="dark"] .conv-item.active p,
body[data-theme="dark"] .conv-item.active span:not(.badge-b2b-unread-dot) {
  color: #122c3f !important;
}

/* Forms */

.field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3F3F46;
  margin-bottom: 0.375rem;
  display: block;
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  /* Mesma borda neutra de botões e cards (identidade sem cara de Tailwind). */
  border: 1px solid var(--borda-suave);
  border-radius: var(--radius-control);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  background: #fff;
  color: #18181B;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: #181D24;
  box-shadow: none;
}

.field-textarea { resize: vertical; min-height: 220px; font-family: inherit; }

.field-input.field-locked {
  background: #F4F4F5;
  color: #71717A;
  cursor: not-allowed;
}

.field-lock-icon {
  display: inline-flex;
  vertical-align: middle;
  color: #A1A1AA;
}

/* Escopo (incluso / não incluso): campo + "Adicionar"; os itens viram
   caixinhas com o texto e a lixeira. */
.scope-add-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.scope-add-row .field-input { flex: 1; min-width: 0; }
.scope-add-btn { flex: 0 0 auto; }
.scope-list { display: flex; flex-direction: column; gap: 0.4rem; }
.scope-list:empty { display: none; }
.scope-item {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--borda-suave); border-radius: 8px; background: #fff;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
}
.scope-item-text { flex: 1; min-width: 0; font-size: 0.875rem; color: #18181B; overflow-wrap: anywhere; }
.scope-item-remove {
  flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: #A1A1AA; background: none; border: none; cursor: pointer; border-radius: 6px;
}
.scope-item-remove svg { width: 14px; height: 14px; }
.scope-item-remove:hover { background: #FEE2E2; color: #B91C1C; }
body[data-theme="dark"] .scope-item { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .scope-item-text { color: #FFFFFF !important; }

.field-with-inline-link { position: relative; }
.field-with-inline-link .field-input { padding-right: 7.5rem; }

.field-with-inline-icon { position: relative; }
.field-with-inline-icon .field-input { padding-right: 2.5rem; }
.field-inline-remove-btn {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  color: #A1A1AA; background: none; border: none; cursor: pointer; border-radius: 5px;
}
.field-inline-remove-btn svg { width: 14px; height: 14px; }
.field-inline-remove-btn:hover { background: #FEE2E2; color: #B91C1C; }

.field-request-change-link {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: #D4D4D8;
  text-decoration: none;
  white-space: nowrap;
}
.field-request-change-link:hover { color: #A1A1AA; }

.plan-billing-option:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.date-picker-field { position: relative; }
.date-picker-field input { padding-right: 2.25rem; cursor: pointer; }
.date-picker-field-icon {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  color: #71717A; cursor: pointer; pointer-events: auto;
}

.date-picker-popover {
  position: fixed;
  z-index: 1000;
  width: 260px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.18);
  padding: 0.9rem;
}

body[data-theme="dark"] .date-picker-field-icon { color: #A1A1AA !important; }
body[data-theme="dark"] .date-picker-popover { background: #252525 !important; border-color: #404040 !important; }

.btn-primary {
  background: var(--primary-blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-control);
  border: none;
  cursor: pointer;
  transition: background-color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary:hover { background: var(--primary-blue-hover); }

body[data-theme="dark"] .btn-primary:not([style*="background"]) { background: #EBF4FF; color: #000000; }
body[data-theme="dark"] .btn-primary:not([style*="background"]):hover { background: #D6E8FF; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.btn-secondary {
  background: #fff;
  color: #3F3F46;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-control);
  border: 1px solid #CCD5E0;
  cursor: pointer;
  transition: background-color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-secondary:hover { background: #FFFFFF; border-color: #181D24; color: #181D24; }

/* Botão de destaque em azul clarinho. Os do cabeçalho das páginas
   (Adicionar contato/produto/membro, Compartilhar agenda) saíram daqui:
   seguem o padrão do cabeçalho, cor da sidebar — ver fim do arquivo. */
#agenda-add-event-btn.btn-secondary {
  background: #EBF4FF;
  color: #333333;
  border-color: transparent;
}
#agenda-add-event-btn.btn-secondary:hover {
  background: #DCEAFB;
}

.profile-security-action-btn { width: 150px; justify-content: center; }

/* Toast */

.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #18181B;
  color: #fff;
  padding: 0.875rem 1.25rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 100;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Products grid */

.product-card {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Mesma proporção do recorte da capa (14:5, ver exportCoverCrop em
   js/produtos.js): o card mostra exatamente o que o fornecedor enquadrou,
   em vez de uma faixa fixa de 140px que cortava a imagem de novo conforme
   a largura da coluna. */
.product-thumb {
  aspect-ratio: 14 / 5;
  background: linear-gradient(135deg, #EFF6FF 0%, #FFF7ED 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A1A1AA;
}

.product-thumb-add-image-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 0.8125rem; font-weight: 600; color: var(--primary-blue);
  text-decoration: underline;
}
.product-thumb-add-image-btn:hover { color: var(--primary-hover); }

/* Modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 1.5rem;
}

.modal-backdrop.show { display: flex; }

.modal-card {
  background: #fff;
  border-radius: var(--radius-card);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.75rem;
}

/* ==========================================================================
   TOPBAR — busca, notificações, criar rápido, avatar
   ========================================================================== */

.topbar-icon-btn-wrap { position: relative; }

.topbar-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  border: none;
  background: #fff;
  color: #52525B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: background-color .15s ease;
}

.topbar-icon-btn:hover { background: #F4F4F5; }

.tarefa-add-btn {
  background: #F4F4F5;
  color: #52525B;
  border: none;
  box-shadow: none;
}

.tarefa-add-btn:hover { background: #E4E4E7; }

.topbar-icon-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--coral-accent);
  border: 1.5px solid #fff;
}

.topbar-avatar-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
  padding: 0.5rem;
  z-index: 50;
}

.topbar-dropdown.show { display: block; }

.topbar-dropdown-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #71717A;
  padding: 0.375rem 0.625rem 0.5rem;
}

.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.625rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: #3F3F46;
  text-decoration: none;
  cursor: pointer;
}

.topbar-dropdown-item:hover { background: #F4F4F5; }

.topbar-dropdown-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0.375rem 0.25rem;
}

.notif-dot-info, .notif-dot-warning, .notif-dot-critical {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 0.375rem;
}

.notif-dot-info { background: #2563EB; }
.notif-dot-warning { background: #B45309; }
.notif-dot-critical { background: #DC2626; }

/* Command palette */

.command-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #A1A1AA;
  padding: 0.625rem 0.625rem 0.25rem;
}

.command-result-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.625rem;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

.command-result-item:hover { background: #F4F4F5; }

/* ==========================================================================
   DASHBOARD — saudação, estatísticas, contratos, calendário
   ========================================================================== */

.dashboard-greeting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.plans-intro { text-align: center; margin-bottom: 0; }

.greeting-date {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #71717A;
  margin-top: 0.25rem;
}

.greeting-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #18181B;
  letter-spacing: -0.01em;
}

.verified-badge { display: inline-flex; vertical-align: middle; margin-left: 0.3rem; color: var(--primary-blue); }

.dashboard-personalize-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #18181B;
  text-decoration: none;
  border: none;
  background: none;
  transition: color .15s ease;
}
.dashboard-personalize-link:hover { color: var(--primary-blue); }
.dashboard-personalize-link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .15s ease, color .15s ease;
}
.dashboard-personalize-link:hover .dashboard-personalize-link-icon { transform: translateX(2px); }
body[data-theme="dark"] .dashboard-personalize-link { color: #FFFFFF !important; }
body[data-theme="dark"] .dashboard-personalize-link:hover { color: var(--primary-blue) !important; }

.dash-card {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: none;
  padding: 1.5rem;
  min-width: 0;
}

.dashboard-panel-section { display: flex; flex-direction: column; }
.dashboard-panel-header { border-left: 3px solid #183B54; padding-left: 0.85rem; margin-bottom: 1.25rem; }
.dashboard-panel-section .dash-card { background-color: #FBFBFB; box-shadow: none; }

.dashboard-help-section { margin-top: 1.5rem; }
.dashboard-help-header { border-left: 3px solid #183B54; padding-left: 0.85rem; margin-bottom: 1.25rem; }
.dashboard-help-title { font-size: 1.0625rem; font-weight: 700; color: #18181B; }
.dashboard-help-subtitle { font-size: 0.8125rem; color: #71717A; margin-top: 0.15rem; }

.dashboard-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.dashboard-help-card { background: #FBFBFB; border: 1px solid #E4E4E4; border-radius: var(--radius-card); padding: 1.25rem; display: flex; flex-direction: column; height: 100%; box-shadow: none; }
.dashboard-help-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.dashboard-help-card-icon { color: #52525B; display: flex; flex-shrink: 0; }
.dashboard-help-card-title { font-size: 0.9375rem; font-weight: 700; color: #18181B; }
.dashboard-help-card-desc { font-size: 0.8125rem; color: #71717A; line-height: 1.5; margin-bottom: 1rem; flex: 1; }
.dashboard-help-card-desc strong { color: #3F3F46; font-weight: 700; }
.dashboard-help-card-link { font-size: 0.8125rem; font-weight: 700; color: #18181B; text-decoration: underline; align-self: flex-start; min-height: 2.4375rem; }
.dashboard-help-card-link:hover { color: var(--primary-blue); }

@media (max-width: 900px) {
  .dashboard-help-grid { grid-template-columns: 1fr; }
}

body[data-theme="dark"] .dashboard-help-title { color: #FFFFFF !important; }
body[data-theme="dark"] .dashboard-help-card { background: #2A2A2A !important; }
body[data-theme="dark"] .dashboard-help-card-title { color: #FFFFFF !important; }
body[data-theme="dark"] .dashboard-help-card-desc strong { color: #D4D4D8 !important; }
body[data-theme="dark"] .dashboard-help-card-link { color: #FFFFFF !important; }
body[data-theme="dark"] .dashboard-help-card-icon { color: #A1A1AA !important; }

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-card);
}

.dashboard-quick-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.dashboard-quick-action-btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
  background: #EBF4FF;
  border: none;
  color: #181D24;
}
.dashboard-quick-action-btn:hover { background: #DCEBFF; }
.dashboard-quick-action-btn svg { flex-shrink: 0; }

.dash-card-header-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.accordion-card-header { cursor: pointer; user-select: none; }
.accordion-card:not(.is-open) .accordion-card-header { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.accordion-chevron { display: inline-flex; flex-shrink: 0; color: #A1A1AA; transition: rotate .15s ease; }
.accordion-card.is-open .accordion-chevron { rotate: 180deg; }
.accordion-card-body { display: none; }
.accordion-card.is-open .accordion-card-body { display: block; }

.dashboard-greeting-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

.dashboard-greeting-mobile-avatar,
.dashboard-greeting-mobile-icons { display: none; }

/* -------------------- Métricas rápidas (Dashboard) -------------------- */

.metrics-circle-row { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

.metrics-circle-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-decoration: none; flex: 1; min-width: 110px;
}

.metrics-circle-label { font-size: 0.75rem; font-weight: 600; color: #71717A; text-align: center; }

.metrics-circle-value { font-size: 1.375rem; font-weight: 700; color: #18181B; }

.metric-ring {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: conic-gradient(var(--ring-color, var(--primary-blue)) calc(var(--ring-pct, 0) * 1%), #E4E4E7 0);
}
.metric-ring-inner {
  width: 50px; height: 50px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700; color: #18181B;
}

/* -------------------- Eventos e notícias (Dashboard) -------------------- */

.dash-news-card { display: flex; flex-direction: column; box-shadow: none; }
.dash-analytics-card { box-shadow: none; }
.dash-news-list { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1rem; }
.dash-news-link { font-size: 0.8125rem; font-weight: 400; color: var(--primary-blue); text-decoration: none; line-height: 1.4; }
.dash-news-link:hover { text-decoration: underline; }

.dash-news-footer {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-light);
}
.dash-news-footer-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--primary-blue); text-decoration: none;
}
.dash-news-footer-link:hover { text-decoration: underline; }
.dash-news-footer-link svg { flex-shrink: 0; }
.dash-news-footer-sep { color: #D4D4D8; font-size: 0.8125rem; }

.dashboard-side-stack { display: flex; flex-direction: column; gap: 1.5rem; }

/* Cartão de carteira / saldo (Dashboard) */

.wallet-card { position: relative; background-color: #FFFFFF; box-shadow: none; }

.wallet-tabs { display: flex; gap: 3rem; border-bottom: 1px solid var(--border-light); margin-bottom: 1.5rem; }
.wallet-tab {
  border: none; background: transparent; padding: 0 0 0.75rem; margin-bottom: -1px;
  font-size: 0.875rem; font-weight: 600; color: #A1A1AA; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.wallet-tab.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); font-weight: 700; }
.wallet-tab:hover:not(.active) { color: #52525B; }

.wallet-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wallet-balance-wrap { display: flex; align-items: center; gap: 0.5rem; }
.wallet-balance { font-size: 1.75rem; font-weight: 700; color: #18181B; text-decoration: none; display: inline-block; transition: opacity .15s ease; }
.wallet-balance:hover { opacity: 0.72; }
.wallet-balance sup { font-size: 1rem; font-weight: 700; }

.wallet-withdraw-btn {
  flex-shrink: 0;
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.wallet-eye-btn { border: none; background: transparent; color: var(--primary-blue); cursor: pointer; padding: 0.3rem; margin-top: 0.25rem; flex-shrink: 0; border-radius: 999px; transition: background-color 0.15s ease; display: inline-flex; }
.wallet-eye-btn:hover { background-color: #FFFFFF; }
.wallet-eye-btn-global { position: absolute; top: 1.5rem; right: 1.5rem; margin-top: 0; }
.wallet-eye-icon-closed { display: none; }
.wallet-eye-btn.is-hidden .wallet-eye-icon-open { display: none; }
.wallet-eye-btn.is-hidden .wallet-eye-icon-closed { display: inline-flex; }
.wallet-sub { font-size: 0.8125rem; color: #71717A; margin-top: 0.5rem; }

body[data-theme="dark"] .wallet-tab { color: #71717A !important; }
body[data-theme="dark"] .wallet-tab.active { color: #FFFFFF !important; border-bottom-color: #FFFFFF !important; }
body[data-theme="dark"] .wallet-balance { color: #FFFFFF !important; }
body[data-theme="dark"] .wallet-sub { color: #A1A1AA !important; }

/* Cartão de carrossel de anúncios (Dashboard) */

.dash-ads-card { padding: 0; overflow: hidden; border: none; box-shadow: none; background: transparent; }

.dash-ads-carousel { position: relative; aspect-ratio: 16 / 9; background: var(--bg-light); }

.dash-ads-slide {
  position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden;
  transition: opacity .3s ease;
}
.dash-ads-slide.is-active { opacity: 1; visibility: visible; }
.dash-ads-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dash-ads-slide-caption {
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  padding: 0.65rem 0.85rem 0.6rem;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.dash-ads-slide-title {
  margin: 0 0 0.15rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #333333;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-ads-slide-subtitle {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #333333;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-ads-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); color: #18181B;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
}
.dash-ads-nav-prev { left: 8px; }
.dash-ads-nav-next { right: 8px; }
.dash-ads-nav:hover { background: #fff; }

.dash-ads-dots { display: flex; justify-content: center; align-items: center; gap: 0.4rem; padding: 0.85rem 0; }
.dash-ads-dot { width: 6px; height: 6px; border-radius: 999px; background: #D4D4D8; border: none; padding: 0; cursor: pointer; transition: width .15s ease, background-color .15s ease; }
.dash-ads-dot.is-active { background: var(--primary-blue); width: 18px; }

/* Cartão Analytics (Dashboard) */

.dash-analytics-header { display: flex; align-items: flex-start; justify-content: space-between; }
.dash-analytics-period-label { font-size: 0.75rem; color: #71717A; margin-top: 0.2rem; }
.dash-analytics-period-wrap { position: relative; }
.dash-analytics-period-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: none; background: transparent; padding: 0; margin: 0;
  color: var(--primary-blue); cursor: pointer;
}
.dash-analytics-period-btn:hover { background: #F4F4F5; }
.dash-analytics-period-popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-control);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.14); padding: 0.4rem; min-width: 160px;
  display: flex; flex-direction: column;
}
.dash-analytics-period-popover button {
  border: none; background: transparent; text-align: left; padding: 0.5rem 0.6rem; border-radius: 8px;
  font-size: 0.8125rem; color: #3F3F46; cursor: pointer;
}
.dash-analytics-period-popover button:hover { background: #F4F4F5; }
.dash-analytics-period-popover button.is-active { color: var(--primary-blue); font-weight: 700; }

.dash-analytics-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-top: 1px solid var(--border-light); }
.dash-analytics-row:first-of-type { border-top: none; padding-top: 0; }
.dash-analytics-metric-label { font-size: 0.8125rem; font-weight: 700; color: #52525B; }
.dash-analytics-metric-value { font-size: 0.9375rem; font-weight: 700; color: #18181B; }
.dash-analytics-boost-link {
  display: block; border: none; background: transparent; padding: 0 0 0.75rem; margin: -0.4rem 0 0;
  font-size: 0.75rem; font-weight: 400; color: var(--primary-blue); cursor: pointer; text-align: left;
}
.dash-analytics-boost-link:hover { text-decoration: underline; }

body[data-theme="dark"] .dash-analytics-metric-label { color: #D4D4D8 !important; }
body[data-theme="dark"] .dash-analytics-metric-value { color: #FFFFFF !important; }
body[data-theme="dark"] .dash-analytics-period-btn:hover { background: #333333 !important; }
body[data-theme="dark"] .dash-analytics-period-popover { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .dash-analytics-period-popover button:hover { background: #333333 !important; }
body[data-theme="dark"] .dash-analytics-row { border-top-color: #404040 !important; }

body[data-theme="dark"] .metrics-circle-value { color: #FFFFFF !important; }
body[data-theme="dark"] .metric-ring-inner { background: #252525 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .metric-ring { background: conic-gradient(var(--ring-color, var(--primary-blue)) calc(var(--ring-pct, 0) * 1%), #404040 0) !important; }

/* Agenda: faixa de dias + lista */

.day-strip {
  display: flex;
  gap: 0.375rem;
}

.day-strip-cell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.625rem 0.25rem;
  border-radius: 12px;
}

.day-strip-cell .dow {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #A1A1AA;
}

.day-strip-cell .dom {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #3F3F46;
}

.day-strip-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--primary-blue);
}

.day-strip-cell.today {
  background: var(--primary-blue);
}

.day-strip-cell.today .dow,
.day-strip-cell.today .dom {
  color: #fff;
}

.day-strip-cell.today .day-strip-dot { background: #fff; }

.agenda-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-left: 3px solid var(--primary-blue);
  background: #fff;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.agenda-item + .agenda-item { margin-top: 0.5rem; }

/* Tarefas (checklist) */

.tarefa-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-card);
}

.tarefa-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.tarefa-item:last-child { border-bottom: none; padding-bottom: 0; }
.tarefa-item:first-child { padding-top: 0; }

.tarefa-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tarefa-check {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--border-card);
  flex-shrink: 0;
  margin-top: 0.0625rem;
  transition: background-color .15s ease, border-color .15s ease;
}

.tarefa-item input:checked + .tarefa-check {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

.tarefa-text {
  font-size: 0.875rem;
  color: #3F3F46;
  line-height: 1.4;
}

.tarefa-text.done {
  color: #A1A1AA;
  text-decoration: line-through;
}

.tarefa-new-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: #3F3F46;
  background: transparent;
  padding: 0;
  margin-top: 0.0625rem;
}

/* ==========================================================================
   FUNÇÕES — equipe e permissões
   ========================================================================== */

.member-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.member-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: #EFF6FF;
  color: #2563EB;
  white-space: nowrap;
}

.owner-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #A1A1AA;
}

.modules-summary {
  font-size: 0.8125rem;
  color: #71717A;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.permission-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #3F3F46;
  cursor: pointer;
}

.permission-check input {
  accent-color: var(--primary-blue);
  width: 16px;
  height: 16px;
}

.role-template-desc {
  font-size: 0.75rem;
  color: #71717A;
  margin-top: 0.375rem;
  line-height: 1.5;
}

/* Tarefas: excluir com hover */

.tarefa-remove {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 0.0625rem;
  border: none;
  background: transparent;
  color: #A1A1AA;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: opacity .15s ease, color .15s ease, background-color .15s ease;
}

.tarefa-item:hover .tarefa-remove { opacity: 1; }
.tarefa-remove:hover { color: #52525B; background: #F4F4F5; }

/* Abas de submenu — texto limpo com sublinhado (sem pills) */

.category-tab {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #71717A;
  padding: 0 0 0.625rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.category-tab:hover { color: #3F3F46; }

.category-tab.active {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
}

.category-tabs-bar {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  margin-bottom: 1rem;
  flex-shrink: 0;
}


/* Empty state (páginas em construção) */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 2rem;
  color: #71717A;
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #F4F4F5;
  color: #A1A1AA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* Responsive */

@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .conv-list { width: 240px; }
  .bubble { max-width: 80%; }
}

/* Botão Enviar Mensagem no Chat - Cor Secundária #27394f */
#chat-send-btn {
  background-color: #27394f !important;
  color: #FFFFFF !important;
}

#chat-send-btn:hover {
  background-color: #1d2b3c !important;
}

/* ==========================================================================
   DARK MODE — overrides amplos para texto/superfícies em todas as páginas
   ========================================================================== */

body[data-theme="dark"] .modal-card,
body[data-theme="dark"] .field-input,
body[data-theme="dark"] .field-select,
body[data-theme="dark"] .field-textarea,
body[data-theme="dark"] .btn-secondary,
body[data-theme="dark"] .product-card,
body[data-theme="dark"] .agenda-item,
body[data-theme="dark"] .leads-table tr:hover td,
body[data-theme="dark"] .command-result-item:hover,
body[data-theme="dark"] .topbar-dropdown-item:hover {
  background-color: var(--surface-dark) !important;
  color: #FFFFFF !important;
}

body[data-theme="dark"] .text-zinc-900,
body[data-theme="dark"] .text-zinc-800,
body[data-theme="dark"] .text-zinc-700,
body[data-theme="dark"] .text-zinc-600,
body[data-theme="dark"] .text-zinc-500,
body[data-theme="dark"] .text-zinc-400,
body[data-theme="dark"] .greeting-date,
body[data-theme="dark"] .greeting-title,
body[data-theme="dark"] .field-label,
body[data-theme="dark"] .role-template-desc,
body[data-theme="dark"] .modules-summary,
body[data-theme="dark"] .owner-tag,
body[data-theme="dark"] .command-group-label,
body[data-theme="dark"] .leads-table th,
body[data-theme="dark"] .day-strip-cell .dow,
body[data-theme="dark"] .day-strip-cell .dom,
body[data-theme="dark"] .member-row p,
body[data-theme="dark"] .empty-state p,
body[data-theme="dark"] .guide-link {
  color: #FFFFFF !important;
}

body[data-theme="dark"] .dash-card {
  background-color: #181D24 !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .dash-card h1,
body[data-theme="dark"] .dash-card h2,
body[data-theme="dark"] .dash-card h3,
body[data-theme="dark"] .dash-card h4,
body[data-theme="dark"] .dash-card p {
  color: #ffffff !important;
}

body[data-theme="dark"] .leads-table td { border-top-color: #404040 !important; }
body[data-theme="dark"] .dash-card-header { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .day-strip-cell.today { background: #4B4B4B !important; }

body[data-theme="dark"] .guide-link:hover { background: rgba(255, 255, 255, 0.1) !important; }
body[data-theme="dark"] .guide-link--active { color: #FFFFFF !important; border-left-color: #FFFFFF; }
body[data-theme="dark"] .guias-icon-badge { background: #4B4B4B; }
body[data-theme="dark"] .guias-progress-track { background: #535353; }
body[data-theme="dark"] .guide-checklist-dot { border-color: rgba(255, 255, 255, 0.3); }

body[data-theme="dark"] .faq-item { border-bottom-color: rgba(255, 255, 255, 0.14); }
body[data-theme="dark"] .faq-item summary { color: #FFFFFF; }
body[data-theme="dark"] .faq-item summary::after { color: rgba(255, 255, 255, 0.5); }
body[data-theme="dark"] .guias-faq-card .faq-item summary::after { border-color: rgba(255, 255, 255, 0.5); }
body[data-theme="dark"] .faq-item p { color: rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   GUIAS DE INÍCIO
   ========================================================================== */

.guias-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
}

.guias-sidebar { padding-top: 0.25rem; }

.guias-sidebar-divider {
  height: 1px;
  background: var(--border-card);
  margin: 1rem 0;
}

.guide-link {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: transparent;
  color: #3F3F46;
  font-size: 0.875rem;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-left: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}

.guide-link:hover { background: #F4F4F5; color: #18181B; }

.guide-link--active {
  color: var(--primary-blue);
  font-weight: 600;
  border-left-color: var(--primary-blue);
}

.guias-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--border-card);
  overflow: hidden;
}

.guias-progress-fill { background: #67974E; height: 100%; border-radius: 999px; }

.guias-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background: #F4F4F5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.guias-icon-badge--lg { width: 56px; height: 56px; font-size: 1.75rem; }
.guias-flat-card { box-shadow: none; border: none; }

.guias-faq-card .faq-item summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #A1A1AA;
  border-bottom: 1.5px solid #A1A1AA;
  transform: rotate(45deg);
  margin-top: -4px;
}

.guias-faq-card .faq-item[open] summary::after { transform: rotate(225deg); margin-top: 2px; }

.guide-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border-card);
}

.guide-checklist-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--border-card);
  flex-shrink: 0;
}

/* FAQ */

.faq-item {
  border-bottom: 1px solid var(--border-card);
  padding: 1rem 0;
}

.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-item:first-child { padding-top: 0; }

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #18181B;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: #A1A1AA;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  color: #52525B;
  line-height: 1.6;
}

/* ==========================================================================
   PLANOS E RECURSOS
   ========================================================================== */

.plans-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.plan-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  position: relative;
  flex: 1 1 280px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
}

.plans-grid .plan-card:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.plans-grid .plan-card:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.plan-card.featured { background: #EBF4FF; box-shadow: var(--shadow-soft); }

.plan-card-badge {
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  transform: translateY(-100%);
  background: var(--primary-color);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
  margin: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.plan-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.plan-card-title { font-size: 1.25rem; font-weight: 700; color: #18181B; margin: 0 0 0.5rem; }

.plan-card-desc {
  font-size: 0.8125rem;
  color: #71717A;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  min-height: 2.4em;
}

.plan-price { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 1.75rem; }
.plan-price-amount { font-size: 2.25rem; font-weight: 800; color: #18181B; }
.plan-price-period { font-size: 0.875rem; color: #71717A; }

.plan-billing-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: #F4F4F5;
  border-radius: 10px;
  padding: 0.25rem;
  margin-bottom: 1.75rem;
}

.plan-billing-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.plan-billing-option:hover { color: #3F3F46; }
.plan-billing-option-title { font-size: 0.8125rem; font-weight: 600; color: #71717A; }

.plan-billing-option-discount {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #16A34A;
  background: rgba(22, 163, 74, 0.12);
  padding: 0.1rem 0.375rem;
  border-radius: 999px;
}

.plan-billing-option.active { background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
.plan-billing-option.active .plan-billing-option-title { color: #18181B; }

.plan-features { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.plan-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; color: #3F3F46; }
.plan-features li svg { width: 16px; height: 16px; color: var(--primary-color); flex-shrink: 0; margin-top: 1px; }

.plan-card-cta { width: 100%; justify-content: center; margin-top: auto; }
.plan-card-cta:disabled { opacity: 0.55; cursor: default; pointer-events: none; }

body[data-theme="dark"] .plan-card { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .plan-card-badge { background: #000000 !important; }
body[data-theme="dark"] .plan-card-title,
body[data-theme="dark"] .plan-price-amount { color: #FFFFFF !important; }
body[data-theme="dark"] .plan-card-desc,
body[data-theme="dark"] .plan-price-period { color: rgba(255, 255, 255, 0.65) !important; }
body[data-theme="dark"] .plan-features li { color: rgba(255, 255, 255, 0.85) !important; }
body[data-theme="dark"] .plan-features li svg { color: #FFFFFF !important; }
body[data-theme="dark"] .plan-billing-toggle { background-color: var(--surface-dark) !important; }
body[data-theme="dark"] .plan-billing-option-title { color: rgba(255, 255, 255, 0.7) !important; }
body[data-theme="dark"] .plan-billing-option-discount { background: rgba(34, 197, 94, 0.18) !important; color: #4ADE80 !important; }
body[data-theme="dark"] .plan-billing-option.active { background-color: rgba(255, 255, 255, 0.16) !important; }
body[data-theme="dark"] .plan-billing-option.active .plan-billing-option-title { color: #FFFFFF !important; }

/* ==========================================================================
   MOBILE — barra de navegação inferior + folhas deslizantes (bottom sheet)
   ========================================================================== */

.mobile-bottom-nav { display: none; }
.mobile-nav-overlay { display: none; }
.mobile-nav-sheet { display: none; }

@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .b2b-sidebar { display: none; }
  .b2b-main { margin-left: 0; background-color: var(--bg-dashboard); }
  body[data-theme="dark"] .b2b-main { background-color: #1C2125 !important; }
  .b2b-content { padding-bottom: 6rem; }
  body[data-page="dashboard"] .b2b-content { padding-bottom: 6rem; }
  .b2b-footer { display: none; }

  .b2b-topbar { padding: 0 1rem; gap: 0.5rem; }
  .topbar-account-wrap { display: none; }

  .topbar-services-mobile-link { display: flex; }
  .topbar-messages-mobile-hide { display: none; }

  /* Dashboard: o cabeçalho some — avatar/mensagens/notificações são
     realocados (via JS) para dentro da saudação "Olá, [empresa]". */
  body[data-page="dashboard"] .b2b-topbar { display: none; }
  body[data-page="dashboard"] .dashboard-greeting-actions { display: none; }

  .dashboard-greeting { align-items: center; }

  body[data-page="dashboard"] .dashboard-greeting-mobile-avatar:not(:empty) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-avatar .topbar-icon-btn-wrap,
  body[data-page="dashboard"] .dashboard-greeting-mobile-avatar .topbar-avatar-btn {
    width: 100%;
    height: 100%;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-avatar .b2b-avatar {
    width: 100% !important;
    height: 100% !important;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-avatar .b2b-avatar svg {
    width: 55%;
    height: 55%;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-icons:not(:empty) {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    margin-left: auto;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-icons .topbar-icon-plain {
    width: 32px;
    height: 32px;
  }

  body[data-page="dashboard"] .dashboard-greeting-mobile-icons .topbar-icon-plain svg {
    width: 19px;
    height: 19px;
  }

  body[data-page="dashboard"] .dashboard-greeting-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  body[data-page="dashboard"] .greeting-title {
    font-size: 1.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dashboard-quick-action-desktop-only,
  .dashboard-quick-action-mobile-hide { display: none; }

  .dashboard-quick-action-btn {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    gap: 0.35rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .topbar-search-trigger {
    width: auto;
    flex: 1;
    min-width: 0;
    padding: 0.5rem;
    justify-content: center;
  }

  .topbar-search-trigger span,
  .topbar-search-trigger kbd { display: none; }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
    z-index: 70;
  }

  .mobile-nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border: none;
    background: transparent;
    color: #71717A;
    font-size: 0.625rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    margin: 5px 3px;
    padding: 5px 0.15rem;
    border-radius: 14px;
    transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
  }

  .mobile-nav-item span { text-align: center; line-height: 1.15; }

  .mobile-nav-item svg { width: 20px; height: 20px; stroke-width: 1.7px; flex-shrink: 0; }

  .mobile-nav-item.active,
  .mobile-nav-toggle.sheet-open { color: var(--primary-color); }

  .mobile-nav-item.active {
    background: #EBF4FF;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(16, 24, 40, 0.04);
  }

  .mobile-nav-item .nav-badge {
    position: absolute;
    top: 2px;
    right: 22%;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    font-size: 9px;
    line-height: 15px;
    text-align: center;
  }

  body.mobile-sheet-open .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 75;
  }

  .mobile-nav-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface-card);
    border-radius: 16px 16px 0 0;
    padding: 0.75rem;
    padding-bottom: calc(64px + 1rem + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 76;
  }

  body.mobile-sheet-open .mobile-nav-sheet.has-open-panel { transform: translateY(0); }

  .mobile-nav-sheet-panel { display: none; flex-direction: column; gap: 0.25rem; }
  .mobile-nav-sheet-panel.active { display: flex; }

  .mobile-sheet-link {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-control);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #18181B;
    text-decoration: none;
  }

  .mobile-sheet-link:active { background: rgba(0, 0, 0, 0.045); }
  .mobile-sheet-link.active { color: var(--primary-color); background: rgba(0, 0, 0, 0.04); }

  .profile-dropdown {
    display: block !important;
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding: 1rem;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.14);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s ease;
    z-index: 76;
  }

  .profile-dropdown.show { transform: translateY(0); visibility: visible; }
}

body[data-theme="dark"] .mobile-bottom-nav { background: #333333 !important; border-top-color: #404040 !important; }
body[data-theme="dark"] .mobile-nav-item { color: rgba(255, 255, 255, 0.6) !important; }
body[data-theme="dark"] .mobile-nav-item.active,
body[data-theme="dark"] .mobile-nav-toggle.sheet-open { color: #FFFFFF !important; }
body[data-theme="dark"] .mobile-nav-item.active {
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
body[data-theme="dark"] .mobile-nav-sheet { background: #333333 !important; }
body[data-theme="dark"] .mobile-sheet-link { color: #FFFFFF !important; }
body[data-theme="dark"] .mobile-sheet-link:active { background: rgba(255, 255, 255, 0.08) !important; }
body[data-theme="dark"] .mobile-sheet-link.active { background: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; }

/* ==========================================================================
   CHAT / MENSAGENS — Light & Dark Mode (Portal Fornecedor B2B)
   Light: Lista de conversas #FAFAFA | Fundo das mensagens #FFFFFF
   Dark:  Lista de conversas #252525 | Fundo das mensagens #252525 | Header/Input #333333
   ========================================================================== */
body:not([data-theme="dark"]) .b2b-chat-contacts-column,
body:not([data-theme="dark"]) .b2b-chat-contacts-header,
body:not([data-theme="dark"]) #conv-list {
  background-color: #FAFAFA !important;
}

body[data-theme="dark"] .chat-shell,
body[data-theme="dark"] .b2b-chat-contacts-column,
body[data-theme="dark"] .b2b-chat-contacts-header,
body[data-theme="dark"] #conv-list,
body[data-theme="dark"] #chat-messages {
  background-color: #252525 !important;
  background: #252525 !important;
}

body[data-theme="dark"] .chat-shell .border-zinc-200,
body[data-theme="dark"] .chat-shell .border-zinc-200\/70,
body[data-theme="dark"] .chat-shell .border-zinc-200\/60,
body[data-theme="dark"] .chat-shell .divide-zinc-200\/60 > * {
  border-color: #404040 !important;
}

/* Header do Chat */
body[data-theme="dark"] .chat-shell .h-\[64px\] {
  background-color: #333333 !important;
  border-color: #404040 !important;
}

body[data-theme="dark"] #chat-header-name {
  color: #ffffff !important;
}

body[data-theme="dark"] #chat-header-status {
  color: #a1a1aa !important;
}

/* Header da lista de conversas */
body[data-theme="dark"] .chat-shell h3 {
  color: #ffffff !important;
}

/* Busca nas conversas */
body[data-theme="dark"] #chat-search-input {
  background-color: #333333 !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

body[data-theme="dark"] #chat-search-input::placeholder {
  color: #a1a1aa !important;
}

/* Itens da lista de contatos */
body[data-theme="dark"] #conv-list > div:hover {
  background-color: #333333 !important;
}

body[data-theme="dark"] #conv-list > div.bg-\[\#EBF4FF\] {
  background-color: #333333 !important;
  border-left-color: #537bae !important;
}

body[data-theme="dark"] #conv-list h4 {
  color: #ffffff !important;
}

body[data-theme="dark"] #conv-list p {
  color: #a1a1aa !important;
}

body[data-theme="dark"] #conv-list span.bg-white\/70 {
  background-color: #333333 !important;
  border-color: #404040 !important;
  color: #d4d4d8 !important;
}

/* Fundo das Mensagens (#252525) */
body[data-theme="dark"] #chat-messages {
  background-color: #252525 !important;
  background: #252525 !important;
}

/* Badge de data ("Hoje") */
body[data-theme="dark"] #chat-messages span.bg-white {
  background-color: #333333 !important;
  border-color: #404040 !important;
  color: #a1a1aa !important;
}

/* Balão do outro contato */
body[data-theme="dark"] #chat-messages .bg-white.border {
  background-color: #333333 !important;
  border-color: #404040 !important;
  color: #ffffff !important;
}

body[data-theme="dark"] #chat-messages .bg-white.border p {
  color: #ffffff !important;
}

/* Barra inferior de envio */
body[data-theme="dark"] .chat-shell .p-4.bg-white.border-t {
  background-color: #333333 !important;
  border-color: #404040 !important;
}

body[data-theme="dark"] #chat-input {
  background-color: #404040 !important;
  border-color: #4f4f4f !important;
  color: #ffffff !important;
}

body[data-theme="dark"] #chat-input::placeholder {
  color: #a1a1aa !important;
}

body[data-theme="dark"] #chat-attach-btn {
  background-color: #404040 !important;
  border-color: #4f4f4f !important;
  color: #ffffff !important;
}

/* Balão de mensagem do usuário à direita no Dark Mode (Texto em #ebf4ff) */
body[data-theme="dark"] .chat-bubble-user-glass {
  background: #252525 !important;
  background-color: #252525 !important;
  border: 1px solid #404040 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  color: #ebf4ff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-theme="dark"] .chat-bubble-user-glass,
body[data-theme="dark"] .chat-bubble-user-glass p,
body[data-theme="dark"] .chat-bubble-user-glass span,
body[data-theme="dark"] .chat-bubble-user-glass div {
  color: #ebf4ff !important;
  text-shadow: none !important;
}

/* Barra de rolagem nos chats (#000000 no Dark Mode) */
body[data-theme="dark"] .chat-shell ::-webkit-scrollbar-thumb,
body[data-theme="dark"] #chat-messages::-webkit-scrollbar-thumb,
body[data-theme="dark"] #conv-list::-webkit-scrollbar-thumb {
  background-color: #000000 !important;
  background: #000000 !important;
  border-radius: 9999px !important;
}

body[data-theme="dark"] .chat-shell ::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] #chat-messages::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] #conv-list::-webkit-scrollbar-thumb:hover {
  background-color: #000000 !important;
  background: #000000 !important;
}

body[data-theme="dark"] .chat-shell ::-webkit-scrollbar-track,
body[data-theme="dark"] #chat-messages::-webkit-scrollbar-track,
body[data-theme="dark"] #conv-list::-webkit-scrollbar-track {
  background: transparent !important;
}

body[data-theme="dark"] #chat-messages,
body[data-theme="dark"] #conv-list {
  scrollbar-color: #000000 transparent !important;
}

/* ==========================================================================
   TEMA ESCURO: MENUS ATIVOS & ABAS DE SUBMENU (#ebf4ff no texto e barra embaixo)
   ========================================================================== */
body[data-theme="dark"] .category-tab.active,
body[data-theme="dark"] button.category-tab.active,
body[data-theme="dark"] .b2b-category-pill.active,
body[data-theme="dark"] button.b2b-category-pill.active,
body[data-theme="dark"] .love-tab-item.active,
body[data-theme="dark"] button.love-tab-item.active,
body[data-theme="dark"] .subnav-item.active,
body[data-theme="dark"] [role="tab"].active,
body[data-theme="dark"] [role="tab"][aria-selected="true"],
body[data-theme="dark"] .active[class*="border-b"],
body[data-theme="dark"] [class*="border-b"].active,
body[data-theme="dark"] .active[class*="border-b-2"],
body[data-theme="dark"] [class*="border-b-2"].active {
  color: #ebf4ff !important;
  border-bottom-color: #ebf4ff !important;
  border-color: #ebf4ff !important;
}

body[data-theme="dark"] .category-tab.active *,
body[data-theme="dark"] .b2b-category-pill.active *,
body[data-theme="dark"] .active[class*="border-b"] *,
body[data-theme="dark"] [class*="border-b"].active *,
body[data-theme="dark"] .active[class*="border-b-2"] *,
body[data-theme="dark"] [class*="border-b-2"].active * {
  color: #ebf4ff !important;
}

/* ==========================================================================
   Construtor visual — Editar meu site (page builder)
   ========================================================================== */

.builder-narrow-notice { display: none; }

@media (max-width: 1180px) {
  .builder-wrap { display: none; }
  .builder-narrow-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    border-radius: var(--radius-card);
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
  }
}

.builder-wrap {
  border: none;
  border-top: 1px solid var(--border-card);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 1.25rem -2rem 0;
  width: calc(100% + 4rem);
}

/* -------------------- Toolbar -------------------- */

.builder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-card);
  background: #FAFAFA;
  flex-wrap: wrap;
}

.builder-page-switcher { position: relative; display: inline-block; }

.builder-page-name {
  border: 1px solid transparent;
  background-color: transparent;
  font-size: 0.875rem;
  font-weight: 700;
  color: #18181B;
  font-family: inherit;
  padding: 0.4rem 1.75rem 0.4rem 0.6rem;
  border-radius: 8px;
  min-width: 140px;
  max-width: 220px;
  text-align: left;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 12px;
}
.builder-page-name:hover { background-color: #F4F4F5; }
.builder-page-name:focus { outline: none; border-color: var(--border-light); background-color: #fff; }
.builder-page-switcher[aria-expanded="true"] .builder-page-name,
.builder-page-name[aria-expanded="true"] { background-color: #F4F4F5; }

#builder-page-dropdown {
  display: none;
  left: 0;
  right: auto;
  min-width: 180px;
  width: max-content;
}
#builder-page-dropdown.show { display: flex; }
.kanban-list-dropdown-item.active { background: #F4F4F5; font-weight: 700; }

.builder-device-toggle { display: flex; align-items: center; gap: 0.25rem; background: #F4F4F5; padding: 0.25rem; border-radius: 10px; }
.builder-device-btn {
  width: 32px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px; color: #71717A; background: transparent; border: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.builder-device-btn svg { width: 16px; height: 16px; }
.builder-device-btn:hover { color: #18181B; }
.builder-device-btn.active { background: #fff; color: #18181B; box-shadow: var(--shadow-soft); }

.builder-toolbar-right { display: flex; align-items: center; gap: 0.4rem; }
.builder-tool-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: #52525B; background: transparent; border: 1px solid transparent; cursor: pointer;
}
.builder-tool-btn svg { width: 16px; height: 16px; }
.builder-tool-btn:hover:not(:disabled) { background: #F4F4F5; }
.builder-tool-btn:disabled { color: #D4D4D8; cursor: default; }
.builder-toolbar-divider { width: 1px; height: 20px; background: var(--border-light); margin: 0 0.15rem; }
.builder-toolbar-btn { padding: 0.45rem 0.85rem; font-size: 0.8125rem; }
.builder-toolbar-btn svg { width: 15px; height: 15px; }
.builder-toolbar-btn.active { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }
.builder-toolbar-btn.active:hover { background: var(--primary-blue-hover); }

/* -------------------- Corpo: sidebar + canvas + inspector -------------------- */

.builder-body { display: flex; min-height: 0; height: 640px; }

.builder-elements-panel {
  width: 312px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-card);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.builder-panel-tabs { display: flex; gap: 0.25rem; padding: 0.6rem; margin: 0.65rem 0.65rem 0; background: #fff; border: 1px solid var(--border-card); border-radius: 10px; flex-shrink: 0; }
.builder-panel-tab {
  flex: 1;
  padding: 0.5rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #71717A;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.builder-panel-tab:hover { color: #3F3F46; }
.builder-panel-tab.active { color: #18181B; background: #ebf4ff; }

.builder-panel-tab-body { padding: 0.9rem 0.25rem 0.9rem 0.75rem; overflow-y: auto; flex: 1; min-height: 0; }
.builder-panel-tab-body-estilo { display: flex; flex-direction: column; gap: 1.4rem; }

.builder-el-group-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #A1A1AA;
  padding: 0.5rem 0.4rem 0.4rem;
}
.builder-el-group-title svg { width: 14px; height: 14px; flex-shrink: 0; }

.builder-el-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.4rem; }

.builder-el-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.95rem 0.3rem;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  background: #fff;
  cursor: grab;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.builder-el-item svg { width: 17px; height: 17px; color: #52525B; }
.builder-el-item span { font-size: 0.6875rem; font-weight: 600; color: #3F3F46; line-height: 1.15; }
.builder-el-item:hover { border-color: var(--primary-blue); background: #F8FAFC; transform: translateY(-1px); }
.builder-el-item:active { cursor: grabbing; }
.builder-el-item.sortable-chosen { opacity: 0.4; }

.builder-el-item.is-structural { cursor: pointer; }
.builder-el-item.is-structural:active { cursor: pointer; }

/* -------------------- Canvas -------------------- */

.builder-canvas-viewport {
  flex: 1;
  min-width: 0;
  background: #EDEDF0;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: center;
}

.builder-canvas-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  transform: translateZ(0);
  transition: max-width .2s ease;
}
.builder-canvas-frame[data-device="tablet"] { max-width: 768px; }
.builder-canvas-frame[data-device="mobile"] { max-width: 375px; }

.builder-canvas-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

.builder-canvas {
  width: 100%;
  background: #fff;
  min-height: 100%;
  box-shadow: 0 0 0 1px var(--border-card);
}

.builder-fixed-header {
  --header-bg: #FAFAFA;
  --header-text: #3F3F46;
  --header-cta-bg: var(--bx-primary, var(--primary-blue));
  --header-cta-text: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-card);
  box-shadow: 0 1px 0 rgba(16,24,40,0.03);
  cursor: pointer;
}
#site-builder-root .builder-fixed-header:hover,
.builder-fixed-header.is-selected { outline: 2px dashed #D4D4D8; outline-offset: -2px; }
.builder-fixed-header[data-style="flutuante"] {
  width: calc(100% - 32px);
  max-width: 1200px;
  margin: 16px auto 0;
  border-radius: var(--bx-radius, 16px);
  border-bottom: none;
  box-shadow: 0 12px 28px rgba(16,24,40,0.18);
  position: relative;
  z-index: 20;
}
.builder-fixed-header[data-sticky="false"] { position: static; }
.builder-fixed-header[data-style="flutuante"][data-sticky="true"] { position: sticky; top: 16px; }
.builder-canvas[data-page-key="checkout"] .builder-fixed-header { position: static !important; }
#site-builder-root .builder-fixed-header[data-style="flutuante"]:hover,
.builder-fixed-header[data-style="flutuante"].is-selected { outline: 2px dashed #D4D4D8; outline-offset: -2px; }
.builder-fixed-header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 1.75rem;
  max-width: 1080px;
  margin: 0 auto;
}
.builder-fixed-header-logo-frame { width: 148px; height: 40px; overflow: hidden; flex-shrink: 0; }
.builder-fixed-header-logo-frame .builder-fixed-header-logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform: scale(var(--logo-scale, 1)) translate(var(--logo-x, 0%), var(--logo-y, 0%));
  transform-origin: center;
}
.builder-fixed-header-logo-placeholder {
  font-size: 0.75rem; font-weight: 600; color: var(--header-text); white-space: nowrap;
  border: 1.5px dashed currentColor; opacity: 0.7; border-radius: 8px; padding: 0.5rem 0.85rem; flex-shrink: 0;
}
.builder-fixed-header-menu { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.builder-fixed-header-menu a { font-size: 0.8125rem; color: var(--header-text); text-decoration: none; white-space: nowrap; opacity: 0.9; }
.builder-fixed-header-menu a:hover { opacity: 1; }
.builder-fixed-header-menu a,
.builder-fixed-header-cta,
.builder-mobile-menu-drawer-links a,
.builder-mobile-menu-drawer-cta {
  font-family: var(--menu-font-family, inherit);
  font-weight: var(--menu-font-weight, 600);
  font-style: var(--menu-font-style, normal);
  text-decoration: var(--menu-text-decoration, none);
}
.builder-fixed-header-menu[data-menu-style="flutuante"] {
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--bx-radius, 999px);
  background: color-mix(in srgb, var(--header-text) 8%, transparent);
}
.builder-fixed-header-menu[data-menu-style="flutuante"] a {
  padding: 0.4rem 0.9rem;
  border-radius: var(--bx-radius, 999px);
  opacity: 0.85;
}
.builder-fixed-header-menu[data-menu-style="flutuante"] a:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--header-text) 10%, transparent);
}
.builder-fixed-header-menu[data-menu-style="botoes"] { gap: 0.5rem; }
.builder-fixed-header-menu[data-menu-style="botoes"] a {
  padding: 0.45rem 1rem;
  border-radius: var(--bx-radius, 8px);
  background: color-mix(in srgb, var(--header-text) 8%, transparent);
  opacity: 1;
}
.builder-fixed-header-menu[data-menu-style="botoes"] a:hover {
  background: color-mix(in srgb, var(--header-text) 16%, transparent);
}
.builder-fixed-header-cta {
  flex-shrink: 0;
  font-size: 0.8125rem; color: var(--header-cta-text);
  background: var(--header-cta-bg);
  padding: 0.55rem 1.15rem; border-radius: var(--bx-radius, 999px);
  white-space: nowrap;
}

.builder-fixed-header-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: none; border: none; color: var(--header-text); cursor: pointer; padding: 0;
}
.builder-fixed-header-burger svg { width: 22px; height: 22px; }

.builder-canvas[data-device="mobile"] .builder-fixed-header-menu,
.builder-canvas[data-device="mobile"] .builder-fixed-header-inner > .builder-fixed-header-cta { display: none; }
.builder-canvas[data-device="mobile"] .builder-fixed-header-burger { display: flex; }

.builder-fixed-footer {
  background: #18181B;
  padding: 1.75rem 1.5rem;
  cursor: default;
}
.builder-fixed-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  row-gap: 0.35rem;
  text-align: left;
}
.builder-fixed-footer-logo { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.builder-fixed-footer-madewith { font-size: 0.75rem; font-weight: 500; color: #A1A1AA; }
.builder-fixed-footer-word { height: 22px; width: auto; object-fit: contain; }
.builder-fixed-footer-text p, .builder-fixed-footer-text span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #A1A1AA;
}

.builder-mobile-menu-root { position: absolute; inset: 0; pointer-events: none; }

.builder-mobile-menu-backdrop {
  display: block;
  position: fixed; inset: 0;
  background: rgba(24,24,27,0.45);
  z-index: 29;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.builder-mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.builder-mobile-menu-drawer {
  display: flex;
  flex-direction: column;
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 78%; max-width: 300px;
  background: var(--header-bg-solid, var(--header-bg, #fff));
  z-index: 30;
  box-shadow: -8px 0 24px rgba(16,24,40,0.18);
  padding: 1.25rem;
  transform: translateX(100%);
  transition: transform .25s ease;
  pointer-events: none;
}
.builder-mobile-menu-drawer.is-open { transform: translateX(0); pointer-events: auto; }

.builder-mobile-menu-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-shrink: 0; }
.builder-mobile-menu-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--header-text);
}
.builder-mobile-menu-close svg { width: 18px; height: 18px; }
.builder-mobile-menu-drawer-links { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 1.5rem; }
.builder-mobile-menu-drawer-links a {
  font-size: 0.9375rem; color: var(--header-text);
  padding: 0.8rem 0.15rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.builder-mobile-menu-drawer-cta { text-align: center; margin-top: auto; }

.builder-empty-canvas {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 4rem 1.5rem; color: #A1A1AA; text-align: center;
}
.builder-empty-canvas svg { width: 34px; height: 34px; color: #D4D4D8; }
.builder-empty-canvas p { font-size: 0.8125rem; max-width: 260px; }

.builder-elements-list.is-empty-section {
  flex-direction: column;
  gap: 0.6rem;
  min-height: 220px;
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.builder-elements-list.is-empty-section svg { width: 32px; height: 32px; color: #D4D4D8; }
.builder-elements-list.is-empty-section span { max-width: 260px; line-height: 1.5; font-size: 0.8125rem; }

.builder-section {
  position: relative;
  z-index: 0;
  border: 1px dashed transparent;
  padding: var(--bx-section-spacing) 0;
  /* seção ocupa a tela cheia e centraliza o conteúdo */
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#site-builder-root .builder-section:hover { border-color: #CFE1F0; }
.builder-section.is-selected { border-color: var(--primary-blue); border-style: solid; }
.builder-section-bg-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}
.builder-section-overlay {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* carrossel de imagens de fundo: camadas empilhadas alternam com fade */
.builder-section-bg-carousel-layer { opacity: 0; }
.builder-section[data-bg-carousel-count="2"] .builder-section-bg-carousel-layer:nth-child(1) { animation: bgCarousel2Layer1 10s infinite; }
.builder-section[data-bg-carousel-count="2"] .builder-section-bg-carousel-layer:nth-child(2) { animation: bgCarousel2Layer2 10s infinite; }
.builder-section[data-bg-carousel-count="3"] .builder-section-bg-carousel-layer:nth-child(1) { animation: bgCarousel3Layer1 15s infinite; }
.builder-section[data-bg-carousel-count="3"] .builder-section-bg-carousel-layer:nth-child(2) { animation: bgCarousel3Layer2 15s infinite; }
.builder-section[data-bg-carousel-count="3"] .builder-section-bg-carousel-layer:nth-child(3) { animation: bgCarousel3Layer3 15s infinite; }
@keyframes bgCarousel2Layer1 { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bgCarousel2Layer2 { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bgCarousel3Layer1 { 0%, 26% { opacity: 1; } 33%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bgCarousel3Layer2 { 0%, 26% { opacity: 0; } 33%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes bgCarousel3Layer3 { 0%, 60% { opacity: 0; } 66%, 93% { opacity: 1; } 100% { opacity: 0; } }

/* container: conteúdo centralizado, largura máxima e padding lateral de segurança */
.builder-section > .builder-columns-row {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* mobile: seção usa altura dinâmica da viewport e padding lateral menor */
.builder-canvas[data-device="mobile"] .builder-section { min-height: 100dvh; }
.builder-canvas[data-device="mobile"] .builder-section > .builder-columns-row { max-width: 100%; padding: 0 16px; }

.builder-canvas[data-page-key="checkout"][data-device="mobile"] .builder-columns-row { flex-direction: column; }
.builder-canvas[data-page-key="checkout"][data-device="mobile"] .builder-column { flex: 0 0 100% !important; max-width: 100% !important; }
.builder-canvas[data-page-key="checkout"] .builder-section { min-height: 0; }

/* Informações de cobrança / Você está contratando ficam dentro de uma caixa
   branca sobre o fundo colorido da seção — igual ao site principal. */
.builder-canvas[data-page-key="checkout"] [data-fixed-key="checkout"] > .builder-columns-row {
  gap: 24px;
}
.builder-canvas[data-page-key="checkout"][data-device="desktop"] [data-fixed-key="checkout"] > .builder-columns-row,
.builder-canvas[data-page-key="checkout"][data-device="tablet"] [data-fixed-key="checkout"] > .builder-columns-row {
  align-items: flex-start;
}
.builder-canvas[data-page-key="checkout"] [data-fixed-key="checkout"] > .builder-columns-row > .builder-column {
  background: #ffffff;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(16,24,40,0.08);
}
/* A regra genérica #site-builder-root .builder-column:hover deixa o fundo
   meio transparente pra indicar "hover" — mas aqui a caixa precisa continuar
   branca sempre, então sobrescreve com a mesma especificidade (ID). */
#site-builder-root .builder-canvas[data-page-key="checkout"] [data-fixed-key="checkout"] > .builder-columns-row > .builder-column:hover {
  background: #ffffff;
  border-color: transparent;
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .builder-canvas[data-page-key="checkout"] [data-fixed-key="checkout"] > .builder-columns-row > .builder-column { padding: 20px; }
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .builder-section { min-height: 100dvh; }
  .builder-section > .builder-columns-row { max-width: 100%; padding: 0 16px; }
}

/* botões: altura mínima de toque no mobile */
.builder-canvas[data-device="mobile"] .be-button { min-height: 44px; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .be-button { min-height: 44px; }
}

.builder-elements-list > * { margin-bottom: 1rem; }
.builder-elements-list > *:last-child { margin-bottom: 0; }

.builder-block-toolbar {
  position: absolute;
  top: -13px;
  right: 10px;
  display: none;
  align-items: center;
  gap: 1px;
  background: var(--primary-blue);
  border-radius: 6px;
  padding: 2px;
  z-index: 12;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.builder-section:hover:not(:has(:is(.builder-column, .builder-element):hover)) > .builder-block-toolbar,
.builder-section.is-selected > .builder-block-toolbar,
.builder-column:hover:not(:has(:is(.builder-column, .builder-element):hover)) > .builder-block-toolbar,
.builder-column.is-selected > .builder-block-toolbar,
.builder-element:hover:not(:has(:is(.builder-column, .builder-element):hover)) > .builder-block-toolbar,
.builder-element.is-selected > .builder-block-toolbar { display: flex; }

.builder-block-toolbar-tag {
  font-size: 0.625rem; font-weight: 700; color: #fff; padding: 0 0.4rem; text-transform: uppercase; letter-spacing: .03em;
}
.builder-block-toolbar button {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  color: #EBF4FF; background: transparent; border: none; border-radius: 4px; cursor: pointer;
}
.builder-block-toolbar button svg { width: 12px; height: 12px; }
.builder-block-toolbar button:hover { background: rgba(255,255,255,0.18); color: #fff; }
.builder-block-toolbar button.el-drag-handle { cursor: grab; }
.el-lock-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: #EBF4FF; }
.el-lock-icon svg { width: 12px; height: 12px; }
.builder-element-locked { cursor: default; }
.builder-element-locked:hover { outline: 1px dashed rgba(24,24,27,0.25); outline-offset: 2px; }

.be-text-format-toolbar {
  position: fixed;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1px;
  background: #18181B;
  border-radius: 8px;
  padding: 4px;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.be-text-format-toolbar[hidden] { display: none; }
.be-text-format-toolbar button {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: #EBF4FF; background: transparent; border: none; border-radius: 5px; cursor: pointer;
}
.be-text-format-toolbar button svg { width: 14px; height: 14px; }
.be-text-format-toolbar button:hover { background: rgba(255,255,255,0.18); color: #fff; }
.be-text-format-toolbar button.active { background: var(--primary-blue); color: #fff; }

.builder-columns-row { display: flex; align-items: stretch; position: relative; }

.builder-column {
  position: relative;
  min-width: 40px;
  border: 1px dashed transparent;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
#site-builder-root .builder-column:hover { border-color: #E3D5C0; background: rgba(225,155,60,0.03); }
.builder-column.is-selected { border-color: #B45309; border-style: solid; }

.builder-column-resizer {
  width: 9px;
  margin: 0 -5px;
  flex-shrink: 0;
  cursor: col-resize;
  position: relative;
  z-index: 5;
}
.builder-column-resizer::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 4px; width: 1px;
  background: var(--border-light);
}
.builder-column-resizer:hover::after,
.builder-column-resizer.is-dragging::after { background: var(--primary-blue); width: 2px; left: 3.5px; }

.builder-elements-list { min-height: 32px; flex: 1; display: flex; flex-direction: column; }
.builder-elements-list.is-empty {
  border: 1.5px dashed var(--border-light);
  border-radius: 8px;
  min-height: 64px;
  align-items: center; justify-content: center; display: flex;
  color: #A1A1AA; font-size: 0.75rem;
}

.builder-element {
  position: relative;
  border: 1px dashed transparent;
}
#site-builder-root .builder-element:hover { border-color: #D4D4D8; cursor: grab; }
#site-builder-root .builder-element:hover [contenteditable="true"] { cursor: text; }
#site-builder-root .builder-element:active { cursor: grabbing; }
.builder-element.is-selected { border-color: #D4D4D8; }
.builder-element.sortable-ghost { opacity: 0.35; background: #EBF4FF; }
.builder-element.sortable-drag { opacity: 0.9; }


/* -------------------- Conteúdo dos elementos (be-*) -------------------- */

.builder-canvas {
  --bx-primary: var(--primary-blue);
  --bx-radius: 10px;
  --bx-section-spacing: 2.5rem;
}

.be-text, .be-heading, .be-subtitle { outline: none; min-height: 1.4em; overflow-wrap: break-word; word-break: break-word; }
.be-text p { margin: 0 0 1em; }
.be-text p:last-child { margin-bottom: 0; }
.builder-element, .builder-column { overflow-wrap: break-word; }
.builder-canvas p, .builder-canvas span, .builder-canvas a, .builder-canvas button,
.builder-canvas input, .builder-canvas select, .builder-canvas textarea, .builder-canvas label {
  font-family: inherit;
}
.be-heading { font-weight: 700; }
.builder-canvas h1.be-heading { font-family: var(--h1-font-family, inherit); font-weight: var(--h1-font-weight, 700); font-style: var(--h1-font-style, normal); text-decoration: var(--h1-text-decoration, none); }
.builder-canvas h2.be-heading { font-family: var(--h2-font-family, inherit); font-weight: var(--h2-font-weight, 700); font-style: var(--h2-font-style, normal); text-decoration: var(--h2-text-decoration, none); }
.builder-canvas h3.be-heading { font-family: var(--h3-font-family, inherit); font-weight: var(--h3-font-weight, 700); font-style: var(--h3-font-style, normal); text-decoration: var(--h3-text-decoration, none); }
.builder-canvas h4.be-heading { font-family: var(--h4-font-family, inherit); font-weight: var(--h4-font-weight, 700); font-style: var(--h4-font-style, normal); text-decoration: var(--h4-text-decoration, none); }
.builder-canvas h5.be-heading { font-family: var(--h5-font-family, inherit); font-weight: var(--h5-font-weight, 700); font-style: var(--h5-font-style, normal); text-decoration: var(--h5-text-decoration, none); }
.be-subtitle { color: #71717A; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: 0.8125rem; }
.be-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; cursor: default;
  background: var(--bx-primary); color: #fff; padding: 0.7rem 1.4rem; border-radius: var(--bx-radius); font-weight: 600; font-size: 0.875rem;
}
.be-button span { outline: none; }
.be-link { outline: none; cursor: default; color: var(--bx-primary); font-weight: 600; text-decoration: underline; }
.be-icon { display: inline-flex; color: var(--bx-primary); }
.be-icon svg { width: 100%; height: 100%; }
.be-image { display: inline-block; max-width: 100%; vertical-align: middle; }
.be-video-embed { position: relative; width: 100%; padding-top: 56.25%; background: #18181B; border-radius: 8px; overflow: hidden; }
.be-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.be-video-empty {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.4rem;
  padding: 2.5rem 1rem; background: #F4F4F5; border-radius: 8px; color: #A1A1AA; font-size: 0.75rem;
}
.be-video-empty svg { width: 40px; height: 40px; flex-shrink: 0; }
.be-separator { border: none; border-top: 1px solid #F2F3F6; }
.be-spacer { width: 100%; }
.be-list { padding-left: 1.25rem; list-style-position: outside; }
ol.be-list { list-style-type: decimal; }
ul.be-list:not(.be-list-custom-marker) { list-style-type: disc; }
.be-list li { outline: none; margin-bottom: 0.35rem; }
.be-list.be-list-custom-marker { list-style: none; padding-left: 0; }
.be-list.be-list-custom-marker li { display: flex; align-items: flex-start; gap: 0.4rem; }
.be-list-marker { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; color: var(--bx-primary); line-height: 1.5; }
.be-list-marker svg { width: 14px; height: 14px; flex-shrink: 0; }
.be-list-marker-num { font-weight: 600; font-size: 0.9em; }
.be-list-item-text { flex: 1; min-width: 0; }
.be-social { display: flex; gap: 0.6rem; flex-wrap: wrap; width: 100%; }
.be-social a {
  width: 34px; height: 34px; border-radius: 999px; background: #18181B; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.be-social svg { width: 15px; height: 15px; }
.be-gallery { display: grid; gap: 0.6rem; }
.be-gallery img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; }
.be-carousel { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.4rem; }
.be-carousel img { scroll-snap-align: start; flex: 0 0 240px; height: 150px; object-fit: cover; border-radius: 8px; }

.be-carousel-arrows-wrap { position: relative; padding: 0 2rem; }
.be-carousel-arrows-wrap .be-carousel-arrow { width: 24px; height: 24px; }
.be-carousel-arrows-wrap .be-carousel-arrow svg { width: 11px; height: 11px; }
.be-carousel-arrows-track { padding-bottom: 0; scrollbar-width: none; }
.be-carousel-arrows-track::-webkit-scrollbar { display: none; }

.be-carousel-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.be-carousel-marquee-track {
  display: flex; gap: 0.75rem; width: max-content;
  animation: be-carousel-marquee-scroll var(--carousel-marquee-duration, 20s) linear infinite;
}
.be-carousel-marquee-track img { flex: 0 0 240px; height: 150px; object-fit: cover; border-radius: 8px; }
.be-carousel-marquee:hover .be-carousel-marquee-track { animation-play-state: paused; }
@keyframes be-carousel-marquee-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.be-testimonials { display: grid; gap: 1rem; }
.be-testimonial-card { border: 1px solid var(--border-card); border-radius: 10px; padding: 1.1rem; }
.be-testimonial-quote { font-size: 0.8125rem; color: #3F3F46; outline: none; margin-bottom: 0.75rem; line-height: 1.55; }
.be-testimonial-person { display: flex; align-items: center; gap: 0.6rem; }
.be-testimonial-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #E4E4E7; flex-shrink: 0; }
.be-testimonial-name { font-size: 0.8125rem; font-weight: 700; color: #18181B; }
.be-testimonial-role { font-size: 0.6875rem; color: #A1A1AA; }

.be-testimonials-carousel { position: relative; padding: 0 2.5rem; }
.be-testimonials-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.be-testimonials-track .be-testimonial-card { scroll-snap-align: start; flex: 0 0 calc((100% - (var(--carousel-visible, 1) - 1) * 1rem) / var(--carousel-visible, 1)); }
.be-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border-card); color: #52525B; cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.be-carousel-arrow svg { width: 16px; height: 16px; }
.be-carousel-arrow-prev { left: 0; }
.be-carousel-arrow-prev svg { transform: rotate(90deg); }
.be-carousel-arrow-next { right: 0; }
.be-carousel-arrow-next svg { transform: rotate(-90deg); }
.be-carousel-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.85rem; }
.be-carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: #D4D4D8; border: none; padding: 0; cursor: pointer; }
.be-carousel-dot.active { background: var(--bx-primary, #183b54); }

.be-testimonials-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.be-testimonials-marquee-track {
  display: flex; gap: 1rem; width: max-content;
  animation: be-marquee-scroll var(--marquee-duration, 20s) linear infinite;
}
.be-testimonials-marquee-track .be-testimonial-card { flex: 0 0 260px; }
.be-testimonials-marquee:hover .be-testimonials-marquee-track { animation-play-state: paused; }
@keyframes be-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.be-form-preview { border: 1px solid var(--border-card); border-radius: 10px; padding: 1.25rem; max-width: 420px; }
.be-form-preview-title { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.9rem; }
.be-form-preview .form-field-preview-line,
.be-form-preview .form-field-preview-box { pointer-events: none; margin-bottom: 0.8rem; }
.be-map-embed { width: 100%; height: 260px; border: 0; border-radius: 8px; }
.be-map-empty {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.4rem;
  height: 200px; background: #F4F4F5; border-radius: 8px; color: #A1A1AA; font-size: 0.75rem; text-align: center; padding: 1rem;
}
.be-map-empty svg { width: 40px; height: 40px; flex-shrink: 0; }
.be-custom-html { min-height: 24px; }

/* -------------------- Inspector -------------------- */

.inspector-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border-card);
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.inspector-editing-label { font-size: 0.75rem; font-weight: 700; color: #A1A1AA; }

.builder-breadcrumb-back {
  display: flex; align-items: center; gap: 0.4rem;
  background: none; border: none; padding: 0; cursor: pointer;
  color: #3F3F46; font-weight: 700; font-size: 0.8125rem;
}
.builder-breadcrumb-back svg { width: 15px; height: 15px; }
.builder-breadcrumb-back:hover { color: var(--primary-blue); }

.inspector-tabs { display: flex; gap: 0.25rem; position: sticky; top: 45px; z-index: 2; background: #fff; padding: 0.6rem; margin: 0.65rem 0.65rem 0; border: 1px solid var(--border-card); border-radius: 10px; }
.inspector-tab {
  flex: 1;
  padding: 0.5rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #71717A;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.inspector-tab:hover { color: #3F3F46; }
.inspector-tab.active { color: #18181B; background: #ebf4ff; }

.inspector-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; scrollbar-gutter: stable; flex: 1; min-height: 0; }
.inspector-empty { padding: 2rem 1.25rem; text-align: center; color: #A1A1AA; font-size: 0.8125rem; }
.inspector-empty svg { width: 28px; height: 28px; color: #D4D4D8; margin: 0 auto 0.6rem; }

.inspector-field { display: flex; flex-direction: column; gap: 0.35rem; }
.inspector-field-label,
.inspector-field-label-plain {
  font-size: 0.8125rem; font-weight: 400; color: #333333; text-transform: none; letter-spacing: normal;
  display: flex; align-items: center; justify-content: space-between;
}
.inspector-row { display: flex; gap: 0.5rem; }
.inspector-row .inspector-field { flex: 1; min-width: 0; }
.inspector-input, .inspector-select, .inspector-textarea {
  width: 100%; border: 1px solid var(--border-light); border-radius: 8px; padding: 0.45rem 0.6rem;
  font-size: 0.8125rem; background: #fff; color: #18181B;
}
.url-slug-field {
  display: flex; align-items: center; gap: 0.3rem;
  border: 1px solid var(--border-light); border-radius: 8px; padding: 0 0.6rem;
  background: #fff;
}
.url-slug-field:focus-within { border-color: var(--primary-blue); }
.url-slug-prefix, .url-slug-suffix { font-size: 0.75rem; color: #A1A1AA; white-space: nowrap; flex-shrink: 0; }
.url-slug-input { flex: 1; min-width: 0; border: none; padding: 0.5rem 0; font-size: 0.8125rem; background: transparent; color: #18181B; }
.url-slug-input:focus { outline: none; }
.url-slug-status { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.url-slug-status svg { width: 14px; height: 14px; }
.url-slug-status.is-available svg { color: #16A34A; }
.url-slug-status.is-taken svg { color: #DC2626; }
.url-slug-error { color: #DC2626 !important; }

.info-tooltip-wrap { position: relative; display: inline-flex; }
.info-tooltip-trigger {
  width: 15px; height: 15px; padding: 0; border: none; background: none; cursor: help;
  display: flex; align-items: center; justify-content: center; color: #A1A1AA; flex-shrink: 0;
}
.info-tooltip-trigger svg { width: 15px; height: 15px; }
.info-tooltip-trigger:hover, .info-tooltip-trigger:focus-visible { color: #71717A; }
.info-tooltip-bubble {
  position: absolute; top: calc(100% + 8px); right: -6px; z-index: 30;
  width: 210px; padding: 0.6rem 0.75rem; border-radius: 8px;
  background: #18181B; color: #fff; font-size: 0.6875rem; font-weight: 400; line-height: 1.5;
  text-transform: none; letter-spacing: normal; text-align: left;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 8px 24px rgba(16,24,40,0.16);
}
.info-tooltip-bubble::after {
  content: ''; position: absolute; bottom: 100%; right: 10px;
  border: 5px solid transparent; border-bottom-color: #18181B;
}
.info-tooltip-wrap:hover .info-tooltip-bubble,
.info-tooltip-trigger:focus-visible + .info-tooltip-bubble { opacity: 1; pointer-events: auto; transform: translateY(0); }
.info-tooltip-link { color: #93C5FD; text-decoration: underline; }
.info-tooltip-link:hover { color: #BFDBFE; }
.inspector-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 13px 13px;
  cursor: pointer;
}
.inspector-textarea { min-height: 90px; resize: vertical; font-family: ui-monospace, monospace; font-size: 0.75rem; }
.inspector-textarea-plain { min-height: 64px; font-family: 'Inter', -apple-system, sans-serif; font-size: 0.8125rem; }
.inspector-input:focus, .inspector-select:focus, .inspector-textarea:focus { outline: none; border-color: var(--primary-blue); }
.inspector-color-row { display: flex; align-items: center; gap: 0.5rem; }
#builder-elements-panel input[type="color"] { width: 30px; height: 30px; border: 1px solid var(--border-light); border-radius: 7px; padding: 2px; background: #fff; cursor: pointer; flex-shrink: 0; }
.inspector-field-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; }
.inspector-field-row .inspector-field-label { margin: 0; }
.overlay-color-controls { display: flex; align-items: center; gap: 0.4rem; }
.overlay-color-remove {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px;
  border: none; border-radius: 999px;
  background: #F4F4F5; color: #71717A; cursor: pointer;
}
.overlay-color-remove svg { width: 10px; height: 10px; }
.overlay-color-remove:hover { background: #E4E4E7; color: #18181B; }

.color-alpha-field { position: relative; }
.color-alpha-swatch {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid var(--border-light); border-radius: 7px; padding: 0; cursor: pointer;
  background-color: #fff;
}
.color-alpha-swatch.is-empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-card);
}
.color-alpha-swatch-empty-icon {
  font-size: 15px; line-height: 1; color: #A1A1AA; font-weight: 600;
}
.color-alpha-popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 0.6rem;
  width: 180px; padding: 0.75rem;
  background: #fff; border: 1px solid var(--border-card); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16,24,40,0.16);
}
.color-alpha-top-row { display: flex; gap: 0.4rem; }
.color-alpha-native { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border-light); border-radius: 7px; padding: 2px; background: #fff; cursor: pointer; }
.color-alpha-hex {
  flex: 1; min-width: 0; height: 34px; border: 1px solid var(--border-light); border-radius: 7px;
  padding: 0 0.5rem; font-size: 0.8125rem; font-family: ui-monospace, monospace; text-transform: uppercase;
  color: #18181B; background: #fff;
}
.color-alpha-hex:focus { outline: none; border-color: var(--primary-blue); }
.color-alpha-range-row { display: flex; flex-direction: column; gap: 0.35rem; }
.color-alpha-range-label { font-size: 0.75rem; color: #71717A; }
.color-alpha-range { width: 100%; }

.bg-carousel-thumbs { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.bg-carousel-thumb {
  position: relative;
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
}
.bg-carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-carousel-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--border-light);
  color: #A1A1AA; cursor: pointer;
}
.bg-carousel-thumb-empty:hover { border-color: var(--primary-blue); background: #F4F8FC; color: var(--primary-blue); }
.bg-carousel-thumb-empty svg { width: 16px; height: 16px; }
.bg-carousel-thumb-empty input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bg-carousel-thumb-remove {
  position: absolute; top: 2px; right: 2px;
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: none; border-radius: 999px;
  background: rgba(24,24,27,0.65); color: #fff; cursor: pointer;
}
.bg-carousel-thumb-remove svg { width: 8px; height: 8px; }
.bg-carousel-thumb-remove:hover { background: rgba(24,24,27,0.85); }

.menu-order-list { display: flex; flex-direction: column; gap: 0.4rem; }
.menu-order-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  background: #fff;
}
.menu-order-row .inspector-input { flex: 1; min-width: 0; }
.menu-order-row .el-drag-handle {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px;
  color: #A1A1AA; background: none; border: none; padding: 0; cursor: grab;
}
.menu-order-row .el-drag-handle svg { width: 15px; height: 15px; }
.menu-order-row .el-drag-handle:active { cursor: grabbing; }
.menu-order-row.sortable-ghost { opacity: 0.4; background: #EBF4FF; }
.menu-order-row-delete {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px;
  color: #A1A1AA; background: none; border: none; padding: 0; cursor: pointer;
}
.menu-order-row-delete svg { width: 15px; height: 15px; }
.menu-order-row-delete:hover { color: #DC2626; }
.inspector-segmented { display: flex; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; }
.inspector-segmented button {
  flex: 1; padding: 0.4rem 0.3rem; background: #fff; border: none; border-left: 1px solid var(--border-light);
  color: #71717A; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; line-height: 1.2;
}
.inspector-segmented button:first-child { border-left: none; }
.inspector-segmented button svg { width: 14px; height: 14px; }
.inspector-segmented button.active { background: var(--primary-blue); color: #fff; }
.inspector-range-row { display: flex; align-items: center; gap: 0.6rem; }
.inspector-range-row input[type="range"] { flex: 1; }
#builder-elements-panel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: #F3F3F3;
  outline: none;
  cursor: pointer;
}
#builder-elements-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: #F3F3F3;
}
#builder-elements-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: #ebf4ff;
  border: 1px solid #C7D9F0;
  box-shadow: 0 1px 2px rgba(16,24,40,0.15);
  cursor: pointer;
}
#builder-elements-panel input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #F3F3F3;
}
#builder-elements-panel input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ebf4ff;
  border: 1px solid #C7D9F0;
  box-shadow: 0 1px 2px rgba(16,24,40,0.15);
  cursor: pointer;
}
.inspector-range-value { font-size: 0.75rem; color: #71717A; width: 44px; text-align: right; flex-shrink: 0; }
.b2b-range-row { display: flex; align-items: center; gap: 0.85rem; }
.b2b-range-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: #E4E4E7;
  outline: none;
  cursor: pointer;
}
.b2b-range-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: #E4E4E7; }
.b2b-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--primary-blue);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,0.25);
  cursor: pointer;
}
.b2b-range-slider::-moz-range-track { height: 4px; border-radius: 999px; background: #E4E4E7; }
.b2b-range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-blue);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,0.25);
  cursor: pointer;
}
/* Largura mínima pra "50 km" e "100 km" não mexerem o slider; nowrap pra
   "Qualquer distância" ficar numa linha só. */
.b2b-range-value { font-size: 0.8125rem; font-weight: 600; color: #18181B; min-width: 60px; text-align: right; flex-shrink: 0; white-space: nowrap; }
.b2b-range-track-wrap { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.b2b-range-ticks { display: flex; justify-content: space-between; padding: 0 2px; }
.b2b-range-tick { width: 6px; height: 6px; border-radius: 50%; background: #D4D4D8; transition: background-color .15s ease, transform .15s ease; }
.b2b-range-tick.is-active { background: var(--primary-blue); transform: scale(1.4); }
body[data-theme="dark"] .b2b-range-slider,
body[data-theme="dark"] .b2b-range-slider::-webkit-slider-runnable-track,
body[data-theme="dark"] .b2b-range-slider::-moz-range-track { background: #404040 !important; }
body[data-theme="dark"] .b2b-range-value { color: #FFFFFF !important; }
body[data-theme="dark"] .b2b-range-tick { background: #525252 !important; }
.inspector-section-title { font-size: 0.75rem; font-weight: 700; color: #18181B; padding-top: 0.3rem; border-top: 1px solid var(--border-card); margin-top: 0.2rem; }
.inspector-section-title:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.inspector-section-title-row { display: flex; align-items: center; justify-content: space-between; }

.inspector-accordion-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
  user-select: none;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.inspector-accordion-title:hover { color: var(--primary-blue); }
.inspector-accordion-chevron {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
  color: #A1A1AA;
  transition: transform .15s ease;
}
.inspector-accordion-chevron svg { width: 13px; height: 13px; }
.inspector-accordion-title:not(.is-collapsed) .inspector-accordion-chevron { transform: rotate(180deg); }
.inspector-accordion-body { display: flex; flex-direction: column; gap: 1rem; }
.inspector-accordion-title.is-collapsed + .inspector-accordion-body { display: none; }

.margin-sync-toggle {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 5px; color: #A1A1AA; background: none; border: none; cursor: pointer;
}
.margin-sync-toggle svg { width: 13px; height: 13px; }
.margin-sync-toggle:hover { background: #F4F4F5; color: #52525B; }
.margin-sync-toggle.active { background: var(--primary-blue); color: #fff; }
.margin-sync-toggle.active:hover { background: var(--primary-blue-hover); }
.inspector-hint { font-size: 0.6875rem; color: #A1A1AA; line-height: 1.4; }

.inspector-list-item { border: 1px solid var(--border-card); border-radius: 8px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; position: relative; }
.inspector-list-item-remove { position: absolute; top: 0.4rem; right: 0.4rem; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #A1A1AA; background: none; border: none; cursor: pointer; border-radius: 5px; z-index: 1; }
.inspector-list-item-remove svg { width: 13px; height: 13px; }
.inspector-list-item-remove:hover { background: #FEE2E2; color: #B91C1C; }
#list-items-editor { display: flex; flex-direction: column; gap: 0.5rem; }
.inspector-list-item-row { display: flex; align-items: center; gap: 0.4rem; }
.inspector-list-item-row .inspector-input, .inspector-list-item-row .inspector-select { flex: 1; min-width: 0; }
.inspector-list-item-remove-inline {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; color: #A1A1AA; background: none; border: none; cursor: pointer; border-radius: 6px;
}
.inspector-list-item-remove-inline svg { width: 13px; height: 13px; }
.inspector-list-item-remove-inline:hover { background: #FEE2E2; color: #B91C1C; }

.image-upload-zone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  height: 96px;
  border: 1.5px dashed var(--border-light);
  border-radius: 10px;
  background: #FAFAFA;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}
.image-upload-zone:hover, .image-upload-zone.is-dragover { border-color: var(--primary-blue); background: #F4F8FC; }
.image-upload-zone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.image-upload-zone-plus {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border-light); color: var(--primary-blue);
}
.image-upload-zone-plus svg { width: 13px; height: 13px; }
.image-upload-zone-text { font-size: 0.6875rem; color: #A1A1AA; text-align: center; padding: 0 0.6rem; line-height: 1.3; }
.image-upload-zone-preview { width: 100%; height: 100%; object-fit: cover; }
.image-upload-zone.is-enviando { opacity: .6; pointer-events: none; }

.header-logo-picker-wrap { position: relative; }
.header-logo-picker {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; height: 90px;
  border: 1.5px dashed var(--border-light); border-radius: 10px;
  background: #FAFAFA;
  cursor: pointer; overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}
.header-logo-picker:hover, .header-logo-picker.is-dragover { border-color: var(--primary-blue); background: #F4F8FC; }
.header-logo-picker.has-image {
  border-style: solid; border-color: var(--border-light);
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}
.header-logo-picker-preview { max-width: 100%; max-height: 100%; object-fit: contain; }
.header-logo-picker-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  background: rgba(24,24,27,0.55); color: #fff; font-size: 0.6875rem; font-weight: 700;
  opacity: 0; transition: opacity .15s ease;
}
.header-logo-picker-overlay svg { width: 18px; height: 18px; }
.header-logo-picker:hover .header-logo-picker-overlay { opacity: 1; }
.image-upload-zone:hover .header-logo-picker-overlay { opacity: 1; }
.header-logo-picker-remove {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24,24,27,0.75); color: #fff; border: none; cursor: pointer;
}
.header-logo-picker-remove svg { width: 12px; height: 12px; }
.header-logo-picker-remove:hover { background: rgba(24,24,27,0.92); }

/* Logotipo com proporção fixa (8:5) — mesmo formato em toda a plataforma */
.logo-crop-img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform-origin: center;
  pointer-events: none;
  transform: scale(var(--logo-scale, 1)) translate(var(--logo-x, 0%), var(--logo-y, 0%));
}

.profile-form-top { display: flex; flex-direction: column; gap: 1.5rem; }
.profile-form-top-image { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.profile-form-top-avatar { flex-shrink: 0; width: 130px; }
.profile-form-top-cover { flex-shrink: 0; width: 208px; }
.profile-logo-hint { font-size: 0.75rem; color: #A1A1AA; margin-top: 0.5rem; }
body[data-theme="dark"] .profile-logo-hint { color: #71717A !important; }
.profile-form-top-fields { display: flex; flex-direction: column; gap: 1rem; }

.profile-logo-picker {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; aspect-ratio: 8 / 5;
  border: 1.5px dashed var(--border-light); border-radius: 10px;
  background: #FAFAFA;
  cursor: pointer; overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}
.profile-logo-picker:hover, .profile-logo-picker.is-dragover { border-color: var(--primary-blue); background: #F4F8FC; }
.profile-logo-picker.has-image {
  border-style: solid; border-color: var(--border-light);
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}

.profile-logo-adjust-frame {
  width: 100%; aspect-ratio: 8 / 5;
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--border-light); border-radius: 10px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  position: relative;
}
.profile-logo-adjust-frame.is-dragging { cursor: grabbing; }

/* Corte da imagem de capa do produto (proporção da capa do card, 14:5).
   O modal abre por cima do drawer de produto (drawer: z-index 96), senão
   ficava atrás dele e os cliques caíam no fundo do drawer. */
#product-cover-crop-modal { z-index: 120; }
.product-cover-adjust-frame {
  width: 100%; aspect-ratio: 14 / 5;
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--border-light); border-radius: 10px;
  overflow: hidden; cursor: grab; touch-action: none; position: relative; user-select: none;
}
.product-cover-adjust-frame.is-dragging { cursor: grabbing; }
.product-cover-adjust-img { position: absolute; max-width: none; pointer-events: none; }
/* "Mais imagens": carrossel horizontal de quadradinhos (até 6) + "+" no fim. */
.product-gallery-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding: 2px 2px 0.35rem; scrollbar-width: thin; }
.product-gallery-tile {
  position: relative; width: 88px; height: 88px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; background: #F4F4F5; border: 1px solid var(--border-light);
}
.product-gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery-add { width: 88px; height: 88px; flex-shrink: 0; gap: 0.2rem; }
.product-gallery-add .image-upload-zone-text { font-size: 0.6875rem; }
body[data-theme="dark"] .product-gallery-tile { background: #333333 !important; border-color: #404040 !important; }

/* O seletor da capa tem a mesma proporção, e a prévia preenche o quadro. */
.product-cover-picker { height: auto; aspect-ratio: 14 / 5; }
.product-cover-picker .header-logo-picker-preview { width: 100%; height: 100%; max-height: none; object-fit: cover; }
body[data-theme="dark"] .product-cover-adjust-frame { border-color: #404040 !important; }

.avatar-crop-img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform-origin: center;
  pointer-events: none;
  transform: scale(var(--avatar-scale, 1)) translate(var(--avatar-x, 0%), var(--avatar-y, 0%));
}

.profile-avatar-picker {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  width: 100%; aspect-ratio: 1;
  border: 1.5px dashed var(--border-light); border-radius: 14px;
  background: #FAFAFA;
  cursor: pointer; overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease;
}
.profile-avatar-picker:hover, .profile-avatar-picker.is-dragover { border-color: var(--primary-blue); background: #F4F8FC; }
/* Sem foto: a caixa inteira em azul clarinho com as iniciais da empresa
   (o mesmo avatar do cabeçalho e do chat), em vez de um "+" no cinza. */
.profile-avatar-picker:not(.has-image) { background: #EBF4FF; border-color: #CFE2FA; }
.profile-avatar-picker:not(.has-image):hover,
.profile-avatar-picker:not(.has-image).is-dragover { background: #DCEBFF; border-color: var(--primary-blue); }
.profile-avatar-initials { font-size: 1.75rem; font-weight: 700; color: #183B54; letter-spacing: 0.02em; line-height: 1; }
.profile-avatar-add-text { font-size: 0.6875rem; color: #537BAE; font-weight: 600; }
body[data-theme="dark"] .profile-avatar-picker:not(.has-image) { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .profile-avatar-initials { color: #FFFFFF !important; }

.profile-avatar-picker.has-image {
  border-style: solid; border-color: var(--border-light);
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}

.profile-avatar-adjust-frame {
  width: 100%; aspect-ratio: 1;
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--border-light); border-radius: 14px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  position: relative;
}
.profile-avatar-adjust-frame.is-dragging { cursor: grabbing; }

/* Foto de perfil no cabeçalho: quadrada com cantos arredondados sempre
   (nunca a bolinha com iniciais) — mostra a foto, ou um ícone genérico de
   perfil quando não há foto definida. */
#topbar-user-avatar, #profile-dropdown-avatar {
  border-radius: 10px !important;
  background: #F4F4F5;
  overflow: hidden;
}
#topbar-user-avatar svg, #profile-dropdown-avatar svg { width: 58%; height: 58%; color: #A1A1AA; }
body[data-theme="dark"] #topbar-user-avatar,
body[data-theme="dark"] #profile-dropdown-avatar { background: #333333 !important; }
.avatar-photo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
/* Ícone da Love como avatar padrão: inteiro (contain) e com respiro, em
   qualquer quadrado de avatar (cabeçalho, dropdown, chat). */
img.avatar-love-icon { width: 100%; height: 100%; object-fit: contain; padding: 20%; box-sizing: border-box; }
.b2b-avatar-square img.avatar-love-icon { object-fit: contain; padding: 20%; }
/* Só uma das duas versões do ícone aparece (escura no tema claro, branca no
   escuro). Sem isto, o "display: block" das imagens de avatar mostrava as
   duas lado a lado e o ícone visível ficava na metade esquerda. */
img.avatar-love-icon.sidebar-icon-dark { display: none !important; }
body[data-theme="dark"] img.avatar-love-icon.sidebar-icon-light { display: none !important; }
body[data-theme="dark"] img.avatar-love-icon.sidebar-icon-dark { display: block !important; }

/* Avatar sem foto: iniciais (mesmo azul do avatar com iniciais do Explorar). */
.avatar-initials {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: #EBF4FF; color: #183B54; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em;
  border-radius: inherit; line-height: 1;
}
.w-7 > .avatar-initials { font-size: 0.625rem; }
body[data-theme="dark"] .avatar-initials { background: #333333 !important; color: #FFFFFF !important; }

/* Chat: ⋮ ao lado das mensagens do fornecedor + menu Copiar/Salvar modelo */
.chat-msg-menu-btn {
  width: 26px; height: 26px; flex-shrink: 0; border: none; background: transparent; cursor: pointer;
  border-radius: 8px; color: #A1A1AA; display: flex; align-items: center; justify-content: center;
}
.chat-msg-menu-btn svg { width: 15px; height: 15px; }
.chat-msg-menu-btn:hover { background: #F4F4F5; color: #3F3F46; }
.chat-msg-menu {
  position: fixed; z-index: 130; display: none; min-width: 160px; padding: 0.3rem;
  background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.chat-msg-menu.show { display: block; }
.chat-msg-menu button {
  display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
  padding: 0.5rem 0.65rem; border-radius: 8px; font-size: 0.8125rem; color: #18181B;
}
.chat-msg-menu button:hover { background: #F4F4F5; }

/* Comandos "/" acima da caixa de mensagem */
.chat-command-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20;
  max-height: 260px; overflow-y: auto; padding: 0.3rem;
  background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.chat-command-option {
  display: flex; flex-direction: column; gap: 0.1rem; width: 100%; text-align: left;
  border: none; background: transparent; cursor: pointer; padding: 0.5rem 0.65rem; border-radius: 8px;
}
.chat-command-option:hover, .chat-command-option.is-active { background: #EBF4FF; }
.chat-command-empty { padding: 0.6rem 0.65rem; font-size: 0.75rem; color: #A1A1AA; }
.chat-template-command { font-size: 0.8125rem; font-weight: 700; color: #183B54; }
.chat-template-preview { font-size: 0.75rem; color: #71717A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chat-template-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-control);
}
.chat-template-item > .min-w-0 { display: flex; flex-direction: column; min-width: 0; }
.chat-template-remove { border: none; background: transparent; color: #A1A1AA; cursor: pointer; font-size: 0.75rem; flex-shrink: 0; }
.chat-template-remove:hover { color: #DC2626; }
.chat-template-command-field { display: flex; align-items: center; gap: 0.4rem; }
.chat-template-command-field > span { font-weight: 700; color: #183B54; font-size: 1rem; }
body[data-theme="dark"] .chat-msg-menu,
body[data-theme="dark"] .chat-command-menu { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .chat-msg-menu button { color: #FFFFFF !important; }
body[data-theme="dark"] .chat-msg-menu button:hover,
body[data-theme="dark"] .chat-command-option:hover,
body[data-theme="dark"] .chat-command-option.is-active { background: #333333 !important; }
body[data-theme="dark"] .chat-template-command { color: #FFFFFF !important; }

/* Botões + (anexo) e raio (Meus comandos) da barra de escrever: caixinha
   branca, borda fina e cantos menos arredondados. No hover o fundo segue
   branco — só a borda e o ícone ficam na cor da sidebar. */
.chat-composer-icon-btn {
  width: 40px; height: 40px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 8px; color: #52525B;
  transition: border-color .15s ease, color .15s ease;
}
.chat-composer-icon-btn svg { width: 18px; height: 18px; }
.chat-composer-icon-btn:hover { background: #FFFFFF; border-color: #181D24; color: #181D24; }
body[data-theme="dark"] .chat-composer-icon-btn { background: #252525 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .chat-composer-icon-btn:hover { border-color: #FFFFFF !important; color: #FFFFFF !important; }

/* Campo de dinheiro com "R$" fixo no começo, dentro da caixa. */
.money-field { position: relative; }
.money-field-prefix {
  position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
  font-size: 0.875rem; font-weight: 600; color: #52525B; pointer-events: none;
}
.money-field > .field-input { padding-left: 2.4rem; }
body[data-theme="dark"] .money-field-prefix { color: #D4D4D8 !important; }

/* Sugestões de provedor de e-mail (abaixo do campo, ao digitar "@"). */
.email-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  padding: 0.25rem; background: #fff; border: 1px solid var(--borda-suave); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); max-height: 220px; overflow-y: auto;
}
.email-suggest-option {
  display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
  padding: 0.45rem 0.6rem; border-radius: 6px; font-size: 0.8125rem; color: #18181B;
}
.email-suggest-option:hover, .email-suggest-option.is-active { background: #F4F4F5; }
body[data-theme="dark"] .email-suggest { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .email-suggest-option { color: #FFFFFF !important; }
body[data-theme="dark"] .email-suggest-option:hover,
body[data-theme="dark"] .email-suggest-option.is-active { background: #333333 !important; }

/* Número de não lidas na lista de conversas do chat. */
.chat-unread-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px;
  background: #C7305B; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px;
  text-align: center; flex-shrink: 0;
}
.b2b-avatar-square {
  border-radius: 8px;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F4F4F5;
  flex-shrink: 0;
}
.b2b-avatar-square img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b2b-avatar-square svg { width: 58%; height: 58%; color: #A1A1AA; }
body[data-theme="dark"] .b2b-avatar-square { background: #333333 !important; }

.logo-adjust-modal-card { max-width: 480px; position: relative; }
.logo-adjust-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #F4F4F5; color: #52525B; border: none; cursor: pointer;
}
.logo-adjust-modal-close svg { width: 13px; height: 13px; }
.logo-adjust-modal-close:hover { background: #E4E4E7; }
.logo-adjust-modal-frame {
  width: 100%; height: 160px;
  background: repeating-conic-gradient(#F4F4F5 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--border-light); border-radius: 10px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  position: relative;
}
.logo-adjust-modal-frame.is-dragging { cursor: grabbing; }
.logo-adjust-modal-img { width: 100%; height: 100%; object-fit: contain; transform-origin: center; pointer-events: none; }
.logo-adjust-modal-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; }
.logo-adjust-modal-zoom-label { font-size: 0.8125rem; font-weight: 700; color: #3F3F46; flex-shrink: 0; }
.logo-adjust-modal-zoom-btn {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #F4F4F5; border: none; color: #3F3F46; font-size: 1rem; font-weight: 700; cursor: pointer; line-height: 1;
}
.logo-adjust-modal-zoom-btn:hover { background: #E4E4E7; }
.logo-adjust-modal-range { flex: 1; min-width: 80px; }
.inspector-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  border: 1px dashed var(--border-light); border-radius: 8px; padding: 0.5rem; color: var(--primary-blue);
  font-size: 0.75rem; font-weight: 700; background: #F8FAFC; cursor: pointer;
}
.inspector-add-btn:hover { background: #EBF4FF; }
.inspector-add-btn svg { width: 13px; height: 13px; }
.inspector-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.inspector-toggle-row .inspector-field-label { margin: 0; }

/* -------------------- Drawer de produto: seções e campos extras -------------------- */

.form-section-header {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 700; color: #18181B;
  padding-top: 0.6rem; border-top: 1px solid var(--border-light);
}
.form-section-header svg { width: 17px; height: 17px; color: #71717A; flex-shrink: 0; }

.field-hint { font-size: 0.75rem; color: #A1A1AA; margin: -0.2rem 0 0.5rem; }

.weekday-toggle-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.weekday-toggle-chip {
  min-width: 42px; height: 38px; padding: 0 0.5rem; border-radius: 8px;
  border: 1px solid var(--border-light); background: #fff; color: #3F3F46;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.weekday-toggle-chip.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.weekday-toggle-chip:hover:not(.active) { border-color: var(--primary-blue); color: var(--primary-blue); }

.product-time-row { display: flex; align-items: center; gap: 0.6rem; }
.product-time-row .field-input { flex: 1; min-width: 0; }
.product-time-row span { font-size: 0.8125rem; color: #71717A; flex-shrink: 0; }

.checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: #3F3F46; cursor: pointer; }
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-blue); cursor: pointer; }

/* -------------------- Wizard do drawer de produto/serviço -------------------- */

/* Abas do drawer de produto (Categoria · Preço · Escopo · Mídia): botões
   clicáveis, em vez de etapas em sequência. */
/* Cabeçalho = só o título e o ✕; uma linha horizontal de ponta a ponta
   separa as abas logo abaixo, com respiro dos dois lados. */
.product-wizard-tabs {
  display: flex; align-items: stretch; gap: 0.4rem;
  margin: 1.25rem -1.5rem 0; padding: 1.1rem 1.5rem 0;
  border-top: 1px solid var(--borda-suave);
}
body[data-theme="dark"] .product-wizard-tabs { border-top-color: #404040 !important; }
/* No drawer de produto o ✕ fica preso no canto, fora do fluxo: assim o bloco
   do título (e as abas dentro dele) ocupa a largura toda do cabeçalho, em
   vez de parar antes da coluna do botão. O título ganha respiro à direita
   pra não passar por baixo do ✕. */
#product-drawer .form-drawer-close { position: absolute; top: 1.25rem; right: 1.5rem; }
#product-drawer .form-drawer-header-main > .task-drawer-list-label,
#product-drawer .form-drawer-header-main > .task-drawer-title { padding-right: 2.75rem; }
.product-wizard-tab {
  flex: 1 1 0; min-width: 0; text-align: center;
  border: 1px solid var(--borda-suave); background: #fff; color: #52525B;
  font-size: 0.75rem; font-weight: 600; padding: 0.45rem 0.5rem; border-radius: var(--radius-control);
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.product-wizard-tab:hover { background: #F4F4F5; color: #18181B; }
.product-wizard-tab.is-active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.product-wizard-tab.is-active:hover { background: var(--primary-blue-hover); border-color: var(--primary-blue-hover); }
body[data-theme="dark"] .product-wizard-tab { background: #252525 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .product-wizard-tab:hover { background: #333333 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .product-wizard-tab.is-active { background: #4E4E4E !important; border-color: #4E4E4E !important; color: #FFFFFF !important; }

.product-wizard-steps { display: flex; align-items: center; width: 100%; margin-top: 0.75rem; }
.product-wizard-step-circle {
  width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid #D4D4D8;
  color: #A1A1AA; font-size: 0.6875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .2s ease;
}
.product-wizard-step-circle.is-active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.product-wizard-step-circle.is-done { background: #A1A1AA; border-color: #A1A1AA; color: #fff; }
.product-wizard-step-label { font-size: 0.6875rem; font-weight: 500; color: #A1A1AA; white-space: nowrap; }
.product-wizard-step-label.is-done, .product-wizard-step-label.is-active { color: #18181B; }
.product-wizard-step-line { height: 1.5px; background: #E4E4E7; flex: 1; margin: 0 0.4rem; }
.product-wizard-step-line.is-done { background: #A1A1AA; }

.product-wizard-panel { display: none; flex-direction: column; gap: 1rem; }
.product-wizard-panel.is-active { display: flex; }

.product-wizard-footer-row { display: flex; align-items: center; gap: 0.75rem; }
.product-wizard-footer-row .btn-secondary, .product-wizard-footer-row .btn-primary { flex: 1; justify-content: center; }
#product-drawer-delete-btn { flex: 0 0 auto; padding-left: 0.75rem; padding-right: 0.75rem; }

.product-wizard-confirm-text { flex: 2; font-size: 0.8125rem; font-weight: 600; color: #3F3F46; }
.btn-primary.btn-danger { background: #B91C1C; }
.btn-primary.btn-danger:hover { background: #991B1B; }

.pricing-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pricing-type-card {
  text-align: left; border: 1.5px solid var(--border-card); border-radius: 10px;
  padding: 0.75rem 0.9rem; cursor: pointer; background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.pricing-type-card:hover { border-color: var(--primary-blue); }
.pricing-type-card.active { border-color: var(--primary-blue); background: #EBF4FF; }
.pricing-type-card-title { font-size: 0.8125rem; font-weight: 700; color: #18181B; }
.pricing-type-card-desc { font-size: 0.75rem; color: #71717A; margin-top: 0.15rem; }

.category-tree { border: 1px solid var(--border-card); border-radius: 10px; overflow: hidden; max-height: 280px; overflow-y: auto; }
.category-tree-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem;
  cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: #3F3F46;
  border-bottom: 1px solid var(--border-light);
  transition: background-color .15s ease, color .15s ease;
}
.category-tree-row:hover { background: #FAFAFA; }
.category-tree-row.active { background: #EBF4FF; color: #18181B; }
.category-tree-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s ease; }
.category-tree-row.is-open .category-tree-chevron { transform: rotate(90deg); }
.category-tree-subrow {
  display: flex; align-items: center; padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  cursor: pointer; font-size: 0.8125rem; color: #71717A;
  border-bottom: 1px solid var(--border-light);
  transition: background-color .15s ease, color .15s ease;
}
.category-tree-subrow:hover { background: #FAFAFA; color: #3F3F46; }
.category-tree-subrow.active { background: #EBF4FF; color: var(--primary-blue); font-weight: 600; }
.category-tree-empty { padding: 1rem 0.75rem; font-size: 0.8125rem; color: #A1A1AA; text-align: center; }

body[data-theme="dark"] .category-tree { border-color: #404040 !important; }
body[data-theme="dark"] .category-tree-row { color: #D4D4D8 !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .category-tree-row:hover { background: #333333 !important; }
body[data-theme="dark"] .category-tree-row.active { background: #4b4b4b !important; color: #fff !important; }
body[data-theme="dark"] .category-tree-subrow { color: #A1A1AA !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .category-tree-subrow:hover { background: #333333 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .category-tree-subrow.active { background: #4b4b4b !important; color: #fff !important; }

/* Seletor de categoria fechado por padrão: abre um painel com busca ao
   clicar, fecha ao selecionar ou clicar fora. */
.product-wizard-panel-spaced { gap: 1.5rem !important; }

.category-select { position: relative; }
.category-select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.65rem 0.9rem; border-radius: var(--radius-control); border: 1px solid var(--border-light);
  background: #fff; cursor: pointer; font-size: 0.8125rem; color: #18181B; text-align: left;
  transition: border-color .15s ease;
}
.category-select-trigger:hover { border-color: var(--primary-blue); }
.category-select-chevron { width: 16px; height: 16px; flex-shrink: 0; color: #A1A1AA; transition: transform .15s ease; }
.category-select.is-open .category-select-chevron { transform: rotate(180deg); }

.category-select-panel {
  position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border-card); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.18);
  overflow: hidden;
}
.category-tree-flat { border: none; border-radius: 0; max-height: 320px; }

body[data-theme="dark"] .category-select-trigger { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .category-select-panel { background: #252525 !important; border-color: #404040 !important; }

body[data-theme="dark"] .product-wizard-step-circle { border-color: #404040 !important; }
body[data-theme="dark"] .product-wizard-step-line { background: #404040 !important; }
body[data-theme="dark"] .pricing-type-card { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .pricing-type-card.active { background: #4b4b4b !important; }
body[data-theme="dark"] .pricing-type-card-title { color: #FFFFFF !important; }

body[data-theme="dark"] .form-section-header { color: #FFFFFF !important; border-top-color: #404040 !important; }
body[data-theme="dark"] .weekday-toggle-chip { background: #333333 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .weekday-toggle-chip.active { background: var(--primary-blue) !important; border-color: var(--primary-blue) !important; color: #fff !important; }


.builder-el-block-preview { display: flex; gap: 2px; width: 30px; height: 17px; }
.builder-el-block-preview span { background: #CBD8E5; border-radius: 2px; }

/* -------------------- Dark mode -------------------- */

body[data-theme="dark"] .builder-wrap { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .builder-toolbar { background: #1c1c1c !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .builder-page-name { color: #FFFFFF !important; }
body[data-theme="dark"] .builder-page-name:hover { background-color: #333333 !important; }
body[data-theme="dark"] .builder-page-name:focus { background-color: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .kanban-list-dropdown-item.active { background: #333333 !important; }
body[data-theme="dark"] .builder-device-toggle { background: #333333 !important; }
body[data-theme="dark"] .builder-device-btn { color: #A1A1AA !important; }
body[data-theme="dark"] .builder-device-btn.active { background: #4b4b4b !important; color: #fff !important; }
body[data-theme="dark"] .builder-tool-btn { color: #A1A1AA !important; }
body[data-theme="dark"] .builder-tool-btn:hover:not(:disabled) { background: #333333 !important; }
body[data-theme="dark"] .builder-toolbar-divider { background: #404040 !important; }
body[data-theme="dark"] .builder-elements-panel { background: #1c1c1c !important; border-right-color: #404040 !important; }
body[data-theme="dark"] .builder-panel-tabs { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .builder-panel-tab:hover { color: #D4D4D8 !important; }
body[data-theme="dark"] .builder-panel-tab.active { color: #18181B !important; background: #ebf4ff !important; }
body[data-theme="dark"] .builder-el-item { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .builder-el-item span { color: #D4D4D8 !important; }
body[data-theme="dark"] .builder-el-item svg { color: #A1A1AA !important; }
body[data-theme="dark"] .builder-el-item:hover { border-color: #ebf4ff !important; background: #333333 !important; }
body[data-theme="dark"] .builder-canvas-viewport { background: #1c1c1c !important; }
body[data-theme="dark"] .builder-canvas { background: #252525 !important; box-shadow: 0 0 0 1px #404040 !important; }
body[data-theme="dark"] .builder-fixed-header { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .inspector-header { background: #1c1c1c !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .inspector-tabs { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .inspector-tab:hover { color: #D4D4D8 !important; }
body[data-theme="dark"] .inspector-tab.active { color: #18181B !important; background: #ebf4ff !important; }
body[data-theme="dark"] .builder-breadcrumb-back { color: #D4D4D8 !important; }
body[data-theme="dark"] .builder-breadcrumb-back:hover { color: #ebf4ff !important; }
body[data-theme="dark"] .inspector-input, body[data-theme="dark"] .inspector-select, body[data-theme="dark"] .inspector-textarea { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .url-slug-field { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .url-slug-input { color: #FFFFFF !important; }
body[data-theme="dark"] .inspector-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.6rem center !important; background-size: 13px 13px !important; }
body[data-theme="dark"] .inspector-segmented { border-color: #404040 !important; }
body[data-theme="dark"] .inspector-segmented button { background: #252525 !important; border-left-color: #404040 !important; color: #A1A1AA !important; }
body[data-theme="dark"] .inspector-list-item { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .menu-order-row { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .menu-order-row .el-drag-handle { color: #71717A !important; }
body[data-theme="dark"] .image-upload-zone { background: #1c1c1c !important; border-color: #404040 !important; }
body[data-theme="dark"] .image-upload-zone:hover, body[data-theme="dark"] .image-upload-zone.is-dragover { border-color: #ebf4ff !important; background: #252525 !important; }
body[data-theme="dark"] .image-upload-zone-plus { background: #333333 !important; border-color: #404040 !important; color: #ebf4ff !important; }
body[data-theme="dark"] .header-logo-picker { border-color: #404040 !important; background: #1c1c1c !important; }
body[data-theme="dark"] .header-logo-picker:hover { border-color: #ebf4ff !important; background: #252525 !important; }
body[data-theme="dark"] .profile-logo-picker { border-color: #404040 !important; background: #1c1c1c !important; }
body[data-theme="dark"] .profile-logo-picker:hover { border-color: #ebf4ff !important; background: #252525 !important; }
body[data-theme="dark"] .profile-logo-adjust-frame { border-color: #404040 !important; }
body[data-theme="dark"] .profile-avatar-picker { border-color: #404040 !important; background: #1c1c1c !important; }
body[data-theme="dark"] .profile-avatar-picker:hover { border-color: #ebf4ff !important; background: #252525 !important; }
body[data-theme="dark"] .profile-avatar-adjust-frame { border-color: #404040 !important; }
body[data-theme="dark"] .logo-adjust-modal-frame { border-color: #404040 !important; }
body[data-theme="dark"] .logo-adjust-modal-zoom-label { color: #D4D4D8 !important; }
body[data-theme="dark"] .logo-adjust-modal-close { background: #333333 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .inspector-add-btn { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .inspector-section-title, body[data-theme="dark"] .inspector-field-label { color: #D4D4D8 !important; }
body[data-theme="dark"] .inspector-accordion-chevron { color: #71717A !important; }
body[data-theme="dark"] .margin-sync-toggle:hover { background: #333333 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .margin-sync-toggle.active { background: #ebf4ff !important; color: #122c3f !important; }
body[data-theme="dark"] .be-heading, body[data-theme="dark"] .be-text { color: #FFFFFF !important; }
body[data-theme="dark"] .builder-narrow-notice { background: #3f2d0a !important; border-color: #6b4e0f !important; color: #FDE68A !important; }

/* ==========================================================================
   Meu Trabalho — Quadro Kanban
   ========================================================================== */

.kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 1rem;
  justify-content: start;
  align-items: start;
}

.kanban-list {
  background: var(--bg-light);
  border-radius: var(--radius-card);
  min-width: 0;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.kanban-list-header { position: relative; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.25rem; cursor: grab; }
.kanban-list-header:active { cursor: grabbing; }
.kanban-list-ghost { opacity: 0.4; }
.kanban-list-title { font-size: 0.875rem; font-weight: 700; color: #18181B; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; border-radius: 4px; }
.kanban-list-title:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.kanban-list-title-input {
  flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 700; color: #18181B;
  border: 1px solid var(--primary-blue); border-radius: 6px; padding: 0.15rem 0.4rem;
  background: #fff; font-family: inherit;
}
.kanban-list-title-input:focus { outline: none; }
.kanban-list-count { font-size: 0.875rem; font-weight: 700; color: #18181B; background: transparent; border-radius: 0; padding: 0; flex-shrink: 0; }

.kanban-list-menu-wrap { position: relative; flex-shrink: 0; }
.kanban-list-menu-btn {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  border: none; background: transparent; color: #71717A;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.kanban-list-menu-btn:hover { background: #E4E4E7; color: #18181B; }
.kanban-list-menu-btn svg { width: 15px; height: 15px; }

.kanban-list-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border-card); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
  width: 195px; padding: 0.4rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.kanban-list-dropdown-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.6rem; border-radius: 7px; border: none; background: transparent;
  font-size: 0.8125rem; font-weight: 500; color: #18181B; text-align: left; cursor: pointer;
  transition: background-color .15s ease;
}
.kanban-list-dropdown-item:hover { background: #F4F4F5; }
.kanban-list-dropdown-item-danger { color: #B91C1C; }
.kanban-list-dropdown-item-danger:hover { background: #FEE2E2; }

#chat-attach-dropdown { width: 260px; max-height: 320px; overflow-y: auto; }
.chat-attach-form-item {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer;
  transition: background-color .15s ease;
}
.chat-attach-form-item:hover { background: #F4F4F5; }
.chat-attach-form-item-title { font-size: 0.8125rem; font-weight: 600; color: #18181B; }
.chat-attach-form-item-meta { font-size: 0.75rem; color: #71717A; }
.chat-attach-form-empty { font-size: 0.8125rem; color: #71717A; text-align: center; padding: 0.75rem 0.5rem; }
.chat-attach-form-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.chat-attach-form-create { font-size: 0.75rem; padding: 0.45rem 0.9rem; text-decoration: none; }

.kanban-color-picker-back {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.5rem 0.6rem; border: none; background: transparent; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; color: #71717A;
}
.kanban-color-picker-back:hover { color: #18181B; }
.kanban-color-picker-back svg { width: 13px; height: 13px; }

.kanban-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; padding: 0.3rem 0.5rem 0.5rem; }
.kanban-color-dot {
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border-light);
  cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
}
.kanban-color-dot.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--primary-blue); }

.kanban-list-tasks { display: flex; flex-direction: column; gap: 0.5rem; min-height: 8px; }

.kanban-task {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 0.65rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  cursor: grab;
}
.kanban-task:active { cursor: grabbing; }
.kanban-task-ghost { opacity: 0.4; }

.kanban-task-check { width: 18px; height: 18px; border: none; background: transparent; padding: 0; color: #D4D4D8; flex-shrink: 0; cursor: pointer; margin-top: 0.1rem; }
.kanban-task-check svg { width: 100%; height: 100%; }
.kanban-task.is-done .kanban-task-check { color: #22C55E; }

.kanban-task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.kanban-task-text { font-size: 0.8125rem; color: #18181B; line-height: 1.4; word-break: break-word; }
.kanban-task.is-done .kanban-task-text { text-decoration: line-through; color: #A1A1AA; }
.kanban-task-due {
  align-self: flex-start;
  font-size: 0.6875rem; font-weight: 600; color: #92400E;
  background: #FEF3C7; border-radius: 999px; padding: 0.1rem 0.5rem;
}
.kanban-task.is-done .kanban-task-due { background: #F4F4F5; color: #A1A1AA; }

.kanban-task-remove { width: 18px; height: 18px; border: none; background: transparent; color: transparent; flex-shrink: 0; cursor: pointer; padding: 0; transition: color .15s ease; }
.kanban-task:hover .kanban-task-remove { color: #A1A1AA; }
.kanban-task-remove:hover { color: #B91C1C !important; }
.kanban-task-remove svg { width: 100%; height: 100%; }

.kanban-add-task-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.kanban-add-task-input {
  width: 100%;
  resize: none;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font-family: inherit;
  font-size: 0.8125rem;
  color: #18181B;
  background: #fff;
  min-height: 2.3rem;
}
.kanban-add-task-input:focus { outline: none; border-color: var(--primary-blue); }
.kanban-add-task-actions { display: flex; align-items: center; gap: 0.5rem; }
.kanban-add-task-confirm { padding: 0.45rem 0.85rem; font-size: 0.8125rem; }
.kanban-add-task-confirm svg { width: 15px; height: 15px; }

.kanban-add-list-btn {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-card);
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: #52525B;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.kanban-add-list-btn:hover { background: rgba(0, 0, 0, 0.08); }
.kanban-add-list-btn svg { width: 15px; height: 15px; }

.kanban-list-new { background: var(--bg-light); }
.kanban-add-list-cancel {
  width: 30px; height: 30px; border-radius: 6px; border: none; background: transparent; color: #71717A;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.kanban-add-list-cancel:hover { background: #E4E4E7; }
.kanban-add-list-cancel svg { width: 15px; height: 15px; }

body[data-theme="dark"] .kanban-list, body[data-theme="dark"] .kanban-list-new { background: #1c1c1c !important; }
body[data-theme="dark"] .kanban-list-title { color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-list-title-input { background: #333333 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-list-count { background: transparent !important; color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-list-menu-btn:hover { background: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-list-dropdown { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .kanban-list-dropdown-item { color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-list-dropdown-item:hover { background: #333333 !important; }
body[data-theme="dark"] .kanban-list-dropdown-item-danger:hover { background: rgba(185, 28, 28, 0.25) !important; }
body[data-theme="dark"] .chat-attach-form-item:hover { background: #333333 !important; }
body[data-theme="dark"] .chat-attach-form-item-title { color: #FFFFFF !important; }
body[data-theme="dark"] .chat-attach-form-item-meta,
body[data-theme="dark"] .chat-attach-form-empty { color: #A1A1AA !important; }
body[data-theme="dark"] .kanban-color-picker-back:hover { color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-task { background: #333333 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25) !important; }
body[data-theme="dark"] .kanban-task-text { color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-add-task-input { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .kanban-add-list-btn { background: rgba(255, 255, 255, 0.06) !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .kanban-add-list-btn:hover { background: rgba(255, 255, 255, 0.1) !important; }
body[data-theme="dark"] .kanban-add-list-cancel:hover { background: #404040 !important; }

/* -------------------- Drawer da tarefa -------------------- */

.task-drawer-list-label { font-size: 0.75rem; font-weight: 600; color: #71717A; margin: 0 0 0.3rem; }
.task-drawer-title {
  font-size: 1.125rem; font-weight: 700; color: #18181B; line-height: 1.35; margin: 0;
  cursor: text; border-radius: 4px;
}
.task-drawer-title:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.task-drawer-title-input {
  width: 100%; font-size: 1.125rem; font-weight: 700; color: #18181B; line-height: 1.35;
  border: 1px solid var(--primary-blue); border-radius: 6px; padding: 0.1rem 0.4rem;
  margin: -0.1rem 0 0 -0.4rem; background: #fff; font-family: inherit;
}
.task-drawer-title-input:focus { outline: none; }

.task-drawer-dates-row { display: flex; gap: 1.25rem; }
.task-drawer-dates-row .task-drawer-field { flex: 1; min-width: 0; }
.task-drawer-created-value { font-size: 0.8125rem; color: #18181B; margin: 0; padding: 0.5rem 0; }

.task-drawer-field-label { display: block; font-size: 0.75rem; font-weight: 600; color: #71717A; margin-bottom: 0.4rem; }
.task-drawer-due-row { display: flex; align-items: center; gap: 0.6rem; }
.task-drawer-due-input {
  border: 1px solid var(--border-light); border-radius: 8px; padding: 0.5rem 0.65rem;
  font-family: inherit; font-size: 0.8125rem; color: #18181B; background: #fff;
}
.task-drawer-due-input:focus { outline: none; border-color: var(--primary-blue); }
.task-drawer-due-clear { border: none; background: transparent; color: #B91C1C; font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0; }
.task-drawer-due-clear:hover { text-decoration: underline; }

.task-drawer-activity-header {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 700; color: #18181B;
  padding-top: 0.6rem; border-top: 1px solid var(--border-light);
}
.task-drawer-activity-header svg { width: 17px; height: 17px; color: #71717A; flex-shrink: 0; }

.task-drawer-comment-card { background: #fff; border: 1px solid var(--border-light); border-radius: 10px; padding: 0.75rem 0.85rem; }
.task-drawer-comment-box { display: flex; flex-direction: column; gap: 0.5rem; }
.task-drawer-comment-input {
  width: 100%; resize: none; border: none; border-radius: 0;
  padding: 0; font-family: inherit; font-size: 0.8125rem; color: #18181B;
  background: transparent; min-height: 2.2rem;
}
.task-drawer-comment-input:focus { outline: none; }
.task-drawer-comment-actions { display: flex; justify-content: flex-end; margin-top: 0.2rem; padding-top: 0.5rem; border-top: 1px solid var(--border-light); }
.task-drawer-comment-actions .btn-primary { padding: 0.5rem 1.1rem; font-size: 0.8125rem; }

.task-drawer-activity-list { display: flex; flex-direction: column; gap: 1rem; }
.task-activity-empty { font-size: 0.8125rem; color: #A1A1AA; text-align: center; padding: 1rem 0; }
.task-activity-item { display: flex; align-items: flex-start; gap: 0.6rem; }
.task-activity-avatar {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: var(--primary-gradient); color: #fff; font-size: 0.6875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.task-activity-content { flex: 1; min-width: 0; }
.task-activity-line { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: #3F3F46; margin: 0; line-height: 1.5; }
.task-activity-line strong { color: #18181B; }
.task-activity-comment-text {
  font-size: 0.8125rem; color: #18181B; margin: 0.2rem 0 0; line-height: 1.5;
  white-space: pre-wrap;
}
.task-activity-time { font-size: 0.6875rem; color: #A1A1AA; margin: 0.3rem 0 0; }

.task-activity-comment-delete {
  border: none; background: none; padding: 0; margin: 0; color: #A1A1AA; cursor: pointer;
  display: inline-flex; align-items: center; opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.task-activity-item:hover .task-activity-comment-delete { opacity: 1; }
.task-activity-comment-delete:hover { color: #DC2626; }

body[data-theme="dark"] .task-drawer-title { color: #FFFFFF !important; }
body[data-theme="dark"] .task-drawer-title-input { background: #333333 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .task-drawer-created-value { color: #FFFFFF !important; }
body[data-theme="dark"] .task-drawer-due-input { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .task-drawer-activity-header { color: #FFFFFF !important; border-top-color: #404040 !important; }
body[data-theme="dark"] .task-drawer-comment-card { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .task-drawer-comment-input { color: #FFFFFF !important; }
body[data-theme="dark"] .task-drawer-comment-actions { border-top-color: #404040 !important; }
body[data-theme="dark"] .task-activity-line { color: #D4D4D8 !important; }
body[data-theme="dark"] .task-activity-line strong { color: #FFFFFF !important; }
body[data-theme="dark"] .task-activity-comment-text { color: #FFFFFF !important; }

/* Compartilhar quadro */

.share-board-role-select { width: auto; flex-shrink: 0; min-width: 132px; }

.share-board-icon-btn { padding: 0.625rem; flex-shrink: 0; }
.share-board-icon-btn svg { width: 18px; height: 18px; display: block; }

.share-board-link-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem;
  background: var(--bg-light);
  border-radius: var(--radius-control);
  margin-bottom: 1.25rem;
}
.share-board-link-icon { color: #71717A; flex-shrink: 0; margin-top: 0.1rem; }

.share-board-link-btn {
  border: none; background: transparent; padding: 0; margin-top: 0.15rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--primary-blue); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.share-board-link-btn:hover { color: var(--primary-blue-hover); }

.share-board-link-generated { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.share-board-link-generated .field-input { flex: 1; font-size: 0.8125rem; color: #71717A; }

.share-board-tabs { margin-bottom: 1rem; }

.share-board-member-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-light);
}
.share-board-member-row:last-child { border-bottom: none; }

.share-board-role-fixed { font-size: 0.8125rem; font-weight: 600; color: #71717A; flex-shrink: 0; }

body[data-theme="dark"] .share-board-link-row { background: #1c1c1c !important; }
body[data-theme="dark"] .share-board-member-row { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .share-board-link-generated .field-input { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* -------------------- Agenda: calendário + linha do tempo -------------------- */

.agenda-calendar-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.agenda-left-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.agenda-mini-calendar { padding: 1.25rem; background-color: #F8F8F8; }
body[data-theme="dark"] .agenda-mini-calendar { background-color: #1c1c1c !important; }

.agenda-notif-list { display: flex; flex-direction: column; gap: 0.25rem; }

.agenda-notif-empty { font-size: 0.8125rem; color: #A1A1AA; padding: 0.5rem 0; }

.agenda-notif-item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  border: none; background: transparent; padding: 0.5rem 0.25rem; border-radius: 8px;
  text-align: left; cursor: pointer; width: 100%;
}
.agenda-notif-item:hover { background: var(--bg-light); }

.agenda-notif-icon {
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.agenda-notif-icon svg { width: 14px; height: 14px; }
.agenda-notif-icon-bell { background: #EFF6FF; color: #2563EB; }
.agenda-notif-icon-gift { background: #FDF2F8; color: #DB2777; }

.agenda-notif-text { font-size: 0.8125rem; color: #3F3F46; line-height: 1.4; }
.agenda-notif-text strong { color: #18181B; }

body[data-theme="dark"] .agenda-notif-text { color: #D4D4D8 !important; }
body[data-theme="dark"] .agenda-notif-text strong { color: #FFFFFF !important; }
body[data-theme="dark"] .agenda-notif-item:hover { background: #1c1c1c !important; }

.mini-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.mini-cal-month-label { font-size: 0.875rem; font-weight: 700; color: #18181B; text-transform: capitalize; }
.mini-cal-month-label-btn {
  font-size: 0.875rem; font-weight: 700; color: #18181B; text-transform: capitalize;
  background: none; border: none; cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 6px;
}
.mini-cal-month-label-btn:hover { background: #F4F4F5; }
.mini-cal-nav-btn {
  width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent;
  color: #71717A; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mini-cal-nav-btn:hover { background: #F4F4F5; color: #18181B; }
.mini-cal-nav-btn svg { width: 15px; height: 15px; }

.mini-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 0.6875rem; font-weight: 600; color: #A1A1AA; text-align: center;
  margin-bottom: 0.35rem;
}

.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.mini-cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  border: none; background: transparent; border-radius: 8px;
  font-size: 0.8125rem; color: #3F3F46; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mini-cal-day:hover:not(:disabled) { background: #F4F4F5; }
.mini-cal-day.is-muted { color: #D4D4D8; cursor: default; }
.mini-cal-day.is-today { font-weight: 700; color: var(--primary-blue); }
.mini-cal-day.is-selected { background: var(--primary-blue); color: #fff; font-weight: 700; }
.mini-cal-day.is-selected:hover { background: var(--primary-blue-hover); }

.mini-cal-dot {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px; background: var(--primary-blue);
}
.mini-cal-day.is-selected .mini-cal-dot { background: #fff; }

.mini-cal-year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.mini-cal-year-btn {
  border: none; background: transparent; border-radius: 8px;
  font-size: 0.8125rem; color: #3F3F46; cursor: pointer; padding: 0.6rem 0;
  display: flex; align-items: center; justify-content: center;
}
.mini-cal-year-btn:hover { background: #F4F4F5; }
.mini-cal-year-btn.is-current { font-weight: 700; color: var(--primary-blue); }
.mini-cal-year-btn.is-selected { background: var(--primary-blue); color: #fff; font-weight: 700; }
.mini-cal-year-btn.is-selected:hover { background: var(--primary-blue-hover); }

.mini-cal-today-btn { width: 100%; justify-content: center; margin-top: 0.85rem; font-size: 0.8125rem; padding: 0.5rem; }

.agenda-timeline-panel { display: flex; flex-direction: column; min-width: 0; }

.agenda-timeline-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.85rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border-light);
}
.agenda-timeline-header h3 { font-size: 0.9375rem; font-weight: 700; color: #18181B; text-transform: capitalize; }

.agenda-timeline-scroll { max-height: 620px; overflow-y: auto; }

/* O rótulo de cada hora sobe meia linha acima da divisória (top: -0.55em):
   sem esse respiro, o da primeira hora era cortado pela área de rolagem. */
.agenda-timeline-grid { display: flex; position: relative; padding-top: 0.6rem; }

.agenda-timeline-hours-col { flex: 0 0 52px; }
.agenda-timeline-hour-row { position: relative; box-sizing: border-box; }
.agenda-timeline-hour-row span {
  position: absolute; top: -0.55em; left: 0; font-size: 0.75rem; color: #A1A1AA; background: #fff;
}

.agenda-timeline-lines-col { flex: 1; position: relative; border-left: 1px solid var(--border-light); min-width: 0; }
.agenda-timeline-lines-col .agenda-timeline-hour-row {
  border-top: 1px solid var(--border-light); box-sizing: border-box; cursor: pointer;
}
.agenda-timeline-lines-col .agenda-timeline-hour-row:hover { background: var(--bg-light); }

.agenda-timeline-event {
  position: absolute; left: 6px; right: 6px; border-radius: 7px; padding: 0.3rem 0.55rem;
  color: #fff; overflow: hidden; cursor: pointer; z-index: 1;
  display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.25;
}
.agenda-timeline-event-title { font-size: 0.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-timeline-event-time { font-size: 0.6875rem; opacity: 0.85; }

.agenda-timeline-now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #E11D48; z-index: 2; pointer-events: none; }
.agenda-timeline-now-dot { position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #E11D48; }

.agenda-event-delete-btn {
  margin-left: auto; border: none; background: none; color: #B91C1C;
  font-size: 0.8125rem; font-weight: 700; cursor: pointer; padding: 0.65rem 0.25rem;
}
.agenda-event-delete-btn:hover { text-decoration: underline; }

@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .agenda-calendar-layout { grid-template-columns: 1fr; }
}

body[data-theme="dark"] .mini-cal-month-label { color: #FFFFFF !important; }
body[data-theme="dark"] .mini-cal-month-label-btn { color: #FFFFFF !important; }
body[data-theme="dark"] .mini-cal-month-label-btn:hover { background: #333333 !important; }
body[data-theme="dark"] .mini-cal-day { color: #D4D4D8 !important; }
body[data-theme="dark"] .mini-cal-day:hover:not(:disabled) { background: #333333 !important; }
body[data-theme="dark"] .mini-cal-day.is-muted { color: #52525B !important; }
body[data-theme="dark"] .mini-cal-year-btn { color: #D4D4D8 !important; }
body[data-theme="dark"] .mini-cal-year-btn:hover { background: #333333 !important; }
body[data-theme="dark"] .agenda-timeline-header h3 { color: #FFFFFF !important; }
body[data-theme="dark"] .agenda-timeline-header { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .agenda-timeline-hour-row span { background: #252525 !important; color: #71717A !important; }
body[data-theme="dark"] .agenda-timeline-lines-col { border-left-color: #404040 !important; }

/* -------------------- Meu Trabalho: aba Meus Contratos -------------------- */

.contratos-clientes-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

.contratos-cliente-row { cursor: pointer; }
.contratos-cliente-row:hover { background: var(--bg-light); }
.contratos-cliente-row.is-selected { background: var(--bg-light); }

.contratos-cliente-name-cell { font-weight: 600; color: #18181B; }

.contratos-evento-panel { min-height: 320px; }

.contratos-evento-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; text-align: center; color: #A1A1AA; padding: 3rem 1rem;
}
.contratos-evento-empty p { font-size: 0.875rem; }

.contratos-evento-header-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.15rem; }
.contratos-evento-header-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

.contratos-evento-label { font-size: 0.75rem; font-weight: 600; color: #A1A1AA; text-transform: uppercase; letter-spacing: 0.03em; }
.contratos-evento-title { font-size: 1.0625rem; font-weight: 700; color: #18181B; margin-bottom: 0.35rem; }
.contratos-evento-meta { font-size: 0.8125rem; color: #52525B; margin-bottom: 0.15rem; }

.contratos-evento-countdown { font-size: 0.8125rem; font-weight: 600; color: #71717A; white-space: nowrap; }

.contratos-evento-vermais-btn { flex-shrink: 0; }

.contratos-convidados-block { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border-light); }
.contratos-convidados-title { font-size: 0.8125rem; font-weight: 700; color: #18181B; margin-bottom: 0.6rem; }

.contratos-convidado-row:hover { background: var(--bg-light); }

.contratos-eye-btn {
  width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent;
  color: #71717A; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.contratos-eye-btn:hover { background: #F4F4F5; color: #18181B; }

.contratos-status-filter-wrap { position: relative; display: inline-block; }

.contratos-status-filter-btn {
  display: flex; align-items: center; gap: 0.3rem; border: none; background: transparent; padding: 0; margin: 0;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #A1A1AA; cursor: pointer;
}
.contratos-status-filter-btn:hover { color: #18181B; }

.contratos-status-filter-dropdown { width: 160px; text-transform: none; letter-spacing: normal; }

.contratos-drawer-link { font-size: 0.875rem; color: var(--primary-blue); word-break: break-all; }
.contratos-drawer-link:hover { text-decoration: underline; }

.contratos-drawer-box { white-space: normal; line-height: 1.5; min-height: unset; }

@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .contratos-clientes-layout { grid-template-columns: 1fr; }
}

body[data-theme="dark"] .contratos-evento-title { color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-convidados-title { color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-evento-meta { color: #D4D4D8 !important; }
body[data-theme="dark"] .contratos-evento-countdown { color: #A1A1AA !important; }
body[data-theme="dark"] .contratos-convidados-block { border-top-color: #404040 !important; }
body[data-theme="dark"] .contratos-cliente-row.is-selected { background: #1c1c1c !important; }
body[data-theme="dark"] .contratos-cliente-row:hover { background: #1c1c1c !important; }
body[data-theme="dark"] .contratos-cliente-name-cell { color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-eye-btn { color: #A1A1AA !important; }
body[data-theme="dark"] .contratos-status-filter-btn { color: #71717A !important; }
body[data-theme="dark"] .contratos-status-filter-btn:hover { color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-eye-btn:hover { background: #333333 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-drawer-box { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .contratos-convidado-row:hover { background: #1c1c1c !important; }
body[data-theme="dark"] .agenda-timeline-lines-col .agenda-timeline-hour-row { border-top-color: #404040 !important; }
body[data-theme="dark"] .agenda-timeline-lines-col .agenda-timeline-hour-row:hover { background: #1c1c1c !important; }

/* -------------------- Drawer de evento: campos extras -------------------- */

.event-drawer-title-input {
  width: 100%; border: none; border-bottom: 1px solid transparent; background: transparent;
  font-size: 1.125rem; font-weight: 700; color: #18181B; padding: 0.1rem 0; font-family: inherit;
}
.event-drawer-title-input:hover { border-bottom-color: var(--border-light); }
.event-drawer-title-input:focus { outline: none; border-bottom-color: var(--primary-blue); }
.event-drawer-title-input::placeholder { color: #A1A1AA; font-weight: 700; }

.event-guest-input-row { display: flex; gap: 0.5rem; }
.event-guest-input-row .field-input { flex: 1; min-width: 0; }
.event-guest-input-row .btn-secondary { flex-shrink: 0; white-space: nowrap; }

.event-guest-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.event-guest-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #F4F4F5; border-radius: 999px; padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  font-size: 0.75rem; font-weight: 600; color: #3F3F46;
}
.event-guest-chip button {
  border: none; background: none; color: #A1A1AA; cursor: pointer; font-size: 0.9375rem; line-height: 1; padding: 0;
}
.event-guest-chip button:hover { color: #B91C1C; }

.event-desc-toolbar { display: flex; gap: 0.25rem; margin-bottom: 0.4rem; }
.event-desc-toolbar button {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-light);
  background: #fff; color: #52525B; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.event-desc-toolbar button svg { width: 14px; height: 14px; }
.event-desc-toolbar button:hover { background: #F4F4F5; }
.event-desc-toolbar button.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }

.event-desc-editable {
  width: 100%; min-height: 90px; border: 1px solid var(--border-light); border-radius: var(--radius-control);
  padding: 0.625rem 0.875rem; font-size: 0.875rem; color: #18181B; line-height: 1.5; background: #fff;
}
.event-desc-editable:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(24, 59, 84, 0.15); }
.event-desc-editable:empty::before { content: attr(data-placeholder); color: #A1A1AA; }

body[data-theme="dark"] .event-drawer-title-input { color: #FFFFFF !important; }
body[data-theme="dark"] .event-guest-chip { background: #333333 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .event-desc-toolbar button { background: #333333 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .event-desc-editable { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* -------------------- Contatos -------------------- */

.crm-footer-count { font-size: 0.8125rem; color: #71717A; margin-top: 0.85rem; }
body[data-theme="dark"] .crm-footer-count { color: #A1A1AA !important; }

/* Espaço padrão entre o conteúdo de uma aba e o rodapé da página */
[data-view-panel],
[data-settings-panel] { padding-bottom: 1.5rem; }

/* Garante espaço entre o último bloco de conteúdo e o rodapé em QUALQUER página,
   mesmo sem abas (dashboard, produtos, etc.) e mesmo quando o conteúdo preenche
   toda a altura da tela (o margin-top:auto do rodapé zera nesse caso). */
.b2b-content > *:has(+ .b2b-footer) { margin-bottom: 1.5rem; }

/* -------------------- Pagamentos / Financeiro -------------------- */

.finance-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.finance-stat-card { padding: 1.25rem 1.5rem; }
.finance-stat-label { font-size: 0.75rem; font-weight: 600; color: #71717A; margin-bottom: 0.4rem; }
.finance-stat-value { font-size: 1.5rem; font-weight: 700; color: #18181B; }
.finance-stat-sub { font-size: 0.75rem; color: #71717A; margin-top: 0.3rem; }
.finance-stat-action-btn { width: 100%; justify-content: center; margin-top: 0.9rem; }
.pix-inline-icon { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
body[data-theme="dark"] .finance-stat-label { color: #A1A1AA !important; }
body[data-theme="dark"] .finance-stat-value { color: #FFFFFF !important; }
body[data-theme="dark"] .finance-stat-sub { color: #A1A1AA !important; }

.withdrawal-step { display: flex; flex-direction: column; gap: 1rem; }
.withdrawal-step[hidden] { display: none; }

.withdrawal-alt-link {
  border: none; background: none; padding: 0; margin: -0.5rem 0 0; width: fit-content;
  font-size: 0.8125rem; font-weight: 600; color: var(--primary-blue); cursor: pointer; text-decoration: none;
}
.withdrawal-alt-link:hover { text-decoration: underline; }

.withdrawal-bank-hint { font-size: 0.75rem; color: #A1A1AA; margin-top: 0.35rem; white-space: nowrap; }

.withdrawal-confirm-list {
  background: #FAFAFA; border: 1px solid var(--border-light); border-radius: 10px; padding: 0.25rem 1rem;
}
.withdrawal-confirm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--border-light);
}
.withdrawal-confirm-row:last-child { border-bottom: none; }
.withdrawal-confirm-label { font-size: 0.8125rem; color: #71717A; }
.withdrawal-confirm-value { font-size: 0.8125rem; font-weight: 700; color: #18181B; text-align: right; }

body[data-theme="dark"] .withdrawal-confirm-list { background: #1c1c1c !important; border-color: #404040 !important; }
body[data-theme="dark"] .withdrawal-confirm-row { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .withdrawal-confirm-label { color: #A1A1AA !important; }
body[data-theme="dark"] .withdrawal-confirm-value { color: #FFFFFF !important; }

.withdrawal-amount-header { display: flex; align-items: flex-start; gap: 0.75rem; }
.withdrawal-amount-avatar {
  width: 40px; height: 40px; border-radius: 999px; background: var(--primary-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; flex-shrink: 0;
}
.withdrawal-amount-name { font-size: 0.875rem; font-weight: 700; color: #18181B; margin: 0; }
.withdrawal-amount-key { font-size: 0.75rem; color: #71717A; margin: 0.125rem 0 0; }
.withdrawal-amount-message-btn {
  display: inline-flex; align-items: center; gap: 0.25rem; border: none; background: none; padding: 0; margin-top: 0.375rem;
  font-size: 0.75rem; font-weight: 600; color: var(--primary-blue); cursor: pointer;
}
.withdrawal-amount-message-btn:hover { text-decoration: underline; }

.withdrawal-amount-box {
  display: flex; align-items: baseline; justify-content: center; gap: 0.4rem;
  border: 1px solid var(--border-light); border-radius: 10px; padding: 1.5rem 1rem;
}
.withdrawal-amount-prefix { font-size: 1.25rem; font-weight: 700; color: #A1A1AA; }
.withdrawal-amount-input {
  border: none; background: none; outline: none; width: 100%; max-width: 220px;
  font-size: 2rem; font-weight: 700; color: #18181B; text-align: left; padding: 0;
}

.withdrawal-saldo-row { font-size: 0.8125rem; color: #71717A; text-align: center; }
.withdrawal-saldo-row strong { color: #18181B; }

body[data-theme="dark"] .withdrawal-amount-box { border-color: #404040 !important; }
body[data-theme="dark"] .withdrawal-amount-input { color: #FFFFFF !important; }
body[data-theme="dark"] .withdrawal-amount-name { color: #FFFFFF !important; }
body[data-theme="dark"] .withdrawal-saldo-row strong { color: #FFFFFF !important; }

.payment-link-empty { padding: 2rem 0; text-align: center; color: #71717A; font-size: 0.875rem; }
body[data-theme="dark"] .payment-link-empty { color: #A1A1AA !important; }

.payment-link-row-copy {
  border: none; background: transparent; padding: 0; margin: 0;
  color: var(--primary-blue); font-size: 0.8125rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.payment-link-row-copy:hover { text-decoration: underline; }
.payment-link-row-paid { color: #15803D; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }

body[data-theme="dark"] .payment-link-row-paid { color: #4ADE80 !important; }

.payment-link-row { cursor: pointer; }
.payment-link-row:hover { background: #FAFAFA; }
body[data-theme="dark"] .payment-link-row:hover { background: #2E2E2E !important; }

.charge-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.charge-drawer-field { display: flex; flex-direction: column; gap: 0.3rem; }
.charge-drawer-field-full { grid-column: 1 / -1; }
.charge-drawer-label { font-size: 0.75rem; font-weight: 600; color: #71717A; }
.charge-drawer-value { font-size: 0.875rem; font-weight: 600; color: #18181B; }
body[data-theme="dark"] .charge-drawer-label { color: #A1A1AA !important; }
body[data-theme="dark"] .charge-drawer-value { color: #FFFFFF !important; }

.charge-drawer-link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: #FAFAFA; border: 1px solid var(--border-light); border-radius: 10px;
  padding: 0.65rem 0.85rem; margin-top: 0.3rem;
}
.charge-drawer-link-url { font-size: 0.8125rem; color: #71717A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-theme="dark"] .charge-drawer-link-row { background: #333333 !important; border-color: #404040 !important; }
body[data-theme="dark"] .charge-drawer-link-url { color: #A1A1AA !important; }

.payment-method-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-card);
}
.payment-method-row-last { border-bottom: none; padding-bottom: 0; }
.payment-method-row-left { display: flex; align-items: flex-start; gap: 0.65rem; }
.payment-method-icon {
  width: 28px; height: 28px; flex-shrink: 0; margin-top: 0.1rem;
  display: flex; align-items: center; justify-content: center; color: #3F3F46;
}
.payment-method-icon svg { width: 20px; height: 20px; }

.payment-link-result-box {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--border-light); border-radius: var(--radius-control);
  background: #FAFAFA; padding: 0.5rem 0.5rem 0.5rem 0.875rem;
}
.payment-link-result-url {
  flex: 1; min-width: 0; font-size: 0.8125rem; color: #3F3F46;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.payment-link-result-send {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  border: none; background: var(--primary-blue); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.payment-link-result-send svg { width: 17px; height: 17px; }
.payment-link-result-send:hover { opacity: 0.9; }

body[data-theme="dark"] .payment-method-row { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .payment-method-icon { color: #D4D4D8 !important; }
body[data-theme="dark"] .payment-link-result-box { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .payment-link-result-url { color: #D4D4D8 !important; }

/* Preview do checkout com link de pagamento */
.checkout-payment-banner {
  max-width: 640px; margin: 0 auto; padding: 1.25rem 1.5rem;
  background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.checkout-payment-banner-amount { font-size: 1.375rem; font-weight: 700; color: #18181B; }
.checkout-payment-banner-installments { font-size: 0.8125rem; color: #71717A; margin-top: 0.15rem; }
.checkout-payment-banner.is-paid { background: #F0FDF4; border-color: #BBF7D0; }
.checkout-payment-banner.is-paid .checkout-payment-banner-amount { color: #15803D; }

/* Campos com <input> real do template de checkout (CEP, Rua, Cidade). A caixa
   (fundo, borda, padding, fonte) já vem do wrapper .be-custom-html — igual ao
   dos campos de texto (checkoutBoxEl) — pra ficarem com o mesmo tamanho. */
.co-field-wrap { display: flex; align-items: center; gap: 9px; }
.co-field-wrap svg { width: 18px; height: 18px; flex-shrink: 0; color: #71717A; }
.co-field-wrap input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font: inherit; color: inherit; padding: 0;
}

/* -------------------- Página Legal (Termos de Uso / Política de Privacidade) -------------------- */
/* Texto vindo do editor rico do Admin (CMS → Legal) — mesmo conteúdo e mesmo
   estilo usados em love.com.br (ver openLegalDocPage em app.js), portado
   aqui pro B2B ter sua própria folha de estilos. */
.legal-doc-body h2 { font-size: 1.25rem; font-weight: 800; color: #18181b; margin: 2rem 0 0.75rem; }
.legal-doc-body h3 { font-size: 1.05rem; font-weight: 700; color: #18181b; margin: 1.5rem 0 0.5rem; }
.legal-doc-body p { color: #3f3f46; line-height: 1.75; margin-bottom: 1rem; text-align: justify; }
.legal-doc-body ul, .legal-doc-body ol { color: #3f3f46; line-height: 1.75; margin: 0 0 1rem 1.25rem; text-align: justify; }
.legal-doc-body ul { list-style: disc; }
.legal-doc-body ol { list-style: decimal; }
.legal-doc-body li { margin-bottom: 0.375rem; }
.legal-doc-body a { color: #537bae; text-decoration: underline; font-weight: 600; }
.legal-doc-body blockquote { border-left: 3px solid var(--borda-suave); padding-left: 1rem; color: #52525b; font-style: italic; margin: 1.25rem 0; }
.legal-doc-body strong, .legal-doc-body b { font-weight: 700; color: #18181b; }
.legal-doc-body h2 :is(b, strong),
.legal-doc-body h3 :is(b, strong),
.legal-doc-body h4 :is(b, strong) { font-weight: inherit; }


/* ==========================================================================
   Cards e caixas — padrão da plataforma do anfitrião ("Benefícios Love")
   Sem linha (borda transparente, não removida, pra não mudar o tamanho),
   sombra leve e cantos de 10px. Fica no fim do arquivo de propósito: vence
   os `box-shadow: none` / bordas definidos card a card lá em cima.
   Não vale pra campos, botões, pills, alertas, overlays nem pro card
   selecionável no estado selecionado (o contorno é o que indica a seleção).
   O modo escuro mantém as próprias bordas (#404040, com !important).
   ========================================================================== */
.dash-card,
.dashboard-panel-section .dash-card,
.dashboard-help-card,
.product-card,
.plan-card,
.plan-card.featured,
.form-list-item,
.form-field-card,
.response-list-row,
.task-drawer-comment-card,
.checkout-payment-banner:not(.is-paid),
.pricing-type-card:not(.active),
.forms-empty,
.form-fields-empty {
  border-color: transparent;
  border-style: solid;
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

/* Cards planos de propósito continuam planos. */
.dash-card.dash-ads-card,
.dash-card.guias-flat-card { box-shadow: none; }

/* Cards clicáveis: no hover a sombra cresce (em vez de a borda acender). */
a.dash-card:hover,
.response-list-row:hover,
.pricing-type-card:not(.active):hover {
  border-color: transparent;
  box-shadow: var(--card-shadow-hover);
}
.response-list-row,
.pricing-type-card { transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease; }

/* ==========================================================================
   Tabelas de dados (.leads-table-wrap) — padrão table.data do Admin:
   coluna principal em semi-negrito, demais em cinza 13px.
   ========================================================================== */
.leads-table-wrap .leads-table td { color: #667085; font-size: 0.8125rem; }
.leads-table-wrap .leads-table td.col-principal { color: #101828; font-weight: 600; font-size: 0.875rem; }
body[data-theme="dark"] .leads-table-wrap .leads-table td { color: #A1A1AA !important; }
body[data-theme="dark"] .leads-table-wrap .leads-table td.col-principal { color: #FFFFFF !important; }

/* ==========================================================================
   Botões do cabeçalho das páginas (Adicionar contato, Adicionar
   produto/serviço, Compartilhar agenda, Salvar, Ver site…): mesma altura
   da barra de busca e mesma cor da sidebar. Altura igual = mesmo padding
   vertical, mesma line-height e mesma borda nos dois (10 + 20 + 10 + 2 = 42px).
   O modo escuro mantém o estilo próprio dos botões (regras com !important).
   ========================================================================== */
.b2b-header-bar .field-input,
.b2b-header-bar .btn-primary,
.b2b-header-bar .btn-secondary {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-width: 1px;
}
.b2b-header-bar .btn-primary,
.b2b-header-bar .btn-secondary {
  padding-left: 1rem;
  padding-right: 1rem;
  background: #181D24;
  border-color: #181D24;
  border-style: solid;
  color: #FFFFFF;
}
.b2b-header-bar .btn-primary:hover,
.b2b-header-bar .btn-secondary:hover {
  background: #262D36;
  border-color: #262D36;
  color: #FFFFFF;
}

/* ==========================================================================
   Notificações (página /notificacoes e número do sino)
   ========================================================================== */
/* O número do sino some com .hidden mesmo que alguma regra de badge force
   um display (a do sino não força hoje, mas não pode depender disso). */
.topbar-icon-badge.hidden { display: none !important; }

/* Mesmo desenho da página de notificações da plataforma do anfitrião. */
.notification-row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  padding: 1rem 0.5rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background-color .15s ease;
}
.notification-row.is-unread { background: #EBF4FF; }
.notification-row.is-unread:hover { background: #DCEBFF; }
.notification-row.is-read { background: rgba(250, 250, 250, 0.8); }
.notification-row.is-read:hover { background: #F4F4F5; }
.notification-row-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: #F4F4F5; color: #52525B;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.notification-row-dot { width: 6px; height: 6px; border-radius: 9999px; background: #537bae; flex-shrink: 0; }

body[data-theme="dark"] .notification-row.is-unread { background: rgba(83, 123, 174, 0.22) !important; }
body[data-theme="dark"] .notification-row.is-unread:hover { background: rgba(83, 123, 174, 0.3) !important; }
body[data-theme="dark"] .notification-row.is-read { background: rgba(255, 255, 255, 0.03) !important; }
body[data-theme="dark"] .notification-row.is-read:hover { background: rgba(255, 255, 255, 0.07) !important; }
body[data-theme="dark"] .notification-row-icon { background: #333333 !important; color: #E4E4E7 !important; }

/* Botão de cabeçalho claro (ex.: "Marcar todas como lidas" em Notificações):
   mesma altura dos outros botões do cabeçalho, mas branco com borda fina,
   como o da plataforma do anfitrião. Vence a cor da sidebar definida acima. */
.b2b-header-bar .btn-secondary.header-btn-light {
  background: #FFFFFF;
  border-color: var(--borda-suave);
  color: #3F3F46;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.b2b-header-bar .btn-secondary.header-btn-light:hover {
  background: #FAFAFA;
  border-color: #D4D4D8;
  color: #3F3F46;
}

/* Busca no cabeçalho das páginas (ex.: "Pesquisar contato..." em Contatos):
   mesmo contorno da barra de busca do header (.topbar-search-trigger).
   :not(:focus) mantém a borda azul de foco do .field-input. */
.b2b-header-bar .field-input:not(:focus) { border-color: #E4E4E4; }

/* Seletor de data (initDatePicker, js/utils.js): rótulo como escrito
   ("Outubro de 1995", "de" minúsculo) e meses/anos ocupando a mesma altura
   da grade de dias — a caixinha não muda de tamanho ao trocar de visão. */
.date-picker-popover .mini-cal-month-label-btn { text-transform: none; }
.date-picker-popover .dp-body > .mini-cal-year-grid { height: 100%; grid-auto-rows: 1fr; }
.date-picker-popover .dp-body > .mini-cal-year-grid .mini-cal-year-btn { padding: 0; }

/* Avatar do perfil no cabeçalho (e no menu do perfil): mesma caixinha dos
   botões + e raio do chat (.chat-composer-icon-btn) — 40×40, fundo branco,
   borda #E4E4E7, cantos 8px. Sem foto, as iniciais ficam sobre o branco. */
#topbar-user-avatar,
#profile-dropdown-avatar {
  width: 40px !important; height: 40px !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--borda-suave) !important;
  box-sizing: border-box;
}
#topbar-user-avatar .avatar-initials,
#profile-dropdown-avatar .avatar-initials { background: #FFFFFF; border-radius: 7px; }
#topbar-user-avatar .avatar-photo-img,
#profile-dropdown-avatar .avatar-photo-img { border-radius: 7px; }
body[data-theme="dark"] #topbar-user-avatar,
body[data-theme="dark"] #profile-dropdown-avatar { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] #topbar-user-avatar .avatar-initials,
body[data-theme="dark"] #profile-dropdown-avatar .avatar-initials { background: #252525 !important; }

/* ==========================================================================
   Identidade própria, sem cara de Tailwind
   Bordas finas no lugar de sombras, cantos contidos (8px em botões, campos
   e caixinhas; 10px em cards e modais), nada de zoom no hover nem anel
   colorido no foco. Overlays (menus, modais) mantêm uma sombra discreta só
   pra se descolarem do fundo.
   ========================================================================== */
.rounded-md, .rounded-lg, .rounded-xl { border-radius: 8px !important; }
.rounded-2xl:not([class*="rounded-b"]):not([class*="rounded-t"]):not([class*="rounded-l"]):not([class*="rounded-r"]),
.rounded-3xl:not([class*="rounded-b"]):not([class*="rounded-t"]):not([class*="rounded-l"]):not([class*="rounded-r"]) { border-radius: 10px !important; }

.shadow-2xs, .shadow-xs, .shadow-sm, .shadow, .shadow-md { box-shadow: none !important; }
.shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; }

[class*="hover:scale-"]:hover,
.group:hover [class*="group-hover:scale-"] { transform: none !important; }

[class*="focus:ring"]:focus,
[class*="focus:ring"]:focus-visible {
  box-shadow: none !important;
  border-color: #181D24 !important;
  outline: none !important;
}

/* Hub: cards e caixas com borda fina #E4E4E7 (antes: borda transparente +
   sombra); clicáveis escurecem a borda no hover. */
.dash-card,
.dashboard-panel-section .dash-card,
.dashboard-help-card,
.product-card,
.plan-card,
.plan-card.featured,
.form-list-item,
.form-field-card,
.response-list-row,
.task-drawer-comment-card,
.checkout-payment-banner:not(.is-paid),
.pricing-type-card:not(.active),
.forms-empty,
.form-fields-empty { border-color: var(--borda-suave); box-shadow: none; }
a.dash-card:hover,
.response-list-row:hover,
.pricing-type-card:not(.active):hover { border-color: #A1A1AA; box-shadow: none; }
.dash-card.dash-ads-card { border-color: transparent; }
.dash-card.guias-flat-card { border-color: transparent; }

/* Botões de texto secundários e campos: borda neutra única. */
.btn-secondary { border-color: var(--borda-suave); }

/* Etiquetas de status: retângulo de cantos curtos, não pílula. */
.status-badge { border-radius: 6px; }

/* Mídia do drawer de produto: "Imagem de capa" e "Carrossel de imagens"
   como títulos de seção; a primeira sem a linha de cima (é o topo da aba). */
.product-media-title { margin-bottom: 0.6rem; }
.product-wizard-panel[data-step="3"] > div:first-of-type > .product-media-title { border-top: none; padding-top: 0; }

/* Drawer de produto: rótulos principais (Categoria principal, Título do
   anúncio, Unidade de cobrança, Descrição) no mesmo texto dos títulos
   "Imagem de capa" / "Carrossel de imagens". */
.field-label.product-title-label { font-size: 0.875rem; font-weight: 700; color: #18181B; margin-bottom: 0.6rem; }
body[data-theme="dark"] .field-label.product-title-label { color: #FFFFFF !important; }
.product-title-label + .field-hint { margin-top: -0.35rem; }

/* Guia de início / Dúvidas: categorias numa tabela (borda fina, uma por
   linha). Texto cinza; a ativa fica em negrito escuro com uma linha
   vertical reta à esquerda (sem cantos arredondados nem fundo). */
.guias-menu-table { display: flex; flex-direction: column; }
/* Só uma linha vertical à direita separa as categorias do conteúdo. */
.guias-layout > .guias-sidebar { border-right: 1px solid var(--borda-suave); padding-right: 1.25rem; }
body[data-theme="dark"] .guias-layout > .guias-sidebar { border-right-color: #404040 !important; }
.guias-menu-table .guide-link {
  border-radius: 0; border: none;
  padding: 0.8rem 1rem; color: #71717A; font-weight: 500;
  box-shadow: inset 2px 0 0 transparent;
}
.guias-menu-table .guide-link:hover { background: #FFFFFF; color: #181D24; }
.guias-menu-table .guide-link--active,
.guias-menu-table .guide-link--active:hover {
  color: #181D24; font-weight: 700; background: #FFFFFF;
  box-shadow: inset 2px 0 0 #181D24;
}
body[data-theme="dark"] .guias-menu-table .guide-link { color: #A1A1AA !important; background: transparent !important; }
body[data-theme="dark"] .guias-menu-table .guide-link--active { color: #FFFFFF !important; box-shadow: inset 2px 0 0 #FFFFFF !important; }

/* Resposta dos guias escrita no Admin: parágrafos, listas, links e vídeo. */
.faq-answer p + p, .faq-answer p + ul, .faq-answer p + ol { margin-top: .5rem; }
.faq-answer ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.faq-answer ol { list-style: decimal; padding-left: 1.25rem; margin: .5rem 0; }
.faq-answer a { color: var(--primary-blue); text-decoration: underline; }
.faq-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: .75rem 0; border-radius: 10px; overflow: hidden; background: #000; }
.faq-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Menu do perfil: divisórias um pouco mais fortes e de ponta a ponta da
   caixa (sem a margem solta nas laterais). Compensa o padding da caixa. */
.profile-dropdown .topbar-dropdown-divider { background: #E4E4E7; margin: 0.375rem -0.75rem; }
body[data-theme="dark"] .profile-dropdown .topbar-dropdown-divider { background: #404040 !important; }
@media (max-width: 767px) {
  .profile-dropdown .topbar-dropdown-divider { margin: 0.375rem -1rem; }
}

/* Etiqueta Ativo / Inativo: verde mais sóbrio (família do verde da marca,
   #67974E) com borda fina, em vez do verde-claro padrão do Tailwind. */
.status-badge.status-ativo { background: #F2F7EF; color: #3F6A2C; border: 1px solid #D3E3CA; }
.status-badge.status-ativo::before { background: #67974E; }
.status-badge.status-inativo { background: #FFFFFF; color: #71717A; border: 1px solid var(--borda-suave); }
.status-badge.status-inativo::before { background: #A1A1AA; }
body[data-theme="dark"] .status-badge.status-ativo { background: rgba(103, 151, 78, 0.16) !important; color: #B7D3A8 !important; border-color: rgba(103, 151, 78, 0.4) !important; }
body[data-theme="dark"] .status-badge.status-inativo { background: transparent !important; color: #A1A1AA !important; border-color: #404040 !important; }

/* Botões que eram azul clarinho (Adicionar da Agenda, atalhos do painel —
   Cobrar, Orçamento, Financeiro, Editor, Tarefas — e o do card de plano
   gratuito) passam ao formato padrão claro, como "Membros", "Adicionar
   tarefa" e "Salvar" do editor: fundo branco, borda fina cinza, texto
   escuro; no hover só a borda e o texto escurecem. */
#agenda-add-event-btn.btn-secondary,
.btn-secondary.dashboard-quick-action-btn,
.upgrade-card-face--free .upgrade-card-btn {
  background: #FFFFFF;
  border: 1px solid var(--borda-suave);
  color: #3F3F46;
}
#agenda-add-event-btn.btn-secondary:hover,
.btn-secondary.dashboard-quick-action-btn:hover,
.upgrade-card-face--free .upgrade-card-btn:hover {
  background: #FFFFFF;
  border-color: #181D24;
  color: #181D24;
}
body[data-theme="dark"] #agenda-add-event-btn.btn-secondary,
body[data-theme="dark"] .btn-secondary.dashboard-quick-action-btn,
body[data-theme="dark"] .upgrade-card-face--free .upgrade-card-btn {
  background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important;
}
body[data-theme="dark"] #agenda-add-event-btn.btn-secondary:hover,
body[data-theme="dark"] .btn-secondary.dashboard-quick-action-btn:hover,
body[data-theme="dark"] .upgrade-card-face--free .upgrade-card-btn:hover {
  background: #252525 !important; border-color: #A1A1AA !important; color: #FFFFFF !important;
}

/* Ativo / Inativo: sem contorno e 100% quadrado (sem cantos arredondados).
   Inativo ganha um fundo cinza bem claro para não sumir sem a borda. */
.status-badge.status-ativo,
.status-badge.status-inativo { border: none; border-radius: 0; }
.status-badge.status-inativo { background: #F4F4F5; }
body[data-theme="dark"] .status-badge.status-ativo,
body[data-theme="dark"] .status-badge.status-inativo { border: none !important; border-radius: 0 !important; }
body[data-theme="dark"] .status-badge.status-inativo { background: rgba(255, 255, 255, 0.06) !important; }

/* ==========================================================================
   Painel (Sua agenda, Precisa de ajuda?, Analytics, Notícias e eventos) no
   estilo das tabelas (Contatos): um card só, com a faixa de cabeçalho em
   cima (título em maiúsculas, pequeno e em negrito, linha embaixo) e o
   conteúdo logo abaixo, em vez do título solto com a barrinha azul.
   ========================================================================== */
.dashboard-panel-section,
.dashboard-help-section {
  background: #FFFFFF;
  border: 1px solid var(--borda-suave);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.dashboard-panel-section > .dashboard-panel-header,
.dashboard-help-section > .dashboard-help-header {
  border-left: none;
  margin: 0;
  padding: 0.875rem 1.5rem;
  min-height: 46px;
  border-bottom: 1px solid var(--borda-suave);
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.dashboard-panel-header .dashboard-help-title,
.dashboard-help-header .dashboard-help-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #333333;
}
.dashboard-panel-header .dashboard-help-subtitle,
.dashboard-help-header .dashboard-help-subtitle { font-size: 0.75rem; margin-top: 0.15rem; }
.dashboard-help-header { flex-wrap: wrap; }
.dashboard-help-header > .dashboard-help-subtitle { margin: 0; }
/* Conteúdo: o card de dentro vira o corpo da "tabela" (sem borda própria). */
.dashboard-panel-section > .dash-card {
  border: none !important;
  border-radius: 0;
  flex: 1;
}
.dashboard-help-section > .dashboard-help-grid { padding: 1.5rem; background: #FBFBFB; }
.dash-analytics-header.dashboard-panel-header { align-items: center; }

body[data-theme="dark"] .dashboard-panel-section,
body[data-theme="dark"] .dashboard-help-section { background: #181D24 !important; border-color: #404040 !important; }
body[data-theme="dark"] .dashboard-panel-section > .dashboard-panel-header,
body[data-theme="dark"] .dashboard-help-section > .dashboard-help-header { background: #181D24 !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] .dashboard-help-section > .dashboard-help-grid { background: transparent !important; }

/* Painel: a data de hoje fica à direita, no lugar do antigo "Guia de
   início" (no celular continua embaixo do "Olá"). */
.greeting-date-side { font-size: 0.875rem; font-weight: 600; color: #181D24; margin: 0; white-space: nowrap; }
body[data-theme="dark"] .greeting-date-side { color: #FFFFFF !important; }
@media (min-width: 769px) {
  body[data-page="dashboard"] .dashboard-greeting-text .greeting-date { display: none; }
}

/* Títulos das seções do painel (Sua agenda, Precisa de ajuda?, Analytics,
   Notícias e eventos): mesma fonte de "Saldo"/"Faturamento" e a cor da
   sidebar, sem maiúsculas. */
.dashboard-panel-header .dashboard-help-title,
.dashboard-help-header .dashboard-help-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #181D24;
}

/* Dúvidas: card no estilo de tabela — faixa de cabeçalho branca com a
   categoria (fonte de "Saldo", cor da sidebar) e as perguntas abaixo. */
.dash-card.faq-table-card { padding: 0; overflow: hidden; background: #FFFFFF; }
.faq-table-card > .dash-card-header {
  margin: 0; padding: 0.875rem 1.5rem; min-height: 46px;
  border-bottom: 1px solid var(--borda-suave); background: #FFFFFF;
}
.faq-table-title { font-size: 0.875rem; font-weight: 700; color: #181D24; margin: 0; }
.faq-table-card > .faq-list { padding: 0.25rem 1.5rem; background: #FBFBFB; }
.faq-table-card > .faq-list .faq-item:last-child { border-bottom: none; }
body[data-theme="dark"] .dash-card.faq-table-card,
body[data-theme="dark"] .faq-table-card > .dash-card-header { background: #181D24 !important; border-color: #404040 !important; }
body[data-theme="dark"] .faq-table-card > .faq-list { background: transparent !important; }
body[data-theme="dark"] .faq-table-title { color: #FFFFFF !important; }

/* ==========================================================================
   Altura única dos botões de ação (34px), a mesma do love.com.br (botão
   "presente aleatório" e barras de título de lá), com o mesmo espaçamento
   lateral do botão principal de lá (1.25rem). Vale para: botões e busca do
   cabeçalho das páginas (Adicionar produto ou serviço, Compartilhar agenda,
   Ver minha página…), Adicionar da Agenda, Adicionar tarefa, Salvar e
   Publicar do editor, Desfazer/Refazer e Desktop/Tablet/Mobile.
   ========================================================================== */
.b2b-header-bar .btn-primary,
.b2b-header-bar .btn-secondary,
#agenda-add-event-btn.btn-secondary,
.btn-secondary.kanban-add-task-confirm,
#builder-save,
#builder-publish {
  height: 34px;
  min-height: 34px;
  padding: 0 1.25rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}
.b2b-header-bar .field-input { height: 34px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.builder-tool-btn { width: 34px; height: 34px; }
.builder-device-toggle { padding: 3px; height: 34px; box-sizing: border-box; }
.builder-device-btn { height: 28px; }

/* Botões dos drawers (Salvar, Cancelar, Avançar, Salvar item, Voltar,
   Excluir, Comentar…): a mesma altura de 34px e o espaçamento lateral dos
   botões de ação. O "Adicionar" do escopo fica de fora porque acompanha a
   altura do campo ao lado. */
.form-drawer .btn-primary:not(.scope-add-btn),
.form-drawer .btn-secondary:not(.scope-add-btn),
.form-drawer .agenda-event-delete-btn {
  height: 34px;
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}
.form-drawer .btn-primary:not(.scope-add-btn),
.form-drawer .btn-secondary:not(.scope-add-btn) { padding-left: 1.25rem; padding-right: 1.25rem; }
#product-drawer-delete-btn { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

/* Analytics › Personalizado: calendário de intervalo dentro do menu de
   período (primeiro e último dia, dias no meio destacados). */
.dash-analytics-period-popover[hidden] { display: none !important; }
.dash-range-cal { width: 252px; padding: 0.6rem 0.4rem 0.2rem; border-top: 1px solid var(--borda-suave); margin-top: 0.3rem; }
.dash-range-cal[hidden] { display: none; }
.dash-range-cal .mini-cal-header { margin-bottom: 0.5rem; }
.dash-range-cal .mini-cal-day { height: 30px; font-size: 0.75rem; }
.dash-range-cal .mini-cal-day:disabled { color: #D4D4D8; cursor: default; }
.dash-range-cal .mini-cal-day.is-in-range { background: #EEF2F6; color: #181D24; border-radius: 0; }
.dash-range-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; }
.dash-range-cal-hint { font-size: 0.75rem; color: #71717A; }
.dash-analytics-period-popover .dash-range-cal button.dash-range-apply {
  height: 30px; padding: 0 0.9rem; font-size: 0.75rem; font-weight: 600;
  background: #181D24; color: #FFFFFF; border-radius: 8px; text-align: center;
}
.dash-analytics-period-popover .dash-range-cal button.dash-range-apply:disabled { opacity: 0.4; cursor: default; }
body[data-theme="dark"] .dash-range-cal { border-top-color: #404040; }
body[data-theme="dark"] .dash-range-cal .mini-cal-day.is-in-range { background: #333333 !important; color: #FFFFFF !important; }
.dash-analytics-period-popover .dash-range-cal .mini-cal-day,
.dash-analytics-period-popover .dash-range-cal .mini-cal-nav-btn { padding: 0; text-align: center; justify-content: center; }
.dash-range-cal .mini-cal-day { aspect-ratio: auto; }

/* O menu de período do Analytics precisa sair do card: sem cortar o que
   passa da borda (os cantos arredondados ficam no cabeçalho e no corpo). */
.dashboard-panel-section { overflow: visible; }
.dashboard-panel-section > .dashboard-panel-header { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.dashboard-panel-section > .dash-card { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.dash-analytics-header { position: relative; z-index: 5; }
.dash-range-cal .mini-cal-month-label { text-transform: none; }

/* Preço › Unidade de cobrança (Por pessoa, Por hora, Valor fixo, Sob
   consulta): a opção escolhida fica cinza claro e sem borda (antes azul
   clarinho com borda azul); no hover, só um cinza bem leve. */
.pricing-type-card:not(.active):hover { background: #FAFAFA; border-color: var(--borda-suave); }
.pricing-type-card.active,
.pricing-type-card.active:hover { background: #F4F4F5; border-color: transparent; }
body[data-theme="dark"] .pricing-type-card.active { border-color: transparent !important; }

/* Leads › Importar: janelinha com as instruções e os botões. */
.modal-card.lead-import-card { max-width: 480px; padding: 1.5rem; }

/* Botão claro no cabeçalho (ex.: Importar em Leads): igual ao "Adicionar"
   da Agenda — branco, borda fina cinza, texto escuro; no hover só a borda e
   o texto escurecem. */
.b2b-header-bar .btn-secondary.header-btn-light { background: #FFFFFF; border-color: var(--borda-suave); color: #3F3F46; box-shadow: none; }
.b2b-header-bar .btn-secondary.header-btn-light:hover { background: #FFFFFF; border-color: #181D24; color: #181D24; }
body[data-theme="dark"] .b2b-header-bar .btn-secondary.header-btn-light { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* Leads › WhatsApp: ícone verde do WhatsApp no começo do campo (como no
   love.com.br); com o número completo, clicar abre a conversa. */
.lead-whatsapp-field { position: relative; }
.lead-whatsapp-field .field-input { padding-left: 2.25rem; }
.lead-whatsapp-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; color: #25D366; pointer-events: none;
}
.lead-whatsapp-icon.is-ativo { pointer-events: auto; cursor: pointer; }
.lead-whatsapp-icon.is-ativo:hover { color: #1DA851; }

/* Leads › Importar: passo a passo numerado e os dois botões dividindo a
   largura toda (50% cada). */
.lead-import-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.lead-import-steps li { display: flex; gap: 0.75rem; align-items: flex-start; }
.lead-import-step-num {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 999px;
  background: #F4F4F5; color: #181D24; font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.lead-import-steps strong { display: block; font-size: 0.875rem; color: #18181B; }
.lead-import-steps p { font-size: 0.8125rem; color: #71717A; margin: 0.15rem 0 0; line-height: 1.45; }
.lead-import-steps p.lead-import-cols { margin-top: 0.4rem; }
.lead-import-cols span { color: #3F3F46; font-weight: 600; }
.lead-import-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.lead-import-actions .btn-primary,
.lead-import-actions .btn-secondary { width: 100%; justify-content: center; height: 40px; }
body[data-theme="dark"] .lead-import-step-num { background: #333333 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .lead-import-steps strong { color: #FFFFFF !important; }
body[data-theme="dark"] .lead-import-cols span { color: #E4E4E7 !important; }

/* Leads: coluna ID (número do lead) à esquerda do nome. */
.leads-table th.col-id, .leads-table td.col-id { width: 64px; color: #71717A; font-variant-numeric: tabular-nums; }

/* Botão de copiar no fim da caixa (e-mail, CPF, WhatsApp, endereço). */
.field-copy-wrap { position: relative; }
.field-copy-wrap > .field-input { padding-right: 2.5rem; }
.field-copy-btn {
  position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #A1A1AA; border-radius: 6px; cursor: pointer;
}
.field-copy-btn:hover { color: #181D24; background: #F4F4F5; }
body[data-theme="dark"] .field-copy-btn:hover { color: #FFFFFF !important; background: #333333 !important; }

/* Importar leads: passo a passo curto, uma linha por passo. */
.lead-import-steps { gap: 0.6rem; margin-bottom: 0.75rem; }
.lead-import-steps li { align-items: center; font-size: 0.8125rem; color: #52525B; }
.lead-import-steps li strong { display: inline; }
p.lead-import-cols { font-size: 0.75rem; color: #71717A; margin: 0 0 1.25rem; }

/* Chat: caixinhas de avatar com iniciais em fundo branco (borda fina cinza,
   iniciais azul-escuras), igual ao love.com.br — antes azul clarinho. */
body[data-page="chat"] .b2b-avatar-square { background: #FFFFFF; border-color: var(--borda-suave); }
body[data-page="chat"] .b2b-avatar-square .avatar-initials { background: #FFFFFF; color: #183B54; }
body[data-theme="dark"][data-page="chat"] .b2b-avatar-square { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"][data-page="chat"] .b2b-avatar-square .avatar-initials { background: #252525 !important; color: #FFFFFF !important; }

/* Configurações › Imagem de perfil e Imagem de Capa: só o "+" nas duas
   caixas vazias, a de perfil no mesmo cinza da capa (sem o azul clarinho),
   e a capa um pouco mais larga. */
.profile-form-top-cover { width: 240px; }
.profile-avatar-picker:not(.has-image) { background: #FAFAFA; border-color: var(--border-light); }
.profile-avatar-picker:not(.has-image):hover,
.profile-avatar-picker:not(.has-image).is-dragover { background: #F4F8FC; border-color: var(--primary-blue); }
body[data-theme="dark"] .profile-avatar-picker:not(.has-image) { background: #1c1c1c !important; border-color: #404040 !important; }

/* Configurações: a capa tem a mesma altura da imagem de perfil (130px) e é
   mais comprida, no formato de capa; "+" maior nas duas caixas. */
.profile-form-top-cover { width: 320px; }
.profile-logo-picker { aspect-ratio: auto; height: 130px; }
.profile-avatar-picker .image-upload-zone-plus,
.profile-logo-picker .image-upload-zone-plus { width: 36px; height: 36px; }
.profile-avatar-picker .image-upload-zone-plus svg,
.profile-logo-picker .image-upload-zone-plus svg { width: 18px; height: 18px; }

/* Configurações › Imagem de perfil e Imagem de Capa (vazias): no hover a
   caixa não muda de cor nem de borda; só o "+" pulsa, chamando o clique. */
.profile-avatar-picker:not(.has-image):hover,
.profile-avatar-picker:not(.has-image).is-dragover,
.profile-logo-picker:not(.has-image):hover,
.profile-logo-picker:not(.has-image).is-dragover { background: #FAFAFA; border-color: var(--border-light); }
body[data-theme="dark"] .profile-avatar-picker:not(.has-image):hover,
body[data-theme="dark"] .profile-logo-picker:not(.has-image):hover { background: #1c1c1c !important; border-color: #404040 !important; }
@keyframes plus-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(24, 59, 84, 0.25); }
  60%  { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(24, 59, 84, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(24, 59, 84, 0); }
}
.profile-avatar-picker:not(.has-image):hover .image-upload-zone-plus,
.profile-avatar-picker.is-dragover .image-upload-zone-plus,
.profile-logo-picker:not(.has-image):hover .image-upload-zone-plus,
.profile-logo-picker.is-dragover .image-upload-zone-plus { animation: plus-pulse 1.1s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .profile-avatar-picker .image-upload-zone-plus,
  .profile-logo-picker .image-upload-zone-plus { animation: none !important; }
}

/* Configurações › Imagem de Capa: a imagem preenche a caixa inteira (cover),
   em vez de aparecer inteira com sobras dos lados. */
.profile-logo-picker .logo-crop-img { object-fit: cover; }
.profile-logo-picker.has-image { background: #FAFAFA; }

/* Janela "Ajustar imagem de capa": mesmo formato (320 × 130) e mesma regra
   de preenchimento (cover) da caixa da capa — o que se vê aqui é o que fica. */
.profile-logo-adjust-frame { aspect-ratio: 320 / 130; background: #FAFAFA; }
.profile-logo-adjust-frame .logo-crop-img { object-fit: cover; }

/* ==========================================================================
   Tabelas do Hub (Leads, Cobranças, Notas fiscais, Contratos, Convidados,
   Equipe, Orçamentos…): cabeçalho escrito normal — só a primeira letra
   maiúscula, como está no texto ("Criado em", "Data do evento"; siglas
   como "ID" ficam como escritas) — e em negrito. As linhas de dados ficam
   todas em peso normal (nada de nome em negrito).
   ========================================================================== */
.leads-table th,
.leads-table th .contratos-status-filter-btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #181D24;
}
.leads-table-wrap .leads-table th { color: #181D24; font-weight: 700; }
.leads-table tbody td,
.leads-table tbody td *:not(svg):not(path) { font-weight: 400 !important; }
.leads-table-wrap .leads-table td.col-principal { font-weight: 400; color: #18181B; }
body[data-theme="dark"] .leads-table th,
body[data-theme="dark"] .leads-table th .contratos-status-filter-btn { color: #FFFFFF !important; }

/* ==========================================================================
   Tabelas do Hub no formato do Admin (Empresas › Cadastros)
   Caixa branca com borda fina; cabeçalho em faixa cinza clara; linhas
   brancas separadas por divisória; hover quase imperceptível.
   ========================================================================== */
.dash-card:has(> .leads-table-wrap),
.dash-card:has(> .overflow-x-auto > .leads-table) {
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px;
}
.leads-table { border-collapse: collapse; }
.leads-table thead th,
.leads-table-wrap .leads-table th {
  background: #F7F7F8;
  border-top: 1px solid var(--borda-suave);
  border-bottom: 1px solid var(--borda-suave);
  padding: 12px 16px;
  font-size: 0.8125rem; font-weight: 700; color: #181D24;
  text-transform: none; letter-spacing: 0; text-align: left; white-space: nowrap;
}
.leads-table tbody td,
.leads-table-wrap .leads-table td {
  padding: 14px 16px; font-size: 0.875rem; color: #18181B;
  border-top: none; border-bottom: 1px solid #F2F3F6; background: #FFFFFF;
}
.leads-table tbody tr:last-child td { border-bottom: none; }
.leads-table-wrap .leads-table tbody tr:nth-child(n) td { background: #FFFFFF; }
.leads-table tbody tr:hover td,
.leads-table-wrap .leads-table tbody tr:hover td { background: #FAFAFA; }
.leads-table-wrap .leads-table tbody tr.is-selected:nth-child(n) td { background: #F7F7F8; }
.leads-table tbody tr { cursor: default; }

/* Última coluna: "ver mais" (três bolinhas). */
.tabela-col-acoes { width: 48px; text-align: right; padding-right: 12px !important; }
.tabela-ver-mais {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #667085; border-radius: 8px; cursor: pointer;
}
.tabela-ver-mais:hover { color: #181D24; background: #F4F4F5; }

/* E-mail com botão de copiar. */
.tabela-email { display: inline-flex; align-items: center; gap: 0.4rem; }
.tabela-copiar-email {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #A1A1AA; border-radius: 6px; cursor: pointer; flex-shrink: 0;
}
.tabela-copiar-email:hover { color: #181D24; background: #F4F4F5; }

/* Barra no topo da caixa da tabela. */
.dash-card.tem-tabela-barra { padding: 0; overflow: visible; }
.dash-card.tem-tabela-barra > .leads-table-wrap,
.dash-card.tem-tabela-barra > .overflow-x-auto { margin: 0 !important; border-radius: 0 0 10px 10px; }
.tabela-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 14px 16px;
}
.tabela-busca {
  position: relative; display: flex; align-items: center; width: 280px; max-width: 100%;
  color: #A1A1AA;
}
.tabela-busca svg { position: absolute; left: 12px; pointer-events: none; }
.tabela-busca input {
  width: 100%; height: 38px; box-sizing: border-box;
  padding: 0 12px 0 34px; font-size: 0.875rem; color: #18181B; font-family: inherit;
  border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF; outline: none;
}
.tabela-busca input:focus { border-color: #181D24; box-shadow: none; }
.tabela-barra-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tabela-barra-btn {
  height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0 14px; font-size: 0.875rem; font-weight: 600; font-family: inherit; color: #3F3F46;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.tabela-barra-btn:hover, .tabela-barra-btn.is-ativo { color: #181D24; border-color: #181D24; background: #FFFFFF; }
.tabela-barra-btn:focus-visible { outline: none; border-color: #181D24; }
.tabela-filtro-contador {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: #181D24; color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.tabela-filtro-wrap { position: relative; }
.tabela-filtro-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 260px;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.tabela-filtro-menu[hidden] { display: none; }
.tabela-filtro-campo { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; font-weight: 600; color: #52525B; }
.tabela-filtro-limpar { align-self: flex-start; border: none; background: none; padding: 0; font-size: 0.8125rem; color: #71717A; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tabela-filtro-limpar:hover { color: #181D24; }

body[data-theme="dark"] .dash-card:has(> .leads-table-wrap),
body[data-theme="dark"] .dash-card:has(> .overflow-x-auto > .leads-table) { background: #181D24 !important; border-color: #404040 !important; }
body[data-theme="dark"] .leads-table thead th { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .leads-table tbody td { background: transparent !important; border-bottom-color: #333333 !important; color: #E4E4E7 !important; }
body[data-theme="dark"] .leads-table tbody tr:hover td { background: #222222 !important; }
body[data-theme="dark"] .tabela-busca input,
body[data-theme="dark"] .tabela-barra-btn,
body[data-theme="dark"] .tabela-filtro-menu { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* Caixinha de seleção das tabelas (mesma do love.com.br, Meus convidados). */
.gifts-select-all-check { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid #D4D4D8; border-radius: 5px; background: #fff; display: inline-grid; place-content: center; cursor: pointer; flex-shrink: 0; transition: border-color .15s, background-color .15s; }
.gifts-select-all-check::before { content: ''; width: 10px; height: 10px; background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform .12s; }
.gifts-select-all-check:hover { border-color: #181D24; }
.gifts-select-all-check:checked { background: #183b54; border-color: #183b54; }
.gifts-select-all-check:checked::before { transform: scale(1); }
.gifts-select-all-check:indeterminate { background: #183b54; border-color: #183b54; }
.gifts-select-all-check:indeterminate::before { transform: scale(1); clip-path: none; height: 2px; border-radius: 1px; }
body[data-theme="dark"] .gifts-select-all-check { background: #252525; border-color: #52525B; }

/* Leads: caixinha à esquerda do nome, com 14px de folga. */
.lead-nome-cel { display: inline-flex; align-items: center; gap: 14px; }

/* Lixeira da barra da tabela (exclusão em massa): só o ícone; no hover,
   borda e ícone vermelhos. */
.tabela-lixeira-btn { padding: 0 11px; }
.tabela-lixeira-btn[hidden] { display: none; }
.tabela-lixeira-btn:hover { border-color: #DC2626; color: #DC2626; background: #FFFFFF; }

/* Pop-up de confirmação padrão do Hub (confirmarNoHub em js/utils.js). */
.hub-confirmar { z-index: 200; }
.modal-card.hub-confirmar-card { max-width: 420px; padding: 1.5rem; }
.hub-confirmar-titulo { font-size: 1.0625rem; font-weight: 700; color: #18181B; margin: 0 0 0.4rem; }
.hub-confirmar-texto { font-size: 0.875rem; color: #71717A; margin: 0; }
.hub-confirmar-erro { font-size: 0.8125rem; color: #DC2626; margin: 0.75rem 0 0; }
.hub-confirmar-acoes { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; }
.hub-confirmar-acoes .btn-primary, .hub-confirmar-acoes .btn-secondary { height: 36px; padding: 0 1.1rem; }
body[data-theme="dark"] .hub-confirmar-titulo { color: #FFFFFF !important; }

/* Leads › WhatsApp: o ícone fica por cima da caixa (o campo com botão de
   copiar passou a cobri-lo). */
.lead-whatsapp-field .lead-whatsapp-icon { z-index: 2; }

/* Leads: caixinha no meio-termo entre o ID e o nome (24px de cada lado).
   A coluna ID encolhe para o tamanho do número. */
#leads-table-card .leads-table th.col-id,
#leads-table-card .leads-table td.col-id { width: 1%; white-space: nowrap; padding-right: 8px; }
#leads-table-card .lead-nome-cel { gap: 24px; }

/* Pedido de orçamento (love.com.br): card no chat do Hub. */
.pedido-card {
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-left: 3px solid #183B54;
  border-radius: 10px; padding: 14px 16px; min-width: 260px;
  display: flex; flex-direction: column; gap: 6px;
}
.pedido-card-titulo { font-size: 0.875rem; font-weight: 700; color: #181D24; margin: 0 0 4px; }
.pedido-card-linha { display: flex; justify-content: space-between; gap: 16px; font-size: 0.8125rem; }
.pedido-card-linha span { color: #71717A; }
.pedido-card-linha strong { color: #18181B; font-weight: 600; text-align: right; }
.pedido-card-mensagem { font-size: 0.8125rem; color: #3F3F46; margin: 4px 0 0; white-space: pre-wrap; }
.pedido-card-btn { margin-top: 8px; height: 34px; padding: 0 1rem; align-self: flex-start; font-size: 0.8125rem; }
body[data-theme="dark"] .pedido-card { background: #252525 !important; border-color: #404040 !important; border-left-color: #EBF4FF !important; }
body[data-theme="dark"] .pedido-card-titulo, body[data-theme="dark"] .pedido-card-linha strong { color: #FFFFFF !important; }

/* Leads: origem "Pedido pelo chat" (drawer e tabela). */
.lead-origem {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--borda-suave); border-radius: 10px; padding: 12px 14px; margin: -0.5rem 0 1rem; background: #FAFAFA;
}
.lead-origem[hidden] { display: none; }
.lead-origem-rotulo { font-size: 0.75rem; color: #71717A; margin: 0; }
.lead-origem-valor { font-size: 0.875rem; font-weight: 600; color: #181D24; margin: 0; }
.lead-origem .btn-primary { height: 34px; padding: 0 1rem; }
.lead-origem-tag {
  display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 6px;
  background: #F4F4F5; color: #52525B; font-size: 0.6875rem; vertical-align: middle;
}
body[data-theme="dark"] .lead-origem { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .lead-origem-valor { color: #FFFFFF !important; }

/* Chat: edição da mensagem no próprio balão (⋮ › Editar). */
.chat-msg-edicao { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.chat-msg-edicao-campo {
  width: 100%; box-sizing: border-box; resize: none; overflow: hidden;
  font-family: inherit; font-size: 0.875rem; line-height: 1.45; color: #18181B;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 8px; padding: 8px 10px; outline: none;
}
.chat-msg-edicao-campo:focus { border-color: #181D24; }
.chat-msg-edicao-acoes { display: flex; justify-content: flex-end; gap: 6px; }
.chat-msg-edicao-acoes .btn-primary, .chat-msg-edicao-acoes .btn-secondary { height: 30px; padding: 0 0.8rem; font-size: 0.75rem; }
.chat-bubble-user-glass .chat-msg-edicao-acoes .btn-primary { color: #FFFFFF !important; }
.chat-msg-editado { font-style: italic; }
body[data-theme="dark"] .chat-msg-edicao-campo { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* Chat: ações da mensagem (⋮ nas minhas, copiar nas do anfitrião) na mesma
   linha da bolha, centralizadas na altura dela; a hora fica embaixo.
   Sem borda nem fundo; no hover só um pulso (igual ao love.com.br). */
.chat-msg-linha { display: flex; align-items: center; gap: 8px; }
.chat-msg-linha--minha { justify-content: flex-end; }
.chat-msg-linha > .chat-bubble-user-glass,
.chat-msg-linha > div:not(.chat-msg-acao-btn) { min-width: 0; }
.chat-msg-acao-btn,
.chat-msg-acao-btn.chat-msg-menu-btn {
  width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 8px; cursor: pointer;
  color: #181D24; opacity: .6;
}
.chat-msg-acao-btn svg { width: 16px; height: 16px; }
.chat-msg-acao-btn:hover, .chat-msg-acao-btn:focus-visible,
.chat-msg-acao-btn.chat-msg-menu-btn:hover {
  opacity: 1; background: transparent; outline: none;
  animation: chat-acao-pulso .35s ease-out;
}
@keyframes chat-acao-pulso { 0% { transform: scale(1); } 50% { transform: scale(1.22); } 100% { transform: scale(1); } }
body[data-theme="dark"] .chat-msg-acao-btn { color: #FFFFFF !important; background: transparent !important; }

/* ==========================================================================
   Configurações: caixa única (modelo enviado) — abas no topo da caixa, em
   texto com sublinhado na ativa, e o conteúdo da aba logo abaixo. As caixas
   de dentro viram seções separadas por uma linha, sem caixa dentro de caixa.
   ========================================================================== */
.settings-shell {
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px;
}
.settings-shell > .category-tabs-bar {
  margin: 0; padding: 0 1.5rem; gap: 2rem;
  border-bottom: 1px solid var(--borda-suave);
}
.settings-shell > .category-tabs-bar .category-tab {
  font-size: 0.9375rem; font-weight: 600; color: #52525B;
  padding: 1rem 0 0.85rem; border-bottom-width: 2px;
}
.settings-shell > .category-tabs-bar .category-tab:hover { color: #181D24; }
.settings-shell > .category-tabs-bar .category-tab.active { color: #183B54; border-bottom-color: #183B54; }
.settings-shell [data-settings-panel] { padding: 1.5rem; }
.settings-shell [data-settings-panel] > .dash-card {
  background: transparent; border: none !important; box-shadow: none; border-radius: 0;
  padding: 0; margin: 0;
}
.settings-shell [data-settings-panel] > .dash-card + .dash-card {
  border-top: 1px solid var(--borda-suave) !important; padding-top: 1.5rem; margin-top: 1.5rem;
}
.settings-secao-titulo { font-size: 1.125rem; font-weight: 700; color: #181D24; margin: 0; }
.settings-secao-titulo--painel { margin-bottom: 1.25rem; }
.settings-secao-nota { font-size: 0.75rem; color: #71717A; margin: 0.2rem 0 1.25rem; }
body[data-theme="dark"] .settings-shell { background: #181D24 !important; border-color: #404040 !important; }
body[data-theme="dark"] .settings-shell > .category-tabs-bar { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .settings-shell [data-settings-panel] > .dash-card { background: transparent !important; }
body[data-theme="dark"] .settings-shell [data-settings-panel] > .dash-card + .dash-card { border-top-color: #404040 !important; }
body[data-theme="dark"] .settings-secao-titulo { color: #FFFFFF !important; }

/* Configurações › Imagem de perfil e Capa com imagem: só um lápis branco no
   canto de baixo (clicar troca a imagem); sem o X de excluir. */
.profile-imagem-editar {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #181D24; border: 1px solid var(--borda-suave);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); pointer-events: none;
}
.profile-imagem-editar svg { width: 15px; height: 15px; }
.profile-avatar-picker:hover .profile-imagem-editar,
.profile-logo-picker:hover .profile-imagem-editar { border-color: #181D24; }
body[data-theme="dark"] .profile-imagem-editar { background: #252525 !important; color: #FFFFFF !important; border-color: #404040 !important; }

/* Leads: quantidade marcada ao lado da lixeira, ex.: (3). */
.tabela-lixeira-btn { gap: 0.35rem; }
.tabela-lixeira-qtd { font-size: 0.8125rem; font-weight: 600; }

/* Botões com o atributo hidden ficam escondidos mesmo com as regras de
   altura/estilo dos botões de drawers, cabeçalhos e barras de tabela (que
   usam display:inline-flex e venciam o [hidden]). Ex.: no drawer "Meus
   comandos", a lista mostra só Fechar + Adicionar comando; o formulário,
   só Cancelar/Voltar + Salvar comando. */
.form-drawer [hidden],
.b2b-header-bar [hidden],
.tabela-barra [hidden],
.modal-card [hidden] { display: none !important; }

/* Chat: "Editar" some do menu ⋮ em mensagem já editada (só uma vez). */
.chat-msg-menu [hidden] { display: none !important; }
.chat-msg-edicao-erro { font-size: 0.75rem; color: #DC2626 !important; margin: 0; text-align: left; }
.chat-msg-edicao-erro[hidden] { display: none; }

/* Serviço suspenso pela Love (Admin): etiqueta cinza, aviso no card e no
   drawer, e aviso no painel com link para a lista. */
.status-badge.status-suspenso { background: #F4F4F5; color: #52525B; border: 1px solid var(--borda-suave); border-radius: 6px; }
.status-badge.status-suspenso::before { background: #A1A1AA; }
.produto-suspenso-aviso { font-size: 0.75rem; color: #52525B; background: #F7F7F8; border: 1px solid var(--borda-suave); border-radius: 6px; padding: 6px 8px; margin: 0; line-height: 1.4; }
.produto-suspenso-aviso strong { color: #181D24; }
.produto-suspenso-drawer {
  font-size: 0.8125rem; color: #3F3F46; line-height: 1.5;
  background: #F7F7F8; border: 1px solid var(--borda-suave); border-left: 3px solid #71717A; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 1rem;
}
.produto-suspenso-drawer[hidden] { display: none; }
.dashboard-suspensos-aviso {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 0.875rem; color: #3F3F46; text-decoration: none;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-left: 3px solid #71717A; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 1.25rem;
}
.dashboard-suspensos-aviso[hidden] { display: none; }
.dashboard-suspensos-aviso strong { color: #181D24; }
.dashboard-suspensos-link { font-weight: 600; color: #181D24; white-space: nowrap; }
.dashboard-suspensos-aviso:hover { border-color: #181D24; border-left-color: #181D24; }
body[data-theme="dark"] .produto-suspenso-aviso,
body[data-theme="dark"] .produto-suspenso-drawer,
body[data-theme="dark"] .dashboard-suspensos-aviso { background: #252525 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .dashboard-suspensos-aviso strong,
body[data-theme="dark"] .dashboard-suspensos-link,
body[data-theme="dark"] .produto-suspenso-aviso strong { color: #FFFFFF !important; }

/* Configurações › Portfólio: cada foto com "Comentários sobre este serviço"
   logo abaixo (vai para o carrossel do portfólio na página da empresa). */
.portfolio-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.portfolio-item-rotulo { font-size: 0.75rem; font-weight: 600; color: #52525B; margin-top: 2px; }
.portfolio-item-comentario { min-height: 72px; font-size: 0.8125rem; resize: vertical; }
body[data-theme="dark"] .portfolio-item-rotulo { color: #D4D4D8 !important; }

/* Configurações › Segurança: dois fatores, verificação e assinatura logo
   abaixo da senha, separados por uma linha (sem acordeão). */
.settings-seguranca-linhas { margin-top: 1.5rem; border-top: 1px solid var(--borda-suave); }
.settings-seguranca-linhas .settings-switch-row { padding: 1rem 0; border-bottom: 1px solid #F2F3F6; }
.settings-seguranca-linhas .settings-switch-row:last-child { border-bottom: none; padding-bottom: 0; }
body[data-theme="dark"] .settings-seguranca-linhas { border-top-color: #404040 !important; }
body[data-theme="dark"] .settings-seguranca-linhas .settings-switch-row { border-bottom-color: #333333 !important; }

/* ===== Vendas › Orçamentos: lista + proposta ===== */
.status-badge.status-orc-pendente,
.status-badge.status-orc-analise,
.status-badge.status-orc-aceito { border: none; border-radius: 0; }
.status-badge.status-orc-pendente { background: #FEF7E6; color: #92580B; }
.status-badge.status-orc-analise { background: #EEF3F8; color: #183b54; }
.status-badge.status-orc-aceito { background: #F2F7EF; color: #3F6A2C; }
.b2b-breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: #71717A; }
.b2b-breadcrumb-link { background: none; border: 0; padding: 0; color: #71717A; font: inherit; cursor: pointer; }
.b2b-breadcrumb-link:hover { color: #181D24; text-decoration: underline; }
.b2b-breadcrumb-atual { color: #181D24; font-weight: 500; }
.proposal-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.field-input.proposal-campo-fixo,
.proposal-fieldset:disabled .field-input,
.proposal-fieldset:disabled .field-select { background: #F4F4F5 !important; color: #52525B; cursor: default; }
.proposal-fieldset:disabled .proposal-cell-input { background: transparent; color: #3F3F46; }
.proposal-fieldset:disabled [data-remove-item] { display: none; }
.proposal-condicoes { border: 1px solid var(--borda-suave); border-radius: 10px; padding: 0.875rem 1rem; background: #FAFAFA; }
.proposal-condicoes-titulo { font-size: 0.8125rem; font-weight: 600; color: #181D24; margin: 0 0 0.5rem; }
.proposal-condicoes-linha { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; color: #52525B; padding: 0.25rem 0; border-top: 1px solid #EFEFF1; }
.proposal-condicoes-linha:first-of-type { border-top: 0; }
.proposal-condicoes-linha strong { color: #181D24; font-weight: 600; }
.proposal-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--borda-suave); }
.proposal-total { font-size: 0.9375rem; color: #52525B; margin: 0; }
.proposal-total strong { color: #181D24; font-size: 1.0625rem; }
.proposal-rodape[hidden], #orcamentos-form-view[hidden], #orcamentos-lista-view[hidden] { display: none !important; }
body[data-theme="dark"] .proposal-condicoes { background: #1F1F1F; border-color: #333; }
body[data-theme="dark"] .proposal-condicoes-titulo,
body[data-theme="dark"] .proposal-condicoes-linha strong,
body[data-theme="dark"] .proposal-total strong,
body[data-theme="dark"] .b2b-breadcrumb-atual { color: #F4F4F5; }

/* Editor de site › abas ELEMENTOS / URL: mesmo tamanho do rótulo
   "Elementos" do Convite digital no index (11px, caixa alta). */
html body .builder-panel-tabs .builder-panel-tab:not(#love-h-a) {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 16.5px;
  text-transform: uppercase; height: auto; min-height: 0;
}

/* Drawer de produto › Detalhes do local (espaços para locação). */
.local-linha-curta { display: grid; grid-template-columns: 110px minmax(0, 240px); gap: 0.75rem; }
.local-linha-cidade { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0.75rem; }
.local-campo-cidade { position: relative; }
.local-campo-area { max-width: 200px; }
.cidade-sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: #fff; border: 1px solid var(--borda-suave); border-radius: var(--radius-control);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 0.25rem; max-height: 260px; overflow-y: auto;
}
.cidade-sugestoes[hidden] { display: none !important; }
.cidade-sugestao {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px;
  padding: 0.5rem 0.625rem; font-size: 0.875rem; color: #18181B; cursor: pointer;
}
.cidade-sugestao:hover, .cidade-sugestao.is-ativo { background: #F4F4F5; }
/* "m²" logo depois do número: um eco invisível do valor empurra a unidade. */
.campo-com-unidade { position: relative; }
.campo-unidade {
  position: absolute; top: 50%; left: calc(0.875rem + 1px); transform: translateY(-50%);
  font-size: 0.875rem; color: #71717A; pointer-events: none; white-space: pre; display: none;
}
.campo-unidade-eco { visibility: hidden; }
.campo-com-unidade.tem-valor .campo-unidade { display: block; }
/* Valores: o dia à esquerda e o valor ao lado. */
.local-valores { display: flex; flex-direction: column; gap: 0.6rem; }
.local-valor-linha { display: grid; grid-template-columns: 140px minmax(0, 200px); align-items: center; gap: 0.75rem; }
.local-valor-linha > label { font-size: 0.875rem; color: #3F3F46; }
body[data-theme="dark"] .cidade-sugestoes { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .cidade-sugestao { color: #F4F4F5 !important; }
body[data-theme="dark"] .cidade-sugestao:hover, body[data-theme="dark"] .cidade-sugestao.is-ativo { background: #333333 !important; }
body[data-theme="dark"] .local-valor-linha > label { color: #D4D4D8 !important; }

/* Drawer de produto › lista de categorias: a escolhida fica com a linha
   toda em cinza claro (mesma cor do cabeçalho do drawer), sem o azul. */
.category-tree-row.active, .category-tree-subrow.active { background: #FAFAFA; color: #18181B; font-weight: 600; }
.category-tree-row:hover, .category-tree-subrow:hover { color: #18181B; }
body[data-theme="dark"] .category-tree-row.active, body[data-theme="dark"] .category-tree-subrow.active { background: #333333 !important; color: #FFFFFF !important; }

/* Campo Categoria do drawer de produto: mesma caixa do "Título do anúncio"
   (borda 1px #E4E4E7, mesmo respiro e texto; hover/aberto só escurece a borda). */
.category-select-trigger {
  border: 1px solid var(--borda-suave); padding: 0.625rem 0.875rem; font-size: 0.875rem; box-shadow: none;
}
.category-select-trigger:hover, .category-select.is-open .category-select-trigger { border-color: #181D24; }

/* Drawer de produto › Escopo: pacotes e adicionais. */
.product-pacotes { display: flex; flex-direction: column; }
.product-pacotes-lista { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.25rem; }
.product-pacotes-lista:empty { display: none; }
.product-pacote-item { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--borda-suave); border-radius: 10px; padding: 0.75rem; background: #fff; }
.product-pacote-linha { display: grid; grid-template-columns: minmax(0, 1fr) 150px 28px; gap: 0.5rem; align-items: center; }
.product-pacotes-add { align-self: flex-start; margin-top: 0.6rem; }
.product-duplicar-btn { flex: 0 0 auto; width: 36px; justify-content: center; padding-left: 0; padding-right: 0; }
body[data-theme="dark"] .product-pacote-item { background: #252525 !important; border-color: #404040 !important; }

/* Proposta › cabeçalho "Preço UC": o UC mostra "Unidade de cobrança" ao passar o mouse. */
.proposal-abbr { text-decoration: none; cursor: help; }

/* SKU / código interno (só no Hub; nunca na vitrine). */
.field-label-opcional { font-weight: 400; color: #A1A1AA; font-size: 0.8125rem; margin-left: 0.25rem; }
.product-sku-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.produto-sku { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; color: #71717A; margin-top: 0.1rem; }
.product-pacote-linha--extra { grid-template-columns: minmax(0, 1fr) 150px 28px; }
.product-pacote-linha--extra::after { content: ''; }
.produtos-busca { width: 280px; margin-bottom: 1rem; }

/* Código (SKU): ícone de informação azul ao lado do rótulo; o balão abre
   para a direita (o campo fica na borda esquerda do drawer). */
.product-label-com-info { display: flex; align-items: center; gap: 0.35rem; }
.product-info-azul { color: #3B82F6; }
.product-info-azul:hover, .product-info-azul:focus-visible { color: #2563EB; }
.info-tooltip-wrap--esq .info-tooltip-bubble { right: auto; left: -6px; width: auto; white-space: nowrap; }
.info-tooltip-wrap--esq .info-tooltip-bubble::after { right: auto; left: 10px; }
.product-sku-input { font-family: inherit; }

/* Selo "Ativo": só a bolinha e o texto, sem a caixinha de fundo. */
.status-badge.status-ativo { background: transparent; border: none; padding-left: 0; padding-right: 0; }
body[data-theme="dark"] .status-badge.status-ativo { background: transparent !important; }

/* Ícone de informação do Código (SKU): branco com contorno preto. */
.product-info-icone { color: #181D24; width: 16px; height: 16px; }
.product-info-icone svg { width: 16px; height: 16px; }
.product-info-icone:hover, .product-info-icone:focus-visible { color: #181D24; }
/* Selo "Ativo" no azul da plataforma (cor primária), no lugar do verde. */
.status-badge.status-ativo { color: #183b54; }
.status-badge.status-ativo::before { background: #183b54; }
body[data-theme="dark"] .status-badge.status-ativo { color: #9CC3E4 !important; }
body[data-theme="dark"] .status-badge.status-ativo::before { background: #9CC3E4 !important; }

/* Drawer de produto › local: campos mais curtos, endereço obrigatório. */
.campo-obrigatorio { color: #B91C1C; font-weight: 600; }
.local-linha-curta { grid-template-columns: 96px 180px; }
.local-linha-cidade { grid-template-columns: 80px minmax(0, 240px); }
.local-campo-area { max-width: 160px; }
/* Dias de funcionamento ocupando a largura toda (7 colunas iguais). */
#product-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
#product-weekday-row .weekday-toggle-chip { min-width: 0; width: 100%; }
/* Mídia: fotos maiores. */
.product-gallery-tile, .product-gallery-add { width: 120px; height: 120px; }
/* Redes sociais. */
.produto-redes { display: flex; gap: 0.5rem; }
.produto-rede-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF; color: #52525B; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.produto-rede-btn svg { width: 18px; height: 18px; }
.produto-rede-btn:hover, .produto-rede-btn.is-ativo { border-color: #181D24; color: #181D24; }
.produto-redes-campos { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
.produto-redes-campos:not(:has(.produto-rede-campo:not([hidden]))) { margin-top: 0; }
.produto-rede-campo[hidden] { display: none !important; }
body[data-theme="dark"] .produto-rede-btn { background: #252525 !important; border-color: #404040 !important; color: #D4D4D8 !important; }

/* Painel (home do Hub): títulos das seções (Sua agenda, Precisa de ajuda?,
   Analytics, Notícias e eventos) no padrão do index — "Benefícios &
   Serviços" / "Mais Recursos": título 16px em negrito fora da caixa, com
   uma linha horizontal fina até o fim; a caixa fica só no conteúdo. */
html body .dashboard-panel-section,
html body .dashboard-help-section { background: transparent; border: none; border-radius: 0; overflow: visible; }
html body .dashboard-panel-section > .dashboard-panel-header,
html body .dashboard-help-section > .dashboard-help-header {
  background: transparent; border: none; border-radius: 0; padding: 0; min-height: 0;
  margin: 0 0 0.75rem; display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; flex-wrap: nowrap;
}
.dashboard-panel-header::after,
.dashboard-help-header::after { content: ''; flex: 1 1 auto; height: 1px; background: #E4E4E7; order: 1; }
.dash-analytics-header > div:first-child { order: 0; }
.dash-analytics-header > .dash-analytics-period-wrap { order: 2; }
html body .dashboard-panel-header .dashboard-help-title,
html body .dashboard-help-header .dashboard-help-title {
  font-size: 1rem; font-weight: 700; color: #18181B; white-space: nowrap; text-transform: none; letter-spacing: 0;
}
html body .dashboard-panel-section > .dash-card { border: 1px solid var(--borda-suave) !important; border-radius: var(--radius-card) !important; }
html body .dashboard-help-section > .dashboard-help-grid { padding: 0; background: transparent; }
body[data-theme="dark"] .dashboard-panel-section,
body[data-theme="dark"] .dashboard-help-section,
body[data-theme="dark"] .dashboard-panel-section > .dashboard-panel-header,
body[data-theme="dark"] .dashboard-help-section > .dashboard-help-header { background: transparent !important; border: none !important; }
body[data-theme="dark"] .dashboard-panel-header::after,
body[data-theme="dark"] .dashboard-help-header::after { background: #404040; }
body[data-theme="dark"] .dashboard-panel-section > .dash-card { border-color: #404040 !important; }
body[data-theme="dark"] .dashboard-panel-header .dashboard-help-title,
body[data-theme="dark"] .dashboard-help-header .dashboard-help-title { color: #FFFFFF !important; }

/* Detalhes do local: Endereço + Número (pequeno) na 1ª linha; Complemento,
   UF e Cidade na 2ª. */
.local-linha-endereco { display: grid; grid-template-columns: 120px minmax(0, 1fr) 96px; gap: 0.75rem; }
.local-linha-complemento { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1.3fr); gap: 0.75rem; }

/* Painel › Precisa de ajuda?: duas caixas (Canais de suporte e Central de ajuda). */
.dashboard-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) { .dashboard-help-grid { grid-template-columns: 1fr; } }
a.guide-link { display: block; text-decoration: none; }

/* Lápis da imagem de perfil/capa: fundo branco translúcido (com um leve
   desfoque) e traço mais grosso. */
.profile-imagem-editar {
  background: rgba(255, 255, 255, 0.72); border-color: rgba(228, 228, 231, 0.7);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.profile-imagem-editar svg { width: 16px; height: 16px; }
body[data-theme="dark"] .profile-imagem-editar { background: rgba(37, 37, 37, 0.7) !important; }

/* Perfil › "Alterar" bloqueado pela regra dos 2 dias: aviso pequeno acima da caixa. */
.campo-aviso-alteracao { font-size: 0.75rem; color: #71717A; margin: -0.15rem 0 0.35rem; }
.field-request-change-link { color: #71717A; }
.field-request-change-link:hover { color: #181D24; }

/* Chat › Suporte Love "digitando…": três bolinhas pulando (igual ao love.com.br). */
.chat-digitando {
  display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 14px; border-bottom-left-radius: 4px;
}
.chat-digitando span {
  width: 7px; height: 7px; border-radius: 50%; background: #A1A1AA;
  animation: chat-digitando-pulo 1.2s ease-in-out infinite;
}
.chat-digitando span:nth-child(2) { animation-delay: .15s; }
.chat-digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-digitando-pulo {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .chat-digitando span { animation: none; opacity: .7; } }
body[data-theme="dark"] .chat-digitando { background: #252525 !important; border-color: #404040 !important; }

/* Lista de conversas: "Digitando…" enquanto o anfitrião digita. */
.chat-previa-digitando { font-style: italic; color: #183b54; }
body[data-theme="dark"] .chat-previa-digitando { color: #9CC3E4 !important; }

/* Chat › ⋮ › Salvar comando: pop-up pequeno, com Cancelar | Salvar comando
   divididos ao meio por uma linha. */
.modal-card.comando-popup { max-width: 360px; width: calc(100% - 32px); padding: 0; overflow: hidden; border-radius: var(--radius-card); }
.comando-popup-corpo { padding: 1.25rem 1.25rem 1rem; }
.comando-popup-titulo { font-size: 1rem; font-weight: 700; color: #18181B; margin: 0 0 0.9rem; text-align: center; }
.comando-popup-rotulo { display: block; font-size: 0.75rem; font-weight: 600; color: #52525B; margin: 0 0 0.35rem; }
.comando-popup-mensagem {
  font-size: 0.8125rem; color: #3F3F46; background: #FAFAFA; border: 1px solid var(--borda-suave); border-radius: 8px;
  padding: 0.6rem 0.75rem; margin: 0 0 0.9rem; max-height: 110px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.comando-popup-campo { position: relative; }
.comando-popup-campo > span { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: #A1A1AA; font-size: 0.875rem; pointer-events: none; }
.comando-popup-campo .field-input { padding-left: 1.4rem; }
.comando-popup-erro { font-size: 0.75rem; color: #DC2626; margin: 0.5rem 0 0; }
.comando-popup-acoes { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--borda-suave); }
.comando-popup-acoes button {
  height: 46px; background: #FFFFFF; border: none; font-size: 0.875rem; font-weight: 600; color: #52525B; cursor: pointer; font-family: inherit;
}
.comando-popup-acoes button + button { border-left: 1px solid var(--borda-suave); color: #183b54; }
.comando-popup-acoes button:hover { color: #181D24; background: #FAFAFA; }
.comando-popup-acoes button:disabled { opacity: .6; cursor: default; }
body[data-theme="dark"] .comando-popup-titulo { color: #FFFFFF !important; }
body[data-theme="dark"] .comando-popup-mensagem { background: #252525 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .comando-popup-acoes { border-top-color: #404040; }
body[data-theme="dark"] .comando-popup-acoes button { background: #1F1F1F !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .comando-popup-acoes button + button { border-left-color: #404040; color: #9CC3E4 !important; }

/* Chat › lista de conversas: o horário vira ⋯ no hover (mesmo lugar);
   o ⋯ abre Fixar / Excluir. */
.conv-item-canto { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25rem; flex-shrink: 0; min-width: 28px; height: 18px; }
.conv-item-fixada { width: 11px; height: 11px; color: #A1A1AA; }
.conv-item-mais {
  display: none; width: 26px; height: 18px; align-items: center; justify-content: center;
  border: none; background: none; color: #52525B; cursor: pointer; border-radius: 6px; padding: 0;
}
.conv-item-mais svg { width: 16px; height: 16px; }
.conv-item-mais:hover { color: #181D24; background: rgba(0,0,0,0.05); }
.conv-item:hover .conv-item-hora, .conv-item.menu-aberto .conv-item-hora { display: none; }
.conv-item:hover .conv-item-mais, .conv-item.menu-aberto .conv-item-mais { display: inline-flex; }
@media (hover: none) { .conv-item-mais { display: inline-flex; } .conv-item-hora { display: none; } }
.conv-menu {
  position: absolute; z-index: 300; min-width: 140px; padding: 4px;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.conv-menu button {
  display: block; width: 100%; text-align: left; padding: 0.5rem 0.65rem; border: none; background: none;
  border-radius: 6px; font-size: 0.8125rem; color: #18181B; cursor: pointer; font-family: inherit;
}
.conv-menu button:hover { background: #F4F4F5; }
.conv-menu .conv-menu-perigo { color: #B91C1C; }
body[data-theme="dark"] .conv-menu { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .conv-menu button { color: #F4F4F5 !important; }
body[data-theme="dark"] .conv-menu button:hover { background: #333333 !important; }
body[data-theme="dark"] .conv-menu .conv-menu-perigo { color: #F87171 !important; }
body[data-theme="dark"] .conv-item-mais { color: #D4D4D8; }

/* Menu do perfil › empresas do login (troca de empresa). */
.profile-empresas-titulo { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #A1A1AA; margin: 0.35rem 0.75rem 0.25rem; }
.profile-empresa-item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.75rem; border: none; background: none;
  border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit; font-size: 0.8125rem; color: #18181B;
}
.profile-empresa-item:hover { background: #F4F4F5; }
.profile-empresa-item.is-ativa { font-weight: 600; }
.profile-empresa-avatar { width: 24px; height: 24px; border-radius: 6px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--borda-suave); display: flex; align-items: center; justify-content: center; font-size: 0.625rem; }
.profile-empresa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-empresa-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-empresa-check { width: 16px; height: 16px; color: #183b54; flex-shrink: 0; }
body[data-theme="dark"] .profile-empresa-item { color: #F4F4F5 !important; }
body[data-theme="dark"] .profile-empresa-item:hover { background: #333333 !important; }

/* Adicionar empresa (nova-empresa.html). */
.nova-empresa-card { max-width: 720px; padding: 1.5rem; }
.nova-empresa-imagens { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; }
.nova-empresa-upload {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
  border: 1px dashed #D4D4D8; border-radius: 10px; background: #FAFAFA; transition: border-color .15s ease;
}
.nova-empresa-upload:hover { border-color: #181D24; }
.nova-empresa-upload.tem-imagem { border-style: solid; border-color: var(--borda-suave); }
.nova-empresa-upload--perfil { width: 140px; height: 140px; }
.nova-empresa-upload--capa { width: 100%; aspect-ratio: 1280 / 520; }
.nova-empresa-upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nova-empresa-upload-mais { font-size: 1.75rem; font-weight: 300; color: #A1A1AA; line-height: 1; }
.nova-empresa-campos { display: flex; flex-direction: column; gap: 1rem; }
.nova-empresa-erro { font-size: 0.8125rem; color: #DC2626; margin: 1rem 0 0; }
.nova-empresa-rodape { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--borda-suave); }
.nova-empresa-limite-texto { font-size: 0.9375rem; color: #3F3F46; margin: 0 0 1rem; }
.nova-empresa-limite-btn { display: inline-flex; }
@media (max-width: 640px) { .nova-empresa-imagens { grid-template-columns: 1fr; } }
body[data-theme="dark"] .nova-empresa-upload { background: #252525 !important; border-color: #404040 !important; }

/* Chat › lista de conversas igual ao love.com.br:
   ⋯ num círculo de 24px (cinza; no hover/menu aberto, fundo #F4F4F5 e
   bolinhas pretas) e a linha vertical à esquerda de cada conversa (cinza;
   na ativa, a cor da sidebar). */
html body #conv-list .conv-item-mais {
  width: 24px; height: 24px; border-radius: 50%; margin: -3px -4px -3px 0; padding: 0;
  color: #71717A; background: transparent; box-shadow: none; transform: none; animation: none;
  transition: color .15s;
}
html body #conv-list .conv-item-mais svg { width: 18px; height: 18px; }
html body #conv-list .conv-item-mais:hover,
html body #conv-list .conv-item.menu-aberto .conv-item-mais { background: #F4F4F5; color: #181D24; }
body[data-theme="dark"] #conv-list .conv-item-mais:hover,
body[data-theme="dark"] #conv-list .conv-item.menu-aberto .conv-item-mais { background: #333333 !important; color: #FFFFFF !important; }
html body #conv-list .conv-item,
html body #conv-list .conv-item.border-transparent { border-left: 4px solid var(--borda-suave); }
html body #conv-list .conv-item.active { border-left-color: #181D24 !important; }
body[data-theme="dark"] #conv-list .conv-item { border-left-color: #404040; }
body[data-theme="dark"] #conv-list .conv-item.active { border-left-color: #FFFFFF !important; }

/* Chat › lista de conversas: horário/data um pouco maior (12px), igual ao love.com.br. */
html body #conv-list .conv-item-hora:not(#love-h-a) { font-size: 12px; }

/* Pop-up "Adicionar comando": "Salvar comando" já na cor da sidebar. */
.comando-popup-acoes button + button { color: #181D24; }
body[data-theme="dark"] .comando-popup-acoes button + button { color: #FFFFFF !important; }

/* Drawer "Comandos rápidos": título fixo (sem o pontilhado de "editar" no hover). */
#template-drawer-title { cursor: default; }
#template-drawer-title:hover { text-decoration: none; }

/* Pop-up "Adicionar comando": "Salvar comando" com o fundo da sidebar e texto branco. */
html body .comando-popup-acoes button + button,
html body .comando-popup-acoes button + button:hover { background: #181D24; color: #FFFFFF; border-left-color: #181D24; }
html body .comando-popup-acoes button + button:hover { background: #10141A; }
body[data-theme="dark"] .comando-popup-acoes button + button { background: #181D24 !important; color: #FFFFFF !important; }

/* Comandos rápidos sem nenhum comando: caixa no meio com o aviso e o botão. */
.comandos-vazio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: 2.5rem auto 0; max-width: 340px; padding: 2rem 1.5rem;
  border: 1px solid var(--borda-suave); border-radius: 10px; background: #FAFAFA;
}
.comandos-vazio[hidden] { display: none !important; }
.comandos-vazio-icone { width: 40px; height: 40px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--borda-suave); color: #52525B; display: flex; align-items: center; justify-content: center; }
.comandos-vazio-icone svg { width: 18px; height: 18px; }
.comandos-vazio-texto { font-size: 0.875rem; color: #71717A; margin: 0.9rem 0 1.25rem; }
#template-drawer-footer[hidden], #template-drawer-cancel[hidden] { display: none !important; }
body[data-theme="dark"] .comandos-vazio { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .comandos-vazio-icone { background: #1F1F1F !important; border-color: #404040 !important; color: #D4D4D8 !important; }

/* Detalhes do local: Área útil com a mesma largura do Complemento (mesma
   grade da linha de cima); "m²" e "Opcional" em cinza clarinho. */
.local-campo-area { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1.3fr); column-gap: 0.75rem; }
.local-campo-area > * { grid-column: 1; }
#product-venue-size::placeholder, #product-venue-complement::placeholder { color: #A1A1AA; opacity: 1; }
/* Contratos › orçamento aberto: só o formulário (sem descrição, abas e +). */
body.vendas-com-orcamento .vendas-sub, body.vendas-com-orcamento #sales-view-tabs, body.vendas-com-orcamento #orcamento-novo-btn { display: none !important; }

/* Área útil e Coordenadas na mesma linha (coordenadas ocupam Estado + Cidade). */
.local-linha-area { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1.3fr); gap: 0.75rem; }
.local-linha-area .local-campo-area { display: block; max-width: none; grid-column: 1; }
.local-linha-area .local-campo-coordenadas { grid-column: 2 / 4; min-width: 0; }
#product-venue-coords::placeholder { color: #A1A1AA; opacity: 1; }
.local-coordenadas-status { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: #71717A; }
.local-coordenadas-status.is-erro { color: #B91C1C; }
body[data-theme="dark"] .local-coordenadas-status { color: #A1A1AA; }

/* Catálogo de serviços: "Ativo" em verde (texto e bolinha); "Rascunho" sem fundo. */
#products-grid .status-badge.status-ativo { color: #3F6A2C; }
#products-grid .status-badge.status-ativo::before { background: #67974E; }
#products-grid .status-badge.status-rascunho { background: transparent; border: none; padding-left: 0; padding-right: 0; }
body[data-theme="dark"] #products-grid .status-badge.status-ativo { color: #B7D3A8 !important; }
body[data-theme="dark"] #products-grid .status-badge.status-ativo::before { background: #8DBF73 !important; }
body[data-theme="dark"] #products-grid .status-badge.status-rascunho { background: transparent !important; }

/* Botão "Comentar" (drawers de convidado, tarefa e lead): cinza, para não
   confundir com o Salvar. */
html body .btn-primary.btn-comentar:not(#love-h-a) {
  background: #F4F4F5 !important; border: 1px solid var(--borda-suave) !important; color: #181D24 !important; box-shadow: none !important;
}
html body .btn-primary.btn-comentar:not(#love-h-a):hover { background: #ECECEE !important; border-color: #D4D4D8 !important; }
body[data-theme="dark"] .btn-primary.btn-comentar:not(#love-h-a) { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* Leads: quantidade selecionada ao lado de "Nome" no cabeçalho. */
.leads-qtd-selecionados { font-weight: 600; color: #181D24; white-space: pre; }
.tabela-lixeira-qtd:empty { display: none; }

/* Catálogo de serviços: busca ao lado do "Adicionar serviço", na mesma altura. */
.produtos-header-acoes { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.produtos-header-acoes .produtos-busca { width: 260px; margin-bottom: 0; }
.produtos-header-acoes .tabela-busca input { height: 34px; }
@media (max-width: 640px) { .produtos-header-acoes { width: 100%; } .produtos-header-acoes .produtos-busca { flex: 1 1 auto; width: auto; } }

/* Editor de site: fundo atrás do site no mesmo azul clarinho da planta de
   mesas do love.com.br (#FAFCFF), em vez do cinza. */
html body .builder-canvas-viewport:not(#love-h-a) { background: #FAFCFF; }
body[data-theme="dark"] .builder-canvas-viewport:not(#love-h-a) { background: #1c1c1c !important; }

/* Agenda: calendário com fundo branco. */
html body .agenda-mini-calendar:not(#love-h-a) { background-color: #FFFFFF; }

/* ==========================================================================
   Padrão de tamanho: botões de cabeçalho (Adicionar, Compartilhar, Nova
   tarefa…), "Filtrar por"/"Exportar" e barras de busca com a mesma
   proporção — 38px de altura, 14px de texto em peso 600, 14px de respiro
   lateral e cantos de 8px.
   ========================================================================== */
html body .b2b-header-bar .btn-primary:not(#love-h-a),
html body .b2b-header-bar .btn-secondary:not(#love-h-a),
html body #agenda-add-event-btn.btn-secondary:not(#love-h-a),
html body .btn-secondary.kanban-add-task-confirm:not(#love-h-a),
html body #builder-save:not(#love-h-a),
html body #builder-publish:not(#love-h-a),
html body .tabela-barra-btn:not(#love-h-a) {
  height: 38px; min-height: 38px; box-sizing: border-box;
  padding: 0 14px; font-size: 0.875rem; font-weight: 600; line-height: 1;
  border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
}
html body .b2b-header-bar .btn-primary svg:not(#love-h-a),
html body .b2b-header-bar .btn-secondary svg:not(#love-h-a) { width: 16px; height: 16px; flex-shrink: 0; }
html body .b2b-header-bar .field-input:not(#love-h-a),
html body .tabela-busca input:not(#love-h-a),
html body .produtos-header-acoes .tabela-busca input:not(#love-h-a) { height: 38px; font-size: 0.875rem; border-radius: 8px; box-sizing: border-box; }

/* Agenda › linha do tempo: Hoje + setas no topo e linhas das horas mais grossas. */
.agenda-dia-nav { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.agenda-dia-nav h3 { margin: 0 0 0 0.5rem; font-size: 1.0625rem; font-weight: 600; color: #18181B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-dia-seta {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: #3F3F46;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.agenda-dia-seta svg { width: 18px; height: 18px; }
.agenda-dia-seta:hover { background: #F4F4F5; color: #181D24; }
.agenda-timeline-lines-col .agenda-timeline-hour-row { border-top: 1.5px solid var(--borda-suave); }
.agenda-timeline-lines-col { border-left-width: 1.5px; border-left-color: var(--borda-suave); }
body[data-theme="dark"] .agenda-dia-nav h3 { color: #FFFFFF !important; }
body[data-theme="dark"] .agenda-dia-seta { color: #D4D4D8; }
body[data-theme="dark"] .agenda-dia-seta:hover { background: #333333; }
body[data-theme="dark"] .agenda-timeline-lines-col .agenda-timeline-hour-row { border-top-color: #404040; }

/* Agenda › pop-up de evento (no lugar do drawer). */
.agenda-evento-fundo { position: fixed; inset: 0; z-index: 150; background: rgba(24, 29, 36, 0.18); display: none; }
.agenda-evento-fundo.show { display: block; }
.agenda-evento-popup {
  position: fixed; z-index: 151; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 0.5rem 1.25rem 1.25rem; display: none;
}
.agenda-evento-popup.show { display: block; }
.agenda-evento-topo { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.agenda-evento-alca { width: 18px; height: 6px; border-top: 2px solid #A1A1AA; border-bottom: 2px solid #A1A1AA; margin-left: 2px; }
.agenda-evento-fechar { width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: #52525B; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.agenda-evento-fechar svg { width: 18px; height: 18px; }
.agenda-evento-fechar:hover { background: #F4F4F5; color: #181D24; }
.agenda-evento-form { display: flex; flex-direction: column; gap: 0.35rem; }
.agenda-evento-titulo {
  margin: 0.25rem 0 0.75rem 2.6rem; padding: 0.35rem 0; border: none; border-bottom: 1.5px solid var(--borda-suave); border-radius: 0;
  font-size: 1.375rem; color: #18181B; background: transparent; outline: none; font-family: inherit;
}
.agenda-evento-titulo:focus { border-bottom-color: #181D24; }
.agenda-evento-titulo::placeholder { color: #71717A; }
.agenda-evento-linha { display: flex; align-items: flex-start; gap: 1rem; padding: 0.3rem 0; }
.agenda-evento-icone { width: 24px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #52525B; }
.agenda-evento-icone svg { width: 20px; height: 20px; }
.agenda-evento-quando { flex: 1; min-width: 0; padding-top: 0.45rem; }
.agenda-evento-quando > p { font-size: 0.875rem; color: #18181B; margin: 0 0 0.45rem; }
.agenda-evento-horas { display: flex; align-items: center; gap: 0.5rem; }
.agenda-evento-horas .field-input { width: 120px; height: 36px; padding: 0 0.6rem; }
.agenda-evento-horas > span { color: #71717A; }
.agenda-evento-campo {
  flex: 1; min-width: 0; width: 100%; min-height: 36px; padding: 0.45rem 0.6rem; border: 1px solid transparent; border-radius: 8px;
  font-size: 0.875rem; color: #18181B; background: transparent; outline: none; font-family: inherit;
}
.agenda-evento-campo:hover { background: #F4F4F5; }
.agenda-evento-campo:focus { background: #FFFFFF; border-color: #181D24; }
.agenda-evento-campo::placeholder { color: #52525B; }
.agenda-evento-descricao { min-height: 36px; max-height: 160px; overflow-y: auto; }
.agenda-evento-descricao:empty::before { content: attr(data-placeholder); color: #52525B; }
.agenda-evento-convidados { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.agenda-evento-rodape { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.agenda-evento-rodape .btn-primary { margin-left: auto; }
.agenda-evento-rodape .agenda-event-delete-btn[hidden] { display: none; }
body[data-theme="dark"] .agenda-evento-popup { background: #1F1F1F !important; border-color: #404040 !important; }
body[data-theme="dark"] .agenda-evento-titulo, body[data-theme="dark"] .agenda-evento-campo, body[data-theme="dark"] .agenda-evento-quando > p { color: #F4F4F5 !important; }
body[data-theme="dark"] .agenda-evento-campo:hover { background: #2A2A2A; }
body[data-theme="dark"] .agenda-evento-campo:focus { background: #252525; border-color: #A1A1AA; }
body[data-theme="dark"] .agenda-evento-icone, body[data-theme="dark"] .agenda-evento-fechar { color: #D4D4D8; }

/* Topo: nome da empresa e busca no mesmo tamanho da busca do Catálogo
   ("Buscar por nome ou SKU..."): texto de 14px, lupa de 15px, 38px de
   altura e cantos de 8px; o nome da empresa em peso 600, como os botões. */
html body .topbar-account-name:not(#love-h-a) { font-size: 0.875rem; font-weight: 600; color: #181D24; max-width: 220px; }
html body .topbar-search-trigger:not(#love-h-a) {
  height: 38px; box-sizing: border-box; padding: 0 12px; gap: 0.55rem;
  font-size: 0.875rem; border: 1px solid var(--borda-suave); border-radius: 8px;
}
html body .topbar-search-trigger:not(#love-h-a) > svg { width: 15px; height: 15px; flex-shrink: 0; color: #A1A1AA; stroke-width: 2; }
body[data-theme="dark"] .topbar-account-name:not(#love-h-a) { color: #FFFFFF !important; }

/* Agenda › pop-up: horários em lista de 15 em 15 minutos + "Dia inteiro". */
.agenda-evento-horas { flex-wrap: wrap; gap: 0.75rem; }
.agenda-hora-wrap { display: inline-flex; align-items: center; gap: 0.5rem; }
.agenda-hora-wrap[hidden] { display: none; }
.agenda-hora-btn {
  width: 76px; height: 36px; padding: 0 0.6rem; text-align: center; cursor: pointer;
  border: 1px solid transparent; border-radius: 8px; background: #F4F4F5; color: #18181B;
  font-size: 0.875rem; font-family: inherit; outline: none;
}
.agenda-hora-btn:hover { border-color: #D4D4D8; }
.agenda-hora-btn:focus { border-color: #181D24; }
.agenda-hora-ate { font-size: 0.875rem; color: #52525B; }
.agenda-dia-inteiro { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; color: #18181B; cursor: pointer; }
.agenda-dia-inteiro input { width: 16px; height: 16px; accent-color: #181D24; }
.agenda-hora-lista {
  position: absolute; z-index: 400; width: 140px; max-height: 220px; overflow-y: auto; padding: 4px;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.agenda-hora-lista button {
  display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; border: none; background: none;
  border-radius: 6px; font-size: 0.875rem; color: #18181B; cursor: pointer; font-family: inherit;
}
.agenda-hora-lista button:hover { background: #F4F4F5; }
.agenda-hora-lista button.is-atual { background: #E4E4E7; font-weight: 600; }
body[data-theme="dark"] .agenda-hora-btn { background: #2A2A2A; color: #F4F4F5; }
body[data-theme="dark"] .agenda-dia-inteiro { color: #F4F4F5; }
body[data-theme="dark"] .agenda-hora-lista { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .agenda-hora-lista button { color: #F4F4F5 !important; }
body[data-theme="dark"] .agenda-hora-lista button:hover, body[data-theme="dark"] .agenda-hora-lista button.is-atual { background: #333333 !important; }

/* Sombra leve e concentrada (só para dar volume) nas caixas da Agenda
   (linha do tempo, calendário e avisos), nos cards do Catálogo, na tabela de
   Leads e nas caixas do painel (Sua agenda, Analytics, Notícias, Ajuda). */
html body .agenda-timeline-panel:not(#love-h-a),
html body .agenda-mini-calendar:not(#love-h-a),
html body .agenda-notifications-card:not(#love-h-a),
html body #products-grid .product-card:not(#love-h-a),
html body #leads-table-card:not(#love-h-a),
html body .dashboard-panel-section > .dash-card:not(#love-h-a),
html body .dashboard-help-card:not(#love-h-a) {
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
}
body[data-theme="dark"] .agenda-timeline-panel,
body[data-theme="dark"] .agenda-mini-calendar,
body[data-theme="dark"] .agenda-notifications-card,
body[data-theme="dark"] #products-grid .product-card,
body[data-theme="dark"] #leads-table-card,
body[data-theme="dark"] .dashboard-panel-section > .dash-card,
body[data-theme="dark"] .dashboard-help-card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; }

/* Com a sombra, o contorno dessas caixas fica mais claro. */
html body .agenda-timeline-panel:not(#love-h-a),
html body .agenda-mini-calendar:not(#love-h-a),
html body .agenda-notifications-card:not(#love-h-a),
html body #products-grid .product-card:not(#love-h-a),
html body #leads-table-card:not(#love-h-a),
html body .dashboard-panel-section > .dash-card:not(#love-h-a),
html body .dashboard-help-card:not(#love-h-a) { border-color: #F0F0F2 !important; }

/* Editor de site: a página editada ganha a mesma sombra leve das caixas. */
html body .builder-canvas-frame:not(#love-h-a) { box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); }
body[data-theme="dark"] .builder-canvas-frame { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; }

/* Editor de site (Site Principal e Meu Checkout) › abas ELEMENTOS / URL:
   ocupam 100% da largura no topo do painel, sem margem branca, divididas
   ao meio; a aba escolhida fica cinza-clarinha (#FAFAFA, como no Save the
   Date / Convite Digital) e a outra branca. */
html body #builder-elements-panel .builder-panel-tabs:not(#love-h-a) {
  margin: 0; padding: 0; gap: 0; border: none; border-bottom: 1px solid var(--borda-suave); border-radius: 0; background: #FFFFFF;
}
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab:not(#love-h-a) {
  flex: 1 1 50%; height: 44px; border-radius: 0; background: #FFFFFF; color: #71717A;
}
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab + .builder-panel-tab:not(#love-h-a) { border-left: 1px solid var(--borda-suave); }
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab.active:not(#love-h-a),
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab.active:not(#love-h-a):hover { background: #FAFAFA; color: #181D24; }
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab:not(#love-h-a):hover { color: #181D24; }
body[data-theme="dark"] #builder-elements-panel .builder-panel-tabs { background: #1F1F1F !important; border-bottom-color: #404040 !important; }
body[data-theme="dark"] #builder-elements-panel .builder-panel-tabs .builder-panel-tab { background: #1F1F1F !important; color: #A1A1AA !important; border-color: #404040 !important; }
body[data-theme="dark"] #builder-elements-panel .builder-panel-tabs .builder-panel-tab.active { background: #2A2A2A !important; color: #FFFFFF !important; }

/* Editor de site: sombra um pouco mais forte em volta do site editado,
   para ele se destacar do fundo. */
html body .builder-canvas-frame:not(#love-h-a) { box-shadow: 0 2px 6px rgba(16, 24, 40, 0.10), 0 8px 24px rgba(16, 24, 40, 0.08); }
body[data-theme="dark"] .builder-canvas-frame { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35) !important; }

/* Editor de site › painel da esquerda sem caixa alta (igual ao love.com.br):
   aba "Elementos" e títulos dos grupos (Básicos, Avançado…) em texto normal.
   A aba "URL" continua em caixa alta. */
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab[data-panel-tab="elementos"]:not(#love-h-a),
html body #builder-elements-panel .builder-el-group-title:not(#love-h-a) {
  text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 600;
}
html body #builder-elements-panel .builder-el-group-title:not(#love-h-a) { color: #71717A; }
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab.active[data-panel-tab="elementos"]:not(#love-h-a) { color: #181D24; }

/* Aba "Ajustes" (antes "URL"): mesmo texto da aba Elementos, sem caixa alta. */
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab[data-panel-tab="estilo"]:not(#love-h-a) {
  text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 600;
}
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab.active[data-panel-tab="estilo"]:not(#love-h-a) { color: #181D24; }

/* Editor de site › Ajustes › URL do site. */
.url-slug-field--fixo { background: #F4F4F5; }
.url-slug-field--fixo .url-slug-input { background: transparent; color: #52525B; cursor: default; }
.url-slug-acao { margin-top: 0.6rem; height: 34px; padding: 0 0.9rem; font-size: 0.8125rem; }
#site-slug-aviso { margin: 0 0 0.4rem; }
body[data-theme="dark"] .url-slug-field--fixo { background: #2A2A2A !important; }

/* Olhinho para ver a senha (js/ver-senha.js). */
.campo-com-ver-senha { position: relative; }
html body .campo-com-ver-senha > input.campo-senha-com-olho:not(#love-h-a) { padding-right: 2.75rem; }
.ver-senha-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: #A1A1AA;
}
.ver-senha-btn:hover { color: #71717A; }
.ver-senha-btn svg { width: 18px; height: 18px; }
.ver-senha-btn svg[hidden] { display: none; }

/* ==========================================================================
   Configurações igual ao love.com.br (Configurações › Minha conta):
   abas soltas logo abaixo do cabeçalho (texto 13px, sublinhado escuro na
   ativa, linha fina embaixo) e o conteúdo em cards separados, mais estreitos
   (até 768px) — os campos acompanham a largura menor.
   ========================================================================== */
html body .settings-shell:not(#love-h-a) { background: transparent; border: none; border-radius: 0; box-shadow: none; }
html body .settings-shell > .category-tabs-bar:not(#love-h-a) {
  margin: 0 0 1.5rem; padding: 0; gap: 1.5rem; border-bottom: 1px solid var(--borda-suave);
}
html body .settings-shell > .category-tabs-bar .category-tab:not(#love-h-a) {
  font-size: 0.8125rem; font-weight: 600; line-height: 1.25rem; color: #71717A;
  padding: 0 0 0.625rem; border-bottom: 2px solid transparent; border-radius: 0;
}
html body .settings-shell > .category-tabs-bar .category-tab:not(#love-h-a):hover { color: #3F3F46; }
html body .settings-shell > .category-tabs-bar .category-tab.active:not(#love-h-a) { color: #181D24; font-weight: 700; border-bottom-color: #181D24; }
html body .settings-shell [data-settings-panel]:not(#love-h-a) { padding: 0; max-width: 48rem; display: flex; flex-direction: column; gap: 1.5rem; }
html body .settings-shell [data-settings-panel] > .dash-card:not(#love-h-a) {
  background: #FFFFFF; border: 1px solid var(--borda-suave) !important; border-radius: 10px; padding: 1.5rem; margin: 0;
}
html body .settings-shell [data-settings-panel] > .dash-card + .dash-card:not(#love-h-a) { border-top: 1px solid var(--borda-suave) !important; padding-top: 1.5rem; margin-top: 0; }
html body .settings-shell .settings-secao-titulo:not(#love-h-a) { font-size: 1rem; font-weight: 700; color: #18181B; }
body[data-theme="dark"] .settings-shell > .category-tabs-bar { border-bottom-color: #404040 !important; }
body[data-theme="dark"] .settings-shell > .category-tabs-bar .category-tab.active { color: #FFFFFF !important; border-bottom-color: #FFFFFF !important; }
body[data-theme="dark"] .settings-shell [data-settings-panel] > .dash-card { background: #1F1F1F !important; border-color: #404040 !important; }

/* Caixas de texto sem a alça de arrastar; crescem conforme o texto. */
html body textarea:not(#love-h-a) { resize: none !important; field-sizing: content; overflow: hidden; }

/* Configurações › Informações: "Salvar alterações" no fim do formulário,
   igual ao do Informações do love.com.br. */
html body button.informacoes-salvar-rodape:not(#love-h-a) {
  width: 100%; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda-suave); border-radius: 8px; background: #FAFAFA; color: #181D24;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color .15s, box-shadow .15s;
}
html body button.informacoes-salvar-rodape:not(#love-h-a):hover { border-color: #181D24; box-shadow: 0 3px 10px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05); }
body[data-theme="dark"] button.informacoes-salvar-rodape { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* Configurações › Minha Empresa: sem a linha acima de "Endereço comercial";
   card escondido (Portfólio) não aparece. */
html body .form-section-header.form-section-header--sem-linha:not(#love-h-a) { border-top: none; padding-top: 0; }
html body .settings-shell [data-settings-panel] > .dash-card[hidden]:not(#love-h-a) { display: none !important; }

/* Pop-up da assinatura: "Voltar" cinza, na cor do cabeçalho. */
html body .assinatura-voltar-btn:not(#love-h-a) { background: #FAFAFA; border: 1px solid var(--borda-suave); color: #181D24; box-shadow: none; }
html body .assinatura-voltar-btn:not(#love-h-a):hover { background: #FAFAFA; border-color: #181D24; color: #181D24; }
body[data-theme="dark"] .assinatura-voltar-btn { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
.settings-switch-desc:empty { display: none; }

/* Configurações › Segurança › Verificação de conta: caixa ao lado. */
html body .settings-shell [data-settings-panel="seguranca"].verificacao-aberta:not(#love-h-a) {
  max-width: 1160px; display: grid; grid-template-columns: minmax(0, 48rem) minmax(0, 1fr); column-gap: 1.5rem; row-gap: 1.5rem; align-items: start;
}
.verificacao-aberta > * { grid-column: 1; }
.verificacao-aberta > .settings-secao-titulo { grid-column: 1 / -1; }
.verificacao-aberta > #verificacao-conta-card { grid-column: 2; grid-row: 2 / span 3; }
@media (max-width: 1180px) {
  html body .settings-shell [data-settings-panel="seguranca"].verificacao-aberta:not(#love-h-a) { display: flex; max-width: 48rem; }
}
html body .settings-shell [data-settings-panel] > #verificacao-conta-card[hidden]:not(#love-h-a) { display: none !important; }
.verif-card { display: flex; flex-direction: column; gap: 0.9rem; }
.verif-intro { font-size: 0.875rem; color: #3F3F46; line-height: 1.5; margin: 0; padding: 0.75rem 0.9rem; background: #FAFAFA; border: 1px solid var(--borda-suave); border-radius: 8px; }
.verif-doc { display: flex; flex-direction: column; gap: 0.35rem; }
.verif-doc-rotulo { font-size: 0.8125rem; font-weight: 600; color: #18181B; margin: 0; }
.verif-doc-opcional { font-weight: 400; color: #A1A1AA; }
.verif-doc-botao {
  display: flex; align-items: center; gap: 0.6rem; height: 42px; padding: 0 0.85rem; cursor: pointer;
  border: 1px dashed #D4D4D8; border-radius: 8px; background: #FFFFFF; color: #52525B; font-size: 0.8125rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.verif-doc-botao svg { width: 16px; height: 16px; flex-shrink: 0; }
.verif-doc-botao:hover { border-color: #181D24; color: #181D24; }
.verif-doc.tem-arquivo .verif-doc-botao { border-style: solid; color: #181D24; }
.verif-doc-botao [data-verif-nome] { overflow: hidden; text-overflow: ellipsis; }
.verif-nota { font-size: 0.75rem; color: #A1A1AA; margin: 0; }
.verif-erro { font-size: 0.8125rem; color: #DC2626; margin: 0; }
.verif-acoes { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 0.25rem; }
body[data-theme="dark"] .verif-intro { background: #252525 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .verif-doc-botao { background: #1F1F1F !important; border-color: #404040 !important; color: #D4D4D8 !important; }

/* ==========================================================================
   DESIGN SYSTEM v2 — refinamento "anti-vibe-code" (diretriz global)
   1. Contornos com transparência (preto 6% / branco 8% no escuro) + anel
      quase invisível, no lugar do cinza #E4E4E7 chapado.
   2. Cantos em hierarquia: 16px modais · 12px cards/painéis/tabelas ·
      8px campos e botões · 6px etiquetas.
   3. Sombras difusas em camadas (nada de shadow-md seco); hover aprofunda.
   4. Títulos com tracking-tight; microtextos 11px; SKU e valores em mono.
   5. Switch preto neutro (sem o azul de biblioteca).
   ========================================================================== */
:root {
  --ds-borda: rgba(0, 0, 0, 0.06);
  --ds-borda-campo: rgba(0, 0, 0, 0.10);
  --ds-divisoria: rgba(0, 0, 0, 0.04);
  --ds-anel: 0 0 0 1px rgba(0, 0, 0, 0.03);
  --ds-sombra: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 16px -2px rgba(0, 0, 0, 0.05);
  --ds-sombra-hover: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
  --border-card: var(--ds-borda);
  --border-light: var(--ds-divisoria);
}
body[data-theme="dark"] {
  --ds-borda: rgba(255, 255, 255, 0.08);
  --ds-borda-campo: rgba(255, 255, 255, 0.12);
  --ds-divisoria: rgba(255, 255, 255, 0.04);
  --ds-anel: 0 0 0 1px rgba(255, 255, 255, 0.04);
  --ds-sombra: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 16px -2px rgba(0, 0, 0, 0.35);
  --ds-sombra-hover: 0 4px 20px -2px rgba(0, 0, 0, 0.45);
}

/* 1–3. Cards, painéis e tabelas: 12px, contorno transparente, anel + sombra difusa. */
html body .dash-card:not(#love-h-a),
html body .product-card:not(#love-h-a),
html body .settings-shell [data-settings-panel] > .dash-card:not(#love-h-a),
html body .agenda-timeline-panel:not(#love-h-a),
html body .agenda-mini-calendar:not(#love-h-a),
html body .agenda-notifications-card:not(#love-h-a),
html body .dashboard-help-card:not(#love-h-a),
html body .comandos-vazio:not(#love-h-a),
html body .nova-empresa-card:not(#love-h-a),
html body .product-pacote-item:not(#love-h-a) {
  border: 1px solid var(--ds-borda) !important;
  border-radius: 12px;
  box-shadow: var(--ds-anel), var(--ds-sombra) !important;
}
/* Cards clicáveis: o hover aprofunda a sombra (sem zoom). */
html body #products-grid .product-card:not(#love-h-a) { transition: box-shadow .15s ease-out; }
html body #products-grid .product-card:not(#love-h-a):hover { box-shadow: var(--ds-anel), var(--ds-sombra-hover) !important; }

/* Modais e pop-ups principais: 16px. */
html body .modal-card:not(#love-h-a),
html body .agenda-evento-popup:not(#love-h-a),
html body .modal-card.comando-popup:not(#love-h-a) { border-radius: 16px; border: 1px solid var(--ds-borda); }

/* Menus e listas flutuantes: contorno transparente. */
html body .conv-menu:not(#love-h-a),
html body .agenda-hora-lista:not(#love-h-a),
html body .cidade-sugestoes:not(#love-h-a),
html body .topbar-dropdown:not(#love-h-a),
html body .tabela-filtro-menu:not(#love-h-a) { border-color: var(--ds-borda); }

/* Campos: 8px, contorno um pouco mais forte para dar leitura; foco escurece. */
html body .field-input:not(#love-h-a),
html body .field-select:not(#love-h-a),
html body .field-textarea:not(#love-h-a),
html body .tabela-busca input:not(#love-h-a),
html body .category-select-trigger:not(#love-h-a) { border-color: var(--ds-borda-campo); border-radius: 8px; }
html body .field-input:not(#love-h-a):focus,
html body .field-select:not(#love-h-a):focus,
html body .field-textarea:not(#love-h-a):focus,
html body .tabela-busca input:not(#love-h-a):focus { border-color: #181D24; }

/* Tabelas e listas divididas: divisórias bem suaves. */
html body .leads-table td:not(#love-h-a),
html body .leads-table th:not(#love-h-a) { border-color: var(--ds-divisoria) !important; font-variant-numeric: tabular-nums; }

/* Etiquetas de status: 6px (nunca pílula). */
html body .status-badge:not(#love-h-a) { border-radius: 6px; }

/* 4. Tipografia: títulos com tracking-tight; microtextos 11px. */
html body h1:not(#love-h-a), html body h2:not(#love-h-a), html body h3:not(#love-h-a),
html body .settings-secao-titulo:not(#love-h-a),
html body .dashboard-help-title:not(#love-h-a),
html body .product-title-label:not(#love-h-a),
html body .comando-popup-titulo:not(#love-h-a),
html body .agenda-dia-nav h3:not(#love-h-a) { letter-spacing: -0.025em; }
html body .field-hint:not(#love-h-a),
html body .profile-logo-hint:not(#love-h-a),
html body .inspector-hint:not(#love-h-a) { font-size: 11px; font-weight: 500; color: #A1A1AA; }
body[data-theme="dark"] .field-hint, body[data-theme="dark"] .profile-logo-hint, body[data-theme="dark"] .inspector-hint { color: #71717A !important; }
/* SKU, códigos e valores em mono (alinhamento tabular). */
html body .produto-sku:not(#love-h-a),
html body #products-grid .product-card .text-base.font-bold:not(#love-h-a),
html body #proposal-total:not(#love-h-a),
html body .proposal-cell-total:not(#love-h-a),
html body .dash-analytics-metric-value:not(#love-h-a),
html body [data-item-code]:not(#love-h-a) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }

/* 5. Switch preto neutro (o do painel do editor continua o dele). */
html body .settings-switch input:checked ~ .settings-switch-track:not(#love-h-a) { background: #18181B; border-color: #18181B; }
body[data-theme="dark"] .settings-switch input:checked ~ .settings-switch-track { background: #FAFAFA !important; }
body[data-theme="dark"] .settings-switch input:checked ~ .settings-switch-track::before { background: #18181B !important; }
/* Switch do painel do Editor de site continua azul clarinho. */
html body #builder-elements-panel .settings-switch input:checked ~ .settings-switch-track:not(#love-h-a) { background: #ebf4ff; border-color: #ebf4ff; }

/* Bolinha de recolher/expandir o menu: invisível; aparece só com o mouse
   no meio da borda da sidebar (ou com foco pelo teclado). */
html body .sidebar-edge-toggle:not(#love-h-a) { opacity: 0; transition: opacity .15s ease; }
html body .sidebar-edge-toggle:not(#love-h-a)::after { content: ''; position: absolute; inset: -16px -10px; }
html body .sidebar-edge-toggle:not(#love-h-a):hover,
html body .sidebar-edge-toggle:not(#love-h-a):focus-visible { opacity: 1; }
@media (hover: none) { html body .sidebar-edge-toggle:not(#love-h-a) { opacity: 1; } }

/* Menu que abre ao passar o mouse (computador): sem a bolinha de recolher;
   aberto, fica por cima do conteúdo (a página não anda) com sombra suave. */
body.sidebar-hover-mode .sidebar-edge-toggle { display: none !important; }
body.sidebar-hover-mode .b2b-main { margin-left: var(--sidebar-collapsed-width); }
body.sidebar-flutuando .b2b-sidebar { box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 8px 0 32px -8px rgba(16, 24, 40, 0.25); }

/* Painel › atalhos (Cobrar, Orçamento, Financeiro, Construtor): os quatro
   com a mesma largura, ocupando a linha toda. */
html body .dashboard-quick-actions:not(#love-h-a) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
html body .dashboard-quick-actions .dashboard-quick-action-btn:not(#love-h-a) { width: 100%; justify-content: center; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .dashboard-quick-actions:not(#love-h-a) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
/* Painel: sem a data no canto superior direito. */
html body .greeting-date-side:not(#love-h-a) { display: none !important; }

/* Títulos em Albert Sans: o "Olá, …" do painel e os títulos de cabeçalho
   das páginas (Leads, Produtos, Gestão de compromissos, Vendas…). */
html body .greeting-title:not(#love-h-a),
html body .b2b-header-bar h1:not(#love-h-a),
html body .b2b-header-bar h2:not(#love-h-a) {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Fonte do Hub: Albert Sans em tudo (títulos, textos, subtítulos dos menus,
   botões, campos e buscas, valores dos cards). Fica de fora o site do
   cliente (canvas do Construtor e a página pública), que usa as fontes
   escolhidas no editor, e o SKU/código, que continua em mono.
   ========================================================================== */
html body.font-sans:not([data-page="site-preview"]) { font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
html body:not([data-page="site-preview"]) :is(button, input, select, textarea, p, span, a, label, h1, h2, h3, h4, h5, h6, li, td, th, div, strong, small, .font-sans):not(.builder-canvas):not(.builder-canvas *):not(.produto-sku):not([data-item-code]) {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Valores (ex.: "R$ 50 / pessoa" nos cards de Produtos, totais, Analytics) também em Albert Sans. */
html body #products-grid .product-card .text-base.font-bold:not(#love-h-a),
html body #proposal-total:not(#love-h-a),
html body .proposal-cell-total:not(#love-h-a),
html body .dash-analytics-metric-value:not(#love-h-a) {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -0.01em;
}

/* Meus produtos: "Ativo" num verde mais claro e vivo (próprio, fora da
   paleta padrão do Tailwind). */
html body #products-grid .status-badge.status-ativo:not(#love-h-a) { color: #1E9E5E; }
html body #products-grid .status-badge.status-ativo:not(#love-h-a)::before { background: #2FCB7E; box-shadow: 0 0 0 3px rgba(47, 203, 126, 0.16); }
body[data-theme="dark"] #products-grid .status-badge.status-ativo { color: #5FE0A0 !important; }
body[data-theme="dark"] #products-grid .status-badge.status-ativo::before { background: #5FE0A0 !important; }

/* Cabeçalhos (só eles): "Olá, …" do painel e o título de cada página em
   EB Garamond Bold 700. O resto continua em Albert Sans. */
html body .greeting-title:not(#love-h-a),
html body .b2b-header-bar h1:not(#love-h-a),
html body .b2b-header-bar h2:not(#love-h-a) {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}

/* Cabeçalhos (Olá do painel e título de cada página): Figtree ExtraBold 800,
   letras um pouco mais juntas (bloco coeso) e linha compacta. */
html body .greeting-title:not(#love-h-a),
html body .b2b-header-bar h1:not(#love-h-a),
html body .b2b-header-bar h2:not(#love-h-a) {
  font-family: 'Figtree', 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

/* Cabeçalhos das páginas ("Olá, …" e o título de cada menu) e títulos das
   seções do painel (Sua agenda, Precisa de ajuda?, Analytics, Notícias e
   eventos) em Hanken Grotesk. O resto continua em Plus Jakarta Sans. */
html body .greeting-title:not(#love-h-a),
html body .b2b-header-bar h1:not(#love-h-a),
html body .b2b-header-bar h2:not(#love-h-a) {
  font-family: 'Hanken Grotesk', 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.12;
}
html body .dashboard-panel-header .dashboard-help-title:not(#love-h-a),
html body .dashboard-help-header .dashboard-help-title:not(#love-h-a) {
  font-family: 'Hanken Grotesk', 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Painel › atalhos (Cobrar, Orçamento, Financeiro, Construtor): degradê
   interno sutil (branco em cima → cinza-claro embaixo) com um brilho fino
   no topo, para não ficarem chapados. */
html body .btn-secondary.dashboard-quick-action-btn:not(#love-h-a) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.04);
}
html body .btn-secondary.dashboard-quick-action-btn:not(#love-h-a):hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #EDEDEF 100%);
}
body[data-theme="dark"] .btn-secondary.dashboard-quick-action-btn { background: linear-gradient(180deg, #2E2E2E 0%, #232323 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; }

/* Painel: "Boas-vindas, …" em Clash Display Bold (Fontshare). */
html body .greeting-title:not(#love-h-a) {
  font-family: 'Clash Display', 'Hanken Grotesk', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Painel: "Boas-vindas, …" volta para Hanken Grotesk (como os cabeçalhos). */
html body .greeting-title:not(#love-h-a) {
  font-family: 'Hanken Grotesk', 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
}

/* Painel: "Boas-vindas, …" em Plus Jakarta Sans Bold 700. */
html body .greeting-title:not(#love-h-a) {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* Painel › carrossel da direita: sem sombra e sem contorno; a imagem com os
   quatro cantos arredondados; a faixa das bolinhas totalmente transparente.
   A altura acompanha o bloco Saldo + atalhos (js/dashboard.js), para
   "Analytics" começar na mesma altura de "Sua agenda". */
html body .dash-card.dash-ads-card:not(#love-h-a) {
  box-shadow: none !important; border: none !important; background: transparent !important;
  border-radius: 0; overflow: visible; display: flex; flex-direction: column;
}
html body .dash-ads-carousel:not(#love-h-a) { border-radius: 12px; overflow: hidden; }
html body .dash-ads-card.altura-alinhada .dash-ads-carousel:not(#love-h-a) { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
html body .dash-ads-dots:not(#love-h-a) { background: transparent !important; flex-shrink: 0; }
body[data-theme="dark"] .dash-card.dash-ads-card { background: transparent !important; box-shadow: none !important; }

/* Painel › Saldo/Faturamento › período (botão no canto + drop-down). */
.wallet-periodo { position: absolute; top: 1.15rem; right: 3.6rem; z-index: 20; }
.wallet-periodo-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; height: 34px; padding: 0 0.75rem;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; background: #FFFFFF; color: #18181B;
  font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.wallet-periodo-btn svg { width: 15px; height: 15px; }
.wallet-periodo-btn:hover, .wallet-periodo-btn[aria-expanded="true"] { border-color: #181D24; }
.wallet-periodo-menu {
  position: absolute; top: calc(100% + 6px); right: 0; width: 640px; max-width: calc(100vw - 32px);
  background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.wallet-periodo-menu[hidden] { display: none; }
.wallet-periodo-corpo { display: flex; min-height: 0; }
.wallet-periodo-atalhos { flex: 0 0 82px; padding: 0.85rem 0.5rem; border-right: 1px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 0.2rem; }
.wallet-periodo-atalhos p { font-size: 0.6875rem; color: #A1A1AA; margin: 0 0 0.25rem 0.5rem; }
.wallet-periodo-atalhos button { text-align: left; padding: 0.4rem 0.5rem; border: none; background: none; border-radius: 6px; font-size: 0.8125rem; color: #18181B; cursor: pointer; font-family: inherit; }
.wallet-periodo-atalhos button:hover, .wallet-periodo-atalhos button.is-ativo { background: #F4F4F5; font-weight: 600; }
.wallet-periodo-cal { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 0.85rem 1rem 0.75rem; overflow-x: auto; }
.wp-nav { position: absolute; top: 0.75rem; width: 28px; height: 28px; border: none; background: none; border-radius: 6px; cursor: pointer; color: #52525B; display: inline-flex; align-items: center; justify-content: center; }
.wp-nav svg { width: 16px; height: 16px; }
.wp-nav:hover { background: #F4F4F5; color: #181D24; }
.wp-nav-ant { left: 0.75rem; }
.wp-nav-prox { right: 0.75rem; }
.wp-mes-titulo { text-align: center; font-size: 0.8125rem; font-weight: 700; color: #18181B; margin: 0.3rem 0 0.6rem; }
.wp-grade { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.wp-sem { font-size: 0.6875rem; color: #A1A1AA; text-align: center; padding-bottom: 0.3rem; }
.wp-dia { height: 32px; border: none; background: none; font-size: 0.8125rem; color: #18181B; cursor: pointer; font-family: inherit; border-radius: 6px; }
.wp-dia:hover:not(:disabled) { background: #F4F4F5; }
.wp-dia.is-fora { color: #A1A1AA; }
.wp-dia.is-futuro { color: #D4D4D8; cursor: default; }
.wp-dia.is-hoje { font-weight: 700; }
.wp-dia.is-dentro { background: #F4F4F5; border-radius: 0; }
.wp-dia.is-ponta, .wp-dia.is-ponta:hover { background: #181D24; color: #FFFFFF; border-radius: 6px; }
.wallet-periodo-rodape { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.65rem 1rem; border-top: 1px solid rgba(0,0,0,0.06); }
.wallet-periodo-cancelar { height: 32px; padding: 0 0.75rem; border: none; background: none; font-size: 0.8125rem; font-weight: 600; color: #3F3F46; cursor: pointer; font-family: inherit; border-radius: 6px; }
.wallet-periodo-cancelar:hover { background: #F4F4F5; }
.wallet-periodo-aplicar { height: 32px; padding: 0 0.9rem; border: none; background: #181D24; color: #FFFFFF; font-size: 0.8125rem; font-weight: 700; cursor: pointer; font-family: inherit; border-radius: 6px; }
.wallet-periodo-aplicar:hover { background: #262D36; }
@media (max-width: 640px) {
  .wallet-periodo { position: static; margin-bottom: 0.75rem; }
  .wallet-periodo-menu { left: 0; right: auto; }
  .wallet-periodo-cal { grid-template-columns: 1fr; }
  .wallet-periodo-cal .wp-mes + .wp-mes { display: none; }
}
body[data-theme="dark"] .wallet-periodo-btn, body[data-theme="dark"] .wallet-periodo-menu { background: #252525 !important; border-color: #404040 !important; color: #F4F4F5 !important; }
body[data-theme="dark"] .wp-mes-titulo, body[data-theme="dark"] .wp-dia, body[data-theme="dark"] .wallet-periodo-atalhos button { color: #F4F4F5 !important; }
body[data-theme="dark"] .wp-dia.is-dentro, body[data-theme="dark"] .wallet-periodo-atalhos button.is-ativo { background: #333333 !important; }
body[data-theme="dark"] .wp-dia.is-ponta { background: #FAFAFA !important; color: #18181B !important; }
html body .dash-card.wallet-card:not(#love-h-a) { overflow: visible; z-index: 5; }

/* Financeiro › Acesso rápido (no lugar de "Valor em aberto"). */
.finance-acesso-card { padding: 1rem 1.25rem 0.5rem; }
.finance-acesso-lista { display: flex; flex-direction: column; }
.finance-acesso-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.55rem 0.15rem; border: none; background: none;
  border-bottom: 1px solid rgba(0,0,0,0.06); cursor: pointer; text-align: left; font-family: inherit; color: #18181B;
}
.finance-acesso-item:last-child { border-bottom: none; }
.finance-acesso-icone { width: 20px; height: 20px; display: inline-flex; color: #3F3F46; flex-shrink: 0; }
.finance-acesso-icone svg { width: 20px; height: 20px; }
.finance-acesso-nome { flex: 1; font-size: 0.875rem; font-weight: 600; }
.finance-acesso-seta { width: 16px; height: 16px; color: #A1A1AA; flex-shrink: 0; }
.finance-acesso-item:hover .finance-acesso-seta, .finance-acesso-item.is-ativo .finance-acesso-seta { color: #181D24; }
.finance-acesso-item.is-ativo .finance-acesso-nome { color: #181D24; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.finance-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-valor.is-entrada { color: #1E9E5E; }
.finance-valor.is-saida { color: #3F3F46; }
body[data-theme="dark"] .finance-acesso-item { color: #F4F4F5; border-bottom-color: #333333; }
body[data-theme="dark"] .finance-acesso-icone { color: #D4D4D8; }

/* Período do Faturamento fora do card: logo acima dele, no canto direito
   (na linha do "Boas-vindas"), sem mudar o espaço do título. */
@media (min-width: 641px) {
  html body .wallet-card .wallet-periodo:not(#love-h-a) { top: auto; bottom: calc(100% + 0.75rem); right: 0; }
}

/* Painel: cabeçalhos das seções (Sua agenda, Analytics, Notícias, Ajuda) com
   a mesma altura — o botão do calendário do Analytics não deixa o dele mais
   alto —, para as caixas de baixo começarem na mesma linha. */
html body .dashboard-panel-section > .dashboard-panel-header:not(#love-h-a),
html body .dashboard-help-section > .dashboard-help-header:not(#love-h-a) { height: 32px; min-height: 32px; margin-bottom: 0.75rem; }
html body .dashboard-panel-header .dash-analytics-period-btn:not(#love-h-a) { width: 32px; height: 32px; }
html body .dash-analytics-header > div:first-child:not(#love-h-a) { display: flex; align-items: center; }

/* Financeiro › Extrato / Saques / Notas fiscais: sem o rótulo, os três
   dividindo a altura do card em partes iguais. */
html body .finance-acesso-card:not(#love-h-a) { display: flex; flex-direction: column; padding: 0.35rem 1.25rem; }
html body .finance-acesso-lista:not(#love-h-a) { flex: 1; display: flex; flex-direction: column; }
html body .finance-acesso-item:not(#love-h-a) { flex: 1 1 0; min-height: 40px; }
.withdrawal-pix-sugestao { font-size: 11px; color: #71717A; margin: 0.4rem 0 0; }

/* Tudo em Plus Jakarta Sans: títulos de cabeçalho das páginas, títulos das
   seções do painel (Sua agenda, Precisa de ajuda?, Analytics, Notícias e
   eventos), cards de ajuda e botões. */
html body .greeting-title:not(#love-h-a),
html body .b2b-header-bar h1:not(#love-h-a),
html body .b2b-header-bar h2:not(#love-h-a),
html body .dashboard-panel-header .dashboard-help-title:not(#love-h-a),
html body .dashboard-help-header .dashboard-help-title:not(#love-h-a),
html body .dashboard-help-card-title:not(#love-h-a),
html body:not([data-page="site-preview"]) button:not(.builder-canvas *):not(#love-h-a),
html body:not([data-page="site-preview"]) .btn-primary:not(.builder-canvas *):not(#love-h-a),
html body:not([data-page="site-preview"]) .btn-secondary:not(.builder-canvas *):not(#love-h-a) {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
html body .b2b-header-bar h1:not(#love-h-a),
html body .b2b-header-bar h2:not(#love-h-a) { font-weight: 700 !important; letter-spacing: -0.02em; }

/* Fundo das páginas do Hub #F4F6F7; topo (nome da empresa e busca) branco. */
:root { --bg-dashboard: #F4F6F7; }
body[data-theme="dark"] { --bg-dashboard: #252525; }
html body:not([data-theme="dark"]) .b2b-topbar:not(#love-h-a) { background: #FFFFFF; }

/* Faixa do título de cada página (Leads, Meus produtos, Vendas…) na mesma
   cor cinza do cabeçalho das tabelas (ID, Nome, Tipo do evento…). */
html body:not([data-theme="dark"]) .b2b-header-bar:not(#love-h-a) { background: #F7F7F8; }
/* Botão do período (Últimos 30 dias): texto sem negrito. */
html body .wallet-periodo-btn:not(#love-h-a) { font-weight: 400; }

/* Faixa do título de cada página unificada com o conteúdo: mesma cor do
   fundo (#F4F6F7) e sem a linha de baixo. */
html body:not([data-theme="dark"]) .b2b-header-bar:not(#love-h-a) { background: var(--bg-dashboard); border-bottom: none; }
body[data-theme="dark"] .b2b-header-bar { background: var(--bg-dashboard) !important; border-bottom: none !important; }

/* Subtítulo da página bem perto do título e mais longe das abas abaixo
   (ex.: Meus produtos, Construtor de Site). */
html body .b2b-header-bar + p:not(#love-h-a) { margin-top: -1.15rem; margin-bottom: 1.75rem; }

/* Construtor de Site: a barra do editor usa a mesma margem lateral da
   página, para "Publicar" alinhar com "Ver meu site" do cabeçalho. */
html body .builder-wrap:not(#love-h-a) {
  margin-left: calc(-1 * var(--b2b-content-pad-x)); margin-right: calc(-1 * var(--b2b-content-pad-x));
  width: calc(100% + 2 * var(--b2b-content-pad-x));
}
html body .builder-wrap > .builder-toolbar:not(#love-h-a) { padding-left: var(--b2b-content-pad-x); padding-right: var(--b2b-content-pad-x); }

/* Rodapé branco, como o topo. */
html body:not([data-theme="dark"]) .b2b-footer:not(#love-h-a) { background: #FFFFFF; }

/* Subtítulo colado no título (~4px), em todas as telas do Hub com subtítulo
   (Meus produtos, Construtor de Site, Vendas, Funções, Termos/Privacidade).
   Conta: o h2 (20px × 1,12 = 22,4px) fica centralizado na faixa de 71,8px
   (0,9rem de padding + 43px de conteúdo), sobrando 0,9rem + 10,3px embaixo
   dele, mais o 1,25rem de margem da faixa → sobe tudo isso e deixa 4px.
   O espaço do subtítulo até as abas/tabela (1,75rem) continua igual. */
html body .b2b-header-bar + p:not(#love-h-a) {
  margin-top: calc(4px - 0.9rem - 10.3px - 1.25rem);
  margin-bottom: 1.75rem;
  position: relative;
}

/* Albert Sans: botão de período "Últimos 30 dias" da home e todas as barras
   de busca (topo, tabelas, Meus produtos, categorias, conversas, ⌘K). */
html body .wallet-periodo-btn:not(#love-h-a),
html body .wallet-periodo-btn *:not(#love-h-a),
html body .topbar-search-trigger:not(#love-h-a),
html body .topbar-search-trigger *:not(#love-h-a),
html body .tabela-busca input:not(#love-h-a),
html body #products-search:not(#love-h-a),
html body #product-category-search:not(#love-h-a),
html body #chat-search-input:not(#love-h-a),
html body #command-input:not(#love-h-a),
html body input[type="search"]:not(#love-h-a) {
  font-family: 'Albert Sans', 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Sombra suave (igual à caixa "Saldos" de referência) em todas as caixas e
   tabelas do Hub: cards, caixas de tabela, cards de ajuda, produtos, planos,
   verificação. Fica de fora o carrossel de anúncios e as caixas "chapadas"
   da Central de ajuda. */
html body :is(.dash-card, .dashboard-help-card, .product-card, .plan-card, .verif-card, .nova-empresa-card,
  .contratos-clientes-list-card, .agenda-notifications-card, .lead-import-card, .finance-stat-card, .wallet-card,
  .dash-analytics-card, .dash-news-card):not(.dash-ads-card):not(.guias-flat-card):not(#love-h-a) {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.05) !important;
}
body[data-theme="dark"] :is(.dash-card, .dashboard-help-card, .product-card, .plan-card, .verif-card, .nova-empresa-card,
  .contratos-clientes-list-card, .agenda-notifications-card, .lead-import-card, .finance-stat-card, .wallet-card,
  .dash-analytics-card, .dash-news-card):not(.dash-ads-card):not(.guias-flat-card) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Construtor de Site: barra de cima do editor (Site Principal, aparelhos,
   Salvar/Publicar) branca, e a aba escolhida do painel (Elementos/Ajustes)
   no azul clarinho do Hub (#EBF4FF) no lugar do cinza. */
html body .builder-wrap > .builder-toolbar:not(#love-h-a) { background: #FFFFFF; }
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab.active:not(#love-h-a),
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab.active:not(#love-h-a):hover { background: #EBF4FF; color: #183b54; }

/* Gestão de Trabalho › Agenda: "Compartilhar agenda" dentro da caixa do
   cronograma, à direita, com o visual de Filtrar por / Exportar. */
html body .agenda-timeline-header #share-board-btn:not(#love-h-a) { flex-shrink: 0; margin-left: auto; }
html body .agenda-timeline-header #share-board-btn svg:not(#love-h-a) { width: 16px; height: 16px; flex-shrink: 0; }

/* Gestão de Trabalho › Tarefas: listas (A iniciar, Em andamento, Concluído)
   brancas, com a borda e a sombra suave das caixas; as tarefas dentro ganham
   borda fina para não sumirem no branco. Lista com cor escolhida mantém a cor.
   "Adicionar nova lista" em cinza. */
html body:not([data-theme="dark"]) .kanban-list:not(#love-h-a) {
  background: #FFFFFF; border: 1px solid var(--borda-suave);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.05);
}
html body:not([data-theme="dark"]) .kanban-list .kanban-task:not(#love-h-a) { border: 1px solid var(--borda-suave); }
html body:not([data-theme="dark"]) .kanban-add-list-btn:not(#love-h-a) { background: #EDEDEF; color: #3F3F46; }
html body:not([data-theme="dark"]) .kanban-add-list-btn:not(#love-h-a):hover { background: #E4E4E7; color: #181D24; }

/* Exceção: Política de privacidade (/privacidade) e Termos e condições
   (/termos) com o fundo da página branco. */
html body:not([data-theme="dark"]):is([data-page="privacidade"], [data-page="termos"]) { --bg-dashboard: #FFFFFF; background-color: #FFFFFF; }

/* Nome da empresa no topo: link para o Início, sem sublinhado nem efeito no hover. */
html body a.topbar-account-name:not(#love-h-a),
html body a.topbar-account-name:not(#love-h-a):hover { text-decoration: none; cursor: pointer; }

/* Vendas › Meus contratos: tabela em 100% da largura; clicar num contrato
   abre os detalhes (evento e convidados) numa linha logo abaixo. */
html body .contratos-cliente-row:not(#love-h-a) { cursor: pointer; }
html body .contratos-cliente-row.is-selected td:not(#love-h-a) { background: #F7F7F8; }
html body .contratos-detalhe-row > td:not(#love-h-a) { padding: 0; background: #FCFCFD; }
html body .contratos-detalhe-row:hover > td:not(#love-h-a) { background: #FCFCFD; }
html body .contratos-detalhe:not(#love-h-a) { padding: 1.1rem 1.25rem 1.25rem; white-space: normal; }
html body .contratos-detalhe .contratos-convidados-block:not(#love-h-a) { margin-top: 1.1rem; padding-top: 1rem; }
html body .contratos-detalhe .leads-table-wrap:not(#love-h-a) { border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF; }
body[data-theme="dark"] .contratos-detalhe-row > td,
body[data-theme="dark"] .contratos-cliente-row.is-selected td { background: #1F1F1F !important; }
body[data-theme="dark"] .contratos-detalhe .leads-table-wrap { background: #252525 !important; border-color: #404040 !important; }

/* Construtor de sites: o fundo atrás do template (Site Principal e Meu
   Checkout) na mesma cor do fundo das páginas do Hub (#F4F6F7). */
html body:not([data-theme="dark"]) .builder-canvas-viewport:not(#love-h-a) { background: var(--bg-dashboard); }

/* Construtor de sites › abas "Elementos" / "Ajustes": no mesmo formato da
   caixinha "Elementos" do Convite digital e "Editar texto" do Save the Date
   (index) — uma caixa com bordas arredondadas (10px), com respiro lateral,
   sem a linha de baixo; a aba escolhida em azul-clarinho (#EBF4FF) e a
   outra branca. */
html body #builder-elements-panel .builder-panel-tabs:not(#love-h-a) {
  margin: 0.65rem 0.65rem 0; width: auto; padding: 0; gap: 0;
  border: 1px solid var(--borda-suave); border-radius: 10px; background: #FFFFFF; overflow: hidden;
}
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab:not(#love-h-a) {
  height: 40px; border: none; border-radius: 0; background: #FFFFFF; color: #71717A;
  font-weight: 700 !important; letter-spacing: -0.01em !important;
}
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab + .builder-panel-tab:not(#love-h-a) { border-left: 1px solid var(--borda-suave); }
html body:not([data-theme="dark"]) #builder-elements-panel .builder-panel-tabs .builder-panel-tab.active:not(#love-h-a),
html body:not([data-theme="dark"]) #builder-elements-panel .builder-panel-tabs .builder-panel-tab.active:not(#love-h-a):hover { background: #EBF4FF; color: #181D24; }
html body #builder-elements-panel .builder-panel-tabs .builder-panel-tab:not(#love-h-a):hover { color: #181D24; }
body[data-theme="dark"] #builder-elements-panel .builder-panel-tabs { background: #1F1F1F !important; border-color: #404040 !important; }

/* Construtor de sites › painel Elementos/Ajustes (e o inspetor do elemento):
   barra de rolagem invisível — continua rolando, mas sem ocupar a lateral;
   o respiro da direita fica igual ao da esquerda. */
html body #builder-elements-panel :is(.builder-panel-tab-body, .inspector-body):not(#love-h-a) {
  scrollbar-width: none; -ms-overflow-style: none; scrollbar-gutter: auto; padding-right: 0.75rem;
}
html body #builder-elements-panel :is(.builder-panel-tab-body, .inspector-body)::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Menu do perfil: empresas sempre visíveis, com o CNPJ embaixo do nome. */
html body .profile-empresa-textos:not(#love-h-a) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
html body .profile-empresa-cnpj:not(#love-h-a) { font-size: 0.6875rem; font-weight: 500; color: #A1A1AA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Nova empresa: o layout continua o mesmo (sidebar, nome da empresa, busca
   e ícones do topo aparecem), mas nada disso é clicável — é tudo da empresa
   atual. Só o perfil abre: nele, as empresas (clicar na atual volta para
   ela), o tema e Sair; os outros itens ficam visíveis e apagados. */
html body[data-page="nova-empresa"] #shell-sidebar:not(#love-h-a),
html body[data-page="nova-empresa"] .topbar-account-wrap:not(#love-h-a),
html body[data-page="nova-empresa"] #search-trigger:not(#love-h-a),
html body[data-page="nova-empresa"] #topbar-icon-group > :not(:has(#avatar-trigger)):not(#love-h-a),
html body[data-page="nova-empresa"] #avatar-dropdown a.topbar-dropdown-item:not([data-logout]):not(#love-h-a),
html body[data-page="nova-empresa"] .profile-dropdown-header:not(#love-h-a) { pointer-events: none !important; cursor: default; user-select: none; }
html body[data-page="nova-empresa"] #shell-sidebar:not(#love-h-a),
html body[data-page="nova-empresa"] .topbar-account-wrap:not(#love-h-a),
html body[data-page="nova-empresa"] #search-trigger:not(#love-h-a),
html body[data-page="nova-empresa"] #topbar-icon-group > :not(:has(#avatar-trigger)):not(#love-h-a),
html body[data-page="nova-empresa"] #avatar-dropdown a.topbar-dropdown-item:not([data-logout]):not(#love-h-a) { opacity: 0.45; }

/* Nova empresa › etapas. */
html body .nova-empresa-etapas:not(#love-h-a) { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--borda-suave); }
html body .nova-empresa-etapa:not(#love-h-a) { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; font-weight: 500; color: #A1A1AA; }
html body .nova-empresa-etapa b:not(#love-h-a) {
  width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--borda-suave); display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; color: #A1A1AA; background: #FFFFFF;
}
html body .nova-empresa-etapa.is-ativa:not(#love-h-a) { color: #181D24; font-weight: 600; }
html body .nova-empresa-etapa.is-ativa b:not(#love-h-a) { background: #183b54; border-color: #183b54; color: #FFFFFF; }
html body .nova-empresa-etapa.is-feita:not(#love-h-a) { color: #3F3F46; }
html body .nova-empresa-etapa.is-feita b:not(#love-h-a) { background: #EBF4FF; border-color: #EBF4FF; color: #183b54; }
html body .nova-empresa-escolha:not(#love-h-a) { display: flex; gap: 0.6rem; }
html body .nova-empresa-opcao:not(#love-h-a) {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 14px; border: 1px solid var(--borda-suave); border-radius: 8px;
  background: #FFFFFF; font-size: 0.875rem; color: #3F3F46; cursor: pointer;
}
html body .nova-empresa-opcao:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .nova-empresa-opcao:has(input:checked):not(#love-h-a) { border-color: #183b54; background: #EBF4FF; color: #183b54; font-weight: 600; }
html body .nova-empresa-opcao input:not(#love-h-a) { accent-color: #183b54; margin: 0; }
html body .nova-empresa-dica:not(#love-h-a) { font-size: 0.8125rem; color: #71717A; margin: 0.5rem 0 0; }
html body .nova-empresa-categorias:not(#love-h-a) { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; }
html body .nova-empresa-categoria:not(#love-h-a) { min-height: 46px; }
html body .nova-empresa-rodape:not(#love-h-a) { justify-content: space-between; }
html body .nova-empresa-rodape #nova-empresa-salvar:not(#love-h-a) { margin-left: auto; }
body[data-theme="dark"] .nova-empresa-opcao { background: #252525 !important; border-color: #404040 !important; color: #F4F4F5 !important; }
body[data-theme="dark"] .nova-empresa-etapas { border-color: #404040 !important; }

/* Menu lateral › Construtor com seta: o submenu (Editar meu site /
   Formulários) só aparece aberto; a seta gira ao abrir. */
html body .sidebar-nav-group:not(.open) > .sidebar-subnav:not(#love-h-a) { display: none; }
html body .sidebar-nav-group.open > .sidebar-nav-toggle .sidebar-chevron:not(#love-h-a) { transform: rotate(180deg); }
html body .sidebar-nav-toggle:not(#love-h-a) { width: 100%; border: none; cursor: pointer; text-align: left; font-family: inherit; }


/* Menu do perfil › empresas: sem a imagenzinha; check à esquerda, na mesma
   coluna do "+" de Adicionar empresa; nome e, ao lado, o CNPJ. */
html body .profile-empresas-titulo:not(#love-h-a) { margin-left: 0.625rem; margin-right: 0.625rem; }
html body .profile-empresa-item:not(#love-h-a) { gap: 0.5rem; padding: 0.55rem 0.625rem; }
html body .profile-empresa-marca:not(#love-h-a) { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
html body .profile-empresa-marca .profile-empresa-check:not(#love-h-a) { width: 16px; height: 16px; margin: 0; }
html body .profile-empresa-item .profile-empresa-nome:not(#love-h-a) { flex: 0 1 auto; }
html body .profile-empresa-item .profile-empresa-cnpj:not(#love-h-a) { font-size: 0.75rem; font-weight: 400; color: #A1A1AA; white-space: nowrap; margin-left: 0.15rem; }

/* Construtor no menu: hover igual aos outros itens (fundo preenchido);
   seta maior; "Editar meu site" e "Formulários" ocupam a largura toda do
   menu, com o texto alinhado ao de "Construtor". */
html body .sidebar-nav-toggle:hover:not(#love-h-a) { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
html body .sidebar-nav-toggle .sidebar-chevron:not(#love-h-a) { width: 20px; height: 20px; margin-right: 0.35rem; }
html body .sidebar-nav-toggle:hover .sidebar-chevron:not(#love-h-a) { color: #FFFFFF; }
html body .sidebar-nav-group--construtor > .sidebar-subnav:not(#love-h-a) { padding: 0.15rem 0 0.35rem; gap: 0.15rem; }
html body .sidebar-nav-group--construtor .sidebar-subnav-item:not(#love-h-a) {
  width: 100%; min-height: 38px; padding: 0.45rem 0.5rem 0.45rem calc(0.5rem + 48px + 0.6rem);
  border-radius: var(--radius-control); font-size: 0.875rem; font-weight: 600; color: #C4C4CC;
}
html body .sidebar-nav-group--construtor .sidebar-subnav-item:hover:not(#love-h-a) { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
html body .sidebar-nav-group--construtor .sidebar-subnav-item.active:not(#love-h-a) { background: #EBF4FF; color: #181D24; font-weight: 700; }
body[data-theme="dark"] .sidebar-nav-toggle:hover { background: #4b4b4b !important; color: #FFFFFF !important; }

/* Cadastrar nova conta › etapas fora da caixa: só o número ao lado do nome
   (sem bolinha), setas entre elas; a atual em azul, as outras em cinza. */
html body .nova-empresa-etapas:not(#love-h-a) { align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1rem; padding: 0; border: none; max-width: 720px; }
html body .nova-empresa-etapa:not(#love-h-a),
html body .nova-empresa-etapa.is-feita:not(#love-h-a) { gap: 0.35rem; font-size: 0.875rem; font-weight: 600; color: #A1A1AA; }
html body .nova-empresa-etapa b:not(#love-h-a),
html body .nova-empresa-etapa.is-feita b:not(#love-h-a),
html body .nova-empresa-etapa.is-ativa b:not(#love-h-a) { width: auto; height: auto; border: none; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: 700; }
html body .nova-empresa-etapa.is-ativa:not(#love-h-a) { color: #183b54; font-weight: 700; }
html body .nova-empresa-seta:not(#love-h-a) { width: 16px; height: 16px; color: #A1A1AA; flex-shrink: 0; }
body[data-theme="dark"] .nova-empresa-etapa.is-ativa { color: #FFFFFF !important; }

/* Cadastrar nova conta: o menu lateral aparece normal (sem apagar), só sem
   clique; o nome da empresa antiga sai do topo. */
html body[data-page="nova-empresa"] #shell-sidebar:not(#love-h-a) { opacity: 1; }
html body[data-page="nova-empresa"] .topbar-account-wrap:not(#love-h-a) { visibility: hidden; }

/* Menu do perfil › empresas: sem ícone à esquerda; nome e, ao lado,
   "Principal" em letra fina (a empresa do login); CNPJ embaixo.
   "Adicionar empresa" com o + à direita. */
html body .profile-empresa-item:not(#love-h-a) { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
html body .profile-empresa-linha:not(#love-h-a) { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; max-width: 100%; }
html body .profile-empresa-principal:not(#love-h-a) { font-size: 0.75rem; font-weight: 300; color: #71717A; flex-shrink: 0; }
html body .profile-empresa-item .profile-empresa-cnpj:not(#love-h-a) { margin-left: 0; }
html body .profile-empresa-item.is-ativa .profile-empresa-nome:not(#love-h-a) { font-weight: 600; }
html body .topbar-item-adicionar-empresa:not(#love-h-a) { justify-content: space-between; }
html body .topbar-item-adicionar-empresa svg:not(#love-h-a) { flex-shrink: 0; }
body[data-theme="dark"] .profile-empresa-principal { color: #A1A1AA !important; }

/* Configurações › Preferências › Login com o Google (sem senha). */
html body .settings-login-google[hidden]:not(#love-h-a),
html body #settings-login-senha[hidden]:not(#love-h-a) { display: none !important; }
html body .settings-login-titulo:not(#love-h-a) { margin: 0 0 0.75rem; }
html body .settings-login-google.com-senha-embaixo:not(#love-h-a) { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--borda-suave); }
html body .settings-login-linha:not(#love-h-a) { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--borda-suave); border-radius: 8px; }
html body .settings-login-icone:not(#love-h-a) { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--borda-suave); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #FFFFFF; }
html body .settings-login-nome:not(#love-h-a) { font-size: 0.875rem; font-weight: 600; color: #18181B; margin: 0; }
html body .settings-login-email:not(#love-h-a) { font-size: 0.8125rem; color: #71717A; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .settings-login-data:not(#love-h-a) { margin: 0 0 0 auto; font-size: 0.8125rem; color: #71717A; white-space: nowrap; }
body[data-theme="dark"] .settings-login-linha, body[data-theme="dark"] .settings-login-icone { border-color: #404040 !important; }
body[data-theme="dark"] .settings-login-nome { color: #FFFFFF !important; }

/* Configurações › Preferências de e-mail (modelo do Resend): uma linha por
   opção com divisor fino, título 14px, descrição 13px e toggle à direita. */
html body .prefs-email-card:not(#love-h-a) { border: 1px solid var(--borda-suave) !important; border-radius: 10px; box-shadow: none !important; }
html body .prefs-email-titulo:not(#love-h-a) { font-size: 1rem; font-weight: 700; color: #18181B; margin: 0; }
html body .prefs-email-sub:not(#love-h-a) { font-size: 0.8125rem; color: #71717A; margin: 0.25rem 0 0.75rem; }
html body .prefs-email-linha:not(#love-h-a) { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--borda-suave); }
html body .prefs-email-textos:not(#love-h-a) { flex: 1; min-width: 0; }
html body .prefs-email-nome:not(#love-h-a) { font-size: 0.875rem; font-weight: 500; color: #18181B; margin: 0; }
html body .prefs-email-desc:not(#love-h-a) { font-size: 0.8125rem; color: #71717A; margin: 0.15rem 0 0; }
html body .prefs-email-salvo:not(#love-h-a) { font-size: 0.75rem; font-weight: 500; color: #1E9E5E; opacity: 0; transition: opacity .2s ease; white-space: nowrap; }
html body .prefs-email-salvo.is-erro:not(#love-h-a) { color: #DC2626; }
html body .prefs-email-salvo.is-visivel:not(#love-h-a) { opacity: 1; }
/* Toggle no padrão: cinza #E4E4E7 desligado, cor da sidebar #181D24 ligado, bolinha branca. */
html body .prefs-email-switch .settings-switch-track:not(#love-h-a) { background: #E4E4E7; border-color: var(--borda-suave); }
html body .prefs-email-switch input:checked ~ .settings-switch-track:not(#love-h-a) { background: #181D24; border-color: #181D24; }
html body .prefs-email-switch .settings-switch-track:not(#love-h-a)::before { background: #FFFFFF; }
body[data-theme="dark"] .prefs-email-card { border-color: #404040 !important; }
body[data-theme="dark"] .prefs-email-linha { border-top-color: #404040 !important; }
body[data-theme="dark"] .prefs-email-titulo, body[data-theme="dark"] .prefs-email-nome { color: #FFFFFF !important; }

/* Pop-up do 2FA (centralizado; sombra só aqui, que é overlay). */
html body .mfa-modal-card:not(#love-h-a) { position: relative; max-width: 400px; width: calc(100% - 2rem); padding: 24px; border-radius: 10px; border: 1px solid var(--borda-suave); box-shadow: 0 8px 24px rgba(0,0,0,0.08); text-align: left; }
html body .mfa-modal-fechar:not(#love-h-a) { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: none; background: none; color: #71717A; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
html body .mfa-modal-fechar:hover:not(#love-h-a) { color: #181D24; }
html body .mfa-modal-titulo:not(#love-h-a) { font-size: 1.0625rem; font-weight: 700; color: #18181B; margin: 0 0 0.35rem; padding-right: 2rem; }
html body .mfa-modal-texto:not(#love-h-a) { font-size: 0.875rem; color: #52525B; margin: 0 0 0.9rem; }
html body .mfa-modal-texto--menor:not(#love-h-a) { font-size: 0.8125rem; color: #71717A; margin: 0.9rem 0 0.4rem; }
html body .mfa-modal-qr:not(#love-h-a) { width: 184px; height: 184px; margin: 0 auto; border: 1px solid var(--borda-suave); border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; overflow: hidden; }
html body .mfa-modal-qr img:not(#love-h-a) { width: 168px; height: 168px; }
html body .mfa-modal-carregando:not(#love-h-a) { font-size: 0.8125rem; color: #A1A1AA; }
html body .mfa-modal-chave:not(#love-h-a) { display: block; padding: 0.55rem 0.75rem; border: 1px solid var(--borda-suave); border-radius: 8px; background: #FAFAFA; font-size: 0.8125rem; letter-spacing: 0.04em; word-break: break-all; color: #18181B; user-select: all; }
html body .mfa-modal-codigo:not(#love-h-a) { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
html body .mfa-modal-erro:not(#love-h-a) { font-size: 0.8125rem; color: #DC2626; margin: 0.5rem 0 0; }
html body .mfa-modal-confirmar:not(#love-h-a) { width: 100%; justify-content: center; margin-top: 1rem; }
body[data-theme="dark"] .mfa-modal-card { border-color: #404040 !important; }
body[data-theme="dark"] .mfa-modal-titulo, body[data-theme="dark"] .mfa-modal-chave { color: #FFFFFF !important; }
body[data-theme="dark"] .mfa-modal-chave, body[data-theme="dark"] .mfa-modal-qr { border-color: #404040 !important; }
body[data-theme="dark"] .mfa-modal-chave { background: #252525 !important; }

/* Configurações com o menu de abas na lateral (modelo Account settings da
   Zola): "Sua conta" + itens com ícone à esquerda; conteúdo à direita. */
html body .settings-shell--lateral:not(#love-h-a) { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
html body .settings-shell--lateral > #settings-tabs:not(#love-h-a) {
  grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 1rem;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  margin: 0; padding: 0; border: none; overflow: visible; white-space: normal;
}
html body .settings-shell--lateral > [data-settings-panel]:not(#love-h-a) { grid-column: 2; min-width: 0; }
html body .settings-nav-titulo:not(#love-h-a) { font-size: 0.9375rem; font-weight: 700; color: #18181B; margin: 0 0 0.6rem; padding: 0 0.75rem; letter-spacing: -0.01em; }
html body .settings-shell--lateral > #settings-tabs .category-tab:not(#love-h-a) {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; height: 38px; padding: 0 0.75rem;
  border: none; border-bottom: none; border-radius: 8px; background: transparent; text-align: left;
  font-size: 0.875rem; font-weight: 500; line-height: 1; color: #52525B;
}
html body .settings-shell--lateral > #settings-tabs .category-tab svg:not(#love-h-a) { width: 18px; height: 18px; flex-shrink: 0; }
html body .settings-shell--lateral > #settings-tabs .category-tab:not(#love-h-a):hover { color: #181D24; }
html body .settings-shell--lateral > #settings-tabs .category-tab.active:not(#love-h-a) { background: #E8EBED; color: #181D24; font-weight: 600; border-bottom: none; }
body[data-theme="dark"] .settings-nav-titulo { color: #FFFFFF !important; }
body[data-theme="dark"] .settings-shell--lateral > #settings-tabs .category-tab { color: #D4D4D8 !important; }
body[data-theme="dark"] .settings-shell--lateral > #settings-tabs .category-tab.active { background: #333333 !important; color: #FFFFFF !important; }
@media (max-width: 900px) {
  html body .settings-shell--lateral:not(#love-h-a) { display: block; }
  html body .settings-shell--lateral > #settings-tabs:not(#love-h-a) { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 1.25rem; }
  html body .settings-shell--lateral > #settings-tabs .category-tab:not(#love-h-a) { width: auto; }
  html body .settings-nav-titulo:not(#love-h-a) { width: 100%; }
}

/* Configurações no modelo Account settings da Zola: título fora da caixa,
   caixa branca de borda fina e campos um embaixo do outro. */
html body .settings-nav-divisor:not(#love-h-a) { height: 1px; background: #E4E4E7; margin: 0.9rem 0.75rem 1rem; }
html body .settings-nav-titulo + .category-tab:not(#love-h-a) { margin-top: 0; }
html body .settings-shell--lateral > [data-settings-panel] > .settings-secao-titulo--painel:not(#love-h-a),
html body .settings-zola-bloco .settings-secao-titulo--painel:not(#love-h-a) { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; color: #18181B; margin: 0; }
html body .settings-zola-bloco:not(#love-h-a) { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1rem; }
html body .settings-zola-sub:not(#love-h-a) { font-size: 0.9375rem; color: #3F3F46; margin: 0; }
html body .settings-shell [data-settings-panel] > .settings-zola-card:not(#love-h-a) { padding: 2rem 2.5rem; max-width: 40rem; }
html body .settings-zola-form:not(#love-h-a) { display: flex; flex-direction: column; gap: 1.25rem; }
html body .settings-zola-form .field-label:not(#love-h-a) { font-size: 0.9375rem; font-weight: 500; color: #18181B; margin-bottom: 0.45rem; }
html body .settings-zola-form .field-input:not(#love-h-a) { height: 44px; font-size: 0.9375rem; }
html body .settings-doc-linha:not(#love-h-a) { display: flex; align-items: flex-end; gap: 1rem; }
html body .settings-doc-campo:not(#love-h-a) { flex: 1; min-width: 0; }
html body .settings-doc-linha .plan-billing-toggle:not(#love-h-a) { height: 44px; }
html body .settings-zola-salvar:not(#love-h-a) { height: 44px; padding: 0 1.25rem; margin-top: 0.25rem; }
html body .settings-zola-rotulo:not(#love-h-a) { font-size: 0.9375rem; font-weight: 600; color: #18181B; margin: 0 0 0.75rem; }
html body .settings-zola-vazio:not(#love-h-a) { font-size: 0.875rem; color: #71717A; margin: 0; }
@media (max-width: 640px) {
  html body .settings-shell [data-settings-panel] > .settings-zola-card:not(#love-h-a) { padding: 1.25rem; }
  html body .settings-doc-linha:not(#love-h-a) { flex-direction: column; align-items: stretch; }
}

/* Configurações › URLs: link do site com "Editar" dentro da caixa e
   "Copiar link" ao lado (modelo Wedding website da Zola). */
html body .settings-url-texto:not(#love-h-a) { font-size: 0.9375rem; color: #18181B; margin: 0 0 0.9rem; }
html body .settings-url-base:not(#love-h-a) { font-size: 0.8125rem; color: #3F3F46; margin: 0 0 0.5rem; }
html body .settings-url-linha:not(#love-h-a) { display: flex; align-items: center; gap: 0.75rem; }
html body .settings-url-caixa:not(#love-h-a) {
  flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0 1rem; border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF;
}
html body .settings-url-slug:not(#love-h-a) { font-size: 0.9375rem; color: #18181B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .settings-url-editar:not(#love-h-a) { font-size: 0.875rem; font-weight: 500; color: #18181B; text-decoration: underline; text-underline-offset: 3px; flex-shrink: 0; }
html body .settings-url-copiar:not(#love-h-a) { height: 44px; padding: 0 1.1rem; flex-shrink: 0; }
html body .settings-url-aviso:not(#love-h-a) { font-size: 0.8125rem; color: #1E9E5E; margin: 0.5rem 0 0; min-height: 1.1em; }
html body .settings-url-pro:not(#love-h-a) {
  max-width: 40rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: -1rem; padding: 1.25rem 2.5rem; background: #EDEDEF; border: 1px solid var(--borda-suave); border-top: none; border-radius: 0 0 10px 10px;
}
html body .settings-url-pro[hidden]:not(#love-h-a) { display: none; }
html body .settings-url-pro p:not(#love-h-a) { font-size: 0.875rem; color: #3F3F46; margin: 0; }
body[data-theme="dark"] .settings-url-caixa { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .settings-url-slug, body[data-theme="dark"] .settings-url-editar, body[data-theme="dark"] .settings-url-texto { color: #FFFFFF !important; }
body[data-theme="dark"] .settings-url-pro { background: #252525 !important; border-color: #404040 !important; }

/* Linha horizontal de volta embaixo do cabeçalho de todas as telas (faixa
   do título + botão). Onde há subtítulo colado no título, a linha passa
   para baixo do subtítulo, de ponta a ponta, para não cortar o texto. */
html body:not([data-theme="dark"]) .b2b-header-bar:not(#love-h-a) { border-bottom: 1px solid var(--borda-suave); }
body[data-theme="dark"] .b2b-header-bar { border-bottom: 1px solid #404040 !important; }
html body .b2b-header-bar:has(+ p):not(#love-h-a) { border-bottom: none !important; }
html body .b2b-header-bar + p:not(#love-h-a) {
  margin-left: calc(-1 * var(--b2b-content-pad-x)); margin-right: calc(-1 * var(--b2b-content-pad-x));
  padding: 0 var(--b2b-content-pad-x) 0.9rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--borda-suave);
}
body[data-theme="dark"] .b2b-header-bar + p { border-bottom-color: #404040 !important; }

/* Configurações › Suas informações: "Salvar alterações" na largura toda
   (igual ao Personalizar evento › Informações do love.com.br). */
html body button.informacoes-salvar-rodape.settings-zola-salvar:not(#love-h-a) { width: 100%; height: 44px; margin-top: 0.25rem; padding: 0; }

/* Contas conectadas: o Google sem caixinha em volta. */
html body .settings-login-linha:not(#love-h-a) { padding: 0; border: none; border-radius: 0; }
body[data-theme="dark"] .settings-login-linha { border: none !important; }

/* Contas conectadas › Desconectar do Google (link sublinhado logo abaixo)
   e Conectar com o Google (botão claro com o G). */
html body .settings-google-acoes[hidden]:not(#love-h-a),
html body .settings-google-confirmar[hidden]:not(#love-h-a),
html body .settings-google-conectar[hidden]:not(#love-h-a),
html body .settings-google-msg[hidden]:not(#love-h-a),
html body .settings-google-desconectar[hidden]:not(#love-h-a) { display: none !important; }
html body .settings-google-acoes:not(#love-h-a) { margin-top: 0.75rem; }
html body .settings-google-desconectar:not(#love-h-a) { border: none; background: none; padding: 0; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #18181B; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html body .settings-google-desconectar:hover:not(#love-h-a) { color: #181D24; }
html body .settings-google-confirmar:not(#love-h-a) { margin-top: 0.25rem; padding: 0.9rem 1rem; border: 1px solid var(--borda-suave); border-radius: 8px; background: #FAFAFA; }
html body .settings-google-confirmar p:not(#love-h-a) { font-size: 0.8125rem; line-height: 1.5; color: #3F3F46; margin: 0 0 0.75rem; }
html body .settings-google-confirmar-botoes:not(#love-h-a) { display: flex; justify-content: flex-end; gap: 0.5rem; }
html body .settings-google-conectar:not(#love-h-a) {
  display: inline-flex; align-items: center; gap: 0.6rem; height: 44px; padding: 0 1.1rem; margin-top: 0.75rem;
  border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #18181B; cursor: pointer;
}
html body .settings-google-conectar:hover:not(#love-h-a) { border-color: #181D24; }
html body .settings-google-msg:not(#love-h-a) { font-size: 0.8125rem; color: #1E9E5E; margin: 0.75rem 0 0; }
html body .settings-google-msg.is-erro:not(#love-h-a) { color: #DC2626; }
body[data-theme="dark"] .settings-google-desconectar { color: #FFFFFF !important; }
body[data-theme="dark"] .settings-google-confirmar { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .settings-google-confirmar p { color: #D4D4D8 !important; }
body[data-theme="dark"] .settings-google-conectar { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* Suas informações › "Alterar" do nome da empresa e do CNPJ dentro de uma
   caixinha (borda fina, 6px), no canto direito do campo. */
html body .field-request-change-link:not(#love-h-a) {
  right: 0.5rem; padding: 0.25rem 0.6rem; border: 1px solid var(--borda-suave); border-radius: 6px; background: #FFFFFF;
  font-size: 0.75rem; font-weight: 600; line-height: 1.2; color: #3F3F46;
}
html body .field-request-change-link:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
body[data-theme="dark"] .field-request-change-link { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }

/* "Desconectar do Google": sem sublinhado, sem negrito, no mesmo cinza do
   "Conectado em" (#71717A); no hover só escurece. */
html body .settings-google-desconectar:not(#love-h-a) { text-decoration: none; font-weight: 400; font-size: 0.8125rem; color: #71717A; }
html body .settings-google-desconectar:hover:not(#love-h-a) { color: #181D24; }
body[data-theme="dark"] .settings-google-desconectar { color: #A1A1AA !important; }

/* URLs › faixa cinza embaixo da caixa do site (modelo Zola): texto com
   "Saiba mais" e o botão "Editar meu site" embaixo. */
html body .settings-url-editar-site:not(#love-h-a) { display: block; padding: 1.5rem 2.5rem 1.6rem; }
html body .settings-url-editar-site p:not(#love-h-a) { font-size: 0.9375rem; color: #18181B; margin: 0 0 0.9rem; }
html body .settings-url-saiba:not(#love-h-a) { color: #18181B; text-decoration: underline; text-underline-offset: 3px; }
html body .settings-url-saiba:hover:not(#love-h-a) { color: #181D24; }
html body .settings-url-editar-btn:not(#love-h-a) {
  display: inline-flex; align-items: center; height: 40px; padding: 0 1.1rem; border: 1px solid #18181B; border-radius: 8px;
  background: #FFFFFF; font-size: 0.875rem; font-weight: 600; color: #18181B; text-decoration: none;
}
html body .settings-url-editar-btn:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
body[data-theme="dark"] .settings-url-editar-site p, body[data-theme="dark"] .settings-url-saiba { color: #FFFFFF !important; }
body[data-theme="dark"] .settings-url-editar-btn { background: #252525 !important; border-color: #FFFFFF !important; color: #FFFFFF !important; }

/* Central de ajuda e Configurações: mesmo menu lateral. Texto cinza; no
   hover e na ativa o fundo fica branco, com a linha escura à esquerda
   (reta) e a ponta da direita arredondada (8px). */
html body .guias-menu-table .guide-link:not(#love-h-a),
html body .settings-shell--lateral > #settings-tabs .category-tab:not(#love-h-a) { border-radius: 0 8px 8px 0; }
html body .settings-shell--lateral > #settings-tabs:not(#love-h-a) { gap: 0; padding-right: 1.25rem; border-right: 1px solid var(--borda-suave); }
html body .settings-shell--lateral > #settings-tabs .category-tab:not(#love-h-a) {
  height: auto; padding: 0.8rem 1rem; color: #71717A; font-weight: 500; background: transparent;
  box-shadow: inset 2px 0 0 transparent;
}
html body .settings-shell--lateral > #settings-tabs .category-tab:not(#love-h-a):hover { background: #FFFFFF; color: #181D24; }
html body .settings-shell--lateral > #settings-tabs .category-tab.active:not(#love-h-a),
html body .settings-shell--lateral > #settings-tabs .category-tab.active:not(#love-h-a):hover { background: #FFFFFF; color: #181D24; font-weight: 700; box-shadow: inset 2px 0 0 #181D24; }
html body .settings-shell--lateral .settings-nav-titulo:not(#love-h-a) { padding: 0 1rem; }
html body .settings-shell--lateral .settings-nav-divisor:not(#love-h-a) { margin-left: 1rem; margin-right: 0; }
body[data-theme="dark"] .settings-shell--lateral > #settings-tabs { border-right-color: #404040 !important; }
body[data-theme="dark"] .settings-shell--lateral > #settings-tabs .category-tab { background: transparent !important; color: #A1A1AA !important; }
body[data-theme="dark"] .settings-shell--lateral > #settings-tabs .category-tab.active { color: #FFFFFF !important; box-shadow: inset 2px 0 0 #FFFFFF !important; }
@media (max-width: 900px) {
  html body .settings-shell--lateral > #settings-tabs:not(#love-h-a) { border-right: none; padding-right: 0; }
}

/* TESTE — Configurações e Central de ajuda com o 2º sidebar igual ao do
   love.com.br (o painel que abre ao lado dos ícones): coluna branca de
   240px colada no menu de ícones, do topo até o fim da tela (passa pelo
   rodapé), com a linha vertical à direita; itens 13px/600, ativo em
   azul-clarinho. Para voltar atrás, é só apagar este bloco. */
html body:is([data-page="configuracoes"], [data-page="faq"]) .b2b-main:not(#love-h-a) { position: relative; }
html body:is([data-page="configuracoes"], [data-page="faq"]) .b2b-content:not(#love-h-a) { margin-left: 240px; }
html body[data-page="configuracoes"] .settings-shell--lateral > #settings-tabs:not(#love-h-a),
html body[data-page="faq"] .guias-layout > .guias-sidebar:not(#love-h-a) {
  position: absolute; top: var(--topbar-height); left: 0; bottom: 0; width: 240px; z-index: 5;
  display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem;
  margin: 0; padding: 16px; background: #FFFFFF; border: none; border-right: 1px solid var(--borda-suave);
  overflow-y: auto; box-shadow: none;
}
html body[data-page="configuracoes"] .settings-shell--lateral:not(#love-h-a),
html body[data-page="faq"] .guias-layout:not(#love-h-a) { display: block; }
html body[data-page="faq"] .guias-layout > .guias-sidebar .guias-menu-table:not(#love-h-a) { gap: 0.25rem; }
/* Título da seção do painel (como "Aparência" no love.com.br). */
html body[data-page="configuracoes"] #settings-tabs .settings-nav-titulo:not(#love-h-a) { font-size: 0.875rem; font-weight: 700; color: #18181B; padding: 0 0 0.75rem; margin: 0 0 0.25rem; border-bottom: 1px solid #F4F4F5; }
html body[data-page="configuracoes"] #settings-tabs .settings-nav-divisor:not(#love-h-a) { margin: 0.75rem 0 0.75rem; background: #F4F4F5; }
/* Itens: 13px/600, cinza; hover cinza bem claro; ativo azul-clarinho. */
html body[data-page="configuracoes"] .settings-shell--lateral > #settings-tabs .category-tab:not(#love-h-a),
html body[data-page="faq"] .guias-menu-table .guide-link:not(#love-h-a) {
  width: 100%; padding: 0.65rem 0.85rem; border: 1px solid transparent; border-radius: 12px; box-shadow: none;
  background: transparent; font-size: 0.8125rem; font-weight: 600; color: #475569; line-height: 1.25;
}
html body[data-page="configuracoes"] .settings-shell--lateral > #settings-tabs .category-tab:not(#love-h-a):hover,
html body[data-page="faq"] .guias-menu-table .guide-link:not(#love-h-a):hover { background: #F8FAFC; color: #0F172A; }
html body[data-page="configuracoes"] .settings-shell--lateral > #settings-tabs .category-tab.active:not(#love-h-a),
html body[data-page="configuracoes"] .settings-shell--lateral > #settings-tabs .category-tab.active:not(#love-h-a):hover,
html body[data-page="faq"] .guias-menu-table .guide-link--active:not(#love-h-a),
html body[data-page="faq"] .guias-menu-table .guide-link--active:not(#love-h-a):hover { background: #EBF4FF; color: #333333; font-weight: 700; box-shadow: none; }
body[data-theme="dark"][data-page="configuracoes"] #settings-tabs,
body[data-theme="dark"][data-page="faq"] .guias-layout > .guias-sidebar { background: #1C2125 !important; border-right-color: #404040 !important; }
body[data-theme="dark"][data-page="configuracoes"] #settings-tabs .category-tab.active,
body[data-theme="dark"][data-page="faq"] .guias-menu-table .guide-link--active { background: #1C2125 !important; color: #FFFFFF !important; border-color: #595959 !important; }
@media (max-width: 900px) {
  html body:is([data-page="configuracoes"], [data-page="faq"]) .b2b-content:not(#love-h-a) { margin-left: 0; }
  html body[data-page="configuracoes"] .settings-shell--lateral > #settings-tabs:not(#love-h-a),
  html body[data-page="faq"] .guias-layout > .guias-sidebar:not(#love-h-a) { position: static; width: auto; border-right: none; padding: 0 0 1rem; background: transparent; }
}

/* ==========================================================================
   Tipografia igual à da plataforma dos anfitriões (love.com.br), medida lá.
   Só fonte, tamanho, peso, cor do texto, letter-spacing e line-height.
   Fica de fora o site do fornecedor (canvas do Construtor e página pública)
   e os códigos/SKU (mono).
   ========================================================================== */
:root { --fonte-love: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Submenu (2º sidebar de Configurações e da Central de ajuda). */
html body #settings-tabs .settings-nav-titulo:not(#love-h-a) {
  font-family: var(--fonte-love) !important; font-size: 14px !important; font-weight: 700 !important; color: #18181B !important;
  letter-spacing: -0.02em !important; line-height: 20px !important;
}
html body #settings-tabs .category-tab:not(#love-h-a),
html body .guias-menu-table .guide-link:not(#love-h-a) {
  font-family: var(--fonte-love) !important; font-size: 13px !important; font-weight: 600 !important; color: #475569 !important;
  letter-spacing: -0.16px !important; line-height: 19.5px !important;
}
html body #settings-tabs .category-tab.active:not(#love-h-a),
html body .guias-menu-table .guide-link--active:not(#love-h-a) { font-weight: 700 !important; color: #333333 !important; background: #EBF4FF !important; }

/* Cabeçalhos. */
html body .b2b-header-bar h1:not(#love-h-a),
html body .b2b-header-bar h2:not(#love-h-a) {
  font-family: var(--fonte-love) !important; font-size: 20px !important; font-weight: 700 !important; color: #18181B !important;
  letter-spacing: -0.02em !important; line-height: 26px !important;
}
html body .greeting-title:not(#love-h-a) {
  font-family: var(--fonte-love) !important; font-size: 20px !important; font-weight: 700 !important; color: #18181B !important;
  letter-spacing: -0.02em !important; line-height: 28px !important;
}
html body .dashboard-help-title:not(#love-h-a),
html body .dash-card-header h2:not(#love-h-a),
html body .dash-card-header h3:not(#love-h-a),
html body .settings-secao-titulo:not(#love-h-a),
html body .settings-zola-bloco .settings-secao-titulo--painel:not(#love-h-a),
html body .settings-shell [data-settings-panel] > .settings-secao-titulo--painel:not(#love-h-a),
html body .prefs-email-titulo:not(#love-h-a),
html body .faq-table-title:not(#love-h-a),
html body #finance-lista-titulo:not(#love-h-a) {
  font-family: var(--fonte-love) !important; font-size: 16px !important; font-weight: 700 !important; color: #18181B !important;
  letter-spacing: -0.02em !important; line-height: 24px !important;
}
html body .topbar-account-name:not(#love-h-a) {
  font-family: var(--fonte-love) !important; font-size: 14px !important; font-weight: 400 !important; color: #18181B !important; letter-spacing: -0.01em !important;
}

/* Abas de texto com sublinhado. */
html body .category-tabs-bar:not([id="settings-tabs"]) .category-tab:not(#love-h-a) {
  font-family: var(--fonte-love) !important; font-size: 13px !important; font-weight: 600 !important; color: #71717A !important; letter-spacing: normal !important;
}
html body .category-tabs-bar:not([id="settings-tabs"]) .category-tab.active:not(#love-h-a) { font-weight: 700 !important; color: #333333 !important; }

/* Tabelas. */
html body .leads-table th:not(#love-h-a) {
  font-family: var(--fonte-love) !important; font-size: 13px !important; font-weight: 700 !important; color: #181D24 !important;
}
html body .leads-table td:not(#love-h-a) {
  font-family: var(--fonte-love) !important; font-size: 14px !important; font-weight: 400 !important; color: #0F172A !important;
  letter-spacing: -0.16px !important; line-height: 21px !important;
}

/* Texto comum / descrições (subtítulo das páginas e descrições de caixas). */
html body .b2b-header-bar + p:not(#love-h-a),
html body .settings-zola-sub:not(#love-h-a),
html body .prefs-email-sub:not(#love-h-a),
html body .dashboard-help-card-desc:not(#love-h-a) {
  font-family: var(--fonte-love) !important; font-size: 14px !important; font-weight: 400 !important; color: #52525B !important;
  letter-spacing: -0.01em !important; line-height: 20px !important;
}

/* Botões do cabeçalho. */
html body .b2b-header-bar .btn-primary:not(#love-h-a),
html body .b2b-header-bar .btn-secondary:not(#love-h-a) { font-family: var(--fonte-love) !important; font-size: 14px !important; font-weight: 600 !important; }

/* Tema escuro: as cores claras de texto continuam valendo. */
html body[data-theme="dark"] .b2b-header-bar h1:not(#love-h-a), html body[data-theme="dark"] .b2b-header-bar h2:not(#love-h-a), html body[data-theme="dark"] .greeting-title:not(#love-h-a),
html body[data-theme="dark"] .dashboard-help-title:not(#love-h-a), html body[data-theme="dark"] .dash-card-header h2:not(#love-h-a), html body[data-theme="dark"] .dash-card-header h3:not(#love-h-a),
html body[data-theme="dark"] .settings-secao-titulo:not(#love-h-a), html body[data-theme="dark"] .prefs-email-titulo:not(#love-h-a), html body[data-theme="dark"] .faq-table-title:not(#love-h-a),
html body[data-theme="dark"] .topbar-account-name:not(#love-h-a), html body[data-theme="dark"] #settings-tabs .settings-nav-titulo:not(#love-h-a),
html body[data-theme="dark"] .leads-table th:not(#love-h-a), html body[data-theme="dark"] .category-tabs-bar .category-tab.active:not(#love-h-a),
html body[data-theme="dark"] #settings-tabs .category-tab.active:not(#love-h-a), html body[data-theme="dark"] .guias-menu-table .guide-link--active:not(#love-h-a) { color: #FFFFFF !important; }
html body[data-theme="dark"] .leads-table td:not(#love-h-a) { color: #E4E4E7 !important; }
html body[data-theme="dark"] .b2b-header-bar + p:not(#love-h-a), html body[data-theme="dark"] .settings-zola-sub:not(#love-h-a), html body[data-theme="dark"] .prefs-email-sub:not(#love-h-a),
html body[data-theme="dark"] .dashboard-help-card-desc:not(#love-h-a), html body[data-theme="dark"] #settings-tabs .category-tab:not(#love-h-a),
html body[data-theme="dark"] .guias-menu-table .guide-link:not(#love-h-a), html body[data-theme="dark"] .category-tabs-bar .category-tab:not(#love-h-a) { color: #A1A1AA !important; }
html body[data-theme="dark"] #settings-tabs .category-tab.active:not(#love-h-a), html body[data-theme="dark"] .guias-menu-table .guide-link--active:not(#love-h-a) { background: #1C2125 !important; }

/* Configurações: o título da página é o nome da aba; sem o 2º título antes
   da caixa, a caixa de Verificação começa na 1ª linha ao lado. */
.verificacao-aberta > #verificacao-conta-card { grid-row: 1 / span 3; }

/* Submenu (2º sidebar branco de Configurações e da Central de ajuda) igual
   ao do love.com.br: lado esquerdo reto e só o direito arredondado; hover
   e item ativo no mesmo cinza clarinho #F4F4F5. Modo escuro não muda. */
html body #settings-tabs .category-tab:not(#love-h-a),
html body .guias-menu-table .guide-link:not(#love-h-a) {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 13px !important; font-weight: 600 !important; color: #475569 !important; letter-spacing: -0.16px !important;
  border-radius: 0 8px 8px 0 !important;
}
html body:not([data-theme="dark"]) #settings-tabs .category-tab:not(.active):not(#love-h-a):hover,
html body:not([data-theme="dark"]) .guias-menu-table .guide-link:not(.guide-link--active):not(#love-h-a):hover {
  background-color: #F4F4F5 !important; color: #18181B !important;
}
html body:not([data-theme="dark"]) #settings-tabs .category-tab.active:not(#love-h-a),
html body:not([data-theme="dark"]) #settings-tabs .category-tab.active:not(#love-h-a):hover,
html body:not([data-theme="dark"]) .guias-menu-table .guide-link--active:not(#love-h-a),
html body:not([data-theme="dark"]) .guias-menu-table .guide-link--active:not(#love-h-a):hover {
  background-color: #F4F4F5 !important; color: #333333 !important; font-weight: 700 !important;
  border: 1px solid transparent !important; box-shadow: none !important;
}

/* Configurações › Dados da empresa: caixas separadas (endereço / forma e
   condições de pagamento) no mesmo modelo de Suas informações. */
html body .settings-zola-forms:not(#love-h-a) { display: flex; flex-direction: column; gap: 1.5rem; }
html body .settings-zola-forms > .settings-zola-card:not(#love-h-a) {
  background: #FFFFFF; border: 1px solid var(--borda-suave) !important; border-radius: 10px; padding: 2rem 2.5rem; margin: 0; max-width: 40rem;
}
html body .settings-zola-forms > .settings-zola-bloco:not(#love-h-a) { margin-top: 0.5rem; }
html body .settings-endereco-linha:not(#love-h-a) { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1rem; }
html body .settings-endereco-linha--metade:not(#love-h-a) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .settings-zola-form .field-select:not(#love-h-a) { height: 44px; font-size: 0.9375rem; }
html body .settings-campo-nota:not(#love-h-a) { font-size: 0.8125rem; color: #71717A; margin: -0.2rem 0 0.5rem; }
/* Descrição: sem alça de arrastar; começa num tamanho fixo e cresce com o texto. */
html body textarea.settings-descricao:not(#love-h-a) { resize: none !important; min-height: 110px; field-sizing: content; overflow: hidden; font-size: 0.9375rem; }
html body .settings-descricao-contador:not(#love-h-a) { font-size: 0.75rem; color: #A1A1AA; text-align: right; margin: 0.35rem 0 0; }
/* Raio de atendimento: sem as bolinhas embaixo; barra um pouco mais grossa. */
html body .settings-raio:not(#love-h-a) { max-width: 100%; }
html body .settings-raio .b2b-range-ticks:not(#love-h-a) { display: none !important; }
html body .settings-raio .b2b-range-slider:not(#love-h-a) { height: 8px; }
html body .settings-raio .b2b-range-slider::-webkit-slider-runnable-track { height: 8px; }
html body .settings-raio .b2b-range-slider::-moz-range-track { height: 8px; }
html body .settings-raio .b2b-range-slider::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -6px; }
html body .settings-raio .b2b-range-slider::-moz-range-thumb { width: 20px; height: 20px; }
html body .settings-raio .b2b-range-track-wrap:not(#love-h-a) { justify-content: center; }
body[data-theme="dark"] .settings-zola-forms > .settings-zola-card { background: #1F1F1F !important; border-color: #404040 !important; }
@media (max-width: 640px) {
  html body .settings-zola-forms > .settings-zola-card:not(#love-h-a) { padding: 1.25rem; }
  html body .settings-endereco-linha--metade:not(#love-h-a) { grid-template-columns: 1fr; }
}

/* Forma e condições de pagamento › parcelamento em duas etapas: cards de
   escolha (quem paga os juros) e, se o fornecedor assumir, as opções de
   parcelas sem juros com o resumo embaixo. */
html body .parcelas-opcoes:not(#love-h-a) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
html body .parcelas-card:not(#love-h-a) {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1rem; cursor: pointer;
  border: 1px solid var(--borda-suave); border-radius: 10px; background: #FFFFFF; transition: border-color .15s ease;
}
html body .parcelas-card:hover:not(#love-h-a) { border-color: #181D24; }
html body .parcelas-card:has(input:checked):not(#love-h-a) { border-color: #183b54; box-shadow: inset 0 0 0 1px #183b54; }
html body .parcelas-card-input:not(#love-h-a) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
html body .parcelas-card-textos:not(#love-h-a) { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
html body .parcelas-card-titulo:not(#love-h-a) { font-size: 0.875rem; font-weight: 600; color: #18181B; line-height: 1.3; }
html body .parcelas-card-sub:not(#love-h-a) { font-size: 0.8125rem; color: #71717A; line-height: 1.4; }
html body .parcelas-card-check:not(#love-h-a) {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--borda-suave);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background-color .15s ease, border-color .15s ease;
}
html body .parcelas-card-check svg:not(#love-h-a) { width: 14px; height: 14px; color: #FFFFFF; opacity: 0; transition: opacity .15s ease; }
html body .parcelas-card:has(input:checked) .parcelas-card-check:not(#love-h-a) { background: #183b54; border-color: #183b54; }
html body .parcelas-card:has(input:checked) .parcelas-card-check svg:not(#love-h-a) { opacity: 1; }
html body .parcelas-info:not(#love-h-a) { margin: 0.75rem 0 0; font-size: 0.8125rem; color: #52525B; }
html body .parcelas-info[hidden]:not(#love-h-a),
html body .parcelas-limite[hidden]:not(#love-h-a) { display: none; }
html body .parcelas-limite:not(#love-h-a) { margin-top: 1.25rem; }
html body .parcelas-pills:not(#love-h-a) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
html body .parcelas-pill:not(#love-h-a) {
  min-width: 52px; height: 38px; padding: 0 0.85rem; border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF;
  font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #3F3F46; cursor: pointer; font-variant-numeric: tabular-nums;
}
html body .parcelas-pill:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .parcelas-pill.is-ativo:not(#love-h-a) { background: #183b54; border-color: #183b54; color: #FFFFFF; }
html body .parcelas-alerta:not(#love-h-a) {
  margin: 0.85rem 0 0; padding: 0.7rem 0.85rem; border: 1px solid var(--borda-suave); border-radius: 8px; background: #FAFAFA;
  font-size: 0.8125rem; line-height: 1.5; color: #3F3F46;
}
body[data-theme="dark"] .parcelas-card, body[data-theme="dark"] .parcelas-pill { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .parcelas-card-titulo, body[data-theme="dark"] .parcelas-pill { color: #FFFFFF !important; }
body[data-theme="dark"] .parcelas-card-check { border-color: #404040 !important; }
body[data-theme="dark"] .parcelas-card:has(input:checked) .parcelas-card-check { background: #FFFFFF !important; border-color: #FFFFFF !important; }
body[data-theme="dark"] .parcelas-card-check svg { color: #181D24 !important; }
body[data-theme="dark"] .parcelas-pill.is-ativo { background: #FFFFFF !important; color: #181D24 !important; }
body[data-theme="dark"] .parcelas-alerta { background: #252525 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
@media (max-width: 640px) { html body .parcelas-opcoes:not(#love-h-a) { grid-template-columns: 1fr; } }

/* Configurações › Senha e segurança e Dados bancários (modelo Zola). */
html body #settings-login-senha[hidden]:not(#love-h-a) { display: none !important; }
html body .settings-senha-form:not(#love-h-a) { margin-top: 1.25rem; }
html body .settings-form-msg:not(#love-h-a) { font-size: 0.8125rem; color: #1E9E5E; margin: 0; }
html body .settings-form-msg.is-erro:not(#love-h-a) { color: #DC2626; }
html body .settings-form-msg[hidden]:not(#love-h-a) { display: none; }
html body .settings-zola-card .settings-seguranca-linhas .settings-switch-row:first-child:not(#love-h-a) { padding-top: 0; }

/* Desativar conta: por último, discreto, em vermelho. */
html body .settings-desativar:not(#love-h-a) { max-width: 40rem; }
html body .settings-desativar-btn:not(#love-h-a) {
  height: 40px; padding: 0 1.1rem; border: 1px solid #FECACA; border-radius: 8px; background: #FFFFFF;
  font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #DC2626; cursor: pointer;
}
html body .settings-desativar-btn:hover:not(#love-h-a) { border-color: #DC2626; }
html body .settings-desativar-btn[hidden]:not(#love-h-a),
html body .settings-desativar-confirmar[hidden]:not(#love-h-a) { display: none; }
html body .settings-desativar-confirmar:not(#love-h-a) { padding: 1rem 1.25rem; border: 1px solid #FECACA; border-radius: 10px; background: #FFFFFF; }
html body .settings-desativar-confirmar p:not(#love-h-a) { font-size: 0.875rem; line-height: 1.5; color: #3F3F46; margin: 0 0 0.85rem; }
html body .settings-desativar-botoes:not(#love-h-a) { display: flex; justify-content: flex-end; gap: 0.5rem; }
html body .settings-desativar-sim:not(#love-h-a) {
  height: 40px; padding: 0 1.1rem; border: 1px solid #DC2626; border-radius: 8px; background: #DC2626;
  font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #FFFFFF; cursor: pointer;
}
html body .settings-desativar-sim:hover:not(#love-h-a) { background: #B91C1C; border-color: #B91C1C; }

/* Dados bancários. */
html body .settings-banco-intro:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
html body .settings-banco-intro-texto:not(#love-h-a) { font-size: 0.9375rem; line-height: 1.55; color: #18181B; margin: 0; }
html body .settings-banco-intro-icone:not(#love-h-a) { color: #A1A1AA; flex-shrink: 0; }
html body .settings-banco-linha:not(#love-h-a) { grid-template-columns: 180px minmax(0, 1fr); }
html body .settings-banco-aceite:not(#love-h-a) { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.8125rem; line-height: 1.5; color: #52525B; cursor: pointer; }
html body .settings-banco-aceite input:not(#love-h-a) { width: 18px; height: 18px; margin: 0.1rem 0 0; flex-shrink: 0; accent-color: #181D24; }
html body .settings-banco-salvar:not(#love-h-a) { height: 44px; padding: 0 1.25rem; gap: 0.5rem; background: #181D24; border-color: #181D24; }
html body .settings-banco-salvar:hover:not(#love-h-a) { background: #000000; border-color: #000000; }
body[data-theme="dark"] .settings-banco-intro-texto { color: #FFFFFF !important; }
body[data-theme="dark"] .settings-desativar-btn, body[data-theme="dark"] .settings-desativar-confirmar { background: #252525 !important; border-color: #7F1D1D !important; }
body[data-theme="dark"] .settings-desativar-confirmar p { color: #D4D4D8 !important; }
@media (max-width: 640px) {
  html body .settings-banco-linha:not(#love-h-a) { grid-template-columns: 1fr; }
  html body .settings-banco-intro-icone:not(#love-h-a) { display: none; }
}

/* Privacidade: sem a linha acima de "Autenticação de dois fatores";
   "Desativar conta" como texto simples, cinza claro e menor (sem caixa). */
html body .settings-zola-card .settings-seguranca-linhas:not(#love-h-a) { margin-top: 0; border-top: none; }
html body .settings-desativar-btn:not(#love-h-a) {
  height: auto; padding: 0; border: none; border-radius: 0; background: none;
  font-size: 0.8125rem; font-weight: 400; color: #A1A1AA;
}
html body .settings-desativar-btn:hover:not(#love-h-a) { border: none; color: #71717A; }
body[data-theme="dark"] .settings-desativar-btn { background: none !important; border: none !important; color: #71717A !important; }

/* Privacidade: frase com o link para a Central de ajuda, embaixo da caixa. */
html body .settings-privacidade-ajuda:not(#love-h-a) { max-width: 40rem; margin: 0; font-size: 0.875rem; color: #52525B; }
html body .settings-privacidade-ajuda a:not(#love-h-a) { color: #18181B; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
html body .settings-privacidade-ajuda a:hover:not(#love-h-a) { color: #181D24; }
body[data-theme="dark"] .settings-privacidade-ajuda { color: #A1A1AA !important; }
body[data-theme="dark"] .settings-privacidade-ajuda a { color: #FFFFFF !important; }

/* Suas informações: imagem de perfil e capa acima da 1ª caixa, ocupando a
   largura dela (40rem); a capa pega o resto da linha, mais larga. */
html body .settings-imagens:not(#love-h-a) { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1rem; max-width: 40rem; width: 100%; }
html body .settings-imagens .profile-avatar-picker:not(#love-h-a) { width: 140px; height: 140px; aspect-ratio: auto; }
html body .settings-imagens .profile-logo-picker:not(#love-h-a) { width: 100%; height: 140px; aspect-ratio: auto; }
html body .settings-imagens .profile-logo-hint:not(#love-h-a) { margin-top: 0.4rem; }
/* Celular: imagem de perfil e capa na mesma linha (como no LinkedIn), menores. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .settings-imagens:not(#love-h-a) { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  html body .settings-imagens .profile-avatar-picker:not(#love-h-a):not(#love-h-b) { width: 88px; height: 88px; }
  html body .settings-imagens .profile-logo-picker:not(#love-h-a):not(#love-h-b) { height: 88px; }
  html body .settings-imagens .profile-logo-hint:not(#love-h-a) { font-size: 11px; }
}

/* Mídia › Adicionar imagens: as 6 vagas aparecem de uma vez (o "Adicionar"
   e quadradinhos vazios ao lado), em grade, sem precisar rolar. */
html body #product-gallery-list.product-gallery-strip:not(#love-h-a) { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; overflow: visible; }
html body #product-gallery-list .product-gallery-tile:not(#love-h-a),
html body #product-gallery-list .product-gallery-add:not(#love-h-a),
html body #product-gallery-list .product-gallery-vaga:not(#love-h-a) { width: 100%; height: auto; aspect-ratio: 1; }
html body .product-gallery-vaga:not(#love-h-a) {
  display: block; border: 1.5px dashed #E4E4E7; border-radius: 10px; background: #FCFCFC; cursor: pointer;
  transition: border-color .15s ease;
}
html body .product-gallery-vaga:hover:not(#love-h-a) { border-color: #A1A1AA; }
body[data-theme="dark"] .product-gallery-vaga { background: #1F1F1F !important; border-color: #404040 !important; }

/* Mídia › "+ Adicionar nova" no canto direito do título (só texto). */
html body .product-gallery-nova:not(#love-h-a) {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
  font-size: 0.8125rem; font-weight: 600; color: #52525B; text-transform: none; letter-spacing: normal;
}
html body .product-gallery-nova span:not(#love-h-a) { font-size: 1rem; line-height: 1; }
html body .product-gallery-nova:hover:not(#love-h-a) { color: #181D24; }
html body .product-gallery-nova[hidden]:not(#love-h-a) { display: none; }
body[data-theme="dark"] .product-gallery-nova { color: #D4D4D8 !important; }

/* ==========================================================================
   Oportunidades (pedidos de orçamento dos anfitriões) e o card de proposta
   no chat. Bordas finas, cards de 10px, etiquetas de 6px.
   ========================================================================== */
html body .op-filtros:not(#love-h-a) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 0 0 1.25rem; }
html body .op-filtro-categoria:not(#love-h-a) { margin: 0; border-bottom: none; }
html body .op-filtro-local:not(#love-h-a) { display: flex; gap: 0.5rem; }
html body .op-filtro-local .field-select:not(#love-h-a) { height: 38px; min-width: 160px; font-size: 0.875rem; }
html body .op-aviso:not(#love-h-a) { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--borda-suave); border-radius: 8px; background: #FAFAFA; font-size: 0.8125rem; color: #3F3F46; }
html body .op-aviso[hidden]:not(#love-h-a), html body .op-vazio[hidden]:not(#love-h-a) { display: none; }
html body .op-grade:not(#love-h-a) { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
html body .op-vazio:not(#love-h-a) { padding: 2.5rem 1.5rem; text-align: center; border: 1px dashed #E4E4E7; border-radius: 10px; background: #FFFFFF; font-size: 0.875rem; color: #71717A; }

html body .op-card:not(#love-h-a) {
  display: flex; flex-direction: column; gap: 0.55rem; padding: 1.1rem 1.2rem; cursor: pointer;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px; transition: border-color .15s ease;
}
html body .op-card:hover:not(#love-h-a), html body .op-card:focus-visible:not(#love-h-a) { border-color: #181D24; outline: none; }
html body .op-card-topo:not(#love-h-a) { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
html body .op-card-cat:not(#love-h-a) { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #71717A; }
html body .op-selo-novo:not(#love-h-a) { padding: 2px 7px; border-radius: 6px; background: #EBF4FF; color: #183b54; font-size: 0.6875rem; font-weight: 700; }
html body .op-card-titulo:not(#love-h-a) { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: #18181B; }
html body .op-card-dados:not(#love-h-a) { margin: 0; font-size: 0.8125rem; color: #52525B; line-height: 1.5; }
html body .op-card-faixa:not(#love-h-a) { margin: 0; font-size: 0.8125rem; font-weight: 600; color: #18181B; }
html body .op-fora-faixa:not(#love-h-a) { margin-left: 0.35rem; font-weight: 500; color: #1E9E5E; }
html body .op-tags:not(#love-h-a) { display: flex; flex-wrap: wrap; gap: 0.35rem; }
html body .op-tag:not(#love-h-a) { padding: 2px 8px; border: 1px solid var(--borda-suave); border-radius: 6px; font-size: 0.75rem; color: #3F3F46; background: #FAFAFA; }
html body .op-card-desc:not(#love-h-a) { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #52525B; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html body .op-card-rodape:not(#love-h-a) { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.6rem; border-top: 1px solid #F4F4F5; font-size: 0.75rem; color: #A1A1AA; }

html body .op-status:not(#love-h-a) { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
html body .op-status--enviada:not(#love-h-a) { background: #F4F4F5; color: #3F3F46; }
html body .op-status--vista:not(#love-h-a) { background: #EBF4FF; color: #183b54; }
html body .op-status--aceita:not(#love-h-a) { background: #E7F7EE; color: #1E7A4C; }
html body .op-status--recusada:not(#love-h-a) { background: #FDECEC; color: #B42318; }
html body .op-status--retirada:not(#love-h-a) { background: #F4F4F5; color: #A1A1AA; }

/* Detalhe do pedido (gaveta). */
html body .op-detalhe-quem:not(#love-h-a) { margin: 0 0 1rem; font-size: 0.8125rem; color: #71717A; }
html body .op-detalhe-dados:not(#love-h-a) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; margin: 0 0 1rem; }
html body .op-detalhe-dados dt:not(#love-h-a) { font-size: 0.75rem; color: #A1A1AA; margin: 0 0 0.15rem; }
html body .op-detalhe-dados dd:not(#love-h-a) { font-size: 0.875rem; color: #18181B; margin: 0; }
html body .op-detalhe-bloco:not(#love-h-a) { margin-top: 1.25rem; }
html body .op-detalhe-rotulo:not(#love-h-a) { font-size: 0.8125rem; font-weight: 700; color: #18181B; margin: 0 0 0.4rem; }
html body .op-detalhe-desc:not(#love-h-a) { font-size: 0.875rem; line-height: 1.6; color: #3F3F46; margin: 0; white-space: pre-wrap; }
html body .op-fotos:not(#love-h-a) { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.5rem; }
html body .op-foto:not(#love-h-a) { aspect-ratio: 1; padding: 0; border: 1px solid var(--borda-suave); border-radius: 8px; overflow: hidden; background: #FAFAFA; cursor: zoom-in; }
html body .op-foto img:not(#love-h-a) { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .op-detalhe-acao:not(#love-h-a) { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--borda-suave); }
html body .op-enviar-btn:not(#love-h-a) { width: 100%; height: 44px; justify-content: center; }
html body .op-ja-enviada:not(#love-h-a) { margin: 0; font-size: 0.875rem; color: #3F3F46; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
html body .op-foto-modal:not(#love-h-a) { align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
html body .op-foto-modal img:not(#love-h-a) { max-width: min(90vw, 960px); max-height: 85vh; border-radius: 10px; }

/* Pop-up Enviar proposta. */
html body .op-proposta-card:not(#love-h-a) { position: relative; max-width: 520px; width: calc(100% - 2rem); max-height: 90vh; overflow-y: auto; padding: 24px; border-radius: 10px; border: 1px solid var(--borda-suave); box-shadow: 0 8px 24px rgba(0,0,0,0.08); text-align: left; }
html body .op-proposta-sub:not(#love-h-a) { margin: 0 0 1.25rem; font-size: 0.8125rem; color: #71717A; }
html body .op-valor-linha:not(#love-h-a) { display: flex; align-items: center; gap: 0.75rem; }
html body .op-valor-linha .field-input:not(#love-h-a) { flex: 1; font-variant-numeric: tabular-nums; }
html body .op-faixa-pill:not(#love-h-a) { flex-shrink: 0; padding: 4px 8px; border-radius: 6px; background: #F4F4F5; font-size: 0.75rem; font-weight: 600; color: #3F3F46; white-space: nowrap; }
html body .op-alerta-faixa:not(#love-h-a) { margin: 0.5rem 0 0; padding: 0.55rem 0.75rem; border: 1px solid #FDE68A; border-radius: 8px; background: #FFFBEB; font-size: 0.8125rem; color: #92400E; }
html body .op-alerta-faixa[hidden]:not(#love-h-a), html body .op-enviada[hidden]:not(#love-h-a), html body #op-proposta-form[hidden]:not(#love-h-a) { display: none; }
html body .op-enviada p:not(#love-h-a) { margin: 0 0 1rem; font-size: 0.9375rem; color: #1E7A4C; font-weight: 600; }

/* Minhas propostas. */
html body .op-linha-aceita td:not(#love-h-a) { background: #F3FBF6 !important; }
html body .op-proximo-passo:not(#love-h-a) { display: block; margin-top: 0.2rem; font-size: 0.75rem; font-weight: 600; color: #1E7A4C; text-decoration: underline; text-underline-offset: 3px; }
html body .op-menu-wrap:not(#love-h-a) { position: relative; display: inline-flex; }
html body .op-menu:not(#love-h-a) { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 170px; padding: 4px; background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); display: flex; flex-direction: column; }
html body .op-menu[hidden]:not(#love-h-a) { display: none; }
html body .op-menu a:not(#love-h-a), html body .op-menu button:not(#love-h-a) { padding: 0.5rem 0.65rem; border: none; background: none; border-radius: 6px; text-align: left; font-family: inherit; font-size: 0.8125rem; color: #18181B; text-decoration: none; cursor: pointer; }
html body .op-menu a:hover:not(#love-h-a), html body .op-menu button:hover:not(#love-h-a) { background: #F4F4F5; }

/* Card de proposta dentro do chat (Mensagens). */
html body .chat-proposta-card:not(#love-h-a) { min-width: 240px; max-width: 340px; padding: 0.9rem 1rem; border: 1px solid var(--borda-suave); border-radius: 10px; background: #FFFFFF; text-align: left; color: #18181B; }
html body .chat-proposta-topo:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
html body .chat-proposta-titulo:not(#love-h-a) { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
html body .chat-proposta-inclui:not(#love-h-a) { margin: 0 0 0.4rem; font-size: 0.8125rem; line-height: 1.5; color: #3F3F46; white-space: pre-wrap; }
html body .chat-proposta-meta:not(#love-h-a) { margin: 0; font-size: 0.75rem; color: #71717A; }

body[data-theme="dark"] .op-card, body[data-theme="dark"] .op-vazio, body[data-theme="dark"] .chat-proposta-card, body[data-theme="dark"] .op-menu { background: #1F1F1F !important; border-color: #404040 !important; }
body[data-theme="dark"] .op-card-titulo, body[data-theme="dark"] .op-card-faixa, body[data-theme="dark"] .op-detalhe-dados dd, body[data-theme="dark"] .op-detalhe-rotulo, body[data-theme="dark"] .chat-proposta-card, body[data-theme="dark"] .op-menu a, body[data-theme="dark"] .op-menu button { color: #FFFFFF !important; }
body[data-theme="dark"] .op-tag { background: #252525 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
@media (max-width: 640px) {
  html body .op-filtro-local:not(#love-h-a) { width: 100%; }
  html body .op-filtro-local .field-select:not(#love-h-a) { flex: 1; min-width: 0; }
  html body .op-detalhe-dados:not(#love-h-a) { grid-template-columns: 1fr; }
}

/* A proposta no chat aparece como card solto (sem a bolha escura em volta). */
html body .chat-bubble-user-glass:has(> .chat-proposta-card):not(#love-h-a) { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: none !important; backdrop-filter: none !important; }

/* Rodapé enxuto: sem a linha de cima (não há mais bloco acima), links logo abaixo do ©. */
html body .b2b-footer-bottom--enxuto:not(#love-h-a) { margin-top: 0; padding-top: 0; border-top: none; align-items: flex-end; }
html body .b2b-footer-bottom--enxuto .b2b-footer-legal-links:not(#love-h-a) { margin-top: 0.4rem; gap: 1rem; }
html body .b2b-footer-bottom--enxuto .b2b-footer-legal-links a:not(#love-h-a) { font-size: 0.75rem; }

/* Rodapé: no mesmo cinza do fundo, com a linha horizontal fina de ponta a
   ponta em cima (como a do cabeçalho) e o texto centralizado. */
html body:not([data-theme="dark"]) .b2b-footer:not(#love-h-a) { background: var(--bg-dashboard); border-top: 1px solid var(--borda-suave); }
body[data-theme="dark"] .b2b-footer { background: var(--bg-dashboard) !important; border-top: 1px solid #404040 !important; }
html body .b2b-footer-bottom--enxuto:not(#love-h-a) { flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; }
html body .b2b-footer-bottom--enxuto p:not(#love-h-a) { margin: 0; }
html body .b2b-footer-bottom--enxuto .b2b-footer-legal-links:not(#love-h-a) { margin-top: 0; justify-content: center; }

/* Cabeçalho das telas (faixa do título) branco, como no love.com.br. Onde há
   subtítulo colado no título, a faixa do subtítulo também fica branca até a
   linha de baixo. */
html body:not([data-theme="dark"]) .b2b-header-bar:not(#love-h-a),
html body:not([data-theme="dark"]) .b2b-header-bar + p:not(#love-h-a) { background: #FFFFFF; }

/* Leads › Buscar eventos: o "Criar lead" some nessa aba; aviso sem produto. */
html body #leads-acoes-topo[hidden]:not(#love-h-a) { display: none !important; }
html body .op-sem-produtos:not(#love-h-a) { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
html body .op-sem-produtos[hidden]:not(#love-h-a) { display: none; }
html body .op-sem-produtos p:not(#love-h-a) { margin: 0; font-size: 0.9375rem; color: #3F3F46; }
html body .op-subabas:not(#love-h-a) { margin-bottom: 1rem; }
html body #op-conteudo[hidden]:not(#love-h-a) { display: none; }

/* Leads › Buscar eventos no modelo do Explorar (love.com.br): chips de
   cidade em cima e a lista com imagem larga à esquerda, linhas separadas
   por divisor fino (sem caixa nem sombra). */
html body .op-filtro-local:not(#love-h-a) { display: none; }
html body .op-chips:not(#love-h-a) { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; margin: 0 0 1.25rem; padding-bottom: 2px; }
html body .op-chips::-webkit-scrollbar { display: none; }
html body .op-chip:not(#love-h-a) {
  flex-shrink: 0; height: 32px; padding: 0 0.9rem; border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF;
  font-family: inherit; font-size: 0.75rem; font-weight: 600; color: #52525B; cursor: pointer; white-space: nowrap;
}
html body .op-chip:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .op-chip.is-ativo:not(#love-h-a) { background: #181D24; border-color: #181D24; color: #FFFFFF; }

html body .op-grade:not(#love-h-a) { display: flex; flex-direction: column; gap: 0; }
html body .op-item:not(#love-h-a) { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--borda-suave); cursor: pointer; outline: none; }
html body .op-item:first-child:not(#love-h-a) { border-top: none; padding-top: 0; }
html body .op-item-imagem:not(#love-h-a) {
  position: relative; flex-shrink: 0; width: 22rem; aspect-ratio: 14 / 5; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, #EFF6FF, #FAFAFA 55%, #FFF7ED); display: flex; align-items: center; justify-content: center;
}
html body .op-item-imagem img:not(#love-h-a) { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .op-item-imagem-cat:not(#love-h-a) { font-size: 0.875rem; font-weight: 700; color: #52525B; letter-spacing: -0.01em; }
html body .op-selo-sobre:not(#love-h-a) { position: absolute; top: 0.6rem; left: 0.6rem; background: #FFFFFF; }
html body .op-item-corpo:not(#love-h-a) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; }
html body .op-item-topo:not(#love-h-a) { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
html body .op-item-titulo:not(#love-h-a) { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; color: #18181B; transition: color .15s ease; }
html body .op-item:hover .op-item-titulo:not(#love-h-a), html body .op-item:focus-visible .op-item-titulo:not(#love-h-a) { color: #183b54; }
html body .op-item-quem:not(#love-h-a) { margin: 0.15rem 0 0; font-size: 0.875rem; font-weight: 500; color: #A1A1AA; }
html body .op-item-cta:not(#love-h-a) {
  flex-shrink: 0; display: inline-flex; align-items: center; height: 38px; padding: 0 1.1rem; border-radius: 8px;
  background: #333333; color: #FFFFFF; font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
}
html body .op-item:hover .op-item-cta:not(#love-h-a) { background: #222222; }
html body .op-item-desc:not(#love-h-a) { margin: 0; font-size: 0.875rem; line-height: 1.6; color: #71717A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .op-item-rodape:not(#love-h-a) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  margin-top: auto; padding-top: 0.85rem; border-top: 1px solid #F4F4F5;
}
html body .op-item-faixa:not(#love-h-a) { font-size: 0.875rem; font-weight: 600; color: #27272A; }
html body .op-item-meta:not(#love-h-a) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; font-size: 0.8125rem; color: #71717A; }
html body .op-item-cidade:not(#love-h-a) { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 500; color: #52525B; }
html body .op-item-cidade svg:not(#love-h-a) { width: 15px; height: 15px; color: #A1A1AA; }
body[data-theme="dark"] .op-item, body[data-theme="dark"] .op-item-rodape { border-color: #404040 !important; }
body[data-theme="dark"] .op-item-titulo, body[data-theme="dark"] .op-item-faixa { color: #FFFFFF !important; }
body[data-theme="dark"] .op-chip { background: #252525 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .op-chip.is-ativo { background: #FFFFFF !important; color: #181D24 !important; }
@media (max-width: 860px) {
  html body .op-item:not(#love-h-a) { flex-direction: column; gap: 1rem; }
  html body .op-item-imagem:not(#love-h-a) { width: 100%; }
}

/* Rodapé alinhado à esquerda, na mesma linha vertical do título do cabeçalho
   (o rodapé já usa o mesmo respiro lateral do conteúdo). */
html body .b2b-footer-bottom--enxuto:not(#love-h-a) { align-items: flex-start; text-align: left; }
html body .b2b-footer-bottom--enxuto .b2b-footer-legal-links:not(#love-h-a) { justify-content: flex-start; }

/* Rodapé numa linha só: Love Hub Ltda à esquerda, Privacidade e Termos à direita. */
html body .b2b-footer-bottom--enxuto:not(#love-h-a) { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
html body .b2b-footer-bottom--enxuto .b2b-footer-legal-links:not(#love-h-a) { justify-content: flex-end; }
html body .b2b-footer:not(#love-h-a) { padding-top: 1rem; padding-bottom: 1rem; }

/* Mais respiro entre o fim do conteúdo e o rodapé (era 1,5rem). */
html body .b2b-content > *:has(+ .b2b-footer):not(#love-h-a) { margin-bottom: 4.5rem; }

/* Leads › Buscar eventos em grade, no modelo do card do Explorar
   (love.com.br): imagem larga em cima, borda fina, cantos de 12px, sem
   sombra; a imagem dá um zoom leve no hover. */
html body .op-toolbar:not(#love-h-a) { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; margin: 0 0 1rem; }
html body .op-busca:not(#love-h-a) { width: 360px; max-width: 100%; margin: 0; }
html body .op-busca input:not(#love-h-a) { height: 38px; font-size: 0.875rem; border-radius: 8px; box-sizing: border-box; }
html body .op-grade:not(#love-h-a) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
html body .op-card2:not(#love-h-a) {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer; outline: none;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 12px;
}
html body .op-card2:focus-visible:not(#love-h-a) { border-color: #181D24; }
html body .op-card2-imagem:not(#love-h-a) {
  position: relative; width: 100%; aspect-ratio: 14 / 5; overflow: hidden;
  background: linear-gradient(135deg, #EFF6FF, #FAFAFA 55%, #FFF7ED); display: flex; align-items: center; justify-content: center;
}
html body .op-card2-imagem img:not(#love-h-a) { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
html body .op-card2:hover .op-card2-imagem img:not(#love-h-a) { transform: scale(1.05); }
html body .op-card2-corpo:not(#love-h-a) { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; }
html body .op-card2-titulo-linha:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
html body .op-card2-titulo:not(#love-h-a) { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: #18181B; }
html body .op-card2-titulo-linha .op-item-cidade:not(#love-h-a) { flex-shrink: 0; font-size: 0.8125rem; }
html body .op-card2-linha:not(#love-h-a) { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.875rem; color: #52525B; }
html body .op-card2-linha svg:not(#love-h-a) { width: 16px; height: 16px; color: #A1A1AA; flex-shrink: 0; }
html body .op-card2-acoes:not(#love-h-a) { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
html body .op-card2-ver:not(#love-h-a),
html body .op-card2-cta:not(#love-h-a),
html body .op-card2-status:not(#love-h-a) {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 38px; border-radius: 8px;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
html body .op-card2-ver:not(#love-h-a) { border: 1px solid var(--borda-suave); background: #FFFFFF; color: #18181B; }
html body .op-card2:hover .op-card2-ver:not(#love-h-a) { border-color: #181D24; }
html body .op-card2-cta:not(#love-h-a) { background: #333333; color: #FFFFFF; }
html body .op-card2:hover .op-card2-cta:not(#love-h-a) { background: #222222; }
body[data-theme="dark"] .op-card2 { background: #1F1F1F !important; border-color: #404040 !important; }
body[data-theme="dark"] .op-card2-titulo { color: #FFFFFF !important; }
body[data-theme="dark"] .op-card2-ver { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
@media (max-width: 1100px) { html body .op-grade:not(#love-h-a) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  html body .op-grade:not(#love-h-a) { grid-template-columns: 1fr; }
  html body .op-busca:not(#love-h-a) { width: 100%; }
}

/* Meus produtos: busca e "Criar produto" com a mesma altura (38px), lado a
   lado e centralizados com o título. */
html body .produtos-header-acoes:not(#love-h-a) { align-items: center; flex-wrap: nowrap; }
html body .produtos-header-acoes .produtos-busca:not(#love-h-a) { height: 38px; display: flex; align-items: center; margin: 0; }
html body .produtos-header-acoes .tabela-busca input:not(#love-h-a) { height: 38px; }
html body .produtos-header-acoes #product-add-btn:not(#love-h-a) { height: 38px; min-height: 38px; flex-shrink: 0; }
@media (max-width: 640px) { html body .produtos-header-acoes:not(#love-h-a) { flex-wrap: wrap; } }

/* Mais respiro entre o fim do conteúdo e o rodapé em todas as telas (era 4,5rem). */
html body .b2b-content > *:has(+ .b2b-footer):not(#love-h-a) { margin-bottom: 6.5rem; }

/* O respiro antes do rodapé é um bloco fixo (6,5rem); a margem antiga do
   último elemento deixa de valer para não somar. */
html body .b2b-content > *:has(+ .b2b-footer-respiro):not(#love-h-a),
html body .b2b-content > .b2b-footer-respiro:not(#love-h-a) { margin-bottom: 0; }
html body .b2b-footer-respiro:not(#love-h-a) { flex-shrink: 0; height: 6.5rem; }
body[data-page="chat"] .b2b-footer-respiro { display: none; }

/* Construtor de sites: o editor começa colado no cabeçalho (sem a margem
   nem a 2ª linha entre o subtítulo e a barra Site Principal). Botão quadrado
   "Ver meu site" à esquerda do Salvar, na mesma cor dele. */
html body[data-page="paginas-site"] .b2b-header-bar + p:not(#love-h-a) { margin-bottom: 0; }
html body[data-page="paginas-site"] .builder-wrap:not(#love-h-a) { margin-top: 0; border-top: none; }
html body[data-page="paginas-site"] .builder-narrow-notice:not(#love-h-a) { margin-top: 1rem; }
html body .builder-ver-site:not(#love-h-a) { width: 38px; min-width: 38px; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
html body .builder-ver-site svg:not(#love-h-a) { width: 16px; height: 16px; }

/* Construtor › Formulários: a lista não fica colada no cabeçalho (só o editor fica). */
html body[data-page="paginas-site"].site-aba-formularios .b2b-header-bar + p:not(#love-h-a) { margin-bottom: 1.5rem; }

/* Vendas › Meus contratos: menu ⋯ (detalhes e nota fiscal), selo do
   contrato de exemplo (sandbox) e o pop-up da nota fiscal. */
html body .contrato-menu-wrap:not(#love-h-a) { position: relative; display: inline-flex; }
html body .leads-table-wrap:has(.op-menu:not([hidden])):not(#love-h-a) { overflow: visible; }
html body .contrato-exemplo:not(#love-h-a) { margin-left: 0.4rem; padding: 2px 7px; border-radius: 6px; background: #FEF3C7; color: #92400E; font-size: 0.6875rem; font-weight: 700; vertical-align: middle; }
html body .nf-modal-card:not(#love-h-a) { position: relative; max-width: 440px; width: calc(100% - 2rem); padding: 24px; border-radius: 10px; border: 1px solid var(--borda-suave); box-shadow: 0 8px 24px rgba(0,0,0,0.08); text-align: left; }
html body .nf-aviso:not(#love-h-a) { margin: 0 0 1rem; padding: 0.55rem 0.75rem; border: 1px solid #FDE68A; border-radius: 8px; background: #FFFBEB; font-size: 0.8125rem; color: #92400E; }
html body .nf-erro:not(#love-h-a) { margin: 0; font-size: 0.875rem; color: #DC2626; }
html body .nf-dados:not(#love-h-a) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; margin: 0 0 1.25rem; }
html body .nf-dados dt:not(#love-h-a) { font-size: 0.75rem; color: #A1A1AA; margin: 0 0 0.15rem; }
html body .nf-dados dd:not(#love-h-a) { font-size: 0.875rem; color: #18181B; margin: 0; font-variant-numeric: tabular-nums; }
html body .nf-pdf-btn:not(#love-h-a) { width: 100%; height: 44px; justify-content: center; }
body[data-theme="dark"] .nf-dados dd { color: #FFFFFF !important; }

/* Botões do cabeçalho cortados ao meio: o subtítulo sobe colado no título e
   tem fundo branco, então pintava por cima da metade de baixo dos botões
   (Novo orçamento, Criar produto…). O conteúdo da faixa fica por cima. */
html body .b2b-header-bar > *:not(#love-h-a) { position: relative; z-index: 1; }

/* ==========================================================================
   Construtor › Seus formulários: editor na própria página (modelo Google
   Forms), no lugar da gaveta. Cabeçalho em card com faixa colorida em cima,
   perguntas em cards (a ativa ganha a faixa azul à esquerda) e a barra
   lateral com o "+" para adicionar pergunta.
   ========================================================================== */
html body #form-drawer:not(.show):not(#love-h-a) { display: none; }
html body.form-editor-aberto #forms-list:not(#love-h-a) { display: none; }
html body.form-editor-aberto #form-drawer-backdrop:not(#love-h-a) { display: none !important; }
html body #form-drawer.show:not(#love-h-a) {
  position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; z-index: 1;
  transform: none; width: 100%; max-width: 770px; height: auto; max-height: none; margin: 0 auto;
  padding: 0 0 2rem; background: transparent; border: none; box-shadow: none; overflow: visible;
  display: flex; flex-direction: column; gap: 0.75rem;
}

/* Cabeçalho: título e descrição num card com a faixa da cor primária em cima. */
html body #form-drawer .form-drawer-header:not(#love-h-a) {
  position: relative; display: block; padding: 1.5rem 1.5rem 1.25rem; background: #FFFFFF;
  border: 1px solid var(--borda-suave); border-top: 10px solid #183b54; border-radius: 10px; box-shadow: none;
}
html body #form-drawer .form-drawer-header-main:not(#love-h-a) { display: flex; flex-direction: column; gap: 0.75rem; padding-right: 2.5rem; }
html body #form-drawer .form-drawer-title-input:not(#love-h-a) {
  width: 100%; border: none; border-bottom: 1px solid transparent; background: transparent; padding: 0 0 0.35rem;
  font-family: inherit; font-size: 2rem; font-weight: 400; line-height: 1.25; color: #18181B; outline: none;
}
html body #form-drawer .form-drawer-description-input:not(#love-h-a) {
  width: 100%; border: none; border-bottom: 1px solid transparent; background: transparent; padding: 0 0 0.35rem;
  font-family: inherit; font-size: 0.9375rem; color: #52525B; resize: none; outline: none;
}
html body #form-drawer .form-drawer-title-input:focus:not(#love-h-a),
html body #form-drawer .form-drawer-description-input:focus:not(#love-h-a) { border-bottom-color: #183b54; }
html body #form-drawer .form-drawer-bg-field:not(#love-h-a) { margin-top: 1rem; }
html body #form-drawer .form-drawer-close:not(#love-h-a) { position: absolute; top: 0.85rem; right: 0.85rem; }

/* Perguntas em cards. */
html body #form-drawer .form-drawer-body:not(#love-h-a) { padding: 0; overflow: visible; background: transparent; display: flex; flex-direction: column; gap: 0.75rem; }
html body #form-drawer .form-field-card:not(#love-h-a) {
  position: relative; padding: 1.5rem 1.5rem 0.75rem; background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px; box-shadow: none;
}
html body #form-drawer .form-field-card:focus-within:not(#love-h-a) { box-shadow: inset 6px 0 0 #4285F4; }
html body #form-drawer .form-field-card-header:not(#love-h-a) { display: flex; align-items: flex-start; gap: 1rem; }
html body #form-drawer .form-field-question-input:not(#love-h-a) {
  flex: 1; min-width: 0; height: 56px; padding: 0 1rem; border: none; border-bottom: 1px solid #A1A1AA; border-radius: 4px 4px 0 0;
  background: #F4F4F5; font-family: inherit; font-size: 1rem; color: #18181B; outline: none;
}
html body #form-drawer .form-field-question-input:focus:not(#love-h-a) { border-bottom: 2px solid #183b54; }
html body #form-drawer .form-field-type-select:not(#love-h-a) {
  width: 240px; flex-shrink: 0; height: 48px; padding: 0 0.85rem; border: 1px solid var(--borda-suave); border-radius: 8px; background-color: #FFFFFF;
  font-family: inherit; font-size: 0.9375rem; color: #18181B;
}
html body #form-drawer .form-field-body:not(#love-h-a) { padding: 1rem 0 0.5rem; }
html body #form-drawer .form-field-footer:not(#love-h-a) {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--borda-suave);
}
html body #form-drawer .form-field-footer-actions:not(#love-h-a) { display: flex; align-items: center; gap: 0.25rem; padding-right: 0.75rem; border-right: 1px solid var(--borda-suave); }

/* Barra lateral com o "+" (adicionar pergunta), presa ao lado das perguntas. */
html body #form-drawer .form-drawer-add-field-wrap:not(#love-h-a) {
  position: sticky; bottom: 1.5rem; align-self: flex-end; margin-right: -4.25rem; margin-top: -3.5rem;
  padding: 0.35rem; background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); z-index: 2;
}
html body #form-drawer .form-add-field-btn:not(#love-h-a) {
  width: 40px; height: 40px; padding: 0; border: none; border-radius: 8px; background: transparent; cursor: pointer;
  font-size: 0; color: #3F3F46; display: inline-flex; align-items: center; justify-content: center; position: relative;
}
html body #form-drawer .form-add-field-btn:not(#love-h-a)::before {
  content: '+'; width: 24px; height: 24px; border: 2px solid currentColor; border-radius: 999px;
  font-size: 18px; font-weight: 600; line-height: 20px; text-align: center;
}
html body #form-drawer .form-add-field-btn:hover:not(#love-h-a) { color: #181D24; background: #F4F4F5; }

/* Rodapé: Salvar formulário na largura do editor. */
html body #form-drawer .form-drawer-footer:not(#love-h-a) { position: static; padding: 0.5rem 0 0; background: transparent; border: none; box-shadow: none; }
html body #form-drawer .form-drawer-footer .btn-primary:not(#love-h-a) { height: 44px; }

body[data-theme="dark"] #form-drawer .form-drawer-header,
body[data-theme="dark"] #form-drawer .form-field-card,
body[data-theme="dark"] #form-drawer .form-drawer-add-field-wrap { background: #1F1F1F !important; border-color: #404040 !important; }
body[data-theme="dark"] #form-drawer .form-drawer-title-input,
body[data-theme="dark"] #form-drawer .form-field-question-input { color: #FFFFFF !important; }
body[data-theme="dark"] #form-drawer .form-field-question-input { background: #252525 !important; }
@media (max-width: 900px) {
  html body #form-drawer .form-drawer-add-field-wrap:not(#love-h-a) { margin-right: 0; margin-top: 0; align-self: center; }
  html body #form-drawer .form-field-card-header:not(#love-h-a) { flex-direction: column; }
  html body #form-drawer .form-field-type-select:not(#love-h-a) { width: 100%; }
}

/* Com cor/imagem de fundo escolhida, o fundo aparece atrás dos cards (como o fundo do Google Forms). */
html body #form-drawer.show.has-custom-bg:not(#love-h-a) { padding: 1.25rem; border-radius: 10px; }

/* Cor primária da Love (#183b54) na faixa da pergunta em edição do
   formulário e no menu lateral (no lugar do quase preto #181D24). */
html body #form-drawer .form-field-card:focus-within:not(#love-h-a) { box-shadow: inset 6px 0 0 #183b54; }
html body:not([data-theme="dark"]) .b2b-sidebar:not(#love-h-a),
html body.sidebar-collapsed:not([data-theme="dark"]) .b2b-sidebar:not(#love-h-a) { background-color: #183b54; }
html body:not([data-theme="dark"]) .sidebar-edge-toggle:not(#love-h-a) { background-color: #183b54; }

/* Menu do perfil: só o e-mail ao lado da foto (sem o nome), centralizado na altura. */
html body #profile-dropdown-name:not(#love-h-a) { display: none !important; }
html body .profile-dropdown-header:not(#love-h-a) { align-items: center; }
html body .profile-dropdown-header .profile-dropdown-email:not(#love-h-a) { margin: 0; font-size: 0.8125rem; color: #3F3F46; }
body[data-theme="dark"] .profile-dropdown-header .profile-dropdown-email { color: #D4D4D8 !important; }

/* Dica dos ícones do topo (data-dica): caixinha branca com borda fina e sombra
   de overlay, no lugar da caixinha preta do navegador (igual ao love.com.br). */
.love-dica { position: fixed; z-index: 10000; padding: 6px 10px; background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; font-weight: 500; line-height: 1.35; color: #18181B; white-space: pre-line; max-width: 320px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s ease; }
.love-dica.is-visivel { opacity: 1; visibility: visible; }
body[data-theme="dark"] .love-dica { background: #1F2329; border-color: rgba(255, 255, 255, 0.1); color: #F4F4F5; }

/* Dashboard › Analytics: sem o botão de calendário (período) por enquanto. */
html body .dash-analytics-period-wrap:not(#love-h-a) { display: none !important; }

/* Subtítulo escondido (ex.: Editar meu site): a linha volta para a faixa do título. */
html body:not([data-theme="dark"]) .b2b-header-bar:has(+ p[hidden]):not(#love-h-a) { border-bottom: 1px solid var(--borda-suave) !important; }
html body .b2b-header-bar + p[hidden]:not(#love-h-a) { display: none !important; }

/* Configurações (Suas informações, Sua empresa, Preferências, Privacidade,
   Dados bancários, URLs) e Privacidade/Termos: a coluna de caixas fica
   centralizada no espaço, como o editor de formulário. */
html body .settings-shell [data-settings-panel]:not(.verificacao-aberta):not(#love-h-a) { max-width: 40rem; width: 100%; margin-left: auto; margin-right: auto; }
html body .settings-shell [data-settings-panel]:not(.verificacao-aberta) > *:not(#love-h-a) { margin-left: auto; margin-right: auto; width: 100%; }
html body .settings-shell [data-settings-panel].verificacao-aberta:not(#love-h-a) { margin-left: auto; margin-right: auto; }
html body .legal-doc-coluna:not(#love-h-a) { max-width: 760px; width: 100%; margin: 0 auto; }

/* Editar meu site: sem subtítulo, a barra do editor (Site Principal) encosta
   direto na linha do cabeçalho, sem o espaço da margem de baixo da faixa. */
html body[data-page="paginas-site"]:not(.site-aba-formularios) .b2b-header-bar:not(#love-h-a) { margin-bottom: 0; }

/* Editar meu site: um cabeçalho só. Título com a seta (Site Principal / Meu
   checkout) à esquerda; aparelhos, Desfazer/Refazer, Ver meu site, Salvar e
   Publicar à direita. A barra de baixo do editor some. */
html body.site-barra-no-cabecalho .builder-wrap > .builder-toolbar:not(#love-h-a) { display: none; }
html body.site-barra-no-cabecalho .b2b-header-bar:not(#love-h-a) { flex-wrap: nowrap; gap: 1rem; }
html body.site-barra-no-cabecalho #builder-page-switcher:not(#love-h-a) { position: relative; min-width: 0; }
html body.site-barra-no-cabecalho #builder-page-select-btn:not(#love-h-a) {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; border: none; background: none; cursor: pointer; color: #18181B;
}
html body.site-barra-no-cabecalho #builder-page-select-btn h2:not(#love-h-a) { margin: 0; }
html body.site-barra-no-cabecalho #builder-page-select-label:not(#love-h-a) { display: none; }
html body .site-seletor-seta:not(#love-h-a) { width: 20px; height: 20px; color: #52525B; flex-shrink: 0; transition: transform .15s ease; }
html body #builder-page-select-btn[aria-expanded="true"] .site-seletor-seta:not(#love-h-a) { transform: rotate(180deg); }
html body.site-barra-no-cabecalho #builder-page-dropdown:not(#love-h-a) { left: 0; right: auto; top: calc(100% + 8px); min-width: 200px; z-index: 30; }
html body .site-cabecalho-acoes:not(#love-h-a) { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; flex-shrink: 0; }
html body .site-cabecalho-acoes .builder-toolbar-right:not(#love-h-a) { display: flex; align-items: center; gap: 0.5rem; }
/* Formulários: o título é só texto (sem seta nem menu) e os botões do editor somem. */
html body.site-aba-formularios .site-cabecalho-acoes:not(#love-h-a),
html body.site-aba-formularios .site-seletor-seta:not(#love-h-a),
html body.site-aba-formularios #builder-page-dropdown:not(#love-h-a) { display: none !important; }
html body.site-aba-formularios #builder-page-select-btn:not(#love-h-a) { pointer-events: none; cursor: default; }
/* Tela estreita: o editor não aparece, então os botões dele também não. */
@media (max-width: 1180px) {
  html body .site-cabecalho-acoes:not(#love-h-a), html body .site-seletor-seta:not(#love-h-a) { display: none; }
  html body #builder-page-select-btn:not(#love-h-a) { pointer-events: none; }
}

/* Editar meu site › botões que subiram para o cabeçalho: as mesmas cores de
   quando estavam na barra do editor (o cabeçalho deixava todos escuros).
   Salvar e Ver meu site claros; Publicar na cor primária. Aparelhos no centro. */
html body.site-barra-no-cabecalho .b2b-header-bar #builder-save:not(#love-h-a),
html body.site-barra-no-cabecalho .b2b-header-bar #builder-ver-site:not(#love-h-a) { background: #FFFFFF; border: 1px solid var(--borda-suave); color: #3F3F46; }
html body.site-barra-no-cabecalho .b2b-header-bar #builder-save:hover:not(#love-h-a),
html body.site-barra-no-cabecalho .b2b-header-bar #builder-ver-site:hover:not(#love-h-a) { background: #FFFFFF; border-color: #181D24; color: #181D24; }
html body.site-barra-no-cabecalho .b2b-header-bar #builder-publish:not(#love-h-a) { background: #183b54; border: 1px solid #183b54; color: #FFFFFF; }
html body.site-barra-no-cabecalho .b2b-header-bar #builder-publish:hover:not(#love-h-a) { background: #122c3f; border-color: #122c3f; color: #FFFFFF; }
html body.site-barra-no-cabecalho .b2b-header-bar:not(#love-h-a) { position: relative; }
html body.site-barra-no-cabecalho .b2b-header-bar > #builder-device-toggle:not(#love-h-a) { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
html body.site-aba-formularios .b2b-header-bar > #builder-device-toggle:not(#love-h-a) { display: none !important; }
@media (max-width: 1180px) { html body .b2b-header-bar > #builder-device-toggle:not(#love-h-a) { display: none; } }

/* Editar meu site: sem rodapé; o editor (painel de Elementos e o site) vai
   até o fim da janela do navegador, em vez da altura fixa de 640px. */
html body[data-page="paginas-site"]:not(.site-aba-formularios) .b2b-footer:not(#love-h-a),
html body[data-page="paginas-site"]:not(.site-aba-formularios) .b2b-footer-respiro:not(#love-h-a) { display: none !important; }
html body[data-page="paginas-site"]:not(.site-aba-formularios) .b2b-content:not(#love-h-a) { padding-bottom: 0; }
html body[data-page="paginas-site"]:not(.site-aba-formularios) [data-tab-panel="editar"]:not(#love-h-a) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
html body[data-page="paginas-site"]:not(.site-aba-formularios) .builder-wrap:not(#love-h-a) { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
html body[data-page="paginas-site"]:not(.site-aba-formularios) .builder-body:not(#love-h-a) { flex: 1 1 auto; height: auto; min-height: 0; }

/* Construtor ativo (caixinha no item de cima); o submenu marca a opção
   aberta só com o texto em branco e negrito, sem outra caixinha. */
html body .sidebar-nav-group--construtor .sidebar-subnav-item.active:not(#love-h-a) { background: transparent; color: #FFFFFF; font-weight: 700; }
html body .sidebar-nav-toggle.active:hover:not(#love-h-a) { background: #EBF4FF; color: #181D24; }

/* Cadastrar nova conta: as etapas e a caixa centralizadas no espaço. */
html body .nova-empresa-etapas:not(#love-h-a),
html body .nova-empresa-card:not(#love-h-a) { width: 100%; margin-left: auto; margin-right: auto; }
html body .nova-empresa-etapas:not(#love-h-a) { max-width: 720px; }

/* Cadastrar nova conta › etapas no modelo das abas de Meus convidados
   (love.com.br): grudadas no topo da caixa, na largura toda, divididas por
   igual, com a linha fina embaixo e a etapa atual sublinhada. */
html body #nova-empresa-form.nova-empresa-card:not(#love-h-a) { padding-top: 0; overflow: hidden; }
html body #nova-empresa-form .nova-empresa-etapas:not(#love-h-a) {
  display: flex; flex-wrap: nowrap; gap: 0; max-width: none; width: auto;
  margin: 0 -1.5rem 1.5rem; padding: 0 1rem; border-bottom: 1px solid var(--borda-suave);
}
html body #nova-empresa-form .nova-empresa-etapas[hidden]:not(#love-h-a) { display: none; }
html body #nova-empresa-form .nova-empresa-seta:not(#love-h-a) { display: none; }
html body #nova-empresa-form .nova-empresa-etapa:not(#love-h-a) {
  flex: 1 1 0; justify-content: center; padding: 12px 8px 10px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font-size: 13px; font-weight: 600; color: #71717A; white-space: nowrap;
}
html body #nova-empresa-form .nova-empresa-etapa.is-ativa:not(#love-h-a) { color: #333333; font-weight: 700; border-bottom-color: #333333; }
body[data-theme="dark"] #nova-empresa-form .nova-empresa-etapas { border-bottom-color: #404040 !important; }

/* Cadastrar nova conta: as abas das etapas ficam logo acima da caixa, sem
   fundo (transparente), e a caixa começa reta embaixo da linha delas. */
html body .nova-empresa-etapas:not(#love-h-a) {
  display: flex; flex-wrap: nowrap; gap: 0; max-width: 720px; width: 100%; margin: 0 auto; padding: 0 1rem;
  background: transparent; border: none; border-bottom: 1px solid var(--borda-suave);
}
html body .nova-empresa-etapas[hidden]:not(#love-h-a) { display: none; }
html body .nova-empresa-etapas .nova-empresa-seta:not(#love-h-a) { display: none; }
html body .nova-empresa-etapas .nova-empresa-etapa:not(#love-h-a) {
  flex: 1 1 0; justify-content: center; padding: 12px 8px 10px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font-size: 13px; font-weight: 600; color: #71717A; white-space: nowrap;
}
html body .nova-empresa-etapas .nova-empresa-etapa.is-ativa:not(#love-h-a) { color: #333333; font-weight: 700; border-bottom-color: #333333; }
html body #nova-empresa-form.nova-empresa-card:not(#love-h-a) { padding-top: 1.5rem; border-top: none !important; border-top-left-radius: 0; border-top-right-radius: 0; }

/* Seus formulários: botão "Criar novo" no cabeçalho (só nessa aba) e a caixa
   vazia no estilo da de Buscar eventos, com o botão centralizado embaixo. */
html body .site-form-criar:not(#love-h-a) { display: none; }
html body.site-aba-formularios .site-form-criar:not(#love-h-a) { display: inline-flex; margin-left: auto; flex-shrink: 0; }
html body .forms-vazio:not(#love-h-a) { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
html body .forms-vazio p:not(#love-h-a) { margin: 0; }
html body #forms-list:has(.forms-vazio):not(#love-h-a) { display: block; }

/* Seus formulários: com o editor aberto, a caixa "nenhum formulário" some
   (antes ficava uma em cima da outra). A lista e a caixa vazia ficam
   centralizadas na mesma largura do editor de formulário (770px). */
html body.form-editor-aberto #forms-list:has(.forms-vazio):not(#love-h-a),
html body.form-editor-aberto #forms-list:not(#love-h-a) { display: none !important; }
html body #forms-list:not(#love-h-a) { max-width: 770px; width: 100%; margin-left: auto; margin-right: auto; }
html body .forms-vazio:not(#love-h-a) { text-align: center; }

/* ==========================================================================
   Meus produtos › Adicionar novo produto na própria página (sem gaveta):
   a vitrine some, o título muda e aparece "Voltar"; as etapas (Categoria,
   Detalhes, Mídia) ficam como as abas de Cadastrar nova conta, na largura
   da caixa, e o formulário numa caixa centralizada.
   ========================================================================== */
html body #product-drawer:not(.show):not(#love-h-a) { display: none; }
html body.produto-editor-aberto #products-grid:not(#love-h-a),
html body.produto-editor-aberto #category-tabs:not(#love-h-a),
html body.produto-editor-aberto .produtos-header-acoes:not(#love-h-a),
html body.produto-editor-aberto #product-drawer-backdrop:not(#love-h-a) { display: none !important; }
html body.produto-editor-aberto .b2b-header-bar + p:not(#love-h-a) { display: none !important; }
html body.produto-editor-aberto .b2b-header-bar:not(#love-h-a) { border-bottom: 1px solid var(--borda-suave) !important; }

/* Cabeçalho: "Voltar" à esquerda do título. */
html body .produto-titulo-wrap:not(#love-h-a) { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
html body .produto-voltar:not(#love-h-a) {
  display: inline-flex; align-items: center; gap: 0.3rem; height: 38px; padding: 0 0.85rem 0 0.6rem;
  border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF; color: #3F3F46;
  font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
html body .produto-voltar:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .produto-voltar[hidden]:not(#love-h-a) { display: none; }

/* O editor dentro da página. */
html body #product-drawer.show:not(#love-h-a) {
  position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; z-index: 1;
  transform: none; width: 100%; max-width: 720px; height: auto; max-height: none; margin: 0 auto;
  background: transparent; border: none; box-shadow: none; overflow: visible; display: flex; flex-direction: column;
}
/* Etapas no topo, como em Cadastrar nova conta (sem o título e o X da gaveta). */
html body #product-drawer .form-drawer-header:not(#love-h-a) { padding: 0; border: none; background: transparent; min-height: 0; }
html body #product-drawer #product-drawer-title:not(#love-h-a),
html body #product-drawer #product-drawer-close:not(#love-h-a) { display: none; }
html body #product-drawer .form-drawer-header-main:not(#love-h-a) { width: 100%; }
html body #product-drawer .product-wizard-tabs:not(#love-h-a) {
  display: flex; gap: 0; width: 100%; margin: 0; padding: 0 1rem; background: transparent; border: none; border-bottom: 1px solid var(--borda-suave);
}
html body #product-drawer .product-wizard-tab:not(#love-h-a) {
  flex: 1 1 0; height: auto; padding: 12px 8px 10px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; box-shadow: none; font-size: 13px; font-weight: 600; color: #71717A; text-align: center; white-space: nowrap; cursor: pointer;
}
html body #product-drawer .product-wizard-tab:hover:not(#love-h-a) { background: transparent; color: #3F3F46; }
html body #product-drawer .product-wizard-tab.active:not(#love-h-a),
html body #product-drawer .product-wizard-tab.is-active:not(#love-h-a),
html body #product-drawer .product-wizard-tab[aria-selected="true"]:not(#love-h-a) { background: transparent; color: #333333; font-weight: 700; border-bottom-color: #333333; }
/* A caixa do formulário, reta em cima (logo abaixo das etapas). */
html body #product-drawer .form-drawer-body:not(#love-h-a) {
  padding: 1.5rem; overflow: visible; background: #FFFFFF; border: 1px solid var(--borda-suave); border-top: none; border-radius: 0;
}
html body #product-drawer .product-wizard-footer:not(#love-h-a) {
  position: static; padding: 1rem 1.5rem; background: #FFFFFF; border: 1px solid var(--borda-suave); border-top: 1px solid #F4F4F5;
  border-radius: 0 0 10px 10px; box-shadow: none;
}
body[data-theme="dark"] #product-drawer .form-drawer-body,
body[data-theme="dark"] #product-drawer .product-wizard-footer { background: #1F1F1F !important; border-color: #404040 !important; }

/* Adicionar novo produto: o "Voltar" é só a setinha à esquerda do título. */
html body .produto-voltar:not(#love-h-a) { height: auto; padding: 0; border: none; background: none; color: #18181B; gap: 0; margin-left: -4px; }
html body .produto-voltar:hover:not(#love-h-a) { border: none; color: #52525B; }
html body .produto-titulo-wrap:not(#love-h-a) { gap: 0.35rem; }

/* Adicionar novo produto: as etapas (Categoria, Detalhes, Mídia) abrem num
   2º menu lateral branco, igual ao de Configurações, colado no menu de
   ícones e indo até o fim da tela; o formulário fica à direita. */
html body[data-page="produtos"] .b2b-main:not(#love-h-a) { position: relative; }
html body.produto-editor-aberto[data-page="produtos"] .b2b-content:not(#love-h-a) { margin-left: 240px; }
html body.produto-editor-aberto #product-drawer.show:not(#love-h-a) { position: static; }
html body.produto-editor-aberto #product-drawer .product-wizard-tabs:not(#love-h-a) {
  position: absolute; top: var(--topbar-height); left: 0; bottom: 0; width: 240px; z-index: 5;
  display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem;
  margin: 0; padding: 16px; background: #FFFFFF; border: none; border-right: 1px solid var(--borda-suave); overflow-y: auto;
}
html body.produto-editor-aberto #product-drawer .product-wizard-tabs:not(#love-h-a)::before {
  content: "Etapas"; display: block; padding: 0 0 0.75rem; margin: 0 0 0.25rem; border-bottom: 1px solid #F4F4F5;
  font-size: 14px; font-weight: 700; letter-spacing: -0.02em; line-height: 20px; color: #18181B;
}
html body.produto-editor-aberto #product-drawer .product-wizard-tab:not(#love-h-a) {
  flex: 0 0 auto; width: 100%; height: auto; margin: 0; padding: 0.65rem 0.85rem; text-align: left;
  border: 1px solid transparent; border-radius: 0 8px 8px 0; background: transparent; box-shadow: none;
  font-size: 13px; font-weight: 600; letter-spacing: -0.16px; line-height: 19.5px; color: #475569;
}
html body.produto-editor-aberto #product-drawer .product-wizard-tab:hover:not(#love-h-a) { background: #F4F4F5; color: #18181B; }
html body.produto-editor-aberto #product-drawer .product-wizard-tab.is-active:not(#love-h-a) { background: #F4F4F5; color: #333333; font-weight: 700; border-bottom-color: transparent; }
/* Sem as abas no topo, a caixa do formulário volta a ter os cantos de cima arredondados. */
html body.produto-editor-aberto #product-drawer .form-drawer-body:not(#love-h-a) { border-top: 1px solid var(--borda-suave); border-radius: 10px 10px 0 0; }
@media (max-width: 900px) {
  html body.produto-editor-aberto[data-page="produtos"] .b2b-content:not(#love-h-a) { margin-left: 0; }
  html body.produto-editor-aberto #product-drawer .product-wizard-tabs:not(#love-h-a) { position: static; width: auto; flex-direction: row; padding: 0 0 1rem; border-right: none; background: transparent; }
  html body.produto-editor-aberto #product-drawer .product-wizard-tabs:not(#love-h-a)::before { display: none; }
}

/* Configurações › Suas informações: "Salvar" claro no cabeçalho. */
html body .b2b-header-bar .settings-salvar-topo:not(#love-h-a) { height: 38px; padding: 0 1rem; background: #FFFFFF; border: 1px solid var(--borda-suave); color: #3F3F46; }
html body .b2b-header-bar .settings-salvar-topo:hover:not(#love-h-a) { background: #FFFFFF; border-color: #181D24; color: #181D24; }
html body .settings-salvar-topo[hidden]:not(#love-h-a) { display: none !important; }

/* Correção: o cabeçalho da antiga gaveta é "position: relative", então o menu
   das etapas ficava preso nele (em cima do formulário). Sem isso, ele se
   prende à área do Hub e vira o 2º menu lateral de verdade. */
html body.produto-editor-aberto #product-drawer .form-drawer-header:not(#love-h-a),
html body.produto-editor-aberto #product-drawer .form-drawer-header-main:not(#love-h-a) { position: static; }

/* ==========================================================================
   Produto: criar × editar.
   - Criando: uma etapa de cada vez, sem menu lateral. Título grande da etapa
     à esquerda e a caixa à direita; Cancelar/Voltar e Continuar fora da
     caixa, embaixo à direita (modelo da 1ª imagem).
   - Editando: o cabeçalho vai de ponta a ponta e o menu lateral (Categoria,
     Detalhes, Mídia, sem o título "Etapas") começa logo abaixo dele.
   ========================================================================== */
html body.produto-editor-aberto[data-page="produtos"] .b2b-content:not(#love-h-a) { margin-left: 0; }
html body.produto-editor-aberto #product-drawer .product-wizard-tabs:not(#love-h-a)::before { display: none; content: none; }

/* Criando */
html body.produto-modo-criar #product-drawer .form-drawer-header:not(#love-h-a) { display: none; }
html body.produto-modo-criar #product-drawer.show:not(#love-h-a) {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 3rem; align-items: start; max-width: 1040px;
}
html body.produto-modo-criar #produto-etapa-titulo:not(#love-h-a) {
  grid-column: 1; grid-row: 1 / span 2; margin: 0.25rem 0 0; font-size: 2rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; color: #18181B;
}
html body.produto-modo-criar #product-drawer .form-drawer-body:not(#love-h-a) { grid-column: 2; grid-row: 1; border: 1px solid var(--borda-suave); border-radius: 10px; }
html body.produto-modo-criar #product-drawer .product-wizard-footer:not(#love-h-a) {
  grid-column: 2; grid-row: 2; padding: 1.25rem 0 0; background: transparent; border: none; border-radius: 0;
}
html body.produto-modo-criar #product-wizard-footer-default:not(#love-h-a) { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
html body.produto-modo-criar #product-wizard-footer-default > button:not([hidden]):not(#love-h-a) { flex: 0 0 auto; min-width: 120px; height: 44px; }
html body .produto-cancelar:not(#love-h-a) { border: none; background: none; padding: 0 0.5rem; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #52525B; cursor: pointer; min-width: 0 !important; }
html body .produto-cancelar:hover:not(#love-h-a) { color: #181D24; }
html body .produto-cancelar[hidden]:not(#love-h-a) { display: none; }
html body:not(.produto-modo-criar) #produto-etapa-titulo:not(#love-h-a) { display: none; }
@media (max-width: 900px) {
  html body.produto-modo-criar #product-drawer.show:not(#love-h-a) { display: flex; flex-direction: column; }
  html body.produto-modo-criar #produto-etapa-titulo:not(#love-h-a) { font-size: 1.5rem; margin-bottom: 1rem; }
}

/* Editando */
html body.produto-modo-editar #product-drawer .product-wizard-tabs:not(#love-h-a) { top: var(--produto-lateral-topo, 148px); padding-top: 16px; }
html body.produto-modo-editar #product-drawer.show:not(#love-h-a) {
  margin-left: max(calc(240px - var(--b2b-content-pad-x) + 2rem), calc((100% - 720px) / 2)); margin-right: auto;
}

/* Mídia: 5 quadradinhos numa linha só. */
html body #product-gallery-list.product-gallery-strip:not(#love-h-a) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 640px) { html body #product-gallery-list.product-gallery-strip:not(#love-h-a) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Editar produto: a caixa fica centralizada no espaço à direita do menu
   lateral (como em Configurações), em vez de encostada nele. */
html body.produto-modo-editar #product-drawer.show:not(#love-h-a) {
  max-width: none; width: auto; margin-left: calc(240px - var(--b2b-content-pad-x)); margin-right: 0;
}
html body.produto-modo-editar #product-drawer .form-drawer-body:not(#love-h-a),
html body.produto-modo-editar #product-drawer .product-wizard-footer:not(#love-h-a) { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }

/* Editar produto: o cabeçalho fica preso no topo ao rolar (o menu lateral
   começa logo abaixo dele e não deixa mais um buraco) e o rodapé tem só o
   "Salvar alterações", à direita. */
html body.produto-editor-aberto .b2b-header-bar:not(#love-h-a) { position: sticky; top: 0; z-index: 6; }
html body.produto-modo-editar #product-wizard-footer-default:not(#love-h-a) { display: flex; justify-content: flex-end; }
html body.produto-modo-editar #product-wizard-submit-btn:not(#love-h-a) { flex: 0 0 auto; min-width: 180px; height: 44px; }

/* Correção do cabeçalho preso: o "top: 0" contava a partir do respiro de cima
   da área de conteúdo, então ele parava 32px abaixo do topo e o conteúdo
   aparecia por cima, nesse vão. Agora ele encosta no topo de verdade. */
html body.produto-editor-aberto .b2b-header-bar:not(#love-h-a) { top: calc(-1 * var(--b2b-content-pad-y)); }

/* Adicionar novo produto: subtítulo embaixo do título grande da etapa. */
html body.produto-modo-criar #produto-etapa-intro:not(#love-h-a) { grid-column: 1; grid-row: 1 / span 2; }
html body.produto-modo-criar #produto-etapa-intro #produto-etapa-titulo:not(#love-h-a) { grid-column: auto; grid-row: auto; }
html body .produto-etapa-sub:not(#love-h-a) { margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.6; color: #52525B; }
html body:not(.produto-modo-criar) #produto-etapa-intro:not(#love-h-a) { display: none; }

/* Lista de categorias do produto: sem a busca, itens um pouco mais altos e
   texto um pouco maior. */
html body #product-category-tree .category-tree-row:not(#love-h-a) { padding: 0.8rem 0.9rem; font-size: 0.875rem; }
html body #product-category-tree .category-tree-subrow:not(#love-h-a) { padding: 0.7rem 0.9rem 0.7rem 2.4rem; font-size: 0.875rem; }
html body #product-category-tree.category-tree-flat:not(#love-h-a) { max-height: 360px; }

/* Produto › Tags: sugestões da categoria como etiquetas clicáveis (marcada em
   azul escuro) e um campo para escrever outras. */
html body .produto-tags:not(#love-h-a) { margin-top: 1.25rem; }
html body .produto-tags[hidden]:not(#love-h-a) { display: none; }
html body .produto-tags-dica:not(#love-h-a) { margin: -0.15rem 0 0.75rem; font-size: 0.8125rem; color: #71717A; }
html body .produto-tags-lista:not(#love-h-a) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
html body .produto-tag:not(#love-h-a) {
  height: 34px; padding: 0 0.85rem; border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF;
  font-family: inherit; font-size: 0.8125rem; font-weight: 500; color: #3F3F46; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
html body .produto-tag:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .produto-tag.is-marcada:not(#love-h-a) { background: #183b54; border-color: #183b54; color: #FFFFFF; }
html body .produto-tags-nova:not(#love-h-a) { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
html body .produto-tags-nova .field-input:not(#love-h-a) { flex: 1; min-width: 0; }
html body .produto-tags-nova .btn-secondary:not(#love-h-a) { flex-shrink: 0; height: 42px; }
body[data-theme="dark"] .produto-tag { background: #252525 !important; border-color: #404040 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .produto-tag.is-marcada { background: #FFFFFF !important; color: #181D24 !important; }

/* Tags: o mesmo espaço dos outros campos da etapa (24px entre Título do
   anúncio e Código/Unidade); antes somava mais 20px e ficava 44px. */
html body .produto-tags:not(#love-h-a) { margin-top: 0; }
html body .produto-tags .field-label:not(#love-h-a) { margin-bottom: 0.5rem; }

/* O nome da empresa saiu do topo: o "Olá, {razão social}" do Dashboard já mostra. */
html body .topbar-account-name:not(#love-h-a), html body a.topbar-account-name:not(#love-h-a) { display: none !important; }

/* Menu do perfil: itens com a mesma letra das abas Saldo/Faturamento do Dashboard (14px, 600). */
html body #avatar-dropdown .topbar-dropdown-item:not(#love-h-a),
html body #avatar-dropdown .profile-empresa-item .profile-empresa-nome:not(#love-h-a) { font-size: 0.875rem; font-weight: 600; color: #18181B; }
body[data-theme="dark"] #avatar-dropdown .topbar-dropdown-item, body[data-theme="dark"] #avatar-dropdown .profile-empresa-nome { color: #FFFFFF !important; }

/* Dashboard › Saldo total (logo abaixo do "Olá"): rótulo, valor grande e o
   gráfico cinza do saldo, sem caixa em volta. */
html body .dash-saldo-total:not(#love-h-a) { display: block; text-decoration: none; color: inherit; }
html body .dash-saldo-total-rotulo:not(#love-h-a) { margin: 0 0 0.35rem; font-size: 0.875rem; font-weight: 400; color: #18181B; }
html body .dash-saldo-total-valor:not(#love-h-a) { margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 2.25rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: #18181B; font-variant-numeric: tabular-nums; }
html body .dash-saldo-total-grafico:not(#love-h-a) { margin-top: 1.25rem; height: 200px; }
html body .dash-saldo-total-grafico svg:not(#love-h-a) { display: block; width: 100%; height: 100%; }
body[data-theme="dark"] .dash-saldo-total-rotulo, body[data-theme="dark"] .dash-saldo-total-valor { color: #FFFFFF !important; }

/* Financeiro: a carteira (Saldo/Faturamento) ocupa o lugar de Saque
   disponível e Faturamento este mês; Saldo a receber e Acesso rápido à
   direita. O período fica dentro da caixa, no canto. */
html body .finance-topo:not(#love-h-a) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; align-items: stretch; }
html body .finance-topo > .finance-stat-grid:not(#love-h-a) { display: contents; }
html body .finance-topo .wallet-card .wallet-periodo:not(#love-h-a) { top: 1.15rem; bottom: auto; right: 3.6rem; }
@media (max-width: 1023px) {
  html body .finance-topo:not(#love-h-a) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html body .finance-topo > .wallet-card:not(#love-h-a) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  html body .finance-topo:not(#love-h-a) { grid-template-columns: minmax(0, 1fr); }
}

/* Adicionar novo produto: um pouco mais de respiro entre o cabeçalho e o conteúdo. */
html body.produto-modo-criar #product-drawer.show:not(#love-h-a) { margin-top: 1rem; }

/* Dashboard › gráfico do faturamento: ponto no topo da linha e a dica com o
   dia e o valor faturado (aparecem passando o mouse). */
html body .dash-saldo-total-grafico:not(#love-h-a) { position: relative; touch-action: pan-y; }
html body .dash-saldo-ponto:not(#love-h-a) { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #181D24; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px #181D24; transform: translate(-50%, -50%); pointer-events: none; }
html body .dash-saldo-dica:not(#love-h-a) { position: absolute; transform: translate(-50%, calc(-100% - 14px)); display: flex; flex-direction: column; gap: 2px; padding: 0.45rem 0.65rem; background: #FFFFFF; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); white-space: nowrap; pointer-events: none; font-size: 0.75rem; color: #18181B; font-variant-numeric: tabular-nums; }
html body .dash-saldo-dica-dia:not(#love-h-a) { font-size: 11px; font-weight: 500; color: #A1A1AA; }
html body .dash-saldo-dica strong:not(#love-h-a) { font-size: 0.875rem; font-weight: 600; }
html body .dash-saldo-ponto[hidden]:not(#love-h-a), html body .dash-saldo-dica[hidden]:not(#love-h-a) { display: none; }

/* Menu do perfil: itens na mesma cor dos textos do menu lateral (#C4C4CC);
   passando o mouse, escurecem para a cor da sidebar. */
html body #avatar-dropdown .topbar-dropdown-item:not(#love-h-a),
html body #avatar-dropdown .profile-empresa-item .profile-empresa-nome:not(#love-h-a) { color: #C4C4CC; }
html body #avatar-dropdown .topbar-dropdown-item:hover:not(#love-h-a),
html body #avatar-dropdown .profile-empresa-item:hover .profile-empresa-nome:not(#love-h-a) { color: #181D24; }

/* Configurações › URLs: "Editar meu site" à direita da faixa cinza, na
   mesma linha vertical do "Copiar link" da caixa de cima. */
html body .settings-url-editar-site:not(#love-h-a) { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1rem; }
html body .settings-url-editar-site p:not(#love-h-a) { margin: 0; min-width: 0; }
html body .settings-url-editar-site .settings-url-editar-btn:not(#love-h-a) { flex-shrink: 0; margin-left: auto; }
@media (max-width: 640px) {
  html body .settings-url-pro.settings-url-editar-site:not(#love-h-a) { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Menu do perfil igual ao "Minha conta" do love.com.br: caixa de 288px com
   8px de respiro, itens com ícone de 20px à esquerda (#64748B), texto
   Plus Jakarta Sans 14,5px/500 em #334155; Sair mais claro. */
html body #avatar-dropdown.profile-dropdown:not(#love-h-a) { width: 288px; padding: 8px; border-radius: 10px; }
html body #avatar-dropdown .topbar-dropdown-divider:not(#love-h-a) { margin: 2px -8px; background: #E4E4E7; }
html body #avatar-dropdown .topbar-dropdown-item:not(#love-h-a),
html body #avatar-dropdown .profile-empresa-item:not(#love-h-a) {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 8px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: #334155; background: transparent;
}
html body #avatar-dropdown .profile-empresa-item .profile-empresa-linha:not(#love-h-a) { display: flex; align-items: center; gap: 12px; min-width: 0; }
html body #avatar-dropdown .profile-empresa-item .profile-empresa-nome:not(#love-h-a) { font-size: 14.5px; font-weight: 500; color: inherit; }
html body #avatar-dropdown .menu-perfil-icone:not(#love-h-a) { width: 20px; height: 20px; flex-shrink: 0; color: #64748B; }
html body #avatar-dropdown .topbar-dropdown-item:hover:not(#love-h-a),
html body #avatar-dropdown .profile-empresa-item:hover:not(#love-h-a) { color: #0F172A; background: #F8FAFC; }
html body #avatar-dropdown .profile-empresa-item:hover .profile-empresa-nome:not(#love-h-a) { color: #0F172A; }
html body #avatar-dropdown .topbar-item-sair:not(#love-h-a) { color: #64748B; }
html body #avatar-dropdown .topbar-item-sair .menu-perfil-icone:not(#love-h-a) { color: #94A3B8; }
html body #avatar-dropdown .topbar-item-sair:hover:not(#love-h-a) { color: #1E293B; background: rgba(241, 245, 249, 0.8); }

/* Menu do perfil: a empresa atual alinhada como os outros itens (ícone na
   mesma linha vertical) e "Adicionar empresa" num cinza mais claro. */
html body #avatar-dropdown .profile-empresa-item:not(#love-h-a) { flex-direction: row; align-items: center; justify-content: flex-start; margin: 0; text-align: left; }
html body #avatar-dropdown .profile-empresa-item .profile-empresa-linha:not(#love-h-a) { margin: 0; padding: 0; }
html body #avatar-dropdown .topbar-item-adicionar-empresa:not(#love-h-a) { color: #64748B; }
html body #avatar-dropdown .topbar-item-adicionar-empresa .menu-perfil-icone:not(#love-h-a) { color: #94A3B8; }
html body #avatar-dropdown .topbar-item-adicionar-empresa:hover:not(#love-h-a) { color: #1E293B; }

/* Editar produto: o rodapé passa por cima do menu lateral (Categoria,
   Detalhes, Mídia), que antes cobria o começo dele. */
html body.produto-editor-aberto .b2b-footer:not(#love-h-a) { position: relative; z-index: 6; }

/* Editar: {nome do produto} — nome comprido termina em "…" numa linha só. */
html body #produtos-titulo-pagina:not(#love-h-a) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tags: o campo de tag nova só aparece depois de clicar em "Outro". */
html body .produto-tags-nova[hidden]:not(#love-h-a) { display: none; }

/* Produto (criar e editar): Detalhes e Mídia no mesmo padrão de Categoria.
   - Títulos dos campos (Áreas comuns, Capacidade sentados, Vídeo, ...):
     14px/700 #18181B, 0.6rem até o campo — igual a "Título do anúncio".
   - Seções (O que está incluso, Imagem de capa, ...): mesmo título, sem a
     linha em cima.
   - Escolhas (Áreas comuns, Dias de funcionamento): mesmo formato das tags.
   - 24px entre um campo e outro, como na etapa Categoria. */
html body #product-drawer .field-label:not(#love-h-a),
html body #product-drawer .form-section-header:not(#love-h-a),
html body #product-drawer .form-section-header label:not(.product-gallery-nova):not(#love-h-a) {
  font-size: 0.875rem; font-weight: 700; color: #18181B; letter-spacing: -0.025em; line-height: 1.4;
}
html body #product-drawer .field-label:not(#love-h-a) { margin-bottom: 0.6rem; }
html body #product-drawer .form-section-header:not(#love-h-a) { border-top: none; padding-top: 0; margin-top: 0; margin-bottom: 0.6rem; }
html body #product-drawer .field-label + .field-hint:not(#love-h-a),
html body #product-drawer .form-section-header + .field-hint:not(#love-h-a) { margin-top: -0.35rem; }
html body #product-drawer .product-wizard-panel:not(#love-h-a) { gap: 1.5rem; }
html body #product-drawer .product-wizard-panel .flex.flex-col.gap-4:not(#love-h-a) { gap: 1.5rem; }
html body #product-drawer .weekday-toggle-chip:not(#love-h-a) {
  height: 34px; min-width: 0; padding: 0 0.85rem; border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF;
  font-family: inherit; font-size: 0.8125rem; font-weight: 500; color: #3F3F46;
}
html body #product-drawer .weekday-toggle-chip:hover:not(.active):not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body #product-drawer .weekday-toggle-chip.active:not(#love-h-a) { background: #183b54; border-color: #183b54; color: #FFFFFF; }
html body #product-drawer .weekday-toggle-row:not(#love-h-a) { gap: 0.5rem; }

/* Editar produto: "Deletar produto" pequeno e cinza claro, à esquerda do
   rodapé (só ao editar). */
html body .produto-deletar-link:not(#love-h-a) { display: none; }
html body.produto-modo-editar #product-drawer .produto-deletar-link:not(#love-h-a) {
  display: inline-flex; align-items: center; margin-right: auto; padding: 0; border: none; background: none;
  font-family: inherit; font-size: 0.8125rem; font-weight: 500; color: #A1A1AA; cursor: pointer;
}
html body.produto-modo-editar #product-drawer .produto-deletar-link:hover:not(#love-h-a) { color: #B91C1C; }
/* Pop-up de deletar: "Cancelar" como texto simples, sem caixa. */
html body .hub-confirmar--cancelar-texto .hub-confirmar-acoes .btn-secondary:not(#love-h-a) {
  border: none; background: none; padding: 0 0.5rem; font-weight: 600; color: #52525B; box-shadow: none;
}
html body .hub-confirmar--cancelar-texto .hub-confirmar-acoes .btn-secondary:hover:not(#love-h-a) { color: #181D24; }
html body .hub-confirmar-acoes:not(#love-h-a) { align-items: center; }

/* Pop-up de deletar produto: "Sim, deletar" claro (cinza), no padrão dos
   botões claros — sem vermelho. */
html body .hub-confirmar--cancelar-texto .hub-confirmar-acoes .btn-primary:not(#love-h-a) {
  background: #F4F4F5; border: 1px solid var(--borda-suave); color: #18181B; box-shadow: none;
}
html body .hub-confirmar--cancelar-texto .hub-confirmar-acoes .btn-primary:hover:not(#love-h-a) { background: #F4F4F5; border-color: #181D24; color: #181D24; }

/* Etapa Detalhes: 24px entre "O que está incluso" (com a lista) e
   "O que não está incluso", como entre os outros campos. */
html body #product-drawer #product-scope-lists .form-section-header + .scope-add-row:not(#love-h-a) { margin-top: 0; }
html body #product-drawer #product-scope-lists .scope-list:not(:empty):not(#love-h-a) { margin-top: 0.6rem; }
html body #product-drawer #product-scope-lists .form-section-header.mt-2:not(#love-h-a) { margin-top: 1.5rem; }

/* Buscar eventos › Ver pedido: tela cheia (sem abas nem cards), com a caixa
   centralizada como em Configurações. */
html body.op-pedido-aberto #leads-abas:not(#love-h-a),
html body.op-pedido-aberto [data-leads-painel]:not(#love-h-a),
html body.op-pedido-aberto #leads-acoes-topo:not(#love-h-a) { display: none !important; }
html body .op-pedido-pagina[hidden]:not(#love-h-a) { display: none; }
html body .op-pedido-pagina:not(#love-h-a) { display: flex; justify-content: center; margin-top: 1.5rem; }
html body .op-pedido-caixa:not(#love-h-a) {
  width: 100%; max-width: 40rem; padding: 2rem 2.5rem; background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px;
}
html body .op-pedido-caixa .op-detalhe-acao .op-enviar-btn:not(#love-h-a) { height: 44px; padding: 0 1.4rem; }
@media (max-width: 640px) {
  html body .op-pedido-caixa:not(#love-h-a) { padding: 1.25rem; }
}
body[data-theme="dark"] .op-pedido-caixa { background: #252525 !important; border-color: #404040 !important; }

/* Pedido aberto: rodapé da caixa com "Voltar" (só texto) à esquerda e
   "Enviar proposta" (ou o status da proposta) à direita. */
html body .op-pedido-caixa .op-detalhe-acao:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
html body .op-pedido-caixa .op-detalhe-acao .op-enviar-btn:not(#love-h-a) { width: auto; min-width: 160px; }
html body .op-detalhe-voltar:not(#love-h-a) { border: none; background: none; padding: 0; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #52525B; cursor: pointer; }
html body .op-detalhe-voltar:hover:not(#love-h-a) { color: #181D24; }

/* Buscar eventos › card: data à esquerda e a cidade à direita. */
html body .op-card2-linha-data:not(#love-h-a) { justify-content: space-between; }
html body .op-card2-linha-data > span:first-child:not(#love-h-a) { display: inline-flex; align-items: center; gap: 0.4rem; }
html body .op-card2-linha-data .op-item-cidade:not(#love-h-a) { font-size: 0.8125rem; }
/* Cabeçalho: propostas do mês pelo plano. */
html body .op-cota:not(#love-h-a) { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: #52525B; white-space: nowrap; font-variant-numeric: tabular-nums; }
html body .op-cota[hidden]:not(#love-h-a), html body.op-pedido-aberto .op-cota:not(#love-h-a) { display: none; }

/* Ver pedido: o mesmo layout de love.com.br › Minhas solicitações
   (cabeça com título, descrição primeiro, faixa cinza com data/convidados/
   horário, linhas e subcategorias). */
html body .op-pedido-caixa:not(#love-h-a) { padding: 0; max-width: 48rem; }
html body .op-sol-cabeca:not(#love-h-a) { padding: 22px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); }
html body .op-sol-titulo:not(#love-h-a) { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: #18181B; }
html body .op-sol-meta:not(#love-h-a) { margin: 2px 0 0; font-size: 13px; color: #71717A; }
html body .op-sol-sec:not(#love-h-a) { padding: 22px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); }
html body .op-sol-sub:not(#love-h-a) { margin: 0 0 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: #18181B; }
html body .op-sol-desc:not(#love-h-a) { margin: 0; font-size: 14px; line-height: 1.65; color: #18181B; white-space: pre-line; overflow-wrap: anywhere; }
html body .op-sol-destaques:not(#love-h-a) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 24px; padding: 18px 0; background: #F4F5F7; border-radius: 10px; }
html body .op-sol-destaque:not(#love-h-a) { display: flex; flex-direction: column; gap: 6px; padding: 0 22px; border-left: 1px solid var(--borda-suave); }
html body .op-sol-destaque:first-child:not(#love-h-a) { border-left: 0; }
html body .op-sol-destaque span:not(#love-h-a) { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #18181B; }
html body .op-sol-destaque b:not(#love-h-a) { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #18181B; }
html body .op-sol-destaques + .op-sol-sec:not(#love-h-a) { border-top: none; }
html body .op-sol-linhas p:not(#love-h-a) { margin: 0 0 8px; font-size: 14px; color: #3F3F46; }
html body .op-sol-linhas p:last-child:not(#love-h-a) { margin-bottom: 0; }
html body .op-sol-linhas b:not(#love-h-a) { font-weight: 600; color: #18181B; margin-right: 4px; }
html body .op-sol-tags:not(#love-h-a) { display: flex; flex-wrap: wrap; gap: 8px; }
html body .op-sol-tags span:not(#love-h-a) { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 6px; background: #F4F4F5; font-size: 13px; color: #3F3F46; }
html body .op-pedido-caixa .op-sol-acao:not(#love-h-a) { margin: 0; padding: 18px 24px; border-top: none; }
@media (max-width: 640px) {
  html body .op-sol-destaques:not(#love-h-a) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html body .op-sol-destaque:not(#love-h-a) { border-left: 0; }
}

/* ==========================================================================
   Análise de solicitação (Buscar eventos › Ver solicitação)
   Duas colunas: conteúdo (~70%) e lateral de ação (~30%) — modelo Job
   Details do Upwork. No celular, uma coluna e "Enviar proposta" preso embaixo.
   ========================================================================== */
html body .op-pedido-caixa:not(#love-h-a) { max-width: 72rem; padding: 0; background: transparent; border: none; border-radius: 0; }
html body .op-analise:not(#love-h-a) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 24px; align-items: start; }
html body .op-analise-principal:not(#love-h-a),
html body .op-analise-card:not(#love-h-a) { background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px; }
html body .op-analise-principal:not(#love-h-a) { overflow: hidden; }
html body .op-analise-cabeca:not(#love-h-a) { padding: 24px; border-bottom: 1px solid rgba(0,0,0,0.06); }
html body .op-analise-titulo:not(#love-h-a) { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; color: #18181B; }
html body .op-analise-meta:not(#love-h-a) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 0; font-size: 13px; color: #71717A; }
html body .op-analise-badge:not(#love-h-a) { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: #F4F4F5; font-size: 12px; font-weight: 600; color: #3F3F46; }
html body .op-analise-local:not(#love-h-a) { display: inline-flex; align-items: center; gap: 4px; }
html body .op-analise-local svg:not(#love-h-a) { width: 15px; height: 15px; color: #A1A1AA; }
html body .op-analise-destaques:not(#love-h-a) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px; padding: 18px 0; background: #F4F5F7; border-radius: 10px; }
html body .op-analise-destaque:not(#love-h-a) { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 18px; border-left: 1px solid var(--borda-suave); }
html body .op-analise-destaque:first-child:not(#love-h-a) { border-left: 0; }
html body .op-analise-destaque span:not(#love-h-a) { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #18181B; }
html body .op-analise-destaque b:not(#love-h-a) { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: #18181B; overflow-wrap: anywhere; }
html body .op-analise-sec:not(#love-h-a) { padding: 22px 24px; border-top: 1px solid rgba(0,0,0,0.06); }
html body .op-analise-sub:not(#love-h-a) { margin: 0 0 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: #18181B; }
html body .op-analise-desc:not(#love-h-a) { margin: 0; font-size: 14px; line-height: 1.7; color: #18181B; white-space: pre-line; overflow-wrap: anywhere; }
html body .op-analise-perguntas:not(#love-h-a) { margin: 0; padding-left: 1.2rem; font-size: 14px; line-height: 1.6; color: #3F3F46; }
html body .op-analise-lateral:not(#love-h-a) { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
html body .op-analise-card:not(#love-h-a) { padding: 20px; }
html body .op-analise-acao:not(#love-h-a) { display: flex; flex-direction: column; gap: 10px; }
html body .op-analise-enviar:not(#love-h-a) { width: 100%; height: 44px; justify-content: center; }
html body .op-analise-salvar:not(#love-h-a) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 0 1rem;
  border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #18181B; cursor: pointer;
}
html body .op-analise-salvar:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .op-analise-salvar svg:not(#love-h-a) { width: 18px; height: 18px; }
html body .op-analise-salvar.is-salva svg:not(#love-h-a) { fill: #183b54; color: #183b54; }
html body .op-analise-aviso:not(#love-h-a) { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: #A1A1AA; }
html body .op-analise-enviada:not(#love-h-a) { margin: 0; font-size: 14px; color: #3F3F46; }
html body .op-analise-card-titulo:not(#love-h-a) { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #18181B; }
html body .op-analise-lista:not(#love-h-a) { display: flex; flex-direction: column; gap: 10px; margin: 0; }
html body .op-analise-lista > div:not(#love-h-a) { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
html body .op-analise-lista dt:not(#love-h-a) { color: #71717A; }
html body .op-analise-lista dd:not(#love-h-a) { margin: 0; font-weight: 600; color: #18181B; text-align: right; }
html body .op-analise-pessoa:not(#love-h-a) { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
html body .op-analise-pessoa b:not(#love-h-a) { font-size: 14px; font-weight: 600; color: #18181B; }
html body .op-analise-avatar:not(#love-h-a) { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #F4F4F5; font-size: 12px; font-weight: 700; color: #3F3F46; }
html body .op-analise-avatar img:not(#love-h-a) { width: 100%; height: 100%; object-fit: cover; }
html body .op-analise-fatos:not(#love-h-a) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
html body .op-analise-fatos li:not(#love-h-a) { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #52525B; }
html body .op-analise-fatos svg:not(#love-h-a) { width: 16px; height: 16px; flex-shrink: 0; color: #A1A1AA; }
html body .op-analise-fatos li.is-ok svg:not(#love-h-a) { color: #183b54; }
html body .op-analise-barra:not(#love-h-a) { display: none; }
@media (max-width: 900px) {
  html body .op-analise:not(#love-h-a) { grid-template-columns: minmax(0, 1fr); padding-bottom: 76px; }
  html body .op-analise-lateral:not(#love-h-a) { position: static; }
  html body .op-analise-destaques:not(#love-h-a) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  html body .op-analise-destaque:nth-child(3):not(#love-h-a) { border-left: 0; }
  html body .op-analise-acao .op-analise-enviar:not(#love-h-a) { display: none; }
  html body .op-analise-barra:not(#love-h-a) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #FFFFFF; border-top: 1px solid var(--borda-suave);
  }
}

/* Buscar eventos: busca no cabeçalho; some com a solicitação aberta. */
html body .op-header-acoes[hidden]:not(#love-h-a), html body.op-pedido-aberto .op-header-acoes:not(#love-h-a) { display: none; }
html body .op-header-acoes .op-busca:not(#love-h-a) { width: 320px; }
html body .op-toolbar[hidden]:not(#love-h-a) { display: none; }
/* Chip "Salvas" (vagas salvas) antes das cidades. */
html body .op-chip-salvas:not(#love-h-a) { display: inline-flex; align-items: center; gap: 6px; }
html body .op-chip-salvas svg:not(#love-h-a) { width: 15px; height: 15px; }
html body .op-chip-salvas.is-ativo svg:not(#love-h-a) { fill: currentColor; }
/* Sobre o anfitrião: foto quadrada com cantos arredondados (como os avatares da Love). */
html body .op-analise-avatar:not(#love-h-a) { width: 40px; height: 40px; border-radius: 8px; }
@media (max-width: 640px) { html body .op-header-acoes .op-busca:not(#love-h-a) { width: auto; flex: 1 1 auto; } }

/* Enviar proposta: pop-up no formato da caixa da solicitação (título 22px,
   seções com divisórias finas), em etapas com abas sublinhadas. */
html body .modal-card.op-prop:not(#love-h-a) { max-width: 560px; width: 100%; padding: 0; border-radius: 10px; overflow: hidden; }
html body .op-prop-cabeca:not(#love-h-a) { display: flex; align-items: flex-start; gap: 16px; padding: 24px 24px 0; }
html body .op-prop-cabeca-textos:not(#love-h-a) { flex: 1; min-width: 0; }
html body .op-prop-titulo:not(#love-h-a) { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: #18181B; }
html body .op-prop-sub:not(#love-h-a) { margin: 6px 0 0; font-size: 13px; color: #71717A; }
html body .op-prop-fechar:not(#love-h-a) { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 8px; color: #52525B; cursor: pointer; }
html body .op-prop-fechar:hover:not(#love-h-a) { color: #181D24; }
html body .op-prop-abas:not(#love-h-a) { display: flex; gap: 24px; padding: 0 24px; margin-top: 18px; border-bottom: 1px solid rgba(0,0,0,0.06); }
html body .op-prop-aba:not(#love-h-a) { padding: 0 0 12px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: #A1A1AA; cursor: pointer; }
html body .op-prop-aba.is-ativa:not(#love-h-a) { color: #183b54; border-bottom-color: #183b54; }
html body .op-prop-sec:not(#love-h-a) { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
html body .op-prop-sec[hidden]:not(#love-h-a) { display: none; }
html body .op-prop-pergunta:not(#love-h-a) { display: block; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #18181B; }
html body .op-prop-vazio:not(#love-h-a) { margin: 0; font-size: 14px; color: #3F3F46; }
html body .op-prop-vazio a:not(#love-h-a) { font-weight: 600; color: #183b54; text-decoration: underline; text-underline-offset: 3px; }
html body .op-prop-tabela:not(#love-h-a) { width: 100%; border-collapse: collapse; background: #F4F5F7; border-radius: 10px; overflow: hidden; }
html body .op-prop-tabela th:not(#love-h-a), html body .op-prop-tabela td:not(#love-h-a) { padding: 12px 16px; font-size: 14px; text-align: left; border-top: 1px solid var(--borda-suave); }
html body .op-prop-tabela tr:first-child th:not(#love-h-a), html body .op-prop-tabela tr:first-child td:not(#love-h-a) { border-top: none; }
html body .op-prop-tabela th:not(#love-h-a) { font-weight: 500; color: #52525B; width: 50%; }
html body .op-prop-tabela td:not(#love-h-a) { text-align: right; color: #18181B; font-variant-numeric: tabular-nums; }
html body .op-prop-tabela td .field-input:not(#love-h-a) { height: 38px; text-align: right; background: #FFFFFF; }
html body .op-prop-linha-total th:not(#love-h-a), html body .op-prop-linha-total td:not(#love-h-a) { font-weight: 700; color: #18181B; font-size: 15px; }
html body .op-prop-msg:not(#love-h-a) { margin: 0 24px; }
html body .op-prop-rodape:not(#love-h-a) { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px 24px; border-top: 1px solid rgba(0,0,0,0.06); }
html body .op-prop-voltar:not(#love-h-a) { margin-right: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #52525B; cursor: pointer; }
html body .op-prop-voltar:hover:not(#love-h-a) { color: #181D24; }
html body .op-prop-voltar[hidden]:not(#love-h-a), html body .op-prop-btn[hidden]:not(#love-h-a) { display: none; }
html body .op-prop-btn:not(#love-h-a) { height: 44px; min-width: 140px; justify-content: center; }
html body #op-produto[hidden]:not(#love-h-a) { display: none; }

/* Enviar proposta: título, data e local em caixinhas cinzas; as 3 abas
   (Produto, Orçamento, Detalhes) dividem a largura toda do pop-up. */
html body .op-prop-sub:not(#love-h-a) { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
html body .op-prop-sub span:not(#love-h-a) { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 6px; background: #F4F4F5; font-size: 13px; font-weight: 500; color: #3F3F46; }
html body .op-prop-abas:not(#love-h-a) { gap: 0; }
html body .op-prop-aba:not(#love-h-a) { flex: 1 1 0; text-align: center; }

/* ==========================================================================
   Oportunidades em lista (feed): uma por linha, sem imagem — topo com
   categoria, quando, selos e salvar; título, prévia da descrição, pills de
   data/local/convidados/orçamento e o rodapé com a ação.
   ========================================================================== */
html body .op-filtros:not(#love-h-a) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
html body .op-filtro-select:not(#love-h-a) {
  height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--borda-suave); border-radius: 8px; background-color: #FFFFFF;
  font-family: inherit; font-size: 13px; font-weight: 500; color: #18181B; cursor: pointer;
}
html body .op-filtro-select:hover:not(#love-h-a), html body .op-filtro-select:focus:not(#love-h-a) { border-color: #181D24; outline: none; }
html body .op-filtros-sep:not(#love-h-a) { width: 1px; height: 20px; margin: 0 4px; background: #E4E4E7; }
html body .op-filtros .op-chip:not(#love-h-a) { height: 36px; }
html body .op-lista:not(#love-h-a) { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px; overflow: hidden; }
html body .op-lista:empty:not(#love-h-a) { display: none; }
html body .op-linha:not(#love-h-a) { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; border-top: 1px solid rgba(0,0,0,0.06); cursor: pointer; transition: background-color .15s ease; outline: none; }
html body .op-linha:first-child:not(#love-h-a) { border-top: none; }
html body .op-linha:hover:not(#love-h-a), html body .op-linha:focus-visible:not(#love-h-a) { background: #FAFAFA; }
html body .op-linha-topo:not(#love-h-a) { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: #71717A; }
html body .op-linha-selo:not(#love-h-a) { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
html body .op-linha-selo.is-novo:not(#love-h-a) { background: #E8EEF3; color: #183b54; }
html body .op-linha-selo.is-urgente:not(#love-h-a) { background: #FEF3C7; color: #92400E; }
html body .op-linha-salvar:not(#love-h-a) { margin-left: auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 8px; color: #71717A; cursor: pointer; }
html body .op-linha-salvar:hover:not(#love-h-a) { color: #181D24; }
html body .op-linha-salvar svg:not(#love-h-a) { width: 20px; height: 20px; }
html body .op-linha-salvar.is-salva:not(#love-h-a) { color: #183b54; }
html body .op-linha-salvar.is-salva svg:not(#love-h-a) { fill: #183b54; }
html body .op-linha-titulo:not(#love-h-a) { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: #18181B; }
html body .op-linha:hover .op-linha-titulo:not(#love-h-a) { text-decoration: underline; text-underline-offset: 3px; }
html body .op-linha-desc:not(#love-h-a) { margin: 0; font-size: 14px; line-height: 1.5; color: #71717A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
html body .op-linha-pills:not(#love-h-a) { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
html body .op-linha-pill:not(#love-h-a) { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; background: #F4F4F5; font-size: 13px; font-weight: 500; color: #3F3F46; }
html body .op-linha-pill svg:not(#love-h-a) { width: 15px; height: 15px; color: #71717A; }
html body .op-linha-rodape:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
html body .op-linha-status:not(#love-h-a) { font-size: 13px; color: #71717A; min-width: 0; }
html body .op-linha-acao:not(#love-h-a) { flex-shrink: 0; height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600; pointer-events: none; }
html body .op-linha:hover .op-linha-acao:not(#love-h-a) { border-color: #181D24; color: #181D24; }
@media (max-width: 640px) {
  html body .op-linha:not(#love-h-a) { padding: 16px; }
  html body .op-linha-rodape:not(#love-h-a) { flex-direction: column; align-items: stretch; }
  html body .op-linha-acao:not(#love-h-a) { width: 100%; height: 44px; justify-content: center; }
  html body .op-filtro-select:not(#love-h-a) { flex: 1 1 140px; }
  html body .op-filtros-sep:not(#love-h-a) { display: none; }
}
body[data-theme="dark"] .op-lista { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .op-linha:hover { background: #2A2A2A !important; }
body[data-theme="dark"] .op-linha-titulo { color: #FFFFFF !important; }
body[data-theme="dark"] .op-linha-pill { background: #333333 !important; color: #D4D4D8 !important; }
body[data-theme="dark"] .op-filtro-select { background-color: #252525 !important; border-color: #404040 !important; color: #F4F4F5 !important; }

/* Lista mais compacta (5–6 por tela): quem pediu sobe para o topo, a
   prévia fica numa linha e a ação divide a linha com as pílulas. */
html body .op-linha:not(#love-h-a) { gap: 6px; padding: 14px 20px; }
html body .op-linha-quem:not(#love-h-a) { color: #52525B; font-weight: 500; }
html body .op-linha-quem:not(:empty):not(#love-h-a)::before { content: "·"; margin-right: 10px; color: #A1A1AA; }
html body .op-linha-salvar:not(#love-h-a) { width: 28px; height: 28px; margin-top: -4px; margin-bottom: -4px; }
html body .op-linha-desc:not(#love-h-a) { -webkit-line-clamp: 1; }
html body .op-linha-rodape:not(#love-h-a) { margin-top: 2px; align-items: center; }
html body .op-linha-rodape .op-linha-pills:not(#love-h-a) { margin-top: 0; min-width: 0; }
@media (max-width: 640px) {
  html body .op-linha-desc:not(#love-h-a) { -webkit-line-clamp: 2; }
}

/* Oportunidades › "Filtrar por" à direita da busca: menu com Categorias,
   Cidades e Orçamentos. */
html body .op-header-acoes:not(#love-h-a) { gap: 8px; }
html body .op-filtrar:not(#love-h-a) { position: relative; }
html body .op-filtrar-btn:not(#love-h-a) { height: 38px; gap: 6px; padding: 0 14px; white-space: nowrap; }
html body .op-filtrar-menu:not(#love-h-a) {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 280px; display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
html body .op-filtrar-menu[hidden]:not(#love-h-a) { display: none; }
html body .op-filtrar-campo:not(#love-h-a) { display: flex; flex-direction: column; gap: 6px; }
html body .op-filtrar-campo > span:not(#love-h-a) { font-size: 12px; font-weight: 600; color: #52525B; }
html body .op-filtrar-campo .op-filtro-select:not(#love-h-a) { width: 100%; height: 38px; }
html body .op-filtrar-limpar:not(#love-h-a) { align-self: flex-start; padding: 0; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: #52525B; cursor: pointer; }
html body .op-filtrar-limpar:hover:not(#love-h-a) { color: #181D24; }
@media (max-width: 640px) { html body .op-filtrar-menu:not(#love-h-a) { width: min(280px, calc(100vw - 32px)); } }

/* Padrão único de caixas e botões claros (igual à plataforma dos anfitriões):
   linha fina cinza (preto a 6%) + anel bem leve (preto a 3%). */
:root {
  --borda-suave: rgba(0, 0, 0, 0.06);
  --anel-suave: 0 0 0 1px rgba(0, 0, 0, 0.03);
}
body[data-theme="dark"] {
  --borda-suave: rgba(255, 255, 255, 0.08);
  --anel-suave: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Caixas: cards, caixas de tabela, cards de configurações, cards de produto */
html body :is(
  .dash-card, .settings-zola-card, .leads-table-wrap, .finance-stat-card,
  .product-card, .love-tabela-caixa
):not(#love-h-a) {
  border: 1px solid var(--borda-suave) !important;
  border-radius: 10px;
  box-shadow: var(--anel-suave) !important;
}

/* Botões claros: mesma linha e anel; no hover só a borda escurece */
html body :is(.btn-secondary, .btn-white, .love-tabela-botao):not(#love-h-a):not(:hover):not(:focus-visible):not(:disabled) {
  border-color: var(--borda-suave) !important;
  box-shadow: var(--anel-suave) !important;
}
html body :is(.btn-secondary, .btn-white, .love-tabela-botao):not(#love-h-a):hover {
  border-color: #181D24 !important;
  box-shadow: var(--anel-suave) !important;
}

/* O mesmo padrão nas caixas novas (Oportunidades, Análise de solicitação):
   linha preto a 6% + anel a 3%. Overlays (menus, pop-ups) mantêm a sombra. */
html body :is(.op-lista, .op-analise-principal, .op-analise-card, .op-pedido-caixa:not(:has(.op-analise))):not(#love-h-a) {
  border: 1px solid var(--borda-suave) !important;
  box-shadow: var(--anel-suave) !important;
}
html body :is(.op-filtrar-menu, .modal-card, .topbar-dropdown):not(#love-h-a) { border-color: var(--borda-suave); }

/* ==========================================================================
   Padrão do index (Meus presentes, Recados, Carteira digital) em todo o Hub.
   Medido lado a lado com love-tabela-caixa / love-tabela do index:
   - Caixas: fundo branco, linha preto 6%, cantos 10px e SÓ o anel de 3%
     (sem sombra caída). Cards clicáveis ganham no hover uma sombra bem leve.
   - Tabelas: cabeçalho #F7F7F8 com linhas de 6% em cima e embaixo,
     12px 16px; linhas com divisória de 4% entre elas, 14px 16px, texto
     #18181B; hover #FAFAFA. Sem a moldura dupla (a caixa já tem a linha).
   - Campos: linha de 6%; foco escurece para #181D24.
   ========================================================================== */
html body :is(.dash-card, .dashboard-help-card, .product-card, .plan-card, .verif-card, .nova-empresa-card,
  .contratos-clientes-list-card, .agenda-notifications-card, .lead-import-card, .finance-stat-card, .wallet-card,
  .dash-analytics-card, .dash-news-card, .settings-zola-card, .agenda-timeline-panel, .agenda-mini-calendar,
  .comandos-vazio, .product-pacote-item, .op-lista, .op-analise-principal, .op-analise-card):not(.dash-ads-card):not(.guias-flat-card):not(#love-h-a):not(#love-h-b) {
  border: 1px solid var(--borda-suave) !important;
  border-radius: 10px !important;
  box-shadow: var(--anel-suave) !important;
}
html body #products-grid .product-card:not(#love-h-a):not(#love-h-b):hover,
html body .op-linha:not(#love-h-a):not(#love-h-b):hover { box-shadow: var(--anel-suave), 0 4px 12px rgba(0, 0, 0, 0.05) !important; }

/* Tabela dentro da caixa: sem a segunda moldura. */
html body .leads-table-wrap:not(#love-h-a):not(#love-h-b) { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
html body .leads-table thead th:not(#love-h-a):not(#love-h-b) {
  background: #F7F7F8 !important;
  border-top: 1px solid var(--borda-suave) !important;
  border-bottom: 1px solid var(--borda-suave) !important;
  padding-top: 12px !important; padding-bottom: 12px !important;
  font-size: 13px !important; font-weight: 700 !important; color: #181D24 !important;
}
html body .leads-table thead tr:first-child th:not(#love-h-a):not(#love-h-b) { border-top-color: transparent !important; }
html body .leads-table tbody td:not(#love-h-a):not(#love-h-b) {
  border-top: 1px solid var(--divisor-suave, rgba(0, 0, 0, 0.04)) !important;
  border-bottom: 0 !important;
  padding-top: 14px !important; padding-bottom: 14px !important;
  font-size: 14px !important; color: #18181B !important; background: #FFFFFF;
}
html body .leads-table tbody tr:first-child td:not(#love-h-a):not(#love-h-b) { border-top: 0 !important; }
html body .leads-table tbody tr:hover td:not(#love-h-a):not(#love-h-b) { background: #FAFAFA !important; }
:root { --divisor-suave: rgba(0, 0, 0, 0.04); }

/* Campos: mesma linha fina do index. */
html body :is(.field-input, .field-select, .field-textarea, .tabela-busca input, .op-filtro-select):not(#love-h-a):not(#love-h-b) { border-color: var(--borda-suave) !important; }
html body :is(.field-input, .field-select, .field-textarea, .tabela-busca input, .op-filtro-select):not(#love-h-a):not(#love-h-b):focus { border-color: #181D24 !important; box-shadow: none !important; }

/* Oportunidades: páginas de 15, navegação no fim da lista (à direita). */
html body .op-paginacao:not(#love-h-a) { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }
html body .op-pagina-texto:not(#love-h-a) { font-size: 13px; font-weight: 500; color: #52525B; font-variant-numeric: tabular-nums; }
html body .op-pagina-btn:not(#love-h-a) {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 8px; box-shadow: var(--anel-suave); color: #18181B; cursor: pointer;
}
html body .op-pagina-btn:hover:not(:disabled):not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .op-pagina-btn:disabled:not(#love-h-a) { color: #D4D4D8; cursor: default; }
html body .op-pagina-btn svg:not(#love-h-a) { width: 18px; height: 18px; }

/* ==========================================================================
   Clientes › página do cliente (contrato, pagamentos, entregas, progresso)
   ========================================================================== */
html body.cli-aberto #leads-abas:not(#love-h-a),
html body.cli-aberto [data-leads-painel]:not(#love-h-a),
html body.cli-aberto #leads-acoes-topo:not(#love-h-a),
html body.cli-aberto .op-header-acoes:not(#love-h-a),
html body.cli-aberto #op-pedido-pagina:not(#love-h-a) { display: none !important; }
html body .lead-nome-link:not(#love-h-a) { padding: 0; border: none; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
html body .lead-nome-link:hover:not(#love-h-a) { text-decoration: underline; text-underline-offset: 3px; }
html body .cli-servicos:not(#love-h-a) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
html body .cli-sub-2:not(#love-h-a) { margin-top: 18px !important; }
html body .cli-links:not(#love-h-a) { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
html body .cli-links a:not(#love-h-a) { font-size: 14px; font-weight: 500; color: #18181B; text-decoration: underline; text-underline-offset: 3px; }
html body .cli-links a:hover:not(#love-h-a) { color: #183b54; }
html body .cli-resumo:not(#love-h-a) { margin: 0; display: flex; flex-direction: column; }
html body .cli-resumo > div:not(#love-h-a) { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--divisor-suave, rgba(0,0,0,.04)); font-size: 14px; }
html body .cli-resumo > div:first-child:not(#love-h-a) { border-top: none; padding-top: 0; }
html body .cli-resumo dt:not(#love-h-a) { color: #71717A; }
html body .cli-resumo dd:not(#love-h-a) { margin: 0; color: #18181B; font-variant-numeric: tabular-nums; }
html body .cli-tabela:not(#love-h-a) { border: 1px solid var(--borda-suave); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
html body .cli-situacao:not(#love-h-a) { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: #F4F4F5; font-size: 12px; font-weight: 600; color: #52525B; }
html body .cli-situacao.is-paga:not(#love-h-a) { background: #E8F5EE; color: #1E7A4C; }
html body .cli-entregas:not(#love-h-a) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
html body .cli-entregas li:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--divisor-suave, rgba(0,0,0,.04)); font-size: 14px; color: #18181B; }
html body .cli-entregas li:first-child:not(#love-h-a) { border-top: none; padding-top: 0; }
html body .cli-entregas label:not(#love-h-a) { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
html body .cli-entregas input:not(#love-h-a) { width: 16px; height: 16px; accent-color: #183b54; }
html body .cli-entrega-data:not(#love-h-a) { font-size: 13px; color: #71717A; white-space: nowrap; }
html body .cli-dica:not(#love-h-a) { margin: -4px 0 12px; font-size: 13px; color: #71717A; }
html body .cli-progresso-form:not(#love-h-a) { display: flex; flex-direction: column; gap: 10px; }
html body .cli-progresso-form textarea:not(#love-h-a) { min-height: 80px; }
html body .cli-progresso-acoes:not(#love-h-a) { display: flex; justify-content: flex-end; gap: 10px; }
html body .cli-btn:not(#love-h-a) { height: 40px; padding: 0 16px; justify-content: center; cursor: pointer; }
html body .cli-progresso-fotos:not(#love-h-a) { display: flex; flex-wrap: wrap; gap: 8px; }
html body .cli-progresso-fotos:empty:not(#love-h-a) { display: none; }
html body .cli-progresso-fotos img:not(#love-h-a) { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borda-suave); display: block; }
html body .cli-previa:not(#love-h-a) { position: relative; }
html body .cli-previa button:not(#love-h-a) { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(255,255,255,.92); color: #18181B; font-size: 14px; line-height: 1; cursor: pointer; }
html body .cli-atualizacoes:not(#love-h-a) { display: flex; flex-direction: column; margin-top: 18px; }
html body .cli-atualizacao:not(#love-h-a) { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--divisor-suave, rgba(0,0,0,.04)); }
html body .cli-atualizacao-data:not(#love-h-a) { margin: 0; font-size: 12px; font-weight: 600; color: #71717A; }
html body .cli-acoes:not(#love-h-a) { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
html body .cli-acoes .cli-btn:not(#love-h-a) { width: 100%; height: 42px; }
html body .cli-barra:not(#love-h-a) { height: 6px; border-radius: 6px; background: #F4F4F5; overflow: hidden; margin-bottom: 12px; }
html body .cli-barra span:not(#love-h-a) { display: block; height: 100%; background: #183b54; border-radius: 6px; }
html body .cli-vazio:not(#love-h-a), html body .cli-carregando:not(#love-h-a) { color: #71717A !important; font-size: 14px; }
html body .cli-pagina .op-analise-principal > .op-analise-sec:first-child:not(#love-h-a) { border-top: none; }
@media (max-width: 640px) { html body .cli-resumo > div:not(#love-h-a) { grid-template-columns: 1fr; gap: 2px; } }

/* ==========================================================================
   Financeiro no modelo da Carteira Digital (love.com.br): caixa de resumo
   com 2 colunas, "Extrato completo" com Extrato/Saques/Notas fiscais em
   botões com ícone e a aba Contas bancárias.
   ========================================================================== */
.cart-caixa { background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px; box-shadow: var(--anel-suave); }
.cart-resumo { padding: 16px 24px 28px; }
.cart-resumo-topo { display: flex; justify-content: flex-end; }
html body button.cart-link:not(#love-h-a) { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; font-family: inherit; font-size: 13px; font-weight: 600; color: #183b54; cursor: pointer; }
html body button.cart-link span:not(#love-h-a) { text-decoration: underline; text-underline-offset: 3px; }
.cart-link svg { width: 16px; height: 16px; }
.cart-resumo-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.cart-resumo-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 24px; border-left: 1px solid var(--borda-suave); }
.cart-resumo-col:first-child { border-left: 0; padding-left: 0; }
html body .cart-rotulo:not(#love-h-a) { margin: 0; font-size: 13px; font-weight: 500; color: #52525B; }
html body .cart-numero:not(#love-h-a) { margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #18181B; font-variant-numeric: tabular-nums; }
.cart-numero.is-escondido { letter-spacing: 0.08em; }
html body .cart-dica:not(#love-h-a) { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #71717A; }
html body :is(button, a).cart-link-texto:not(#love-h-a) { padding: 0; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: #183b54; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html body .cart-dica :is(button, a).cart-link-texto:not(#love-h-a) { font-size: inherit; }
html body .cart-ver:not(#love-h-a) { margin-top: 8px; }
html body .cart-sacar:not(#love-h-a) { height: 42px; margin-top: 8px; padding: 0 20px; }
html body .cart-sacar:disabled:not(#love-h-a) { background: #A1A1AA !important; border-color: #A1A1AA !important; color: #FFFFFF !important; cursor: default; }
html body .fin-lista-topo:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 32px 0 24px; }
html body .cart-lista-titulo:not(#love-h-a) { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: #18181B; }
html body .fin-lista-botoes:not(#love-h-a) { display: flex; gap: 8px; flex-wrap: wrap; }
html body .fin-lista-btn:not(#love-h-a) {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: #FFFFFF;
  border: 1px solid var(--borda-suave); border-radius: 8px; box-shadow: var(--anel-suave);
  font-family: inherit; font-size: 13px; font-weight: 600; color: #3F3F46; cursor: pointer;
}
html body .fin-lista-btn:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .fin-lista-btn.is-ativo:not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .fin-lista-icone:not(#love-h-a) { display: inline-flex; width: 16px; height: 16px; color: #71717A; }
html body .fin-lista-icone svg:not(#love-h-a) { width: 16px; height: 16px; }
html body .fin-lista-btn.is-ativo .fin-lista-icone:not(#love-h-a) { color: #183b54; }
html body #finance-lista-card .cart-num:not(#love-h-a), html body #finance-lista-card td.finance-valor:not(#love-h-a) { text-align: right; }
html body .fin-contas:not(#love-h-a) { padding: 24px; max-width: 40rem; }
html body .cart-titulo:not(#love-h-a) { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: #18181B; }
html body .cart-sub:not(#love-h-a) { margin: 4px 0 0; font-size: 13px; color: #71717A; }
@media (max-width: 640px) {
  .cart-resumo-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cart-resumo-col { border-left: 0; padding-left: 0; }
}

/* Financeiro: as abas (Financeiro, Cobranças, Contas bancárias) grudadas no
   topo da caixa, como a Carteira Digital do love.com.br — a linha das abas
   vira a borda de cima da caixa. */
html body #payments-view-tabs:not(#love-h-a) { margin-bottom: 0 !important; }
html body :is(.fin-resumo, .fin-contas):not(#love-h-a):not(#love-h-b) {
  border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
}
html body [data-view-panel="receber"]:not(#love-h-a) { padding-top: 24px; }

/* Financeiro › extrato: botão de período no lugar do "Filtrar por", com o
   mesmo calendário do Dashboard do Admin (atalhos + mês + Aplicar). */
html body .per-wrap:not(#love-h-a) { position: relative; }
html body .per-btn:not(#love-h-a) { gap: 8px; }
html body .per-btn-cal:not(#love-h-a) { width: 16px; height: 16px; }
html body .per-seta:not(#love-h-a) { width: 15px; height: 15px; color: #71717A; transition: transform .2s ease; }
html body .per-btn[aria-expanded="true"] .per-seta:not(#love-h-a) { transform: rotate(180deg); }
html body .per-btn.is-ativo:not(#love-h-a) { border-color: #183b54 !important; color: #183b54; }
html body .per-menu:not(#love-h-a) {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: flex; gap: 12px; padding: 12px;
  background: #FFFFFF; border: 1px solid var(--borda-suave); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); text-align: left;
}
html body .per-menu[hidden]:not(#love-h-a) { display: none; }
html body .per-atalhos:not(#love-h-a) { display: flex; flex-direction: column; gap: 2px; min-width: 128px; padding-right: 12px; border-right: 1px solid #F0F0F2; }
html body .per-atalho:not(#love-h-a) { border: 0; background: none; padding: 7px 8px; border-radius: 6px; font: inherit; font-size: 13px; color: #18181B; text-align: left; cursor: pointer; white-space: nowrap; }
html body .per-atalho:hover:not(#love-h-a) { background: #F4F4F5; }
html body .per-corpo:not(#love-h-a) { width: 252px; }
html body .per-topo:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
html body .per-mes:not(#love-h-a) { font-size: 14px; font-weight: 600; color: #18181B; }
html body .per-nav:not(#love-h-a) { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; background: none; color: #71717A; cursor: pointer; padding: 0; }
html body .per-nav:hover:not(:disabled):not(#love-h-a) { border-color: #E4E4E7; color: #181D24; }
html body .per-nav:disabled:not(#love-h-a) { opacity: .35; cursor: default; }
html body .per-nav svg:not(#love-h-a) { width: 16px; height: 16px; }
html body :is(.per-semana, .per-dias):not(#love-h-a) { display: grid; grid-template-columns: repeat(7, 36px); }
html body .per-semana span:not(#love-h-a) { text-align: center; font-size: 11px; font-weight: 500; color: #A1A1AA; padding-bottom: 4px; }
html body .per-dia:not(#love-h-a) { height: 34px; border: 0; background: none; font: inherit; font-size: 13px; color: #18181B; cursor: pointer; border-radius: 6px; font-variant-numeric: tabular-nums; padding: 0; }
html body .per-dia:hover:not(:disabled):not(#love-h-a) { background: #F4F4F5; }
html body .per-dia:disabled:not(#love-h-a) { color: #D4D4D8; cursor: default; }
html body .per-dia.is-hoje:not(#love-h-a) { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html body .per-dia.is-meio:not(#love-h-a) { background: #F4F4F5; border-radius: 0; }
html body .per-dia.is-inicio:not(#love-h-a), html body .per-dia.is-fim:not(#love-h-a) { background: #181D24; color: #FFFFFF; }
html body .per-dica:not(#love-h-a) { margin: 8px 0; font-size: 12px; color: #71717A; text-align: center; min-height: 1.1em; }
html body .per-aplicar:not(#love-h-a) { width: 100%; height: 38px; margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; background: #F4F4F5; color: #3F3F46; border: 1px solid #E4E4E7; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
html body .per-aplicar:hover:not(#love-h-a) { background: #E9E9EC; }
@media (max-width: 640px) {
  html body .per-menu:not(#love-h-a) { flex-direction: column; }
  html body .per-atalhos:not(#love-h-a) { flex-direction: row; flex-wrap: wrap; border-right: 0; padding-right: 0; border-bottom: 1px solid #F0F0F2; padding-bottom: 8px; }
}

/* ==========================================================================
   Financeiro › Contas bancárias: copiado da Carteira Digital do love.com.br
   (aviso de documentos, faixa azul + cartão da verificação, cadastro e
   tabela das contas). Escopo #carteira-raiz = a aba no Hub.
   ========================================================================== */
html body button.cart-btn-escuro:not(#love-h-a) { height: 40px; margin-top: 8px; padding: 0 18px; background: #181D24; border: 1px solid #181D24; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; color: #FFFFFF; cursor: pointer; }
html body button.cart-btn-escuro:not(#love-h-a):hover:not(:disabled) { background: #262D36; }
html body button.cart-btn-escuro:not(#love-h-a):disabled { background: #E4E4E7; border-color: #E4E4E7; color: #A1A1AA; cursor: default; }
.cart-status { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cart-status-solicitado { background: #EBF4FF; color: #183b54; }
.cart-status-processando { background: #FEF7E6; color: #92400E; }
.cart-status-realizado { background: #ECFDF3; color: #067647; }
.cart-status-recusado { background: #F4F4F5; color: #52525B; }
.cart-contas { padding-bottom: 8px; }
.cart-contas-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
html body .cart-contas-topo .cart-btn-escuro:not(#love-h-a) { margin-top: 0; }
.cart-contas-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; flex-wrap: wrap; }
.cart-form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cart-form-pix { grid-template-columns: 160px minmax(0, 1fr); }
.cart-form-grade[hidden] { display: none; }
.cart-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: #3F3F46; }
.cart-campo-largo { grid-column: 1 / -1; }
html body .cart-campo :is(input, select):not(#love-h-a) { width: 100%; height: 40px; padding: 0 12px; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 8px; font-family: inherit; font-size: 14px; color: #18181B; outline: none; box-shadow: none; }
html body .cart-campo :is(input, select):not(#love-h-a):focus { border-color: #181D24; }
.cart-campo-rotulo { margin: 16px 0 8px; font-size: 13px; font-weight: 500; color: #3F3F46; }
.cart-form-erro { margin: 12px 0 0; font-size: 12px; color: #c7305b; }
.cart-form-erro[hidden] { display: none; }
html body button.cart-cancelar:not(#love-h-a) { padding: 0 8px; background: transparent; border: 0; font-family: inherit; font-size: 14px; font-weight: 600; color: #52525B; cursor: pointer; }
html body button.cart-cancelar:not(#love-h-a):hover { color: #181D24; }
.cart-form-sub { margin: 4px 0 0; font-size: 13px; color: #71717A; }
html body #carteira-raiz .cart-form-corpo:not(#love-h-a) { display: flex; flex-direction: column; gap: 16px; padding: 4px 24px 24px; max-width: 640px; }
html body #carteira-raiz .cart-form-corpo .cart-metodos:not(#love-h-a) { margin: 0; }
html body #carteira-raiz .cart-form-acoes:not(#love-h-a) { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
html body #carteira-raiz .cart-form-acoes .cart-btn-escuro:not(#love-h-a) { margin-top: 0; }
html body #carteira-raiz .cart-contas-cab:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--divisor-suave, rgba(0,0,0,.04)); }
.cart-contas-cab-texto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html body #carteira-raiz .cart-contas-cab .cart-titulo:not(#love-h-a) { margin: 0; font-size: 15px; }
html body #carteira-raiz .cart-contas-cab .cart-btn-escuro:not(#love-h-a) { margin-top: 0; height: 38px; }
html body #carteira-raiz .cart-contas-tabela:not(#love-h-a) { display: flex; flex-direction: column; min-height: 420px; }
html body #carteira-raiz .cart-contas-tabela > .overflow-x-auto:not(#love-h-a) { flex: 1 0 auto; display: flex; flex-direction: column; }
html body #carteira-raiz .cart-contas-tabela .love-tabela:has(.cart-contas-vazio):not(#love-h-a) { flex: 1 0 auto; height: 100%; }
html body #carteira-raiz td.cart-contas-vazio:not(#love-h-a) { text-align: center !important; vertical-align: middle !important; border-bottom: 0 !important; color: #71717A; }
html body #carteira-raiz .cart-contas-tabela td:not(#love-h-a) { white-space: nowrap; }
.cart-conta-em_analise { background: #EBF4FF; color: #183b54; }
.cart-conta-aprovado { background: #ECFDF3; color: #067647; }
.cart-conta-recusado { background: #F4F4F5; color: #52525B; }
html body #carteira-raiz button.cart-remover:not(#love-h-a) { padding: 0; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 500; color: #52525B; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(82, 82, 91, 0.35); }
html body #carteira-raiz button.cart-remover:not(#love-h-a):hover { color: #181D24; text-decoration-color: #181D24; }
.cart-docs-aviso { display: flex; align-items: center; gap: 40px; padding: 28px 40px; }
.cart-docs-ilustra { flex: 0 0 140px; width: 140px; height: 140px; }
.cart-docs-ilustra svg { width: 100%; height: 100%; display: block; }
html body .cart-docs-texto h3:not(#love-h-a) { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; color: #18181B; }
html body .cart-docs-texto p:not(#love-h-a) { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: #3F3F46; }
html body .cart-docs-texto .cart-btn-escuro:not(#love-h-a) { margin-top: 20px; }
@media (max-width: 640px) { .cart-docs-aviso { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; } .cart-docs-ilustra { flex-basis: auto; width: 110px; height: 110px; } }
html body #carteira-raiz .cart-verif:not(#love-h-a) { overflow: hidden; padding-bottom: 32px; }
html body .cart-verif-faixa:not(#love-h-a) { padding: 40px 32px 96px; background-color: #EBF4FF; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%2728%27%20viewBox%3D%270%200%20160%2028%27%3E%3Cpath%20d%3D%27M0%2014%20C20%204%2060%204%2080%2014%20S140%2024%20160%2014%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-opacity%3D%270.75%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E"); background-size: 160px 28px; }
html body .cart-verif-faixa h3:not(#love-h-a) { margin: 0; max-width: 560px; font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; color: #18181B; }
html body .cart-verif-faixa p:not(#love-h-a) { margin: 12px 0 0; font-size: 15px; color: #3F3F46; }
html body .cart-verif-cartao:not(#love-h-a) { position: relative; margin: -64px 32px 0; max-width: 760px; padding: 24px 28px; background: #FFFFFF; border: 1px solid var(--borda-suave, rgba(0,0,0,.06)); border-radius: 10px; box-shadow: var(--anel-suave, 0 0 0 1px rgba(0,0,0,.03)); display: flex; flex-direction: column; gap: 16px; }
html body .cart-verif-titulo:not(#love-h-a) { margin: 0; padding-bottom: 14px; border-bottom: 1px solid #E4E4E7; font-size: 15px; font-weight: 700; color: #18181B; }
.cart-verif-intro { margin: 0; font-size: 14px; color: #52525B; }
.cart-verif-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cart-verif-lista li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: #3F3F46; line-height: 1.5; }
.cart-verif-lista svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: #183b54; }
.cart-verif-arquivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: -8px; }
html body .cart-arquivo:not(#love-h-a) { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 112px; padding: 16px; border: 1px dashed #D4D4D8; border-radius: 8px; background: #FFFFFF; text-align: center; cursor: pointer; }
html body .cart-arquivo:not(#love-h-a):hover, html body .cart-arquivo.tem-arquivo:not(#love-h-a) { border-color: #181D24; }
.cart-arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cart-arquivo svg { width: 22px; height: 22px; color: #71717A; }
.cart-arquivo b { font-size: 13px; font-weight: 600; color: #18181B; }
.cart-arquivo span { font-size: 12px; color: #71717A; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-arquivo.tem-arquivo svg { color: #183b54; }
@media (max-width: 640px) { html body .cart-verif-faixa:not(#love-h-a) { padding: 28px 24px 88px; } html body .cart-verif-faixa h3:not(#love-h-a) { font-size: 22px; } html body .cart-verif-cartao:not(#love-h-a) { margin: -64px 16px 0; padding: 20px; } .cart-verif-arquivos { grid-template-columns: 1fr; } }
html body .cart-verif-faixa:not(#love-h-a) {
  background-color: #183b54;
  background-image:
    radial-gradient(120% 140% at 100% 0%, rgba(42, 120, 214, .55) 0%, rgba(42, 120, 214, 0) 55%),
    linear-gradient(180deg, #183b54 0%, #1d4664 100%);
  background-size: auto;
  background-repeat: no-repeat;
}
html body .cart-verif-faixa h3:not(#love-h-a) { color: #FFFFFF !important; }
html body .cart-verif-faixa p:not(#love-h-a) { color: rgba(255, 255, 255, .8) !important; }
html body .cart-verif-faixa .cart-verif-logo { display: inline-block; height: 0.92em; width: auto; margin: 0 0 0 0.12em; vertical-align: -0.073em; }
html body .cart-arquivo[hidden]:not(#love-h-a) { display: none; }

/* Contas bancárias no Hub: a caixa encosta nas abas (como na Carteira). */
html body [data-view-panel="contas"] #carteira-raiz > .cart-caixa:first-child:not(#love-h-a) { border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.cart-vazio { margin: 0; padding: 28px 24px 32px; font-size: 13px; color: #71717A; }
.cart-col-acoes { width: 48px; text-align: right !important; }
html body button.cart-btn-escuro:not(#love-h-a) { height: 40px; margin-top: 8px; padding: 0 18px; background: #181D24; border: 1px solid #181D24; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; color: #FFFFFF; cursor: pointer; }
html body button.cart-btn-escuro:not(#love-h-a):hover:not(:disabled) { background: #262D36; }
html body button.cart-btn-escuro:not(#love-h-a):disabled { background: #E4E4E7; border-color: #E4E4E7; color: #A1A1AA; cursor: default; }

/* ==========================================================================
   Oportunidades no modelo de "Minhas solicitações" (love.com.br): linhas
   dentro de uma caixa e a paginação no rodapé dela.
   ========================================================================== */
html body .op-caixa:not(#love-h-a) { padding: 0 !important; display: flex; flex-direction: column; overflow: visible; }
html body .op-posts:not(#love-h-a) { display: flex; flex-direction: column; }
html body .op-posts:empty:not(#love-h-a) { display: none; }
html body .op-post:not(#love-h-a) {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 170px 120px 36px; align-items: center; gap: 16px;
  padding: 22px 24px; border-bottom: 1px solid var(--borda-suave); cursor: pointer; outline: none;
}
html body .op-post:hover:not(#love-h-a), html body .op-post:focus-visible:not(#love-h-a) { background: #FAFAFA; }
html body button.op-post-titulo:not(#love-h-a) {
  display: block; max-width: 100%; margin: 0; padding: 0; background: none; border: 0; font-family: inherit; font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em; color: #183b54; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body .op-post:hover button.op-post-titulo:not(#love-h-a) { text-decoration: underline; text-underline-offset: 3px; }
html body .op-post-criado:not(#love-h-a) { margin: 4px 0 0; font-size: 13px; color: #71717A; }
html body .op-post-situacao:not(#love-h-a) { margin: 14px 0 0; font-size: 13px; color: #3F3F46; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
html body .op-post-situacao b:not(#love-h-a) { font-weight: 600; color: #18181B; }
html body .op-post-selos:not(#love-h-a) { display: inline-flex; gap: 6px; margin-left: 6px; }
html body .op-post-num:not(#love-h-a) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body .op-post-num b:not(#love-h-a) { font-size: 14px; font-weight: 600; color: #18181B; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html body .op-post-num span:not(#love-h-a) { font-size: 13px; color: #71717A; }
html body button.op-post-botao:not(#love-h-a) {
  height: 36px; padding: 0 14px; background: #FFFFFF; border: 1px solid var(--borda-suave); box-shadow: var(--anel-suave); border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #18181B; cursor: pointer; white-space: nowrap;
}
html body .op-post:hover button.op-post-botao:not(#love-h-a), html body button.op-post-botao:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body button.op-post-salvar:not(#love-h-a) {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: #FFFFFF;
  border: 1px solid var(--borda-suave); box-shadow: var(--anel-suave); border-radius: 8px; color: #3F3F46; cursor: pointer;
}
html body button.op-post-salvar:hover:not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body button.op-post-salvar svg:not(#love-h-a) { width: 18px; height: 18px; }
html body button.op-post-salvar.is-salva:not(#love-h-a) { color: #183b54; }
html body button.op-post-salvar.is-salva svg:not(#love-h-a) { fill: #183b54; }
html body .op-vazio-caixa:not(#love-h-a) { margin: 0; padding: 48px 24px; border: 0 !important; background: transparent !important; text-align: center; }
/* Rodapé: "Mostrar 15" à esquerda e "Página 1 de 1" com as setas à direita. */
html body .op-caixa .guests-pagination:not(#love-h-a) {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 0; padding: 16px 24px 20px; border-top: 0;
}
html body .op-caixa .guests-pagination-size:not(#love-h-a) { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #71717A; }
html body .op-caixa .guests-pagination-size select:not(#love-h-a) { width: auto; height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--borda-suave); border-radius: 8px; background-color: #FFFFFF; font-family: inherit; font-size: 13px; color: #18181B; }
html body .op-caixa .guests-pagination-nav:not(#love-h-a) { display: flex; align-items: center; gap: 12px; }
html body .op-caixa .guests-pagination-nav span:not(#love-h-a) { font-size: 13px; font-weight: 600; color: #3F3F46; white-space: nowrap; }
html body .op-caixa .guests-pagination-btn:not(#love-h-a) {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF; color: #3F3F46; cursor: pointer;
}
html body .op-caixa .guests-pagination-btn svg:not(#love-h-a) { width: 16px; height: 16px; }
html body .op-caixa .guests-pagination-btn:hover:not(:disabled):not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .op-caixa .guests-pagination-btn:disabled:not(#love-h-a) { opacity: .4; cursor: default; }
@media (max-width: 900px) {
  html body .op-post:not(#love-h-a) { grid-template-columns: minmax(0, 1fr) auto 36px; }
  html body .op-post-num:not(#love-h-a) { display: none; }
}

/* Tabelas com rodapé de páginas e vazias ocupando boa parte da tela
   (como Meus convidados do love.com.br). */
html body :is(#orcamentos-table-card, #contratos-clientes-card):not(#love-h-a) { display: flex; flex-direction: column; min-height: calc(100vh - 340px); padding: 0 !important; }
html body :is(#orcamentos-table-card, #contratos-clientes-card) > .leads-table-wrap:not(#love-h-a) { flex: 1 0 auto; display: flex; flex-direction: column; }
html body :is(#orcamentos-table-card, #contratos-clientes-card) > .leads-table-wrap > table:not(#love-h-a) { flex: 1 0 auto; }
html body td.tabela-vazia-cheia:not(#love-h-a) { height: 100%; padding: 64px 16px !important; text-align: center; vertical-align: middle; font-size: 14px; color: #71717A !important; }
html body .tabela-paginacao:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: auto 0 0; padding: 16px 24px 20px; border-top: 1px solid var(--divisor-suave, rgba(0,0,0,.04)); }
html body .tabela-paginacao .guests-pagination-size:not(#love-h-a) { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #71717A; }
html body .tabela-paginacao .guests-pagination-size select:not(#love-h-a) { width: auto; height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--borda-suave); border-radius: 8px; background-color: #FFFFFF; font-family: inherit; font-size: 13px; color: #18181B; }
html body .tabela-paginacao .guests-pagination-nav:not(#love-h-a) { display: flex; align-items: center; gap: 12px; }
html body .tabela-paginacao .guests-pagination-nav span:not(#love-h-a) { font-size: 13px; font-weight: 600; color: #3F3F46; white-space: nowrap; }
html body .tabela-paginacao .guests-pagination-btn:not(#love-h-a) { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--borda-suave); border-radius: 8px; background: #FFFFFF; color: #3F3F46; cursor: pointer; }
html body .tabela-paginacao .guests-pagination-btn svg:not(#love-h-a) { width: 16px; height: 16px; }
html body .tabela-paginacao .guests-pagination-btn:hover:not(:disabled):not(#love-h-a) { border-color: #181D24; color: #181D24; }
html body .tabela-paginacao .guests-pagination-btn:disabled:not(#love-h-a) { opacity: .4; cursor: default; }
html body #orcamento-novo-btn[hidden]:not(#love-h-a) { display: none !important; }

/* Meus contratos: o contrato aberto vira uma página dentro da caixa. */
html body #contratos-clientes-card.mostrando-contrato > :not(.contrato-pagina):not(#love-h-a) { display: none !important; }
html body .contrato-pagina[hidden]:not(#love-h-a) { display: none; }
html body .contrato-pagina:not(#love-h-a) { padding: 24px; }
html body .contrato-pagina-caminho:not(#love-h-a) { margin-bottom: 16px; }
html body .contrato-pagina .contratos-detalhe:not(#love-h-a) { padding: 0; background: transparent; border: 0; }

/* Editar meu site: a etiqueta "Seção" (arrastar) fica sempre por cima do
   cabeçalho do site, mesmo na primeira seção. */
html body #site-builder-root .builder-section:is(:hover, .is-selected):not(#love-h-a) { z-index: 30; }
html body #site-builder-root .builder-block-toolbar:not(#love-h-a) { z-index: 40; }

/* Configurações › Suas informações: abas "Informações da empresa" e
   "Informações pessoais" (sublinhado na cor primária, como no love.com.br)
   encostadas na caixa. */
html body .settings-info-abas:not(#love-h-a) { display: flex; gap: 24px; max-width: 40rem; margin: 0 auto; border-bottom: 1px solid var(--borda-suave); }
html body .settings-info-aba:not(#love-h-a) {
  padding: 0 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none;
  font-family: inherit; font-size: 14px; font-weight: 600; color: #71717A; cursor: pointer;
}
html body .settings-info-aba:hover:not(#love-h-a) { color: #18181B; }
html body .settings-info-aba.is-ativa:not(#love-h-a) { color: #18181B; border-bottom-color: #183b54; }
html body .settings-info-caixa:not(#love-h-a) { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: 0 !important; }
html body .settings-info-painel:not(#love-h-a) { display: flex; flex-direction: column; gap: 1.25rem; }
html body .settings-info-painel[hidden]:not(#love-h-a) { display: none; }
html body .settings-info-dica:not(#love-h-a) { margin: 0; font-size: 13px; line-height: 1.5; color: #71717A; }
html body.doc-cpf [data-so-cnpj]:not(#love-h-a) { display: none; }

/* Configurações › Dados bancários: o mesmo fluxo de Contas bancárias, centralizado como as outras caixas. */
html body [data-settings-panel="banco"] #carteira-raiz:not(#love-h-a) { max-width: 48rem; margin: 0 auto; }

/* ==========================================================================
   Padrão das caixas de tabela (como Meus convidados do love.com.br): a
   caixa vai até perto do rodapé; as linhas têm o tamanho normal e, abaixo
   delas, ficam linhas vazias com a divisória; "Mostrar 15 · Página X de Y"
   no rodapé da caixa.
   ========================================================================== */
html body :is(#leads-table-card, #op-propostas-card, #finance-lista-card, #team-table-card, #orcamentos-table-card, #contratos-clientes-card):not(#love-h-a) {
  display: flex; flex-direction: column; min-height: calc(100vh - 340px); padding: 0 !important;
}
html body :is(#leads-table-card, #op-propostas-card, #finance-lista-card, #team-table-card, #orcamentos-table-card, #contratos-clientes-card) > .leads-table-wrap:not(#love-h-a) {
  flex: 1 0 auto; display: flex; flex-direction: column;
}
html body :is(#leads-table-card, #op-propostas-card, #finance-lista-card, #team-table-card, #orcamentos-table-card, #contratos-clientes-card) > .leads-table-wrap > table:not(#love-h-a) { flex: 0 0 auto; }
html body :is(#leads-table-card, #op-propostas-card, #finance-lista-card, #team-table-card, #orcamentos-table-card, #contratos-clientes-card) > .leads-table-wrap:not(#love-h-a)::after {
  content: ""; flex: 1 0 auto; min-height: 50px;
  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 50px);
}
html body td.tabela-vazia-cheia:not(#love-h-a) { height: auto; padding: 14px 16px !important; text-align: left; font-size: 14px; color: #71717A !important; }
html body #leads-table-card .tabela-barra > .crm-footer-count:not(#love-h-a) { margin: 0 auto 0 12px; font-size: 13px; color: #71717A; white-space: nowrap; }

/* Oportunidades: a caixa também vai até perto do rodapé. */
html body .op-caixa:not(#love-h-a) { min-height: calc(100vh - 340px); }
html body .op-caixa > .op-posts:not(#love-h-a) { flex: 1 0 auto; }
html body .op-caixa > .op-vazio-caixa:not(#love-h-a) { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }

/* Seus formulários vazio: caixa até perto do rodapé, texto e botão no meio. */
html body .forms-vazio:not(#love-h-a) { min-height: calc(100vh - 300px); justify-content: center; }

/* Meus produtos: caixa de busca + quantidade; abas grudadas no topo dela. */
html body[data-page="produtos"] #category-tabs:not(#love-h-a) { margin-bottom: 0 !important; }
html body .produtos-barra-caixa:not(#love-h-a) {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 0 0 24px; padding: 14px 16px !important;
}
html body .produtos-barra-caixa .produtos-busca:not(#love-h-a) { width: 280px; max-width: 100%; margin: 0; }
html body .produtos-total:not(#love-h-a) { margin: 0; font-size: 14px; color: #52525B; }
html body .produtos-total b:not(#love-h-a) { color: #18181B; font-weight: 700; }
html body.produto-editor-aberto .produtos-barra-caixa:not(#love-h-a) { display: none !important; }

/* Suas informações: abas grudadas no topo da caixa (como Meus convidados), sem o espaço do painel entre elas. */
html body .settings-shell [data-settings-panel] > .settings-info-abas + .settings-info-caixa:not(#love-h-a) { margin-top: -1.5rem !important; }

/* Suas informações: endereço com número e complemento menores na mesma linha;
   data de nascimento obrigatória só para quem usa CPF (exigência do Asaas). */
html body .settings-endereco-trio:not(#love-h-a) { display: grid; grid-template-columns: minmax(0, 1fr) 96px 140px; gap: 12px; }
@media (max-width: 640px) { html body .settings-endereco-trio:not(#love-h-a) { grid-template-columns: minmax(0, 1fr) 96px; } html body .settings-endereco-trio > :first-child:not(#love-h-a) { grid-column: 1 / -1; } }
html body:not(.doc-cpf) .obrig-so-cpf:not(#love-h-a) { display: none; }

/* Sua empresa: caixinhas de marcar (endereço igual, visitas, amostra). */
html body .settings-check:not(#love-h-a) { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: #18181B; line-height: 1.45; }
html body .settings-check input:not(#love-h-a) { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: #183b54; cursor: pointer; }
html body .settings-check small:not(#love-h-a) { display: block; margin-top: 2px; font-size: 12px; color: #71717A; }
html body .settings-endereco-proprio:not(#love-h-a) { display: flex; flex-direction: column; gap: 1.25rem; }
html body .settings-endereco-proprio[hidden]:not(#love-h-a) { display: none; }
html body .parcelas-opcoes .parcelas-card-sub:not(#love-h-a) { margin-top: 2px; }

/* Caixas grudadas nas abas (Meus produtos, Suas informações): a regra geral
   das caixas devolvia a borda e os cantos de cima — aqui ganha dela. */
html body .settings-info-caixa:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
  border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
}

/* ==========================================================================
   Celular como app (PWA) — SÓ abaixo de 768px; o desktop não muda.
   - Sem rolagem para os lados; altura pela viewport dinâmica (dvh).
   - Áreas seguras do iOS/Android: topo (barra de status) e rodapé (o menu
     inferior já respeita o indicador de home).
   - Margem lateral de app (16px) e espaço para o menu inferior no fim.
   - Toques de pelo menos 44 × 44 px nos botões e links principais.
   - Campos com 16px de letra (o Safari não dá zoom ao focar).
   ========================================================================== */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  :root { --b2b-content-pad-x: 16px; }
  html, body { overflow-x: hidden; max-width: 100%; }
  html body .b2b-shell:not(#love-h-a), html body .b2b-main:not(#love-h-a) { min-height: 100dvh; overflow-x: hidden; }
  html body .b2b-topbar:not(#love-h-a) { padding-top: env(safe-area-inset-top, 0); height: auto; min-height: calc(64px + env(safe-area-inset-top, 0)); }
  html body[data-page="dashboard"] .b2b-content:not(#love-h-a) { padding-top: calc(var(--b2b-content-pad-y) + env(safe-area-inset-top, 0)); }
  html body .b2b-content:not(#love-h-a) {
    padding-left: 16px !important; padding-right: 16px !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0)) !important;
    overflow-x: hidden;
  }
  html body .mobile-bottom-nav:not(#love-h-a) { padding-bottom: env(safe-area-inset-bottom, 0); }

  /* Toque mínimo de 44px. */
  html body :is(.btn-primary, .btn-secondary, .cart-btn-escuro, .op-post-botao, .fin-lista-btn, .tabela-barra-btn, .op-filtrar-btn, .produto-voltar, .cart-link, .cart-link-texto):not(#love-h-a) { min-height: 44px; }
  html body :is(.topbar-icon-plain, .topbar-avatar-btn, .tabela-ver-mais, .guests-pagination-btn, .op-post-salvar, .op-pagina-btn, .mobile-nav-item):not(#love-h-a) { min-width: 44px; min-height: 44px; }
  html body .category-tab:not(#love-h-a), html body .settings-info-aba:not(#love-h-a), html body .op-prop-aba:not(#love-h-a) { min-height: 44px; }

  /* Campos: 16px para o iOS não dar zoom. */
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):not(#love-h-a) { font-size: 16px !important; }

  /* Nada passa da largura da tela: tabelas rolam dentro da própria caixa. */
  html body :is(.leads-table-wrap, .overflow-x-auto):not(#love-h-a) { max-width: 100%; -webkit-overflow-scrolling: touch; }
  html body img:not(#love-h-a) { max-width: 100%; }
}

/* ==========================================================================
   Hub como app no celular (igual à plataforma dos anfitriões) — SÓ até
   768px; o desktop não muda.
   ========================================================================== */
.submenu-celular { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  :root {
    --navbar-height-mobile: calc(60px + env(safe-area-inset-top, 0px));
    --bottom-bar-height-mobile: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  html, body { overflow-x: clip; max-width: 100%; }
  html body .b2b-shell:not(#love-h-a), html body .b2b-main:not(#love-h-a) { min-height: 100dvh; overflow-x: clip; }

  /* Topo: desce abaixo do notch / barra de status. */
  html body .b2b-topbar:not(#love-h-a) {
    height: var(--navbar-height-mobile) !important; min-height: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box;
  }

  /* Conteúdo: 16px dos lados e sobra embaixo para a barra. */
  html body .b2b-content:not(#love-h-a) {
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(var(--bottom-bar-height-mobile) + 1.5rem) !important;
  }

  /* Barra de baixo: 5 atalhos do mesmo tamanho, ícone + nome; ativo branco. */
  html body .mobile-bottom-nav:not(#love-h-a) {
    display: flex !important; align-items: stretch; justify-content: space-between; gap: 0 !important;
    height: var(--bottom-bar-height-mobile) !important;
    padding: 0 max(0.25rem, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(0.25rem, env(safe-area-inset-left, 0px)) !important;
    background: #183b54 !important; border-top: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: none !important; box-sizing: border-box;
  }
  html body .mobile-bottom-nav .mobile-nav-item:not(#love-h-a) {
    flex: 1 1 0 !important; width: auto !important; min-width: 44px !important; height: 63px !important; min-height: 44px !important; margin: 0 !important;
    display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important;
    color: rgba(255, 255, 255, 0.68) !important; position: relative;
  }
  html body .mobile-bottom-nav .mobile-nav-item:not(#love-h-a) svg { width: 22px !important; height: 22px !important; color: currentColor !important; stroke: currentColor !important; }
  html body .mobile-bottom-nav .mobile-nav-item.active:not(#love-h-a) { color: #FFFFFF !important; background: transparent !important; }
  html body .mobile-bottom-nav .mobile-nav-item.active:not(#love-h-a)::before { display: none !important; }
  html body .mobile-bottom-nav .mobile-nav-item > span:last-child:not(.nav-badge):not(#love-h-a) {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: Inter, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0; color: currentColor;
  }
  html body .mobile-bottom-nav .mobile-nav-item.active > span:last-child:not(#love-h-a) { font-weight: 600; }
  body[data-theme="dark"] .mobile-bottom-nav .mobile-nav-item { color: rgba(255, 255, 255, 0.6) !important; }
  body[data-theme="dark"] .mobile-bottom-nav .mobile-nav-item.active { color: #FFFFFF !important; }

  /* Toque mínimo de 44px. */
  html body :is(.topbar-icon-plain, .topbar-avatar-btn, .produto-voltar, .tabela-ver-mais, .guests-pagination-btn, .op-post-salvar, .op-prop-fechar, .per-nav):not(#love-h-a) { min-width: 44px !important; min-height: 44px !important; }
  html body :is(.btn-primary, .btn-secondary, .tabela-barra-btn, .cart-btn-escuro, .op-post-botao, .fin-lista-btn, .op-filtrar-btn, .op-analise-salvar):not(#love-h-a) { min-height: 44px !important; }

  /* Campos com 16px: o Safari não dá zoom. */
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):not(#love-h-a):not(#love-h-b) { font-size: 16px !important; }

  /* Submenu: a lista lateral some; vira a barra segmentada no topo. */
  html body .settings-shell > #settings-tabs:not(#love-h-a) { display: none !important; }
  html body .b2b-content > .submenu-celular:not([hidden]):not(#love-h-a) {
    position: relative; display: flex; flex-shrink: 0; gap: 2px; width: 100%; max-width: 100%; box-sizing: border-box;
    margin: 0 0 16px; padding: 3px; background: #F4F4F5; border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 10px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html body .b2b-content > .submenu-celular::-webkit-scrollbar { display: none; }
  html body .submenu-celular .submenu-celular-item:not(#love-h-a) {
    flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px; padding: 0 14px; background: transparent; border: 1px solid transparent; border-radius: 8px;
    font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: -0.01em;
    color: #52525B; white-space: nowrap; cursor: pointer; box-shadow: none; transform: none; -webkit-tap-highlight-color: transparent;
  }
  html body .submenu-celular .submenu-celular-item.is-ativo:not(#love-h-a) { background: #FFFFFF; border-color: #E4E4E7; color: #18181B; font-weight: 600; }
  body[data-theme="dark"] .b2b-content > .submenu-celular { background: #1F1F1F; border-color: #333333; }
  body[data-theme="dark"] .submenu-celular .submenu-celular-item { color: #A1A1AA; }
  body[data-theme="dark"] .submenu-celular .submenu-celular-item.is-ativo { background: #333333; border-color: #404040; color: #FFFFFF; }
}

/* ==========================================================================
   Celular do Hub igual ao do anfitrião (valores medidos no anfitrião a 375px):
   barra de baixo, cabeçalho das telas, abas do submenu e menu (☰) com a
   conta. Só no celular (inclusive deitado); o desktop não muda.
   ========================================================================== */
.menu-celular-botao, .logo-celular, .notif-tempo-curto { display: none; }
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  .menu-celular, .menu-celular-fundo, .menu-conta, .menu-conta-fundo { display: none !important; }
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  :root { --bottom-bar-height-mobile: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* Base do layout de celular (também com o celular deitado). */
  html body .b2b-sidebar:not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .b2b-main:not(#love-h-a):not(#love-h-b) { margin-left: 0 !important; }
  html body .b2b-footer:not(#love-h-a):not(#love-h-b) { display: none !important; }
  /* Altura da tela em dvh (não pula com a barra do navegador). Quem rola é a
     caixa do conteúdo, como no desktop; as abas grudam no topo dela. */
  html body :is(.b2b-shell, .b2b-main):not(#love-h-a):not(#love-h-b) { height: 100dvh !important; }

  /* ---------- Barra de baixo: fixa, de ponta a ponta, vidro claro ---------- */
  html body .mobile-bottom-nav:not(#love-h-a):not(#love-h-b) {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0 !important;
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important;
    height: var(--bottom-bar-height-mobile) !important; z-index: 70 !important;
    padding: 0 6px env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important;
    border-radius: 0 !important; border: 1px solid rgba(0, 0, 0, 0.09) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(244, 246, 247, 0.42) 100%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 0 0 1px rgba(255, 255, 255, 0.45),
      inset 0 -8px 16px rgba(255, 255, 255, 0.25),
      0 8px 24px rgba(0, 0, 0, 0.10) !important;
  }
  html body .mobile-bottom-nav .mobile-nav-item:not(#love-h-a):not(#love-h-b) {
    flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 52px !important; min-height: 44px !important; margin: 0 !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important;
    padding: 4px 2px !important; border: 0 !important; border-radius: 8px !important;
    background: transparent !important; box-shadow: none !important; transform: none !important;
    color: #52525B !important; position: relative; -webkit-tap-highlight-color: transparent;
  }
  html body .mobile-bottom-nav .mobile-nav-item:not(#love-h-a):not(#love-h-b) svg {
    width: 21px !important; height: 21px !important; flex-shrink: 0;
    color: currentColor !important; stroke: currentColor !important; stroke-width: 2.15px !important;
  }
  html body .mobile-bottom-nav .mobile-nav-item.active:not(#love-h-a):not(#love-h-b) svg { stroke-width: 2.25px !important; }
  html body .mobile-bottom-nav .mobile-nav-item > span:last-child:not(.nav-badge):not(#love-h-a):not(#love-h-b) {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
    font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 10.5px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: normal !important; color: currentColor !important;
  }
  html body .mobile-bottom-nav .mobile-nav-item.active > span:last-child:not(.nav-badge):not(#love-h-a):not(#love-h-b) { font-weight: 600 !important; }
  html body:not([data-theme="dark"]) .mobile-bottom-nav .mobile-nav-item.active:not(#love-h-a):not(#love-h-b) { background: #EBF4FF !important; color: #183b54 !important; box-shadow: none !important; }
  html body .mobile-bottom-nav .mobile-nav-item .nav-badge:not(#love-h-a):not(#love-h-b) { top: 2px; right: calc(50% - 20px); }
  body[data-theme="dark"] .mobile-bottom-nav {
    background: linear-gradient(180deg, rgba(60, 60, 60, 0.55) 0%, rgba(30, 30, 30, 0.45) 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  }
  body[data-theme="dark"] .mobile-bottom-nav .mobile-nav-item { color: #A1A1AA !important; }
  body[data-theme="dark"] .mobile-bottom-nav .mobile-nav-item.active { background: #2A2A2A !important; color: #FFFFFF !important; }

  /* ---------- Topo: só no Dashboard (logo à esquerda; sino e ☰ à direita) ---------- */
  html body:not([data-page="dashboard"]) .b2b-topbar:not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body[data-page="dashboard"] .b2b-topbar:not(#love-h-a):not(#love-h-b) {
    display: flex !important; align-items: center !important; gap: 0 !important; position: relative !important; top: auto !important; z-index: 40;
    height: calc(60px + env(safe-area-inset-top, 0px)) !important; min-height: 0 !important;
    padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)) !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box;
  }
  html body[data-page="dashboard"] .b2b-topbar > :is(.topbar-account-wrap, .topbar-search-trigger):not(#love-h-a):not(#love-h-b),
  html body[data-page="dashboard"] .b2b-topbar #topbar-icon-group > :not(:has(#notif-trigger)):not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body[data-page="dashboard"] .b2b-topbar > .logo-celular:not(#love-h-a):not(#love-h-b) {
    display: flex; align-items: center; gap: 8px; order: 0; margin-right: auto; height: 100%; cursor: pointer; text-decoration: none;
  }
  html body .b2b-topbar > .logo-celular .logo-celular-icone:not(#love-h-a) { height: 36px; width: auto; }
  html body .b2b-topbar > .logo-celular .logo-celular-nome:not(#love-h-a) { height: 28px; width: auto; }
  .logo-celular .logo-escuro { display: none; }
  body[data-theme="dark"] .logo-celular .logo-claro { display: none; }
  body[data-theme="dark"] .logo-celular .logo-escuro { display: block; }
  html body[data-page="dashboard"] .b2b-topbar #topbar-icon-group:not(#love-h-a):not(#love-h-b) { order: 1; display: flex !important; align-items: center; gap: 0 !important; margin: 0 !important; }
  html body[data-page="dashboard"] .b2b-topbar > .menu-celular-botao:not(#love-h-a):not(#love-h-b) { order: 2; margin-left: 10px !important; }
  html body[data-page="dashboard"] .b2b-topbar > .menu-celular-botao:not(#love-h-a):not(#love-h-b),
  html body[data-page="dashboard"] .b2b-topbar #notif-trigger:not(#love-h-a):not(#love-h-b) {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative;
    width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #18181B !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html body[data-page="dashboard"] .b2b-topbar > .menu-celular-botao:not(#love-h-a) svg { width: 24px !important; height: 24px !important; stroke-width: 2px; }
  html body[data-page="dashboard"] .b2b-topbar #notif-trigger:not(#love-h-a) svg { width: 24px !important; height: 24px !important; stroke-width: 2.15px !important; }
  html body[data-page="dashboard"] .b2b-topbar #notif-trigger .topbar-icon-badge:not(#love-h-a):not(#love-h-b) { top: 4px !important; right: 4px !important; }
  body[data-theme="dark"][data-page="dashboard"] .b2b-topbar :is(.menu-celular-botao, #notif-trigger) { background: transparent !important; border: 0 !important; color: #FFFFFF !important; }
  /* O sino/perfil não vão mais para dentro do "Olá" (agora estão no topo e no ☰). */
  html body[data-page="dashboard"] :is(.dashboard-greeting-mobile-avatar, .dashboard-greeting-mobile-icons):not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body[data-page="dashboard"] .b2b-content:not(#love-h-a):not(#love-h-b) { padding-top: 0 !important; }

  /* ---------- Cabeçalho das outras telas: branco até o topo, título 20/700 ---------- */
  html body:not([data-page="dashboard"]) .b2b-content:not(#love-h-a):not(#love-h-b) { padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important; }
  html body .b2b-content > .b2b-header-bar:not(#love-h-a):not(#love-h-b) {
    position: relative; isolation: isolate; z-index: 30;
    display: flex !important; align-items: center !important; flex-wrap: wrap !important; column-gap: 8px !important; row-gap: 12px !important;
    min-height: 0 !important; flex-shrink: 0 !important; box-sizing: border-box;
    margin: calc(-20px - env(safe-area-inset-top, 0px)) -16px 16px !important;
    padding: calc(20px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)) !important;
    background: #FFFFFF !important; border: 0 !important; box-shadow: none !important;
  }
  html body .b2b-content > .b2b-header-bar > :first-child:not(#love-h-a):not(#love-h-b) { flex: 1 1 auto; min-width: 0; }
  html body .b2b-content > .b2b-header-bar :is(h1, h2):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    display: flex; align-items: center; min-height: 44px; margin: 0 !important;
    font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 20px !important; font-weight: 700 !important; line-height: 26px !important; letter-spacing: -0.4px !important; color: #18181B !important;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  html body .b2b-content > .b2b-header-bar .produto-titulo-wrap:not(#love-h-a):not(#love-h-b) { display: flex; align-items: center; gap: 8px; min-width: 0; }
  /* Seta de voltar: ícone de 20px, botão de 44px a 10px da borda; título em 62px. */
  html body .b2b-content > .b2b-header-bar .produto-voltar:not([hidden]):not(#love-h-a):not(#love-h-b) {
    display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin: 0 0 0 -6px !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; color: #18181B !important;
  }
  html body .b2b-content > .b2b-header-bar .produto-voltar:not(#love-h-a):not(#love-h-b) svg { width: 20px !important; height: 20px !important; stroke-width: 2 !important; }
  /* Botões do cabeçalho: só o ícone escuro, sem caixa, 44px, à direita. */
  html body .b2b-content > .b2b-header-bar :is(.btn-primary, .btn-secondary):has(svg):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    position: relative; flex: 0 0 auto; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
    padding: 0 !important; gap: 0 !important; justify-content: center !important; font-size: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; color: #18181B !important;
  }
  html body .b2b-content > .b2b-header-bar :is(.btn-primary, .btn-secondary):has(svg) > :not(svg):not(.op-filtrar-qtd):not(#love-h-a) { display: none !important; }
  html body .b2b-content > .b2b-header-bar :is(.btn-primary, .btn-secondary):has(svg):not(#love-h-a) svg { width: 22px !important; height: 22px !important; color: currentColor !important; }
  html body .b2b-content > .b2b-header-bar .op-filtrar-qtd:not([hidden]):not(#love-h-a) { position: absolute; top: 4px; right: 2px; font-size: 10px !important; }
  /* Sem ícone (Salvar, Marcar todas como lidas): texto na cor primária, sem caixa. */
  html body .b2b-content > .b2b-header-bar :is(.btn-primary, .btn-secondary):not(:has(svg)):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    flex: 0 0 auto; height: 44px !important; min-height: 44px !important; padding: 0 4px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: #183b54 !important; font-size: 14px !important; font-weight: 600 !important;
  }
  /* Busca do cabeçalho: linha de baixo, largura toda. */
  html body .b2b-content > .b2b-header-bar :is(.produtos-header-acoes, .op-header-acoes):not(#love-h-a):not(#love-h-b) { display: contents !important; }
  html body .b2b-content > .b2b-header-bar .tabela-busca:not(#love-h-a):not(#love-h-b) { order: 5; flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
  body[data-theme="dark"] .b2b-content > .b2b-header-bar { background: #1F1F1F !important; }
  body[data-theme="dark"] .b2b-content > .b2b-header-bar :is(h1, h2),
  body[data-theme="dark"] .b2b-content > .b2b-header-bar :is(.produto-voltar, .btn-primary:has(svg), .btn-secondary:has(svg)) { color: #FFFFFF !important; }
  body[data-theme="dark"] .b2b-content > .b2b-header-bar :is(.btn-primary, .btn-secondary):not(:has(svg)) { color: #EBF4FF !important; }

  /* ---------- Abas do submenu: grudadas no topo, mesma largura, linha em cima ---------- */
  html body .settings-shell > #settings-tabs:not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .b2b-content > .submenu-celular:not([hidden]):not(#love-h-a):not(#love-h-b) {
    position: sticky; top: -20px; z-index: 20; /* encosta no topo (o conteúdo tem 20px de respiro em cima) */
    display: flex; flex-shrink: 0; gap: 0; width: auto; max-width: none; box-sizing: border-box;
    margin: -16px -16px 16px !important; padding: 0;
    background: #FFFFFF !important; border: 0 !important; border-top: 1px solid #E4E4E7 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html body .b2b-content > .submenu-celular::-webkit-scrollbar { display: none; }
  html body .b2b-content > .submenu-celular .submenu-celular-item:not(#love-h-a):not(#love-h-b) {
    position: relative; flex: 1 0 auto; min-width: 33.333%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 14px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none;
    background: #FFFFFF !important; color: #52525B !important;
    font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -0.01em !important;
    white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html body .b2b-content > .submenu-celular:not(:has(> :nth-child(4))) .submenu-celular-item:not(#love-h-a):not(#love-h-b) { flex: 1 1 0 !important; min-width: 0 !important; }
  html body .b2b-content > .submenu-celular .submenu-celular-item.is-ativo:not(#love-h-a):not(#love-h-b) { background: #F4F6F7 !important; color: #18181B !important; font-weight: 600 !important; }
  html body .b2b-content > .submenu-celular .submenu-celular-item.is-ativo:not(#love-h-a):not(#love-h-b)::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #183b54; border-radius: 0;
  }
  /* O cabeçalho fica sem a margem de baixo quando as abas vêm logo depois. */
  html body .b2b-content > .b2b-header-bar:has(+ .submenu-celular:not([hidden])):not(#love-h-a):not(#love-h-b) { margin-bottom: 0 !important; }
  html body .b2b-content > .b2b-header-bar + .submenu-celular:not([hidden]):not(#love-h-a):not(#love-h-b) { margin-top: 0 !important; }
  body[data-theme="dark"] .b2b-content > .submenu-celular:not([hidden]) { background: #1F1F1F !important; border-top-color: #333333 !important; }
  body[data-theme="dark"] .b2b-content > .submenu-celular .submenu-celular-item { background: #1F1F1F !important; color: #A1A1AA !important; }
  body[data-theme="dark"] .b2b-content > .submenu-celular .submenu-celular-item.is-ativo { background: #1A1A1A !important; color: #FFFFFF !important; }
  body[data-theme="dark"] .b2b-content > .submenu-celular .submenu-celular-item.is-ativo::before { background: #EBF4FF; }

  /* ---------- Menu (☰): gaveta lateral com as seções e a conta embaixo ---------- */
  body.menu-celular-aberto { overflow: hidden; }
  .menu-celular-fundo, .menu-conta-fundo { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  .menu-celular-fundo { z-index: 88; }
  .menu-conta-fundo { z-index: 92; background: rgba(0, 0, 0, 0.2); }
  .menu-celular-fundo.is-aberta, .menu-conta-fundo.is-aberta { opacity: 1; pointer-events: auto; }
  .menu-celular {
    display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
    width: min(80vw, 330px); background: #FFFFFF; font-family: Inter, sans-serif;
    padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateX(-100%); visibility: hidden; transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s;
  }
  .menu-celular.is-aberta { transform: translateX(0); visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
  .menu-celular button, .menu-conta button, .menu-celular a, .menu-conta a { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none; }
  .menu-celular-topo { display: flex; align-items: center; justify-content: flex-end; height: 52px; padding: 4px 8px 0 20px; flex-shrink: 0; }
  .menu-celular-topo .logo-celular { display: flex; align-items: center; gap: 8px; }
  .menu-celular-topo .logo-celular-icone { height: 28px; width: auto; }
  .menu-celular-topo .logo-celular-nome { height: 21px; width: auto; }
  .menu-celular-fechar { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; color: #18181B; }
  .menu-celular-fechar svg { width: 24px; height: 24px; }
  .menu-celular-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 16px; }
  .menu-celular-secao { margin: 22px 8px 6px; font-size: 13px; font-weight: 500; color: #A1A1AA; }
  .menu-celular-link { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 8px; background: transparent; border: 0; border-radius: 8px; font-size: 16px; font-weight: 400; color: #18181B; text-align: left; }
  .menu-celular-link svg { width: 23px; height: 23px; flex-shrink: 0; color: #3F3F46; }
  .menu-celular-link.is-ativo { font-weight: 600; color: #183b54; }
  .menu-celular-link.is-ativo svg { color: #183b54; }
  .menu-celular-conta {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0; width: 100%; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.06); text-align: left;
  }
  .menu-celular-conta-textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .menu-celular-conta .menu-celular-nome { font-size: 16px; font-weight: 600; letter-spacing: -0.025em; color: #18181B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-celular-conta .menu-celular-empresa-nome { font-size: 13px; font-weight: 400; color: #71717A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-celular-conta-seta { width: 20px; height: 20px; flex-shrink: 0; color: #A1A1AA; }
  html body .menu-celular .menu-celular-avatar:not(#love-h-a),
  html body .menu-conta .menu-conta-avatar:not(#love-h-a) { width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #EBF4FF; color: #183b54; font-size: 15px; font-weight: 600; }
  html body .menu-conta .menu-conta-avatar:not(#love-h-a) { width: 72px; height: 72px; min-width: 72px; font-size: 24px; }
  :is(.menu-celular-avatar, .menu-conta-avatar) :is(img, .b2b-avatar, svg) { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }

  /* Pop-up da conta (sobe de baixo, por cima da gaveta) */
  .menu-conta {
    display: flex; flex-direction: column; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 94; max-height: calc(100dvh - 72px);
    padding: 6px 20px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #FFFFFF; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); font-family: Inter, sans-serif;
    transform: translateY(calc(100% + 16px)); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
  }
  .menu-conta.is-aberta { transform: translateY(0); visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .menu-conta-alca { width: 40px; height: 5px; margin: 4px auto 0; border-radius: 999px; background: #D4D4D8; flex-shrink: 0; }
  .menu-conta-fechar {
    position: absolute; top: 14px; left: 14px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border-radius: 50%; color: #52525B; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(0, 0, 0, 0.06);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  }
  .menu-conta-fechar svg { width: 20px; height: 20px; }
  .menu-conta-cabeca { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 0 16px; text-align: center; }
  .menu-conta-nome { margin: 8px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -0.025em; color: #18181B; }
  .menu-conta-email { margin: 0; font-size: 13px; color: #71717A; }
  .menu-conta-email:empty { display: none; }
  .menu-conta-empresas { margin-bottom: 8px; }
  .menu-conta .menu-celular-empresa-atual { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 8px; text-align: left; color: #18181B; }
  .menu-conta .menu-celular-empresa-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .menu-conta .menu-celular-empresa-rotulo { font-size: 11px; font-weight: 500; color: #A1A1AA; }
  .menu-conta .menu-celular-empresa-atual .menu-celular-empresa-nome { font-size: 16px; font-weight: 600; color: #18181B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-conta .menu-celular-empresa-seta { width: 20px; height: 20px; flex-shrink: 0; color: #71717A; transition: transform .15s ease; }
  .menu-conta .menu-celular-empresa-atual[aria-expanded="true"] .menu-celular-empresa-seta { transform: rotate(180deg); }
  .menu-conta .menu-celular-empresas-lista { margin-top: 8px; border: 1px solid #E4E4E7; border-radius: 10px; overflow: hidden; }
  .menu-conta .menu-celular-empresa { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; background: #FFFFFF; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 15px; color: #18181B; text-align: left; }
  .menu-conta .menu-celular-empresa:last-child { border-bottom: 0; }
  .menu-conta .menu-celular-empresa > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-conta .menu-celular-empresa svg { width: 18px; height: 18px; flex-shrink: 0; }
  .menu-conta .menu-celular-empresa.is-ativo { font-weight: 600; color: #183b54; }
  .menu-conta .menu-celular-empresa.is-criar { justify-content: flex-start; font-weight: 600; color: #183b54; }
  .menu-conta-itens { display: flex; flex-direction: column; }
  .menu-conta-item { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 16px; padding: 0 4px; background: transparent; border: 0; font-size: 16px; font-weight: 400; color: #18181B; text-align: left; }
  .menu-conta-item svg { width: 23px; height: 23px; flex-shrink: 0; color: #3F3F46; }
  .menu-conta-item span { flex: 1 1 auto; min-height: 54px; display: flex; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
  .menu-conta-sair { margin: 14px auto 0; padding: 8px 16px; background: transparent; border: 0; font-size: 16px; font-weight: 500; color: #183b54; }
  body[data-theme="dark"] :is(.menu-celular, .menu-celular-conta, .menu-conta) { background: #1A1A1A; }
  body[data-theme="dark"] :is(.menu-celular-fechar, .menu-celular-link, .menu-celular-conta .menu-celular-nome, .menu-conta-nome, .menu-conta-item, .menu-conta .menu-celular-empresa, .menu-conta .menu-celular-empresa-atual .menu-celular-empresa-nome) { color: #FFFFFF; }
  body[data-theme="dark"] :is(.menu-celular-link svg, .menu-conta-item svg) { color: #D4D4D8; }
  body[data-theme="dark"] .menu-celular-link.is-ativo, body[data-theme="dark"] .menu-celular-link.is-ativo svg, body[data-theme="dark"] .menu-conta-sair { color: #EBF4FF; }
  body[data-theme="dark"] :is(.menu-conta .menu-celular-empresa-atual, .menu-conta .menu-celular-empresa) { background: #252525; border-color: #404040; }
  body[data-theme="dark"] :is(.menu-celular-conta, .menu-conta-item span, .menu-conta .menu-celular-empresa) { border-color: rgba(255, 255, 255, 0.08); }
  body[data-theme="dark"] .menu-conta-fechar { background: rgba(37, 37, 37, 0.72); border-color: rgba(255, 255, 255, 0.1); color: #FFFFFF; }
  /* O perfil do topo vira só o ☰ no celular (a conta abre pela gaveta). */
  html body .profile-dropdown:not(#love-h-a):not(#love-h-b) { display: none !important; }

  /* ---------- Notificações com texto de app e data curta DD/MM/AA ---------- */
  html body #notifications-list:not(#love-h-a) { margin: 0 -16px !important; max-width: none !important; }
  html body #notifications-list .notification-row:not(#love-h-a) { margin: 0 !important; padding: 14px 16px !important; gap: 12px !important; border-radius: 0 !important; }
  html body #notifications-list .notification-row > div:first-child:not(#love-h-a) { width: 40px; height: 40px; min-width: 40px; border-radius: 10px !important; }
  html body #notifications-list .notification-row > div:first-child svg:not(#love-h-a) { width: 22px; height: 22px; }
  html body #notifications-list .notification-row p:not(#love-h-a) { font-size: 15px !important; line-height: 1.4 !important; }
  html body #notifications-list .notification-row p.font-bold:not(#love-h-a) { font-weight: 600 !important; }
  html body #notifications-list .notification-row > div:last-child:not(#love-h-a) { gap: 10px !important; }
  html body #notifications-list .notif-tempo-longo:not(#love-h-a) { display: none !important; }
  html body #notifications-list .notif-tempo-curto:not(#love-h-a) {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; color: #A1A1AA; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  html body #notifications-list .notification-row > div:last-child > div:last-child:not(#love-h-a) { align-items: flex-start !important; padding-top: 2px; }
}

/* ==========================================================================
   Celular do Hub: avisos (toasts) no topo da tela, como o #builder-toast do
   anfitrião; "adicionado" em verde com o nome (Ana S. foi adicionado).
   ========================================================================== */
#b2b-toast .toast-icone { width: 20px; height: 20px; flex-shrink: 0; }
#b2b-toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body #b2b-toast.toast:not(#love-h-a) {
    left: 16px; right: 16px; bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 12px); max-width: 480px; margin: 0 auto;
    padding: 12px 14px; border-radius: 8px; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); transform: translateY(-12px); z-index: 300;
  }
  html body #b2b-toast.toast.show:not(#love-h-a) { transform: translateY(0); }
  html body #b2b-toast.toast[data-tipo="neutro"]:not(#love-h-a) { background: #181D24 !important; }
  html body #b2b-toast.toast[data-tipo="sucesso"]:not(#love-h-a) { background: #1E7A55 !important; }
  body[data-theme="dark"] #b2b-toast.toast[data-tipo="neutro"]:not(#love-h-a) { background: #2A2A2A !important; color: #FFFFFF; }
  body[data-theme="dark"] #b2b-toast.toast[data-tipo="sucesso"]:not(#love-h-a) { background: #1E7A55 !important; color: #FFFFFF; }
}

/* ==========================================================================
   Celular do Hub: listas como Meus convidados do anfitrião (js/utils.js:
   listaNoCelular). Caixa de ponta a ponta sem borda, "N clientes" acima da
   busca, filtro "Rótulo ⌄" ao lado dela, linha com iniciais + nome + uma
   informação à direita, sem Importar/Exportar e sem páginas.
   ========================================================================== */
.tabela-total-celular, .lc-iniciais { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .b2b-content .dash-card.lista-celular:not(#love-h-a):not(#love-h-b) {
    margin-left: -16px !important; margin-right: -16px !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; background: #FFFFFF !important; padding: 16px 0 0 !important; overflow: visible !important;
  }
  html body .dash-card.lista-celular > .tabela-total-celular:not(#love-h-a):not(#love-h-b) {
    display: block; margin: 0; padding: 0 16px 12px; font-family: Inter, sans-serif;
    font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: #52525B;
  }
  /* Barra: busca e o filtro na mesma linha, linha fina embaixo. */
  html body .dash-card.lista-celular > .tabela-barra:not(#love-h-a):not(#love-h-b) {
    display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px;
    padding: 0 16px 16px !important; border-bottom: 1px solid #E4E4E7;
  }
  html body .dash-card.lista-celular .tabela-busca:not(#love-h-a):not(#love-h-b) { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0; }
  html body .dash-card.lista-celular .tabela-busca input:not(#love-h-a):not(#love-h-b) { height: 40px !important; font-size: 16px !important; border-radius: 8px !important; border-color: #E4E4E7 !important; }
  html body .dash-card.lista-celular .tabela-barra-acoes:not(#love-h-a):not(#love-h-b) { flex: 0 0 auto; flex-wrap: nowrap; }
  html body .dash-card.lista-celular :is([data-tabela-importar], [data-tabela-exportar], .tabela-lixeira-btn):not(#love-h-a):not(#love-h-b),
  html body .dash-card.lista-celular > .tabela-barra > :not(.tabela-busca):not(.tabela-barra-acoes):not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .dash-card.lista-celular [data-tabela-filtrar]:not(#love-h-a):not(#love-h-b) {
    height: 40px !important; min-height: 40px !important; padding: 0 12px 0 16px !important; gap: 6px !important;
    background: #FFFFFF !important; border: 1px solid #E4E4E7 !important; border-radius: 8px !important; color: #18181B !important;
  }
  html body .dash-card.lista-celular [data-tabela-filtrar] > :not(.tabela-filtro-contador):not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .dash-card.lista-celular [data-tabela-filtrar]:not(#love-h-a):not(#love-h-b)::before {
    content: attr(data-rotulo-celular); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: Inter, sans-serif; font-size: 15px; font-weight: 500;
  }
  html body .dash-card.lista-celular [data-tabela-filtrar]:not(#love-h-a):not(#love-h-b)::after {
    content: ''; width: 18px; height: 18px; flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  }
  html body .dash-card.lista-celular .tabela-filtro-menu:not(#love-h-a):not(#love-h-b) { right: 0; max-width: calc(100vw - 32px); }

  /* Tabela vira lista. */
  html body .dash-card.lista-celular > :is(.overflow-x-auto, .leads-table-wrap):not(#love-h-a):not(#love-h-b) { overflow: visible !important; border-radius: 0 !important; }
  html body .dash-card.lista-celular table:not(#love-h-a):not(#love-h-b) { min-width: 0 !important; width: 100% !important; display: block; }
  html body .dash-card.lista-celular thead:not(#love-h-a):not(#love-h-b),
  html body .dash-card.lista-celular .tabela-paginacao:not(#love-h-a):not(#love-h-b),
  html body .dash-card.lista-celular tr.lc-linha > td:not(.lc-nome):not(.lc-info):not(.lc-acoes):not(#love-h-a):not(#love-h-b),
  html body .dash-card.lista-celular .lc-nome :is(input[type="checkbox"], .lead-origem-tag, .tabela-copiar-email):not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .dash-card.lista-celular tbody:not(#love-h-a):not(#love-h-b) { display: block; background-image: none !important; }
  html body .dash-card.lista-celular tr.lc-linha:not(#love-h-a):not(#love-h-b) {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px; box-sizing: border-box;
    background: #FFFFFF !important; border: 0 !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html body .dash-card.lista-celular tr.lc-linha > td:not(#love-h-a):not(#love-h-b) { padding: 0 !important; border: 0 !important; height: auto !important; background: transparent !important; }
  html body .dash-card.lista-celular tr.lc-linha > td.lc-nome:not(#love-h-a):not(#love-h-b) {
    display: flex !important; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; padding: 11px 0 !important;
    font-family: Inter, sans-serif; font-size: 17px !important; font-weight: 400 !important; color: #18181B !important;
    white-space: nowrap; overflow: hidden;
  }
  html body .dash-card.lista-celular td.lc-nome *:not(.lc-iniciais):not(#love-h-a):not(#love-h-b) {
    font-size: 17px !important; font-weight: 400 !important; color: #18181B !important; text-decoration: none !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; background: transparent !important; padding: 0 !important; border: 0 !important;
  }
  html body .dash-card.lista-celular .lc-iniciais:not(#love-h-a):not(#love-h-b) {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
    background: #FFFFFF; border: 1px solid #E4E4E7; color: #183b54; font-family: Inter, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0;
  }
  html body .dash-card.lista-celular tr.lc-linha > td.lc-info:not(#love-h-a):not(#love-h-b) {
    display: block !important; flex: 0 0 auto; max-width: 42%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: Inter, sans-serif; font-size: 13px !important; color: #71717A !important;
  }
  html body .dash-card.lista-celular tr.lc-vazia > td:not(#love-h-a):not(#love-h-b) { display: block; border: 0 !important; }

  body[data-theme="dark"] .b2b-content .dash-card.lista-celular,
  body[data-theme="dark"] .dash-card.lista-celular tr.lc-linha { background: #1F1F1F !important; }
  body[data-theme="dark"] .dash-card.lista-celular > .tabela-total-celular { color: #A1A1AA; }
  body[data-theme="dark"] .dash-card.lista-celular > .tabela-barra { border-bottom-color: #333333; }
  body[data-theme="dark"] .dash-card.lista-celular td.lc-nome,
  body[data-theme="dark"] .dash-card.lista-celular td.lc-nome *:not(.lc-iniciais) { color: #FFFFFF !important; }
  body[data-theme="dark"] .dash-card.lista-celular .lc-iniciais { background: #2A2A2A; border-color: #404040; color: #FFFFFF; }
  body[data-theme="dark"] .dash-card.lista-celular [data-tabela-filtrar] { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
  body[data-theme="dark"] .dash-card.lista-celular [data-tabela-filtrar]::after { filter: invert(1); }
}

/* Celular, Meus produtos: "N produtos cadastrados" acima da busca, caixa sem borda. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .b2b-content #produtos-barra-caixa:not(#love-h-a):not(#love-h-b) {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 12px;
    margin-left: -16px !important; margin-right: -16px !important; padding: 16px !important;
    border: 0 !important; border-bottom: 1px solid #E4E4E7 !important; border-radius: 0 !important; box-shadow: none !important; background: #FFFFFF !important;
  }
  html body #produtos-barra-caixa .produtos-total:not(#love-h-a):not(#love-h-b) {
    order: -1; margin: 0; font-family: Inter, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: #52525B;
  }
  html body #produtos-barra-caixa .produtos-total b:not(#love-h-a) { font-weight: 600; color: inherit; }
  html body #produtos-barra-caixa .tabela-busca:not(#love-h-a):not(#love-h-b) { width: 100% !important; max-width: none !important; }
  html body #produtos-barra-caixa .tabela-busca input:not(#love-h-a):not(#love-h-b) { height: 40px !important; font-size: 16px !important; border-color: #E4E4E7 !important; }
  body[data-theme="dark"] .b2b-content #produtos-barra-caixa { background: #1F1F1F !important; border-bottom-color: #333333 !important; }
  body[data-theme="dark"] #produtos-barra-caixa .produtos-total { color: #A1A1AA; }
}

/* ==========================================================================
   Celular do Hub: arrastar a linha para a esquerda mostra Editar/Abrir
   (#183b54) e Remover (#c7305b), retos e da altura da linha, ícone no meio
   (js/utils.js: prepararArrasteDaLinha). Fechada, as ações ficam fora da
   caixa: nenhuma faixa aparece.
   ========================================================================== */
.lc-acoes { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .dash-card.lista-celular tbody:not(#love-h-a):not(#love-h-b) { overflow-x: clip; }
  html body .dash-card.lista-celular tr.lc-linha.tem-arraste:not(#love-h-a):not(#love-h-b) {
    position: relative; touch-action: pan-y; will-change: transform; -webkit-user-select: none; user-select: none;
  }
  html body .dash-card.lista-celular tr.lc-linha > td.lc-acoes:not(#love-h-a):not(#love-h-b) {
    display: flex !important; position: absolute; top: 0; bottom: 0; left: 100%; padding: 0 !important; margin: 0;
  }
  html body .dash-card.lista-celular tr.lc-linha:not(.acoes-visiveis) > td.lc-acoes:not(#love-h-a):not(#love-h-b) { visibility: hidden; }
  html body .lc-acao:not(#love-h-a):not(#love-h-b) {
    display: flex; align-items: center; justify-content: center; width: 80px; height: 100%; padding: 0; margin: 0;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #FFFFFF !important; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html body .lc-acao svg:not(#love-h-a):not(#love-h-b) { width: 22px; height: 22px; }
  html body .lc-acao-editar:not(#love-h-a):not(#love-h-b) { background: #183b54 !important; }
  html body .lc-acao-remover:not(#love-h-a):not(#love-h-b) { background: #c7305b !important; }
  body[data-theme="dark"] .lc-acao-editar { background: #183b54 !important; }
  body[data-theme="dark"] .lc-acao-remover { background: #c7305b !important; }
}

/* ==========================================================================
   Celular do Hub, Mensagens: de ponta a ponta, "N conversas" acima da busca,
   linha com avatar, nome e prévia; arrastar mostra Abrir/Remover; a
   conversa abre em tela cheia com a seta para voltar (js/mensagens.js).
   ========================================================================== */
.chat-voltar-celular, .chat-total-celular, .conv-acoes { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="chat"] .chat-shell:not(#love-h-a):not(#love-h-b) { margin: 0 -16px !important; width: auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #FFFFFF !important; }
  html body[data-page="chat"] .b2b-chat-contacts-column:not(#love-h-a):not(#love-h-b) { width: 100% !important; min-width: 0 !important; border-right: 0 !important; }
  html body[data-page="chat"] .chat-total-celular:not(#love-h-a):not(#love-h-b) {
    display: block; margin: 0; padding: 16px 16px 12px; font-family: Inter, sans-serif;
    font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: #52525B;
  }
  html body[data-page="chat"] .b2b-chat-contacts-header:not(#love-h-a):not(#love-h-b) { height: auto !important; padding: 0 16px 16px !important; border-bottom: 1px solid #E4E4E7 !important; }
  html body[data-page="chat"] #chat-search-input:not(#love-h-a):not(#love-h-b) {
    height: 40px !important; font-size: 16px !important; border-radius: 8px !important; border: 1px solid #E4E4E7 !important; box-shadow: none !important; padding-left: 36px !important;
  }
  html body[data-page="chat"] #chat-search-input:focus:not(#love-h-a):not(#love-h-b) { border-color: #181D24 !important; }

  /* Linhas */
  html body #conv-list .conv-item:not(#love-h-a):not(#love-h-b) {
    border-left: 0 !important; padding: 12px 16px !important; gap: 12px !important; align-items: center !important; min-height: 72px; box-sizing: border-box;
    background: #FFFFFF; -webkit-tap-highlight-color: transparent;
  }
  html body #conv-list .conv-item.active:not(#love-h-a):not(#love-h-b) { background: #FFFFFF !important; }
  html body #conv-list .conv-item .b2b-avatar-square:not(#love-h-a):not(#love-h-b) { width: 44px !important; height: 44px !important; border-radius: 50% !important; }
  html body #conv-list .conv-item h4:not(#love-h-a):not(#love-h-b) { font-family: Inter, sans-serif; font-size: 16px !important; font-weight: 600 !important; color: #18181B !important; }
  html body #conv-list .conv-item p:not(#love-h-a):not(#love-h-b) { font-size: 14px !important; line-height: 1.35 !important; }
  html body #conv-list .conv-item p.text-zinc-500:not(#love-h-a):not(#love-h-b) { color: #71717A !important; }
  html body #conv-list .conv-item-mais:not(#love-h-a):not(#love-h-b) { display: none !important; }

  /* Arrastar: o card anda por cima de Abrir/Remover. */
  html body #conv-list .conv-linha:not(#love-h-a):not(#love-h-b) { position: relative; overflow: hidden; }
  html body #conv-list .conv-linha > .conv-item:not(#love-h-a):not(#love-h-b) {
    position: relative; z-index: 1; touch-action: pan-y; will-change: translate; -webkit-user-select: none; user-select: none;
  }
  html body #conv-list .conv-linha > .conv-acoes:not(#love-h-a):not(#love-h-b) { display: flex; position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; }
  html body #conv-list .conv-linha:not(.acoes-visiveis) > .conv-acoes:not(#love-h-a):not(#love-h-b) { visibility: hidden; }

  /* Conversa aberta: tela cheia, sem o título, a lista e a barra de baixo. */
  html body[data-page="chat"]:not(.chat-conversa-aberta) .chat-coluna-conversa:not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body[data-page="chat"].chat-conversa-aberta :is(.b2b-chat-contacts-column, .mobile-bottom-nav):not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body[data-page="chat"].chat-conversa-aberta .chat-coluna-conversa:not(#love-h-a):not(#love-h-b) {
    position: fixed; inset: 0; z-index: 70; height: 100dvh !important; padding-top: env(safe-area-inset-top, 0px); background: #FFFFFF;
  }
  html body[data-page="chat"] .chat-coluna-conversa > div:first-child:not(#love-h-a):not(#love-h-b) { height: 60px !important; padding: 0 16px 0 10px !important; }
  html body[data-page="chat"] .chat-coluna-conversa > div:first-child > div:first-child:not(#love-h-a):not(#love-h-b) { gap: 8px !important; }
  html body[data-page="chat"] .chat-voltar-celular:not(#love-h-a):not(#love-h-b) {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0;
    background: transparent; border: 0; border-radius: 8px; color: #18181B; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html body[data-page="chat"] .chat-voltar-celular svg:not(#love-h-a) { width: 20px; height: 20px; }
  html body[data-page="chat"] #chat-header-name:not(#love-h-a):not(#love-h-b) { font-family: Inter, sans-serif; font-size: 16px !important; font-weight: 600 !important; }
  html body[data-page="chat"] #chat-messages:not(#love-h-a):not(#love-h-b) { padding: 16px !important; }
  html body[data-page="chat"] .chat-coluna-conversa > div:last-child:not(#love-h-a):not(#love-h-b) { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
  html body[data-page="chat"] #chat-input:not(#love-h-a):not(#love-h-b) { font-size: 16px !important; height: 44px; border-radius: 8px !important; }

  body[data-theme="dark"][data-page="chat"] .chat-shell,
  body[data-theme="dark"] #conv-list .conv-item,
  body[data-theme="dark"][data-page="chat"].chat-conversa-aberta .chat-coluna-conversa { background: #1F1F1F !important; }
  body[data-theme="dark"][data-page="chat"] .chat-total-celular { color: #A1A1AA; }
  body[data-theme="dark"] #conv-list .conv-item h4 { color: #FFFFFF !important; }
  body[data-theme="dark"][data-page="chat"] .b2b-chat-contacts-header { border-bottom-color: #333333 !important; }
  body[data-theme="dark"][data-page="chat"] #chat-search-input { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
  body[data-theme="dark"][data-page="chat"] .chat-voltar-celular { color: #FFFFFF; }
}

/* ==========================================================================
   Celular do Hub: Adicionar/Editar em tela cheia (js/utils.js:
   prepararFichaDoCelular), como #drawer-add-gift / .ficha-convidado do
   anfitrião. Cabeçalho branco (seta de 20px num botão de 44px a 10px da
   borda, título 20/700, "Salvar" claro com texto na primária); corpo
   #F4F6F7 sem caixas brancas; campos brancos de 46px, 1px #E4E4E7, 8px,
   letra de 16px; 16px de margem lateral e 24px entre as seções.
   ========================================================================== */
.ficha-voltar-celular, .ficha-salvar-celular { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .form-drawer.ficha-celular:not(#love-h-a):not(#love-h-b) {
    top: 0; right: 0; bottom: 0; left: 0; width: 100%; max-width: none !important; height: 100dvh;
    border-radius: 0 !important; box-shadow: none !important; background: #F4F6F7 !important; z-index: 120;
  }
  html body .form-drawer.ficha-celular > .form-drawer-header:not(#love-h-a):not(#love-h-b) {
    display: flex; align-items: center; gap: 4px; min-height: 0; height: calc(60px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 16px 0 10px !important; background: #FFFFFF !important; border-bottom: 1px solid #E4E4E7 !important;
    position: relative; flex-shrink: 0;
  }
  html body .form-drawer.ficha-celular > .form-drawer-header > .form-drawer-close:not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .form-drawer.ficha-celular .form-drawer-header-main:not(#love-h-a):not(#love-h-b) {
    flex: 1 1 auto; min-width: 0; padding: 0 !important; background: transparent !important; border-radius: 0 !important; backdrop-filter: none;
  }
  html body .form-drawer.ficha-celular .form-drawer-header-main > :not(h1):not(h2):not(h3):not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .form-drawer.ficha-celular .form-drawer-header :is(h1, h2, h3):not(#love-h-a):not(#love-h-b) {
    margin: 0 !important; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 20px !important; font-weight: 700 !important; line-height: 26px !important;
    letter-spacing: -0.4px; color: #18181B !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html body .ficha-voltar-celular:not(#love-h-a):not(#love-h-b) {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0;
    background: transparent; border: 0; border-radius: 8px; color: #18181B; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html body .ficha-voltar-celular svg:not(#love-h-a) { width: 20px; height: 20px; }
  html body .ficha-salvar-celular:not([hidden]):not(#love-h-a):not(#love-h-b) {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 40px; padding: 0 16px; margin: 0 0 0 8px;
    background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 8px; box-shadow: none;
    font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; color: #183b54; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html body .ficha-salvar-celular:active:not(#love-h-a) { border-color: #181D24; }

  /* Corpo: cinza, sem caixas brancas, 16px de lado e 24px entre as seções. */
  html body .form-drawer.ficha-celular > .form-drawer-body:not(#love-h-a):not(#love-h-b) {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 24px 16px calc(32px + env(safe-area-inset-bottom, 0px)) !important; background: #F4F6F7 !important; border: 0 !important; border-radius: 0 !important;
  }
  html body .form-drawer.ficha-celular .form-drawer-body :is(form, .space-y-4, .space-y-5):not(#love-h-a) { display: flex; flex-direction: column; gap: 24px; }
  html body .form-drawer.ficha-celular .form-drawer-body :is(form, .space-y-4, .space-y-5) > *:not(#love-h-a) { margin-top: 0 !important; margin-bottom: 0 !important; }
  html body .form-drawer.ficha-celular .form-drawer-body :is(.dash-card, .task-drawer-comment-card, .form-field-card, .lead-origem):not(#love-h-a):not(#love-h-b) {
    background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  html body .form-drawer.ficha-celular .form-drawer-body .grid.grid-cols-2:not(#love-h-a):not(#love-h-b) { grid-template-columns: 1fr !important; gap: 24px !important; }
  html body .form-drawer.ficha-celular .field-label:not(#love-h-a):not(#love-h-b) { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: #71717A; margin-bottom: 6px; }
  html body .form-drawer.ficha-celular :is(.field-input, .field-select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input[type="search"], select):not(.ficha-salvar-celular):not(#love-h-a):not(#love-h-b) {
    height: 46px !important; min-height: 46px; padding-left: 12px; padding-right: 12px; font-size: 16px !important;
    background-color: #FFFFFF !important; border: 1px solid #E4E4E7 !important; border-radius: 8px !important; box-shadow: none !important;
  }
  html body .form-drawer.ficha-celular :is(textarea, .field-textarea):not(#love-h-a):not(#love-h-b) {
    font-size: 16px !important; background-color: #FFFFFF !important; border: 1px solid #E4E4E7 !important; border-radius: 8px !important; box-shadow: none !important;
  }
  html body .form-drawer.ficha-celular :is(input, select, textarea):focus:not(#love-h-a):not(#love-h-b) { border-color: #181D24 !important; outline: none !important; box-shadow: none !important; }

  /* O Salvar/Cancelar de baixo foi para o cabeçalho (a seta faz o Cancelar). */
  html body .form-drawer.ficha-celular :is(.ficha-salvar-alvo, [id$="-cancel"]):not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .form-drawer.ficha-celular > .form-drawer-footer:not(:has(button:not(.ficha-salvar-alvo):not([id$="-cancel"]):not([hidden]))):not(#love-h-a):not(#love-h-b) { display: none !important; }

  body[data-theme="dark"] .form-drawer.ficha-celular,
  body[data-theme="dark"] .form-drawer.ficha-celular > .form-drawer-body { background: #1A1A1A !important; }
  body[data-theme="dark"] .form-drawer.ficha-celular > .form-drawer-header { background: #1F1F1F !important; border-bottom-color: #333333 !important; }
  body[data-theme="dark"] .form-drawer.ficha-celular .form-drawer-header :is(h1, h2, h3),
  body[data-theme="dark"] .ficha-voltar-celular { color: #FFFFFF !important; }
  body[data-theme="dark"] .ficha-salvar-celular { background: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
  body[data-theme="dark"] .form-drawer.ficha-celular :is(.field-input, .field-select, input, select, textarea) { background-color: #252525 !important; border-color: #404040 !important; color: #FFFFFF !important; }
  body[data-theme="dark"] .form-drawer.ficha-celular .field-label { color: #A1A1AA; }
}

/* Celular do Hub: sem pop-ups. As janelas (.modal-card) viram tela cheia no
   fundo cinza, com os campos no padrão das fichas; só as confirmações
   ("Remover...?", "Alterações não salvas") continuam pequenas. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .modal-backdrop:not(.hub-confirmar):not(#unsaved-changes-modal):not(.op-foto-modal) > .modal-card:not(#love-h-a):not(#love-h-b) {
    position: fixed; inset: 0; width: 100% !important; max-width: none !important; height: 100dvh; max-height: none !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    background: #F4F6F7 !important; transform: none !important; z-index: 120;
  }
  html body .modal-backdrop:not(.hub-confirmar):not(#unsaved-changes-modal):not(.op-foto-modal) > .modal-card :is(.field-input, .field-select):not(#love-h-a):not(#love-h-b) {
    height: 46px !important; font-size: 16px !important; background-color: #FFFFFF !important; border: 1px solid #E4E4E7 !important; border-radius: 8px !important; box-shadow: none !important;
  }
  html body .modal-backdrop:not(.hub-confirmar):not(#unsaved-changes-modal):not(.op-foto-modal) > .modal-card :is(textarea, .field-textarea):not(#love-h-a):not(#love-h-b) { font-size: 16px !important; }
  body[data-theme="dark"] .modal-backdrop:not(.hub-confirmar):not(#unsaved-changes-modal):not(.op-foto-modal) > .modal-card { background: #1A1A1A !important; }
}

/* ==========================================================================
   Celular do Hub: lista vazia (js/utils.js: desenharVazioNoCelular), como
   Meus convidados vazio do anfitrião — caixa branca de no mínimo 420px,
   cantos 10px, borda preta a 6%, tudo no centro; animação de 140px; título
   clicável na primária; texto 13px #71717A.
   ========================================================================== */
.vazio-celular { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .dash-card.lista-celular.tem-vazio-celular > :is(.overflow-x-auto, .leads-table-wrap):not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .dash-card.lista-celular > .vazio-celular:not([hidden]):not(#love-h-a):not(#love-h-b),
  html body #conv-list > .vazio-celular:not(#love-h-a):not(#love-h-b) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center;
    min-height: 420px; margin: 16px; padding: 24px 20px; box-sizing: border-box;
    background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
    font-family: Inter, sans-serif;
  }
  html body .vazio-celular .vazio-celular-lottie:not(#love-h-a) { display: block; width: 140px; height: 140px; margin: 0 0 12px; }
  html body .vazio-celular .vazio-celular-icone:not(#love-h-a) { display: block; width: 72px; height: 72px; margin: 0 0 16px; }
  html body .vazio-celular .vazio-celular-titulo:not(#love-h-a):not(#love-h-b) {
    margin: 0; padding: 0; background: none; border: 0; font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: #18181B;
  }
  html body .vazio-celular button.vazio-celular-titulo:not(#love-h-a):not(#love-h-b) { color: #183b54; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html body .vazio-celular .vazio-celular-texto:not(#love-h-a) { max-width: 280px; margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #71717A; }
  html body .vazio-celular .vazio-celular-nenhum:not(#love-h-a) { margin: 0; font-size: 14px; color: #71717A; }
  body[data-theme="dark"] .vazio-celular { background: #252525 !important; border-color: #404040 !important; }
  body[data-theme="dark"] .vazio-celular .vazio-celular-titulo { color: #FFFFFF !important; }
}

/* ==========================================================================
   Celular do Hub: gaveta de opções que sobe de baixo (js/utils.js:
   abrirGavetaDeOpcoes). Cantos de 10px em cima, alça cinza, itens de 48px,
   sombra só na gaveta. E o "+" de Clientes, que abre essa gaveta.
   ========================================================================== */
.so-celular-clientes { display: none; }
.gaveta-opcoes { position: fixed; inset: 0; z-index: 140; font-family: Inter, sans-serif; }
.gaveta-opcoes-fundo { position: absolute; inset: 0; background: rgba(24, 29, 36, 0.32); opacity: 0; transition: opacity .2s ease; }
.gaveta-opcoes-folha {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto;
  padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
  background: #FFFFFF; border-radius: 10px 10px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.gaveta-opcoes.is-aberta .gaveta-opcoes-fundo { opacity: 1; }
.gaveta-opcoes.is-aberta .gaveta-opcoes-folha { transform: translateY(0); }
.gaveta-opcoes-alca { display: block; width: 36px; height: 4px; margin: 2px auto 10px; border-radius: 2px; background: #D4D4D8; }
.gaveta-opcoes-titulo { margin: 0; padding: 4px 12px 8px; font-size: 13px; font-weight: 500; color: #71717A; }
.gaveta-opcoes-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 12px; margin: 0;
  background: transparent; border: 0; border-radius: 8px; font-family: inherit; font-size: 16px; font-weight: 500; color: #18181B;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.gaveta-opcoes-item:active { background: #F4F6F7; }
.gaveta-opcoes-item svg { width: 22px; height: 22px; flex-shrink: 0; color: #3F3F46; }
body[data-theme="dark"] .gaveta-opcoes-folha { background: #252525; }
body[data-theme="dark"] .gaveta-opcoes-item { color: #FFFFFF; }
body[data-theme="dark"] .gaveta-opcoes-item svg { color: #D4D4D8; }
body[data-theme="dark"] .gaveta-opcoes-item:active { background: #333333; }
body[data-theme="dark"] .gaveta-opcoes-alca { background: #52525B; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .b2b-content:has([data-leads-painel="leads"]:not([hidden])) > .b2b-header-bar > #lead-add-celular:not(#love-h-a):not(#love-h-b) {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0;
    background: transparent; border: 0; border-radius: 8px; color: #18181B; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html body #lead-add-celular svg:not(#love-h-a) { width: 24px; height: 24px; }
  body[data-theme="dark"] #lead-add-celular { color: #FFFFFF !important; }
}

/* ==========================================================================
   Construtor no celular — prévia em tela cheia + gaveta do elemento tocado
   ========================================================================== */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body.construtor-celular .builder-narrow-notice:not(#love-h-a):not(#love-h-b) {
    display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px;
    font-size: 13px; line-height: 1.4; font-weight: 500; border-radius: 8px; flex-shrink: 0;
  }
  html body.construtor-celular .builder-narrow-notice svg:not(#love-h-a) { width: 16px; height: 16px; margin-top: 1px; }
  html body.construtor-celular .builder-wrap:not(#love-h-a):not(#love-h-b) {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    margin: 0 -16px; border: none; border-radius: 0; box-shadow: none; background: #FFFFFF;
  }
  html body.construtor-celular .builder-body:not(#love-h-a) { flex: 1 1 auto; min-height: 0; display: block; position: relative; }
  html body.construtor-celular .builder-canvas-viewport:not(#love-h-a):not(#love-h-b) {
    padding: 0; background: #FFFFFF; height: 100%; width: 100%; display: block; overflow: hidden;
  }
  html body.construtor-celular .builder-canvas-frame:not(#love-h-a):not(#love-h-b) {
    max-width: none; width: 100%; height: 100%; border: none; border-radius: 0; box-shadow: none; margin: 0;
  }
  html body.construtor-celular .builder-canvas-scroll:not(#love-h-a) { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* Sem mover, duplicar, apagar nem redimensionar. */
  html body.construtor-celular .builder-block-toolbar:not(#love-h-a),
  html body.construtor-celular .builder-column-resizer:not(#love-h-a) { display: none !important; }

  /* Seletor de página: 20px na cor primária, com a seta. */
  html body.construtor-celular #site-titulo-pagina:not(#love-h-a) { display: none !important; }
  html body.construtor-celular #builder-page-select-btn:not(#love-h-a):not(#love-h-b) {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; border: none;
  }
  html body.construtor-celular #builder-page-select-label:not(#love-h-a):not(#love-h-b) {
    display: inline !important; line-height: 1.2 !important; height: auto !important; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: #183b54;
  }
  html body.construtor-celular #builder-page-select-btn .site-seletor-seta:not(#love-h-a) {
    display: block; width: 20px; height: 20px; color: #183b54; flex-shrink: 0;
  }
  /* Ações do cabeçalho: só "Publicar" enquanto o site não está no ar. */
  html body.construtor-celular .site-cabecalho-acoes:not(#love-h-a):not(#love-h-b) { display: flex; margin-left: auto; align-items: center; }
  html body.construtor-celular .site-cabecalho-acoes > :not(.builder-toolbar-right):not(#love-h-a),
  html body.construtor-celular .builder-toolbar-right > :not(#builder-publish):not(#love-h-a) { display: none !important; }
  html body.construtor-celular .builder-toolbar-right:not(#love-h-a) { display: flex; gap: 0; }
  html body.construtor-celular #builder-publish:not(#love-h-a):not(#love-h-b) {
    height: 36px !important; min-height: 36px !important; padding: 0 14px; border-radius: 8px; background: #FFFFFF; color: #183b54;
    border: 1px solid #E4E4E7; font-size: 14px; font-weight: 600; box-shadow: none;
  }
  html body.construtor-celular.construtor-publicado #builder-publish:not(#love-h-a) { display: none !important; }

  /* Gaveta do elemento tocado. */
  html body.construtor-celular #builder-elements-panel:not(#love-h-a):not(#love-h-b) {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 130; width: auto;
    max-height: 60dvh; border: none; border-radius: 10px 10px 0 0; background: #FFFFFF;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08); padding-top: 16px; padding-bottom: env(safe-area-inset-bottom, 0px);
    flex-direction: column; overflow: hidden;
  }
  html body.construtor-celular.construtor-com-selecao #builder-elements-panel:not(#love-h-a):not(#love-h-b) { display: flex; }
  html body.construtor-celular #builder-elements-panel:not(#love-h-a)::before {
    content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #D4D4D8;
  }
  html body.construtor-celular #builder-elements-panel .inspector-tabs:not(#love-h-a),
  html body.construtor-celular #builder-elements-panel .builder-panel-tabs:not(#love-h-a) { display: none; }
  html body.construtor-celular #builder-elements-panel .inspector-body:not(#love-h-a) { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  html body.construtor-celular #builder-elements-panel :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(#love-h-a) { font-size: 16px; }
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-theme="dark"].construtor-celular .builder-wrap:not(#love-h-a):not(#love-h-b),
  html body[data-theme="dark"].construtor-celular .builder-canvas-viewport:not(#love-h-a):not(#love-h-b) { background: #1E1E1E; }
  html body[data-theme="dark"].construtor-celular #builder-elements-panel:not(#love-h-a):not(#love-h-b) { background: #252525; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); }
  html body[data-theme="dark"].construtor-celular #builder-elements-panel:not(#love-h-a)::before { background: #52525B; }
  html body[data-theme="dark"].construtor-celular #builder-page-select-label:not(#love-h-a):not(#love-h-b),
  html body[data-theme="dark"].construtor-celular #builder-page-select-btn .site-seletor-seta:not(#love-h-a) { color: #E4E4E7; }
  html body[data-theme="dark"].construtor-celular #builder-publish:not(#love-h-a):not(#love-h-b) { background: #252525; color: #E4E4E7; border-color: #404040; }
}

/* Desktop: ficha dentro da página, sem pop-up (fichaNaPaginaNoDesktop em utils.js).
   Ocupa a largura toda no lugar da lista; borda fina, raio 10, sem sombra e sem fundo escuro. */
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body .com-ficha-na-pagina > :not(.na-pagina):not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: none !important; }
  html body.ficha-na-pagina-aberta .drawer-backdrop:not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body :is(.form-drawer, .agenda-evento-popup, .modal-card).na-pagina:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    position: static !important; inset: auto !important; transform: none !important; translate: none !important; z-index: auto !important;
    width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03) !important; border-radius: 10px !important;
    overflow: visible !important; background: #FFFFFF !important; transition: none !important;
  }
  html body .form-drawer.na-pagina > *:not(#love-h-a):not(#love-h-b) { max-height: none !important; overflow: visible !important; }
  html body .modal-backdrop.ficha-movida:not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .escondido-pela-ficha:not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: none !important; }
  html body .agenda-evento-popup.na-pagina .agenda-evento-alca:not(#love-h-a) { visibility: hidden; }
  html body .agenda-evento-popup.na-pagina:not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: block !important; padding: 0.5rem 1.5rem 1.5rem !important; }
  html body .modal-card.na-pagina:not(#love-h-a):not(#love-h-b):not(#love-h-c) { padding: 1.5rem !important; margin: 0 !important; }
  /* Cancelar é só texto. */
  html body .form-drawer.na-pagina [id$="-cancel"]:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important; padding-left: 8px !important; padding-right: 8px !important;
  }
  body[data-theme="dark"] :is(.form-drawer, .agenda-evento-popup, .modal-card).na-pagina { background: #252525 !important; border-color: #404040 !important; }
}

/* Dashboard no celular, ordem aprovada: Saldo, Ações rápidas, Sua agenda,
   Analytics, Notícias e eventos e, por último, Precisa de ajuda?
   As duas pilhas viram uma só (display: contents) para poder reordenar. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="dashboard"] .grid > .dashboard-side-stack:not(#love-h-a) { display: contents; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > :not(#love-h-a) { order: 10; min-width: 0; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dash-saldo-total:not(#love-h-a) { order: 1; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dashboard-quick-actions:not(#love-h-a) { order: 2; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dashboard-panel-section:has(#agenda-list):not(#love-h-a) { order: 3; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dashboard-panel-section:has(.dash-analytics-card):not(#love-h-a) { order: 4; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dashboard-panel-section:has(.dash-news-card):not(#love-h-a) { order: 5; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dashboard-help-section:not(#love-h-a) { order: 6; margin-top: 0; }
}

/* ==========================================================================
   Dashboard no celular, como a Home do anfitrião:
   - caixa do "Olá, empresa!" (Inter 22/600) com os atalhos redondos dentro
     (Cobrar, Orçamento, Construtor: bola 56px #EAF0F5, ícone 26px #183b54,
     nome 13/500 #3F3F46);
   - caixa do saldo como a de Presentes (valor 28/700 #183b54 em cima, nome
     13/500 embaixo e botão primário de 44px);
   - carrossel antes de Sua agenda;
   - cabeçalho rola junto (js: cabecalhoRolaNoCelular).
   Desktop não muda.
   ========================================================================== */
.dash-saldo-celular { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="dashboard"] .b2b-content > #shell-topbar.topo-rola-junto:not(#love-h-a) { flex-shrink: 0; margin: 0 calc(-1 * var(--b2b-content-pad-x, 16px)); }

  /* Caixa do Olá + atalhos (as duas partes formam uma caixa só) */
  html body[data-page="dashboard"] .dashboard-greeting:not(#love-h-a):not(#love-h-b) {
    display: block; margin: 0; padding: 20px 12px 20px; text-align: center;
    background: #FFFFFF; border: 1px solid #E4E4E7; border-bottom: 0; border-radius: 10px 10px 0 0;
  }
  html body[data-page="dashboard"] .dashboard-greeting > :not(.dashboard-greeting-text):not(#love-h-a) { display: none !important; }
  html body[data-page="dashboard"] #greeting-title:not(#love-h-a):not(#love-h-b) {
    margin: 0; font-family: Inter, sans-serif !important; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; line-height: 1.25; color: #18181B;
    white-space: normal; text-align: center;
  }
  html body[data-page="dashboard"] #greeting-date:not(#love-h-a):not(#love-h-b) {
    display: block; margin: 6px 0 0; font-family: Inter, sans-serif; font-size: 15px; font-weight: 400; color: #52525B; text-align: center;
  }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dashboard-quick-actions:not(#love-h-a):not(#love-h-b) {
    order: 1; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px;
    padding: 20px 12px 18px; background: #FFFFFF; border: 1px solid #E4E4E7; border-top: 0; border-radius: 0 0 10px 10px;
  }
  html body[data-page="dashboard"] .dashboard-quick-actions:not(#love-h-a)::before {
    content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: rgba(0, 0, 0, 0.06);
  }
  html body[data-page="dashboard"] .dashboard-quick-actions > .dashboard-quick-action-btn:not(.dashboard-quick-action-mobile-hide):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
    min-height: 44px; height: auto; width: auto; padding: 0; margin: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; color: #3F3F46; text-align: center;
  }
  html body[data-page="dashboard"] .dashboard-quick-actions > .dashboard-quick-action-btn svg:not(#love-h-a):not(#love-h-b) {
    box-sizing: border-box; width: 56px; height: 56px; padding: 15px; border-radius: 50%;
    background: #EAF0F5; color: #183b54; flex-shrink: 0; box-shadow: none; transition: background-color .15s ease;
  }
  html body[data-page="dashboard"] .dashboard-quick-actions > .dashboard-quick-action-btn:not(#love-h-a):active svg { background: #E1E9F0; box-shadow: none; }

  /* Caixa do saldo */
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dash-saldo-total:not(#love-h-a):not(#love-h-b) {
    order: 2; padding: 0; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 10px; box-shadow: none; overflow: hidden;
  }
  html body[data-page="dashboard"] .dash-saldo-total > :not(.dash-saldo-celular):not(#love-h-a) { display: none !important; }
  html body[data-page="dashboard"] .dash-saldo-celular:not(#love-h-a) { display: block; }
  html body[data-page="dashboard"] .dash-saldo-celular-colunas:not(#love-h-a) { display: grid; grid-template-columns: 1fr 1fr; padding: 24px 0 20px; }
  html body[data-page="dashboard"] .dash-saldo-celular-colunas > div:not(#love-h-a) { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; text-align: center; min-width: 0; }
  html body[data-page="dashboard"] .dash-saldo-celular-colunas > div + div:not(#love-h-a) { border-left: 1px solid #F4F4F5; }
  html body[data-page="dashboard"] .dash-saldo-celular-valor:not(#love-h-a) {
    font-family: Inter, sans-serif; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: #183b54;
    font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  html body[data-page="dashboard"] .dash-saldo-celular-nome:not(#love-h-a) { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: #52525B; }
  html body[data-page="dashboard"] .dash-saldo-celular-botao:not(#love-h-a):not(#love-h-b) {
    display: flex; align-items: center; justify-content: center; height: 44px; margin: 0 16px 16px; padding: 0 16px;
    background: #183b54; border: 0; border-radius: 8px; color: #FFFFFF; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; text-decoration: none;
  }
  html body[data-page="dashboard"] .dash-saldo-celular-botao:not(#love-h-a):active { background: #122c3f; }

  /* Carrossel antes de Sua agenda */
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dash-ads-card:not(#love-h-a):not(#love-h-b) { display: block; order: 3; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dashboard-panel-section:has(#agenda-list):not(#love-h-a):not(#love-h-b) { order: 4; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dashboard-panel-section:has(.dash-analytics-card):not(#love-h-a):not(#love-h-b) { order: 5; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dashboard-panel-section:has(.dash-news-card):not(#love-h-a):not(#love-h-b) { order: 6; }
  html body[data-page="dashboard"] .grid > .dashboard-side-stack > .dashboard-help-section:not(#love-h-a):not(#love-h-b) { order: 7; }

  body[data-theme="dark"][data-page="dashboard"] :is(.dashboard-greeting, .dashboard-quick-actions, .dash-saldo-total) { background: #1F1F1F !important; border-color: #404040 !important; }
  body[data-theme="dark"][data-page="dashboard"] #greeting-title { color: #FFFFFF !important; }
  body[data-theme="dark"][data-page="dashboard"] :is(#greeting-date, .dash-saldo-celular-nome, .dashboard-quick-action-btn) { color: #D4D4D8 !important; }
  body[data-theme="dark"][data-page="dashboard"] .dashboard-quick-action-btn svg { background: #252525 !important; color: #EBF4FF !important; }
  body[data-theme="dark"][data-page="dashboard"] .dashboard-quick-actions::before { background: #333333 !important; }
  body[data-theme="dark"][data-page="dashboard"] .dash-saldo-celular-valor { color: #EBF4FF !important; }
  body[data-theme="dark"][data-page="dashboard"] .dash-saldo-celular-colunas > div + div { border-left-color: #333333 !important; }
}

/* Dashboard no celular: faixa azul no topo (o azul do sidebar em degradê,
   igual à faixa do Admin) atrás do cabeçalho e da caixa do Olá, como a foto
   na Home do anfitrião; logo e ícones brancos por cima. Atalhos sem caixa. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="dashboard"] .b2b-content:not(#love-h-a):not(#love-h-b) {
    --faixa-h: 160px;
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(42, 120, 214, .55) 0%, rgba(42, 120, 214, 0) 55%) top / 100% var(--faixa-h) no-repeat local,
      linear-gradient(180deg, #183b54 0%, #1d4664 100%) top / 100% var(--faixa-h) no-repeat local,
      #F4F6F7;
  }
  html body[data-page="dashboard"] #shell-topbar.topo-rola-junto .b2b-topbar:not(#love-h-a):not(#love-h-b) { background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; }
  html body[data-page="dashboard"] #shell-topbar.topo-rola-junto .logo-claro:not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body[data-page="dashboard"] #shell-topbar.topo-rola-junto .logo-escuro:not(#love-h-a):not(#love-h-b) { display: block !important; }
  html body[data-page="dashboard"] #shell-topbar.topo-rola-junto :is(#notif-trigger, #btn-menu-celular):not(#love-h-a):not(#love-h-b) { color: #FFFFFF !important; background: transparent !important; }
  html body[data-page="dashboard"] #shell-topbar.topo-rola-junto :is(#notif-trigger, #btn-menu-celular) svg *:not(#love-h-a) { stroke: #FFFFFF !important; }
  html body[data-page="dashboard"] .dashboard-greeting:not(#love-h-a):not(#love-h-b):not(#love-h-c) { margin-top: 16px; }
  html body[data-page="dashboard"] .dashboard-quick-actions > .dashboard-quick-action-btn:not(#love-h-a):not(#love-h-b):not(#love-h-c) { box-shadow: none !important; outline: none !important; border: 0 !important; background: transparent !important; }
  body[data-theme="dark"][data-page="dashboard"] .b2b-content {
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(42, 120, 214, .35) 0%, rgba(42, 120, 214, 0) 55%) top / 100% 160px no-repeat local,
      linear-gradient(180deg, #183b54 0%, #1d4664 100%) top / 100% 160px no-repeat local,
      #1C2125 !important;
  }
}

/* ==========================================================================
   Desktop, Dashboard como a Home do anfitrião (js: homeDoDesktop):
   faixa azul de 260px (azul do sidebar em degradê, como no Admin) no lugar
   da foto; caixa por cima (-80px, 32px das bordas) com "Olá, empresa!"
   26/600 + data à esquerda e os atalhos redondos à direita; saldo na caixa
   no formato de Presentes. Para voltar ao desktop antigo, apagar este bloco
   e a função homeDoDesktop em js/dashboard.js.
   ========================================================================== */
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body[data-page="dashboard"] .dashboard-greeting.home-desktop:not(#love-h-a):not(#love-h-b) {
    display: block; position: relative; margin: 0 0 28px; padding: 180px 32px 0;
  }
  html body[data-page="dashboard"] .dashboard-greeting.home-desktop > :not(.dash-home-faixa):not(.dash-home-caixa):not(#love-h-a) { display: none !important; }
  html body[data-page="dashboard"] .dash-home-faixa:not(#love-h-a) {
    position: absolute; top: 0; left: 0; right: 0; height: 260px; border-radius: 10px;
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(42, 120, 214, .55) 0%, rgba(42, 120, 214, 0) 55%),
      linear-gradient(180deg, #183b54 0%, #1d4664 100%);
  }
  html body[data-page="dashboard"] .dash-home-caixa:not(#love-h-a) {
    position: relative; padding: 24px 28px;
    display: grid; grid-template-columns: minmax(150px, 1fr) minmax(248px, 505px); align-items: center; gap: 12px 32px;
    background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 10px; text-align: left;
  }
  html body[data-page="dashboard"] .dash-home-caixa > .dashboard-greeting-text:not(#love-h-a) { display: contents; }
  html body[data-page="dashboard"] .dash-home-caixa #greeting-title:not(#love-h-a):not(#love-h-b) {
    grid-column: 1; align-self: end; margin: 0; font-family: Inter, sans-serif !important; font-size: 26px !important; font-weight: 600 !important;
    letter-spacing: -0.025em !important; line-height: 1.2; color: #18181B; white-space: normal;
  }
  html body[data-page="dashboard"] .dash-home-caixa #greeting-date:not(#love-h-a):not(#love-h-b) {
    display: block !important; grid-column: 1; align-self: start; margin: -6px 0 0; font-family: Inter, sans-serif; font-size: 15px; font-weight: 400; color: #52525B;
  }
  html body[data-page="dashboard"] .dash-home-caixa > .dashboard-quick-actions:not(#love-h-a):not(#love-h-b) {
    grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(4, minmax(56px, 112px)); justify-content: end; gap: 8px;
    margin: 0; padding: 0 0 0 32px; background: transparent; border: 0; border-left: 1px solid rgba(0, 0, 0, 0.06); border-radius: 0;
  }
  html body[data-page="dashboard"] .dash-home-caixa .dashboard-quick-action-btn:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
    width: auto; height: auto; min-height: 0; padding: 0; margin: 0; cursor: pointer;
    background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; outline: none;
    font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.3; color: #3F3F46; text-align: center; transition: color .15s ease;
  }
  html body[data-page="dashboard"] .dash-home-caixa .dashboard-quick-action-btn svg:not(#love-h-a):not(#love-h-b) {
    box-sizing: border-box; width: 56px; height: 56px; padding: 16px; border-radius: 50%; flex-shrink: 0;
    background: #EAF0F5; color: #183b54; box-shadow: none; transition: background-color .15s ease;
  }
  html body[data-page="dashboard"] .dash-home-caixa .dashboard-quick-action-btn:not(#love-h-a):hover { color: #181D24; }
  html body[data-page="dashboard"] .dash-home-caixa .dashboard-quick-action-btn:not(#love-h-a):hover svg { background: #E1E9F0; box-shadow: none; }

  /* Saldo: caixa como a de Presentes */
  html body[data-page="dashboard"] .dashboard-side-stack > .dash-saldo-total:not(#love-h-a):not(#love-h-b) {
    padding: 0; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 10px; box-shadow: none; overflow: hidden;
  }
  html body[data-page="dashboard"] .dash-saldo-total > :not(.dash-saldo-celular):not(#love-h-a) { display: none !important; }
  html body[data-page="dashboard"] .dash-saldo-celular:not(#love-h-a) { display: block; }
  html body[data-page="dashboard"] .dash-saldo-celular-colunas:not(#love-h-a) { display: grid; grid-template-columns: 1fr 1fr; padding: 24px 0 20px; }
  html body[data-page="dashboard"] .dash-saldo-celular-colunas > div:not(#love-h-a) { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; text-align: center; min-width: 0; }
  html body[data-page="dashboard"] .dash-saldo-celular-colunas > div + div:not(#love-h-a) { border-left: 1px solid #F4F4F5; }
  html body[data-page="dashboard"] .dash-saldo-celular-valor:not(#love-h-a) {
    font-family: Inter, sans-serif; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: #183b54;
    font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  html body[data-page="dashboard"] .dash-saldo-celular-nome:not(#love-h-a) { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; color: #52525B; }
  html body[data-page="dashboard"] .dash-saldo-celular-botao:not(#love-h-a):not(#love-h-b) {
    display: flex; align-items: center; justify-content: center; height: 42px; margin: 0 20px 20px; padding: 0 16px;
    background: #183b54; border: 0; border-radius: 8px; color: #FFFFFF; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s ease;
  }
  html body[data-page="dashboard"] .dash-saldo-celular-botao:not(#love-h-a):hover { background: #122c3f; }

  body[data-theme="dark"][data-page="dashboard"] .dash-home-caixa,
  body[data-theme="dark"][data-page="dashboard"] .dashboard-side-stack > .dash-saldo-total { background: #1F1F1F !important; border-color: #404040 !important; }
  body[data-theme="dark"][data-page="dashboard"] .dash-home-caixa #greeting-title { color: #FFFFFF !important; }
  body[data-theme="dark"][data-page="dashboard"] :is(.dash-home-caixa #greeting-date, .dash-home-caixa .dashboard-quick-action-btn, .dash-saldo-celular-nome) { color: #D4D4D8 !important; }
  body[data-theme="dark"][data-page="dashboard"] .dash-home-caixa .dashboard-quick-actions { border-left-color: #333333 !important; }
  body[data-theme="dark"][data-page="dashboard"] .dash-home-caixa .dashboard-quick-action-btn svg { background: #252525 !important; color: #EBF4FF !important; }
  body[data-theme="dark"][data-page="dashboard"] .dash-saldo-celular-valor { color: #EBF4FF !important; }
  body[data-theme="dark"][data-page="dashboard"] .dash-saldo-celular-colunas > div + div { border-left-color: #333333 !important; }
}

/* Meus produtos: 3 por linha no desktop (mesmo com a tela menor), 2 no celular. */
html body[data-page="produtos"] #products-grid:not(#love-h-a) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="produtos"] #products-grid:not(#love-h-a):not(#love-h-b) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* Sem as abas, a caixa da busca fica a 24px do título (padrão de respiro). */
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body[data-page="produtos"] .b2b-header-bar + #produtos-barra-caixa:not(#love-h-a):not(#love-h-b) { margin-top: 4px; }
}

/* Dashboard: o topo da Home usa a imagem de capa da empresa (Configurações ›
   Imagem de capa), como a foto do convite na Home do anfitrião. Sem capa,
   fica o azul do sidebar em degradê. No celular a faixa é um elemento no
   topo da área que rola (js: homeDoDesktop), atrás do cabeçalho e do Olá. */
html body[data-page="dashboard"].tem-capa-empresa .dash-home-faixa:not(#love-h-a):not(#love-h-b) {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 50%),
    var(--capa-empresa) center / cover no-repeat,
    #E8EEF4;
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="dashboard"] .b2b-content:not(#love-h-a):not(#love-h-b) { position: relative; background: #F4F6F7; }
  body[data-theme="dark"][data-page="dashboard"] .b2b-content { background: #1C2125 !important; }
  html body[data-page="dashboard"] .b2b-content > .dash-home-faixa:not(#love-h-a) {
    position: absolute; top: 0; left: 0; right: 0; height: 160px; border-radius: 0; pointer-events: none;
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(42, 120, 214, .55) 0%, rgba(42, 120, 214, 0) 55%),
      linear-gradient(180deg, #183b54 0%, #1d4664 100%);
  }
  html body[data-page="dashboard"].tem-capa-empresa .b2b-content > .dash-home-faixa:not(#love-h-a):not(#love-h-b) {
    height: 200px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 120px),
      var(--capa-empresa) center / cover no-repeat,
      #E8EEF4;
  }
  html body[data-page="dashboard"] .b2b-content > #shell-topbar.topo-rola-junto:not(#love-h-a):not(#love-h-b),
  html body[data-page="dashboard"] .b2b-content > .dashboard-greeting:not(#love-h-a):not(#love-h-b) { position: relative; }
}

/* ==========================================================================
   Desktop: espaço como no anfitrião (index). Margem de 32px entre o sidebar
   e o conteúdo em todas as telas (o Dashboard tinha 88px) e, em tela
   grande, só o conteúdo numa faixa centralizada de até 1280px
   (--love-conteudo-max); o cabeçalho continua de ponta a ponta. Ficam de
   fora o Construtor do site e Mensagens (usam a tela toda).
   ========================================================================== */
:root { --love-conteudo-max: 1280px; }
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body[data-page="dashboard"]:not(#love-h-a) {
    --b2b-dashboard-pad-x: var(--b2b-content-pad-x);
    --b2b-dashboard-pad-y: var(--b2b-content-pad-y);
  }
  /* Faixa central: o que passa de 1280px vira margem dos dois lados do
     conteúdo; cabeçalho, descrição e rodapé voltam até a borda (32px). */
  html body:not([data-page="paginas-site"]):not([data-page="chat"]) .b2b-content:not(#love-h-a) {
    --faixa-extra: max(0px, (var(--largura-conteudo, 0px) - 2 * var(--b2b-content-pad-x) - var(--love-conteudo-max)) / 2);
  }
  html body:not([data-page="paginas-site"]):not([data-page="chat"]) .b2b-content:not(#love-h-a):not(#love-h-b) {
    padding-left: calc(var(--b2b-content-pad-x) + var(--faixa-extra)); padding-right: calc(var(--b2b-content-pad-x) + var(--faixa-extra));
  }
  html body:not([data-page="paginas-site"]):not([data-page="chat"]) .b2b-content > :is(.b2b-header-bar, .b2b-header-bar + p, .b2b-footer):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    margin-left: calc(-1 * (var(--b2b-content-pad-x) + var(--faixa-extra))); margin-right: calc(-1 * (var(--b2b-content-pad-x) + var(--faixa-extra)));
  }
}

/* Privacidade e Termos (logado), como no anfitrião (#tab-legal-doc): tela
   toda branca (cabeçalho também), texto começando à esquerda, alinhado com
   o título, numa coluna de 60% da largura, 24px abaixo do cabeçalho; data
   em cinza #A1A1AA. No celular a coluna ocupa a largura toda. */
html body[data-legal-slug]:not([data-theme="dark"]) :is(.b2b-content, .b2b-content > .b2b-header-bar):not(#love-h-a):not(#love-h-b) { background-color: #FFFFFF !important; }
html body[data-legal-slug] .legal-doc-coluna:not(#love-h-a):not(#love-h-b) { max-width: 60%; width: auto; margin: 0; padding-top: 24px; }
html body[data-legal-slug] #legal-doc-date-dash:not(#love-h-a) { color: #A1A1AA; font-size: 14px; margin: 0 0 20px; }
html body[data-legal-slug] .b2b-content > .b2b-header-bar:not(#love-h-a):not(#love-h-b) { margin-bottom: 0; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-legal-slug] .legal-doc-coluna:not(#love-h-a):not(#love-h-b) { max-width: none; }
}

/* Meus produtos vazio, como Meus presentes vazio no anfitrião: caixa branca
   cheia (420px, borda fina, raio 10) com a frase e o cartão pontilhado
   "Cadastrar novo produto" (260 × 240px). Busca sem resultado: só o aviso. */
html body .produtos-vazio:not(#love-h-a) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px;
  padding: 40px 24px; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 10px; box-shadow: none;
}
html body .produtos-vazio.produtos-vazio-busca:not(#love-h-a) { min-height: 0; padding: 64px 24px; }
html body .produtos-vazio-busca .produtos-vazio-texto:not(#love-h-a) { margin: 0; }
html body .produtos-vazio-texto:not(#love-h-a) { margin: 0 0 20px; font-size: 14px; font-weight: 500; color: #71717A; text-align: center; }
html body .produtos-vazio-texto b:not(#love-h-a) { font-weight: 700; color: #18181B; }
html body .produtos-vazio-cards:not(#love-h-a) { display: grid; grid-template-columns: minmax(0, 260px); width: 100%; justify-content: center; }
html body .produtos-vazio-criar:not(#love-h-a) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 240px; padding: 24px;
  background: #FFFFFF; border: 1px dashed #E4E4E7; border-radius: 10px; text-align: center; cursor: pointer; font-family: Inter, sans-serif; transition: border-color .15s;
}
html body .produtos-vazio-criar:not(#love-h-a):hover { border-color: #A1A1AA; }
html body .produtos-vazio-criar-icone:not(#love-h-a) { width: 48px; height: 48px; border-radius: 999px; background: #F4F6F7; display: inline-flex; align-items: center; justify-content: center; color: #18181B; margin-bottom: 6px; }
html body .produtos-vazio-criar-icone svg:not(#love-h-a) { width: 22px; height: 22px; }
html body .produtos-vazio-criar strong:not(#love-h-a) { font-size: 16px; font-weight: 600; color: #18181B; }
html body .produtos-vazio-criar-sub:not(#love-h-a) { margin-top: 2px; font-size: 13px; color: #71717A; }
body[data-theme="dark"] .produtos-vazio, body[data-theme="dark"] .produtos-vazio-criar { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] .produtos-vazio-texto b, body[data-theme="dark"] .produtos-vazio-criar strong { color: #FFFFFF !important; }
body[data-theme="dark"] .produtos-vazio-criar-icone { background: #333333 !important; color: #FFFFFF !important; }

/* Letras suavizadas como no anfitrião (html { -webkit-font-smoothing:
   antialiased }): sem isso, no Mac o texto do Hub fica mais grosso que o do
   index com o mesmo peso (ex.: o "Olá, empresa!" da Home). */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Sua agenda (Dashboard): o dia de hoje com o mesmo fundo das bolinhas dos
   atalhos (Cobrar, Orçamento, Financeiro, Construtor), desktop e celular. */
html body .day-strip-cell.today:not(#love-h-a):not(#love-h-b) { background: #EAF0F5 !important; }
html body .day-strip-cell.today:not(#love-h-a) :is(.dow, .dom) { color: #183b54 !important; }
html body .day-strip-cell.today:not(#love-h-a) .day-strip-dot { background: #183b54 !important; }
body[data-theme="dark"] .day-strip-cell.today:not(#love-h-a):not(#love-h-b):not(#love-h-c) { background: #252525 !important; }
body[data-theme="dark"] .day-strip-cell.today:not(#love-h-a):not(#love-h-b) :is(.dow, .dom) { color: #EBF4FF !important; }
body[data-theme="dark"] .day-strip-cell.today:not(#love-h-a):not(#love-h-b) .day-strip-dot { background: #EBF4FF !important; }

/* Telas vazias ocupando o espaço até o rodapé, como Meus presentes do
   anfitrião: Meus produtos, Oportunidades, Propostas enviadas e Clientes.
   A caixa cresce (flex) e o aviso fica no meio dela. Só no desktop. */
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body .b2b-content > :is(#products-grid:has(> .produtos-vazio), [data-leads-painel]:not([hidden]):has(#op-sem-produtos:not([hidden]), #op-vazio:not([hidden]), td.tabela-vazia-cheia)):not(#love-h-a):not(#love-h-b) {
    flex: 1 0 auto; display: flex !important; flex-direction: column;
  }
  html body #products-grid > .produtos-vazio:not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; justify-content: center; min-height: 420px; }

  /* Oportunidades sem produto: caixa branca cheia, aviso no meio. */
  html body [data-leads-painel] > #op-sem-produtos:not([hidden]):not(#love-h-a):not(#love-h-b) {
    flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 420px;
    background: #FFFFFF; border: 1px solid #E4E4E7; border-style: solid; border-radius: 10px;
  }
  /* Oportunidades sem pedidos: a caixa da lista cresce e o aviso fica no meio. */
  html body [data-leads-painel] > #op-conteudo:has(#op-vazio:not([hidden])):not([hidden]):not(#love-h-a) { flex: 1 0 auto; display: flex; flex-direction: column; }
  html body #op-conteudo > .op-caixa:has(> #op-vazio:not([hidden])):not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 420px; }
  html body .op-caixa > #op-vazio:not([hidden]):not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; text-align: center; }
  html body .op-caixa:has(> #op-vazio:not([hidden])) > .op-posts:not(#love-h-a):not(#love-h-b) { flex: 0 0 auto; }

  /* Propostas enviadas e Clientes vazios: a tabela vai até o rodapé, sem as
     linhas de fundo, e o aviso no meio. */
  html body :is(#op-propostas-card, #leads-table-card):has(td.tabela-vazia-cheia):not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; min-height: 420px; }
  html body :is(#op-propostas-card, #leads-table-card):has(td.tabela-vazia-cheia) > .leads-table-wrap:not(#love-h-a):not(#love-h-b)::after { display: none; }
  html body :is(#op-propostas-card, #leads-table-card):has(td.tabela-vazia-cheia) > .leads-table-wrap > table:not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; }
  html body :is(#op-propostas-card, #leads-table-card) td.tabela-vazia-cheia:not(#love-h-a):not(#love-h-b) { padding: 48px 16px !important; text-align: center; vertical-align: middle; }

  body[data-theme="dark"] [data-leads-painel] > #op-sem-produtos:not([hidden]) { background: #252525 !important; border-color: #404040 !important; }
}
/* Caixas de tabela sem padding: a tabela começa no topo da caixa (antes o
   cabeçalho de Propostas enviadas subia 24px por cima das abas). */
html body :is(#leads-table-card, #op-propostas-card, #finance-lista-card, #team-table-card, #orcamentos-table-card, #contratos-clientes-card) > .leads-table-wrap:first-child:not(#love-h-a):not(#love-h-b) { margin: 0; }
/* Com a tela vazia ocupando a página, o respiro até o rodapé é de 32px. */
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body .b2b-content:has(> #products-grid > .produtos-vazio, [data-leads-painel]:not([hidden]) :is(#op-sem-produtos:not([hidden]), #op-conteudo:not([hidden]) #op-vazio:not([hidden]), td.tabela-vazia-cheia)) > .b2b-footer-respiro:not(#love-h-a):not(#love-h-b) { height: 2rem; }
}

/* Meus produtos vazio: a caixa pontilhada "Cadastrar novo produto" com a
   mesma largura do texto de cima. */
html body .produtos-vazio:not(.produtos-vazio-busca):not(#love-h-a):not(#love-h-b) {
  display: grid; grid-template-columns: fit-content(100%); justify-content: center; align-content: center;
}
html body .produtos-vazio:not(.produtos-vazio-busca) > .produtos-vazio-cards:not(#love-h-a):not(#love-h-b) { grid-template-columns: minmax(0, 1fr); }

/* Fixar menu (computador): botão ao lado do logotipo. Fixado, o menu fica
   aberto (256px) e o conteúdo vai para a direita; desafixado, volta a abrir
   só ao passar o mouse, por cima do conteúdo. */
html body .sidebar-fixar:not(#love-h-a) { display: none; }
html body.sidebar-hover-mode:not(.sidebar-collapsed) .sidebar-brand-top > .sidebar-fixar:not(#love-h-a):not(#love-h-b) {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; margin-left: auto; padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 8px; outline: none; box-shadow: none;
  color: rgba(255, 255, 255, 0.55); transition: color .15s ease;
}
html body .sidebar-brand-top > .sidebar-fixar svg:not(#love-h-a) { width: 18px; height: 18px; transition: transform .15s ease; }
html body .sidebar-brand-top > .sidebar-fixar:not(#love-h-a):hover,
html body .sidebar-brand-top > .sidebar-fixar:not(#love-h-a):focus-visible { color: #FFFFFF; }
html body .sidebar-brand-top > .sidebar-fixar[aria-pressed="true"]:not(#love-h-a) { color: #FFFFFF; }
html body .sidebar-brand-top > .sidebar-fixar[aria-pressed="true"] svg:not(#love-h-a) { transform: rotate(45deg); fill: currentColor; }
html body.sidebar-hover-mode.sidebar-fixo .b2b-main:not(#love-h-a) { margin-left: var(--sidebar-width); }
html body.sidebar-hover-mode.sidebar-fixo .b2b-sidebar:not(#love-h-a) { box-shadow: none; }

/* Meus produtos vazio: ícone animado no lugar do "+", no tamanho, cor e
   traço dos ícones de Adicionar presente do anfitrião (64px, #D4D4D8, 2px). */
html body .produtos-vazio-criar .produtos-vazio-lottie:not(#love-h-a) { display: block; width: 64px; height: 64px; margin: 0 auto 6px; }

/* Adicionar/editar produto aberto: a caixa de "nenhum produto" some (a regra
   da tela vazia ocupando a página não pode trazê-la de volta). */
html body.produto-editor-aberto .b2b-content > #products-grid:not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: none !important; }
html body.produto-editor-aberto .b2b-content > .b2b-footer-respiro:not(#love-h-a):not(#love-h-b):not(#love-h-c) { height: 6.5rem; }

/* Avisos de "vazio" num padrão só (o de Oportunidades sem produto): 15px,
   peso normal, #3F3F46. Vale para Meus produtos, Oportunidades, Propostas
   enviadas, Clientes, Contratos, Orçamentos e Colaboradores. */
html body :is(.produtos-vazio-texto, .op-sem-produtos > p, .op-vazio, td.tabela-vazia-cheia, .op-prop-vazio):not(#love-h-a):not(#love-h-b) {
  font-family: inherit; font-size: 15px !important; font-weight: 400; line-height: 1.5; color: #3F3F46 !important; letter-spacing: normal;
}
html body .produtos-vazio-texto b:not(#love-h-a):not(#love-h-b) { font-weight: inherit; color: inherit; }
body[data-theme="dark"] :is(.produtos-vazio-texto, .op-sem-produtos > p, .op-vazio, td.tabela-vazia-cheia, .op-prop-vazio) { color: #D4D4D8 !important; }

/* Oportunidades sem produto: o mesmo cartão pontilhado de Meus produtos,
   na largura do texto. */
html body #op-sem-produtos:not([hidden]):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
  display: grid; grid-template-columns: fit-content(100%); justify-content: center; align-content: center; gap: 20px;
}
html body #op-sem-produtos > .produtos-vazio-cards:not(#love-h-a):not(#love-h-b) { grid-template-columns: minmax(0, 1fr); }
html body #op-sem-produtos a.produtos-vazio-criar:not(#love-h-a) { text-decoration: none; color: inherit; }

/* Contratos e Orçamentos vazios: a tabela vai até o rodapé com o aviso no
   meio, como Clientes e Propostas enviadas. */
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body .b2b-content > [data-view-panel]:not([style*="none"]):not([hidden]):has(:is(#orcamentos-table-card, #contratos-clientes-card) td.tabela-vazia-cheia):not(#love-h-a):not(#love-h-b):not(#love-h-c),
  html body [data-view-panel] > #orcamentos-lista-view:not([style*="none"]):not([hidden]):has(td.tabela-vazia-cheia):not(#love-h-a):not(#love-h-b) {
    flex: 1 0 auto; display: flex !important; flex-direction: column;
  }
  html body :is(#orcamentos-table-card, #contratos-clientes-card):has(td.tabela-vazia-cheia):not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; min-height: 420px; }
  html body :is(#orcamentos-table-card, #contratos-clientes-card):has(td.tabela-vazia-cheia) > .leads-table-wrap:not(#love-h-a):not(#love-h-b)::after { display: none; }
  html body :is(#orcamentos-table-card, #contratos-clientes-card):has(td.tabela-vazia-cheia) > .leads-table-wrap > table:not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; }
  html body :is(#orcamentos-table-card, #contratos-clientes-card) td.tabela-vazia-cheia:not(#love-h-a):not(#love-h-b) { padding: 48px 16px !important; text-align: center; vertical-align: middle; }
  html body .b2b-content:has(> [data-view-panel]:not([style*="none"]):not([hidden]) :is(#orcamentos-table-card, #contratos-clientes-card) td.tabela-vazia-cheia) > .b2b-footer-respiro:not(#love-h-a):not(#love-h-b) { height: 2rem; }
}
html body .leads-table tbody td.tabela-vazia-cheia:not(#love-h-a):not(#love-h-b):not(#love-h-c) { font-size: 15px !important; font-weight: 400; color: #3F3F46 !important; }
body[data-theme="dark"] .leads-table tbody td.tabela-vazia-cheia:not(#love-h-a):not(#love-h-b):not(#love-h-c) { color: #D4D4D8 !important; }
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body .b2b-content > [data-view-panel]:not([style*="none"]):has(:is(#orcamentos-table-card, #contratos-clientes-card) td.tabela-vazia-cheia):not(#love-h-a):not(#love-h-b):not(#love-h-c) { padding-bottom: 0 !important; }
}

/* Meus produtos vazio: "Que tal cadastrar um novo?" em negrito e clicável
   (abre o Adicionar produto). */
html body .produtos-vazio-texto .produtos-vazio-link:not(#love-h-a):not(#love-h-b) {
  display: inline; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; outline: none; cursor: pointer;
  font: inherit; font-weight: 700; color: #18181B; text-decoration: none;
}
html body .produtos-vazio-texto .produtos-vazio-link:not(#love-h-a):hover,
html body .produtos-vazio-texto .produtos-vazio-link:not(#love-h-a):focus-visible { text-decoration: underline; text-underline-offset: 3px; }
body[data-theme="dark"] .produtos-vazio-texto .produtos-vazio-link { color: #FFFFFF !important; }

/* Home do Hub: "Olá, empresa!" e a data na mesma fonte do "Olá, nome!" do
   anfitrião — Plus Jakarta Sans normal (400), 26px, cinza #52525B. */
html body[data-page="dashboard"] .dash-home-caixa #greeting-title:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 26px !important; font-weight: 400 !important; letter-spacing: -0.025em !important; line-height: 1.2 !important; color: #52525B !important;
}
html body[data-page="dashboard"] .dash-home-caixa #greeting-date:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; font-weight: 400; color: #52525B;
}
html body[data-theme="dark"][data-page="dashboard"] .dash-home-caixa #greeting-title:not(#love-h-a):not(#love-h-b):not(#love-h-c) { color: #FFFFFF !important; }
body[data-theme="dark"][data-page="dashboard"] .dash-home-caixa #greeting-date { color: #D4D4D8 !important; }

/* Meus contratos sempre até o rodapé (mesmo com contratos ou o de exemplo),
   como Orçamentos; Formulários vazio também; respiro de 32px até o rodapé. */
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body .b2b-content > [data-view-panel="contratos"]:not([style*="none"]):not([hidden]):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    flex: 1 0 auto; display: flex !important; flex-direction: column; padding-bottom: 0 !important;
  }
  html body [data-view-panel="contratos"] > #contratos-clientes-card:not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; min-height: 420px; }
  html body .b2b-content:has(> [data-view-panel="contratos"]:not([style*="none"]):not([hidden])) > .b2b-footer-respiro:not(#love-h-a):not(#love-h-b) { height: 2rem; }

  html body:not(.form-editor-aberto) .b2b-content > [data-tab-panel="formularios"]:not([style*="none"]):has(> #forms-list > .forms-vazio):not(#love-h-a):not(#love-h-b) {
    flex: 1 0 auto; display: flex !important; flex-direction: column;
  }
  html body [data-tab-panel="formularios"] > #forms-list:has(> .forms-vazio):not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; display: flex; flex-direction: column; }
  html body #forms-list > .forms-vazio:not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; min-height: 420px; }
  html body:not(.form-editor-aberto) .b2b-content:has(> [data-tab-panel="formularios"]:not([style*="none"]) > #forms-list > .forms-vazio) > .b2b-footer-respiro:not(#love-h-a):not(#love-h-b) { height: 2rem; }

  /* Propostas enviadas sem produto: o mesmo aviso de Oportunidades. */
  html body .b2b-content > [data-leads-painel]:not([hidden]):has(> #op-propostas-sem-produtos:not([hidden])):not(#love-h-a):not(#love-h-b) {
    flex: 1 0 auto; display: flex !important; flex-direction: column;
  }
  html body [data-leads-painel] > #op-propostas-sem-produtos:not([hidden]):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    flex: 1 0 auto; display: grid; grid-template-columns: fit-content(100%); justify-content: center; align-content: center; gap: 20px; min-height: 420px;
    background: #FFFFFF; border: 1px solid #E4E4E7; border-style: solid; border-radius: 10px;
  }
  html body .b2b-content:has(> [data-leads-painel]:not([hidden]) > #op-propostas-sem-produtos:not([hidden])) > .b2b-footer-respiro:not(#love-h-a):not(#love-h-b) { height: 2rem; }
  body[data-theme="dark"] [data-leads-painel] > #op-propostas-sem-produtos:not([hidden]) { background: #252525 !important; border-color: #404040 !important; }
}
html body #op-propostas-sem-produtos[hidden]:not(#love-h-a):not(#love-h-b) { display: none !important; }
html body #op-propostas-sem-produtos > .produtos-vazio-cards:not(#love-h-a):not(#love-h-b) { grid-template-columns: minmax(0, 1fr); }
html body #op-propostas-sem-produtos a.produtos-vazio-criar:not(#love-h-a) { text-decoration: none; color: inherit; }
html body #op-propostas-card[hidden]:not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: none !important; }

/* Celular: "Olá, empresa!" e a data na mesma fonte do Olá do anfitrião no
   celular — Plus Jakarta Sans normal (400), 22px, cinza #52525B. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="dashboard"] #greeting-title:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 22px !important; font-weight: 400 !important; letter-spacing: -0.025em !important; line-height: 1.25 !important; color: #52525B !important;
  }
  html body[data-page="dashboard"] #greeting-date:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; font-weight: 400; color: #52525B;
  }
  html body[data-theme="dark"][data-page="dashboard"] #greeting-title:not(#love-h-a):not(#love-h-b):not(#love-h-c):not(#love-h-d) { color: #FFFFFF !important; }
  body[data-theme="dark"][data-page="dashboard"] #greeting-date { color: #D4D4D8 !important; }
}

/* Banner da home: sem as setas; troca sozinho (e no celular, arrastando). */
html body .dash-ads-nav:not(#love-h-a):not(#love-h-b) { display: none !important; }
html body .dash-ads-carousel:not(#love-h-a) { touch-action: pan-y; }

/* Oportunidades no celular: arrastar a linha para a esquerda mostra
   "Enviar proposta" na cor primária e, passando de 35%, abre a proposta. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body #op-grade.op-posts:not(#love-h-a) { overflow-x: clip; }
  html body #op-grade .op-post:not(#love-h-a) { position: relative; touch-action: pan-y; }
  html body #op-grade .op-post.op-arrastando:not(#love-h-a) { background: #FFFFFF; }
  html body #op-grade .op-post:not(#love-h-a)::after {
    content: "Enviar proposta"; position: absolute; top: 0; bottom: 0; left: 100%; width: 100%;
    display: flex; align-items: center; padding-left: 24px;
    background: #183b54; color: #FFFFFF; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
    opacity: .85; transition: opacity .15s ease; pointer-events: none;
  }
  html body #op-grade .op-post.op-arraste-pronto:not(#love-h-a)::after { opacity: 1; }
  body[data-theme="dark"] #op-grade .op-post.op-arrastando { background: #252525 !important; }

  /* Filtrar por: campos de 40px (antes cada um esticava até 140px). */
  html body .op-filtrar-menu:not(#love-h-a):not(#love-h-b) { gap: 12px; padding: 16px; width: min(300px, calc(100vw - 32px)); }
  html body .op-filtrar-campo:not(#love-h-a):not(#love-h-b) { gap: 6px; }
  html body .op-filtrar-campo .op-filtro-select:not(#love-h-a):not(#love-h-b) { flex: 0 0 auto; height: 40px; }
}

/* Celular: as abas de Oportunidades/Propostas/Clientes, Gestão (Minha agenda/
   Minhas tarefas), Contratos e Financeiro no mesmo formato da barra de
   submenus do anfitrião (.submenu-celular): de ponta a ponta, grudada no
   topo, mesma largura, texto limpo e a linha da primária em cima da ativa. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .b2b-content > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    position: sticky; top: -20px; z-index: 20;
    display: flex; flex-shrink: 0; gap: 0 !important; width: auto; max-width: none; box-sizing: border-box;
    margin: 0 -16px 16px !important; padding: 0 !important;
    background: #FFFFFF !important; border: 0 !important; border-top: 1px solid #E4E4E7 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html body .b2b-content > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs)::-webkit-scrollbar { display: none; }
  html body .b2b-content > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs) > .category-tab:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    position: relative; flex: 1 0 auto !important; min-width: 0 !important; min-height: 46px; height: auto !important; display: inline-flex; align-items: center; justify-content: center;
    margin: 0 !important; padding: 0 6px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none;
    background: #FFFFFF !important; color: #52525B !important;
    font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -0.01em !important;
    white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html body .b2b-content > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs) > .category-tab.active:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    background: #F4F6F7 !important; color: #18181B !important; font-weight: 600 !important;
  }
  html body .b2b-content > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs) > .category-tab.active:not(#love-h-a):not(#love-h-b)::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #183b54; border-radius: 0;
  }
  html body .b2b-content > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs) > .category-tab:not(#love-h-a)::after { display: none !important; }
  /* O que vem logo antes das abas (cabeçalho ou descrição) fica sem margem embaixo. */
  html body .b2b-content > :has(+ :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs)):not(#love-h-a):not(#love-h-b) { margin-bottom: 0 !important; }
  body[data-theme="dark"] .b2b-content > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs) { background: #1F1F1F !important; border-top-color: #333333 !important; }
  body[data-theme="dark"] .b2b-content > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs) > .category-tab { background: #1F1F1F !important; color: #A1A1AA !important; }
  body[data-theme="dark"] .b2b-content > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs) > .category-tab.active { background: #1A1A1A !important; color: #FFFFFF !important; }
  body[data-theme="dark"] .b2b-content > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs) > .category-tab.active::before { background: #EBF4FF; }
}

/* Mensagens: atalho para Oportunidades só no cabeçalho do celular. */
.chat-oportunidades-btn { display: none !important; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .b2b-content > .b2b-header-bar > a.chat-oportunidades-btn:not(#love-h-a):not(#love-h-b):not(#love-h-c):not(#love-h-d) { display: inline-flex !important; align-items: center; text-decoration: none; }
}

/* Celular: rodapé só na Home — "© ano Love Hub Ltda." e, embaixo,
   Privacidade e Termos e condições, centralizado e pequeno. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="dashboard"] .b2b-content > .b2b-footer:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    display: block !important; flex-shrink: 0; margin: 8px -16px 0 !important; padding: 20px 16px 24px !important;
    background: transparent !important; border: 0 !important; border-top: 1px solid #E4E4E7 !important; text-align: center;
  }
  html body[data-page="dashboard"] .b2b-footer .b2b-footer-bottom:not(#love-h-a):not(#love-h-b) {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 0;
  }
  html body[data-page="dashboard"] .b2b-footer .b2b-footer-bottom p:not(#love-h-a):not(#love-h-b) { margin: 0; font-size: 12px !important; color: #71717A !important; }
  html body[data-page="dashboard"] .b2b-footer .b2b-footer-frase:not(#love-h-a) { display: none; }
  html body[data-page="dashboard"] .b2b-footer .b2b-footer-legal-links:not(#love-h-a):not(#love-h-b) { display: flex !important; justify-content: center; gap: 16px; margin: 0 !important; }
  html body[data-page="dashboard"] .b2b-footer .b2b-footer-legal-links a:not(#love-h-a):not(#love-h-b) { font-size: 12px !important; font-weight: 500; color: #52525B !important; text-decoration: none; }
  body[data-theme="dark"][data-page="dashboard"] .b2b-content > .b2b-footer { border-top-color: #333333 !important; }
  body[data-theme="dark"][data-page="dashboard"] .b2b-footer .b2b-footer-bottom p { color: #A1A1AA !important; }
  body[data-theme="dark"][data-page="dashboard"] .b2b-footer .b2b-footer-legal-links a { color: #D4D4D8 !important; }
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="dashboard"] .b2b-content > .b2b-footer-respiro:not(#love-h-a):not(#love-h-b):not(#love-h-c) { height: 16px !important; }
}

/* Oportunidades: a busca do cabeçalho some nas outras abas também no celular
   (o display: contents passava por cima do hidden). */
html body #op-header-acoes[hidden]:not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: none !important; }

/* Celular: janelas em tela cheia (Nova cobrança, Sacar Pix…) com o
   cabeçalho branco das páginas — título 20px/700 à esquerda e o X à direita,
   grudado no topo. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .modal-backdrop:not(.hub-confirmar):not(#unsaved-changes-modal):not(.op-foto-modal) > .modal-card > div.flex.items-center.justify-between:first-child:has(> h3):not(#love-h-a):not(#love-h-b) {
    position: sticky; top: calc(-20px - env(safe-area-inset-top, 0px)); z-index: 5;
    margin: calc(-20px - env(safe-area-inset-top, 0px)) -16px 16px !important;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 6px 18px 16px !important; min-height: 82px; box-sizing: border-box;
    background: #FFFFFF !important; border: 0 !important;
  }
  html body .modal-backdrop:not(.hub-confirmar):not(#unsaved-changes-modal):not(.op-foto-modal) > .modal-card > div.flex.items-center.justify-between:first-child > h3:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    display: flex; align-items: center; min-height: 44px; margin: 0 !important;
    font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 20px !important; font-weight: 700 !important; line-height: 26px !important; letter-spacing: -0.4px !important; color: #18181B !important;
  }
  html body .modal-backdrop:not(.hub-confirmar):not(#unsaved-changes-modal):not(.op-foto-modal) > .modal-card > div.flex.items-center.justify-between:first-child > button:not(#love-h-a):not(#love-h-b) {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0;
    background: transparent; border: 0; border-radius: 8px; color: #18181B !important;
  }
  html body .modal-backdrop:not(.hub-confirmar):not(#unsaved-changes-modal):not(.op-foto-modal) > .modal-card > div.flex.items-center.justify-between:first-child > button svg:not(#love-h-a) { width: 22px; height: 22px; }
  body[data-theme="dark"] .modal-backdrop > .modal-card > div.flex.items-center.justify-between:first-child:has(> h3) { background: #1F1F1F !important; }
  body[data-theme="dark"] .modal-backdrop > .modal-card > div.flex.items-center.justify-between:first-child > :is(h3, button) { color: #FFFFFF !important; }
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  /* Oportunidades no formato de Clientes: o número de filtros ligados continua aparecendo. */
  html body .dash-card.lista-celular #op-filtrar-btn > .op-filtrar-qtd:not([hidden]):not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: inline !important; position: static; font-size: 15px !important; font-weight: 500; }
  html body .dash-card.lista-celular .op-filtrar-menu:not(#love-h-a):not(#love-h-b):not(#love-h-c) { right: 0; left: auto; top: calc(100% + 6px); }
}

/* ==========================================================================
   Celular: a caixa da lista (Clientes, Oportunidades, Meus contratos,
   Orçamentos) usa a tela toda — colada nas abas e indo até a barra de baixo,
   sem a faixa cinza do respiro do rodapé (o rodapé só aparece na Home).
   Mensagens: sem a faixa de outro cinza entre o cabeçalho e "N conversas",
   um cinza só (o da página), linha fina embaixo do cabeçalho, como no index.
   ========================================================================== */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body:not([data-page="dashboard"]) .b2b-content > .b2b-footer-respiro:not(#love-h-a):not(#love-h-b):not(#love-h-c) { height: 0 !important; }

  html body .b2b-content:has(> :is([data-view-panel], [data-leads-painel]):not([hidden]):not([style*="none"]) > .dash-card.lista-celular, > :is([data-view-panel], [data-leads-painel]):not([hidden]):not([style*="none"]) > :not([hidden]):not([style*="none"]) > .dash-card.lista-celular) > :is(#leads-abas, #work-view-tabs, #sales-view-tabs, #payments-view-tabs, .category-tabs-bar):not(#love-h-a):not(#love-h-b):not(#love-h-c) { margin-bottom: 0 !important; }
  html body .b2b-content > :is([data-view-panel], [data-leads-painel]):not([hidden]):not([style*="none"]):has(> .dash-card.lista-celular, > :not([hidden]):not([style*="none"]) > .dash-card.lista-celular):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    flex: 1 0 auto !important; display: flex !important; flex-direction: column; min-height: 0;
    padding-bottom: 0 !important; margin-bottom: calc(-88px - env(safe-area-inset-bottom, 0px)) !important;
  }
  html body .b2b-content > :is([data-view-panel], [data-leads-painel]):not([hidden]):not([style*="none"]) > :not([hidden]):not([style*="none"]):has(> .dash-card.lista-celular):not(#love-h-a):not(#love-h-b):not(#love-h-c) { flex: 1 0 auto !important; display: flex !important; flex-direction: column; margin-bottom: 0 !important; }
  html body .b2b-content > :is([data-view-panel], [data-leads-painel]) .dash-card.lista-celular:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    flex: 1 0 auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body .b2b-content > :is([data-view-panel], [data-leads-painel]) .dash-card.lista-celular > .vazio-celular:not([hidden]):not(#love-h-a):not(#love-h-b):not(#love-h-c) { flex: 1 0 auto; min-height: 320px; }

  /* Oportunidades: filtros rápidos dentro da caixa, abaixo da busca. */
  html body #op-caixa > #op-barra-celular:has(+ #op-filtros):not(#love-h-a):not(#love-h-b):not(#love-h-c) { padding-bottom: 12px !important; border-bottom: 0 !important; }
  html body #op-caixa > #op-filtros:not(#love-h-a):not(#love-h-b) { flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0 16px 16px; border-bottom: 1px solid #E4E4E7; overflow-x: auto; scrollbar-width: none; }
  body[data-theme="dark"] #op-caixa > #op-filtros { border-bottom-color: #333333; }

  /* Mensagens */
  html body[data-page="chat"] .b2b-content > .b2b-header-bar:not(#love-h-a):not(#love-h-b):not(#love-h-c) { margin-bottom: 0 !important; border-bottom: 1px solid #E4E4E7 !important; }
  html body[data-page="chat"] :is(.chat-shell, .b2b-chat-contacts-column, .b2b-chat-contacts-header, #conv-list):not(#love-h-a):not(#love-h-b):not(#love-h-c) { background: transparent !important; }
  html body[data-page="chat"] .chat-total-celular:not(#love-h-a):not(#love-h-b):not(#love-h-c) { color: #18181B; }
  body[data-theme="dark"][data-page="chat"] .b2b-content > .b2b-header-bar { border-bottom-color: #333333 !important; }
  body[data-theme="dark"][data-page="chat"] .chat-total-celular { color: #FFFFFF; }
}

/* ==========================================================================
   Home: caixa do saldo com abas Saldo / Faturamento no topo (texto com
   sublinhado na primária, como os submenus) e o olho à direita para
   esconder os valores. Um valor por vez, centralizado; botão igual.
   ========================================================================== */
html body .dash-saldo-celular .dash-saldo-celular-topo:not(#love-h-a) {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 8px 0 20px; border-bottom: 1px solid #F4F4F5;
}
html body .dash-saldo-celular .dash-saldo-celular-abas:not(#love-h-a) { display: flex; align-items: stretch; gap: 20px; min-width: 0; }
html body .dash-saldo-celular .dash-saldo-celular-aba:not(#love-h-a):not(#love-h-b) {
  height: 46px; margin: 0 0 -1px; padding: 0; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; color: #71717A; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html body .dash-saldo-celular .dash-saldo-celular-aba:not(#love-h-a):not(#love-h-b):hover { color: #181D24; }
html body .dash-saldo-celular .dash-saldo-celular-aba.active:not(#love-h-a):not(#love-h-b) { border-bottom-color: #183b54; color: #183b54; font-weight: 600; }
html body .dash-saldo-celular .dash-saldo-celular-olho:not(#love-h-a):not(#love-h-b) {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0;
  background: transparent; border: 0; border-radius: 8px; color: #71717A; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html body .dash-saldo-celular .dash-saldo-celular-olho:not(#love-h-a):not(#love-h-b):hover { color: #181D24; }
html body .dash-saldo-celular .dash-saldo-celular-olho svg:not(#love-h-a) { width: 20px; height: 20px; }
html body .dash-saldo-celular .dash-saldo-celular-painel:not([hidden]):not(#love-h-a) {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 20px 20px; text-align: center; min-width: 0;
}
html body .dash-saldo-celular .dash-saldo-celular-painel[hidden]:not(#love-h-a) { display: none; }
body[data-theme="dark"] .dash-saldo-celular .dash-saldo-celular-topo { border-bottom-color: #333333; }
body[data-theme="dark"] .dash-saldo-celular :is(.dash-saldo-celular-aba, .dash-saldo-celular-olho) { color: #A1A1AA !important; }
body[data-theme="dark"] .dash-saldo-celular .dash-saldo-celular-aba.active { color: #FFFFFF !important; border-bottom-color: #FFFFFF !important; }

/* ==========================================================================
   Celular: listas vazias e avisos de "sem produto" no mesmo padrão — caixa
   branca sobre o fundo cinza, descendo até 16px acima da barra de baixo.
   - Clientes, Contratos, Orçamentos vazios: sem o branco de ponta a ponta
     atrás da caixa "Adicione seu primeiro…".
   - Oportunidades e Propostas enviadas sem produto: a caixa estica até embaixo.
   Barra de baixo: item ativo com o fundo #EAF0F5 e o ícone #183b54 dos
   atalhos Cobrar / Orçamento / Construtor da Home.
   ========================================================================== */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .b2b-content .dash-card.lista-celular.tem-vazio-celular:not(#love-h-a):not(#love-h-b):not(#love-h-c) { background: transparent !important; }
  html body .dash-card.lista-celular.tem-vazio-celular > .tabela-barra:not(#love-h-a):not(#love-h-b):not(#love-h-c) { border-bottom-color: transparent !important; }
  body[data-theme="dark"] .b2b-content .dash-card.lista-celular.tem-vazio-celular { background: transparent !important; }

  html body .b2b-content > [data-leads-painel]:not([hidden]):has(> :is(#op-sem-produtos, #op-propostas-sem-produtos):not([hidden])):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    flex: 1 0 auto !important; display: flex !important; flex-direction: column; margin-bottom: -8px !important; padding-bottom: 0 !important;
  }
  html body .b2b-content > [data-leads-painel] > :is(#op-sem-produtos, #op-propostas-sem-produtos):not([hidden]):not(#love-h-a):not(#love-h-b) { flex: 1 0 auto; align-content: center; margin-bottom: 0 !important; }

  html body:not([data-theme="dark"]) .mobile-bottom-nav .mobile-nav-item.active:not(#love-h-a):not(#love-h-b):not(#love-h-c) { background: #EAF0F5 !important; color: #183b54 !important; }
}

/* ==========================================================================
   Formulários vazios no padrão de Oportunidades sem produto: caixa branca
   na largura do conteúdo (borda contínua, cantos 10px), texto em cima e o
   cartão pontilhado "Cadastrar novo formulário" no meio. No celular a caixa
   desce até 16px acima da barra de baixo.
   ========================================================================== */
html body #forms-list:has(> .forms-vazio):not(#love-h-a):not(#love-h-b) { max-width: none !important; width: 100%; }
html body #forms-list > .forms-vazio:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
  display: grid !important; grid-template-columns: fit-content(100%); justify-content: center; align-content: center; gap: 20px;
  padding: 40px 24px; background: #FFFFFF; border: 1px solid #E4E4E7 !important; border-radius: 10px;
}
html body #forms-list > .forms-vazio > .produtos-vazio-cards:not(#love-h-a):not(#love-h-b) { grid-template-columns: minmax(0, 1fr); }
html body .forms-vazio button.produtos-vazio-criar:not(#love-h-a):not(#love-h-b) { width: 100%; font: inherit; color: inherit; }
html body .forms-vazio .forms-vazio-icone:not(#love-h-a) { display: block; width: 64px; height: 64px; margin: 0 auto 6px; }
body[data-theme="dark"] #forms-list > .forms-vazio { background: #252525 !important; border-color: #404040 !important; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body:not(.form-editor-aberto) .b2b-content > [data-tab-panel="formularios"]:not([style*="none"]):has(> #forms-list > .forms-vazio):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    flex: 1 0 auto !important; display: flex !important; flex-direction: column; margin-bottom: -8px !important; padding-bottom: 0 !important;
  }
  html body [data-tab-panel="formularios"] > #forms-list:has(> .forms-vazio):not(#love-h-a):not(#love-h-b):not(#love-h-c) { flex: 1 0 auto; display: flex !important; flex-direction: column; }
  html body #forms-list > .forms-vazio:not(#love-h-a):not(#love-h-b):not(#love-h-c):not(#love-h-d) { flex: 1 0 auto; min-height: 0; }
}

/* Celular: sem a transição de página (cross-fade da tela inteira). A foto da
   página antiga era esticada quando a altura da tela mudava (barra do
   endereço) e a barra de baixo, que chega depois pelo shell, aparecia torta
   ao entrar ou voltar numa página. Troca direta, sem animação. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  @view-transition { navigation: none; }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  html body .mobile-bottom-nav .mobile-nav-item:not(#love-h-a):not(#love-h-b) { transition: none !important; }
}

/* Celular: Minhas tarefas (quadro) com as listas na largura toda. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .kanban-board:not(#love-h-a):not(#love-h-b) { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; }
  html body .kanban-board > *:not(#love-h-a):not(#love-h-b) { width: auto !important; max-width: none !important; }
}

/* ==========================================================================
   Login do Hub (login/signup) no mesmo modelo do login da love.com.br:
   logo no meio sem título, Google em cima, "ou" e depois e-mail/senha;
   campos brancos com borda cinza (cinza claro quando preenchidos); Entrar
   claro (#EAF0F5) com os campos vazios e azul (#183b54) quando preenchidos;
   foto da direita numa caixa com carrossel; no celular, prévia da barra de
   baixo do Hub (só enfeite).
   ========================================================================== */
html body .auth-tela :is(#auth-view-login, #auth-view-signup):not(#love-h-a) { max-width: 400px; margin-left: auto; margin-right: auto; }
.auth-tela .auth-logo { margin-bottom: 32px; text-align: center; }
.auth-tela .auth-logo img { margin: 0 auto; }
.auth-tela .auth-ou { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.auth-tela .auth-ou::before, .auth-tela .auth-ou::after { content: ''; flex: 1; height: 1px; background: #E4E4E7; }
.auth-tela .auth-ou span { font: 500 13px/1 Inter, sans-serif; color: #71717A; }
html body .auth-tela a.auth-esqueceu-senha:not(#love-h-a) { font-size: 12px; font-weight: 500; color: #71717A; text-decoration: none; }
html body .auth-tela a.auth-esqueceu-senha:not(#love-h-a):hover { color: #181D24; text-decoration: underline; }
.auth-tela .auth-trocar { display: flex; justify-content: center; gap: 4px; padding-top: 28px; font-size: 14px; color: #71717A; }
html body .auth-tela .auth-trocar a:not(#love-h-a) { font-weight: 700; color: #183b54; text-decoration: none; }
html body .auth-tela .auth-trocar a:not(#love-h-a):hover { text-decoration: underline; }
.auth-tela .auth-termos { margin-top: 16px; text-align: center; font-size: 11px; line-height: 1.6; color: #A1A1AA; }
html body .auth-tela .auth-termos a:not(#love-h-a) { font-weight: 600; color: #71717A; text-decoration: none; }
html body .auth-tela .auth-termos a:not(#love-h-a):hover { color: #181D24; text-decoration: underline; }
html body .auth-tela #auth-view-signup > div:first-child:not(#love-h-a) { text-align: center; }
html body .auth-tela #auth-view-signup > div:first-child img:not(#love-h-a) { margin-left: auto; margin-right: auto; }

/* Botão do Google: branco, borda fina; hover só escurece a borda. */
html body .auth-tela :is(#google-login-btn, #google-signup-btn):not(#love-h-a):not(#love-h-b) {
  background: #FFFFFF !important; border: 1px solid #E4E4E7 !important; box-shadow: none !important; border-radius: 8px !important; color: #18181B !important;
}
html body .auth-tela :is(#google-login-btn, #google-signup-btn):hover:not(#love-h-a):not(#love-h-b) { border-color: #181D24 !important; }

/* Campos: vazio branco com borda cinza fina; preenchido cinza claro. */
html body .auth-tela :is(input[type="email"], input[type="password"], input[type="text"]):not(#love-h-a):not(#love-h-b) {
  background: #FFFFFF !important; border: 1px solid #E4E4E7 !important; box-shadow: none !important; outline: none !important; border-radius: 8px !important;
}
html body .auth-tela :is(input[type="email"], input[type="password"], input[type="text"]):not(:placeholder-shown):not(#love-h-a):not(#love-h-b) { background: #F4F6F7 !important; }
html body .auth-tela :is(input[type="email"], input[type="password"], input[type="text"]):focus:not(#love-h-a):not(#love-h-b) { border-color: #181D24 !important; }
html body .auth-tela input:is(:-webkit-autofill, :autofill):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
  -webkit-box-shadow: 0 0 0 1000px #F4F6F7 inset !important; box-shadow: 0 0 0 1000px #F4F6F7 inset !important;
  -webkit-text-fill-color: #18181B !important; caret-color: #18181B;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Entrar / Criar conta: claro com os campos vazios, azul quando preenchidos. */
html body .auth-tela .auth-entrar:not(#love-h-a):not(#love-h-b) {
  background: #EAF0F5 !important; color: #183b54 !important; box-shadow: none !important; border: 0 !important; border-radius: 8px !important;
}
html body .auth-tela .auth-entrar:hover:not(#love-h-a):not(#love-h-b) { background: #E1E9F0 !important; color: #183b54 !important; box-shadow: none !important; outline: none !important; }
html body .auth-tela #login-form:has(#login-email:is(:not(:placeholder-shown), :-webkit-autofill, :autofill)):has(#login-password:is(:not(:placeholder-shown), :-webkit-autofill, :autofill)) .auth-entrar:not(#love-h-a):not(#love-h-b),
html body .auth-tela #signup-email-form:has(#signup-email:not(:placeholder-shown)):has(#signup-password:not(:placeholder-shown)) .auth-entrar:not(#love-h-a):not(#love-h-b) {
  background: #183b54 !important; color: #FFFFFF !important; box-shadow: none !important;
}
html body .auth-tela #login-form:has(#login-email:is(:not(:placeholder-shown), :-webkit-autofill, :autofill)):has(#login-password:is(:not(:placeholder-shown), :-webkit-autofill, :autofill)) .auth-entrar:hover:not(#love-h-a):not(#love-h-b),
html body .auth-tela #signup-email-form:has(#signup-email:not(:placeholder-shown)):has(#signup-password:not(:placeholder-shown)) .auth-entrar:hover:not(#love-h-a):not(#love-h-b) {
  background: #122c3f !important;
}

/* Desktop: foto numa caixa de cantos 10px com 16px de respiro; carrossel. */
@media (min-width: 1024px) {
  html body .auth-tela .login-imagem:not(#love-h-a) {
    flex: 0 0 auto; width: calc(50% - 16px); margin: 16px 16px 16px 0; border-radius: 10px;
    min-height: calc(100vh - 32px); align-self: stretch;
  }
}
.auth-tela .login-carrossel { position: absolute; inset: 0; }
.auth-tela .login-carrossel-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity 1.2s ease, transform 6s ease-out;
}
.auth-tela .login-carrossel-foto.is-ativa { opacity: 1; transform: scale(1); }
#login-carrossel-frase { transition: opacity .45s ease, transform .45s ease; }
#login-carrossel-frase.is-trocando { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .auth-tela .login-carrossel-foto, #login-carrossel-frase { transition: none; transform: none; } }

/* Celular: prévia da barra de baixo do Hub (só enfeite). */
.auth-tela .login-barra-previa { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .auth-tela:has(.login-barra-previa) :is(#auth-view-login, #auth-view-signup):not(#love-h-a):not(#love-h-b) { padding-bottom: 72px; }
  .auth-tela .login-barra-previa {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
    height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px env(safe-area-inset-bottom, 0px);
    background: #FFFFFF; border-top: 1px solid #E4E4E7; pointer-events: none; user-select: none;
  }
  .auth-tela .login-barra-item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 52px; margin: 0 2px; border-radius: 999px; color: #52525B; font: 500 10.5px/1 Inter, sans-serif;
  }
  .auth-tela .login-barra-item small { font-size: 10.5px; }
  .auth-tela .login-barra-item svg { width: 21px; height: 21px; }
  .auth-tela .login-barra-item.is-ativo { background: #EAF0F5; color: #183b54; }
}

body[data-theme="dark"] .auth-tela .auth-ou::before, body[data-theme="dark"] .auth-tela .auth-ou::after { background: #404040; }

/* Login do Hub: foto da direita com cantos mais arredondados (16px). */
@media (min-width: 1024px) {
  html body .auth-tela .login-imagem:not(#love-h-a):not(#love-h-b) { border-radius: 16px; }
}

/* Financeiro (desktop): as abas soltas da primeira caixa, com o mesmo respiro
   de 16px de Clientes; a caixa volta a ter a borda de cima e os cantos
   arredondados. */
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body #payments-view-tabs:not(#love-h-a):not(#love-h-b) { margin-bottom: 16px !important; }
  html body :is(.fin-resumo, .fin-contas):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    border-top: 1px solid var(--borda-suave) !important; border-top-left-radius: 10px !important; border-top-right-radius: 10px !important;
  }
  html body [data-view-panel="receber"]:not(#love-h-a):not(#love-h-b) { padding-top: 0; }
}

/* Agenda (desktop): o evento abre dentro da página, então o fundo escuro do
   pop-up não aparece (ele cobria o formulário e fechava ao clicar). */
@media (min-width: 769px) and (hover: hover), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (min-height: 501px) {
  html body.ficha-na-pagina-aberta .agenda-evento-fundo:not(#love-h-a):not(#love-h-b) { display: none !important; }
}

/* Celular: Propostas enviadas sem produto com o aviso no meio da caixa, como
   Oportunidades; e a animação de Clientes, Colaboradores e Contratos vazios
   no tamanho do ícone dessas duas abas (64px). */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body [data-leads-painel] > #op-propostas-sem-produtos:not([hidden]):not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    display: grid; grid-template-columns: fit-content(100%); justify-content: center; align-content: center; gap: 20px;
  }
  html body .vazio-celular .vazio-celular-lottie:not(#love-h-a):not(#love-h-b) { width: 64px; height: 64px; margin: 0 0 6px; }
}
/* Clientes vazio (celular): animação nova em formato largo (16:9); 88x50 deixa o
   desenho com a mesma largura visível do ícone de Oportunidades (~42px). */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body #leads-table-card .vazio-celular .vazio-celular-lottie:not(#love-h-a):not(#love-h-b):not(#love-h-c) { width: 88px; height: 50px; margin: 0 0 6px; }
}

/* Gestão: "Compartilhar" só com o ícone da pessoa com o "+", sem caixa. */
html body #share-board-btn:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 0; padding: 0; gap: 0;
  background: transparent !important; border: 0 !important; box-shadow: none !important; color: #3F3F46;
}
html body #share-board-btn:not(#love-h-a):not(#love-h-b):not(#love-h-c):hover { color: #181D24; background: transparent !important; }
html body #share-board-btn svg:not(#love-h-a):not(#love-h-b) { width: 20px; height: 20px; }
body[data-theme="dark"] #share-board-btn { color: #D4D4D8 !important; }
/* Celular: a caixa da agenda (horários) vem antes de Avisos. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .agenda-calendar-layout > .agenda-left-col:not(#love-h-a) { display: contents; }
  html body .agenda-calendar-layout .agenda-mini-calendar:not(#love-h-a) { order: 1; }
  html body .agenda-calendar-layout > .agenda-timeline-panel:not(#love-h-a) { order: 2; }
  html body .agenda-calendar-layout .agenda-notifications-card:not(#love-h-a) { order: 3; }
}

/* Contratos: nome do cliente como o nome do convidado na lista do
   love.com.br (negrito, sublinha ao passar o mouse) e, ao clicar, a ficha do
   contrato só para leitura dentro da caixa. */
html body .contrato-nome-btn:not(#love-h-a) { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600 !important; color: #18181B; text-align: left; cursor: pointer; }
html body .contrato-nome-btn:not(#love-h-a):hover { text-decoration: underline; text-underline-offset: 2px; }
body[data-theme="dark"] .contrato-nome-btn { color: #FFFFFF !important; }
html body .contrato-ficha-topo:not(#love-h-a) { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
html body .contrato-ficha-titulo:not(#love-h-a) { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.025em; color: #18181B; }
html body .contrato-ficha-sub:not(#love-h-a) { margin: 4px 0 0; font-size: 13px; color: #71717A; }
html body .contrato-ficha-fechar:not(#love-h-a) { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; background: transparent; color: #71717A; cursor: pointer; }
html body .contrato-ficha-fechar:not(#love-h-a):hover { color: #181D24; }
html body .contrato-ficha-fechar svg:not(#love-h-a) { width: 18px; height: 18px; }
html body .contrato-ficha-grade:not(#love-h-a) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
html body .contrato-ficha-rotulo:not(#love-h-a) { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: #3F3F46; }
html body .contrato-ficha-valor:not(#love-h-a) {
  display: flex; align-items: center; min-height: 44px; padding: 10px 14px; box-sizing: border-box;
  border: 1px solid #E4E4E7; border-radius: 8px; background: #FAFAFA; font-size: 14px; color: #18181B; font-variant-numeric: tabular-nums;
}
html body .contrato-situacao:not(#love-h-a) { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 600; }
html body .contrato-situacao.is-quitado:not(#love-h-a) { background: #ECFDF3; color: #15803D; }
html body .contrato-situacao.is-em-dia:not(#love-h-a) { background: #EAF0F5; color: #183b54; }
html body .contrato-situacao.is-atrasado:not(#love-h-a) { background: #FEF3F2; color: #B42318; }
html body .contrato-ficha-acoes:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
html body .contrato-ficha-voltar:not(#love-h-a) { padding: 8px; border: 0; background: transparent; font-size: 14px; font-weight: 500; color: #3F3F46; cursor: pointer; }
html body .contrato-ficha-voltar:not(#love-h-a):hover { color: #181D24; }
html body .contrato-ficha-link:not(#love-h-a) { text-decoration: none; }
body[data-theme="dark"] .contrato-ficha-titulo { color: #FFFFFF !important; }
body[data-theme="dark"] .contrato-ficha-valor { background: #333333 !important; border-color: #404040 !important; color: #FFFFFF !important; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .contrato-pagina:not(#love-h-a) { padding: 16px; }
  html body .contrato-ficha-grade:not(#love-h-a) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html body .contrato-ficha-acoes:not(#love-h-a) { flex-direction: column-reverse; align-items: stretch; }
  html body .contrato-ficha-link:not(#love-h-a) { justify-content: center; height: 48px; }
}

/* Home (celular): "Solicitar saque" como o "Sacar disponível" do
   love.com.br: claro (#EAF0F5 / #183b54) sem saldo; azul da sidebar com saldo. */
html body[data-page="dashboard"] .dash-saldo-celular-botao.is-sem-saldo:not(#love-h-a):not(#love-h-b):not(#love-h-c) { background: #EAF0F5; color: #183b54; }
html body[data-page="dashboard"] .dash-saldo-celular-botao.is-sem-saldo:not(#love-h-a):not(#love-h-b):not(#love-h-c):hover { background: #E1E9F0; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="dashboard"] .dash-saldo-celular-botao:not(#love-h-a):not(#love-h-b):not(#love-h-c) { height: 42px !important; min-height: 0 !important; }
}

/* Botões claros (#EAF0F5 / #183b54): sem contorno, anel ou outline no hover e
   no foco; só o fundo escurece para #E1E9F0. Os azuis seguem com #122c3f. */
html body :is(.auth-tela .auth-entrar, [data-page="dashboard"] .dash-saldo-celular-botao.is-sem-saldo):not(#love-h-a):not(#love-h-b):not(#love-h-c):focus-visible { background: #E1E9F0 !important; outline: none !important; box-shadow: none !important; }
html body[data-page="dashboard"] .dash-saldo-celular-botao.is-sem-saldo:not(#love-h-a):not(#love-h-b):not(#love-h-c):hover { background: #E1E9F0; color: #183b54; box-shadow: none; outline: none; }
html body[data-page="dashboard"] :is(.dash-home-caixa, .dashboard-quick-actions) .dashboard-quick-action-btn:not(#love-h-a):focus-visible { outline: none; }
html body[data-page="dashboard"] :is(.dash-home-caixa, .dashboard-quick-actions) .dashboard-quick-action-btn:not(#love-h-a):focus-visible svg { background: #E1E9F0; box-shadow: none; }

/* Listas vazias: ícones no cinza #D4D4D8 (o desenho de Clientes foi
   recolorido) e o primeiro texto na primária, como "Adicione seu primeiro
   cliente": vale para Contratos, Orçamentos e os demais no celular e para
   "Cadastrar novo produto" em Oportunidades e Propostas enviadas. */
html body .vazio-celular .vazio-celular-titulo:not(#love-h-a):not(#love-h-b) { color: #183b54; }
html body :is(#op-sem-produtos, #op-propostas-sem-produtos) .produtos-vazio-criar strong:not(#love-h-a):not(#love-h-b) { color: #183b54; }

/* Home (celular): Saldo disponível e Contratos ativos sempre inteiros, sem
   reticências; o JS diminui a fonte dos dois juntos quando não cabe. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="dashboard"] .dash-saldo-celular-valor:not(#love-h-a):not(#love-h-b) { max-width: none; overflow: visible; text-overflow: clip; }
}

/* Gestão › Minha agenda (celular): data do dia menor e inteira, quebrando em
   duas linhas quando não cabe (antes cortava com "…"). */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .agenda-dia-nav h3#agenda-timeline-date-label:not(#love-h-a):not(#love-h-b) {
    flex: 1 1 auto; min-width: 0; margin-left: 4px; font-size: 14px; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip;
  }
}

/* ==========================================================================
   Ganhos: no modelo do perfil do Upwork, nas cores da Love. Caixa com borda
   fina; empresa no topo, três números e "Ver perfil" com os dados de
   Configurações (lápis em círculo contornado leva para lá).
   ========================================================================== */
html body .ganhos-caixa:not(#love-h-a) { max-width: 760px; background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 10px; }
html body .ganhos-empresa:not(#love-h-a) { display: flex; align-items: center; gap: 16px; padding: 24px; }
html body .ganhos-avatar-wrap:not(#love-h-a) { position: relative; flex-shrink: 0; }
html body .ganhos-avatar:not(#love-h-a) {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: #EAF0F5 center / cover no-repeat; color: #183b54; font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
}
html body .ganhos-lapis:not(#love-h-a):not(#love-h-b) {
  display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  background: #FFFFFF; border: 1.5px solid #183b54; color: #183b54; text-decoration: none; transition: background-color .15s ease;
}
html body .ganhos-lapis:not(#love-h-a):not(#love-h-b):hover { background: #EAF0F5; }
html body .ganhos-lapis svg:not(#love-h-a) { width: 16px; height: 16px; }
html body .ganhos-lapis--avatar:not(#love-h-a):not(#love-h-b) { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; }
html body .ganhos-lapis--avatar svg:not(#love-h-a) { width: 13px; height: 13px; }
html body .ganhos-empresa-textos:not(#love-h-a) { min-width: 0; }
html body .ganhos-nome:not(#love-h-a) { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; color: #18181B; }
html body .ganhos-verificado svg:not(#love-h-a) { display: block; width: 20px; height: 20px; color: #183b54; }
html body .ganhos-local:not(#love-h-a) { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 14px; color: #52525B; }
html body .ganhos-local[hidden]:not(#love-h-a) { display: none; }
html body .ganhos-local svg:not(#love-h-a) { width: 16px; height: 16px; flex-shrink: 0; }
html body .ganhos-plano:not(#love-h-a) { margin: 4px 0 0; font-size: 13px; color: #71717A; }
html body .ganhos-numeros:not(#love-h-a) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 24px; border-top: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; }
html body .ganhos-valor:not(#love-h-a) { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: #18181B; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body .ganhos-rotulo:not(#love-h-a) { margin: 4px 0 0; font-size: 13px; color: #71717A; }
html body .ganhos-perfil:not(#love-h-a) { padding: 24px; }
html body .ganhos-perfil-topo:not(#love-h-a) { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
html body .ganhos-perfil-titulo:not(#love-h-a) { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.025em; color: #18181B; }
html body .ganhos-dados:not(#love-h-a) { margin: 0; }
html body .ganhos-dado:not(#love-h-a) { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid #F4F4F5; }
html body .ganhos-dado:first-child:not(#love-h-a) { border-top: 0; padding-top: 0; }
html body .ganhos-dado dt:not(#love-h-a) { font-size: 13px; color: #71717A; }
html body .ganhos-dado dd:not(#love-h-a) { margin: 0; font-size: 14px; color: #18181B; white-space: pre-line; overflow-wrap: anywhere; }
html body .ganhos-dado dd.is-vazio:not(#love-h-a) { color: #A1A1AA; }
body[data-theme="dark"] .ganhos-caixa { background: #252525 !important; border-color: #404040 !important; }
body[data-theme="dark"] :is(.ganhos-nome, .ganhos-valor, .ganhos-perfil-titulo, .ganhos-dado dd) { color: #FFFFFF !important; }
body[data-theme="dark"] :is(.ganhos-numeros, .ganhos-dado) { border-color: #404040 !important; }
body[data-theme="dark"] .ganhos-lapis { background: transparent !important; border-color: #EBF4FF !important; color: #EBF4FF !important; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .ganhos-caixa:not(#love-h-a) { margin: 0; }
  html body .ganhos-empresa:not(#love-h-a) { padding: 20px 16px; }
  html body .ganhos-avatar:not(#love-h-a) { width: 64px; height: 64px; font-size: 22px; }
  html body .ganhos-numeros:not(#love-h-a) { gap: 8px; padding: 20px 16px; }
  html body .ganhos-valor:not(#love-h-a) { font-size: 18px; }
  html body .ganhos-rotulo:not(#love-h-a) { font-size: 12px; }
  html body .ganhos-perfil:not(#love-h-a) { padding: 20px 16px; }
  html body .ganhos-dado:not(#love-h-a) { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Clientes › Propostas enviadas: "+" no cabeçalho (novo orçamento), só o
   ícone, sem caixa, no mesmo desenho do "+" de Clientes no celular. */
html body #op-propostas-novo:not(#love-h-a):not(#love-h-b) {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; margin-left: auto;
  padding: 0; background: transparent; border: 0; border-radius: 8px; color: #18181B; text-decoration: none; transition: color .15s ease;
}
html body #op-propostas-novo:not(#love-h-a):not(#love-h-b):hover { color: #183b54; }
html body #op-propostas-novo svg:not(#love-h-a) { width: 22px; height: 22px; }
html body #op-propostas-novo[hidden]:not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: none !important; }
body[data-theme="dark"] #op-propostas-novo { color: #FFFFFF !important; }
/* Contratos: a aba Orçamentos saiu (orçamentos agora ficam em Propostas enviadas). */
html body #sales-view-tabs > .category-tab[hidden]:not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: none !important; }

/* Configurações › Contas bancárias ocupa a largura toda, como no Financeiro. */
html body .settings-shell [data-settings-panel="banco"]:not(#love-h-a):not(#love-h-b) { max-width: none; }
html body [data-settings-panel="banco"] #carteira-raiz:not(#love-h-a):not(#love-h-b) { max-width: none; margin: 0; }
/* Financeiro sem a aba Contas bancárias (agora em Configurações). */
html body #payments-view-tabs > .category-tab[hidden]:not(#love-h-a) { display: none !important; }
/* Celular: Financeiro (aberto por Ganhos) sem as abas; Cobranças fica só no
   botão Cobrar da home. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body #payments-view-tabs:not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: none !important; }
  html body .b2b-content > .b2b-header-bar:has(+ #payments-view-tabs):not(#love-h-a):not(#love-h-b):not(#love-h-c) { margin-bottom: 16px !important; }
  html body [data-view-panel="receber"]:not(#love-h-a):not(#love-h-b):not(#love-h-c) { padding-top: 0; }
  /* Sem as abas em cima, a primeira caixa volta a ter a borda de cima e os cantos. */
  html body :is(.fin-resumo, .fin-contas):not(#love-h-a):not(#love-h-b):not(#love-h-c):not(#love-h-d) { border-top: 1px solid var(--borda-suave) !important; border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; }
}
/* Meus ganhos sem o "Esconder valores": o respiro de cima fica igual ao de baixo (28px). */
html body .fin-resumo > .cart-resumo-cols:first-child:not(#love-h-a) { margin-top: 12px; }

/* Configurações no celular: só 3 abas (Informações, Preferências, Contas
   bancárias); as seções juntadas ganham título e o mesmo respiro entre elas. */
html body .settings-so-celular:not(#love-h-a):not(#love-h-b) { display: none; }
html body .settings-contas-conectadas:not(#love-h-a) { display: contents; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .settings-so-celular:not(#love-h-a):not(#love-h-b) { display: block; }
  html body [data-settings-panel]:not([style*="none"]) ~ [data-settings-panel]:not([style*="none"]):not(#love-h-a) { margin-top: 1.5rem; }
}

/* Configurações no celular, mais enxuta:
   - Informações: só nome fantasia, nome, sobrenome e celular, numa caixa só
     (sem as abas empresa/pessoal); os dados da conta digital (razão social,
     CNPJ, tipo, faturamento, endereço, CPF e nascimento) vão para Contas bancárias.
   - Dados da empresa: sem Forma e condições de pagamento (fica no produto).
   - Privacidade: sem Autenticação de dois fatores e Verificação de conta. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body :is(.settings-conta-digital, .settings-so-desktop):not(#love-h-a):not(#love-h-b) { display: none !important; }
  html body .settings-info-abas:not(#love-h-a):not(#love-h-b) { display: none; }
  html body .settings-info-painel[hidden]:not(#love-h-a):not(#love-h-b) { display: flex; }
  html body .settings-info-painel + .settings-info-painel:not(#love-h-a) { margin-top: 1.25rem; }
  html body .settings-shell [data-settings-panel] > .settings-info-abas + .settings-info-caixa:not(#love-h-a):not(#love-h-b) { margin-top: 0 !important; }
}
/* Contas bancárias: o bloco "Endereço e responsável" só aparece no celular
   (no computador esses dados ficam em Configurações › Informações). */
html body .cart-conta-digital:not(#love-h-a) { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .cart-conta-digital:not(#love-h-a):not(#love-h-b) { display: flex; flex-direction: column; gap: 12px; }
  html body .cart-conta-digital .cart-form-grade:not(#love-h-a) { grid-template-columns: minmax(0, 1fr); }
}
/* Seta de voltar ao lado do título (Central de ajuda), só no celular. */
html body .header-voltar-celular:not(#love-h-a) { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .b2b-header-bar:has(> .header-voltar-celular):not(#love-h-a) { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
  html body .header-voltar-celular:not(#love-h-a):not(#love-h-b) { display: inline-flex !important; flex: 0 0 32px !important; align-items: center; justify-content: center; width: 32px !important; height: 32px; margin-left: -6px; color: #18181B; }
  html body .header-voltar-celular svg:not(#love-h-a) { width: 22px; height: 22px; }
  body[data-theme="dark"] .header-voltar-celular { color: #FFFFFF !important; }
}
/* Rótulo trocado só no celular (Nome fantasia → Nome da empresa). */
html body .settings-so-celular-inline:not(#love-h-a) { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .settings-so-celular-inline:not(#love-h-a):not(#love-h-b) { display: inline; }
}

/* Boas-vindas aberta: o aviso do primeiro produto espera ela fechar. */
html body #onboarding-modal.show ~ #first-product-modal.show:not(#love-h-a) { display: none; }
/* Home (celular): a linha do meio um pouco para a direita, dando mais
   espaço ao Saldo disponível. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="dashboard"] .dash-saldo-celular-colunas:not(#love-h-a):not(#love-h-b) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* Configurações (celular):
   - Contas conectadas: "Conectado em…" menor e alinhado, sem passar por cima do nome.
   - URL do site: "https://" à esquerda do campo, campo maior e "Copiar link"
     embaixo, na largura toda, igual ao "Editar meu site". */
html body .settings-url-prefixo:not(#love-h-a) { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .settings-login-linha > .min-w-0:not(#love-h-a) { flex: 1 1 auto; min-width: 0; }
  html body .settings-login-data:not(#love-h-a):not(#love-h-b) { flex-shrink: 0; max-width: 45%; font-size: 11px; line-height: 1.35; white-space: normal; text-align: right; }
  html body .settings-url-base:not(#love-h-a):not(#love-h-b) { display: none; }
  html body .settings-url-linha:not(#love-h-a):not(#love-h-b) { flex-wrap: wrap; gap: 8px 8px; }
  html body .settings-url-prefixo:not(#love-h-a):not(#love-h-b) { display: inline-flex; align-items: center; height: 44px; flex-shrink: 0; font-size: 0.9375rem; color: #3F3F46; }
  html body .settings-url-caixa:not(#love-h-a):not(#love-h-b) { flex: 1 1 0; min-width: 0; }
  html body .settings-url-copiar.btn-primary:not(#love-h-a):not(#love-h-b):not(#love-h-c) {
    flex: 1 0 100%; width: 100%; height: 40px; min-height: 40px; margin-top: 4px; padding: 0 1.1rem; justify-content: center;
    background: #FFFFFF; border: 1px solid #18181B; border-radius: 8px; box-shadow: none; font-size: 0.875rem; font-weight: 600; color: #18181B;
  }
  html body .settings-url-copiar.btn-primary:not(#love-h-a):not(#love-h-b):not(#love-h-c):hover { background: #FFFFFF; border-color: #181D24; color: #181D24; }
  body[data-theme="dark"] .settings-url-copiar.btn-primary { background: #252525 !important; border-color: #FFFFFF !important; color: #FFFFFF !important; }
  body[data-theme="dark"] .settings-url-prefixo { color: #D4D4D8 !important; }
}

/* Configurações (celular): URL do site com o "Editar" no alto, à direita do
   texto, e o campo só com o endereço (mais espaço para o .com.br). */
html body .settings-url-editar-topo:not(#love-h-a):not(#love-h-b) { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body .settings-url-texto:not(#love-h-a):not(#love-h-b) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  html body .settings-url-editar-topo:not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: inline; flex-shrink: 0; }
  html body .settings-url-caixa .settings-url-editar:not(#love-h-a):not(#love-h-b) { display: none; }
}

/* Cabeçalho das páginas (celular): título e botões no meio, com o mesmo
   respiro em cima e embaixo (20px, ajustado na regra do cabeçalho do celular). Em Adicionar/Editar produto o cabeçalho
   preso subia 20px (o top negativo é do computador) e ficava colado no topo. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body.produto-editor-aberto .b2b-header-bar:not(#love-h-a):not(#love-h-b) { top: 0; }
}

/* Adicionar produto: código (SKU), unidade de cobrança e preços no topo da
   etapa 2, com o mesmo respiro das seções de baixo. */
.produto-cobranca-etapa2:not([hidden]) { display: flex; flex-direction: column; margin-bottom: 24px; }
.produto-cobranca-etapa2 #product-sku-linha { margin-bottom: 0 !important; }

/* Meus produtos sem produto: só o cartão de cadastrar, com o título maior. */
html body #products-grid .produtos-vazio-criar strong:not(#love-h-a):not(#love-h-b) { font-size: 20px; line-height: 1.3; letter-spacing: -0.025em; }
html body #products-grid .produtos-vazio-criar-sub:not(#love-h-a):not(#love-h-b) { margin-top: 6px; max-width: 340px; font-size: 14px; line-height: 1.5; text-align: center; }

/* ===== Pop-up modelo do Hub (.love-pop) =====
   Arte no topo (faixa azul clara com formas, ícone redondo e uma etiqueta
   do assunto), título grande, texto e o botão. Usado em "Adicione seus
   serviços" (Home) e "Finalize seu cadastro" (Meus produtos). */
html body .modal-card.love-pop:not(#love-h-a) { position: relative; width: 100%; max-width: 440px; padding: 24px 24px 28px; border-radius: 10px; text-align: center; }
html body .love-pop-fechar:not(#love-h-a) { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #71717A; cursor: pointer; }
html body .love-pop-fechar:hover:not(#love-h-a) { color: #181D24; }
html body .love-pop-fechar svg:not(#love-h-a) { width: 20px; height: 20px; }
html body .love-pop-arte:not(#love-h-a) { position: relative; overflow: hidden; height: 144px; margin-bottom: 24px; border-radius: 8px; background: #E9EFF4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
html body .love-pop-forma:not(#love-h-a) { position: absolute; display: block; height: 46px; border-radius: 10px; background: #DCE5EC; }
html body .love-pop-forma--1:not(#love-h-a) { top: -18px; left: -12px; width: 150px; }
html body .love-pop-forma--2:not(#love-h-a) { top: 4px; right: -16px; width: 140px; }
html body .love-pop-forma--3:not(#love-h-a) { bottom: -20px; left: -10px; width: 170px; }
html body .love-pop-forma--4:not(#love-h-a) { bottom: -14px; right: -14px; width: 92px; }
html body .love-pop-icone:not(#love-h-a) { position: relative; z-index: 1; width: 36px; height: 36px; margin-bottom: -6px; border-radius: 999px; background: #D3DEE7; color: #183b54; display: inline-flex; align-items: center; justify-content: center; }
html body .love-pop-icone svg:not(#love-h-a) { width: 20px; height: 20px; }
html body .love-pop-etiqueta:not(#love-h-a) { position: relative; z-index: 1; max-width: calc(100% - 32px); display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #FFFFFF; }
html body .love-pop-etiqueta-foto:not(#love-h-a) { flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; overflow: hidden; background: #183b54; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font: 600 14px Inter, sans-serif; }
html body .love-pop-etiqueta-foto img:not(#love-h-a) { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .love-pop-etiqueta-foto--icone:not(#love-h-a) { background: #F4F6F7; color: #183b54; }
html body .love-pop-etiqueta-foto--icone svg:not(#love-h-a) { width: 18px; height: 18px; }
html body .love-pop-etiqueta-nome:not(#love-h-a) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px Inter, sans-serif; color: #18181B; }
html body .love-pop-etiqueta-selo:not(#love-h-a) { flex-shrink: 0; padding: 2px 8px; border-radius: 6px; background: #E3EDF5; color: #183b54; font: 500 11px Inter, sans-serif; }
html body .love-pop-etiqueta-selo--pendente:not(#love-h-a) { background: #FEF3C7; color: #92400E; }
html body .love-pop-titulo:not(#love-h-a) { margin: 0; font-family: Inter, sans-serif; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; color: #18181B; }
html body .love-pop-texto:not(#love-h-a) { margin: 10px auto 0; max-width: 340px; font-size: 15px; line-height: 1.55; color: #71717A; }
html body .love-pop-botao:not(#love-h-a) { width: 100%; height: 44px; margin-top: 24px; justify-content: center; border-radius: 8px; }
html body .love-pop-depois:not(#love-h-a) { margin-top: 12px; padding: 4px 8px; border: 0; background: none; font: 500 14px Inter, sans-serif; color: #71717A; cursor: pointer; }
html body .love-pop-depois:hover:not(#love-h-a) { color: #181D24; }
body[data-theme="dark"] .love-pop-arte { background: #252525 !important; }
body[data-theme="dark"] .love-pop-forma { background: #2E2E2E !important; }
body[data-theme="dark"] .love-pop-icone { background: #333333 !important; color: #FFFFFF !important; }
body[data-theme="dark"] .love-pop-etiqueta { background: #1F1F1F !important; }
body[data-theme="dark"] .love-pop-etiqueta-nome, body[data-theme="dark"] .love-pop-titulo { color: #FFFFFF !important; }
body[data-theme="dark"] .love-pop-texto, body[data-theme="dark"] .love-pop-depois { color: #A1A1AA !important; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  /* No celular os outros pop-ups viram tela inteira; este fica como caixa branca no meio. */
  html body .modal-backdrop:has(> .love-pop):not(#love-h-a):not(#love-h-b) { padding: 16px; align-items: center; justify-content: center; }
  html body .modal-backdrop > .modal-card.love-pop:not(#love-h-a):not(#love-h-b):not(#love-h-c):not(#love-h-d) {
    position: relative !important; inset: auto !important; z-index: auto !important; height: auto !important; min-height: 0 !important;
    width: 100% !important; max-width: 440px !important; max-height: calc(100dvh - 32px) !important; margin: 0 !important;
    padding: 20px 20px 24px !important; border-radius: 10px !important; background: #FFFFFF !important; border: 1px solid var(--borda-suave, #E4E4E7) !important;
  }
  body[data-theme="dark"] .modal-backdrop > .modal-card.love-pop { background: #1F1F1F !important; }
  html body .love-pop-arte:not(#love-h-a):not(#love-h-b) { height: 128px; margin-bottom: 20px; }
  html body .love-pop-titulo:not(#love-h-a):not(#love-h-b) { font-size: 22px; }
  html body .love-pop-texto:not(#love-h-a):not(#love-h-b) { font-size: 14px; }
}

/* Editar meu site (celular): o construtor não abre; fica só o aviso para
   editar pelo computador. Formulários continua funcionando. */
html body .construtor-celular-aviso:not(#love-h-a) { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  html body[data-page="paginas-site"] [data-tab-panel="editar"] :is(.builder-wrap, .builder-narrow-notice):not(#love-h-a):not(#love-h-b):not(#love-h-c) { display: none !important; }
  html body .construtor-celular-aviso:not(#love-h-a):not(#love-h-b) {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 40px 24px; background: #FFFFFF; border: 1px solid var(--borda-suave, #E4E4E7); border-radius: 10px;
  }
  html body .construtor-celular-aviso-icone:not(#love-h-a) { width: 56px; height: 56px; margin-bottom: 16px; border-radius: 999px; background: #E9EFF4; color: #183b54; display: inline-flex; align-items: center; justify-content: center; }
  html body .construtor-celular-aviso-icone svg:not(#love-h-a) { width: 28px; height: 28px; }
  html body .construtor-celular-aviso-titulo:not(#love-h-a) { margin: 0; font-family: Inter, sans-serif; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.025em; color: #18181B; }
  html body .construtor-celular-aviso-texto:not(#love-h-a) { margin: 8px 0 0; max-width: 300px; font-size: 14px; line-height: 1.55; color: #71717A; }
  body[data-theme="dark"] .construtor-celular-aviso { background: #1F1F1F !important; border-color: #333333 !important; }
  body[data-theme="dark"] .construtor-celular-aviso-icone { background: #333333 !important; color: #FFFFFF !important; }
  body[data-theme="dark"] .construtor-celular-aviso-titulo { color: #FFFFFF !important; }
}

/* Pop-up modelo, arte "ficha" (Complete seu cadastro): mais sóbria, uma
   ficha branca com a empresa e dois campos, o segundo ainda vazio. */
html body .love-pop-arte--ficha:not(#love-h-a):not(#love-h-b):not(#love-h-c) { height: auto; padding: 20px 0; background: #EEF2F5; }
html body .love-pop-ficha:not(#love-h-a) { width: 220px; max-width: calc(100% - 48px); padding: 14px 16px 16px; background: #FFFFFF; border: 1px solid #DCE3E9; border-radius: 8px; text-align: left; }
html body .love-pop-ficha-topo:not(#love-h-a) { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #EEF1F3; }
html body .love-pop-ficha-topo .love-pop-etiqueta-foto:not(#love-h-a) { width: 28px; height: 28px; font-size: 12px; }
html body .love-pop-ficha-nome:not(#love-h-a) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px Inter, sans-serif; color: #18181B; }
html body .love-pop-ficha-campo:not(#love-h-a) { display: block; }
html body .love-pop-ficha-campo + .love-pop-ficha-campo:not(#love-h-a) { margin-top: 10px; }
html body .love-pop-ficha-rotulo:not(#love-h-a) { display: block; width: 56px; height: 6px; margin-bottom: 6px; border-radius: 3px; background: #D4DCE3; }
html body .love-pop-ficha-linha:not(#love-h-a) { display: block; height: 22px; border-radius: 6px; border: 1px dashed #C5D0D9; background: #FFFFFF; }
html body .love-pop-ficha-linha.is-feita:not(#love-h-a) { border-style: solid; border-color: #DCE3E9; background: #F6F8FA; }
body[data-theme="dark"] .love-pop-arte--ficha { background: #252525 !important; }
body[data-theme="dark"] .love-pop-ficha { background: #1F1F1F !important; border-color: #404040 !important; }
body[data-theme="dark"] .love-pop-ficha-topo { border-bottom-color: #333333 !important; }
body[data-theme="dark"] .love-pop-ficha-nome { color: #FFFFFF !important; }
body[data-theme="dark"] .love-pop-ficha-rotulo { background: #404040 !important; }
body[data-theme="dark"] .love-pop-ficha-linha { background: #1F1F1F !important; border-color: #4A4A4A !important; }
body[data-theme="dark"] .love-pop-ficha-linha.is-feita { background: #2A2A2A !important; }