/* Local variable fonts: cold-start safe, no Google Fonts request. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/jetbrains-mono-latin-ext.9c38cb2d0d2d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/jetbrains-mono-latin.2c32b9b3ee35.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/manrope-latin-ext.ce093b341d9c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/manrope-latin.e310b55a7fd9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* source-style-block:1:ac15e424a2c53dfd363aa82135ec8a1b01ea3aa659e165db9d6d492cc7dd2479 */

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-solid: #111111;
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.65);
  --text-dim: rgba(255,255,255,0.45);
  --text-muted: rgba(255,255,255,0.3);
  --border-color: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.15);
  --sidebar-bg: rgba(8,8,8,0.85);
  --sidebar-border: rgba(255,255,255,0.05);
  --input-bg: rgba(0,0,0,0.3);
  --modal-bg: #111111;
  --table-hover: rgba(255,255,255,0.025);
  --scrollbar-bg: #0a0a0a;
  --scrollbar-thumb: rgba(255,255,255,0.12);
  --card-radius: 20px;
  --card-radius-lg: 24px;
  --transition-default: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="light"] {
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-solid: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: rgba(0,0,0,0.65);
  --text-dim: rgba(0,0,0,0.5);
  --text-muted: rgba(0,0,0,0.35);
  --border-color: rgba(0,0,0,0.06);
  --border-hover: rgba(0,0,0,0.15);
  --sidebar-bg: rgba(15,15,25,0.97);
  --sidebar-border: rgba(255,255,255,0.06);
  --input-bg: rgba(0,0,0,0.04);
  --modal-bg: #ffffff;
  --table-hover: rgba(0,0,0,0.02);
  --scrollbar-bg: #f0f0f0;
  --scrollbar-thumb: rgba(0,0,0,0.18);
}
[data-theme="light"] .stat-number { background:none; color:var(--text); -webkit-background-clip:border-box; -webkit-text-fill-color:currentColor; background-clip:border-box; }
[data-theme="light"] .badge-active { background: rgba(34,197,94,0.1); color: #15803d; }
[data-theme="light"] .badge-inactive, [data-theme="light"] .badge-error { background: rgba(239,68,68,0.08); color: #dc2626; }
[data-theme="light"] .funnel-bar { opacity: 0.8; }
[data-theme="light"] table th { color: rgba(0,0,0,0.5) !important; border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] table td { color: rgba(0,0,0,0.7) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .nav-item { color: rgba(255,255,255,0.7); }
[data-theme="light"] .nav-item.active { color: #22d3ee; background: rgba(34,211,238,0.1); }
[data-theme="light"] header { background: rgba(255,255,255,0.92) !important; backdrop-filter:none; border-color: rgba(0,0,0,0.05) !important; }
[data-theme="light"] header span, [data-theme="light"] header select { color: #333 !important; }
[data-theme="light"] select { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.15) !important; color: #333 !important; }
[data-theme="light"] .wa-link { color: #0e7490 !important; }
/* ════════════════════════════════════════════════════════════════════════
   CTX-SWITCHER 2026-06-11 — Seletor de nível/conta no topo do menu (estilo GHL).
   UMA tela só: o seletor troca o contexto e o MENU + CONTEÚDO mudam junto.
   Gating do menu por body[data-ctx]: owner / agency / operating.
   Sólido/opaco — sem glassmorphism. Ancorado nos tokens globais.
   ════════════════════════════════════════════════════════════════════════ */
#ctx-switcher{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  margin:4px 12px 10px; padding:11px 13px; border-radius:12px;
  background:var(--bg-card-solid,#101728); border:1px solid var(--border-color,#243a5e);
  color:var(--text-primary,#e7ecf5); font-size:13.5px; font-weight:600;
  transition:border-color .18s ease, background .18s ease; user-select:none;
}
#ctx-switcher:hover{ border-color:var(--accent,#22e0d6); }
#ctx-switcher .ctx-sw-ico{ font-size:15px; line-height:1; flex:0 0 auto; }
#ctx-switcher .ctx-sw-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ctx-switcher .ctx-sw-caret{ opacity:.55; font-size:12px; flex:0 0 auto; }
/* No menu colapsado, mostra só o ícone */
.sidebar.collapsed #ctx-switcher{ justify-content:center; padding:11px 0; margin:4px 8px 10px; }
.sidebar.collapsed #ctx-switcher .ctx-sw-name,
.sidebar.collapsed #ctx-switcher .ctx-sw-caret{ display:none; }

#ctx-menu{
  display:none; position:absolute; left:12px; right:12px; top:118px; z-index:1400;
  background:var(--bg-card-solid,#101728); border:1px solid var(--border-hover,#2c477a);
  border-radius:14px; padding:8px; box-shadow:0 1px 3px rgba(0,0,0,.18);
  max-height:60vh; overflow:hidden; flex-direction:column;
}
#ctx-menu.open{ display:flex; }
.ctx-menu-search{ padding:4px 4px 8px; }
.ctx-menu-search input{
  width:100%; padding:9px 12px; border-radius:10px; box-sizing:border-box;
  background:var(--bg,#0d1526); border:1px solid var(--border-color,#243a5e);
  color:var(--text-primary,#e7ecf5); font-size:13px; outline:none;
}
.ctx-menu-search input:focus{ border-color:var(--accent,#22e0d6); }
#ctx-menu-body{ overflow-y:auto; max-height:calc(60vh - 56px); }
.ctx-sec-title{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-dim,#7e93b3); padding:9px 10px 5px; font-weight:700; }
.ctx-opt{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px;
  cursor:pointer; font-size:13.5px; color:var(--text-primary,#e7ecf5); transition:background .14s ease; }
.ctx-opt:hover{ background:var(--bg-card,#16203a); }
.ctx-opt.active{ background:var(--accent-glow,rgba(34,224,214,0.15)); }
.ctx-opt .ctx-opt-ico{ flex:0 0 auto; font-size:14px; width:18px; text-align:center; }
.ctx-opt .ctx-opt-txt{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctx-opt .ctx-opt-txt small{ display:block; color:var(--text-dim,#7e93b3); font-size:10.5px; }
.ctx-opt .ctx-opt-chev{ opacity:.5; font-size:12px; flex:0 0 auto; }
.ctx-opt .ctx-opt-check{ color:var(--accent,#22e0d6); flex:0 0 auto; }
.ctx-back{ display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:4px;
  border-radius:9px; cursor:pointer; font-size:12.5px; color:var(--text-dim,#9fb3d1);
  border-bottom:1px solid var(--border-color,#243a5e); }
.ctx-back:hover{ color:var(--text-primary,#e7ecf5); }
.ctx-menu-empty{ padding:16px 12px; font-size:12.5px; color:var(--text-dim,#7e93b3); text-align:center; }

/* ── Gating do MENU por nível (body[data-ctx]) ──────────────────────────────
   Os nav-item operacionais NÃO têm data-lvl (= operating). Owner/agency têm. */
.nav-item[data-lvl="owner"], .nav-item[data-lvl="agency"]{ display:none; }
body[data-ctx="owner"]    .nav-item[data-lvl="owner"]{ display:flex; }
body[data-ctx="agency"]   .nav-item[data-lvl="agency"]{ display:flex; }
/* No nível owner/agency, some os operacionais (sem data-lvl). */
body[data-ctx="owner"]  .sidebar-nav .nav-item:not([data-lvl]),
body[data-ctx="agency"] .sidebar-nav .nav-item:not([data-lvl]){ display:none; }
/* No nível operating, some owner+agency (já ocultos acima) e mostra os operacionais. */
body[data-ctx="operating"] .nav-item[data-lvl="owner"],
body[data-ctx="operating"] .nav-item[data-lvl="agency"]{ display:none; }
/* Ícones de destaque dos níveis */
.sidebar-nav .nav-item[data-page="cdkey"] .nav-icon{ color:#fdba74 !important; }
.sidebar-nav .nav-item[data-page="own-equipe"] .nav-icon{ color:#c4b5fd !important; }
.sidebar-nav .nav-item[data-page="own-faturamento"] .nav-icon,
.sidebar-nav .nav-item[data-page="agc-faturamento"] .nav-icon{ color:#34d399 !important; }

/* Páginas dos níveis (cards de agência/subconta) — sólido/opaco. */
.ctxp-wrap{ max-width:1100px; margin:0 auto; padding:8px; }
.ctxp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:6px 0 18px; }
.ctxp-head h1{ font-size:26px; margin:0 0 4px; }
.ctxp-head p{ color:var(--text-muted,#9fb3d1); margin:0; font-size:14px; max-width:560px; }
.ctxp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.ctxp-empty{ grid-column:1/-1; padding:30px; color:var(--text-dim,#9fb3d1); }
.ctxp-card{ position:relative; background:var(--bg-card-solid,#101728);
  border:1px solid var(--border-color,#243a5e); border-radius:16px; padding:18px 20px; }
.ctxp-card h3{ font-size:17px; margin:0 6px 4px 0; }
.ctxp-card .ctxp-slug{ font-size:12.5px; color:var(--text-dim,#7e93b3); margin-bottom:10px; }
.ctxp-card .ctxp-meta{ font-size:13px; color:var(--text-muted,#9fb3d1); line-height:1.6; margin-bottom:12px; }
.ctxp-card .ctxp-meta b{ color:var(--text-primary,#e7ecf5); }
.ctxp-stats{ display:flex; gap:18px; margin:0 0 14px; }
.ctxp-stat b{ display:block; font-size:18px; color:var(--text-primary,#e7ecf5); }
.ctxp-stat span{ font-size:11px; color:var(--text-dim,#7e93b3); text-transform:uppercase; letter-spacing:.4px; }
.ctxp-card-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.ctxp-pill{ position:absolute; top:14px; right:14px; padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:600; }
.ctxp-pill.on{ background:rgba(16,185,129,.15); color:#34d399; }
.ctxp-pill.off{ background:rgba(148,163,184,.15); color:#94a3b8; }
.ctxp-btn{ padding:8px 14px; border:1px solid var(--border-color,#243a5e); border-radius:9px;
  background:transparent; color:var(--text-primary,#e7ecf5); font-weight:600; cursor:pointer; font-size:13px; }
.ctxp-btn:hover{ border-color:var(--accent,#22e0d6); }
.ctxp-btn.primary{ background:var(--accent,#22e0d6); border-color:var(--accent,#22e0d6); color:#06121a; }
.ctxp-card-new{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; border-style:dashed; color:var(--text-dim,#9fb3d1); cursor:pointer; min-height:140px; }
.ctxp-card-new:hover{ border-color:var(--accent,#22e0d6); color:var(--text-primary,#e7ecf5); }
.ctxp-card-new .plus{ font-size:30px; line-height:1; }

/* Página owner · Contas: rota normal, superfícies sólidas e agrupamento por agência. */
.owner-accounts-wrap{ max-width:1100px; margin:0 auto; padding:8px; }
.owner-accounts-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin:6px 0 18px; }
.owner-accounts-head h1{ font-size:26px; margin:0 0 4px; }
.owner-accounts-head p{ color:var(--text-muted,#9fb3d1); margin:0; font-size:14px; }
.owner-accounts-root{ display:grid; gap:16px; }
.owner-accounts-state{ padding:30px; border:1px solid var(--border-color,#243a5e);
  border-radius:14px; background:var(--bg-card-solid,#101728); color:var(--text-dim,#9fb3d1); }
.owner-accounts-state.error{ color:var(--bad,#ff5d6c); }
.owner-account-agency{ overflow:hidden; border:1px solid var(--border-color,#243a5e);
  border-radius:14px; background:var(--bg-card-solid,#101728); }
.owner-account-agency-head{ padding:16px 18px; border-bottom:1px solid var(--border-color,#243a5e);
  background:var(--panel-2,var(--bg-card-solid,#101728)); }
.owner-account-agency-head h2{ font-size:16px; margin:0 0 3px; }
.owner-account-agency-head span{ color:var(--text-dim,#7e93b3); font-size:12px; }
.owner-account-list{ display:grid; }
.owner-account-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center;
  gap:16px; min-height:68px; padding:12px 18px; border-bottom:1px solid var(--border-color,#243a5e); }
.owner-account-row:last-child{ border-bottom:0; }
.owner-account-main{ min-width:0; display:grid; gap:3px; }
.owner-account-main strong{ overflow:hidden; color:var(--text-primary,#e7ecf5); font-size:14px;
  font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.owner-account-main span{ overflow:hidden; color:var(--text-dim,#7e93b3); font-size:12px;
  text-overflow:ellipsis; white-space:nowrap; }
.owner-account-status{ padding:4px 9px; border-radius:999px; font-size:11px; font-weight:600; }
.owner-account-status.active{ background:var(--raised,#182232); border:1px solid #2e8b68; color:#34d399; }
.owner-account-status.inactive{ background:var(--raised,#182232); border:1px solid var(--border-color,#243a5e); color:#94a3b8; }
.owner-account-enter{ min-width:78px; }
.owner-account-empty{ padding:20px 18px; color:var(--text-dim,#7e93b3); font-size:13px; }
@media (max-width:640px){
  .owner-accounts-wrap{ padding:4px; }
  .owner-account-row{ grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:14px; }
  .owner-account-enter{ grid-column:1/-1; width:100%; min-height:40px; }
}

/* Modal genérico sólido do seletor (criar agência etc.) */
.ctx-modal-ov{ display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(4,8,16,0.72); align-items:center; justify-content:center; padding:20px; }
.ctx-modal-ov.open{ display:flex; }
.ctx-modal-box{ width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  background:var(--bg-card-solid,#101728); border:1px solid var(--border-hover,#2c477a);
  border-radius:18px; padding:22px; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.ctx-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ctx-modal-head h2{ font-size:19px; margin:0; }
.ctx-modal-x{ background:transparent; border:0; color:var(--text-dim,#9fb3d1); font-size:24px; cursor:pointer; line-height:1; }
.ctx-modal-foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.ctxm-lbl{ display:block; font-size:13px; color:var(--text-muted,#9fb3d1); margin:12px 0 5px; }
.ctxm-inp{ width:100%; box-sizing:border-box; padding:11px 13px; border-radius:9px;
  border:1px solid var(--border-color,#243a5e); background:var(--bg,#0d1526); color:var(--text-primary,#e7ecf5); }
.ctxm-row{ display:flex; gap:10px; } .ctxm-row > div{ flex:1; }
.ctxm-free{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:14px; color:var(--text-muted,#9fb3d1); }
.ctxm-sec{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent,#22e0d6); margin:18px 0 4px; padding-bottom:6px;
  border-bottom:1px solid var(--border-color,#243a5e); }
.ctxm-sec:first-child{ margin-top:2px; }
.ctxm-hint{ font-size:12px; color:var(--text-dim,#7e90ad); margin-top:6px; line-height:1.4; }
.ctxm-warn{ font-size:13px; color:#ffcf66; background:rgba(255,207,102,0.08);
  border:1px solid rgba(255,207,102,0.3); border-radius:9px; padding:10px 12px; margin-bottom:6px; }

/* ════════════════════════════════════════════════════════════════════════
   MANUAL 2026-06-11 — estilos do menu "Manual" (owner-only).
   Visual premium ancorado nos design tokens globais (:root): var(--accent),
   var(--bg-card), var(--text-primary), etc. Mobile-friendly.
   ════════════════════════════════════════════════════════════════════════ */

/* Gating do item de menu: oculto por padrão, só aparece pro dono (body[data-owner="1"]).
   Defense-in-depth no CSS — o navigate() também bloqueia. */
.nav-item[data-page="manual"]{ display:none; }
body[data-owner="1"] .nav-item[data-page="manual"]{ display:flex; }
.sidebar-nav .nav-item[data-page="manual"] .nav-icon{ color:#c4b5fd !important; } /* lavanda */

/* BILLING 2026-06-11: gating do menu Faturamento. Por padrão oculto; aparece pro dono
   (body[data-owner="1"]) ou pra quem é agency_admin (body[data-billing-agency="1"]).
   Defense-in-depth: o navigate() também valida. */
.nav-item[data-page="faturamento"]{ display:none; }
/* ACCESS-FINAL 2026-06-11: gating de papel (cosmético; o back valida de verdade).
   data-agency-admin = owner OU dono de agência (vê Faturamento/Contas/Asaas).
   data-account-admin = dono da subconta (vê só "Minha conta" p/ cadastrar funcionários).
   Por padrão TUDO oculto; aparece só pro papel certo. Isso fecha o vazamento do
   form Asaas / menu Faturamento pro account_user (ex.: Rafael). */
.nav-item[data-page="minha-conta"]{ display:none; }
body[data-ctx="operating"][data-context-account-admin="1"] .nav-item[data-page="minha-conta"]{ display:flex; }
.sidebar-nav .nav-item[data-page="minha-conta"] .nav-icon{ color:#fbbf24 !important; }
/* Form/conexão Asaas dentro do Faturamento: só owner OU agency_admin. */
.bill-asaas-only{ display:none; }
body[data-owner="1"] .bill-asaas-only,
body[data-agency-admin="1"] .bill-asaas-only{ display:block; }
/* Bloco "Criar agência" (Contas) é só do dono. */
body:not([data-owner="1"]) .hier-owner-only{ display:none !important; }
.hier-limit{ margin-top:10px; font-size:13px; color:var(--text-muted,#9fb3d1); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hier-limit input{ padding:6px 8px; border-radius:8px; border:1px solid var(--border,#2c477a); background:var(--bg,#0d1526); color:var(--text,#e7ecf5); }
/* Form de criar agência no overlay de Contas. */
.hier-newag-form{ max-width:520px; margin:0 auto; }
.hier-newag-form label{ display:block; font-size:13px; color:var(--text-muted,#9fb3d1); margin:12px 0 5px; }
.hier-newag-form input{ width:100%; padding:11px 13px; border-radius:9px; border:1px solid var(--border,#2c477a); background:var(--bg,#0d1526); color:var(--text,#e7ecf5); }
.hier-newag-form .row{ display:flex; gap:10px; }
.hier-newag-form .row > div{ flex:1; }
.hier-free-toggle{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.sidebar-nav .nav-item[data-page="faturamento"] .nav-icon{ color:#34d399 !important; }
.bill-wrap{ max-width:1100px; margin:0 auto; padding:8px; }
.bill-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:16px 0; }
.bill-stat{ background:var(--bg-card,#121a2e); border:1px solid var(--border,#243a5e); border-radius:14px; padding:18px; }
.bill-stat .lbl{ font-size:12px; color:var(--text-muted,#9fb3d1); text-transform:uppercase; letter-spacing:.4px; }
.bill-stat .val{ font-size:24px; font-weight:700; margin-top:6px; }
.bill-card{ background:var(--bg-card,#121a2e); border:1px solid var(--border,#243a5e); border-radius:14px; padding:20px; margin:16px 0; }
.bill-table{ width:100%; border-collapse:collapse; font-size:14px; }
.bill-table th,.bill-table td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--border,#243a5e); }
.bill-badge{ padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.bill-badge.ok{ background:rgba(16,185,129,.15); color:#34d399; }
.bill-badge.warn{ background:rgba(245,158,11,.15); color:#fbbf24; }
.bill-badge.danger{ background:rgba(239,68,68,.15); color:#f87171; }
.bill-badge.muted{ background:rgba(148,163,184,.15); color:#94a3b8; }
.bill-btn{ padding:11px 18px; border:0; border-radius:10px; background:#3b82f6; color:#fff; font-weight:600; cursor:pointer; }
.bill-btn.green{ background:#10b981; }
.bill-link{ color:#60a5fa; word-break:break-all; }
.bill-form label{ display:block; font-size:13px; color:var(--text-muted,#9fb3d1); margin:12px 0 5px; }
.bill-form input{ width:100%; padding:11px 13px; border-radius:9px; border:1px solid var(--border,#2c477a); background:var(--bg,#0d1526); color:var(--text,#e7ecf5); }

/* Shell do manual */
#page-manual{ padding:0; }
.man-wrap{ max-width:1080px; margin:0 auto; padding:28px 22px 80px; }
.man-hero{
  position:relative; overflow:hidden; border-radius:var(--card-radius-lg,24px);
  padding:38px 34px; margin-bottom:26px;
  background:var(--panel-2, #111824);
  border:1px solid var(--border-color);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.man-hero h1{ font-size:34px; line-height:1.05; margin:0 0 10px; letter-spacing:-0.03em;
  background:none; color:var(--text-primary); -webkit-background-clip:border-box;
  -webkit-text-fill-color:currentColor; background-clip:border-box; }
.man-hero p{ color:var(--text-secondary); font-size:15.5px; line-height:1.6; max-width:680px; margin:0; }
.man-hero .man-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;
  padding:5px 12px; border:1px solid var(--accent-glow,rgba(34,224,214,0.3)); border-radius:999px;
  background:rgba(255,255,255,0.02); }

/* Índice (TOC) — fica no topo, vira sticky lateral no desktop largo */
.man-toc{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px;
  margin-bottom:30px;
}
.man-toc a{
  display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:14px;
  background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-secondary);
  text-decoration:none; font-size:13.5px; font-weight:600; transition:var(--transition-default);
}
.man-toc a:hover{ border-color:var(--accent); color:var(--text-primary);
  transform:translateY(-2px); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.man-toc a .man-toc-num{ flex:0 0 26px; width:26px; height:26px; display:flex; align-items:center;
  justify-content:center; border-radius:8px; font-size:12px; font-weight:800; color:var(--accent);
  background:var(--accent-glow,rgba(34,224,214,0.14)); }

/* Seções */
.man-sec{ scroll-margin-top:90px; margin-bottom:40px; }
.man-sec-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.man-sec-head .man-sec-badge{ flex:0 0 auto; width:42px; height:42px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  background:var(--accent-glow,rgba(34,224,214,0.14)); border:1px solid var(--border-color); }
.man-sec-head h2{ font-size:23px; letter-spacing:-0.02em; margin:0; }
.man-sec-head .man-sec-sub{ font-size:13px; color:var(--text-dim); margin-top:2px; }
.man-sec p{ color:var(--text-secondary); font-size:15px; line-height:1.72; margin:0 0 14px; }
.man-sec p b, .man-sec li b{ color:var(--text-primary); font-weight:700; }
.man-sec ul{ margin:0 0 16px; padding-left:0; list-style:none; }
.man-sec ul li{ position:relative; padding:6px 0 6px 26px; color:var(--text-secondary);
  font-size:14.5px; line-height:1.6; }
.man-sec ul li::before{ content:''; position:absolute; left:6px; top:13px; width:7px; height:7px;
  border-radius:50%; background:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.18); }

/* Cards / grid de menus */
.man-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:18px;
  padding:20px 22px; margin-bottom:14px; transition:var(--transition-default); }
.man-card:hover{ border-color:var(--border-hover); }
.man-card h3{ font-size:16px; margin:0 0 6px; display:flex; align-items:center; gap:9px; }
.man-card h3 .man-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.man-card p{ font-size:14px; margin:0 0 6px; }
.man-card .man-howto{ font-size:13px; color:var(--text-dim); margin:8px 0 0; padding-top:9px;
  border-top:1px dashed var(--border-color); }
.man-card .man-howto b{ color:var(--accent); }

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

/* Callouts */
.man-callout{ display:flex; gap:13px; padding:15px 17px; border-radius:14px; margin:6px 0 18px;
  border:1px solid var(--border-color); background:var(--bg-card); font-size:14px; line-height:1.6;
  color:var(--text-secondary); }
.man-callout .man-co-ico{ flex:0 0 auto; font-size:18px; line-height:1.4; }
.man-callout.tip{ border-left:3px solid #34e89e; }
.man-callout.warn{ border-left:3px solid #f5b544; }
.man-callout.deep{ border-left:3px solid #c4b5fd; background:rgba(196,181,253,0.05); }
.man-callout b{ color:var(--text-primary); }

/* Infográficos */
.man-figure{ margin:18px 0 8px; border-radius:18px; overflow:hidden; border:1px solid var(--border-color);
  background:var(--bg-card); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.man-figure img{ display:block; width:100%; height:auto; cursor:zoom-in; transition:transform .35s ease; }
.man-figure img:hover{ transform:scale(1.012); }
.man-figure figcaption{ padding:11px 16px; font-size:12.5px; color:var(--text-dim);
  border-top:1px solid var(--border-color); display:flex; align-items:center; gap:8px; }
.man-figure figcaption::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }
/* degradação graciosa: se a imagem quebrar, esconde a figura inteira (JS onerror) */
.man-figure.man-fig-broken{ display:none; }

/* Steps numerados (automações na prática) */
.man-steps{ counter-reset:manstep; display:grid; gap:12px; margin:6px 0 16px; }
.man-step{ position:relative; padding:15px 18px 15px 56px; border-radius:14px;
  background:var(--bg-card); border:1px solid var(--border-color); }
.man-step::before{ counter-increment:manstep; content:counter(manstep); position:absolute; left:15px; top:15px;
  width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#fff;
  background:var(--panel-2, #111824); }
.man-step h4{ font-size:14.5px; margin:0 0 4px; }
.man-step p{ font-size:13.5px; margin:0; }

/* FAQ */
.man-faq details{ border:1px solid var(--border-color); border-radius:14px; background:var(--bg-card);
  margin-bottom:10px; overflow:hidden; }
.man-faq summary{ cursor:pointer; padding:15px 18px; font-weight:700; font-size:14.5px;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  color:var(--text-primary); }
.man-faq summary::-webkit-details-marker{ display:none; }
.man-faq summary::after{ content:'+'; font-size:20px; color:var(--accent); transition:transform .2s ease; }
.man-faq details[open] summary::after{ transform:rotate(45deg); }
.man-faq details p{ padding:0 18px 16px; margin:0; font-size:14px; color:var(--text-secondary); line-height:1.65; }

/* Lightbox simples pro zoom dos infográficos */
.man-lightbox{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.88);
  display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.man-lightbox.open{ display:flex; }
.man-lightbox img{ max-width:96vw; max-height:92vh; border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.18); }

@media (max-width:640px){
  .man-wrap{ padding:18px 14px 64px; }
  .man-hero{ padding:26px 20px; }
  .man-hero h1{ font-size:27px; }
  .man-sec-head h2{ font-size:20px; }
}

/* ════════════════════════════════════════════════════════════════════════
   HIER-W3 2026-06-11 — Navegação da hierarquia (owner-only): selo de contexto
   no topo + overlay de Agências/Subcontas + modal de usuários da subconta.
   Ancorado nos design tokens globais (:root). Mobile-friendly.
   ════════════════════════════════════════════════════════════════════════ */

/* Item de menu "Contas": oculto por padrão, só aparece pro dono (data-owner). */
.nav-item[data-page="contas"]{ display:none; }
body[data-owner="1"][data-ctx="owner"] .nav-item[data-lvl="owner"][data-page="contas"]{ display:flex; }
.sidebar-nav .nav-item[data-page="contas"] .nav-icon{ color:#7dd3fc !important; }

/* Selo de contexto (📍 Subconta ⌄) — flutua no topo do painel, só p/ dono COM conta ativa. */
/* CTX-SWITCHER 2026-06-11: substituído pelo seletor novo no topo do menu. Neutralizado. */
#hierCtxBadge{ display:none !important; }
body[data-owner="1"] #hierCtxBadge.has-active{
  display:inline-flex; align-items:center; gap:8px;
  position:fixed; top:14px; right:20px; z-index:1200;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  background:var(--bg-card-solid, #111); border:1px solid var(--border-hover, rgba(255,255,255,0.15));
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  font-size:13px; font-weight:600; color:var(--text-primary, #fff);
  transition:var(--transition-default, .25s ease);
}
#hierCtxBadge.has-active:hover{ border-color:var(--accent, #22e0d6); }
#hierCtxBadge .hc-pin{ font-size:13px; }
#hierCtxBadge .hc-name{ max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#hierCtxBadge .hc-caret{ opacity:.6; font-size:11px; }
@media (max-width:640px){
  body[data-owner="1"] #hierCtxBadge.has-active{ top:10px; right:12px; padding:6px 11px; font-size:12px; }
  #hierCtxBadge .hc-name{ max-width:120px; }
}

/* Popover do seletor rápido de contexto (lista de contas + sair da subconta) */
#hierCtxPop{
  display:none; position:fixed; top:54px; right:20px; z-index:1300;
  min-width:260px; max-width:340px; max-height:70vh; overflow-y:auto;
  background:var(--bg-card-solid, #111); border:1px solid var(--border-hover, rgba(255,255,255,0.15));
  border-radius:16px; padding:8px; box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#hierCtxPop.open{ display:block; }
.hc-pop-title{ font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-dim, rgba(255,255,255,0.45)); padding:8px 10px 6px; }
.hc-pop-item{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:11px; cursor:pointer; font-size:13.5px;
  color:var(--text-primary, #fff); transition:background .15s ease; }
.hc-pop-item:hover{ background:var(--bg-card, rgba(255,255,255,0.04)); }
.hc-pop-item.active{ background:var(--accent-glow, rgba(34,224,214,0.16)); }
.hc-pop-item small{ color:var(--text-dim, rgba(255,255,255,0.45)); font-size:11px; display:block; }
.hc-pop-sep{ height:1px; background:var(--border-color, rgba(255,255,255,0.08)); margin:6px 4px; }
.hc-pop-exit{ color:#ff8b96; font-weight:600; }

/* Overlay full-screen da hierarquia (Agências -> Subcontas) */
#hierOverlay{
  display:none; position:fixed; inset:0; z-index:1400; overflow-y:auto;
  background:rgba(5,8,12,0.72); backdrop-filter:none;
  padding:40px 20px 60px;
}
#hierOverlay.open{ display:block; }
.hier-shell{ max-width:1080px; margin:0 auto; }
.hier-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:24px; flex-wrap:wrap; }
.hier-crumbs{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-secondary, rgba(255,255,255,0.65)); flex-wrap:wrap; }
.hier-crumbs b{ color:var(--text-primary, #fff); font-weight:600; }
.hier-crumbs .hc-link{ cursor:pointer; color:var(--accent, #22e0d6); }
.hier-crumbs .hc-sep{ opacity:.5; }
.hier-close{ background:var(--bg-card, rgba(255,255,255,0.06)); border:1px solid var(--border-color, rgba(255,255,255,0.08));
  color:var(--text-primary, #fff); border-radius:10px; padding:8px 14px; cursor:pointer; font-size:13px; }
.hier-close:hover{ border-color:var(--border-hover, rgba(255,255,255,0.2)); }
.hier-head{ margin-bottom:18px; }
.hier-head h1{ font-size:26px; margin-bottom:6px; }
.hier-head p{ font-size:14px; color:var(--text-secondary, rgba(255,255,255,0.65)); max-width:680px; }
.hier-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.hier-card{
  position:relative; background:var(--bg-card, rgba(255,255,255,0.04));
  border:1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius:var(--card-radius, 20px);
  padding:20px 18px; transition:var(--transition-default, .25s ease); cursor:pointer;
}
.hier-card:hover{ border-color:var(--accent, #22e0d6); transform:translateY(-2px); }
.hier-card h3{ font-size:17px; margin-bottom:4px; color:var(--text-primary, #fff); }
.hier-card .hier-slug{ font-size:11px; color:var(--text-dim, rgba(255,255,255,0.45)); margin-bottom:14px;
  font-family:'JetBrains Mono', monospace; }
.hier-card .hier-stats{ display:flex; gap:18px; margin-bottom:14px; }
.hier-card .hier-stat b{ display:block; font-size:20px; color:var(--accent, #22e0d6); }
.hier-card .hier-stat span{ font-size:11px; color:var(--text-dim, rgba(255,255,255,0.45)); }
.hier-card .hier-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.hier-pill{ font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600; }
.hier-pill.on{ background:rgba(34,197,94,0.14); color:#34e89e; }
.hier-pill.off{ background:rgba(239,68,68,0.12); color:#ff8b96; }
.hier-card-new{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border-style:dashed; cursor:pointer; min-height:150px; color:var(--text-secondary, rgba(255,255,255,0.65));
}
.hier-card-new:hover{ color:var(--accent, #22e0d6); }
.hier-card-new .plus{ font-size:34px; line-height:1; font-weight:300; }
.hier-btn{ font-size:12px; padding:7px 13px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border-hover, rgba(255,255,255,0.15)); background:transparent; color:var(--text-primary, #fff); }
.hier-btn:hover{ border-color:var(--accent, #22e0d6); }
.hier-btn.primary{ background:var(--accent, #22e0d6); border-color:var(--accent, #22e0d6); color:#04201e; font-weight:700; }
.hier-empty{ text-align:center; color:var(--text-dim, rgba(255,255,255,0.45)); padding:40px 0; }
@media (max-width:640px){
  #hierOverlay{ padding:24px 12px 48px; }
  .hier-head h1{ font-size:22px; }
  .hier-grid{ grid-template-columns:1fr; }
}

/* Modal de usuários da subconta */
#hierUsersModal .modal{ max-width:520px; }
.hier-user-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius:11px; margin-bottom:8px; }
.hier-user-row .hu-mail{ font-size:13px; color:var(--text-primary, #fff); overflow:hidden; text-overflow:ellipsis; }
.hier-user-row .hu-role{ font-size:11px; color:var(--text-dim, rgba(255,255,255,0.45)); }
.hier-user-row .hu-del{ background:transparent; border:none; color:#ff8b96; cursor:pointer; font-size:18px; line-height:1; }


* { font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; }
.lead-card-username, code, pre, .font-mono, [class*="font-mono"] { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace !important; }
.font-display { font-family: 'Cormorant Garamond', serif !important; }
body { background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; display: flex; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(6,182,212,0.25); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* LED border animation */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes led-rotate { to { --angle: 360deg; } }

.glass {
  background: var(--bg-card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  transition: all var(--transition-default);
}
.glass-strong {
  background: var(--bg-card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  transition: all var(--transition-default);
}
[data-theme="light"] .glass,
[data-theme="light"] .glass-strong {
  background: var(--bg-card-solid);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:none;
  border-color: rgba(0,0,0,0.06);
}
.surface-border {
  position: relative;
}
.surface-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:var(--panel-2, #111824);
  animation: led-rotate 4s linear infinite;
  -webkit-mask:none;
  mask:none;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card-hover {
  transition: transform var(--transition-default), box-shadow var(--transition-default);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.glow-blue { box-shadow:0 1px 3px rgba(0,0,0,.18); }
.glow-purple { box-shadow:0 1px 3px rgba(0,0,0,.18); }
.glow-cyan { box-shadow:0 1px 3px rgba(0,0,0,.18); }
.stat-number {
  background:none;
  color:var(--text-primary);
  -webkit-background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  background-clip:border-box;
}
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }
.funnel-bar { transition: width 0.8s ease; }
.heatmap-cell { transition: background 0.3s ease; }

/* Sidebar - always dark */
.sidebar {
  width: 260px;
  min-height: 100vh;
  background: var(--sidebar-bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 50;
  transition: width .25s cubic-bezier(0.4, 0, 0.2, 1), transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-collapse-btn {
  position: absolute; top: 22px; right: -12px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(15,15,25,0.97); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 51; transition: all .2s; padding: 0;
}
.sidebar-collapse-btn:hover { background: rgba(6,182,212,0.15); color: #22d3ee; border-color: rgba(6,182,212,0.4); }
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .sidebar-label { display: none; }
.sidebar.collapsed .sidebar-logo { padding: 28px 0; justify-content: center; }
.sidebar.collapsed .sidebar-nav { padding: 12px 10px; }
.sidebar.collapsed .nav-item {
  justify-content: center; padding: 12px 10px; gap: 0;
}
.sidebar.collapsed .nav-item.active::before { left: 0; height: 24px; }
.sidebar.collapsed .sidebar-footer { padding: 16px 10px; text-align: center; }
.sidebar.collapsed .logout-btn {
  justify-content: center; padding: 11px 10px; gap: 0;
}
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
/* Tooltip ao passar mouse quando colapsado */
.sidebar.collapsed .nav-item::after,
.sidebar.collapsed .logout-btn::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  background: rgba(15,15,25,0.97); color: #fff;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0; pointer-events: none;
  transition: opacity .15s; z-index: 100;
}
.sidebar.collapsed .nav-item:hover::after,
.sidebar.collapsed .logout-btn:hover::after { opacity: 1; }
.sidebar.collapsed ~ .main-area,
body:has(.sidebar.collapsed) .main-area { margin-left: 64px; }
.sidebar-logo {
  padding: 28px 24px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-logo .icon {
  width: 36px; height: 36px;
  background:var(--panel-2, #111824);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #000; font-weight: 800;
}
.sidebar-nav { flex: 1; padding: 12px 14px; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 12px; cursor: pointer;
  color: rgba(255,255,255,0.4); font-size: 14px; font-weight: 500;
  transition: all var(--transition-default); margin-bottom: 4px; user-select: none;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); }
.nav-item.active { background: rgba(6,182,212,0.08); color: #22d3ee; }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #22d3ee;
  border-radius: 0 3px 3px 0;
}
.nav-item .nav-icon { width: 20px; height: 20px; }
.sidebar-footer {
  padding: 20px 24px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 11px; color: rgba(255,255,255,0.2);
}
.logout-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 16px; border-radius: 12px; border: none;
  background: rgba(239,68,68,0.06); color: rgba(239,68,68,0.6);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all var(--transition-default); margin-bottom: 10px;
}
.logout-btn:hover { background: rgba(239,68,68,0.12); color: #ef4444; }

/* Main area */
.main-area { margin-left: 260px; flex: 1; min-height: 100vh; transition: margin-left .3s cubic-bezier(0.4, 0, 0.2, 1); }
.page { display: none; }
.page.active { display: block; }

/* ════════ NOVO DASHBOARD (#dnew-root) — cockpit, escopado, sem CDN ════════ */
#dnew-root{
  --dn-bg1:#0c111a; --dn-bg2:#111824; --dn-bg3:#19222f;
  --dn-line:rgba(255,255,255,0.07); --dn-line2:rgba(255,255,255,0.12);
  --dn-text:#eef2f8; --dn-dim:#9aa6b8; --dn-mute:#8591a5;
  --dn-accent:#22e0d6; --dn-accent-deep:#0fb5ad; --dn-accent-glow:rgba(34,224,214,0.16);
  --dn-live:#34e89e; --dn-bad:#ff5d6c; --dn-ig:#e879f9; --dn-gold:#f5b544;
  --dn-r:14px; --dn-r-sm:10px;
  --dn-sh:0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px -12px rgba(0,0,0,0.7);
  color:var(--dn-text);
}
/* CONTEÚDO CLARO (light e híbrido): o namespace --dn-* REFERENCIA os tokens
   globais de tema (fonte única no theme-crm-clean.css) em vez de copiar valores. */
:root:is([data-theme="light"],[data-theme="hybrid"]) #dnew-root{
  --dn-bg1:var(--panel,#f9fafc); --dn-bg2:var(--panel-2,#f1f4f9); --dn-bg3:var(--raised,#e9edf4);
  --dn-line:var(--line,#dde3ee); --dn-line2:var(--line-strong,#c3cde0);
  --dn-text:var(--text,#16202e); --dn-dim:var(--dim,#5a6478); --dn-mute:var(--mute,#5a6478);
  --dn-accent:#0891b2; --dn-accent-deep:#0e7490; --dn-accent-glow:rgba(8,145,178,0.16);
  --dn-live:#16a34a; --dn-bad:#dc2626; --dn-ig:#c026d3; --dn-gold:#b45309;
  --dn-sh:0 1px 3px rgba(15,23,42,0.06), 0 10px 28px -16px rgba(15,23,42,0.12);
}
#dnew-root .num{font-family:'JetBrains Mono','SF Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
#dnew-root .dnew-live-row{display:flex;justify-content:flex-end;margin-bottom:4px}
#dnew-root .dnew-live{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dn-live);font-weight:600;letter-spacing:0.04em}
#dnew-root .dnew-live .dnew-sub{color:var(--dn-mute);font-weight:500}
#dnew-root .dnew-dot{width:7px;height:7px;border-radius:50%;background:var(--dn-live);box-shadow:0 1px 3px rgba(0,0,0,.18);animation:dnPulse 2s infinite}
@keyframes dnPulse{0%{box-shadow:0 1px 3px rgba(0,0,0,.18)}70%{box-shadow:0 1px 3px rgba(0,0,0,.18)}100%{box-shadow:0 1px 3px rgba(0,0,0,.18)}}

#dnew-root section.dnew-block{margin-top:26px;animation:dnFade .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes dnFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#dnew-root .dnew-sec-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
#dnew-root .dnew-sec-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--dn-bg2);border:1px solid var(--dn-line);color:var(--dn-accent);flex-shrink:0}
#dnew-root .dnew-sec-ico svg{width:16px;height:16px}
#dnew-root .dnew-sec-head h2{font-size:15px;font-weight:700;letter-spacing:-0.01em;margin:0;color:var(--dn-text)}
#dnew-root .dnew-sub2{font-size:11px;color:var(--dn-mute);margin-top:1px}
#dnew-root .dnew-sec-link{margin-left:auto;font-size:11.5px;color:var(--dn-dim);display:flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--dn-line);padding:6px 12px;border-radius:9px;transition:.16s}
#dnew-root .dnew-sec-link:hover{color:var(--dn-text);border-color:var(--dn-line2);background:rgba(255,255,255,0.025)}
#dnew-root .dnew-sec-link svg{width:13px;height:13px}

#dnew-root .dnew-panel{border:1px solid var(--dn-line);border-radius:var(--dn-r);background:var(--dn-bg1);box-shadow:0 1px 3px rgba(0,0,0,.18);padding:20px 22px;transition:border-color .2s,box-shadow .2s}
#dnew-root .dnew-panel:hover{border-color:var(--dn-line2);box-shadow:0 1px 3px rgba(0,0,0,.18)}
#dnew-root .dnew-chart-cap{font-size:11px;color:var(--dn-mute);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}

#dnew-root .dnew-statcard{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid var(--dn-line);border-radius:var(--dn-r-sm);background:var(--dn-bg2);position:relative;overflow:hidden}
#dnew-root .dnew-statcard .dnew-lab{font-size:10.5px;color:var(--dn-mute);letter-spacing:0.08em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
#dnew-root .dnew-statcard .dnew-lab svg{width:13px;height:13px;opacity:.75}
#dnew-root .dnew-statcard .dnew-val{display:flex;align-items:baseline;gap:8px}
#dnew-root .dnew-statcard .dnew-val .v{font-size:26px;font-weight:700}
#dnew-root .dnew-statcard .dnew-val .u{font-size:12px;color:var(--dn-mute)}
#dnew-root .dnew-delta{font-family:'JetBrains Mono';font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;gap:3px}
#dnew-root .dnew-delta.up{color:var(--dn-live)}
#dnew-root .dnew-delta.dn{color:var(--dn-bad)}

#dnew-root .dnew-ig-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
#dnew-root .dnew-ig-area{height:100%;display:flex;flex-direction:column}
#dnew-root .dnew-ig-area .dnew-phead{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
#dnew-root .dnew-ig-area .dnew-big{font-size:38px;font-weight:700;line-height:1}
#dnew-root .dnew-ig-area .dnew-biglab{font-size:11px;color:var(--dn-mute);letter-spacing:.06em;text-transform:uppercase}
#dnew-root .dnew-ig-area .dnew-area-svg{flex:1;min-height:150px;margin-top:10px}
#dnew-root .dnew-ig-side{display:grid;grid-template-rows:repeat(2,1fr);gap:14px}
#dnew-root .dnew-ig-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px}

#dnew-root .dnew-sdr-list{display:flex;flex-direction:column;gap:13px}
#dnew-root .dnew-sdr-row{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:14px}
#dnew-root .dnew-sdr-av{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--text,#eef2f8)}
#dnew-root .dnew-sdr-name{font-weight:600;font-size:13.5px}
#dnew-root .dnew-sdr-role{font-size:10.5px;color:var(--dn-mute)}
#dnew-root .dnew-sdr-bar-track{height:8px;border-radius:5px;background:var(--dn-bg3);overflow:hidden;margin-top:7px}
#dnew-root .dnew-sdr-bar{height:100%;border-radius:5px;transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.85,.2,1);background:var(--panel-2, #111824)}
#dnew-root .dnew-sdr-count{text-align:right}
#dnew-root .dnew-sdr-count .c{font-family:'JetBrains Mono';font-weight:700;font-size:17px}
#dnew-root .dnew-sdr-count .t{font-size:10px;font-family:'JetBrains Mono';color:var(--dn-mute)}
#dnew-root .dnew-sdr-count .t.ok{color:var(--dn-live)}
#dnew-root .dnew-sdr-count .t.off{color:var(--dn-bad)}

#dnew-root .dnew-ch-grid{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center}
#dnew-root .dnew-donut-wrap{position:relative;display:grid;place-items:center}
#dnew-root .dnew-donut-center{position:absolute;text-align:center}
#dnew-root .dnew-donut-center .dnew-dc{font-family:'JetBrains Mono';font-size:30px;font-weight:700}
#dnew-root .dnew-donut-center .dnew-dl{font-size:10.5px;color:var(--dn-mute);letter-spacing:.06em}
#dnew-root .dnew-ch-list{display:flex;flex-direction:column;gap:10px}
#dnew-root .dnew-ch-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--dn-line);border-radius:var(--dn-r-sm);background:var(--dn-bg2)}
#dnew-root .dnew-ch-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex-shrink:0}
#dnew-root .dnew-ch-ico.wa{background:rgba(52,232,158,0.16);color:var(--dn-live)}
#dnew-root .dnew-ch-ico.ig{background:rgba(232,121,249,0.16);color:var(--dn-ig)}
#dnew-root .dnew-ch-meta{flex:1;min-width:0}
#dnew-root .dnew-ch-meta .n{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dnew-root .dnew-ch-meta .s{font-size:11px;color:var(--dn-mute);font-family:'JetBrains Mono'}
#dnew-root .dnew-statuschip{font-size:10px;font-weight:700;letter-spacing:.05em;padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
#dnew-root .dnew-statuschip.ok{background:rgba(52,232,158,0.14);color:var(--dn-live)}
#dnew-root .dnew-statuschip.off{background:rgba(255,93,108,0.14);color:var(--dn-bad)}
#dnew-root .dnew-statuschip i{width:6px;height:6px;border-radius:50%;background:currentColor}

#dnew-root .dnew-kan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#dnew-root .dnew-kan-card{border:1px solid var(--dn-line);border-radius:var(--dn-r-sm);background:var(--dn-bg2);padding:15px 16px;position:relative;overflow:hidden}
#dnew-root .dnew-kan-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bar)}
#dnew-root .dnew-kan-card .kn{font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:space-between}
#dnew-root .dnew-kan-card .kn .pipe-dot{width:8px;height:8px;border-radius:3px;background:var(--bar)}
#dnew-root .dnew-kan-stats{display:flex;gap:18px;margin-top:12px}
#dnew-root .dnew-kan-stats .ks{display:flex;flex-direction:column}
#dnew-root .dnew-kan-stats .ks .kv{font-family:'JetBrains Mono';font-weight:700;font-size:20px}
#dnew-root .dnew-kan-stats .ks .kl{font-size:10px;color:var(--dn-mute);letter-spacing:.04em}

#dnew-root .dnew-bc-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:18px}
#dnew-root .dnew-bc-stats{display:grid;grid-template-rows:repeat(3,1fr);gap:12px}
#dnew-root .dnew-bc-bars{height:170px;width:100%}

#dnew-root .dnew-pr-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
#dnew-root .dnew-pr-bars{height:210px;width:100%}
#dnew-root .dnew-pr-side{display:grid;grid-template-rows:auto 1fr;gap:14px}
#dnew-root .dnew-pr-total{padding:18px;border-radius:var(--dn-r-sm);background:var(--panel-2, #111824);border:1px solid rgba(34,224,214,0.25)}
#dnew-root .dnew-pr-total .v{font-size:34px;font-weight:700}
#dnew-root .dnew-pr-total .l{font-size:11px;color:var(--dn-dim);letter-spacing:.06em;text-transform:uppercase}
#dnew-root .dnew-pr-src{display:flex;flex-direction:column;gap:9px;justify-content:center}
#dnew-root .dnew-pr-srow{display:flex;align-items:center;gap:11px;font-size:12.5px}
#dnew-root .dnew-pr-srow .sw{width:9px;height:9px;border-radius:3px;flex-shrink:0}
#dnew-root .dnew-pr-srow .sn{flex:1;color:var(--dn-dim)}
#dnew-root .dnew-pr-srow .sv{font-family:'JetBrains Mono';font-weight:700}

#dnew-root .dnew-sales.dnew-panel{border-color:rgba(34,224,214,0.22);background:var(--panel-2, #111824)}
#dnew-root .dnew-sales-top{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--dn-line);border-radius:var(--dn-r-sm);overflow:hidden;margin-bottom:20px;background:var(--dn-bg2)}
#dnew-root .dnew-sales-top .dnew-scell{padding:16px 20px;position:relative}
#dnew-root .dnew-sales-top .dnew-scell + .dnew-scell{border-left:1px solid var(--dn-line)}
#dnew-root .dnew-sales-top .dnew-scell .l{font-size:10.5px;color:var(--dn-mute);letter-spacing:.08em;text-transform:uppercase}
#dnew-root .dnew-sales-top .dnew-scell .v{font-size:30px;font-weight:700;margin-top:6px;display:flex;align-items:baseline;gap:6px}
#dnew-root .dnew-sales-top .dnew-scell .v .u{font-size:14px;color:var(--dn-mute)}
#dnew-root .dnew-sales-main{display:grid;grid-template-columns:1.7fr 1fr;gap:20px}
#dnew-root .dnew-sales-chart{height:210px;width:100%}
#dnew-root .dnew-sales-break{display:flex;flex-direction:column;gap:11px}
#dnew-root .dnew-sb-row{display:flex;flex-direction:column;gap:6px}
#dnew-root .dnew-sb-top{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;gap:10px}
#dnew-root .dnew-sb-top .nm{font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
#dnew-root .dnew-sb-top .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dnew-root .dnew-sb-top .nm i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
#dnew-root .dnew-sb-top .vl{font-family:'JetBrains Mono';font-weight:700;flex-shrink:0}
#dnew-root .dnew-sb-track{height:7px;border-radius:5px;background:var(--dn-bg3);overflow:hidden}
#dnew-root .dnew-sb-fill{height:100%;border-radius:5px;transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.85,.2,1)}

#dnew-root .dnew-two-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:980px){
  #dnew-root .dnew-ig-grid,#dnew-root .dnew-bc-grid,#dnew-root .dnew-pr-grid,#dnew-root .dnew-sales-main{grid-template-columns:1fr}
  #dnew-root .dnew-kan-grid{grid-template-columns:1fr 1fr}
  #dnew-root .dnew-ch-grid{grid-template-columns:1fr}
  #dnew-root .dnew-sales-top{grid-template-columns:1fr 1fr}
  #dnew-root .dnew-two-cards{grid-template-columns:1fr}
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 12px; border: none;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--transition-default); letter-spacing: 0.1px;
  position: relative; height: 44px;
}
.btn-primary { background:var(--accent-deep); color:var(--on-accent,#06121a); border:1px solid var(--accent-deep); font-weight:600; }
.btn-primary:hover { transform: translateY(-1px); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.cam-action-btn {
  display: flex; align-items: center; gap: 12px;
  justify-content: flex-start !important;
  padding: 14px 16px !important; width: 100%;
  text-align: left; font-size: 14px; font-weight: 500;
  height: auto !important;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.cam-action-btn:hover {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.cam-action-btn.btn-primary {
  background:var(--panel-2, #111824);
  border-color: rgba(34,197,94,0.32); color: #d1fae5;
}
.cam-action-btn.btn-primary:hover {
  background:var(--panel-2, #111824);
  border-color: rgba(34,197,94,0.5); box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.cam-action-btn.cam-action-warn {
  border-color: rgba(245,158,11,0.24); color: #fcd34d;
}
.cam-action-btn.cam-action-warn:hover {
  background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.42);
}
.cam-action-btn.cam-action-danger {
  border-color: rgba(239,68,68,0.24); color: #fca5a5;
}
.cam-action-btn.cam-action-danger:hover {
  background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.42);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.tpl-icon-btn {
  width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72); border-radius: 7px; cursor: pointer;
  transition: all 160ms cubic-bezier(.4,0,.2,1);
}
.tpl-icon-btn:hover { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }
.tpl-icon-btn-danger:hover { background: rgba(239,68,68,0.14); color: #fca5a5; border-color: rgba(239,68,68,0.32); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.btn-led {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff; border-radius: 14px;
}
.btn-led::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background:var(--panel-2, #111824);
  animation: led-rotate 4s linear infinite;
  -webkit-mask:none;
  mask:none;
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.btn-secondary {
  background: rgba(255,255,255,0.04); color: #e5e5e5;
  border: 1px solid rgba(255,255,255,0.06);
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.07); }
.btn-danger { background: transparent; color: #ef4444; border: 1px solid rgba(239,68,68,0.2); border-radius: 12px; }
.btn-danger:hover { background: #ef4444; color: #fff; }
.btn-success { background: #22c55e; color: #000; border-radius: 12px; }
.btn-success:hover { opacity: .9; transform: translateY(-1px); }
.btn-sm { padding: 7px 16px; font-size: 12px; border-radius: 10px; height: 36px; }

/* Badge */
.badge {
  display: inline-block; padding: 4px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.badge-active, .badge-online { background: rgba(34,197,94,.10); color: #22c55e; }
.badge-inactive, .badge-stopped { background: rgba(136,136,136,.10); color: #888; }
.badge-error { background: rgba(239,68,68,.10); color: #ef4444; }
.wa-link { color: #22d3ee !important; text-decoration: underline !important; cursor: pointer !important; }

/* Agent cards */
.agents-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.agent-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--card-radius); padding: 24px; backdrop-filter:none;
  transition: all var(--transition-default); cursor: pointer; position: relative;
}
[data-theme="light"] .agent-card { background: var(--bg-card-solid); box-shadow:0 1px 3px rgba(0,0,0,.18); backdrop-filter:none; }
.agent-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background:var(--panel-2, #111824);
  animation: led-rotate 4s linear infinite;
  -webkit-mask:none;
  mask:none;
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.agent-card:hover { transform: translateY(-2px); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.agent-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.agent-name { font-size: 15px; font-weight: 600; }
.agent-company { color: rgba(255,255,255,0.4); font-size: 12px; margin-top: 4px; }
.agent-meta {
  display: flex; gap: 18px; color: rgba(255,255,255,0.3); font-size: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.05);
}
.agent-meta span { display: flex; align-items: center; gap: 5px; }

/* Detail view */
.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 14px; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-section {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--card-radius); padding: 28px; margin-bottom: 16px; backdrop-filter:none;
  transition: all var(--transition-default);
}
[data-theme="light"] .detail-section { background: var(--bg-card-solid); box-shadow:0 1px 3px rgba(0,0,0,.18); backdrop-filter:none; }
.detail-section h3 { font-size: 12px; font-weight: 600; color: #22d3ee; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.6px; }
.detail-field { margin-bottom: 14px; }
.detail-field .label { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.detail-field .value { font-size: 14px; white-space: pre-wrap; line-height: 1.6; }
.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }

/* Channels */
.channel-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--card-radius); padding: 22px; margin-bottom: 14px; backdrop-filter:none;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  position: relative; transition: all var(--transition-default);
}
[data-theme="light"] .channel-card { background: var(--bg-card-solid); box-shadow:0 1px 3px rgba(0,0,0,.18); backdrop-filter:none; }
.channel-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background:var(--panel-2, #111824);
  animation: led-rotate 4s linear infinite;
  -webkit-mask:none;
  mask:none;
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.channel-info { flex: 1; min-width: 200px; position: relative; z-index: 1; }
.channel-type { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.channel-agent { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 3px; }
.channel-url {
  font-size: 12px; color: rgba(255,255,255,0.3); margin-top: 6px;
  padding: 8px 12px; background: rgba(0,0,0,0.4); border-radius: 8px;
  font-family: monospace; word-break: break-all; cursor: pointer; transition: background .2s;
}
.channel-url:hover { background: rgba(6,182,212,0.08); }
.channel-actions { display: flex; gap: 8px; align-items: center; position: relative; z-index: 1; }

/* Modal */
/* ── Modal universal (mesmo visual dos modais de prospecção) ── */
.glass-card {
  background: var(--bg-card, rgba(15,23,42,0.78));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.60);
  z-index: 100; justify-content: center; align-items: center;
  padding: 24px; overflow-y: auto;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-card, rgba(15,23,42,0.92));
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  width: 100%; max-width: 640px; padding: 28px 32px;
  animation: modalIn .25s cubic-bezier(0.4, 0, 0.2, 1); position: relative;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  overflow: hidden;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.modal::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background:var(--panel-2, #111824);
  pointer-events: none; z-index: 0;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px; position: relative; z-index: 1;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.modal-header h2 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  background:none; color:var(--text-primary);
  -webkit-background-clip:border-box; background-clip:border-box; -webkit-text-fill-color:currentColor;
}
.modal-close {
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 10px;
  border-radius: 8px; transition: all var(--transition-default);
}
.modal-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.modal > form, .modal > div:not(.modal-header) { position: relative; z-index: 1; }

/* Form */
.form-group { margin-bottom: 18px; position: relative; z-index: 1; }
.form-group label {
  display: block; font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.45); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.3px;
}
.form-group label .req { color: #ef4444; }
.form-input {
  width: 100%; padding: 12px 16px; background: var(--input-bg);
  border: 1px solid var(--border-color); border-radius: 12px;
  color: var(--text-primary); font-family: inherit; font-size: 14px; transition: all var(--transition-default);
  height: 44px;
}
.form-input:focus { outline: none; border-color: #06b6d4; box-shadow:0 1px 3px rgba(0,0,0,.18); }
textarea.form-input { resize: vertical; min-height: 88px; height: auto; }
select.form-input {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; z-index: 1; }
.form-submit-row { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; position: relative; z-index: 1; }

/* Radio group */
.radio-group { display: flex; gap: 12px; margin-top: 6px; position: relative; z-index: 1; }
.radio-option {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; color: rgba(255,255,255,0.6);
}
.radio-option input[type="radio"] { accent-color: #06b6d4; }

/* File upload zone */
.upload-zone {
  border: 2px dashed rgba(255,255,255,0.08); border-radius: 16px; padding: 32px;
  text-align: center; cursor: pointer; transition: all var(--transition-default); position: relative; z-index: 1;
}
.upload-zone:hover, .upload-zone.dragover { border-color: #06b6d4; background: rgba(6,182,212,0.03); }
.upload-zone p { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 8px; }
.file-list { margin-top: 12px; position: relative; z-index: 1; }
.file-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: rgba(0,0,0,0.3); border-radius: 8px; margin-bottom: 6px;
  font-size: 13px; color: rgba(255,255,255,0.6);
}
.file-item .file-remove { color: #ef4444; cursor: pointer; font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(239,68,68,0.3); background: none; }
.file-item .file-remove:hover { background: #ef4444; color: #fff; }

/* Section divider in form */
.form-section-title {
  font-size: 12px; font-weight: 600; color: #22d3ee; text-transform: uppercase;
  letter-spacing: 0.6px; margin: 24px 0 14px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.05); position: relative; z-index: 1;
}

/* Empty */
.empty { text-align: center; padding: 100px 24px; color: rgba(255,255,255,0.35); }
.empty-icon { font-size: 48px; margin-bottom: 20px; opacity: .25; }
.empty p { margin-bottom: 24px; font-size: 14px; }

/* Toast */
.toast {
  position: fixed; bottom: 28px; right: 28px; padding: 14px 24px;
  border-radius: 14px; font-size: 14px; font-weight: 500; z-index: 200;
  animation: toastIn .3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.toast-success { background:var(--toast-success-bg,#34e89e); color:var(--toast-success-fg,#05241a); }
.toast-error { background:var(--toast-error-bg,#ff5d6c); color:var(--toast-error-fg,#2b060a); }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile toggle */
.mobile-toggle {
  display: none; position: fixed; top: 16px; left: 16px; z-index: 60;
  width: 44px; height: 44px; background: rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
  color: #fff; font-size: 20px; cursor: pointer; align-items: center; justify-content: center;
  transition: all var(--transition-default);
}

/* Copy button */
.copy-btn {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5); font-size: 11px; padding: 6px 14px; border-radius: 8px;
  cursor: pointer; transition: all var(--transition-default);
}
.copy-btn:hover { background: rgba(6,182,212,0.1); color: #22d3ee; border-color: rgba(6,182,212,0.3); }

/* Responsive */
@media(max-width:768px){
  .sidebar { transform: translateX(-100%); width: 260px; }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; padding-top: 60px; }
  .mobile-toggle { display: flex; }
  .form-row { grid-template-columns: 1fr; }
  .detail-stats { grid-template-columns: 1fr 1fr 1fr; }
  .agents-grid { grid-template-columns: 1fr; }
}

/* ── Login Screen (cockpit premium) ── */
.login-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: #000;
  display: flex; align-items: stretch; justify-content: stretch;
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.login-overlay.hidden { display: none; }
/* PARTE A: painel da imagem (esquerda, ~1024px, altura cheia) */
.login-image-panel {
  flex: 0 0 100vh; width: 100vh; height: 100vh; aspect-ratio: 1 / 1;
  position: relative; overflow: hidden; background: #000;
}
.login-image-panel img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
/* Fade sutil da imagem pro preto na borda direita pra costurar o split */
.login-image-panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 82%, rgba(0,0,0,0.55) 100%);
}
/* PARTE B: lado preto puro com tagline + card */
.login-right {
  flex: 1 1 auto; min-width: 0; height: 100vh; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; padding: 48px 6vw;
}
/* Frase de efeito (menor, elegante) */
.login-tagline {
  max-width: 520px; width: 100%; text-align: center; z-index: 1;
}
.login-tagline .lt-eyebrow {
  font-family: var(--mono, 'JetBrains Mono'); font-size: 11px; letter-spacing: 0.14em;
  color: var(--accent, #22e0d6); margin-bottom: 14px; font-weight: 600;
}
.login-tagline .lt-title {
  font-size: 34px; line-height: 1.12; font-weight: 800; color: #fff;
  letter-spacing: -0.02em; margin: 0 0 16px;
}
.login-tagline .lt-title span { color: var(--accent, #22e0d6); }
.login-tagline .lt-sub {
  font-size: 23px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0;
}
/* Responsivo: em telas estreitas, esconde imagem e centraliza o lado preto */
@media (max-width: 900px) {
  .login-image-panel { display: none; }
  .login-right { padding: 40px 28px; }
  .login-tagline { text-align: center; }
}
/* Aurora ciano sutil ao fundo */
.login-aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background:
    radial-gradient(60% 80% at 50% 0%, var(--accent-glow, rgba(34,224,214,0.16)) 0%, transparent 60%),
    radial-gradient(40% 60% at 80% 20%, rgba(34,224,214,0.08) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: loginAurora 14s ease-in-out infinite alternate;
}
@keyframes loginAurora {
  from { opacity: .7; transform: translateY(-4%) scale(1); }
  to   { opacity: 1;  transform: translateY(2%)  scale(1.06); }
}
/* Grade fina */
.login-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .1;
  background-image:
    linear-gradient(var(--line, rgba(255,255,255,0.07)) 1px, transparent 1px),
    linear-gradient(90deg, var(--line, rgba(255,255,255,0.07)) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask: radial-gradient(120% 90% at 50% 35%, #000 0%, transparent 75%);
  mask: radial-gradient(120% 90% at 50% 35%, #000 0%, transparent 75%);
}
.login-card {
  width: 440px; max-width: 92vw; padding: 44px 40px 36px;
  background: color-mix(in srgb, var(--panel, #0c111a) 15%, transparent);
  backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--line, rgba(255,255,255,0.07));
  border-radius: 18px;
  position: relative; z-index: 1;
  box-shadow:
    0 32px 90px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  animation: modalIn .45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Glow ciano discreto no topo do card */
.login-card::before {
  content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent, #22e0d6), transparent);
  opacity: .55; pointer-events: none;
}
.login-card::after {
  content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 70%; height: 80px; border-radius: 50%;
  background: var(--accent-glow, rgba(34,224,214,0.16));
  filter: blur(28px); opacity: .8; pointer-events: none;
}
.login-logo { text-align: center; margin-bottom: 30px; }
.login-logo .icon-wrap {
  width: 56px; height: 56px; margin: 0 auto 16px;
  background: var(--panel-2, #111824);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: var(--accent, #22e0d6);
  box-shadow: 0 0 0 4px var(--accent-glow, rgba(34,224,214,0.16)), 0 8px 24px -10px rgba(0,0,0,0.6);
}
.login-logo h1 {
  font-size: 22px; font-weight: 800; color: var(--text, #eef2f8);
  letter-spacing: 1.5px; text-transform: uppercase;
}
.login-logo p {
  font-size: 12px; color: var(--mute, #5e6b80); margin-top: 8px;
  letter-spacing: 0.3px;
}
.login-field { margin-bottom: 18px; position: relative; z-index: 1; }
.login-field label {
  display: block; font-size: 10.5px; font-weight: 600;
  color: var(--mute, #5e6b80); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 1px;
}
.login-input-wrap { position: relative; }
.login-input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--mute, #5e6b80); pointer-events: none;
  transition: color var(--transition-default, .2s ease);
}
.login-field input {
  width: 100%; padding: 13px 16px 13px 42px; height: 46px;
  background: var(--panel-2, #111824);
  border: 1px solid var(--line, rgba(255,255,255,0.07));
  border-radius: 11px; color: var(--text, #eef2f8);
  font-family: inherit; font-size: 14.5px;
  transition: all var(--transition-default, .2s ease); outline: none;
}
.login-field input::placeholder { color: var(--mute, #5e6b80); }
.login-field input:focus {
  border-color: var(--accent-deep, #0fb5ad);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(34,224,214,0.16));
}
.login-input-wrap:focus-within .login-input-icon { color: var(--accent, #22e0d6); }
.login-submit {
  width: 100%; padding: 13px 24px; height: 48px; border: none; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent, #22e0d6), var(--accent-deep, #0fb5ad));
  color: #04110f; font-family: inherit; font-size: 14.5px; font-weight: 700;
  letter-spacing: 0.3px; cursor: pointer;
  transition: all var(--transition-default, .2s ease); margin-top: 14px;
  position: relative; z-index: 1;
}
.login-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -8px var(--accent-glow, rgba(34,224,214,0.16)), 0 0 0 1px var(--accent-deep, #0fb5ad);
}
.login-submit:active { transform: translateY(0); }
.login-submit:disabled { opacity: .65; cursor: default; transform: none; box-shadow: none; }
.login-error {
  color: var(--bad, #ff5d6c); font-size: 13px; text-align: center;
  margin-top: 14px; min-height: 18px;
  position: relative; z-index: 1;
}
.login-status {
  margin-top: 18px; text-align: center;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10.5px; letter-spacing: 0.5px;
  color: var(--mute, #5e6b80);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  position: relative; z-index: 1;
}

/* ── Theme Toggle ── */
.theme-toggle {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5); width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition-default); font-size: 16px;
}
.theme-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
[data-theme="light"] .theme-toggle {
  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.5);
}
[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.08); color: #111; }

/* ── Light mode text overrides ── */
[data-theme="light"] .text-white\/80, [data-theme="light"] .text-white\/70,
[data-theme="light"] .text-white\/60, [data-theme="light"] .text-white\/50 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-white\/40, [data-theme="light"] .text-white\/30 { color: var(--text-dim) !important; }
[data-theme="light"] .text-white\/20, [data-theme="light"] .text-white\/15 { color: var(--text-muted) !important; }
[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .border-white\/5, [data-theme="light"] .border-white\/\[0\.04\] { border-color: var(--border-color) !important; }
[data-theme="light"] .stat-number { background:var(--panel-2, #111824); -webkit-background-clip: text; }
[data-theme="light"] .btn-secondary { background: rgba(0,0,0,0.04); color: #333; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .btn-secondary:hover { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .btn-led { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: #111; }
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.35); backdrop-filter:none; }
[data-theme="light"] .modal { background: var(--modal-bg); border-color: var(--border-color); box-shadow:0 1px 3px rgba(0,0,0,.18); }
[data-theme="light"] .form-group label { color: var(--text-dim); }
[data-theme="light"] .mobile-toggle { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.06); color: #111; }
[data-theme="light"] .main-area { background: var(--bg-primary); }
[data-theme="light"] select { background-color: var(--bg-card-solid) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
[data-theme="light"] .agent-card { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .agent-card:hover { box-shadow:0 1px 3px rgba(0,0,0,.18); }
[data-theme="light"] .channel-card { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .detail-section { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .upload-zone { border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .upload-zone:hover { border-color: #0891b2; background: rgba(8,145,178,0.03); }
[data-theme="light"] .toast { box-shadow:0 1px 3px rgba(0,0,0,.18); }
/* LOGIN SEMPRE ESCURO: o light mode nao pode vazar pra tela de login.
   Reancora os tokens dark no escopo da .login-overlay e trava cores escuras. */
[data-theme="light"] .login-overlay{
  --bg:#070a0f; --panel:#0c111a; --panel-2:#111824; --raised:#161f2e;
  --line:rgba(255,255,255,0.07); --line-strong:rgba(255,255,255,0.12);
  --text:#eef2f8; --dim:#9aa6b8; --mute:#8591a5;
  --accent:#22e0d6; --accent-deep:#0fb5ad; --accent-glow:rgba(34,224,214,0.16);
  --live:#34e89e; --warn:#f5b544; --bad:#ff5d6c; --info:#4d7cff;
  background:#000 !important;
}
[data-theme="light"] .login-right,
[data-theme="light"] .login-image-panel{ background:#000 !important; }
[data-theme="light"] .login-card{
  background: color-mix(in srgb, #0c111a 15%, transparent) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
[data-theme="light"] .login-tagline .lt-title,
[data-theme="light"] .login-logo h1{ color:#fff !important; }
[data-theme="light"] .login-tagline .lt-sub{ color:rgba(255,255,255,0.78) !important; }
[data-theme="light"] .card-hover:hover { box-shadow:0 1px 3px rgba(0,0,0,.18); }

/* ===== LEAD MINI CARDS (Prospect Insta + Prospect Google) ===== */
.leads-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) { .leads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .leads-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .leads-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Grid estreito (1 ou 2 colunas) usado dentro de containers 2-col WhatsApp/sem WhatsApp */
.leads-grid-narrow { grid-template-columns: 1fr; }
@media (min-width: 1500px) { .leads-grid-narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Stats em linha (caixinhas pequenas e elegantes) */
.stat-mini {
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 6px 10px;
  transition: all .15s; cursor: default;
}
.stat-mini:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
.stat-mini-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px;
  color: rgba(255,255,255,0.45); line-height: 1.2; }
.stat-mini-val { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.95);
  font-variant-numeric: tabular-nums; line-height: 1.1; }

.lead-card {
  position: relative;
  background:var(--panel-2, #111824);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
  overflow: hidden;
  isolation: isolate;
}
.lead-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background:var(--panel-2, #111824);
  -webkit-mask:none;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: -1;
  pointer-events: none;
}
.lead-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.14);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  background:var(--panel-2, #111824);
}
.lead-card:hover::before { opacity: 1; }

.lead-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.lead-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: rgba(255,255,255,0.95);
  background:var(--avatar-color, var(--panel-2, #111824));
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  overflow: hidden;
}
.lead-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.lead-card-titles {
  flex: 1;
  min-width: 0;
}
.lead-card-username {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.lead-card-display {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.lead-card-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #a855f7;
}
/* PROSX-TRASH: botão de lixeira nos cards de busca (3 abas) */
.prosx-trash-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: rgba(255,255,255,0.4);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
}
.prosx-trash-btn:hover {
  color: #f87171;
  background: rgba(248,113,113,0.12);
  border-color: rgba(248,113,113,0.3);
}
.lead-card-bio {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255,255,255,0.72);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
  margin-bottom: 10px;
}
.lead-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.lead-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.lead-badge.b-offer { color: #6ee7b7; background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.35); }
.lead-badge.b-wa    { color: #67e8f9; background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.35); }
.lead-badge.b-source { color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.lead-badge.b-person { color: #fcd34d; background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.35); }

.lead-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  gap: 8px;
}
.lead-status-pill {
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.lead-card-actions {
  display: flex;
  gap: 6px;
}
.lead-action-btn {
  font-size: 10.5px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
  white-space: nowrap;
}
.lead-action-btn:hover { transform: translateY(-1px); }
.lead-action-btn.la-approve { color: #6ee7b7; border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.06); }
.lead-action-btn.la-approve:hover { background: rgba(16,185,129,0.18); }
.lead-action-btn.la-cancel  { color: #fcd34d; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.06); }
.lead-action-btn.la-cancel:hover { background: rgba(245,158,11,0.16); }
.lead-action-btn.la-view    { color: #a5b4fc; border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.06); }
.lead-action-btn.la-view:hover { background: rgba(99,102,241,0.18); }

.lead-card-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.015);
}

[data-theme="light"] .lead-card { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .lead-card:hover { background: rgba(255,255,255,0.95); box-shadow:0 1px 3px rgba(0,0,0,.18); }
[data-theme="light"] .lead-card-username { color: #1e293b; }
[data-theme="light"] .lead-card-display { color: rgba(30,41,59,0.55); }
[data-theme="light"] .lead-card-bio { color: rgba(30,41,59,0.72); }
[data-theme="light"] .lead-card-footer { border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .lead-card-empty { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); color: rgba(30,41,59,0.55); }

/* ── IG Metrics & Conversas ── */
.igm-cards { gap: 14px; }
.igm-kpi {
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; padding: 16px 18px; transition: all 0.2s;
}
.igm-kpi:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.igm-kpi-label { font-size: 11px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.igm-kpi-value { font-size: 26px; font-weight: 600; color: #fff; line-height: 1; }
.igm-kpi-delta { font-size: 12px; margin-top: 6px; }
.igm-kpi-delta.up   { color: #4ade80; }
.igm-kpi-delta.down { color: #f87171; }
.igm-kpi-delta.flat { color: rgba(255,255,255,0.45); }
.igm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 920px) { .igm-row { grid-template-columns: 1fr; } }
.igm-block {
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; padding: 18px; margin-bottom: 14px;
}
.igm-block-title { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 4px; }
.igm-block-sub { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 14px; }
.igm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.igm-table th { text-align: left; padding: 10px 12px; color: rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.06); font-weight: 500; }
.igm-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); }
.igm-table tr:hover { background: rgba(255,255,255,0.02); }
.igm-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: rgba(255,255,255,0.05); }
.igm-caption { color: rgba(255,255,255,0.6); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igm-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px;
  background: rgba(99,102,241,0.15); color: #c4b5fd; }
.igm-pill.reel { background: rgba(244,114,182,0.15); color: #f9a8d4; }
.igm-pill.video { background: rgba(34,211,238,0.15); color: #67e8f9; }
.igm-pill.carousel { background: rgba(250,204,21,0.15); color: #fde68a; }
.igm-engagement-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.igm-eng-kpi {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px; padding: 12px 14px;
}
.igm-eng-kpi-label { font-size: 11px; color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.igm-eng-kpi-value { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; }
.igm-eng-kpi-sub { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.igm-bench-bar {
  position: relative; height: 12px; background: rgba(255,255,255,0.05);
  border-radius: 999px; overflow: hidden; margin: 10px 0 4px;
}
.igm-bench-zone {
  position: absolute; top: 0; bottom: 0;
  background:var(--panel-2, #111824);
}
.igm-bench-marker {
  position: absolute; top:-3px; bottom:-3px; width: 4px; border-radius: 4px;
  background: #f472b6; box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.igm-bench-labels { display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.45); }
.igm-auth-bar { height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.05); position: relative; margin: 8px 0; }
.igm-auth-fill { height: 100%; border-radius: 999px; transition: width .35s; }
.igm-status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}
.igm-status-pill.excelente { background: rgba(74,222,128,0.18); color: #86efac; }
.igm-status-pill.bom       { background: rgba(34,211,238,0.18); color: #67e8f9; }
.igm-status-pill.regular   { background: rgba(250,204,21,0.18); color: #fde68a; }
.igm-status-pill.fraco     { background: rgba(251,146,60,0.18); color: #fdba74; }
.igm-status-pill.muito_fraco { background: rgba(248,113,113,0.18); color: #fca5a5; }
.igm-status-pill.limpo     { background: rgba(74,222,128,0.18); color: #86efac; }
.igm-status-pill.suspeito  { background: rgba(250,204,21,0.18); color: #fde68a; }
.igm-status-pill.alta      { background: rgba(248,113,113,0.18); color: #fca5a5; }
.igm-post-card {
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.18s;
}
.igm-post-card:hover { transform: translateY(-2px); border-color: rgba(244,114,182,0.4); }
.igm-post-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: rgba(0,0,0,0.3); }
.igm-post-meta { padding: 10px 12px; font-size: 12px; color: rgba(255,255,255,0.7); display:grid; gap:4px; }
.igm-post-meta b { color: #fff; font-weight: 600; }
#igm-embed-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.78); backdrop-filter:none; align-items: center; justify-content: center; padding: 24px; display: flex; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s; }
#igm-embed-modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
#igm-embed-modal .igm-embed-dialog { position: relative; width: 100%; max-width: 540px; max-height: 92vh; display: flex; flex-direction: column; }
#igm-embed-modal .igm-embed-close { position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(20,20,28,0.95); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
#igm-embed-modal .igm-embed-close:hover { background: #30343b; }
#igm-embed-modal #igm-embed-body { position: relative; width: 100%; max-height: 92vh; min-height: 320px; overflow: auto; border-radius: 14px; background: #000; box-shadow:0 1px 3px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; }
#igm-embed-modal .igm-embed-media { width: 100%; height: auto; max-height: 92vh; display: block; border-radius: 14px; object-fit: contain; background: #000; }
#igm-embed-modal .igm-native-fallback { padding: 48px 28px; color: rgba(255,255,255,.72); text-align: center; }
#igm-embed-modal .igm-native-fallback a { display:inline-flex; margin-top:14px; padding:10px 14px; border:1px solid rgba(255,255,255,.24); border-radius:8px; color:#fff; text-decoration:none; }
#igm-embed-modal .igm-carousel { width:100%; position:relative; }
#igm-embed-modal .igm-carousel-slide { display:none; width:100%; }
#igm-embed-modal .igm-carousel-slide.active { display:block; }
#igm-embed-modal .igm-carousel-nav { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:5px 8px; border-radius:999px; background:rgba(10,12,16,.86); color:#fff; }
#igm-embed-modal .igm-carousel-nav:empty { display:none; }
#igm-embed-modal .igm-carousel-nav button { width:32px; height:32px; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:#20242a; color:#fff; font-size:24px; line-height:1; cursor:pointer; }
#igm-embed-modal .igm-carousel-count { min-width:44px; text-align:center; font-size:12px; }
@media (max-width: 600px) { #igm-embed-modal .igm-embed-dialog { max-width: 100%; } }

/* Conversas */
.conv-item {
  display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; transition: background 0.15s;
}
.conv-item:hover { background: rgba(255,255,255,0.03); }
.conv-item.active { background: rgba(244,114,182,0.08); border-left: 2px solid #f472b6; }
.conv-avatar {
  width: 40px; height: 40px; border-radius: 50%; background:var(--panel-2, #111824);
  display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff;
  font-size: 14px; flex-shrink: 0; overflow: hidden; position: relative;
}
.conv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conv-meta { flex:1; min-width:0; }
.conv-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-last { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv-time { font-size: 11px; color: rgba(255,255,255,0.35); flex-shrink:0; }
.conv-bubble {
  max-width: 70%; padding: 9px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4;
  word-wrap: break-word; white-space: pre-wrap;
}
.conv-bubble.inbound  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); align-self: flex-start; border-bottom-left-radius: 4px; }
.conv-bubble.outbound { background:var(--panel-2, #111824); color:#fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.conv-bubble-time { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 4px; }
.conv-bubble-row { display:flex; flex-direction: column; max-width: 80%; }
.conv-bubble-row.outbound { align-self: flex-end; align-items: flex-end; }
.conv-bubble-row.inbound  { align-self: flex-start; align-items: flex-start; }
.conv-empty { padding: 80px 20px; text-align: center; color: rgba(255,255,255,0.4); }
.conv-channel-badge {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55);
  font-size: 10px; letter-spacing: 0.2px;
}

/* Filtro de período + custo de disparo (menu Canais) — var-based (light/dark) */
#page-channels .cn-periods { display:inline-flex; background:var(--bg-card-solid,#111); border:1px solid var(--line,rgba(255,255,255,0.10)); border-radius:11px; padding:3px; }
#page-channels .cn-period { border:none; background:transparent; color:var(--text-dim,rgba(255,255,255,0.45)); font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:8px; cursor:pointer; transition:.15s; }
#page-channels .cn-period:hover { color:var(--text,#fff); }
#page-channels .cn-period.active { background:var(--accent,#22e0d6); color:#04201e; box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-channels .cn-date { background:var(--bg-card-solid,#111); border:1px solid var(--line,rgba(255,255,255,0.10)); color:var(--text,#fff); padding:6px 10px; border-radius:8px; font-size:12px; outline:none; }
[data-theme="light"] #page-channels .cn-period.active { color:#fff; }

/* Bloco de custo no card WhatsApp */
.ch-usage { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:2px; position:relative; }
.ch-usage-box { background:var(--accent-glow,rgba(34,224,214,0.10)); border:1px solid var(--line,rgba(255,255,255,0.10)); border-radius:10px; padding:9px 11px; }
.ch-usage-box .lbl { font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim,rgba(255,255,255,0.45)); font-weight:600; }
.ch-usage-box .val { font-size:18px; font-weight:700; color:var(--text,#fff); margin-top:3px; font-variant-numeric:tabular-nums; line-height:1.05; }
.ch-usage-box.cost .val { color:var(--accent,#22e0d6); }
.ch-usage-box .info { cursor:help; }

/* Cards quadrados de canal — substituem o antigo channel-card */
.channels-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px;
}
.ch-card {
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px;
  position: relative; transition: all 0.2s; overflow: hidden;
}
.ch-card:hover { border-color: rgba(244,114,182,0.4); background: rgba(255,255,255,0.04); transform: translateY(-2px); }
.ch-card.is-ig::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--panel-2, #111824);
}
.ch-card.is-wa::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--panel-2, #111824);
}
.ch-header { display:flex; align-items:center; gap:12px; }
.ch-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background:var(--panel-2, #111824);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:20px;
  flex-shrink:0; border: 2px solid rgba(255,255,255,0.06);
}
.ch-name-block { flex:1; min-width:0; }
.ch-display { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.ch-username { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.ch-phone-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px;
  background: rgba(37, 211, 102, 0.10); border: 1px solid rgba(37, 211, 102, 0.28);
  border-radius: 10px; font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 15px; font-weight: 600; color: #4ade80; letter-spacing: 0.5px;
}
.ch-phone-row .ch-phone-icon { font-size: 14px; opacity: 0.85; }
.ch-phone-row .ch-phone-num { flex: 1; }
.ch-phone-row .ch-phone-copy {
  background: none; border: 0; color: rgba(255,255,255,0.5); cursor: pointer;
  font-size: 12px; padding: 2px 6px; border-radius: 6px;
}
.ch-phone-row .ch-phone-copy:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ch-owner-row { margin-top: 8px; }
.ch-owner-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px;
  background: rgba(99, 102, 241, 0.16); border: 1px solid rgba(99, 102, 241, 0.42);
  color: #c7d2fe; box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.ch-owner-chip.me { background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.45); color: #86efac; }
.ch-owner-chip.admin { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.45); color: #fcd34d; }
.ch-owner-chip.none { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.5); }
.ch-provider-tag {
  font-size: 10px; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.3px;
  background: rgba(244,114,182,0.15); color: #f9a8d4; display:inline-block; margin-top:4px;
}
.ch-provider-tag.wa { background: rgba(34,197,94,0.18); color: #86efac; }
.ch-bio { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; }
.ch-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); }
.ch-stat { text-align:center; }
.ch-stat-num { font-size: 16px; font-weight: 700; color: #fff; line-height: 1; }
.ch-stat-lbl { font-size: 10px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }
.ch-meta-row { font-size: 11px; color: rgba(255,255,255,0.45); display:flex; flex-direction:column; gap:3px; }
.ch-meta-row b { color: rgba(255,255,255,0.7); font-weight: 500; }
.ch-meta-row .webhook { color: rgba(34,211,238,0.7); font-family: monospace; word-break: break-all; }
.ch-meta-row .no-webhook { color: #f87171; }
.ch-status-pill {
  font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 600; letter-spacing: 0.3px;
}
.ch-status-pill.active { background: rgba(34,197,94,0.18); color: #86efac; }
.ch-status-pill.expired, .ch-status-pill.token_refresh_warning { background: rgba(248,113,113,0.18); color: #fca5a5; }
.ch-status-pill.inactive { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.ch-actions { display: flex; gap: 8px; }
.ch-btn { flex:1; padding: 8px 0; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; border:0; transition: all 0.15s; }
.ch-btn.edit { background: rgba(99,102,241,0.15); color: #c7d2fe; }
.ch-btn.edit:hover { background: rgba(99,102,241,0.28); }
.ch-btn.danger { background: rgba(239,68,68,0.12); color: #fca5a5; }
.ch-btn.danger:hover { background: rgba(239,68,68,0.25); }
.ch-empty {
  text-align:center; padding: 60px 20px; color: rgba(255,255,255,0.4);
  border: 2px dashed rgba(255,255,255,0.08); border-radius: 18px;
}

/* Automações */
.auto-tabs { display: inline-flex; gap: 4px; margin-left: 16px; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 4px; }
.auto-tab { background: transparent; border: 0; color: rgba(255,255,255,0.6); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 12px; transition: all 0.15s; }
.auto-tab:hover { background: rgba(255,255,255,0.04); color: #fff; }
.auto-tab.active { background: rgba(244,114,182,0.18); color: #f9a8d4; }
.auto-card {
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px;
  position: relative; transition: all 0.18s;
}
.auto-card:hover { border-color: rgba(244,114,182,0.35); }
.auto-card.disabled { opacity: 0.55; }
.auto-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.auto-name { font-size: 15px; font-weight: 700; color: #fff; }
.auto-type-pill { font-size: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(99,102,241,0.18); color: #c4b5fd; }
.auto-toggle { width: 36px; height: 20px; background: rgba(255,255,255,0.1); border-radius: 999px; position: relative; cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
.auto-toggle.on { background:var(--panel-2, #111824); }
.auto-toggle::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition: all 0.18s; }
.auto-toggle.on::after { left:18px; }
.auto-meta { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.auto-meta b { color: rgba(255,255,255,0.85); font-weight: 500; }
.auto-actions-row { display: flex; gap: 8px; margin-top: auto; }
.auto-kw { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(250,204,21,0.15); color: #fde68a; font-size: 11px; margin: 2px 4px 2px 0; }
.auto-success { color: #4ade80; }
.auto-fail { color: #f87171; }

/* ═══════════════════════════════════════════════════════════════════
   NAIA OS — COCKPIT DESIGN SYSTEM (bundle: tokens + 18 telas reescritas)
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#070a0f; --panel:#0c111a; --panel-2:#111824; --raised:#161f2e;
  --line:rgba(255,255,255,0.07); --line-strong:rgba(255,255,255,0.12);
  --text:#eef2f8; --dim:#9aa6b8; --mute:#8591a5;
  --accent:#22e0d6; --accent-deep:#0fb5ad; --accent-glow:rgba(34,224,214,0.16);
  --live:#34e89e; --warn:#f5b544; --bad:#ff5d6c; --info:#4d7cff;
  --r:14px; --r-sm:10px; --mono:'JetBrains Mono',ui-monospace,monospace;
  /* compat com tokens antigos do sistema */
  --bg-primary:#070a0f; --bg-secondary:#0b0f17;
  --bg-card:rgba(255,255,255,0.035); --bg-card-solid:#0c111a;
  --border-color:rgba(255,255,255,0.07); --border-hover:rgba(34,224,214,0.30);
  --sidebar-bg:rgba(8,11,17,0.82); --sidebar-border:rgba(255,255,255,0.06);
  --input-bg:rgba(255,255,255,0.025); --modal-bg:#0b0f17;
  --table-hover:rgba(34,224,214,0.045);
  --card-radius:14px; --card-radius-lg:18px;
}
html,body{ background:#070a0f !important; }
body{
  background:var(--panel-2, #111824);
  background-size:46px 46px,46px 46px,auto,auto,auto !important;
  background-attachment:fixed !important;
}
[data-theme="light"] body{ background:#eef1f7 !important; }
::-webkit-scrollbar{ width:9px;height:9px }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.10);border-radius:9px;border:2px solid transparent;background-clip:padding-box }
::-webkit-scrollbar-thumb:hover{ background:rgba(34,224,214,0.35) }

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — OVERRIDE COMPLETO DOS TOKENS COCKPIT (causa-raiz)
   O :root cockpit acima define tudo em dark e o [data-theme="light"]
   nunca cobriu esses tokens. Este bloco inverte todos os tokens cockpit
   + os tokens compat antigos, com accent/live/warn/info ESCURECIDOS
   para contraste em fundo claro. Sidebar fica DARK no light (decisão).
   ════════════════════════════════════════════════════════════════ */
[data-theme="light"]{
  --bg:#eef1f7; --panel:#f9fafc; --panel-2:#f1f4f9; --raised:#e9edf4;
  --line:#dde3ee; --line-strong:#c3cde0;
  --text:#16202e; --dim:#5a6478; --mute:#5a6478;
  --accent:#0e7490; --accent-deep:#155e75; --accent-glow:rgba(14,116,144,0.14);
  --live:#15803d; --warn:#b45309; --bad:#dc2626; --info:#1d4ed8;
  /* compat (re-aponta os tokens antigos pros valores claros, vencendo o compat escuro) */
  --bg-primary:#eef1f7; --bg-secondary:#f4f6fa;
  --bg-card:#f9fafc; --bg-card-solid:#f9fafc;
  --text-primary:#16202e; --text-secondary:#5a6478; --text-dim:#5a6478; --text-muted:#5a6478;
  --border-color:#dde3ee; --border-hover:#9aa8c4;
  --input-bg:#ffffff; --modal-bg:#f9fafc;
  --table-hover:#e9edf4;
  --card-radius:14px; --card-radius-lg:18px;
}
/* casca: zera o grid/radiais brancos e o #070a0f !important do body no light */
[data-theme="light"] html{ background:#eef1f7 !important; }
/* Híbrido: conteúdo claro também herda os status semânticos do claro. */
:root[data-theme="hybrid"]{ --live:#15803d; --warn:#b45309; --bad:#dc2626; --info:#1d4ed8; }
[data-theme="light"] body{
  background:var(--panel-2, #111824);
  background-size:46px 46px,46px 46px,auto,auto,auto !important;
  background-attachment:fixed !important;
}
/* scrollbar cockpit hardcoded (branco invisível no claro) */
[data-theme="light"] ::-webkit-scrollbar-thumb{ background:rgba(15,23,42,0.22) }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:rgba(8,145,178,0.40) }

/* ── extensão das classes Tailwind de opacidade não cobertas (white/black) ── */
[data-theme="light"] .text-white\/90,
[data-theme="light"] .text-white\/95{ color:var(--text) !important; }
[data-theme="light"] .text-white\/80,
[data-theme="light"] .text-white\/70,
[data-theme="light"] .text-white\/60,
[data-theme="light"] .text-white\/55,
[data-theme="light"] .text-white\/50,
[data-theme="light"] .text-white\/45{ color:var(--dim) !important; }
[data-theme="light"] .text-white\/40,
[data-theme="light"] .text-white\/35,
[data-theme="light"] .text-white\/30,
[data-theme="light"] .text-white\/25,
[data-theme="light"] .text-white\/20,
[data-theme="light"] .text-white\/15{ color:var(--mute) !important; }
[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10{ background:var(--panel-2) !important; }
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/15{ border-color:var(--line) !important; }
[data-theme="light"] .bg-black\/40,
[data-theme="light"] .bg-black\/60{ background:rgba(15,23,42,0.45) !important; }

/* ── sidebar fica ESCURA no light (decisão; nav-item já assume texto claro) ── */
[data-theme="light"] .sidebar{
  background:var(--panel-2, #111824);
  border-right:1px solid rgba(255,255,255,0.06) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
[data-theme="light"] .sidebar-footer{ border-top-color:rgba(255,255,255,0.06) !important; }
[data-theme="light"] .sidebar-footer .sidebar-label{ color:rgba(255,255,255,0.55) !important; }
[data-theme="light"] .logout-btn{ color:rgba(255,255,255,0.78) !important; }
[data-theme="light"] .logout-btn:hover{ background:rgba(255,255,255,0.07) !important; color:#fff !important; }
[data-theme="light"] .sidebar .nav-item{ color:rgba(255,255,255,0.72) !important; }
[data-theme="light"] .sidebar .nav-item:hover{ background:rgba(255,255,255,0.06) !important; color:#fff !important; }
[data-theme="light"] .sidebar .nav-item.active{ color:#22e0d6 !important; }
[data-theme="light"] .sidebar-collapse-btn{ color:#9aa6b8 !important; }
/* LOGO TRAVADO no light: badge "CRM" e wordmark "AVALANCHE" IDÊNTICOS ao dark.
   Repete os valores fixos escuros para vencer specificity do seletor light. */
[data-theme="light"] .sidebar-logo,
[data-theme="light"] .sidebar-logo .sidebar-label{ color:#eef2f8 !important; }
[data-theme="light"] .sidebar-logo .icon{
  background:#161f2e !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  color:#22e0d6 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* ══════════════════════════════════════════════════════════════════
   IDENTIDADE VISUAL — PALETAS DE MARCA (ortogonais ao tema)
   A paleta troca APENAS as vars de accent/marca + um leve tingimento de
   fundo, mantendo contraste e legibilidade. 'ciano' = SEM override (usa os
   valores base do :root cockpit), garantindo padrão IDÊNTICO ao de hoje.
   Funciona combinada com [data-theme="light"]. Transição suave global.
   ════════════════════════════════════════════════════════════════ */
:root, [data-palette]{ transition: --accent .35s ease, --accent-deep .35s ease; }
body{ transition: background-color .35s ease; }

/* ── ROXO (violeta elétrico) — DARK ── */
[data-palette="roxo"]{
  --accent:#8b5cf6; --accent-deep:#7c3aed; --accent-glow:rgba(139,92,246,0.16);
  --border-hover:rgba(139,92,246,0.30); --table-hover:rgba(139,92,246,0.045);
}
[data-palette="roxo"] body{
  background:var(--panel-2, #111824);
  background-size:46px 46px,46px 46px,auto,auto,auto !important;
  background-attachment:fixed !important;
}
/* ── ROXO — LIGHT ── */
[data-theme="light"][data-palette="roxo"]{
  --accent:#7c3aed; --accent-deep:#6d28d9; --accent-glow:rgba(124,58,237,0.14);
  --border-hover:rgba(124,58,237,0.35); --table-hover:rgba(124,58,237,0.05);
}
[data-theme="light"][data-palette="roxo"] body{
  background:var(--panel-2, #111824);
  background-size:46px 46px,46px 46px,auto,auto,auto !important;
  background-attachment:fixed !important;
}

/* ── ÂMBAR (dourado) — DARK ── */
[data-palette="ambar"]{
  --accent:#f5b544; --accent-deep:#d99425; --accent-glow:rgba(245,181,68,0.16);
  --border-hover:rgba(245,181,68,0.30); --table-hover:rgba(245,181,68,0.05);
}
[data-palette="ambar"] body{
  background:var(--panel-2, #111824);
  background-size:46px 46px,46px 46px,auto,auto,auto !important;
  background-attachment:fixed !important;
}
/* ── ÂMBAR — LIGHT (accent escurecido pra contraste em fundo claro) ── */
[data-theme="light"][data-palette="ambar"]{
  --accent:#b45309; --accent-deep:#92400e; --accent-glow:rgba(180,83,9,0.14);
  --border-hover:rgba(180,83,9,0.35); --table-hover:rgba(180,83,9,0.06);
}
[data-theme="light"][data-palette="ambar"] body{
  background:var(--panel-2, #111824);
  background-size:46px 46px,46px 46px,auto,auto,auto !important;
  background-attachment:fixed !important;
}

/* ── ESMERALDA (verde vivo) — DARK ── */
[data-palette="esmeralda"]{
  --accent:#34e89e; --accent-deep:#10b981; --accent-glow:rgba(52,232,158,0.16);
  --border-hover:rgba(52,232,158,0.30); --table-hover:rgba(52,232,158,0.05);
}
[data-palette="esmeralda"] body{
  background:var(--panel-2, #111824);
  background-size:46px 46px,46px 46px,auto,auto,auto !important;
  background-attachment:fixed !important;
}
/* ── ESMERALDA — LIGHT ── */
[data-theme="light"][data-palette="esmeralda"]{
  --accent:#059669; --accent-deep:#047857; --accent-glow:rgba(5,150,105,0.14);
  --border-hover:rgba(5,150,105,0.35); --table-hover:rgba(5,150,105,0.06);
}
[data-theme="light"][data-palette="esmeralda"] body{
  background:var(--panel-2, #111824);
  background-size:46px 46px,46px 46px,auto,auto,auto !important;
  background-attachment:fixed !important;
}

/* ── MAGENTA (rosa/magenta) — DARK ── */
[data-palette="magenta"]{
  --accent:#ec4899; --accent-deep:#db2777; --accent-glow:rgba(236,72,153,0.16);
  --border-hover:rgba(236,72,153,0.30); --table-hover:rgba(236,72,153,0.05);
}
[data-palette="magenta"] body{
  background:var(--panel-2, #111824);
  background-size:46px 46px,46px 46px,auto,auto,auto !important;
  background-attachment:fixed !important;
}
/* ── MAGENTA — LIGHT ── */
[data-theme="light"][data-palette="magenta"]{
  --accent:#db2777; --accent-deep:#be185d; --accent-glow:rgba(219,39,99,0.14);
  --border-hover:rgba(219,39,99,0.35); --table-hover:rgba(219,39,99,0.06);
}
[data-theme="light"][data-palette="magenta"] body{
  background:var(--panel-2, #111824);
  background-size:46px 46px,46px 46px,auto,auto,auto !important;
  background-attachment:fixed !important;
}

/* ── LOGIN sempre CIANO: trava accent da marca dentro do overlay de login
   pra qualquer paleta (login é sempre escuro/cockpit ciano). ── */
[data-palette] .login-overlay,
[data-theme="light"][data-palette] .login-overlay{
  --accent:#22e0d6; --accent-deep:#0fb5ad; --accent-glow:rgba(34,224,214,0.16);
  --border-hover:rgba(34,224,214,0.30);
}

/* ── Identidade visual: grid de swatches no painel Minha conta ── */
.pal-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:4px; }
@media (max-width:560px){ .pal-grid{ grid-template-columns:repeat(3,1fr); } }
.pal-card{
  position:relative; border:1px solid var(--line); border-radius:12px;
  background:var(--panel-2, rgba(255,255,255,0.02)); padding:10px 8px 9px;
  cursor:pointer; text-align:center;
  transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.pal-card:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.pal-card.active{ border-color:var(--pal-accent); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.pal-swatch{
  height:34px; border-radius:9px; margin-bottom:8px;
  background:var(--panel-2, #111824);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
}
.pal-chip{ width:14px; height:14px; border-radius:50%; background:#fff; opacity:.92;
  box-shadow:0 1px 3px rgba(0,0,0,.18); }
.pal-name{ font-size:12px; font-weight:600; color:var(--dim); letter-spacing:.01em; }
.pal-card.active .pal-name{ color:var(--text); }
.pal-check{
  position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%;
  background:var(--pal-accent); color:#06121a; font-size:12px; font-weight:800;
  display:none; align-items:center; justify-content:center; line-height:1;
}
.pal-card.active .pal-check{ display:flex; }

.live-dot{ display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 1px 3px rgba(0,0,0,.18);animation:naiaPulse 2s infinite;vertical-align:middle }
@keyframes naiaPulse{ 0%{box-shadow:0 1px 3px rgba(0,0,0,.18)} 70%{box-shadow:0 1px 3px rgba(0,0,0,.18)} 100%{box-shadow:0 1px 3px rgba(0,0,0,.18)} }


/* === SHELL + SIDEBAR + TOPBAR === */
/* Redesign cockpit: preto tingido, vidro fino, acento ciano disciplinado.
   Sobrescreve a casca real (.sidebar / .nav-item / header da #page-dashboard).
   Targeta classes REAIS do agent-manager.py. */

/* ---------- SIDEBAR ---------- */
.sidebar {
  width: 248px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  overflow-x: hidden;
}

/* === COLAPSO: rail estreito so de icones (vence o width:248px acima) === */
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .sidebar-label { opacity: 0; width: 0; display: none; }
.sidebar.collapsed .sidebar-logo { padding: 60px 0 18px; justify-content: center; }
.sidebar.collapsed .sidebar-nav { padding: 10px 8px; }
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
}
.sidebar.collapsed .nav-item .nav-icon { margin: 0 auto; }
.sidebar.collapsed .nav-item.active::before { left: 0; height: 18px; }
.sidebar.collapsed .sidebar-footer { padding: 14px 8px; text-align: center; }
.sidebar.collapsed .logout-btn { justify-content: center; padding: 11px 0; gap: 0; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

/* ── Minha conta (account-btn) — hover ciano em vez do vermelho do Sair ── */
.logout-btn.account-btn { margin-bottom: 8px; color: var(--dim); }
.logout-btn.account-btn:hover {
  background: var(--accent-glow, rgba(34,224,214,0.08));
  border-color: var(--accent-deep, rgba(34,224,214,0.35));
  color: var(--accent, #22e0d6);
}
/* ── Account panel ── */
.acct-readonly { opacity: 0.72; cursor: not-allowed; }
.acct-section-title { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent, #22e0d6); margin: 4px 0 14px; }
.acct-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 26px 0 22px; }
.acct-msg { font-size: 13px; margin-top: 12px; min-height: 18px; }
.acct-msg.ok { color: #34d399; }
.acct-msg.err { color: #ef4444; }
.acct-id { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.acct-id .acct-avatar { width: 46px; height: 46px; border-radius: 50%;
  background:var(--panel-2, #111824); display: flex; align-items: center; justify-content: center;
  color: #021; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.acct-id .acct-meta b { display: block; color: #fff; font-size: 15px; }
.acct-id .acct-meta span { font-size: 12px; color: rgba(255,255,255,0.5); }

/* botão de colapsar — neutro com hover ciano contido */
/* ── botão de colapsar (refeito): redondo, 32px, ancorado na borda interna direita
   da sidebar. NÃO transborda (a sidebar tem overflow-x:hidden, que cortava o antigo
   right:-12px). Estável em aberto e colapsado. Escuro nos dois temas. ── */
.sidebar-collapse-btn {
  position: absolute;
  top: 18px;
  right: 12px;
  left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* sempre escuro (sidebar é escura nos 2 temas) — valores fixos, não var de tema */
  background: #161f2e;
  border: 1px solid rgba(255,255,255,0.14);
  color: #9aa6b8;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 52;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.sidebar-collapse-btn svg {
  width: 16px;
  height: 16px;
  transition: transform .25s cubic-bezier(0.4,0,0.2,1);
}
.sidebar-collapse-btn:hover {
  background: rgba(34,224,214,0.16);
  border-color: rgba(15,181,173,0.9);
  color: #22e0d6;
  transform: scale(1.06);
}
.sidebar-collapse-btn:active { transform: scale(0.94); }
/* colapsado: botão centralizado no rail estreito, chevron aponta pra direita */
.sidebar.collapsed .sidebar-collapse-btn { right: 16px; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

/* ---------- LOGO / BRAND ---------- */
.sidebar-logo {
  padding: 24px 20px 22px;
  /* cor da marca TRAVADA (não usa var de tema): idêntica no dark e no light */
  color: #eef2f8;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sidebar-logo .icon {
  width: 34px;
  height: 34px;
  /* badge "CRM" TRAVADO em valores escuros fixos — NÃO herda var de tema */
  background: #161f2e;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #22e0d6;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.sidebar-logo .sidebar-label {
  font-size: 15px;
  letter-spacing: 0.04em;
  /* wordmark "AVALANCHE" TRAVADO — idêntico nos dois temas */
  color: #eef2f8;
}

.sidebar-logo-txt { display:flex; flex-direction:column; line-height:1.05; }
.sidebar-logo-sub { font-size:8.5px; font-weight:600; letter-spacing:0.03em; color:rgba(238,242,248,0.55); margin-top:3px; line-height:1.3; text-transform:none; }
.sidebar.collapsed .sidebar-logo-sub { display:none; }

/* ---------- NAV ---------- */
.sidebar-nav {
  padding: 10px 12px 18px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.nav-section-label {
  display: none;
  padding: 14px 12px 6px;
  color: #7f8a9b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}
.sidebar-nav > .nav-section-label:first-child { padding-top: 4px; }
body[data-ctx="owner"] .nav-section-label[data-nav-scope="owner"],
body[data-ctx="agency"] .nav-section-label[data-nav-scope="agency"],
body[data-ctx="operating"] .nav-section-label[data-nav-scope="operating"] { display: block; }
.sidebar.collapsed .nav-section-label { display: none; }

.nav-item {
  gap: 13px;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  color: var(--dim);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
  border: 1px solid transparent;
}
.nav-item:hover {
  background: rgba(255,255,255,0.035);
  color: var(--text);
}
.nav-item .nav-icon { opacity: 0.82; }
.nav-item:hover .nav-icon { opacity: 1; }

/* estado ATIVO — leve fundo ciano + barra/glow ciano (cockpit) */
.nav-item.active {
  background: var(--accent-glow);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
}
.nav-item.active .nav-icon { opacity: 1; color: var(--accent); }
.nav-item.active::before {
  display: none;
}

/* Ícones usam uma linguagem única. A cor de marca aparece apenas no item ativo. */
.sidebar-nav .nav-item[data-page] .nav-icon { color: currentColor; }
.sidebar-nav .nav-item.active .nav-icon { color: var(--accent); opacity: 1; }

/* tooltip do modo colapsado */
.sidebar.collapsed .nav-item::after,
.sidebar.collapsed .logout-btn::after {
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-weight: 500;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* ---------- FOOTER / LOGOUT ---------- */
.sidebar-footer {
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 11px;
}
.sidebar-footer .sidebar-label { color: var(--mute); letter-spacing: 0.04em; }
.logout-btn {
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dim);
  font-weight: 500;
}
.logout-btn:hover {
  background: rgba(255,93,108,0.08);
  border-color: rgba(255,93,108,0.35);
  color: var(--bad);
}

/* ---------- MAIN AREA ---------- */
.main-area { margin-left: 248px; }
body:has(.sidebar.collapsed) .main-area,
.sidebar.collapsed ~ .main-area { margin-left: 64px; }

/* ---------- TOPBAR (header da #page-dashboard) ---------- */
#page-dashboard > header.glass {
  background:var(--panel-2, #111824);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 18px 30px !important;
}

/* logo-box do header: tira o gradiente azul→roxo, vira vidro neutro c/ ícone ciano */
#page-dashboard > header .ui-icon-tile.swatch-blue-500.swatch-purple-600 {
  background: var(--raised) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-dashboard > header .ui-icon-tile.swatch-blue-500.swatch-purple-600 svg {
  color: var(--accent) !important;
}
#page-dashboard > header #dash-header-title {
  color: var(--text) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* selects / inputs do header → padrão cockpit (vencem o estilo inline) */
#page-dashboard > header select,
#page-dashboard > header input[type="date"] {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm) !important;
  font-family: inherit !important;
  transition: border-color .18s ease !important;
}
#page-dashboard > header select:hover,
#page-dashboard > header input[type="date"]:hover { border-color: var(--line-strong) !important; }
#page-dashboard > header select:focus,
#page-dashboard > header input[type="date"]:focus {
  outline: none !important;
  border-color: var(--accent-deep) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-dashboard > header #customDateRange span { color: var(--mute) !important; }
#page-dashboard > header #customDateRange button {
  background: var(--accent-glow) !important;
  border: 1px solid var(--accent-deep) !important;
  color: var(--accent) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
}
#page-dashboard > header #customDateRange button:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/* botões de tema/fullscreen do header */
#page-dashboard > header .theme-toggle {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--dim) !important;
  border-radius: var(--r-sm) !important;
}
#page-dashboard > header .theme-toggle:hover {
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}

/* data atual */
#page-dashboard > header #currentDate {
  color: var(--mute) !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* indicador "Live" — verde --live disciplinado + pulso */
#page-dashboard > header .bg-green-400 {
  background: var(--live) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-dashboard > header .text-white\/80:last-of-type,
#page-dashboard > header span.text-xs.text-white\/80 {
  color: var(--live) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}


/* === DASHBOARD — COCKPIT === */
/* Sobrescreve o visual da tela #page-dashboard pro padrao cockpit:
   preto tingido, painel de vidro com borda fina, acento ciano disciplinado,
   numeros em fonte mono telemetria. ZERO neon, ZERO rosa/roxo. Tudo escopado
   em #page-dashboard pra nao vazar pra outras telas. */

/* ---------- shell ---------- */
#page-dashboard{
  background:var(--bg) !important;
  color:var(--text) !important;
}

/* ---------- header (glass sticky) ---------- */
#page-dashboard > header.glass{
  background:var(--panel-2, #111824);
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* logo tile do header: tira o gradiente azul/roxo, vira ciano contido */
#page-dashboard > header.glass .ui-icon-tile.swatch-blue-500.swatch-purple-600{
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
}
#page-dashboard > header.glass .ui-icon-tile.swatch-blue-500.swatch-purple-600 svg{
  color:var(--accent) !important;
}
#page-dashboard #dash-header-title{ color:var(--text) !important; }

/* selects e inputs do header */
#page-dashboard #dashAgentSelect,
#page-dashboard #periodFilter,
#page-dashboard #dateFrom,
#page-dashboard #dateTo{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:var(--r-sm) !important;
  outline:none !important;
}
#page-dashboard #dashAgentSelect:hover,
#page-dashboard #periodFilter:hover{ border-color:var(--line-strong) !important; }
#page-dashboard #customDateRange button{
  background:var(--accent-glow) !important;
  border:1px solid var(--accent-deep) !important;
  color:var(--accent) !important;
  border-radius:var(--r-sm) !important;
  font-variant-numeric:tabular-nums;
}

/* status "Live" */
#page-dashboard > header.glass .bg-green-400{
  background:var(--live) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-dashboard #currentDate{ color:var(--mute) !important; }

/* ---------- cards (glass / glass-strong) ---------- */
#page-dashboard .glass,
#page-dashboard .glass-strong{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
/* container card do dash usava border-radius 3xl gigante; mantem contido */
#page-dashboard .rounded-3xl{ border-radius:var(--r) !important; }
#page-dashboard .rounded-lg,
#page-dashboard .rounded-t{ border-radius:var(--r-sm) !important; }
#page-dashboard .rounded-full{ border-radius:50% !important; }

/* MATA a borda LED decorative-fill girando (ciano espalhado sem proposito) */
#page-dashboard .surface-border::before{
  display:none !important;
}

/* hover contido: borda ganha leve brilho ciano, sem levitar exagerado */
#page-dashboard .card-hover{
  transition:border-color .18s,box-shadow .18s,transform .18s !important;
}
#page-dashboard .card-hover:hover{
  transform:none !important;
  border-color:var(--accent-glow) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* MATA os glows coloridos espalhados */
#page-dashboard .glow-blue,
#page-dashboard .glow-purple,
#page-dashboard .glow-cyan{
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* ---------- numeros / metricas (mono telemetria) ---------- */
#page-dashboard .stat-number{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--text) !important;
  color:var(--text) !important;
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:-0.02em !important;
}
/* labels uppercase pequenas viram --mute, hierarquia limpa */
#page-dashboard .uppercase.tracking-wider,
#page-dashboard .uppercase.tracking-wide{ color:var(--mute) !important; }

/* textos genericos do dash pra hierarquia cockpit */
#page-dashboard h2,
#page-dashboard h3{ color:var(--text) !important; }
#page-dashboard .text-white\/80{ color:var(--dim) !important; }
#page-dashboard .text-white\/60,
#page-dashboard .text-white\/50,
#page-dashboard .text-white\/40{ color:var(--dim) !important; }
#page-dashboard .text-white\/30,
#page-dashboard .text-white\/20,
#page-dashboard .text-white\/15{ color:var(--mute) !important; }

/* divisores verticais finos do profile card */
#page-dashboard .bg-white\/5{ background:var(--line) !important; }

/* ---------- profile avatar (rainbow -> ciano contido) ---------- */
#page-dashboard .ui-icon-tile.swatch-blue-500.swatch-purple-500.swatch-cyan-400{
  background:var(--raised) !important;
  border:1px solid var(--accent-glow) !important;
}
#page-dashboard .ui-icon-tile.swatch-blue-500.swatch-purple-500.swatch-cyan-400 > div{
  background:var(--panel-2) !important;
}
#page-dashboard .ui-icon-tile.swatch-blue-500.swatch-purple-500.swatch-cyan-400 svg{
  color:var(--accent) !important;
}

/* ---------- icon tiles dos metric cards (neon -> neutro) ---------- */
/* todos os fundos coloridos dos quadradinhos de icone viram raised neutro */
#page-dashboard .bg-white\/10,
#page-dashboard .bg-gray-300\/10,
#page-dashboard .bg-cyan-500\/10,
#page-dashboard .bg-pink-500\/10,
#page-dashboard .bg-orange-500\/10,
#page-dashboard .bg-green-500\/10,
#page-dashboard .bg-emerald-500\/10,
#page-dashboard .ui-icon-tile.swatch-blue-500\/20.swatch-purple-500\/20,
#page-dashboard .ui-icon-tile.swatch-cyan-500\/20.swatch-blue-500\/20,
#page-dashboard .ui-icon-tile.swatch-pink-500\/20.swatch-purple-500\/20,
#page-dashboard .ui-icon-tile.swatch-green-500\/20.swatch-cyan-500\/20,
#page-dashboard .ui-icon-tile.swatch-orange-500\/20.swatch-pink-500\/20{
  background:var(--raised) !important;
  border:1px solid var(--line) !important;
}
/* icones dentro dos tiles: cinza neutro, sem verde/rosa/laranja chapado */
#page-dashboard .glass svg.text-green-400,
#page-dashboard .glass svg.text-emerald-400,
#page-dashboard .glass svg.text-gray-200,
#page-dashboard .glass svg.text-gray-300,
#page-dashboard .glass svg.text-gray-400,
#page-dashboard .glass-strong svg.text-gray-200,
#page-dashboard .glass-strong svg.text-gray-300,
#page-dashboard .glass-strong svg.text-gray-400{
  color:var(--dim) !important;
}
/* icone do header de cada painel forte = ciano discreto (destaque de secao) */
#page-dashboard .glass-strong .mb-6 svg.text-white,
#page-dashboard .glass .mb-3 svg.text-white{ color:var(--accent) !important; }

/* ---------- funil de atividade (gradientes berrantes -> sobrio) ---------- */
/* trilha de fundo */
#page-dashboard #dash-funnel .bg-white\/\[0\.02\]{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
}
/* barras: ciano graduado sobrio (primaria) ... */
#page-dashboard .funnel-bar{
  border-radius:var(--r-sm) !important;
  transition:width .8s cubic-bezier(.2,.85,.2,1) !important;
}
#page-dashboard #funnel-total-bar,
#page-dashboard #funnel-active-bar{
  background:var(--panel-2, #111824);
}
/* ... e info azul graduado pros secundarios (mensagens / contatos) */
#page-dashboard #funnel-in-bar,
#page-dashboard #funnel-out-bar,
#page-dashboard #funnel-contacts-bar{
  background:var(--panel-2, #111824);
}
/* valor sobreposto na barra em mono */
#page-dashboard #dash-funnel span[id$="-val"]{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  color:var(--text) !important;
}
#page-dashboard #dash-funnel .text-white\/40{ color:var(--mute) !important; }

/* ---------- tabela atividade recente ---------- */
#page-dashboard table thead tr{ border-color:var(--line) !important; }
#page-dashboard table th{ color:var(--mute) !important; }
#page-dashboard #dash-recent .text-white\/20,
#page-dashboard #dash-recent .text-white\/10{ color:var(--mute) !important; }

/* ---------- donut: segmentos neon -> ciano/info/neutro ---------- */
#page-dashboard #donut-chart circle[stroke="rgba(255,255,255,0.03)"]{
  stroke:var(--line) !important;
}
#page-dashboard #donut-seg-0{ stroke:var(--accent) !important; }
#page-dashboard #donut-seg-1{ stroke:var(--info) !important; }
#page-dashboard #donut-seg-2{ stroke:var(--accent-deep) !important; }
#page-dashboard #donut-seg-3{ stroke:var(--dim) !important; }
#page-dashboard #donut-seg-4{ stroke:var(--mute) !important; }
/* legenda do donut: bolinhas neon -> mesma escala sobria */
#page-dashboard #donut-legend .bg-blue-500\/60{ background:var(--accent) !important; }
#page-dashboard #donut-legend .text-white\/40{ color:var(--dim) !important; }
#page-dashboard #donut-legend .text-white\/30{ color:var(--mute) !important; }

/* ---------- heatmap: cyan escalonado contido ---------- */
#page-dashboard .heatmap-cell{ transition:background .3s ease !important; }
#page-dashboard .bg-cyan-500\/15{ background:rgba(34,224,214,0.10) !important; }
#page-dashboard .bg-cyan-500\/30{ background:rgba(34,224,214,0.22) !important; }
#page-dashboard .bg-cyan-500\/50{ background:rgba(34,224,214,0.40) !important; }
#page-dashboard .bg-cyan-500\/70{ background:rgba(34,224,214,0.58) !important; }
#page-dashboard #heatmap-container .bg-white\/\[0\.02\]{
  background:var(--panel-2) !important;
}

/* ---------- historico semanal (barras) ---------- */
/* recebidas = ciano contido, enviadas = info azul (troca vermelho neon) */
#page-dashboard .bg-red-500\/50{ background:var(--info) !important; }
#page-dashboard .bg-red-500\/15{ background:rgba(77,124,255,0.30) !important; }
#page-dashboard #weekly-bars [id^="wb-in-"]{ background:rgba(34,224,214,0.30) !important; }
#page-dashboard #weekly-bars [id^="wb-out-"]{ background:rgba(77,124,255,0.30) !important; }
#page-dashboard #weekly-bars [id^="wb-val-"]{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  color:var(--dim) !important;
}
#page-dashboard #weekly-bars [id^="wb-label-"]{ color:var(--mute) !important; }

/* ---------- footer ---------- */
#page-dashboard .text-white\/15{ color:var(--mute) !important; }

/* ---------- theme toggle / fullscreen ---------- */
#page-dashboard .theme-toggle{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  color:var(--dim) !important;
  border-radius:var(--r-sm) !important;
}
#page-dashboard .theme-toggle:hover{
  border-color:var(--accent-glow) !important;
  color:var(--text) !important;
}


/* === Conversas (inbox) === */
/* Cockpit redesign — substitui rosa/roxo neon e caixas Windows 95 por vidro escuro,
   acento ciano disciplinado e bolhas estilo WhatsApp premium.
   Tokens globais (:root): --bg --panel --panel-2 --raised --line --line-strong
   --text --dim --mute --accent --accent-deep --accent-glow --live --warn --bad --info
   --r --r-sm --mono. Todo o escopo fica preso a #page-conversas. */

/* ---- Shell da tela: header + duas colunas ---- */
#page-conversas > header {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter:none;
}
#page-conversas > header .text-white\/80 {
  color: var(--text) !important;
  letter-spacing: -0.01em;
}
/* Ícone do cabeçalho: tira o gradiente rosa/rose, vira vidro com glyph ciano */
#page-conversas > header .ui-icon-tile {
  background: var(--raised) !important;
  background-image: none !important;
  border: 1px solid var(--line-strong);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-conversas > header .ui-icon-tile svg {
  color: var(--accent) !important;
}
#page-conversas #conv-status {
  color: var(--mute) !important;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* As duas colunas (grid inline no markup) */
#page-conversas > div[style*="grid-template-columns:340px"] {
  background: var(--bg);
}
#page-conversas #conv-list {
  border-right: 1px solid var(--line) !important;
  background: var(--panel) !important;
}
#page-conversas #conv-thread {
  background: var(--bg) !important;
}

/* ---- Lista de conversas ---- */
.conv-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line) !important;
  cursor: pointer;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.conv-item:hover {
  background: var(--panel-2) !important;
}
/* Selecionado: nada de rosa nem border-left grosso.
   Fundo accent-glow sutil + indicador ciano fino de 2px na borda esquerda. */
.conv-item.active {
  background: var(--accent-glow) !important;
  border-bottom-color: var(--line-strong) !important;
  border-left: none !important;
}
.conv-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.conv-item.active .conv-name {
  color: var(--text) !important;
}

/* Avatar: gradiente rosa/roxo -> neutro elevado com inicial clara */
.conv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--raised) !important;
  background-image: none !important;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--dim) !important;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.conv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.conv-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conv-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.conv-last {
  font-size: 12px;
  color: var(--dim) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
  line-height: 1.35;
}
.conv-time {
  font-size: 11px;
  color: var(--mute) !important;
  flex-shrink: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  padding-top: 2px;
}

/* Badge de canal: pílula neutra, sem cor berrante */
.conv-channel-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-2) !important;
  border: 1px solid var(--line);
  color: var(--mute) !important;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---- cvtag: chips de tag na fila + barra de filtro ---- */
.cvtag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.cvtag-chip {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--accent) !important;
  background: var(--accent-glow) !important;
  border: 1px solid var(--line-strong);
}
.cvtag-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
#cvtag-filter {
  max-width: 200px;
}
#cvtag-clear {
  display: none;
}
#cvtag-clear.show {
  display: inline-flex;
}

/* ---- Cabeçalho do thread ---- */
#page-conversas #conv-thread-header {
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 20px;
  background: var(--panel);
  color: var(--text);
}
#page-conversas #conv-thread-header b {
  color: var(--text);
  font-weight: 600;
}
#page-conversas #conv-thread-header span {
  color: var(--mute) !important;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Área das mensagens ---- */
#page-conversas #conv-msgs {
  /* Fundo estilo WhatsApp: base escura + padrao de doodles tileado sutil */
  background-color: #0b141a !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.05%22%3E%20%3Cpath%20d%3D%22M30%2038c-4-6-14-5-14%203%200%207%2014%2014%2014%2014s14-7%2014-14c0-8-10-9-14-3z%22%2F%3E%20%3Cpath%20d%3D%22M86%2026h34a6%206%200%200%201%206%206v16a6%206%200%200%201-6%206h-20l-9%208v-8h-5a6%206%200%200%201-6-6V32a6%206%200%200%201%206-6z%22%2F%3E%20%3Cg%3E%3Crect%20x%3D%22178%22%20y%3D%2226%22%20width%3D%2240%22%20height%3D%2228%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%22198%22%20cy%3D%2240%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M188%2026l4-6h12l4%206%22%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M244%2030l18%208-18%208%204-8z%22%2F%3E%20%3Cg%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%22110%22%20r%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%22106%22%20r%3D%221.6%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%2249%22%20cy%3D%22106%22%20r%3D%221.6%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M37%20116c3%204%2011%204%2014%200%22%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M120%2096v26a7%207%200%201%201-5-6.7V100l16-4v18a7%207%200%201%201-5-6.7%22%2F%3E%20%3Cpath%20d%3D%22M200%2092l5%2011%2012%201-9%208%203%2012-11-6-11%206%203-12-9-8%2012-1z%22%2F%3E%20%3Cpath%20d%3D%22M252%20100c-12%200-18%208-18%2016%208%200%2018-6%2018-16z%22%2F%3E%20%3Cg%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%22196%22%20r%3D%2211%22%2F%3E%3Cg%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M46%20178v-7M46%20221v-7M28%20196h-7M71%20196h-7M33%20183l-5-5M64%20209l-5-5M59%20183l5-5M28%20214l5-5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M108%20178c10%200%2018%208%2018%2018%200%204-1%207-3%2010l6%208-9-4c-3%202-7%203-12%203-10%200-18-8-18-18s8-17%2018-17z%22%2F%3E%20%3Cg%3E%3Crect%20x%3D%22186%22%20y%3D%22176%22%20width%3D%2222%22%20height%3D%2238%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M193%20182h8%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M244%20184c-4-6-14-5-14%203%200%207%2014%2014%2014%2014s14-7%2014-14c0-8-10-9-14-3z%22%2F%3E%20%3Cpath%20d%3D%22M22%20256l18%208-18%208%204-8z%22%2F%3E%20%3Cpath%20d%3D%22M96%20250l5%2011%2012%201-9%208%203%2012-11-6-11%206%203-12-9-8%2012-1z%22%2F%3E%20%3Cg%3E%3Ccircle%20cx%3D%22184%22%20cy%3D%22262%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%22179%22%20cy%3D%22258%22%20r%3D%221.4%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%22189%22%20cy%3D%22258%22%20r%3D%221.4%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M177%20268c3%204%2011%204%2014%200%22%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M250%20248v26a7%207%200%201%201-5-6.7V252l16-4v18a7%207%200%201%201-5-6.7%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") !important;
  background-repeat: repeat !important;
  background-size: 280px 280px !important;
  gap: 6px !important;
}
[data-theme="light"] #page-conversas #conv-msgs {
  /* WhatsApp light: bege classico + doodles escuros */
  background-color: #e5ddd5 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23111b21%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.07%22%3E%20%3Cpath%20d%3D%22M30%2038c-4-6-14-5-14%203%200%207%2014%2014%2014%2014s14-7%2014-14c0-8-10-9-14-3z%22%2F%3E%20%3Cpath%20d%3D%22M86%2026h34a6%206%200%200%201%206%206v16a6%206%200%200%201-6%206h-20l-9%208v-8h-5a6%206%200%200%201-6-6V32a6%206%200%200%201%206-6z%22%2F%3E%20%3Cg%3E%3Crect%20x%3D%22178%22%20y%3D%2226%22%20width%3D%2240%22%20height%3D%2228%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%22198%22%20cy%3D%2240%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M188%2026l4-6h12l4%206%22%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M244%2030l18%208-18%208%204-8z%22%2F%3E%20%3Cg%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%22110%22%20r%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%22106%22%20r%3D%221.6%22%20fill%3D%22%23111b21%22%2F%3E%3Ccircle%20cx%3D%2249%22%20cy%3D%22106%22%20r%3D%221.6%22%20fill%3D%22%23111b21%22%2F%3E%3Cpath%20d%3D%22M37%20116c3%204%2011%204%2014%200%22%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M120%2096v26a7%207%200%201%201-5-6.7V100l16-4v18a7%207%200%201%201-5-6.7%22%2F%3E%20%3Cpath%20d%3D%22M200%2092l5%2011%2012%201-9%208%203%2012-11-6-11%206%203-12-9-8%2012-1z%22%2F%3E%20%3Cpath%20d%3D%22M252%20100c-12%200-18%208-18%2016%208%200%2018-6%2018-16z%22%2F%3E%20%3Cg%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%22196%22%20r%3D%2211%22%2F%3E%3Cg%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M46%20178v-7M46%20221v-7M28%20196h-7M71%20196h-7M33%20183l-5-5M64%20209l-5-5M59%20183l5-5M28%20214l5-5%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M108%20178c10%200%2018%208%2018%2018%200%204-1%207-3%2010l6%208-9-4c-3%202-7%203-12%203-10%200-18-8-18-18s8-17%2018-17z%22%2F%3E%20%3Cg%3E%3Crect%20x%3D%22186%22%20y%3D%22176%22%20width%3D%2222%22%20height%3D%2238%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M193%20182h8%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M244%20184c-4-6-14-5-14%203%200%207%2014%2014%2014%2014s14-7%2014-14c0-8-10-9-14-3z%22%2F%3E%20%3Cpath%20d%3D%22M22%20256l18%208-18%208%204-8z%22%2F%3E%20%3Cpath%20d%3D%22M96%20250l5%2011%2012%201-9%208%203%2012-11-6-11%206%203-12-9-8%2012-1z%22%2F%3E%20%3Cg%3E%3Ccircle%20cx%3D%22184%22%20cy%3D%22262%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%22179%22%20cy%3D%22258%22%20r%3D%221.4%22%20fill%3D%22%23111b21%22%2F%3E%3Ccircle%20cx%3D%22189%22%20cy%3D%22258%22%20r%3D%221.4%22%20fill%3D%22%23111b21%22%2F%3E%3Cpath%20d%3D%22M177%20268c3%204%2011%204%2014%200%22%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%22M250%20248v26a7%207%200%201%201-5-6.7V252l16-4v18a7%207%200%201%201-5-6.7%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") !important;
}

/* ---- Bolhas estilo WhatsApp premium ---- */
.conv-bubble-row {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}
.conv-bubble-row.outbound {
  align-self: flex-end;
  align-items: flex-end;
}
.conv-bubble-row.inbound {
  align-self: flex-start;
  align-items: flex-start;
}

.conv-bubble {
  max-width: 100%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* Recebida: bolha neutra escura, ancorada à esquerda */
.conv-bubble.inbound {
  background: #202c33 !important;
  border: 1px solid rgba(255,255,255,0.06);
  color: #e9edf4 !important;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
/* Enviada: gradiente rosa/roxo -> ciano sutil tintado, ancorada à direita.
   Borda accent fina + texto claro = bolha "nossa" sem gritar. */
.conv-bubble.outbound {
  background: #005c4b !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.08);
  color: #ffffff !important;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
/* Bolhas solidas no modo claro (estilo WhatsApp) */
[data-theme="light"] .conv-bubble.inbound { background:#ffffff !important; color:#111b21 !important; border-color:rgba(0,0,0,0.08) !important; }
[data-theme="light"] .conv-bubble.outbound { background:#d9fdd3 !important; color:#111b21 !important; border-color:rgba(0,0,0,0.08) !important; }

/* Hora discreta + status entregue/lido em --live */
.conv-bubble-time {
  font-size: 10px;
  color: var(--mute) !important;
  margin-top: 4px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 5px;
}
/* status de entrega (texto após " · ") herda --live quando presente */
.conv-bubble-row.outbound .conv-bubble-time {
  color: var(--live) !important;
}

/* ---- Áudio nas bolhas ---- */
.conv-bubble audio {
  filter: saturate(0.9) brightness(0.95);
}

/* ---- Estado vazio / carregando ---- */
.conv-empty {
  padding: 80px 20px;
  text-align: center;
  color: var(--mute) !important;
  font-size: 13px;
  line-height: 1.6;
}
.conv-empty small {
  color: var(--mute);
  opacity: 0.8;
}

/* ---- Barra de input ---- */
#page-conversas #conv-input-wrap {
  border-top: 1px solid var(--line) !important;
  background: var(--panel);
  padding: 12px 14px;
}
#page-conversas #conv-input-wrap small {
  color: var(--mute) !important;
}
#page-conversas #conv-mic-timer {
  color: var(--bad) !important;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ====================================================================== */
/* ==== MODO iPHONE 17 TITANIO METALICO: mockup p/ print de venda ======= */
/* Aparencia FIXA estilo iPhone 17 / WhatsApp (independe do tema do sistema). */
/* Porte do /tmp/naia-iphone/conversas.js (look aprovado pelo dono).         */
/* ====================================================================== */

/* botao na toolbar do thread */
#conv-iphone-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 9px; cursor: pointer;
  background: var(--panel-2, rgba(255,255,255,0.04));
  border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
  color: var(--accent, #22e0d6); font-size: 12px; font-weight: 600;
  line-height: 1; transition: background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
#conv-iphone-btn:hover { background: var(--accent-glow, rgba(34,224,214,0.12)); border-color: var(--accent, #22e0d6); }
#conv-iphone-btn svg { width: 15px; height: 15px; }

/* CONVFEAT: botoes +Tag / excluir lead no header da conversa */
#conv-tag-btn, #conv-del-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 9px; cursor: pointer;
  background: var(--panel-2, rgba(255,255,255,0.04));
  border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
  color: var(--accent, #22e0d6); font-size: 12px; font-weight: 600;
  line-height: 1; transition: background .15s ease, border-color .15s ease;
  white-space: nowrap; margin-right: 8px;
}
#conv-tag-btn:hover { background: var(--accent-glow, rgba(34,224,214,0.12)); border-color: var(--accent, #22e0d6); }
#conv-tag-btn svg, #conv-del-btn svg { width: 14px; height: 14px; }
#conv-del-btn { color: #f87171; }
#conv-del-btn:hover { background: rgba(239,68,68,0.14); border-color: #ef4444; }
/* tags do lead no header (chips, mesmo padrao da lista) */
#conv-head-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 0; min-width: 0; overflow: hidden; }
/* no Modo iPhone (mockup pra print) esses controles somem */
#ip-mount #conv-tag-btn, #ip-mount #conv-del-btn, #ip-mount #conv-head-tags { display: none !important; }
/* popover de selecao/criacao de tag */
#conv-tag-pop {
  display: none; position: fixed; z-index: 120; width: 264px;
  background: var(--bg-card, rgba(15,23,42,0.97));
  border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
  box-shadow:0 1px 3px rgba(0,0,0,.18); padding: 10px;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
#conv-tag-pop.open { display: block; }
#conv-tag-list { max-height: 260px; overflow-y: auto; margin-top: 8px; }
.conv-tag-item {
  padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  color: var(--text, rgba(255,255,255,0.85));
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.conv-tag-item span { color: var(--mute, rgba(255,255,255,0.4)); font-size: 11px; }
.conv-tag-item:hover { background: var(--accent-glow, rgba(34,224,214,0.12)); }
.conv-tag-item.has { opacity: .45; }
.conv-tag-item.new { color: var(--accent, #22e0d6); font-weight: 600; }
.conv-tag-empty { padding: 8px; font-size: 12px; color: var(--mute, rgba(255,255,255,0.4)); }

/* JANELA FLUTUANTE (NAO-MODAL): sem backdrop, sem bloquear cliques.
   O overlay e um container transparente pointer-events:none que cobre a tela;
   so o proprio device (#ip-device) captura interacao. O resto do sistema
   (sidebar, menus) continua 100% clicavel com o iPhone aberto ao lado. */
#ip-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  background: transparent;
  pointer-events: none;          /* NADA aqui bloqueia cliques no sistema */
}
#ip-overlay.open { display: block; }
/* ancoragem flutuante: canto inferior direito por padrao (JS pode reposicionar).
   so o device e seus controles recebem pointer-events. */
#ip-device, #ip-actions { pointer-events: auto; }

/* barra de acoes da janela: ancorada ao device (acima dele), arrastavel junto */
#ip-actions {
  position: fixed; z-index: 10001;
  display: flex; gap: 8px; align-items: center;
}
/* alca de arraste (topo da moldura do device) */
#ip-device { cursor: default; }
#ip-drag-handle {
  position: absolute; top: 0; left: 0; right: 0; height: 64px;
  z-index: 50; cursor: grab; border-radius: 62px 62px 0 0;
}
#ip-drag-handle:active { cursor: grabbing; }
/* estado MINIMIZADO: device some, sobra uma bolinha reexpandivel */
#ip-overlay.min #ip-device, #ip-overlay.min #ip-actions { display: none; }
#ip-fab {
  position: fixed; z-index: 10002; display: none;
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  pointer-events: auto;
  background:var(--panel-2, #111824);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  align-items: center; justify-content: center; color: #11161d;
}
#ip-overlay.min #ip-fab { display: flex; }
#ip-fab svg { width: 24px; height: 24px; }
.ip-act {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(18,22,30,0.82); border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1;
  font-family: inherit; transition: background .15s ease;
}
.ip-act:hover { background: rgba(30,36,48,0.92); }
.ip-act.close { padding: 9px 12px; font-size: 17px; }
.ip-act svg { width: 16px; height: 16px; }

/* ===== DEVICE: moldura TITANIO METALICO (iPhone 17) ~390x844 ===== */
/* escalada via transform (JS _ipFitDevice) p/ caber na viewport.          */
/* JANELA FLUTUANTE: position fixed, ancorada por left/top via JS (drag).  */
#ip-device {
  position: fixed; left: 0; top: 0;
  width: 390px; height: 844px;
  border-radius: 62px;
  padding: 5px;
  flex-shrink: 0;
  transform-origin: top left;
  /* trilho de titanio polido: cantos claros, bandas escuras alternadas */
  background:var(--panel-2, #111824);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* sheen escovado diagonal + glints brilhantes nos cantos (metal polido) */
/* sheen/glints SO na MOLDURA. O centro (area da tela) eh recortado via mask
   pra que NADA de brilho fique por cima do #ip-screen (leitura limpa). */
#ip-device::before {
  content: ""; position: absolute; inset: 0; border-radius: 62px;
  pointer-events: none; z-index: 3;
  background:var(--panel-2, #111824);
  /* recorta a area da tela: mask preto (= transparente) no retangulo interno,
     branco (= visivel) so na borda da moldura (5px). */
  -webkit-mask:none;
  -webkit-mask-composite: xor;
  mask:none;
  mask-composite: exclude;
  mix-blend-mode: screen; opacity: .95;
}
/* anel de bisel interno entre o trilho e o vidro */
#ip-device::after {
  content: ""; position: absolute; inset: 3px; border-radius: 58px;
  pointer-events: none; z-index: 2;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* botoes laterais metalicos (mesmo tratamento titanio, com relevo) */
.ip-btn {
  position: absolute; border-radius: 3px; z-index: 1;
  background:var(--panel-2, #111824);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.ip-btn.right {
  right: -3px;
  background:var(--panel-2, #111824);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.ip-btn-action { left: -3px; top: 168px; width: 4px; height: 30px; }   /* Action button */
.ip-btn-volup  { left: -3px; top: 222px; width: 4px; height: 58px; }   /* Volume up */
.ip-btn-voldn  { left: -3px; top: 296px; width: 4px; height: 58px; }   /* Volume down */
.ip-btn-power  { right: -3px; top: 238px; width: 4px; height: 92px; }  /* Power / Side */

/* tela */
#ip-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 57px; overflow: hidden; z-index: 5;  /* acima do sheen (::before z3) p/ tela limpa */
  background: #0b141a;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  display: flex; flex-direction: column;
}

/* dynamic island (com glint da camera) */
#ip-island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 35px; background: #000; border-radius: 20px;
  z-index: 40; box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#ip-island::after {
  content: ""; position: absolute; top: 9px; right: 16px; width: 9px; height: 9px;
  border-radius: 50%;
  background:var(--panel-2, #111824);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* status bar iOS */
#ip-status {
  height: 54px; flex-shrink: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 26px 6px; color: #fff; font-size: 15px; font-weight: 600;
  position: relative; z-index: 30;
}
#ip-status .ip-time { font-size: 15px; letter-spacing: .2px; }
#ip-status .ip-stat-right { display: flex; align-items: center; gap: 6px; }
#ip-status .ip-net5g { font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.ip-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.ip-sig i { display: block; width: 3px; border-radius: 1px; background: #fff; }
.ip-sig i:nth-child(1){ height: 4px; } .ip-sig i:nth-child(2){ height: 6px; }
.ip-sig i:nth-child(3){ height: 8px; } .ip-sig i:nth-child(4){ height: 11px; }
.ip-batt { width: 25px; height: 12px; border: 1.4px solid rgba(255,255,255,.85);
  border-radius: 3px; position: relative; display: inline-block; }
.ip-batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px;
  height: 6px; background: rgba(255,255,255,.85); border-radius: 0 1px 1px 0; }
.ip-batt::before { content: ""; position: absolute; inset: 1.5px; width: 70%;
  background: #fff; border-radius: 1px; }

/* header WhatsApp iOS (gradiente verde) */
#ip-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 9px;
  padding: 6px 10px 9px; color: #fff; position: relative; z-index: 20;
  background: #075e54; background:var(--panel-2, #111824);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#ip-header .ip-back { font-size: 26px; line-height: 1; color: #fff; width: 14px;
  text-align: center; font-weight: 300; margin-right: -2px; }
#ip-header .ip-av {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: #6b7780; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: #fff;
}
#ip-header .ip-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ip-header .ip-name { flex: 1; min-width: 0; }
#ip-header .ip-name b { display: block; font-size: 16px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ip-header .ip-name small { display: block; font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.2; }
#ip-header .ip-htools { display: flex; gap: 18px; align-items: center; color: #fff; }
#ip-header .ip-htools svg { width: 20px; height: 20px; }

/* area de mensagens (wallpaper escuro WhatsApp) */
#ip-msgs {
  flex: 1; overflow-y: auto; padding: 10px 8px 6px; position: relative;
  display: flex; flex-direction: column; gap: 3px;
  background-color: #0b141a;
  background-image:none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
/* linhas / bolhas iOS dark (porte conversas.js: recv #202c33 / sent #005c4b) */
#ip-msgs .ipr { display: flex; flex-direction: column; max-width: 78%; }
#ip-msgs .ipr.out { align-self: flex-end; align-items: flex-end; }
#ip-msgs .ipr.in  { align-self: flex-start; align-items: flex-start; }
#ip-msgs .ipb {
  position: relative; padding: 6px 9px 5px; border-radius: 9px;
  font-size: 14.5px; line-height: 1.32; color: #e9edef;
  white-space: pre-wrap; word-wrap: break-word;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#ip-msgs .ipr.in  .ipb { background: #202c33; border-top-left-radius: 2px; }
#ip-msgs .ipr.out .ipb { background: #005c4b; border-top-right-radius: 2px; }
#ip-msgs .ipb img, #ip-msgs .ipb video { max-width: 220px; max-height: 280px; border-radius: 7px; display: block; }
#ip-msgs .ipb audio { max-width: 210px; height: 34px; display: block; }
#ip-msgs .ipb a { color: #53bdeb; }
#ip-msgs .ipt { font-size: 10.5px; color: rgba(233,237,239,.55); margin-top: 3px; padding: 0 2px;
  display: inline-flex; align-items: center; gap: 3px; }
#ip-msgs .ipr.out .ipt { color: rgba(233,237,239,.6); }
#ip-msgs .ipr.out .ipt::after { content: "\2713\2713"; color: #53bdeb; font-size: 11px; line-height: 1; }

/* barra de input decorativa (iOS) */
#ip-input {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 7px 9px 9px; background: #1f2c33;
}
#ip-input .ip-field {
  flex: 1; min-height: 36px; border-radius: 20px; background: #2a3942;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  color: #8696a0; font-size: 14px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
#ip-input .ip-field svg { width: 18px; height: 18px; opacity: .8; }
#ip-input .ip-send {
  width: 38px; height: 38px; border-radius: 50%; background: #00a884;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #0b141a;
}
#ip-input .ip-send svg { width: 20px; height: 20px; }

/* home indicator */
#ip-home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); z-index: 30;
}

/* ====================================================================== */
/* ==== MODO iPHONE FUNCIONAL: hospeda o PAINEL REAL (#conv-thread) ====== */
/* O painel real eh reparentado pra dentro de #ip-mount (sem clone). Aqui  */
/* re-estilizamos os MESMOS nos (header/msgs/input) pro look iOS/WhatsApp,  */
/* preservando id/handlers. Reserva 14px no fim pra home indicator.        */
/* ====================================================================== */
#ip-mount {
  flex: 1; min-height: 0; display: flex; position: relative; z-index: 10;
  padding-bottom: 14px;            /* nao encosta no home indicator */
}
/* quando hospeda o painel real, ele preenche a tela do device */
#ip-mount > #conv-thread {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: #0b141a;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
/* header do contato (real) -> barra verde WhatsApp iOS */
#ip-mount #conv-thread-header {
  flex-shrink: 0 !important;
  border-bottom: none !important;
  padding: 8px 12px 9px !important;
  background:var(--panel-2, #111824);
  color: #fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#ip-mount #conv-thread-header b { color: #fff !important; font-size: 15px !important; }
#ip-mount #conv-thread-header span { color: rgba(255,255,255,.7) !important; }
#ip-mount #conv-thread-header img { width: 36px !important; height: 36px !important; }
/* o botao "Modo iPhone" vira botao de SAIR dentro do frame (look iOS) */
#ip-mount #conv-iphone-btn {
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: #fff !important;
}
#ip-mount #conv-iphone-btn:hover { background: rgba(255,255,255,0.28) !important; }
/* area de mensagens (real) -> wallpaper escuro WhatsApp */
#ip-mount #conv-msgs {
  flex: 1 !important; min-height: 0 !important; overflow-y: auto !important;
  padding: 12px 8px !important;
  background-color: #0b141a !important;
  background-image:none;
}
/* barra de input (real) fixa na base, look iOS */
#ip-mount #conv-input-wrap {
  flex-shrink: 0 !important;
  border-top: none !important;
  padding: 7px 8px 9px !important;
  background: #1f2c33 !important;
}
#ip-mount #conv-input-wrap form { gap: 7px !important; }
#ip-mount #conv-input-wrap #conv-input-text {
  background: #2a3942 !important; border: none !important;
  border-radius: 20px !important; color: #e9edef !important;
  padding: 9px 14px !important;
}
#ip-mount #conv-input-wrap #conv-input-text::placeholder { color: #8696a0 !important; }
#ip-mount #conv-input-wrap small { color: rgba(134,150,160,.7) !important; font-size: 10px !important; }
/* esconde a legenda longa de DM IG dentro do device (espaco curto) */
#ip-mount #conv-input-wrap small { display: none !important; }


/* === CANAIS === */
/* Override do visual antigo (rosa neon, gradiente arco-iris, faixa lateral grossa,
   verde/indigo neon) pro padrao cockpit: vidro escuro, borda fina, acento ciano
   disciplinado, status WA=--live / IG=--accent, numeros em mono telemetria. */

/* ── grid ── */
.channels-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}

/* ── card ── */
.ch-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 18px 18px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
}
.ch-card:hover {
  border-color: var(--accent-glow) !important;
  background: var(--panel-2) !important;
  transform: translateY(-2px) !important;
}

/* faixa lateral/topo grossa colorida -> linha fina de 1px em tint do provider */
.ch-card.is-ig::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: var(--accent) !important;
  opacity: .6 !important;
}
.ch-card.is-wa::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: var(--live) !important;
  opacity: .6 !important;
}

/* ── header ── */
.ch-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.ch-avatar {
  width: 52px !important; height: 52px !important;
  border-radius: var(--r-sm) !important;
  object-fit: cover !important;
  background: var(--raised) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: var(--text) !important;
  font-weight: 700 !important; font-size: 19px !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--line-strong) !important;
}

.ch-name-block { flex: 1 !important; min-width: 0 !important; }
.ch-display {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--text) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  letter-spacing: -0.01em !important;
}
.ch-username {
  font-size: 12px !important;
  color: var(--dim) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  margin-top: 1px !important;
}

/* ── provider tag ── (sem rosa: IG=ciano tint, WA=live tint) ── */
.ch-provider-tag {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-top: 6px !important;
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  border: 1px solid transparent !important;
}
.ch-provider-tag.wa {
  background: rgba(52,232,158,0.14) !important;
  color: var(--live) !important;
}

/* ── status pill ── */
.ch-status-pill {
  font-size: 9.5px !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-family: var(--mono) !important;
  align-self: flex-start !important;
  white-space: nowrap !important;
}
.ch-status-pill.active {
  background: rgba(52,232,158,0.14) !important;
  color: var(--live) !important;
}
.ch-status-pill.expired,
.ch-status-pill.token_refresh_warning {
  background: rgba(255,93,108,0.14) !important;
  color: var(--bad) !important;
}
.ch-status-pill.inactive {
  background: rgba(255,255,255,0.06) !important;
  color: var(--mute) !important;
}

/* ── phone row WA ── (era verde neon #4ade80) ── */
.ch-phone-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 2px !important;
  padding: 9px 12px !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
}
.ch-phone-row .ch-phone-icon { font-size: 13px !important; opacity: 0.8 !important; }
.ch-phone-row .ch-phone-num {
  flex: 1 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.ch-phone-row .ch-phone-copy {
  background: none !important;
  border: 1px solid var(--line) !important;
  color: var(--dim) !important;
  cursor: pointer !important;
  font-size: 10px !important;
  font-family: var(--mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  transition: border-color .15s ease, color .15s ease !important;
}
.ch-phone-row .ch-phone-copy:hover {
  border-color: var(--accent-glow) !important;
  color: var(--accent) !important;
  background: none !important;
}

/* ── bio ── */
.ch-bio {
  font-size: 12px !important;
  color: var(--dim) !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 32px !important;
}

/* ── stats (IG) ── numeros em mono ── */
.ch-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
.ch-stat { text-align: center !important; }
.ch-stat-num {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1 !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
}
.ch-stat-lbl {
  font-size: 9.5px !important;
  color: var(--mute) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 4px !important;
}

/* ── meta row (agente/webhook) ── (webhook era ciano berrante) ── */
.ch-meta-row {
  font-size: 11px !important;
  color: var(--mute) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.ch-meta-row b { color: var(--dim) !important; font-weight: 600 !important; }
.ch-meta-row .webhook {
  color: var(--accent-deep) !important;
  font-family: var(--mono) !important;
  word-break: break-all !important;
}
.ch-meta-row .no-webhook { color: var(--warn) !important; }

/* ── actions ── (era indigo + verde + vermelho neon, inline styles vencidos com !important) ── */
.ch-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 2px !important;
}
.ch-btn {
  flex: 1 !important;
  padding: 8px 0 !important;
  border-radius: var(--r-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid var(--line) !important;
  background: var(--raised) !important;
  color: var(--dim) !important;
  transition: border-color .15s ease, color .15s ease, background .15s ease !important;
}
.ch-btn:hover {
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
  background: var(--panel-2) !important;
}
/* botao primario "Editar" recebe o acento; botoes inline (Status/Perfil WA) ficam neutros */
.ch-btn.edit {
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  border-color: transparent !important;
}
.ch-btn.edit:hover {
  background: var(--accent-deep) !important;
  color: var(--bg) !important;
}
.ch-btn.danger {
  background: transparent !important;
  color: var(--bad) !important;
  border-color: rgba(255,93,108,0.30) !important;
}
.ch-btn.danger:hover {
  background: rgba(255,93,108,0.12) !important;
  border-color: var(--bad) !important;
  color: var(--bad) !important;
}

/* ── empty state ── */
.ch-empty {
  text-align: center !important;
  padding: 64px 20px !important;
  color: var(--mute) !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: var(--r) !important;
  background: var(--panel) !important;
}
.ch-empty b { color: var(--dim) !important; }


/* === CONTATOS === */
/* Cockpit redesign do menu Contatos (estilo CRM Avalanche/GHL), 100% escopado
   em #page-contatos. NADA aqui pode vazar pras outras 17 paginas: todos os
   seletores comecam com #page-contatos. Usa os tokens globais do design system
   (--bg --panel --panel-2 --raised --line --line-strong --text --dim --mute
   --accent --accent-deep --accent-glow --live --warn --bad). */

/* Produtos: integração vendorizada do Bio denderson.ai, escopada em #page-products. */
#page-products{
  --bio-bg:#080808; --bio-surface:#11100f; --bio-card:#151311; --bio-ink:#f5efe5;
  --bio-muted:#a79e91; --bio-line:#332e28; --bio-red:#ef3d32; --bio-green:#94d66d;
  color:var(--bio-ink); background:var(--bio-bg);
}
:root:is([data-theme="light"],[data-theme="hybrid"]) #page-products{
  --bio-bg:#f3ede3; --bio-surface:#fffaf1; --bio-card:#ffffff; --bio-ink:#17130f;
  --bio-muted:#6f665d; --bio-line:#d7cbbd; --bio-red:#c72920; --bio-green:#397a25;
}
#page-products .bio-shell{max-width:1180px;margin:0 auto;padding:24px 28px 64px}
#page-products .bio-topbar,#page-products .bio-gallery-head,#page-products .bio-footer{
  display:flex;align-items:center;justify-content:space-between;gap:16px;text-transform:uppercase;
  font-size:11px;font-weight:800;letter-spacing:.13em
}
#page-products .bio-topbar{padding-bottom:24px;border-bottom:1px solid var(--bio-line)}
#page-products .bio-status{display:flex;align-items:center;gap:8px;color:var(--bio-muted)}
#page-products .bio-status i{width:7px;height:7px;border-radius:50%;background:var(--bio-green);box-shadow:0 0 0 4px color-mix(in srgb,var(--bio-green) 18%,transparent)}
#page-products .bio-hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:54px;align-items:center;padding:66px 0 52px}
#page-products .bio-kicker,#page-products .bio-label{display:block;color:var(--bio-red);font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
#page-products .bio-hero h1{margin:14px 0 20px;font-size:clamp(50px,8vw,92px);line-height:.86;letter-spacing:-.065em}
#page-products .bio-hero h1 span,#page-products .bio-hero h1 strong{display:block}
#page-products .bio-hero h1 strong{color:var(--bio-red);font-weight:850}
#page-products .bio-hero-copy>p{max-width:720px;margin:0;color:var(--bio-muted);font-size:16px;line-height:1.7}
#page-products .bio-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
#page-products .bio-proof span{padding:7px 11px;border:1px solid var(--bio-line);border-radius:999px;color:var(--bio-muted);font-size:11px;font-weight:750}
#page-products .bio-led{position:relative;border:1px solid var(--bio-line)}
#page-products .bio-led::after{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;box-shadow:inset 3px 0 var(--bio-red),inset -3px 0 var(--bio-green);opacity:.9}
#page-products .bio-avatar{width:210px;aspect-ratio:1;border-radius:50%;padding:10px;background:var(--bio-surface);justify-self:end}
#page-products .bio-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;filter:saturate(.92) contrast(1.04)}
#page-products .bio-avatar>span{position:absolute;right:18px;bottom:19px;width:21px;height:21px;border-radius:50%;background:var(--bio-green);border:4px solid var(--bio-surface)}
#page-products .bio-priority{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.78fr);overflow:hidden;border-radius:22px;background:var(--bio-surface);color:inherit;text-decoration:none}
#page-products .bio-priority-body{display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:42px}
#page-products .bio-priority h2{margin:12px 0 13px;color:var(--bio-ink);font-size:clamp(28px,4vw,46px);line-height:1;letter-spacing:-.045em}
#page-products .bio-priority p{max-width:620px;margin:0;color:var(--bio-muted);font-size:14px;line-height:1.65}
#page-products .bio-priority p strong{color:var(--bio-ink)}
#page-products .bio-action,#page-products .bio-module-cta{display:flex;align-items:center;justify-content:space-between;color:var(--bio-red);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
#page-products .bio-priority-media{min-height:360px;background:#17130f}
#page-products .bio-priority-media img,#page-products .bio-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
#page-products .bio-priority:hover img,#page-products .bio-module:hover img{transform:scale(1.035)}
#page-products .bio-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
#page-products .bio-module{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:225px;overflow:hidden;border-radius:18px;background:var(--bio-card);color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease}
#page-products .bio-module:hover{transform:translateY(-3px);border-color:var(--bio-red)}
#page-products .bio-thumb{overflow:hidden;background:#17130f}
#page-products .bio-module-content{display:flex;flex-direction:column;padding:24px}
#page-products .bio-module-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--bio-muted);font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
#page-products .bio-module-top b{color:var(--bio-red)}
#page-products .bio-module h3{margin:24px 0 8px;color:var(--bio-ink);font-size:21px;line-height:1.08;letter-spacing:-.025em}
#page-products .bio-module p{flex:1;margin:0 0 22px;color:var(--bio-muted);font-size:12.5px;line-height:1.55}
#page-products .bio-feature{border-color:color-mix(in srgb,var(--bio-red) 60%,var(--bio-line))}
#page-products .bio-gallery{margin-top:54px;padding-top:20px;border-top:1px solid var(--bio-line)}
#page-products .bio-gallery-head{color:var(--bio-muted);margin-bottom:16px}
#page-products .bio-gallery-window{overflow:hidden}
#page-products .bio-gallery-track{display:flex;width:max-content;gap:12px;animation:bio-gallery-drift 46s linear infinite}
#page-products .bio-gallery-item{width:230px;aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:var(--bio-card)}
#page-products .bio-gallery-item img{display:block;width:100%;height:100%;object-fit:cover}
#page-products .bio-footer{margin-top:48px;padding-top:22px;border-top:1px solid var(--bio-line);color:var(--bio-muted)}
@keyframes bio-gallery-drift{to{transform:translateX(calc(-50% - 6px))}}
@media(max-width:900px){
  #page-products .bio-hero{grid-template-columns:1fr;gap:34px;padding:48px 0}
  #page-products .bio-avatar{width:180px;justify-self:start}
  #page-products .bio-priority{grid-template-columns:1fr}
  #page-products .bio-priority-media{min-height:260px;order:-1}
  #page-products .bio-links{grid-template-columns:1fr}
}
@media(max-width:560px){
  #page-products .bio-shell{padding:18px 16px 48px}
  #page-products .bio-topbar{align-items:flex-start;flex-direction:column}
  #page-products .bio-hero h1{font-size:clamp(48px,18vw,68px)}
  #page-products .bio-priority-body{padding:26px 22px}
  #page-products .bio-module{grid-template-columns:1fr}
  #page-products .bio-thumb{height:210px}
  #page-products .bio-gallery-item{width:180px}
  #page-products .bio-footer{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  #page-products .bio-gallery-track{animation:none}
  #page-products .bio-priority-media img,#page-products .bio-thumb img{transition:none}
}

/* ── Meta Ads (cockpit simples, escopado em #page-meta-ads) ──────────────── */
#page-meta-ads .ma-wrap{ max-width:1200px; margin:0 auto; padding:26px 30px 60px; }
#page-meta-ads .ma-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
#page-meta-ads .ma-head h1{ font-size:24px; font-weight:700; color:var(--text); letter-spacing:-.01em; margin:0 0 4px; }
#page-meta-ads .ma-head p{ font-size:13px; color:var(--dim); margin:0; max-width:600px; }
#page-meta-ads .ma-acct{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; color:var(--mute); }
#page-meta-ads .ma-acct b{ color:var(--accent); font-weight:600; }
#page-meta-ads .ma-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#page-meta-ads .ma-periods{ display:inline-flex; background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:3px; }
#page-meta-ads .ma-period{ border:none; background:transparent; color:var(--dim); font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:8px; cursor:pointer; transition:.15s; }
#page-meta-ads .ma-period:hover{ color:var(--text); }
#page-meta-ads .ma-period.active{ background:var(--accent); color:#04201e; box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-meta-ads .ma-refresh{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); background:var(--panel-2); color:var(--text); font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:10px; cursor:pointer; transition:.15s; }
#page-meta-ads .ma-refresh:hover{ border-color:var(--accent); color:var(--accent); }
#page-meta-ads .ma-refresh:disabled{ opacity:.55; cursor:default; }
#page-meta-ads .ma-refresh svg{ width:15px; height:15px; }
#page-meta-ads .ma-updated{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--mute); }
#page-meta-ads .ma-updated .dot{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 1px 3px rgba(0,0,0,.18); }

#page-meta-ads .ma-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:24px; }
#page-meta-ads .ma-kpi{ background:var(--panel-2, #111824); border:1px solid var(--line); border-radius:14px; padding:16px 18px; min-height:98px; }
#page-meta-ads .ma-kpi .lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--mute); font-weight:600; }
#page-meta-ads .ma-kpi .val{ font-size:27px; font-weight:700; color:var(--text); margin-top:8px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.05; }
#page-meta-ads .ma-kpi .sub{ font-size:11.5px; color:var(--dim); margin-top:5px; }
#page-meta-ads .ma-kpi.accent{ border-color:rgba(34,224,214,0.4); }
#page-meta-ads .ma-kpi.accent .val{ color:var(--accent); }

#page-meta-ads .ma-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:20px; }
#page-meta-ads .ma-card h3{ font-size:14px; font-weight:700; color:var(--text); margin:0 0 14px; display:flex; align-items:center; gap:8px; }
#page-meta-ads .ma-card h3 .tag{ font-size:10.5px; font-weight:600; color:var(--mute); background:var(--panel-2); border:1px solid var(--line); padding:2px 8px; border-radius:20px; }

#page-meta-ads table.ma-tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
#page-meta-ads table.ma-tbl th{ text-align:right; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); font-weight:600; padding:0 12px 10px; border-bottom:1px solid var(--line); }
#page-meta-ads table.ma-tbl th:first-child{ text-align:left; }
#page-meta-ads table.ma-tbl td{ text-align:right; padding:11px 12px; border-bottom:1px solid var(--line); color:var(--text); font-variant-numeric:tabular-nums; }
#page-meta-ads table.ma-tbl td:first-child{ text-align:left; color:var(--text); }
#page-meta-ads table.ma-tbl tr:last-child td{ border-bottom:none; }
#page-meta-ads table.ma-tbl tr:hover td{ background:var(--table-hover); }
#page-meta-ads table.ma-tbl .cname{ font-weight:600; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page-meta-ads table.ma-tbl .spend{ color:var(--accent); font-weight:600; }
#page-meta-ads table.ma-tbl .pval{ color:var(--live); font-weight:600; }
#page-meta-ads .ma-empty{ text-align:center; color:var(--mute); font-size:13px; padding:40px 0; }
#page-meta-ads .ma-loading{ text-align:center; color:var(--dim); font-size:13px; padding:50px 0; }
@media (max-width:980px){ #page-meta-ads .ma-kpis{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #page-meta-ads .ma-kpis{ grid-template-columns:1fr; } }

/* ── Configurações — cockpit premium, theme-aware (visibilidade vem da base .page) ── */
#page-configuracoes{ background:var(--bg); color:var(--text); }
#page-configuracoes .cfg-wrap{ max-width:920px; margin:0 auto; padding:26px 30px 70px; }
#page-configuracoes .cfg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:26px; }
#page-configuracoes .cfg-head h1{ font-size:24px; font-weight:700; color:var(--text); letter-spacing:-.01em; margin:0 0 6px; }
#page-configuracoes .cfg-head p{ font-size:13px; color:var(--dim); margin:0; max-width:560px; line-height:1.55; }
#page-configuracoes .cfg-sec{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--accent); background:var(--accent-glow, rgba(34,224,214,0.12)); border:1px solid rgba(34,224,214,0.3); border-radius:999px; padding:7px 13px; white-space:nowrap; }
#page-configuracoes .cfg-sec svg{ width:14px; height:14px; }
#page-configuracoes .cfg-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
#page-configuracoes .cfg-loading{ grid-column:1/-1; text-align:center; color:var(--dim); font-size:13px; padding:50px 0; }
#page-configuracoes .cfg-card{ position:relative; background:var(--panel-2, #111824); border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; transition:border-color .18s, box-shadow .18s; }
#page-configuracoes .cfg-card:hover{ border-color:var(--line-strong, var(--line)); }
#page-configuracoes .cfg-card.is-set{ border-color:rgba(34,224,214,0.34); }
#page-configuracoes .cfg-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:4px; }
#page-configuracoes .cfg-id{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
#page-configuracoes .cfg-logo{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.92); border:1px solid rgba(0,0,0,0.08); box-shadow:0 1px 3px rgba(0,0,0,.18); overflow:hidden; }
#page-configuracoes .cfg-logo img{ width:24px; height:24px; object-fit:contain; display:block; color:#11161d; }
#page-configuracoes .cfg-name{ font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.01em; }
#page-configuracoes .cfg-hint{ font-size:11.5px; color:var(--mute); margin-top:2px; }
#page-configuracoes .cfg-badge{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; border-radius:999px; padding:5px 10px; white-space:nowrap; }
#page-configuracoes .cfg-badge .dot{ width:6px; height:6px; border-radius:50%; }
#page-configuracoes .cfg-badge.ok{ color:var(--live); background:rgba(52,211,153,0.1); }
#page-configuracoes .cfg-badge.ok .dot{ background:var(--live); box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-configuracoes .cfg-badge.env{ color:var(--mute); background:var(--panel-2, rgba(255,255,255,0.04)); }
#page-configuracoes .cfg-badge.env .dot{ background:var(--mute); }
#page-configuracoes .cfg-badge.empty{ color:var(--dim); background:var(--panel-2, rgba(255,255,255,0.04)); }
#page-configuracoes .cfg-badge.empty .dot{ background:var(--dim); }
#page-configuracoes .cfg-row{ display:flex; gap:9px; margin-top:13px; }
#page-configuracoes .cfg-input{ flex:1 1 auto; min-width:0; background:var(--panel-2, rgba(0,0,0,0.18)); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--text); font-size:13px; font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; transition:border-color .15s, box-shadow .15s; }
#page-configuracoes .cfg-input::placeholder{ color:var(--mute); font-family:inherit; }
#page-configuracoes .cfg-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-configuracoes .cfg-save{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; border:none; background:var(--accent); color:#04201e; font-size:12.5px; font-weight:700; border-radius:10px; padding:0 16px; cursor:pointer; transition:filter .15s, opacity .15s; }
#page-configuracoes .cfg-save:hover{ filter:brightness(1.08); }
#page-configuracoes .cfg-save:disabled{ opacity:.5; cursor:default; filter:none; }
#page-configuracoes .cfg-del{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:transparent; color:var(--mute); border-radius:10px; width:38px; cursor:pointer; transition:border-color .15s, color .15s; }
#page-configuracoes .cfg-del:hover{ border-color:#f87171; color:#f87171; }
#page-configuracoes .cfg-del svg{ width:15px; height:15px; }
#page-configuracoes .cfg-mask{ margin-top:9px; font-size:11px; color:var(--mute); font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; }
#page-configuracoes .cfg-msg{ margin-top:8px; font-size:11.5px; min-height:14px; }
#page-configuracoes .cfg-msg.ok{ color:var(--live); }
#page-configuracoes .cfg-msg.err{ color:#f87171; }
@media (max-width:780px){ #page-configuracoes .cfg-grid{ grid-template-columns:1fr; } }
#page-configuracoes .cfg-oauth{ max-width:920px; margin:0 auto 22px; }
#page-configuracoes .cfg-oauth-card{ position:relative; background:var(--panel-2, #111824); border:1px solid rgba(34,224,214,0.34); border-radius:16px; padding:20px 22px; }
#page-configuracoes .cfg-oauth-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#page-configuracoes .cfg-oauth-title{ font-size:16px; font-weight:700; color:var(--text); letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
#page-configuracoes .cfg-oauth-title svg{ width:17px; height:17px; color:var(--accent); }
#page-configuracoes .cfg-oauth-sub{ font-size:12px; color:var(--dim); margin-top:5px; line-height:1.5; max-width:560px; }
#page-configuracoes .cfg-oauth-body{ margin-top:15px; }
#page-configuracoes .cfg-oauth-btn{ display:inline-flex; align-items:center; gap:7px; border:none; background:var(--accent); color:#04201e; font-size:12.5px; font-weight:700; border-radius:10px; padding:10px 16px; cursor:pointer; transition:filter .15s, opacity .15s; }
#page-configuracoes .cfg-oauth-btn:hover{ filter:brightness(1.08); }
#page-configuracoes .cfg-oauth-btn:disabled{ opacity:.5; cursor:default; filter:none; }
#page-configuracoes .cfg-oauth-btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--mute); }
#page-configuracoes .cfg-oauth-btn.ghost:hover{ border-color:var(--accent); color:var(--accent); filter:none; }
#page-configuracoes .cfg-oauth-btn.danger{ background:transparent; border:1px solid var(--line); color:var(--mute); }
#page-configuracoes .cfg-oauth-btn.danger:hover{ border-color:#f87171; color:#f87171; filter:none; }
#page-configuracoes .cfg-oauth-link{ margin-top:12px; font-size:12px; word-break:break-all; }
#page-configuracoes .cfg-oauth-link a{ color:var(--accent); text-decoration:none; }
#page-configuracoes .cfg-oauth-link a:hover{ text-decoration:underline; }
#page-configuracoes .cfg-oauth-paste{ margin-top:14px; display:flex; gap:9px; flex-wrap:wrap; }
#page-configuracoes .cfg-oauth-paste input{ flex:1 1 320px; min-width:0; background:var(--panel-2, rgba(0,0,0,0.18)); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--text); font-size:13px; font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; }
#page-configuracoes .cfg-oauth-paste input::placeholder{ color:var(--mute); font-family:inherit; }
#page-configuracoes .cfg-oauth-paste input:focus{ outline:none; border-color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-configuracoes .cfg-oauth-actions{ margin-top:14px; display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
#page-configuracoes .cfg-oauth-state{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--text); }
#page-configuracoes .cfg-oauth-state .pill{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; border-radius:999px; padding:5px 10px; color:var(--live); background:rgba(52,211,153,0.1); }
#page-configuracoes .cfg-oauth-state .pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--live); box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-configuracoes .cfg-oauth-meta{ font-size:11px; color:var(--mute); font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; }
#page-configuracoes .cfg-oauth-msg{ margin-top:10px; font-size:11.5px; min-height:14px; }
#page-configuracoes .cfg-oauth-msg.ok{ color:var(--live); }
#page-configuracoes .cfg-oauth-msg.err{ color:#f87171; }
 /* ── API Keys + Webhooks (secoes adicionais do menu Configuracoes) ── */
 #page-configuracoes .awsec{ max-width:920px; margin:34px auto 0; }
 #page-configuracoes .awsec-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
 #page-configuracoes .awsec-head h2{ font-size:18px; font-weight:700; color:var(--text); letter-spacing:-.01em; margin:0 0 4px; }
 #page-configuracoes .awsec-head p{ font-size:12.5px; color:var(--dim); margin:0; max-width:560px; line-height:1.5; }
 #page-configuracoes .awsec-add{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); background:var(--accent); color:#04201e; font-size:12.5px; font-weight:700; border-radius:10px; padding:9px 15px; cursor:pointer; transition:filter .15s; }
 #page-configuracoes .awsec-add:hover{ filter:brightness(1.08); }
 #page-configuracoes .awsec-add svg{ width:15px; height:15px; }
 #page-configuracoes .aw-panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
 #page-configuracoes .aw-empty{ text-align:center; color:var(--mute); font-size:13px; padding:34px 18px; }
 #page-configuracoes table.aw-tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
 #page-configuracoes table.aw-tbl th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); font-weight:600; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
 #page-configuracoes table.aw-tbl td{ padding:12px 14px; border-bottom:1px solid var(--line); color:var(--text); vertical-align:middle; }
 #page-configuracoes table.aw-tbl tr:last-child td{ border-bottom:none; }
 #page-configuracoes table.aw-tbl tr:hover td{ background:var(--panel-2); }
 #page-configuracoes .aw-mono{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; color:var(--dim); }
 #page-configuracoes .aw-dim{ color:var(--mute); }
 #page-configuracoes .aw-chips{ display:flex; flex-wrap:wrap; gap:5px; }
 #page-configuracoes .aw-chip{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; color:var(--accent); background:var(--accent-glow, rgba(34,224,214,0.12)); border:1px solid rgba(34,224,214,0.3); border-radius:999px; padding:3px 9px; }
 #page-configuracoes .aw-pill{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; border-radius:999px; padding:4px 10px; }
 #page-configuracoes .aw-pill .dot{ width:6px; height:6px; border-radius:50%; }
 #page-configuracoes .aw-pill.on{ color:var(--live); background:rgba(52,211,153,0.1); }
 #page-configuracoes .aw-pill.on .dot{ background:var(--live); box-shadow:0 1px 3px rgba(0,0,0,.18); }
 #page-configuracoes .aw-pill.off{ color:var(--mute); background:var(--panel-2, rgba(255,255,255,0.04)); }
 #page-configuracoes .aw-pill.off .dot{ background:var(--mute); }
 #page-configuracoes .aw-pill.rev{ color:var(--bad); background:rgba(255,93,108,0.1); }
 #page-configuracoes .aw-pill.rev .dot{ background:var(--bad); }
 #page-configuracoes .aw-acts{ display:flex; gap:6px; flex-wrap:wrap; }
 #page-configuracoes .aw-btn{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:transparent; color:var(--dim); font-size:11.5px; font-weight:600; border-radius:8px; padding:6px 10px; cursor:pointer; transition:border-color .15s, color .15s; }
 #page-configuracoes .aw-btn:hover{ border-color:var(--accent); color:var(--accent); }
 #page-configuracoes .aw-btn.danger:hover{ border-color:var(--bad); color:var(--bad); }
 #page-configuracoes .aw-modal{ position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:200; justify-content:center; align-items:center; padding:24px; overflow-y:auto; opacity:0; pointer-events:none; transition:opacity .18s; }
 #page-configuracoes .aw-modal.open{ display:flex; opacity:1; pointer-events:auto; }
 #page-configuracoes .aw-modal-box{ background:var(--panel); border:1px solid var(--line-strong); border-radius:16px; width:100%; max-width:480px; padding:22px 22px 20px; box-shadow:0 1px 3px rgba(0,0,0,.18); }
 #page-configuracoes .aw-modal-box h3{ font-size:17px; font-weight:700; color:var(--text); margin:0 0 4px; }
 #page-configuracoes .aw-modal-box .sub{ font-size:12px; color:var(--dim); margin:0 0 16px; line-height:1.5; }
 #page-configuracoes .aw-field{ margin-bottom:14px; }
 #page-configuracoes .aw-field label{ display:block; font-size:11.5px; font-weight:600; color:var(--dim); margin-bottom:6px; }
 #page-configuracoes .aw-field input[type=text]{ width:100%; box-sizing:border-box; background:var(--panel-2, rgba(0,0,0,0.18)); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--text); font-size:13px; }
 #page-configuracoes .aw-field input::placeholder{ color:var(--mute); }
 #page-configuracoes .aw-field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.18); }
 #page-configuracoes .aw-evgrid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
 #page-configuracoes .aw-ev{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text); background:var(--panel-2, rgba(0,0,0,0.18)); border:1px solid var(--line); border-radius:9px; padding:8px 10px; cursor:pointer; }
 #page-configuracoes .aw-ev input{ accent-color:var(--accent); }
 #page-configuracoes .aw-modal-acts{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
 #page-configuracoes .aw-cancel{ border:1px solid var(--line); background:transparent; color:var(--dim); font-size:12.5px; font-weight:600; border-radius:10px; padding:9px 15px; cursor:pointer; }
 #page-configuracoes .aw-cancel:hover{ color:var(--text); border-color:var(--line-strong); }
 #page-configuracoes .aw-confirm{ border:none; background:var(--accent); color:#04201e; font-size:12.5px; font-weight:700; border-radius:10px; padding:9px 18px; cursor:pointer; transition:filter .15s; }
 #page-configuracoes .aw-confirm:hover{ filter:brightness(1.08); }
 #page-configuracoes .aw-confirm:disabled{ opacity:.5; cursor:default; }
 #page-configuracoes .aw-reveal{ background:var(--panel-2, rgba(0,0,0,0.2)); border:1px solid rgba(34,224,214,0.34); border-radius:10px; padding:12px 13px; margin-bottom:14px; }
 #page-configuracoes .aw-reveal .lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); font-weight:600; margin-bottom:6px; }
 #page-configuracoes .aw-reveal .val{ display:flex; align-items:center; gap:8px; }
 #page-configuracoes .aw-reveal .val code{ flex:1 1 auto; min-width:0; overflow-x:auto; white-space:nowrap; font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size:12.5px; color:var(--accent); }
 #page-configuracoes .aw-reveal .warn{ font-size:11px; color:var(--warn); margin-top:8px; }
 #page-configuracoes .aw-copy{ flex:0 0 auto; border:1px solid var(--line-strong); background:transparent; color:var(--text); font-size:11.5px; font-weight:600; border-radius:8px; padding:6px 11px; cursor:pointer; }
 #page-configuracoes .aw-copy:hover{ border-color:var(--accent); color:var(--accent); }
 @media (max-width:780px){ #page-configuracoes .aw-evgrid{ grid-template-columns:1fr; } #page-configuracoes table.aw-tbl{ display:block; overflow-x:auto; } }

#page-contatos{
  --ct-pink:#e879f9;
  --ct-r:14px; --ct-r-sm:10px;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
}
/* visibilidade controlada pelo toggle .active do SPA (a base .page{display:none}
   tem menos especificidade que o ID, entao o layout flex SO pode valer quando
   a pagina estiver ativa — senao Contatos fica sobreposto a todas as telas). */
#page-contatos.active{
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}
#page-contatos .ct-num{ font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
#page-contatos ::-webkit-scrollbar{ width:9px; height:9px; }
#page-contatos ::-webkit-scrollbar-thumb{ background:var(--raised); border-radius:9px; border:2px solid transparent; background-clip:padding-box; }
#page-contatos ::-webkit-scrollbar-thumb:hover{ background:var(--mute); }

/* ── top header ── */
#page-contatos .ct-top{
  display:flex; align-items:center; gap:13px;
  padding:16px 26px 14px;
  background:var(--panel-2, #111824);
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
#page-contatos .ct-head-l{ display:flex; align-items:center; gap:11px; }
#page-contatos .ct-brand-mark{
  width:30px; height:30px; border-radius:9px;
  background:var(--panel-2, #111824);
  display:grid; place-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-contatos .ct-brand-mark svg{ width:16px; height:16px; color:var(--bg); }
#page-contatos .ct-h-title{ font-size:18px; font-weight:700; letter-spacing:-0.02em; color:var(--text); }
#page-contatos .ct-h-sub{ font-size:11px; color:var(--mute); margin-top:1px; }
#page-contatos .ct-spacer{ flex:1; }
#page-contatos .ct-status{ font-size:11px; color:var(--dim); white-space:nowrap; }
#page-contatos .ct-searchbox{
  display:flex; align-items:center; gap:9px; padding:8px 13px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel-2);
  min-width:280px; transition:border .18s, box-shadow .18s;
}
#page-contatos .ct-searchbox:focus-within{ border-color:var(--accent-deep); box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-contatos .ct-searchbox svg{ width:15px; height:15px; color:var(--mute); flex-shrink:0; }
#page-contatos .ct-searchbox input{ background:none; border:none; outline:none; color:var(--text); font-size:13px; width:100%; font-family:inherit; }
#page-contatos .ct-searchbox input::placeholder{ color:var(--mute); }
#page-contatos .ct-searchbox .ct-k{ font-family:'JetBrains Mono',monospace; font-size:10px; border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--mute); }
#page-contatos .ct-btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:9px;
  font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--line);
  background:var(--panel-2); color:var(--dim); transition:.15s; white-space:nowrap;
}
#page-contatos .ct-btn svg{ width:14px; height:14px; }
#page-contatos .ct-btn:hover{ background:var(--raised); color:var(--text); }
#page-contatos .ct-btn.ct-primary{ background:var(--panel-2, #111824); color:var(--bg); border:none; box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-contatos .ct-btn.ct-primary:hover{ filter:brightness(1.08); }
#page-contatos .ct-btn.ct-ghost{ background:none; border-color:var(--line); }

/* ── smart-list tabs ── */
#page-contatos .ct-tabs{ display:flex; align-items:center; gap:4px; padding:10px 26px 0; overflow-x:auto; border-bottom:1px solid var(--line); }
#page-contatos .ct-tabs::-webkit-scrollbar{ height:0; }
#page-contatos .ct-tab{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px 11px;
  font-size:13px; font-weight:500; color:var(--mute); cursor:pointer; position:relative;
  white-space:nowrap; transition:color .15s; border-bottom:2px solid transparent; margin-bottom:-1px;
}
#page-contatos .ct-tab:hover{ color:var(--dim); }
#page-contatos .ct-tab.on{ color:var(--text); border-bottom-color:var(--accent); }
#page-contatos .ct-tab.on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-contatos .ct-tab .ct-cnt{ font-family:'JetBrains Mono',monospace; font-size:10.5px; background:var(--raised); color:var(--dim); padding:1px 7px; border-radius:20px; font-weight:600; }
#page-contatos .ct-tab.on .ct-cnt{ background:var(--accent-glow); color:var(--accent); }
#page-contatos .ct-tab.star svg{ width:13px; height:13px; color:var(--warn); }
#page-contatos .ct-tab-add{ padding:8px 10px; color:var(--mute); cursor:pointer; border-radius:8px; }
#page-contatos .ct-tab-add:hover{ background:rgba(255,255,255,0.04); color:var(--accent); }
#page-contatos .ct-tab-add svg{ width:14px; height:14px; vertical-align:-2px; }

/* ── sub-toolbar ── */
#page-contatos .ct-subtools{ display:flex; align-items:center; gap:8px; padding:11px 26px; flex-wrap:wrap; }
#page-contatos .ct-pill{
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:8px;
  font-size:12px; font-weight:500; border:1px solid var(--line); background:var(--panel-2);
  color:var(--dim); cursor:pointer; transition:.15s;
}
#page-contatos .ct-pill:hover{ background:var(--raised); color:var(--text); }
#page-contatos .ct-pill svg{ width:13px; height:13px; }
#page-contatos .ct-pill.act{ border-color:var(--accent-deep); background:var(--accent-glow); color:var(--accent); }
#page-contatos .ct-pill .x{ margin-left:2px; opacity:.7; }
#page-contatos .ct-count-info{ font-size:12px; color:var(--mute); margin-left:auto; }
#page-contatos .ct-count-info b{ color:var(--text); font-family:'JetBrains Mono',monospace; }

/* ── bulk bar ── */
#page-contatos .ct-bulkbar{
  display:none; align-items:center; gap:10px; padding:10px 26px;
  background:var(--panel-2, #111824);
  border-top:1px solid var(--accent-deep); border-bottom:1px solid var(--line);
  animation:ctSlideDown .25s cubic-bezier(.2,.8,.2,1);
}
#page-contatos .ct-bulkbar.show{ display:flex; }
@keyframes ctSlideDown{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
#page-contatos .ct-selcount{ font-weight:700; color:var(--accent); font-size:13px; display:flex; align-items:center; gap:8px; }
#page-contatos .ct-selcount .ct-num{ background:var(--accent); color:var(--bg); padding:1px 8px; border-radius:20px; font-size:12px; }
#page-contatos .ct-bsep{ width:1px; height:20px; background:var(--line-strong); margin:0 2px; }
#page-contatos .ct-bbtn{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:8px;
  font-size:12px; font-weight:500; border:1px solid var(--line); background:var(--panel-2);
  color:var(--dim); cursor:pointer; transition:.15s;
}
#page-contatos .ct-bbtn:hover{ background:var(--raised); color:var(--text); }
#page-contatos .ct-bbtn svg{ width:13px; height:13px; }
#page-contatos .ct-bbtn.ct-danger:hover{ border-color:var(--bad); color:var(--bad); background:rgba(239,68,68,0.08); }

/* ── body + table ── */
#page-contatos .ct-body{ flex:1; display:flex; overflow:hidden; position:relative; }
#page-contatos .ct-tablewrap{ overflow:auto; height:100%; width:100%; }
#page-contatos .ct-table{ width:100%; border-collapse:collapse; font-size:13px; }
#page-contatos .ct-table thead th{
  position:sticky; top:0; z-index:4; background:var(--panel);
  text-align:left; padding:11px 14px; font-size:10.5px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--mute);
  border-bottom:1px solid var(--line-strong); white-space:nowrap; user-select:none;
}
#page-contatos .ct-table thead th.ct-sortable{ cursor:pointer; }
#page-contatos .ct-table thead th.ct-sortable:hover{ color:var(--dim); }
#page-contatos .ct-table thead th .ct-sort{ margin-left:5px; opacity:.5; font-size:9px; vertical-align:1px; }
#page-contatos .ct-table thead th.ct-sorted .ct-sort{ opacity:1; color:var(--accent); }
#page-contatos .ct-table tbody td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
#page-contatos .ct-table tbody tr{ cursor:pointer; transition:background .12s; }
#page-contatos .ct-table tbody tr:hover{ background:rgba(255,255,255,0.025); }
#page-contatos .ct-table tbody tr.sel{ background:var(--accent-glow); }
#page-contatos .ct-cb{
  width:15px; height:15px; border-radius:4px; border:1.5px solid var(--line-strong);
  background:var(--panel-2); cursor:pointer; display:inline-grid; place-items:center;
  transition:.12s; flex-shrink:0; position:relative;
}
#page-contatos .ct-cb:hover{ border-color:var(--accent-deep); }
#page-contatos .ct-cb.ck{ background:var(--accent); border-color:var(--accent); }
#page-contatos .ct-cb.ck::after{ content:""; width:5px; height:9px; border:solid var(--bg); border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-1px); }
#page-contatos .ct-colcb{ width:40px; text-align:center; }
#page-contatos .ct-cell-name{ display:flex; align-items:center; gap:11px; min-width:0; }
#page-contatos .ct-cav{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-weight:700; font-size:12px; color:#fff; background:var(--avatar-color,var(--raised)); flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.18); overflow:hidden; }
#page-contatos .ct-cav img{ width:100%; height:100%; object-fit:cover; }
#page-contatos .ct-nm-main{ font-weight:600; font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
#page-contatos .ct-nm-sub{ font-size:11px; color:var(--mute); display:flex; align-items:center; gap:6px; margin-top:1px; }
#page-contatos .ct-nm-sub .ig{ color:var(--ct-pink); font-weight:500; }
#page-contatos .ct-mono-cell{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
#page-contatos .ct-email-cell{ color:var(--dim); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; display:inline-block; }
#page-contatos .ct-tagcell{ display:flex; gap:5px; flex-wrap:wrap; max-width:260px; }
#page-contatos .ct-tag{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:6px; font-size:10.5px; font-weight:600; white-space:nowrap; border:1px solid transparent; letter-spacing:0.01em; }
#page-contatos .ct-tag.t-hot{ background:rgba(239,68,68,0.14); color:#fb7185; border-color:rgba(239,68,68,0.3); }
#page-contatos .ct-tag.t-win{ background:rgba(34,197,94,0.14); color:var(--live); border-color:rgba(34,197,94,0.3); }
#page-contatos .ct-tag.t-client{ background:var(--accent-glow); color:var(--accent); border-color:rgba(15,181,173,0.4); }
#page-contatos .ct-tag.t-imersao{ background:rgba(167,139,250,0.14); color:#c4b5fd; border-color:rgba(167,139,250,0.3); }
#page-contatos .ct-tag.t-ig{ background:rgba(232,121,249,0.13); color:var(--ct-pink); border-color:rgba(232,121,249,0.3); }
#page-contatos .ct-tag.t-warn{ background:rgba(234,179,8,0.13); color:var(--warn); border-color:rgba(234,179,8,0.3); }
#page-contatos .ct-tag.t-owner{ background:rgba(56,189,248,0.13); color:#7dd3fc; border-color:rgba(56,189,248,0.3); }
#page-contatos .ct-tag.t-mute{ background:var(--raised); color:var(--dim); border-color:var(--line); }
#page-contatos .ct-tag-more{ color:var(--mute); font-size:10.5px; font-weight:600; padding:2px 4px; }
#page-contatos .ct-src-cell{ display:inline-flex; align-items:center; gap:6px; }
#page-contatos .ct-src-dot{ width:7px; height:7px; border-radius:2px; flex-shrink:0; }
#page-contatos .ct-src-name{ font-size:11.5px; color:var(--dim); }
#page-contatos .ct-date-cell{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--dim); font-variant-numeric:tabular-nums; }
#page-contatos .ct-date-cell .rel{ color:var(--mute); font-size:10px; display:block; margin-top:1px; font-family:inherit; }
#page-contatos .ct-row-actions{ display:flex; gap:4px; opacity:0; transition:opacity .12s; }
#page-contatos .ct-table tbody tr:hover .ct-row-actions{ opacity:1; }
#page-contatos .ct-ract{ width:28px; height:28px; border-radius:7px; display:grid; place-items:center; color:var(--mute); cursor:pointer; transition:.12s; }
#page-contatos .ct-ract:hover{ background:var(--raised); color:var(--accent); }
#page-contatos .ct-ract svg{ width:14px; height:14px; }
#page-contatos .ct-dim-dash{ color:var(--mute); }

/* ── footer / pagination ── */
#page-contatos .ct-foot{ display:flex; align-items:center; gap:14px; padding:11px 26px; border-top:1px solid var(--line); background:var(--bg); font-size:12px; color:var(--mute); }
#page-contatos .ct-foot .ct-num{ color:var(--text); }
#page-contatos .ct-pager{ margin-left:auto; display:flex; align-items:center; gap:6px; }
#page-contatos .ct-pg{ min-width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:600; border:1px solid var(--line); background:var(--panel-2); color:var(--dim); cursor:pointer; transition:.12s; font-family:'JetBrains Mono',monospace; }
#page-contatos .ct-pg:hover{ background:var(--raised); color:var(--text); }
#page-contatos .ct-pg.on{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
#page-contatos .ct-pg.dis{ opacity:.4; cursor:default; }
#page-contatos .ct-pgsel{ padding:5px 10px; border-radius:8px; border:1px solid var(--line); background:var(--panel-2); color:var(--dim); font-size:12px; cursor:pointer; }

/* ── empty state ── */
#page-contatos .ct-empty{ display:none; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; gap:14px; color:var(--mute); padding:40px; }
#page-contatos .ct-empty.show{ display:flex; }
#page-contatos .ct-empty .ico{ width:64px; height:64px; border-radius:20px; background:var(--panel-2); display:grid; place-items:center; border:1px solid var(--line); }
#page-contatos .ct-empty .ico svg{ width:30px; height:30px; color:var(--mute); }
#page-contatos .ct-empty h3{ font-size:16px; color:var(--text); font-weight:600; }
#page-contatos .ct-empty p{ font-size:13px; max-width:280px; }

/* ── scrim + drawers (scoped under #page-contatos) ── */
#page-contatos .ct-scrim{ position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1200; opacity:0; pointer-events:none; transition:opacity .25s; backdrop-filter:none; }
#page-contatos .ct-scrim.show{ opacity:1; pointer-events:auto; }
#page-contatos .ct-drawer{
  position:fixed; top:0; right:0; height:100vh; width:420px; max-width:92vw; z-index:1300;
  background:var(--panel-2, #111824); border-left:1px solid var(--line-strong);
  box-shadow:0 1px 3px rgba(0,0,0,.18); transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.85,.2,1); display:flex; flex-direction:column;
}
#page-contatos .ct-drawer.show{ transform:none; }
#page-contatos .ct-drawer.ct-wide{ width:560px; }
/* FASE A 2026-06-11: campos personalizados + DND */
#page-contatos .cf-field{ margin-bottom:12px; }
#page-contatos .cf-flabel{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text); margin-bottom:4px; }
#page-contatos .cf-ftype{ font-size:10px; font-weight:500; color:var(--mute); background:var(--raised); padding:1px 6px; border-radius:999px; }
#page-contatos .cf-input{ width:100%; box-sizing:border-box; background:var(--input-bg); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:8px 10px; font-size:13px; }
#page-contatos .cf-opts{ display:flex; flex-direction:column; gap:5px; }
#page-contatos .cf-radio{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text); cursor:pointer; }
#page-contatos .cf-form{ display:flex; flex-direction:column; gap:8px; }
#page-contatos .cf-defrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
#page-contatos .cf-defname{ font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; }
#page-contatos .cf-defkey{ font-size:11px; color:var(--mute); margin-top:2px; }
#page-contatos .cf-defacts{ display:flex; gap:6px; flex-shrink:0; }
#page-contatos .cf-dnd-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:13px; color:var(--text); }
#page-contatos .cf-toggle{ width:38px; height:20px; border-radius:999px; background:var(--line-strong); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
#page-contatos .cf-toggle::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--panel); border:1px solid var(--line); transition:transform .2s; }
#page-contatos .cf-toggle.on{ background:var(--ct-pink,#e0457b); }
#page-contatos .cf-toggle.on::after{ transform:translateX(18px); }
body[data-role="admin"] .ct-cf-managebtn{ display:inline-flex; }
.ct-cf-managebtn{ display:none; }
#page-contatos .ct-dhead{ display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line); }
#page-contatos .ct-dhead h2{ font-size:16px; font-weight:700; letter-spacing:-0.01em; color:var(--text); }
#page-contatos .ct-close{ margin-left:auto; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:var(--mute); cursor:pointer; border:1px solid var(--line); transition:.15s; }
#page-contatos .ct-close:hover{ background:var(--raised); color:var(--text); }
#page-contatos .ct-close svg{ width:16px; height:16px; }
#page-contatos .ct-dbody{ flex:1; overflow-y:auto; padding:18px 22px; }
#page-contatos .ct-dfoot{ padding:14px 22px; border-top:1px solid var(--line); display:flex; gap:10px; }
#page-contatos .ct-dfoot .ct-btn{ flex:1; justify-content:center; }

/* filter blocks */
#page-contatos .ct-fblock{ margin-bottom:20px; }
#page-contatos .ct-fblock>label{ font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--mute); display:block; margin-bottom:9px; }
#page-contatos .ct-finput{ width:100%; padding:9px 11px; border-radius:9px; border:1px solid var(--line); background:var(--raised); color:var(--text); font-size:13px; font-family:inherit; outline:none; transition:.15s; }
#page-contatos .ct-finput:focus{ border-color:var(--accent-deep); box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-contatos .ct-logic-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:16px; }
#page-contatos .ct-logic-toggle button{ padding:5px 14px; font-size:11px; font-weight:600; background:var(--raised); color:var(--mute); border:none; cursor:pointer; transition:.12s; }
#page-contatos .ct-logic-toggle button.on{ background:var(--accent-glow); color:var(--accent); }
#page-contatos .ct-chiplist{ display:flex; flex-wrap:wrap; gap:6px; }
#page-contatos .ct-fchip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:7px; font-size:11.5px; font-weight:500; border:1px solid var(--line); background:var(--raised); color:var(--dim); cursor:pointer; transition:.12s; }
#page-contatos .ct-fchip:hover{ border-color:var(--accent-deep); color:var(--text); }
#page-contatos .ct-fchip.on{ background:var(--accent-glow); border-color:var(--accent-deep); color:var(--accent); }
#page-contatos .ct-fchip .q{ font-family:'JetBrains Mono',monospace; font-size:10px; opacity:.7; }
#page-contatos .ct-daterow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* detail drawer */
#page-contatos .ct-dt-hero{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
#page-contatos .ct-dt-av{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-weight:700; font-size:20px; color:#fff; background:var(--avatar-color,var(--raised)); flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.18); overflow:hidden; }
#page-contatos .ct-dt-av img{ width:100%; height:100%; object-fit:cover; }
#page-contatos .ct-dt-name{ font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--text); }
#page-contatos .ct-dt-meta{ font-size:12px; color:var(--mute); margin-top:2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#page-contatos .ct-dt-quick{ display:flex; gap:8px; margin:16px 0 20px; }
#page-contatos .ct-qa{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 0; border-radius:10px; border:1px solid var(--line); background:var(--raised); color:var(--dim); cursor:pointer; transition:.15s; font-size:11px; font-weight:600; }
#page-contatos .ct-qa:hover{ border-color:var(--accent-deep); color:var(--accent); background:var(--accent-glow); }
#page-contatos .ct-qa svg{ width:17px; height:17px; }
#page-contatos .ct-dt-section{ margin-bottom:20px; }
#page-contatos .ct-dt-sec-title{ font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--mute); margin-bottom:11px; display:flex; align-items:center; gap:8px; }
#page-contatos .ct-dt-sec-title .ln{ flex:1; height:1px; background:var(--line); }
#page-contatos .ct-kv{ display:grid; grid-template-columns:104px 1fr; gap:6px 12px; font-size:12.5px; }
#page-contatos .ct-kv dt{ color:var(--mute); }
#page-contatos .ct-kv dd{ color:var(--text); word-break:break-word; }
#page-contatos .ct-kv dd.mono{ font-family:'JetBrains Mono',monospace; font-size:12px; }
#page-contatos .ct-tl-item{ display:flex; gap:11px; padding-bottom:16px; position:relative; }
#page-contatos .ct-tl-item::before{ content:""; position:absolute; left:13px; top:26px; bottom:-2px; width:1.5px; background:var(--line); }
#page-contatos .ct-tl-item:last-child::before{ display:none; }
#page-contatos .ct-tl-ico{ width:27px; height:27px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; z-index:1; }
#page-contatos .ct-tl-ico svg{ width:14px; height:14px; }
#page-contatos .ct-tl-ico.wa{ background:rgba(34,197,94,0.16); color:var(--live); }
#page-contatos .ct-tl-ico.ig{ background:rgba(232,121,249,0.16); color:var(--ct-pink); }
#page-contatos .ct-tl-ico.sale{ background:var(--accent-glow); color:var(--accent); }
#page-contatos .ct-tl-ico.tag{ background:var(--raised); color:var(--dim); }
#page-contatos .ct-tl-body{ flex:1; min-width:0; padding-top:2px; }
#page-contatos .ct-tl-top{ display:flex; align-items:baseline; gap:8px; }
#page-contatos .ct-tl-act{ font-size:12.5px; font-weight:600; color:var(--text); }
#page-contatos .ct-tl-time{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--mute); margin-left:auto; white-space:nowrap; }
#page-contatos .ct-tl-text{ font-size:12px; color:var(--dim); margin-top:2px; line-height:1.4; }
#page-contatos .ct-note-input{ width:100%; min-height:64px; padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--raised); color:var(--text); font-size:13px; font-family:inherit; resize:vertical; outline:none; }
#page-contatos .ct-note-input:focus{ border-color:var(--accent-deep); box-shadow:0 1px 3px rgba(0,0,0,.18); }

/* toast (scoped) */
#page-contatos .ct-toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); z-index:1400; background:var(--raised); border:1px solid var(--line-strong); border-radius:11px; padding:11px 18px; font-size:13px; font-weight:500; box-shadow:0 1px 3px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:.25s; display:flex; align-items:center; gap:9px; color:var(--text); }
#page-contatos .ct-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#page-contatos .ct-toast svg{ width:16px; height:16px; color:var(--live); }
#page-contatos .ct-fade-in{ animation:ctFadeUp .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ctFadeUp{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }




/* === CAMPANHAS WA === */
/* Redesign cockpit: preto tingido, vidro de borda fina, acento ciano disciplinado,
   numeros mono telemetria. Mata o verde neon (#25d366/#7ee08a/#4caf50) e o amarelo/
   roxo neon dos chips de status; troca por --live/--warn/--info/--bad sutis e neutros.
   Cards renderizados inline via JS -> override com #camp-list e !important. */

/* ── HEADER da pagina ───────────────────────────────────────────── */
#page-campanhas > header.glass{
  background:var(--panel) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* badge verde neon do icone -> tile neutro com glyph ciano discreto */
#page-campanhas > header.glass > div > div[style*="decorative-fill(135deg,#25d366"]{
  background:var(--raised) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
}
#page-campanhas > header.glass > div > div[style*="decorative-fill(135deg,#25d366"] svg{
  color:var(--accent) !important;
}
#page-campanhas > header.glass span.text-sm{
  color:var(--text) !important;
  font-weight:600 !important;
  letter-spacing:-0.01em;
}
/* botao Nova campanha = acao primaria (unico ciano forte do topo) */
#page-campanhas > header.glass .crm-toolbar-btn.primary{
  background:var(--accent) !important;
  border:1px solid var(--accent-deep) !important;
  color:var(--bg) !important;
  font-weight:600 !important;
  border-radius:var(--r-sm) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:filter .15s,box-shadow .15s !important;
}
#page-campanhas > header.glass .crm-toolbar-btn.primary:hover{
  filter:brightness(1.06) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* ── LISTA / CARD de campanha ───────────────────────────────────── */
#camp-list{ gap:16px !important; }

/* card: painel de vidro, borda 1px fina, raio, sombra suave. SEM faixa lateral. */
#camp-list > div[onclick^="campOpenDetail"]{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  padding:18px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:border-color .18s,background .18s,transform .18s !important;
}
#camp-list > div[onclick^="campOpenDetail"]:hover{
  background:var(--panel-2) !important;
  border-color:var(--accent-glow) !important;
  transform:translateY(-1px);
}

/* nome da campanha: titulo forte, sem quebra */
#camp-list > div[onclick^="campOpenDetail"] > div:first-child > div[style*="font-weight:600"]{
  color:var(--text) !important;
  font-size:15px !important;
  font-weight:650 !important;
  letter-spacing:-0.01em;
  line-height:1.3 !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* CHIP de status: sinal sobrio (sem fundo neon chapado).
   JS injeta cor inline por status -> neutralizo o fundo e recoloro com classe-less
   via atributos. Fundo fica leve, borda fina, texto mono uppercase. */
#camp-list > div[onclick^="campOpenDetail"] span[style*="border-radius:10px"]{
  font-family:var(--mono) !important;
  font-size:9.5px !important;
  font-weight:600 !important;
  letter-spacing:0.08em !important;
  text-transform:uppercase !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
  color:var(--dim) !important;
}
/* recoloracao por status real (vence o inline color do JS) */
#camp-list > div[onclick^="campOpenDetail"] span[style*="background:#7c8aff22"]{   /* sending */
  background:rgba(77,124,255,0.12) !important;border-color:rgba(77,124,255,0.30) !important;color:var(--info) !important;
}
#camp-list > div[onclick^="campOpenDetail"] span[style*="background:#ffd54f22"]{   /* scheduled */
  background:rgba(245,181,68,0.12) !important;border-color:rgba(245,181,68,0.30) !important;color:var(--warn) !important;
}
#camp-list > div[onclick^="campOpenDetail"] span[style*="background:#4caf5022"]{   /* done */
  background:rgba(52,232,158,0.12) !important;border-color:rgba(52,232,158,0.30) !important;color:var(--live) !important;
}
#camp-list > div[onclick^="campOpenDetail"] span[style*="background:#f4433622"],
#camp-list > div[onclick^="campOpenDetail"] span[style*="background:#f4433622"]{ /* cancelled / failed */
  background:rgba(255,93,108,0.12) !important;border-color:rgba(255,93,108,0.30) !important;color:var(--bad) !important;
}
#camp-list > div[onclick^="campOpenDetail"] span[style*="background:#9aa1c422"]{   /* draft */
  background:var(--raised) !important;border-color:var(--line-strong) !important;color:var(--mute) !important;
}

/* nome do template */
#camp-list > div[onclick^="campOpenDetail"] > div[style*="margin-bottom:10px"]{
  color:var(--dim) !important;
  font-size:12px !important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* linha enviados/falhas: label mute + valor mono */
#camp-list > div[onclick^="campOpenDetail"] > div[style*="justify-content:space-between"]{
  color:var(--mute) !important;
  font-size:11px !important;
  letter-spacing:0.02em;
}
#camp-list > div[onclick^="campOpenDetail"] > div[style*="justify-content:space-between"] span{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  color:var(--dim) !important;
}

/* BARRA de progresso: trilho fino neutro + preenchimento ciano chapado (sem gradient neon) */
#camp-list > div[onclick^="campOpenDetail"] > div[style*="height:5px"]{
  height:4px !important;
  background:var(--raised) !important;
  border-radius:999px !important;
  border:1px solid var(--line) !important;
}
#camp-list > div[onclick^="campOpenDetail"] > div[style*="height:5px"] > div{
  background:var(--accent) !important;
  border-radius:999px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* rodape data */
#camp-list > div[onclick^="campOpenDetail"] > div[style*="margin-top:8px"]{
  color:var(--mute) !important;
  font-size:10.5px !important;
  letter-spacing:0.02em;
}

/* estado vazio / loading: tipografia limpa */
#camp-list > div[style*="grid-column:1/-1"]{
  color:var(--mute) !important;
  font-size:13px !important;
}

/* ── MODAL: capa verde neon -> faixa neutra com brilho ciano sutil ── */
.camp-modal-cover,
.modal .modal-header[style] /* fallback */{
  background:var(--panel-2) !important;
}
.camp-modal-cover{
  height:4px !important;
  background:var(--panel-2, #111824);
  opacity:.9 !important;
}
.camp-modal-cover::after{
  background:var(--panel-2, #111824);
}

/* icone verde do header do modal -> ciano */
#camp-new-modal .modal-header svg[fill="#25d366"],
#camp-actions-modal .modal-header svg[fill="#25d366"]{
  fill:var(--accent) !important;
}

/* stats do modal de acoes: numeros verde/vermelho neon -> --live/--bad mono */
#camp-actions-modal #cam-sent{ color:var(--live) !important;font-family:var(--mono) !important;font-variant-numeric:tabular-nums; }
#camp-actions-modal #cam-failed{ color:var(--bad) !important;font-family:var(--mono) !important;font-variant-numeric:tabular-nums; }
#camp-actions-modal #cam-status,
#camp-actions-modal #cam-audience{ font-family:var(--mono) !important;font-variant-numeric:tabular-nums;color:var(--text) !important; }
#camp-actions-modal .modal [style*="background:rgba(255,255,255,0.03)"]{
  background:var(--raised) !important;border:1px solid var(--line) !important;border-radius:var(--r-sm) !important;
}


/* === CRM KANBAN === */
/* Override do visual antigo (roxo #7c8aff/#bd16ff, rosa #e879f9, verde neon #7ee08a,
   vermelho chapado #ff8a80) para o padrao cockpit: preto tingido, vidro fino, acento
   ciano disciplinado, status discretos, numeros mono. Tudo via var() do :root global. */

/* ---------- TOOLBAR ---------- */
#page-crm .crm-toolbar{
  background:var(--panel) !important;
  border-bottom:1px solid var(--line) !important;
  padding:14px 22px !important;
}
#page-crm #crm-pipe-title{ color:var(--text) !important; }
#page-crm #crm-pipe-dot{ background:var(--accent) !important; }
#page-crm #crm-pipe-count{
  color:var(--mute) !important;
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
}

#page-crm .crm-pipe-tab{
  background:var(--panel-2) !important;
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  font-weight:500 !important;
  transition:color .18s,background .18s,border-color .18s !important;
}
#page-crm .crm-pipe-tab:hover{
  background:var(--raised) !important;
  color:var(--text) !important;
  border-color:var(--line-strong) !important;
}
#page-crm .crm-pipe-tab.active{
  background:var(--accent-glow) !important;
  border-color:var(--accent-deep) !important;
  color:var(--text) !important;
}
#page-crm .crm-pipe-tab .pipe-badge{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  color:var(--mute) !important;
  opacity:1 !important;
}

#page-crm .crm-toolbar-btn{
  background:var(--panel-2) !important;
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  transition:color .18s,background .18s,border-color .18s !important;
}
#page-crm .crm-toolbar-btn:hover{
  background:var(--raised) !important;
  color:var(--text) !important;
  border-color:var(--accent-glow) !important;
}
/* acao primaria: ciano solido, sem gradiente berrante */
#page-crm .crm-toolbar-btn.primary{
  background:var(--accent) !important;
  color:var(--bg) !important;
  border:1px solid var(--accent) !important;
  font-weight:600 !important;
}
#page-crm .crm-toolbar-btn.primary:hover{
  background:var(--accent-deep) !important;
  border-color:var(--accent-deep) !important;
  color:var(--bg) !important;
}

#page-crm .crm-select{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:var(--r-sm) !important;
}
#page-crm .crm-select:focus{
  outline:none !important;
  border-color:var(--accent-deep) !important;
}

/* ---------- BOARD ---------- */
#page-crm .crm-board-wrap{ padding:22px !important; gap:16px !important; }

#page-crm .crm-column{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* faixa fina (3px) no topo da coluna em ciano disciplinado, sem shimmer berrante */
#page-crm .crm-column::before{
  height:3px !important;
  background:var(--pipe-color, var(--accent)) !important;
  opacity:.85 !important;
  animation:none !important;
}

#page-crm .crm-col-head{
  padding:11px 13px !important;
  border-bottom:1px solid var(--line) !important;
  background:transparent !important;
}
#page-crm .crm-col-head input.col-name{
  color:var(--text) !important;
  font-weight:600 !important;
}
#page-crm .crm-col-head input.col-name:focus{
  background:var(--raised) !important;
  outline:none !important;
}
#page-crm .crm-col-count{
  background:var(--panel-2) !important;
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
}
#page-crm .crm-col-menu{ color:var(--mute) !important; border-radius:var(--r-sm) !important; }
#page-crm .crm-col-menu:hover{ background:var(--raised) !important; color:var(--text) !important; }

#page-crm .crm-col-cards::-webkit-scrollbar-thumb{
  background:var(--line-strong) !important; border-radius:4px !important;
}

#page-crm .crm-col-add{
  border-top:1px solid var(--line) !important;
  color:var(--mute) !important;
  border-radius:0 0 var(--r) var(--r) !important;
  transition:color .18s,background .18s !important;
}
#page-crm .crm-col-add:hover{ background:var(--raised) !important; color:var(--text) !important; }

#page-crm .crm-col-more{
  margin:0 10px 8px 10px;
  padding:9px 10px;
  border:1px dashed var(--line-strong, rgba(255,255,255,0.14));
  border-radius:var(--r-sm, 8px);
  background:var(--panel-2, rgba(255,255,255,0.03));
  color:var(--accent, #7c8aff);
  font-size:12px;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  user-select:none;
  transition:background .15s, border-color .15s, color .15s;
}
#page-crm .crm-col-more:hover{
  background:var(--raised, rgba(255,255,255,0.06));
  border-color:var(--accent, #7c8aff);
}
#page-crm .crm-col-more-rest{
  display:block;
  margin-top:2px;
  font-size:10px;
  font-weight:500;
  color:var(--mute, #7f87ae);
}

#page-crm .crm-add-column{
  background:var(--panel) !important;
  border:1px dashed var(--line-strong) !important;
  border-radius:var(--r) !important;
  color:var(--mute) !important;
  transition:color .18s,background .18s,border-color .18s !important;
}
#page-crm .crm-add-column:hover{
  background:var(--raised) !important;
  color:var(--text) !important;
  border-color:var(--accent-glow) !important;
}

/* ---------- CARD ---------- */
#page-crm .crm-card{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:border-color .18s,transform .18s,box-shadow .18s !important;
}
#page-crm .crm-card:hover{
  border-color:var(--accent-glow) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-crm .crm-card.sortable-drag{ box-shadow:0 1px 3px rgba(0,0,0,.18); }

/* faixa fina de cor da pipeline/card no topo (3px), acento contido, sem shimmer */
#page-crm .crm-card-cover{
  height:3px !important;
  background:var(--card-color, var(--pipe-color, var(--accent))) !important;
  opacity:.9 !important;
  animation:none !important;
}

#page-crm .crm-card-title{ color:var(--text) !important; font-weight:600 !important; }
#page-crm .crm-card-contact-text{
  color:var(--dim) !important;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* avatar: neutro elevado, sem gradiente roxo */
#page-crm .crm-card-avatar{
  background:var(--raised) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}

/* tags / badges discretos */
#page-crm .crm-card-tag{
  background:var(--raised) !important;
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
}
#page-crm .crm-card-tag.client{
  background:var(--accent-glow) !important;
  color:var(--accent) !important;
  border-color:var(--accent-deep) !important;
}
#page-crm .crm-card-tag.user{
  background:var(--panel) !important;
  color:var(--dim) !important;
  border-color:var(--line) !important;
}
/* status: ganhou=live, perdeu/atraso=bad — discretos */
#page-crm .crm-card-tag.won{
  background:rgba(52,232,158,.12) !important;
  color:var(--live) !important;
  border-color:rgba(52,232,158,.22) !important;
}
#page-crm .crm-card-tag.lost,
#page-crm .crm-card-tag.overdue{
  background:rgba(255,93,108,.12) !important;
  color:var(--bad) !important;
  border-color:rgba(255,93,108,.22) !important;
}

/* IG meta: tira rosa/magenta, vira neutro com acento contido */
#page-crm .crm-card-source{ color:var(--mute) !important; }
#page-crm .crm-ig-handle{ color:var(--dim) !important; font-weight:600 !important; }
#page-crm .crm-ig-handle:hover{ color:var(--text) !important; }
#page-crm .crm-ig-followers{
  background:var(--raised) !important;
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
}
#page-crm .crm-card-bio{ color:var(--mute) !important; }

/* valor de venda no card: numero mono, verde live discreto */
#page-crm .crm-card-sale{
  background:rgba(52,232,158,.08) !important;
  border:1px solid rgba(52,232,158,.20) !important;
  border-radius:var(--r-sm) !important;
}
#page-crm .crm-card-sale-value{
  color:var(--live) !important;
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  font-weight:700 !important;
}
#page-crm .crm-card-sale-prod{ color:var(--mute) !important; }

#page-crm .crm-card-value{
  color:var(--live) !important;
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  font-weight:600 !important;
}
#page-crm .crm-card-value.zero{ color:var(--mute) !important; font-weight:400 !important; }
#page-crm .crm-card-due{ color:var(--mute) !important; font-family:var(--mono) !important; }
#page-crm .crm-card-due.overdue{ color:var(--bad) !important; font-weight:600 !important; }
#page-crm .crm-card-meta{ color:var(--mute) !important; }
#page-crm .crm-card-meta .crm-card-due.overdue{ color:var(--bad) !important; }
#page-crm .crm-card-footer{ color:var(--dim) !important; }

/* canais */
#page-crm .crm-card-channels-row{ border-top:1px solid var(--line) !important; }
#page-crm .crm-ch{
  background:var(--raised) !important;
  color:var(--dim) !important;
  border-radius:var(--r-sm) !important;
  transition:color .18s,background .18s,transform .18s !important;
}
#page-crm .crm-ch:hover{ background:var(--panel) !important; color:var(--text) !important; }
#page-crm .crm-ch.email{ color:var(--dim) !important; }
#page-crm .crm-card-channels-overlay .crm-ch{ background:rgba(0,0,0,.3) !important; }

/* ---------- MODAL ---------- */
#page-crm .crm-modal-overlay{ background:rgba(0,0,0,.7) !important; }
#page-crm .crm-modal{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* cover do modal: faixa de cor, sem gradiente roxo */
#page-crm .crm-modal-cover{
  height:4px !important;
  background:var(--card-color, var(--accent)) !important;
  opacity:.9 !important;
}
#page-crm .crm-modal-title{ color:var(--text) !important; font-weight:600 !important; }
#page-crm .crm-modal-title:focus{ background:var(--raised) !important; outline:none !important; }
#page-crm .crm-modal-sub{ color:var(--mute) !important; }
#page-crm .crm-modal-section h3{ color:var(--dim) !important; }

#page-crm .crm-input,
#page-crm .crm-textarea{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:var(--r-sm) !important;
}
#page-crm .crm-input:focus,
#page-crm .crm-textarea:focus{ outline:none !important; border-color:var(--accent-deep) !important; }
#page-crm .crm-form-row label{ color:var(--mute) !important; }

#page-crm .crm-side-btn{
  background:var(--panel-2) !important;
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
}
#page-crm .crm-side-btn:hover{ background:var(--raised) !important; color:var(--text) !important; }
#page-crm .crm-side-btn.danger{ color:var(--bad) !important; }
#page-crm .crm-side-btn.danger:hover{ background:rgba(255,93,108,.12) !important; }

/* ---------- MODAL: CONTATO ---------- */
#page-crm .ccm-contact-card{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
}
#page-crm .ccm-contact-empty{ color:var(--mute) !important; }
#page-crm .ccm-contact-avatar{
  background:var(--raised) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}
#page-crm .ccm-contact-name{ color:var(--text) !important; }
#page-crm .ccm-contact-biz{ color:var(--dim) !important; }
#page-crm .ccm-contact-row{
  background:var(--panel) !important;
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
}
#page-crm .ccm-contact-row a:hover{ color:var(--text) !important; }
#page-crm .ccm-ch-big{
  background:var(--raised) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
}
#page-crm .ccm-ch-big:hover{ background:var(--panel) !important; }

#page-crm .ccm-section-label{ color:var(--mute) !important; }
#page-crm .ccm-pill{
  background:var(--accent-glow) !important;
  color:var(--accent) !important;
  border:1px solid var(--accent-deep) !important;
  font-weight:500 !important;
}
#page-crm .ccm-pill.source{
  background:var(--raised) !important;
  color:var(--dim) !important;
  border-color:var(--line) !important;
}
#page-crm .ccm-pill.system{
  background:rgba(52,232,158,.12) !important;
  color:var(--live) !important;
  border-color:rgba(52,232,158,.22) !important;
}
#page-crm .ccm-contact-open-btn{
  background:var(--accent-glow) !important;
  color:var(--accent) !important;
  border:1px solid var(--accent-deep) !important;
  border-radius:var(--r-sm) !important;
}
#page-crm .ccm-contact-open-btn:hover{ background:var(--accent) !important; color:var(--bg) !important; }

/* venda no modal: sem gradiente verde berrante, numero mono */
#page-crm .ccm-sale-card{
  background:rgba(52,232,158,.08) !important;
  border:1px solid rgba(52,232,158,.22) !important;
  border-radius:var(--r-sm) !important;
}
#page-crm .ccm-sale-value{
  color:var(--live) !important;
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  font-weight:700 !important;
}
#page-crm .ccm-sale-when{ color:var(--mute) !important; }
#page-crm .ccm-sale-prod{ color:var(--text) !important; }
#page-crm .ccm-sale-platform{ color:var(--dim) !important; }

/* ---------- ATIVIDADE ---------- */
#page-crm .crm-activity{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
}
#page-crm .crm-activity-dot{ background:var(--accent) !important; }
#page-crm .crm-activity-text{ color:var(--dim) !important; }
#page-crm .crm-activity-when{ color:var(--mute) !important; }

/* ---------- POPOVERS ---------- */
#page-crm .crm-popover{
  background:var(--panel-2) !important;
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r-sm) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-crm .crm-popover button{ color:var(--dim) !important; border-radius:8px !important; }
#page-crm .crm-popover button:hover{ background:var(--raised) !important; color:var(--text) !important; }
#page-crm .crm-popover button.danger{ color:var(--bad) !important; }
#page-crm .crm-popover button.danger:hover{ background:rgba(255,93,108,.12) !important; }
#page-crm .crm-color-swatches span:hover{ border-color:var(--accent) !important; }


/* === Automacoes === */
/* Override cockpit para id="page-automacoes" do agents.denderson.ai.
   Mata: amber/orange no header, rosa nas tabs/hover de card, roxo no type-pill,
   verde neon no toggle/DMs, amarelo neon nas keywords, verde/vermelho chapados
   nos status de disparo. Tudo vira preto tingido + vidro + acento ciano disciplinado. */

/* ---- header: troca o icone amber/orange por placa neutra com glyph ciano ---- */
#page-automacoes header .w-8.h-8.rounded-lg.ui-icon-tile.swatch-amber-400.swatch-orange-500{
  background:var(--raised) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-automacoes header .w-8.h-8.rounded-lg svg{
  color:var(--accent) !important;
}
#page-automacoes header span.text-sm.font-semibold{
  color:var(--text) !important;
  letter-spacing:.01em;
}

/* ---- segmented tabs (Automacoes / Disparos): pill ativo ciano, nada de rosa ---- */
#page-automacoes .auto-tabs{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  padding:4px !important;
  gap:4px !important;
}
#page-automacoes .auto-tab{
  color:var(--dim) !important;
  border-radius:7px !important;
  padding:6px 16px !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.01em;
  transition:color .16s ease, background .16s ease !important;
}
#page-automacoes .auto-tab:hover{
  background:rgba(255,255,255,0.04) !important;
  color:var(--text) !important;
}
#page-automacoes .auto-tab.active{
  background:var(--accent-glow) !important;
  color:var(--accent) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* ---- grade de automacoes: respiro maior ---- */
#page-automacoes #auto-grid.channels-grid{
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap:18px !important;
}

/* ---- card de automacao: vidro limpo, borda fina, hover ciano (sem faixa lateral) ---- */
#page-automacoes .auto-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  padding:20px !important;
  gap:12px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:border-color .18s ease, transform .18s ease, background .18s ease !important;
}
#page-automacoes .auto-card:hover{
  border-color:var(--accent-glow) !important;
  background:var(--panel-2) !important;
  transform:translateY(-1px);
}
#page-automacoes .auto-card.disabled{
  opacity:.5 !important;
}

/* ---- titulo + tipo: hierarquia clara ---- */
#page-automacoes .auto-name{
  color:var(--text) !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
}
/* type-pill: era roxo (#c4b5fd). vira chip neutro com label tecnica ---- */
#page-automacoes .auto-type-pill{
  background:var(--raised) !important;
  border:1px solid var(--line) !important;
  color:var(--dim) !important;
  font-family:var(--mono) !important;
  font-size:9.5px !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 9px !important;
  border-radius:6px !important;
}

/* ---- toggle premium: off neutro, on ciano solido (sem verde neon) ---- */
#page-automacoes .auto-toggle{
  width:38px !important;
  height:21px !important;
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
  border-radius:999px !important;
  transition:background .18s ease, border-color .18s ease !important;
}
#page-automacoes .auto-toggle.on{
  background:var(--accent) !important;
  border-color:var(--accent-deep) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-automacoes .auto-toggle::after{
  width:15px !important;
  height:15px !important;
  top:2px !important;
  left:2px !important;
  background:var(--text) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:left .18s cubic-bezier(.2,.8,.2,1) !important;
}
#page-automacoes .auto-toggle.on::after{
  left:18px !important;
  background:var(--bg) !important;
}

/* ---- meta: label mute + valor legivel, sem aperto ---- */
#page-automacoes .auto-meta{
  color:var(--dim) !important;
  font-size:12px !important;
  line-height:1.6 !important;
}
#page-automacoes .auto-meta b{
  color:var(--mute) !important;
  font-weight:600 !important;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.06em;
}

/* ---- keyword chips: AMARELO NEON -> chip neutro com acento ciano contido ---- */
#page-automacoes .auto-kw{
  display:inline-block;
  padding:2px 9px !important;
  border-radius:6px !important;
  background:var(--accent-glow) !important;
  color:var(--accent) !important;
  border:1px solid rgba(34,224,214,0.22) !important;
  font-family:var(--mono) !important;
  font-size:10.5px !important;
  font-weight:500;
  margin:2px 5px 2px 0 !important;
}

/* ---- bloco de stats inline do card (Hoje/DMs/Total): mono tabular + cores corretas ----
   alvos: divs com font-weight:700 que estavam em #fff ou #86efac (verde neon).
   Numeros viram texto forte mono; numeros de DM ganham acento ciano (dado importante). */
#page-automacoes .auto-card > div[style*="grid-template-columns:repeat(4"]{
  border-top:1px solid var(--line) !important;
  margin-top:8px !important;
  padding:10px 0 !important;
}
#page-automacoes .auto-card > div[style*="grid-template-columns:repeat(4"] > div > div:first-child{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  color:var(--text) !important;
  font-size:18px !important;
}
/* colunas 2 e 4 (DMs hoje / DMs total) = dado-chave -> ciano, mata #86efac */
#page-automacoes .auto-card > div[style*="grid-template-columns:repeat(4"] > div:nth-child(2) > div:first-child,
#page-automacoes .auto-card > div[style*="grid-template-columns:repeat(4"] > div:nth-child(4) > div:first-child{
  color:var(--accent) !important;
}
#page-automacoes .auto-card > div[style*="grid-template-columns:repeat(4"] > div > div:last-child{
  color:var(--mute) !important;
  font-size:10px !important;
  letter-spacing:.06em;
}
/* linha "Ultimo disparo" */
#page-automacoes .auto-card > div[style*="font-size:10px"][style*="rgba(255,255,255,0.4)"]{
  color:var(--mute) !important;
}

/* ---- botoes de acao do card (Resultados / Editar / Excluir) ---- */
#page-automacoes .auto-actions-row{
  gap:8px !important;
  margin-top:auto !important;
}
#page-automacoes .auto-actions-row .ch-btn{
  border-radius:var(--r-sm) !important;
  font-size:12px !important;
  font-weight:600 !important;
  border:1px solid var(--line) !important;
  transition:border-color .15s ease, background .15s ease, color .15s ease !important;
}
/* "Resultados": era inline ciano berrante (#67e8f9 / rgba(34,211,238,.15)) -> acento contido */
#page-automacoes .auto-actions-row .ch-btn.edit[onclick*="openAutoStats"]{
  background:var(--accent-glow) !important;
  color:var(--accent) !important;
  border-color:rgba(34,224,214,0.28) !important;
}
#page-automacoes .auto-actions-row .ch-btn.edit[onclick*="openAutoStats"]:hover{
  background:var(--accent) !important;
  color:var(--bg) !important;
}
/* "Editar": era roxo -> neutro raised */
#page-automacoes .auto-actions-row .ch-btn.edit{
  background:var(--raised) !important;
  color:var(--dim) !important;
}
#page-automacoes .auto-actions-row .ch-btn.edit:hover{
  background:var(--panel-2) !important;
  color:var(--text) !important;
  border-color:var(--line-strong) !important;
}
/* "Excluir": vermelho contido, nao chapado */
#page-automacoes .auto-actions-row .ch-btn.danger{
  background:rgba(255,93,108,0.10) !important;
  color:var(--bad) !important;
  border-color:rgba(255,93,108,0.22) !important;
}
#page-automacoes .auto-actions-row .ch-btn.danger:hover{
  background:rgba(255,93,108,0.18) !important;
  border-color:rgba(255,93,108,0.40) !important;
}

/* ---- aba Disparos: bloco + tabela cockpit ---- */
#page-automacoes #auto-tab-runs .igm-block{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  padding:20px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-automacoes #auto-tab-runs .igm-block-title{
  color:var(--text) !important;
  font-size:14px !important;
  font-weight:600 !important;
  margin-bottom:14px !important;
}
#page-automacoes .igm-table th{
  color:var(--mute) !important;
  text-transform:uppercase;
  font-size:10px !important;
  letter-spacing:.07em;
  font-weight:600 !important;
  border-bottom:1px solid var(--line-strong) !important;
  padding:10px 12px !important;
}
#page-automacoes .igm-table td{
  color:var(--dim) !important;
  border-bottom:1px solid var(--line) !important;
  padding:11px 12px !important;
}
#page-automacoes .igm-table tr:hover{
  background:rgba(34,224,214,0.045) !important;
}
/* coluna "Quando" + "De" com cara de telemetria */
#page-automacoes .igm-table td:first-child,
#page-automacoes .igm-table td:nth-child(4){
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  color:var(--mute) !important;
}

/* ---- STATUS dos disparos: success = --live, fail = --bad (sem neon) ---- */
#page-automacoes .auto-success{
  color:var(--live) !important;
  font-family:var(--mono) !important;
  font-weight:600 !important;
}
#page-automacoes .auto-fail{
  color:var(--bad) !important;
  font-family:var(--mono) !important;
  font-weight:600 !important;
}

/* ---- empty / loading states ---- */
#page-automacoes .igm-caption{
  color:var(--dim) !important;
}


/* === Metricas Instagram === */
/* Override cockpit para a tela #page-ig-metrics.
   Preto tingido, vidro com borda fina, acento ciano disciplinado,
   numeros em mono telemetria. Zero neon, zero rosa/roxo. */

/* ---------- Header ---------- */
#page-ig-metrics > header.glass {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* o quadradinho rosa->roxo do icone vira vidro com acento contido */
#page-ig-metrics > header .ui-icon-tile {
  background: var(--raised) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-ig-metrics > header .ui-icon-tile svg {
  color: var(--accent) !important;
}
#page-ig-metrics > header .text-white\/80 {
  color: var(--text) !important;
  letter-spacing: -0.01em;
}
#page-ig-metrics #igm-status { color: var(--mute) !important; }

/* ---------- Overview cards (.igm-cards / .igm-kpi) ---------- */
#page-ig-metrics .igm-kpi {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 16px 18px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition: border-color .18s, background .18s !important;
}
#page-ig-metrics .igm-kpi:hover {
  background: var(--panel-2) !important;
  border-color: var(--accent-glow) !important;
}
#page-ig-metrics .igm-kpi-label {
  font-size: 11px !important;
  color: var(--mute) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
  margin-bottom: 8px !important;
}
#page-ig-metrics .igm-kpi-value {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 27px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
}
#page-ig-metrics .igm-kpi-delta {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}
#page-ig-metrics .igm-kpi-delta.up   { color: var(--live) !important; }
#page-ig-metrics .igm-kpi-delta.down { color: var(--bad) !important; }
#page-ig-metrics .igm-kpi-delta.flat { color: var(--mute) !important; }

/* ---------- Blocos de grafico (.igm-block) ---------- */
#page-ig-metrics .igm-block {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 20px !important;
  margin-bottom: 18px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-ig-metrics .igm-block-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 5px !important;
  letter-spacing: -0.01em;
}
#page-ig-metrics .igm-block-sub {
  font-size: 12px !important;
  color: var(--dim) !important;
  margin-bottom: 16px !important;
}
#page-ig-metrics .igm-row { gap: 18px !important; margin-bottom: 18px !important; }

/* ---------- Tabela (.igm-table) ---------- */
#page-ig-metrics .igm-table { font-size: 13px !important; }
#page-ig-metrics .igm-table th {
  text-align: left !important;
  padding: 11px 12px !important;
  color: var(--mute) !important;
  border-bottom: 1px solid var(--line-strong) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px !important;
}
#page-ig-metrics .igm-table td {
  padding: 11px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--text) !important;
}
/* numeros da tabela em mono — apturam celulas numericas via nth-child (Alcance em diante) */
#page-ig-metrics .igm-table td:nth-child(n+5) {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--dim) !important;
}
#page-ig-metrics .igm-table tr:hover { background: rgba(255,255,255,0.02) !important; }
#page-ig-metrics .igm-thumb {
  width: 44px !important; height: 44px !important;
  border-radius: var(--r-sm) !important;
  background: var(--raised) !important;
  border: 1px solid var(--line) !important;
}
#page-ig-metrics .igm-caption { color: var(--dim) !important; max-width: 280px !important; }

/* ---------- Pills de tipo de post ---------- */
/* tudo neutro/vidro; tira rosa/roxo/amarelo neon */
#page-ig-metrics .igm-pill {
  display: inline-block !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: var(--raised) !important;
  color: var(--dim) !important;
  border: 1px solid var(--line) !important;
  letter-spacing: 0.02em;
}
/* o tipo "video" ganha o acento ciano contido como destaque de dado */
#page-ig-metrics .igm-pill.video {
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  border-color: transparent !important;
}
#page-ig-metrics .igm-pill.reel,
#page-ig-metrics .igm-pill.carousel {
  background: var(--raised) !important;
  color: var(--dim) !important;
}

/* ---------- KPIs de engajamento BMAD ---------- */
#page-ig-metrics .igm-eng-kpi {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 13px 14px !important;
}
#page-ig-metrics .igm-eng-kpi-label {
  font-size: 11px !important;
  color: var(--mute) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em !important;
  margin-bottom: 5px !important;
}
#page-ig-metrics .igm-eng-kpi-value {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
}
#page-ig-metrics .igm-eng-kpi-sub { font-size: 11px !important; color: var(--dim) !important; margin-top: 5px !important; }

/* ---------- Barra de benchmark ---------- */
#page-ig-metrics .igm-bench-bar {
  height: 10px !important;
  background: var(--raised) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  margin: 10px 0 4px !important;
}
/* zona "boa" vira faixa ciano discreta no lugar do verde neon */
#page-ig-metrics .igm-bench-zone {
  background:var(--panel-2, #111824);
}
/* marcador deixa de ser rosa -> acento ciano firme */
#page-ig-metrics .igm-bench-marker {
  background: var(--accent) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-ig-metrics .igm-bench-labels { color: var(--mute) !important; font-size: 11px !important; }

#page-ig-metrics .igm-auth-bar {
  background: var(--raised) !important;
  border: 1px solid var(--line) !important;
}

/* ---------- Status pills (semantica por status, sem neon) ---------- */
#page-ig-metrics .igm-status-pill {
  border: 1px solid var(--line) !important;
  font-weight: 600 !important;
}
#page-ig-metrics .igm-status-pill.excelente,
#page-ig-metrics .igm-status-pill.limpo {
  background: rgba(52,232,158,0.12) !important; color: var(--live) !important;
}
#page-ig-metrics .igm-status-pill.bom {
  background: var(--accent-glow) !important; color: var(--accent) !important;
}
#page-ig-metrics .igm-status-pill.regular,
#page-ig-metrics .igm-status-pill.suspeito {
  background: rgba(245,181,68,0.12) !important; color: var(--warn) !important;
}
#page-ig-metrics .igm-status-pill.fraco {
  background: rgba(245,181,68,0.12) !important; color: var(--warn) !important;
}
#page-ig-metrics .igm-status-pill.muito_fraco,
#page-ig-metrics .igm-status-pill.alta {
  background: rgba(255,93,108,0.12) !important; color: var(--bad) !important;
}

/* ---------- Grid dos top posts: 8 colunas (2 linhas de 8 = 16) ---------- */
#page-ig-metrics #igm-top-grid { grid-template-columns: repeat(8, 1fr) !important; }
@media (max-width: 1500px) {
  #page-ig-metrics #igm-top-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 900px) {
  #page-ig-metrics #igm-top-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Cards de top posts ---------- */
#page-ig-metrics .igm-post-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition: border-color .18s, transform .18s !important;
}
/* hover deixa de ser rosa -> borda com glow ciano */
#page-ig-metrics .igm-post-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-glow) !important;
}
#page-ig-metrics .igm-post-thumb { background: var(--raised) !important; }
#page-ig-metrics .igm-post-meta { color: var(--dim) !important; padding: 11px 13px !important; }
#page-ig-metrics .igm-post-meta b {
  color: var(--text) !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
}

/* ---------- Selects/form-input do header (period, account, sort) ---------- */
#page-ig-metrics .form-input {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm) !important;
}
#page-ig-metrics .form-input:focus {
  border-color: var(--accent-glow) !important;
  outline: none !important;
}


/* === VENDAS IMERSAO === */
/* Reescreve a tela #page-imersao no padrao cockpit:
   preto tingido, vidro com borda fina, mono nos numeros, acento ciano
   disciplinado. Mata os gradientes neon (emerald/blue/amber/purple/violet/red)
   e as cores chapadas inline. Tudo escopado em #page-imersao pra nao vazar. */

/* ---------- HEADER ---------- */
#page-imersao header.glass{
  background:var(--panel) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:none;
}
/* icone do header: troca o gradiente emerald por placa de vidro discreta */
#page-imersao header .w-8.h-8.rounded-lg.ui-icon-tile{
  background:var(--raised) !important;
  border:1px solid var(--line-strong);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-imersao header .w-8.h-8 svg{ color:var(--accent) !important; }
#page-imersao header .text-white\/80{ color:var(--text) !important; font-weight:600; letter-spacing:-0.01em; }
#page-imersao header .text-white\/40{ color:var(--mute) !important; }
#page-imersao #im-last-update{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--mute) !important; }

/* ---------- CARTOES GENERICOS (.glass) ---------- */
/* Limpa TODO gradiente/background inline neon dos cards desta tela. */
#page-imersao .glass{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:border-color .18s ease, box-shadow .18s ease;
}
#page-imersao .glass:hover{
  border-color:var(--accent-glow) !important;
}
/* o radial verde decorativo do bloco do grafico: neutraliza */
#page-imersao .glass > div[style*="decorative-fill"]{ display:none !important; }

/* labels e textos auxiliares */
#page-imersao .text-white\/50,
#page-imersao .text-white\/40{ color:var(--dim) !important; }
#page-imersao .text-white\/30{ color:var(--mute) !important; }
#page-imersao .text-white\/85,
#page-imersao .text-white\/80,
#page-imersao .text-white\/90{ color:var(--text) !important; }

/* ---------- 4 CARDS DE TOTAL AGREGADO ---------- */
/* numeros grandes -> mono, tabular, ciano so no que importa, neutro no resto */
#page-imersao #im-tot-qty-period,
#page-imersao #im-tot-gross-period,
#page-imersao #im-tot-clicks-period,
#page-imersao #im-tot-aula-period{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums;
  font-weight:600 !important;
  letter-spacing:-0.02em;
}
/* vendas e faturamento: dado primario -> texto forte */
#page-imersao #im-tot-qty-period{ color:var(--text) !important; }
#page-imersao #im-tot-gross-period{ color:var(--text) !important; }
/* cliques agenda/aula: secundario -> dim, mas o card "ao vivo" do Zoom ganha acento */
#page-imersao #im-tot-clicks-period{ color:var(--dim) !important; }
#page-imersao #im-tot-aula-period{ color:var(--accent) !important; }

/* totais acumulados em mono discreto */
#page-imersao #im-tot-qty-total,
#page-imersao #im-tot-gross-total,
#page-imersao #im-tot-clicks-unique,
#page-imersao #im-tot-clicks-total,
#page-imersao #im-tot-aula-unique,
#page-imersao #im-tot-aula-total{
  font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--dim);
}
#page-imersao a[href*="/agenda"],
#page-imersao a[href*="/aula"]{ color:var(--mute) !important; }
#page-imersao a[href*="/agenda"]:hover,
#page-imersao a[href*="/aula"]:hover{ color:var(--accent) !important; }

/* ---------- SECAO COMUNIDADE (era roxo/violeta) ---------- */
/* card mestre: estava roxo neon. vira vidro padrao com aro fino. */
#page-imersao .glass[style*="168,85,247"]{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-color:var(--line) !important;
}
#page-imersao .glass[style*="168,85,247"]:hover{ border-color:var(--accent-glow) !important; }
/* icone roxo do header da secao */
#page-imersao .ui-icon-tile.swatch-purple-500{
  background:var(--raised) !important;
  border:1px solid var(--line-strong);
}
#page-imersao .ui-icon-tile.swatch-purple-500 svg{ color:var(--accent) !important; }
/* code chip e link roxos */
#page-imersao code.text-purple-300{
  color:var(--dim) !important;
  background:var(--raised);
  border:1px solid var(--line);
  padding:1px 6px; border-radius:6px;
  font-family:var(--mono);
}
#page-imersao a[href*="/comunidade"]{ color:var(--mute) !important; }
#page-imersao a[href*="/comunidade"]:hover{ color:var(--accent) !important; }

/* sub-cards internos (bg-white/5) -> placa elevada limpa */
#page-imersao .bg-white\/5{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
}
/* numeros roxos da comunidade -> mono + neutro/acento */
#page-imersao #im-com-clicks-period,
#page-imersao #im-com-sales-shortlink,
#page-imersao #im-com-gross-shortlink,
#page-imersao #im-com-conv{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums;
  font-weight:600 !important;
  letter-spacing:-0.02em;
  color:var(--text) !important;
}
/* conversao = metrica chave da secao -> acento */
#page-imersao #im-com-conv{ color:var(--accent) !important; }
#page-imersao #im-com-clicks-unique,
#page-imersao #im-com-clicks-total,
#page-imersao #im-com-sales-all,
#page-imersao #im-com-gross-all,
#page-imersao #im-com-sales-total,
#page-imersao #im-com-list-count{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}

/* ---------- CARDS: CADASTRADOS / GRUPO / FALTANTES ---------- */
/* eram roxo / verde-neon / vermelho-neon como gradiente de fundo.
   fundo neutro; cor so no numero, usando os tokens de status. */
#page-imersao #im-reg-total{
  font-family:var(--mono) !important; font-variant-numeric:tabular-nums;
  font-weight:600 !important; letter-spacing:-0.02em;
  color:var(--text) !important;
}
#page-imersao #im-reg-ingroup{
  font-family:var(--mono) !important; font-variant-numeric:tabular-nums;
  font-weight:600 !important; letter-spacing:-0.02em;
  color:var(--live) !important;            /* entraram no grupo = positivo */
}
#page-imersao #im-reg-missing{
  font-family:var(--mono) !important; font-variant-numeric:tabular-nums;
  font-weight:600 !important; letter-spacing:-0.02em;
  color:var(--bad) !important;             /* nao entraram = alerta */
}
#page-imersao #im-reg-total-all,
#page-imersao #im-reg-ratio,
#page-imersao #im-reg-cache-age{
  font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--dim);
}
#page-imersao a[href="#im-missing-section"]{ color:var(--mute) !important; }
#page-imersao a[href="#im-missing-section"]:hover{ color:var(--warn) !important; }
/* tag uppercase pequena (CRM Avalanche / WhatsApp clone) */
#page-imersao .uppercase.tracking-wider{ color:var(--mute) !important; letter-spacing:0.12em; }

/* ---------- FILTRO DE PERIODO ---------- */
#page-imersao .im-period-btn.btn{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  color:var(--dim) !important;
  border-radius:var(--r-sm) !important;
  padding:7px 16px;
  font-weight:500;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-imersao .im-period-btn.btn:hover{
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
  background:var(--raised) !important;
}
/* estado ativo = ciano disciplinado */
#page-imersao .im-period-btn.btn.btn-primary{
  background:var(--accent-glow) !important;
  border:1px solid var(--accent-deep) !important;
  color:var(--accent) !important;
  font-weight:600;
}
#page-imersao #im-period-label,
#page-imersao [id^="im-period-text"]{ color:var(--mute) !important; }
/* inputs de data do range custom */
#page-imersao #im-date-from,
#page-imersao #im-date-to{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:var(--r-sm) !important;
  font-family:var(--mono);
}

/* ---------- GRAFICO EVOLUCAO ---------- */
/* toggle VENDAS / FATURAMENTO: era pill verde-neon */
#page-imersao #im-chart-mode-qty,
#page-imersao #im-chart-mode-gross{
  background:transparent !important;
  color:var(--dim) !important;
  letter-spacing:1.2px !important;
  font-weight:600;
  border-radius:var(--r-sm) !important;
}
#page-imersao #im-chart-mode-qty[style*="rgba(16,185,129"],
#page-imersao #im-chart-mode-gross[style*="rgba(16,185,129"]{
  background:var(--accent-glow) !important;
  color:var(--accent) !important;
}
/* container do toggle */
#page-imersao #im-chart-subtitle{ color:var(--mute) !important; font-family:var(--mono); }

/* ---------- TABELAS (tempo real / ultimas 10 / compradores / faltantes) ---------- */
#page-imersao thead{ background:var(--panel-2) !important; }
#page-imersao thead th{
  color:var(--mute) !important;
  letter-spacing:0.1em;
  font-weight:600;
  border-bottom:1px solid var(--line) !important;
}
#page-imersao tbody tr{ border-top:1px solid var(--line) !important; }
#page-imersao tbody tr:hover{ background:rgba(255,255,255,0.025) !important; }
#page-imersao tbody td{ color:var(--dim); }
#page-imersao tbody td .text-white\/85{ color:var(--text) !important; }
/* valores monetarios e horarios nas tabelas em mono */
#page-imersao table .text-white\/85,
#page-imersao #im-buyers-count,
#page-imersao #im-missing-count,
#page-imersao #im-last10-count{
  font-variant-numeric:tabular-nums;
}
/* container preto das tabelas */
#page-imersao .bg-black\/20{ background:var(--bg) !important; border:1px solid var(--line) !important; }

/* cabecalho vermelho da secao "nao entraram" -> neutro com aviso sutil */
#page-imersao #im-missing-section > div[style*="239,68,68"]{
  background:var(--panel-2) !important;
}

/* ---------- BUSCA / BOTOES SECUNDARIOS ---------- */
#page-imersao #im-buyers-search,
#page-imersao #im-missing-search{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:var(--r-sm) !important;
}
#page-imersao #im-buyers-search:focus,
#page-imersao #im-missing-search:focus{
  border-color:var(--accent-deep) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  outline:none;
}
#page-imersao .btn{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  color:var(--dim) !important;
  border-radius:var(--r-sm) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-imersao .btn:hover{
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
  background:var(--raised) !important;
}
/* acao primaria (Atualizar / Aplicar): ciano */
#page-imersao .btn.btn-primary{
  background:var(--accent-glow) !important;
  border:1px solid var(--accent-deep) !important;
  color:var(--accent) !important;
  font-weight:600;
}
#page-imersao .btn.btn-primary:hover{
  background:var(--accent) !important;
  color:var(--bg) !important;
}

/* ---------- CARDS DINAMICOS (produto + origem, via JS) ---------- */
/* esses recebem gradiente/cor inline na criacao; sobrescreve fundo e
   joga o numero pra mono neutro. Acento so onde o JS marca destaque. */
#page-imersao #im-product-cards .glass,
#page-imersao #im-origins-cards > div{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
}
#page-imersao #im-product-cards .glass:hover{ border-color:var(--accent-glow) !important; }
/* numero grande do card de produto (.text-4xl com color inline) -> mono */
#page-imersao #im-product-cards .text-4xl{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums;
  font-weight:600 !important;
  letter-spacing:-0.02em;
  color:var(--text) !important;
}
/* badges de produto (pill com cor inline) -> neutro com aro */
#page-imersao #im-product-cards span[style*="border-radius:999px"]{
  color:var(--dim) !important;
  background:var(--raised) !important;
  border:1px solid var(--line);
  font-family:var(--mono);
}
/* numeros nos cards de origem */
#page-imersao #im-origins-cards .text-2xl{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums;
  color:var(--text) !important;
}
#page-imersao #im-origins-cards .uppercase{ color:var(--mute) !important; }


/* === AGENTES SDR === */
/* Cockpit override da tela #page-agents — cards de agente SDR.
   Mata: borda LED conic rotativa ciano, neon verde chapado (#22c55e),
   sombra ciano espalhada, badges berrantes. Substitui por painel de vidro
   borda fina, status disciplinado (--live/--warn/--bad), tipografia limpa,
   numeros em fonte mono telemetria. Acento ciano so onde tem proposito. */

/* ---- Header da pagina ---- */
#page-agents > header.glass{
  background:var(--panel) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:none;
}
#page-agents > header .w-8.h-8.rounded-lg{
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
}
#page-agents > header .w-8.h-8.rounded-lg svg{ color:var(--accent) !important; }
#page-agents > header span.text-sm{
  color:var(--text) !important;
  letter-spacing:.01em;
}

/* ---- Grid ---- */
#page-agents .agents-grid{
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:18px;
}

/* ---- Card de agente ---- */
#page-agents .agent-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  padding:22px 22px 18px !important;
  backdrop-filter:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
/* mata a borda LED conic rotativa ciano */
#page-agents .agent-card::before{
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}
#page-agents .agent-card:hover{
  transform:translateY(-2px) !important;
  border-color:var(--accent-glow) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* ---- Header interno do card ---- */
#page-agents .agent-card-header{
  margin-bottom:16px;
  gap:14px;
}
#page-agents .agent-name{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  letter-spacing:-.01em;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
}
#page-agents .agent-company{
  color:var(--mute);
  font-size:11px;
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---- Metricas do card (porta, in, out, contatos) ---- */
#page-agents .agent-meta{
  gap:16px;
  color:var(--dim);
  font-size:12px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
#page-agents .agent-meta span{ gap:6px; }

/* ---- Badge de status ---- */
#page-agents .badge{
  padding:4px 11px;
  border-radius:100px;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  border:1px solid transparent;
}
/* online/ativo = verde calmo --live (sem neon chapado) */
#page-agents .badge-active,
#page-agents .badge-online{
  background:rgba(52,232,158,.12) !important;
  color:var(--live) !important;
  border-color:rgba(52,232,158,.22) !important;
}
/* inativo/parado = neutro mudo */
#page-agents .badge-inactive,
#page-agents .badge-stopped{
  background:rgba(255,255,255,.05) !important;
  color:var(--mute) !important;
  border-color:var(--line) !important;
}
/* erro = vermelho contido --bad */
#page-agents .badge-error{
  background:rgba(255,93,108,.12) !important;
  color:var(--bad) !important;
  border-color:rgba(255,93,108,.24) !important;
}

/* ---- Botao secundario do card ---- */
#page-agents .agent-card .btn-secondary{
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
  color:var(--dim) !important;
  border-radius:var(--r-sm) !important;
  transition:border-color .15s ease, color .15s ease, background .15s ease !important;
}
#page-agents .agent-card .btn-secondary:hover{
  border-color:var(--accent-glow) !important;
  color:var(--text) !important;
  background:var(--panel-2) !important;
}

/* ---- Estado vazio ---- */
#page-agents .empty{ color:var(--mute); padding:96px 24px; }
#page-agents .empty-icon{ opacity:.3; }
#page-agents .empty p{ color:var(--dim); }

/* ════════════════════════════════════════════════════════════════════
   VITRINE DA EQUIPE DA NAIA — cockpit premium, theme-aware (var-based).
   Tudo escopado em #page-agents. Naia em destaque + grupos + status real.
   ════════════════════════════════════════════════════════════════════ */
#page-agents .team-intro{ margin-bottom:28px; }
#page-agents .team-title{
  font-size:26px; font-weight:700; color:var(--text);
  letter-spacing:-.02em; line-height:1.15;
}
#page-agents .team-sub{
  color:var(--dim); font-size:13px; margin-top:6px; max-width:680px; line-height:1.5;
}

/* ---- Hero da Naia ---- */
#page-agents .naia-hero{
  position:relative;
  display:flex; gap:26px; align-items:center;
  background:var(--panel-2, #111824);
  border:1px solid var(--line-strong);
  border-radius:var(--card-radius-lg);
  padding:30px;
  margin-bottom:30px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  overflow:hidden;
}
#page-agents .naia-hero::after{
  content:''; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  mask:none;
}
#page-agents .naia-hero-avatar{
  width:128px; height:128px; flex:0 0 128px;
  border-radius:24px; overflow:hidden;
  border:2px solid color-mix(in srgb, var(--accent) 45%, var(--line-strong));
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  background:var(--raised);
}
#page-agents .naia-hero-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
#page-agents .naia-hero-body{ flex:1 1 auto; min-width:0; }
#page-agents .naia-hero-name{
  font-size:24px; font-weight:700; color:var(--text); letter-spacing:-.02em;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
#page-agents .naia-hero-role{
  color:var(--accent); font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; margin-top:6px;
}
#page-agents .naia-hero-bio{
  color:var(--dim); font-size:13.5px; line-height:1.55; margin-top:12px; max-width:760px;
}
#page-agents .naia-hero-badges{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

/* ---- Seção de grupo ---- */
#page-agents .team-group{ margin-bottom:32px; }
#page-agents .team-group-head{
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
#page-agents .team-group-name{
  font-size:12px; font-weight:700; color:var(--text);
  text-transform:uppercase; letter-spacing:.12em;
}
#page-agents .team-group-line{
  flex:1 1 auto; height:1px;
  background:var(--panel-2, #111824);
}
#page-agents .team-group-count{
  font-size:11px; color:var(--mute); font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}

/* ---- Grid de cards ---- */
#page-agents .team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));
  gap:16px;
}

/* ---- Card de agente ---- */
#page-agents .team-card{
  position:relative;
  display:flex; gap:16px; align-items:flex-start;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#page-agents .team-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line-strong));
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* faixa de cor por grupo na lateral esquerda */
#page-agents .team-card::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 3px 3px 0; background:var(--grp, var(--accent)); opacity:.85;
}

/* avatar / inicial */
#page-agents .team-avatar{
  width:62px; height:62px; flex:0 0 62px;
  border-radius:16px; overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--raised);
  display:flex; align-items:center; justify-content:center;
}
#page-agents .team-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
#page-agents .team-avatar-initial{
  font-size:24px; font-weight:700; color:#fff;
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--panel-2, #111824);
}

#page-agents .team-card-body{ flex:1 1 auto; min-width:0; }
#page-agents .team-card-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
#page-agents .team-name{
  font-size:15px; font-weight:650; color:var(--text); letter-spacing:-.01em; line-height:1.25;
}
#page-agents .team-role{
  color:var(--mute); font-size:10.5px; margin-top:3px;
  text-transform:uppercase; letter-spacing:.06em; line-height:1.3;
}
#page-agents .team-bio{
  color:var(--dim); font-size:12px; line-height:1.5; margin-top:10px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
#page-agents .team-foot{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
}

/* ---- chips/badges ---- */
#page-agents .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:100px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  border:1px solid transparent; white-space:nowrap;
}
#page-agents .chip-dot{ width:6px; height:6px; border-radius:50%; }
/* status */
#page-agents .chip-ativo{
  background:color-mix(in srgb, var(--live) 14%, transparent);
  color:var(--live); border-color:color-mix(in srgb, var(--live) 26%, transparent);
}
#page-agents .chip-ativo .chip-dot{ background:var(--live); box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-agents .chip-hibernando{
  background:color-mix(in srgb, var(--mute) 12%, transparent);
  color:var(--mute); border-color:var(--line-strong);
}
#page-agents .chip-hibernando .chip-dot{ background:var(--mute); }
/* modelo */
#page-agents .chip-opus{
  background:color-mix(in srgb, var(--info) 13%, transparent);
  color:var(--info); border-color:color-mix(in srgb, var(--info) 26%, transparent);
}
#page-agents .chip-sonnet{
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent); border-color:color-mix(in srgb, var(--accent) 24%, transparent);
}
#page-agents .team-lastused{
  margin-left:auto; font-size:10px; color:var(--mute);
  font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap;
}

@media (max-width:560px){
  #page-agents .naia-hero{ flex-direction:column; align-items:flex-start; text-align:left; }
  #page-agents .team-grid{ grid-template-columns:1fr; }
}

/* ---- cards/hero clicaveis (abrem modal de bio) ---- */
#page-agents .team-card,
#page-agents .naia-hero{ cursor:pointer; }
#page-agents .team-card:focus-visible,
#page-agents .naia-hero:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
#page-agents .naia-hero{ transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
#page-agents .naia-hero:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line-strong));
}

/* ---- Modal de bio detalhada ---- */
.team-bio-modal-card{ max-width:600px; }
#team-bio-modal .tbm-hero{
  display:flex; gap:18px; align-items:center;
  padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
#team-bio-modal .tbm-avatar{
  width:88px; height:88px; flex:0 0 88px;
  border-radius:20px; overflow:hidden;
  border:2px solid color-mix(in srgb, var(--grp, var(--accent)) 45%, rgba(255,255,255,0.12));
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  background:var(--raised); display:flex; align-items:center; justify-content:center;
}
#team-bio-modal .tbm-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
#team-bio-modal .tbm-avatar .team-avatar-initial{
  font-size:34px; font-weight:700; color:#fff; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-2, #111824);
}
#team-bio-modal .tbm-name{
  font-size:21px; font-weight:700; color:var(--text, #fff); letter-spacing:-.02em;
}
#team-bio-modal .tbm-role{
  color:var(--accent); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; margin-top:5px;
}
#team-bio-modal .tbm-group{
  display:inline-flex; align-items:center; gap:7px; margin-top:8px;
  font-size:11px; color:var(--mute, rgba(255,255,255,0.5)); text-transform:uppercase; letter-spacing:.08em;
}
#team-bio-modal .tbm-group .chip-dot{ width:7px; height:7px; border-radius:50%; }
#team-bio-modal .tbm-chips{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
#team-bio-modal .tbm-bio p{
  color:var(--dim, rgba(255,255,255,0.7)); font-size:13.5px; line-height:1.62;
  margin:0 0 13px;
}
#team-bio-modal .tbm-bio p:last-child{ margin-bottom:0; }
@media (max-width:520px){
  #team-bio-modal .tbm-hero{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ---- Modal de bio detalhada: secoes premium (resumo / habilidades / chips / fluxo) ---- */
.team-bio-modal-card{ max-width:680px !important; }
#team-bio-modal .chip-orq{
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
#team-bio-modal .tbm-content{ display:flex; flex-direction:column; gap:22px; }
#team-bio-modal .tbm-sec{ display:flex; flex-direction:column; gap:11px; }
#team-bio-modal .tbm-sec-title{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute, rgba(255,255,255,0.55));
  display:flex; align-items:center; gap:9px;
}
#team-bio-modal .tbm-sec-title::after{
  content:""; flex:1 1 auto; height:1px;
  background:var(--panel-2, #111824);
}
#team-bio-modal .tbm-resumo{
  color:var(--text, #fff); font-size:14.5px; line-height:1.6; margin:0; font-weight:450;
}
#team-bio-modal .tbm-fluxo{
  color:var(--dim, rgba(255,255,255,0.72)); font-size:13.5px; line-height:1.58; margin:0;
  padding:13px 15px; border-radius:12px;
  background:color-mix(in srgb, var(--grp, var(--accent)) 7%, var(--raised, rgba(255,255,255,0.03)));
  border:1px solid color-mix(in srgb, var(--grp, var(--accent)) 16%, transparent);
}
#team-bio-modal .tbm-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
#team-bio-modal .tbm-list li{
  display:flex; gap:11px; align-items:flex-start;
  color:var(--dim, rgba(255,255,255,0.78)); font-size:13.5px; line-height:1.5;
}
#team-bio-modal .tbm-li-ico{
  flex:0 0 20px; width:20px; height:20px; margin-top:1px;
  display:flex; align-items:center; justify-content:center; border-radius:7px;
}
#team-bio-modal .tbm-li-ico svg{ width:13px; height:13px; }
/* Habilidades: bullets em destaque (check + card-row) */
#team-bio-modal .tbm-skills li{
  background:var(--raised, rgba(255,255,255,0.035));
  border:1px solid var(--line, rgba(255,255,255,0.08));
  border-left:2px solid var(--grp, var(--accent));
  padding:10px 13px; border-radius:11px;
  color:var(--text, rgba(255,255,255,0.92)); font-weight:500;
  transition:border-color .15s ease, transform .15s ease;
}
#team-bio-modal .tbm-skills li:hover{
  border-color:color-mix(in srgb, var(--grp, var(--accent)) 45%, var(--line, rgba(255,255,255,0.12)));
  transform:translateX(2px);
}
#team-bio-modal .tbm-skills .tbm-li-ico{
  color:var(--grp, var(--accent));
  background:color-mix(in srgb, var(--grp, var(--accent)) 16%, transparent);
}
/* O que faz: bullets com ponto, mais leve */
#team-bio-modal .tbm-does .tbm-li-ico{ color:var(--grp, var(--accent)); opacity:.75; }
/* Chips de plataforma */
#team-bio-modal .tbm-plats{ display:flex; flex-wrap:wrap; gap:8px; }
#team-bio-modal .tbm-plat{
  font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:999px;
  color:color-mix(in srgb, var(--grp, var(--accent)) 78%, var(--text, #fff));
  background:color-mix(in srgb, var(--grp, var(--accent)) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--grp, var(--accent)) 28%, transparent);
  white-space:nowrap; transition:background .15s ease, transform .15s ease;
}
#team-bio-modal .tbm-plat:hover{
  background:color-mix(in srgb, var(--grp, var(--accent)) 20%, transparent);
  transform:translateY(-1px);
}
@media (max-width:520px){
  #team-bio-modal .tbm-sec-title::after{ display:none; }
}


/* === VENDAS === */
/* Cockpit redesign — tela #page-vendas
   Tudo escopado em #page-vendas pra nao vazar pras outras telas.
   Mata: gradiente em texto (.stat-number), LED conic giratorio (.surface-border),
   glows ciano/azul chapados, tiles neon verde/emerald/cyan/red, links #22d3ee crus,
   badges neon, select com cara de Windows. Padrao: vidro fino, mono telemetria, acento contido. */

/* ---------- shell da pagina ---------- */
#page-vendas {
  background: var(--bg) !important;
  color: var(--text);
}
#page-vendas ::-webkit-scrollbar { height: 9px; width: 9px; }
#page-vendas ::-webkit-scrollbar-thumb {
  background: var(--raised);
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ---------- header sticky ---------- */
#page-vendas > header.glass {
  background: rgba(12, 17, 26, 0.82) !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* icone do header: tira o gradiente berrante, vira tile de vidro com glyph ciano discreto */
#page-vendas > header .w-8.h-8.rounded-lg.ui-icon-tile {
  background: var(--accent-glow) !important;
  border: 1px solid var(--line-strong);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-vendas > header .w-8.h-8.rounded-lg.ui-icon-tile svg {
  color: var(--accent) !important;
}
#page-vendas header .text-sm.font-semibold {
  color: var(--text) !important;
  letter-spacing: -0.01em;
}

/* indicador "Live" — verde de status disciplinado */
#page-vendas .pulse-slow.bg-green-400 {
  background: var(--live) !important;
}
#page-vendas header .text-xs.text-white\/80 {
  color: var(--dim) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
}

/* ---------- filtro de periodo (select + datas) ---------- */
#page-vendas #periodFilterVendas {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm) !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
  transition: border-color .18s, background .18s;
}
#page-vendas #periodFilterVendas:hover { border-color: var(--line-strong) !important; }
#page-vendas #periodFilterVendas:focus { border-color: var(--accent-glow) !important; }
#page-vendas #dateFromVendas,
#page-vendas #dateToVendas {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
#page-vendas #customDateRangeVendas span { color: var(--mute) !important; }
#page-vendas #customDateRangeVendas button {
  background: var(--accent-glow) !important;
  border: 1px solid var(--accent-deep) !important;
  color: var(--accent) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600;
  transition: .15s;
}
#page-vendas #customDateRangeVendas button:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/* ---------- cards (KPI + tabelas) ---------- */
/* mata LED conic giratorio em qualquer card desta tela */
#page-vendas .surface-border::before { display: none !important; }

#page-vendas .glass,
#page-vendas .glass-strong {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
/* mata glows chapados ciano/azul */
#page-vendas .glow-cyan,
#page-vendas .glow-blue { box-shadow:0 1px 3px rgba(0,0,0,.18); }

/* hover contido: borda ciano sutil, sem pulo exagerado */
#page-vendas .card-hover:hover {
  transform: translateY(-1px);
  border-color: var(--accent-glow) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* o card de abandono tinha borda vermelha inline grossa via style — neutraliza pro padrao */
#page-vendas .glass.surface-border[style*="border-color"],
#page-vendas .glass-strong.surface-border[style*="border-color"] {
  border-color: var(--line) !important;
}

/* raio dos cards (markup usa rounded-3xl) normalizado pro token */
#page-vendas .rounded-3xl { border-radius: var(--r) !important; }

/* ---------- numeros / valores (mono telemetria, sem gradiente em texto) ---------- */
#page-vendas .stat-number {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* abandonos hoje vinha #ef4444 inline — vira var(--bad) */
#page-vendas #v-abandonments-today[style] {
  color: var(--bad) !important;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* labels uppercase mute, hierarquia limpa */
#page-vendas .text-white\/40.uppercase,
#page-vendas .text-white\/30.uppercase {
  color: var(--mute) !important;
  letter-spacing: 0.1em;
}
#page-vendas .text-white\/30 { color: var(--mute) !important; }

/* ---------- tiles de icone dos cards (eram neon verde/emerald/cyan/red) ---------- */
#page-vendas .bg-green-500\/10,
#page-vendas .bg-emerald-500\/10,
#page-vendas .bg-cyan-500\/10 {
  background: var(--accent-glow) !important;
  border: 1px solid var(--line);
}
#page-vendas .bg-green-500\/10 svg,
#page-vendas .bg-emerald-500\/10 svg,
#page-vendas .bg-cyan-500\/10 svg {
  color: var(--accent) !important;
}
/* tile vermelho continua sinalizando estado, mas em var(--bad) controlado */
#page-vendas .bg-red-500\/10 {
  background: rgba(255, 93, 108, 0.12) !important;
  border: 1px solid var(--line);
}
#page-vendas .bg-red-500\/10 svg,
#page-vendas .text-red-400 { color: var(--bad) !important; }
#page-vendas .text-green-400,
#page-vendas .text-emerald-400,
#page-vendas .text-cyan-400 { color: var(--accent) !important; }

/* tiles de cabecalho das tabelas (eram gradientes swatch-green/cyan e swatch-red/orange) */
#page-vendas .ui-icon-tile.swatch-green-500\/20,
#page-vendas .ui-icon-tile.swatch-green-500\/20.swatch-cyan-500\/20 {
  background: var(--accent-glow) !important;
  border: 1px solid var(--line);
}
#page-vendas .ui-icon-tile.swatch-red-500\/20,
#page-vendas .ui-icon-tile.swatch-red-500\/20.swatch-orange-500\/20 {
  background: rgba(255, 93, 108, 0.12) !important;
  border: 1px solid var(--line);
}

/* titulos de secao */
#page-vendas h3.text-base.font-semibold {
  color: var(--text) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- tabelas ---------- */
#page-vendas table { border-collapse: separate; border-spacing: 0; }
#page-vendas thead tr.border-b,
#page-vendas tbody tr.border-b {
  border-bottom: 1px solid var(--line) !important;
}
#page-vendas thead th {
  color: var(--mute) !important;
  letter-spacing: 0.1em;
  font-weight: 600;
}
/* celulas de texto: hierarquia legivel, sem branco lavado */
#page-vendas tbody td.text-white\/80 { color: var(--text) !important; }
#page-vendas tbody td.text-white\/70 { color: var(--dim) !important; }
#page-vendas tbody td.text-white\/50 { color: var(--mute) !important; }
/* datas e valores em mono pra alinhar telemetria */
#page-vendas tbody td.text-white\/50.text-xs,
#page-vendas tbody td.text-xs.stat-number {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
/* hover de linha controlado pelo CSS (o inline onmouseover continua, mas damos base) */
#page-vendas tbody tr:hover { background: var(--raised) !important; }

/* links de telefone (WhatsApp) — ciano com proposito de acao, sublinhado discreto */
#page-vendas tbody td a[href^="https://wa.me"] {
  color: var(--accent) !important;
  text-decoration: none !important;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--accent-glow);
  padding-bottom: 1px;
  transition: border-color .15s;
}
#page-vendas tbody td a[href^="https://wa.me"]:hover {
  border-bottom-color: var(--accent) !important;
}

/* estado vazio das tabelas */
#page-vendas tbody td.text-white\/20 { color: var(--mute) !important; }

/* ---------- badges (plataforma / evento / recuperar) ---------- */
#page-vendas .badge {
  border-radius: 999px;
  border: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
/* plataforma da venda: neutro, nao precisa gritar verde */
#page-vendas .badge.badge-active {
  background: var(--raised) !important;
  color: var(--dim) !important;
  border-color: var(--line-strong);
}
/* evento de abandono: estado ruim controlado */
#page-vendas .badge.badge-error {
  background: rgba(255, 93, 108, 0.12) !important;
  color: var(--bad) !important;
  border-color: rgba(255, 93, 108, 0.22) !important;
}
/* botao Recuperar (era amber #f59e0b inline) — vira warn dentro do token, e acionavel */
#page-vendas tbody td .badge[style*="245,158,11"] {
  background: rgba(245, 181, 68, 0.12) !important;
  color: var(--warn) !important;
  border-color: rgba(245, 181, 68, 0.22) !important;
}

/* ---------- rodape ---------- */
#page-vendas .text-white\/15 { color: var(--mute) !important; opacity: .7; }


/* === PROSPECT INSTA === */
/* Redesign cockpit da tela #page-prospeccao (Prospecção Ativa · Ademir).
   Tudo ancorado nos tokens globais do :root. Zero neon, zero rosa/roxo.
   Acento ciano só em ativo/selecionado/ação primária/dado-chave/WhatsApp ao vivo. */

#page-prospeccao{
  color:var(--text);
}

/* ===== Nav bar interna de prospecção (abas cockpit) ===== */
.prosp-tabsbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  padding:16px 24px;
  background:var(--panel) !important;
  border-bottom:1px solid var(--line) !important;
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:none;
}
.prosp-tabsbar .prosp-tab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 22px;
  border-radius:11px;
  border:1px solid var(--line-strong);
  background:var(--raised);
  color:var(--mute);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-0.01em;
  cursor:pointer;
  transition:transform .16s ease, background .18s ease, border-color .18s ease, color .16s ease, box-shadow .18s ease;
  line-height:1;
}
.prosp-tabsbar .prosp-tab-btn svg{
  width:17px;
  height:17px;
  color:var(--mute);
  transition:color .16s ease;
}
/* Tom sutil da plataforma no estado inativo (borda + ícone) */
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="insta"] svg{ color:#C13584; }
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="google"] svg{ color:#4285F4; }
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="fb"] svg{ color:#1877F2; }
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="linkedin"] svg{ color:#0A66C2; }
.prosp-tabsbar .prosp-tab-btn:hover{
  transform:translateY(-1px);
  color:var(--text);
}
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="insta"]:hover{ border-color:#C13584; background:rgba(193,53,132,.10); }
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="google"]:hover{ border-color:#4285F4; background:rgba(66,133,244,.10); }
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="fb"]:hover{ border-color:#1877F2; background:rgba(24,119,242,.10); }
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="linkedin"]:hover{ border-color:#0A66C2; background:rgba(10,102,194,.10); }
/* Ativo: fundo na cor da plataforma + texto branco + glow */
.prosp-tabsbar .prosp-tab-btn.active{ color:#fff; }
.prosp-tabsbar .prosp-tab-btn.active svg{ color:#fff; }
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="insta"].active{
  background:var(--panel-2, #111824);
  border-color:transparent;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="google"].active{
  background:#4285F4;
  border-color:#4285F4;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="fb"].active{
  background:#1877F2;
  border-color:#1877F2;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.prosp-tabsbar .prosp-tab-btn[data-prosp-tab="linkedin"].active{
  background:#0A66C2;
  border-color:#0A66C2;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* Sub-painéis: cada um carrega o conteúdo original intacto */
.prosp-tab-panel > .prosp-orig-page{ display:block; }

/* ===== Central de Tracking: toolbar (filtro global) + abas ===== */
.trk-toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 24px;
  position:sticky; top:0; z-index:45; background:var(--bg-card); border-bottom:1px solid var(--border-color); backdrop-filter:none; }
[data-theme="light"] .trk-toolbar{ background:var(--bg-card-solid); }
.trk-field{ display:flex; align-items:center; gap:7px; }
.trk-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); font-weight:700; }
.trk-select{ background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-primary);
  padding:7px 12px; border-radius:9px; font-size:12.5px; font-weight:600; cursor:pointer; outline:none; }
[data-theme="light"] .trk-select{ background:#fff; }
.trk-select:focus{ border-color:#22d3ee; }
.trk-live{ margin-left:auto; display:flex; align-items:center; gap:7px; font-size:11px; color:var(--text-dim); }

.trk-tabsbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 24px;
  position:sticky; top:75px; z-index:39; background:var(--bg-card); border-bottom:1px solid var(--border-color); backdrop-filter:none; }
[data-theme="light"] .trk-tabsbar{ background:var(--bg-card-solid); }
.trk-tab-btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:11px;
  border:1px solid var(--border-color); background:transparent; color:var(--text-dim); font-size:12.5px; font-weight:600;
  letter-spacing:-0.01em; cursor:pointer; transition:all .16s ease; line-height:1; }
.trk-tab-btn svg{ width:15px; height:15px; }
.trk-tab-btn:hover{ color:var(--text-primary); border-color:rgba(34,211,238,0.4); transform:translateY(-1px); }
.trk-tab-btn.active{ color:#04201e; background:var(--panel-2, #111824); border-color:transparent;
  box-shadow:0 1px 3px rgba(0,0,0,.18); }
.trk-tab-btn.active svg{ color:#04201e; }
.trk-tab-panel{ display:none; }
.trk-tab-panel.active{ display:block; }
.trk-pad{ max-width:1440px; margin:0 auto; padding:28px 24px; }

.utm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.utm-input{ width:100%; background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-primary);
  padding:10px 12px; border-radius:10px; font-size:13px; outline:none; }
[data-theme="light"] .utm-input{ background:#fff; }
.utm-input:focus{ border-color:#22d3ee; }
.utm-label{ font-size:11px; color:var(--text-dim); font-weight:600; margin-bottom:5px; display:block; }
.utm-out{ word-break:break-all; font-family:ui-monospace,Menlo,monospace; font-size:12.5px;
  background:rgba(34,211,238,0.07); border:1px solid rgba(34,211,238,0.25); border-radius:12px; padding:14px 16px; color:#22d3ee; line-height:1.6; }
.utm-preset{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:9px;
  border:1px solid var(--border-color); background:transparent; color:var(--text-dim); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.utm-preset:hover{ color:var(--text-primary); border-color:rgba(34,211,238,0.4); }
.capi-dot{ width:9px; height:9px; border-radius:999px; display:inline-block; }

/* ===== Botão "Carregar +100" (mesmo esquema do Kanban) ===== */
#page-prospeccao .prosp-load-more-wrap{
  display:flex;
  justify-content:center;
  margin:18px 0 4px;
}
#page-prospeccao .prosp-load-more-wrap:empty{ display:none; }
#page-prospeccao .prosp-load-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 22px;
  border-radius:10px;
  border:1px solid var(--line-strong);
  background:var(--raised);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
#page-prospeccao .prosp-load-more:hover{
  background:var(--panel-2);
  border-color:var(--accent);
  transform:translateY(-1px);
}
#page-prospeccao .prosp-load-more .prosp-load-more-rest{
  font-size:11px;
  color:var(--mute);
  font-weight:500;
}

/* ---- header da página (barra de vidro fina) ---- */
#prosp-tab-insta > header.glass{
  background:var(--panel) !important;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:none;
}
/* marca rosa/fuchsia do header -> bloco neutro com glifo ciano discreto */
#prosp-tab-insta > header .ui-icon-tile.swatch-fuchsia-500,
#prosp-tab-insta > header [class*="swatch-fuchsia-500"]{
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
}
#prosp-tab-insta > header [class*="swatch-fuchsia-500"] svg{
  color:var(--accent) !important;
}
#prosp-tab-insta > header span.text-white\/80{
  color:var(--text) !important;
  letter-spacing:-0.01em;
}

/* ---- botões ---- */
#page-prospeccao .btn{
  border-radius:var(--r-sm) !important;
  font-weight:600 !important;
  letter-spacing:.01em;
  transition:background .16s,border-color .16s,color .16s !important;
}
#page-prospeccao .btn-primary{
  background:var(--accent) !important;
  color:var(--bg) !important;
  border:1px solid var(--accent) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospeccao .btn-primary:hover{
  background:var(--accent-deep) !important;
  border-color:var(--accent-deep) !important;
}
#page-prospeccao .btn-secondary{
  background:var(--panel-2) !important;
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
}
#page-prospeccao .btn-secondary:hover{
  background:var(--raised) !important;
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
}

/* ---- caixas de vidro (cards/painéis/modais) ---- */
#page-prospeccao .glass-card,
#page-prospeccao #new-search-modal .glass-card,
#page-prospeccao #history-modal .glass-card,
#import-modal .glass-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospeccao .glass-card:hover{
  border-color:var(--accent-glow) !important;
}
/* wash rosa/fuchsia dentro do modal de busca -> removido */
#page-prospeccao #new-search-modal .ui-icon-tile,
#page-prospeccao #new-search-modal [class*="swatch-fuchsia-500"],
#page-prospeccao #new-search-modal [class*="swatch-pink-500"]{
  background:transparent !important;
}
/* título com texto em gradiente -> texto sólido limpo */
#page-prospeccao #new-search-modal h3,
#page-prospeccao #new-search-modal h3[class*="ui-dialog-title"],
#page-prospeccao h3[class*="text-current"]{
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
  color:var(--text) !important;
  letter-spacing:-0.01em;
}

/* ---- inputs / textarea / selects ---- */
#page-prospeccao .form-input{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  color:var(--text) !important;
}
#page-prospeccao .form-input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  outline:none !important;
}
#page-prospeccao textarea.form-input{
  font-family:var(--mono) !important;
}
/* chips de exemplo no modal */
#page-prospeccao #new-search-modal button.bg-white\/5{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  color:var(--dim) !important;
  border-radius:var(--r-sm) !important;
}
#page-prospeccao #new-search-modal button.bg-white\/5:hover{
  background:var(--raised) !important;
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
}

/* ---- stats em linha ---- */
#page-prospeccao .stat-mini{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  padding:9px 12px !important;
  gap:3px !important;
}
#page-prospeccao .stat-mini:hover{
  background:var(--panel-2) !important;
  border-color:var(--accent-glow) !important;
}
#page-prospeccao .stat-mini-label{
  font-size:9.5px !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;
  color:var(--mute) !important;
}
#page-prospeccao .stat-mini-val{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  font-size:18px !important;
  font-weight:600 !important;
  color:var(--text) !important;
  letter-spacing:-0.02em;
}
/* recoloriza os destaques de stat pro padrão cockpit */
#page-prospeccao .stat-mini-val.text-blue-300{ color:var(--info) !important; }
#page-prospeccao .stat-mini-val.text-emerald-300{ color:var(--live) !important; }
#page-prospeccao .stat-mini-val.text-cyan-300{ color:var(--accent) !important; }

/* ---- status da request ativa (Aguardando Ademir) ---- */
#page-prospeccao #ns-active-status .bg-amber-400{ background:var(--warn) !important; }
#page-prospeccao #ns-active-status .text-amber-300{ color:var(--warn) !important; }
#page-prospeccao #ns-active-status #ns-status-elapsed{ font-family:var(--mono) !important; color:var(--mute) !important; }
#page-prospeccao #ns-cancel-btn:hover{ color:var(--bad) !important; }

/* ---- filtros de leads ---- */
#page-prospeccao .lead-filter-btn{
  border-radius:var(--r-sm) !important;
  font-weight:600 !important;
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  color:var(--dim) !important;
  transition:background .15s,border-color .15s,color .15s !important;
}
#page-prospeccao .lead-filter-btn:hover{
  background:var(--panel-2) !important;
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
}
/* botão "Todos" vinha rosa fixo; agora estado padrão = neutro.
   Estado selecionado (data-filter="") fica ciano contido. */
#page-prospeccao .lead-filter-btn.bg-fuchsia-500\/20,
#page-prospeccao .lead-filter-btn[class*="fuchsia"]{
  background:var(--accent-glow) !important;
  border-color:var(--accent-deep) !important;
  color:var(--accent) !important;
}

/* ---- toolbar selecionar todos ---- */
#page-prospeccao .leads-toolbar input[type="checkbox"]{ accent-color:var(--accent) !important; }
#page-prospeccao #leads-totals{ font-family:var(--mono) !important; color:var(--mute) !important; }

/* ---- cabeçalhos das 2 colunas (com / sem WhatsApp) ---- */
/* faixa colorida grossa proibida: troca por linha fina padrão */
#page-prospeccao .border-emerald-500\/20{ border-color:var(--line) !important; }
#page-prospeccao .text-emerald-400{ color:var(--live) !important; }
#page-prospeccao .text-emerald-300{ color:var(--live) !important; }
#page-prospeccao label.border-emerald-500\/25{
  border-color:var(--line) !important;
  border-radius:var(--r-sm) !important;
}
#page-prospeccao label.border-emerald-500\/25:hover{ background:var(--panel-2) !important; }
#page-prospeccao .accent-emerald-400{ accent-color:var(--live) !important; }
#page-prospeccao #leads-tab-wa-count,
#page-prospeccao #leads-tab-nowa-count{
  font-family:var(--mono) !important;
  color:var(--mute) !important;
}
#page-prospeccao label.border-white\/15{ border-radius:var(--r-sm) !important; }

/* ---- grid de leads ---- */
#page-prospeccao .leads-grid{ gap:14px !important; }

/* ---- card de lead (caixa fina cockpit) ---- */
#page-prospeccao .lead-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease !important;
}
/* mata a borda gradiente roxo/ciano ::before */
#page-prospeccao .lead-card::before{ display:none !important; content:none !important; }
#page-prospeccao .lead-card:hover{
  transform:translateY(-2px) !important;
  background:var(--panel-2) !important;
  border-color:var(--accent-glow) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* avatar: o JS injeta um gradiente HSL arco-íris via --lead-grad-from/to inline.
   Forço uma superfície neutra/raised por cima do inline. */
#page-prospeccao .lead-avatar{
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r-sm) !important;
  color:var(--dim) !important;
  font-weight:700 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  text-shadow:none !important;
}
#page-prospeccao .lead-avatar img{ border-radius:var(--r-sm) !important; }

#page-prospeccao .lead-card-username{
  font-family:var(--mono) !important;
  color:var(--text) !important;
  letter-spacing:-0.01em;
}
#page-prospeccao .lead-card-display{ color:var(--mute) !important; }
#page-prospeccao .lead-card-bio{ color:var(--dim) !important; }
#page-prospeccao .lead-card-checkbox{ accent-color:var(--accent) !important; }

/* ---- badges do card ---- */
#page-prospeccao .lead-badge{
  border-radius:999px !important;
  font-weight:600 !important;
  letter-spacing:.02em;
}
#page-prospeccao .lead-badge.b-offer{
  color:var(--live) !important;
  background:rgba(52,232,158,.10) !important;
  border-color:rgba(52,232,158,.30) !important;
}
/* WhatsApp = indicador ao vivo, fica no acento ciano */
#page-prospeccao .lead-badge.b-wa{
  color:var(--accent) !important;
  background:var(--accent-glow) !important;
  border-color:var(--accent-deep) !important;
}
#page-prospeccao .lead-badge.b-source{
  color:var(--mute) !important;
  background:var(--panel-2) !important;
  border-color:var(--line) !important;
}
/* "pessoa" vinha amarelo neon -> warn contido */
#page-prospeccao .lead-badge.b-person{
  color:var(--warn) !important;
  background:rgba(245,181,68,.10) !important;
  border-color:rgba(245,181,68,.30) !important;
}

/* ---- footer / status pill / ações ---- */
#page-prospeccao .lead-card-footer{ border-top:1px solid var(--line) !important; }
#page-prospeccao .lead-status-pill{
  border-radius:999px !important;
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  font-weight:600 !important;
  letter-spacing:.02em;
}

#page-prospeccao .lead-action-btn{
  border-radius:var(--r-sm) !important;
  font-weight:600 !important;
}
#page-prospeccao .lead-action-btn.la-approve{
  color:var(--live) !important;
  border-color:rgba(52,232,158,.35) !important;
  background:rgba(52,232,158,.07) !important;
}
#page-prospeccao .lead-action-btn.la-approve:hover{ background:rgba(52,232,158,.16) !important; }
#page-prospeccao .lead-action-btn.la-cancel{
  color:var(--warn) !important;
  border-color:rgba(245,181,68,.35) !important;
  background:rgba(245,181,68,.07) !important;
}
#page-prospeccao .lead-action-btn.la-cancel:hover{ background:rgba(245,181,68,.15) !important; }
#page-prospeccao .lead-action-btn.la-view{
  color:var(--accent) !important;
  border-color:var(--accent-deep) !important;
  background:var(--accent-glow) !important;
}
#page-prospeccao .lead-action-btn.la-view:hover{
  background:var(--accent) !important;
  color:var(--bg) !important;
}

/* ---- estado vazio ---- */
#page-prospeccao .lead-card-empty{
  border:1px dashed var(--line-strong) !important;
  border-radius:var(--r) !important;
  background:var(--panel) !important;
  color:var(--mute) !important;
}


/* === Prospect Google (B2B / Google Maps) === */
/* Cockpit override — preto tingido, vidro fino, acento ciano disciplinado, mono nos numeros.
   Escopo: #page-prospect-b2b + modais B2B (#modal-b2b-company, #ul-modal).
   ZERO rosa/roxo, ZERO neon, ZERO gradient em texto. */

/* ---------- HEADER ---------- */
#page-prospect-b2b > header.glass{
  background:var(--panel) !important;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  backdrop-filter:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* icone do header: tira o gradient azul-ciano, vira chip de vidro com glyph ciano */
#page-prospect-b2b > header .w-8.h-8.rounded-lg{
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r-sm) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-b2b > header .w-8.h-8.rounded-lg svg{ color:var(--accent) !important; }
#page-prospect-b2b > header .text-white\/80{ color:var(--text) !important; letter-spacing:.01em; }

/* ---------- BOTOES ---------- */
/* primario: superficie ciano contida, sem gradient berrante */
#page-prospect-b2b .btn-primary,
#modal-b2b-company .btn-primary{
  background:var(--accent) !important;
  color:#04201e !important;
  font-weight:700 !important;
  border:1px solid var(--accent-deep) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-b2b .btn-primary:hover,
#modal-b2b-company .btn-primary:hover{
  background:var(--accent-deep) !important;
  color:var(--text) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-b2b .btn-primary:disabled,
#page-prospect-b2b .btn-secondary:disabled{ opacity:.4 !important; cursor:not-allowed !important; transform:none !important; }
#page-prospect-b2b .btn-secondary,
#modal-b2b-company .btn-secondary{
  background:var(--panel-2) !important;
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
}
#page-prospect-b2b .btn-secondary:hover,
#modal-b2b-company .btn-secondary:hover{
  background:var(--raised) !important;
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
}

/* ---------- STATS MINI (telemetria) ---------- */
#page-prospect-b2b .stat-mini{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  padding:10px 12px !important;
  gap:4px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:border-color .18s,background .18s !important;
}
#page-prospect-b2b .stat-mini:hover{
  background:var(--panel-2) !important;
  border-color:var(--accent-glow) !important;
}
#page-prospect-b2b .stat-mini-label{
  color:var(--mute) !important;
  font-size:9.5px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
#page-prospect-b2b .stat-mini-val{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  font-size:18px !important;
  font-weight:600 !important;
  color:var(--text) !important;
  letter-spacing:-.01em !important;
}
/* tira os neon das stats coloridas → neutro, exceto onde dado importa (WhatsApp = live) */
#page-prospect-b2b #b2b-discovered.text-blue-300{ color:var(--info) !important; }
#page-prospect-b2b #b2b-approved.text-emerald-300{ color:var(--live) !important; }
#page-prospect-b2b #b2b-whatsapp.text-cyan-300{ color:var(--accent) !important; }
#page-prospect-b2b #b2b-instagram.text-fuchsia-300{ color:var(--text) !important; }

/* ---------- GLASS CARDS (filtros, colunas, status) ---------- */
#page-prospect-b2b .glass-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:none;
}
/* remove a aura/gradient interna dos modais e cards */
#page-prospect-b2b .glass-card .absolute.inset-0.ui-icon-tile{ background:none !important; }

/* ---------- MODAL NOVA BUSCA / titulos com ui-dialog-title ---------- */
#page-prospect-b2b h3.ui-icon-tile,
#page-prospect-b2b h3.ui-dialog-title{
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
  color:var(--text) !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}
#page-prospect-b2b .text-white\/45{ color:var(--mute) !important; }
#page-prospect-b2b .text-white\/40{ color:var(--mute) !important; }
#page-prospect-b2b .text-white\/60{ color:var(--dim) !important; }
#page-prospect-b2b .text-white\/80{ color:var(--text) !important; }

/* chips de exemplo de prompt */
#page-prospect-b2b .bg-white\/5{ background:var(--panel-2) !important; }
#page-prospect-b2b .bg-white\/5.border-white\/10{ border-color:var(--line) !important; color:var(--dim) !important; }
#page-prospect-b2b .hover\:bg-white\/10:hover{ background:var(--raised) !important; }

/* ---------- INPUTS / TEXTAREA ---------- */
#page-prospect-b2b .form-input,
#modal-b2b-company .form-input{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  color:var(--text) !important;
}
#page-prospect-b2b .form-input:focus,
#modal-b2b-company .form-input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-b2b textarea.form-input.font-mono{ font-family:var(--mono) !important; }

/* ---------- STATUS REQUEST ATIVA ---------- */
#page-prospect-b2b #b2b-ns-active-status .bg-amber-400{ background:var(--warn) !important; }
#page-prospect-b2b #b2b-ns-status-label.text-amber-300{ color:var(--warn) !important; letter-spacing:.12em !important; }

/* ---------- FILTROS ---------- */
#page-prospect-b2b .b2b-filter-btn{
  border-radius:var(--r-sm) !important;
  font-weight:500 !important;
  transition:background .15s,border-color .15s,color .15s !important;
}
/* estado inativo: neutro */
#page-prospect-b2b .b2b-filter-btn.text-white\/50{
  background:transparent !important;
  border-color:var(--line) !important;
  color:var(--dim) !important;
}
#page-prospect-b2b .b2b-filter-btn.text-white\/50:hover{
  background:var(--panel-2) !important;
  border-color:var(--line-strong) !important;
  color:var(--text) !important;
}
/* estado ativo (Todas): acento ciano contido */
#page-prospect-b2b .b2b-filter-btn.bg-cyan-500\/20{
  background:var(--accent-glow) !important;
  color:var(--accent) !important;
  border-color:var(--accent-deep) !important;
}

/* ---------- TOOLBAR / SELECT ALL ---------- */
#page-prospect-b2b .leads-toolbar .text-white\/60{ color:var(--dim) !important; }
#page-prospect-b2b .lead-card-master-cb,
#page-prospect-b2b .lead-card-checkbox{ accent-color:var(--accent) !important; }

/* ---------- CABECALHOS DAS 2 COLUNAS ---------- */
/* coluna "Com WhatsApp": status de dado vivo = --live */
#page-prospect-b2b .border-emerald-500\/20{ border-color:var(--line) !important; }
#page-prospect-b2b .text-emerald-400{ color:var(--live) !important; }
#page-prospect-b2b .text-emerald-300{ color:var(--live) !important; }
/* coluna "Sem WhatsApp": neutro */
#page-prospect-b2b .text-white\/50{ color:var(--mute) !important; }
#page-prospect-b2b .text-white\/70{ color:var(--dim) !important; }

/* ---------- LEAD CARDS ---------- */
#page-prospect-b2b .lead-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}
/* mata o anel gradient roxo→ciano */
#page-prospect-b2b .lead-card::before{ display:none !important; }
#page-prospect-b2b .lead-card:hover{
  transform:translateY(-2px) !important;
  border-color:var(--accent-glow) !important;
  background:var(--panel-2) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* avatar: vidro neutro com glyph claro, sem gradient roxo */
#page-prospect-b2b .lead-avatar{
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
  color:var(--text) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  text-shadow:none !important;
}
#page-prospect-b2b .lead-card-username{
  font-family:var(--mono) !important;
  color:var(--text) !important;
}
#page-prospect-b2b .lead-card-display{ color:var(--mute) !important; }
#page-prospect-b2b .lead-card-bio{ color:var(--dim) !important; }
#page-prospect-b2b .lead-card-footer{ border-top-color:var(--line) !important; }

/* badges: paleta funcional contida (sem neon) */
#page-prospect-b2b .lead-badge{ font-weight:500 !important; }
#page-prospect-b2b .lead-badge.b-offer{
  color:var(--live) !important;
  background:rgba(52,232,158,.08) !important;
  border-color:rgba(52,232,158,.30) !important;
}
#page-prospect-b2b .lead-badge.b-wa{
  color:var(--accent) !important;
  background:var(--accent-glow) !important;
  border-color:var(--accent-deep) !important;
}
#page-prospect-b2b .lead-badge.b-source{
  color:var(--dim) !important;
  background:var(--panel-2) !important;
  border-color:var(--line-strong) !important;
}
#page-prospect-b2b .lead-badge.b-person{
  color:var(--warn) !important;
  background:rgba(245,181,68,.08) !important;
  border-color:rgba(245,181,68,.30) !important;
}

/* numeros nos badges/contadores → mono tabular */
#page-prospect-b2b #b2b-col-wa-count,
#page-prospect-b2b #b2b-col-nowa-count,
#page-prospect-b2b #b2b-bulk-count,
#page-prospect-b2b #b2b-totals,
#page-prospect-b2b .lead-status-pill{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
}

/* action buttons do card: funcional, sem neon */
#page-prospect-b2b .lead-action-btn{ border-radius:var(--r-sm) !important; }
#page-prospect-b2b .lead-action-btn.la-approve{
  color:var(--live) !important;
  border-color:rgba(52,232,158,.35) !important;
  background:rgba(52,232,158,.06) !important;
}
#page-prospect-b2b .lead-action-btn.la-approve:hover{ background:rgba(52,232,158,.16) !important; }
#page-prospect-b2b .lead-action-btn.la-cancel{
  color:var(--warn) !important;
  border-color:rgba(245,181,68,.35) !important;
  background:rgba(245,181,68,.06) !important;
}
#page-prospect-b2b .lead-action-btn.la-cancel:hover{ background:rgba(245,181,68,.16) !important; }
#page-prospect-b2b .lead-action-btn.la-view{
  color:var(--accent) !important;
  border-color:var(--accent-deep) !important;
  background:var(--accent-glow) !important;
}
#page-prospect-b2b .lead-action-btn.la-view:hover{ background:var(--accent-deep) !important; color:var(--text) !important; }

/* estado vazio */
#page-prospect-b2b .lead-card-empty{
  color:var(--mute) !important;
  border:1px dashed var(--line-strong) !important;
  border-radius:var(--r) !important;
  background:var(--panel-2) !important;
}

/* ---------- MODAL DETALHE EMPRESA (#modal-b2b-company) ---------- */
#modal-b2b-company.modal-overlay{ background:rgba(5,8,12,.66) !important; backdrop-filter:none; }
#modal-b2b-company .modal{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* mata o tint rosa/roxo do modal::before */
#modal-b2b-company .modal::before{ background:none !important; }
#modal-b2b-company .modal-header{ border-bottom-color:var(--line) !important; }
#modal-b2b-company .modal-header h2{
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
  color:var(--text) !important;
}

/* ---------- VIEW FULL-PAGE de leads de uma busca (#search-leads-modal) ----------
   Antes era um modal overlay centralizado. Agora é uma view que ocupa a área do menu
   Prospecção (à direita do sidebar), escondendo as abas e os cards de busca. */
.slm-fullpage{
  position:absolute; inset:0;
  z-index:50;                 /* pfx: acima do header sticky do #page-prospeccao (z-40) p/ a toolbar (Selecionar todos/Tag/CRM) nao ficar coberta; abaixo dos modais globais (#ul-modal z=200) */
  display:flex; flex-direction:column;
  background:var(--bg, #07090f);
}
.slm-fullpage.hidden{ display:none !important; }
.slm-fullpage .slm-fullpage-inner{
  display:flex; flex-direction:column;
  flex:1; min-height:0;
  max-width:1440px; width:100%; margin:0 auto;
}
.slm-fullpage .slm-fp-body{ flex:1 1 auto; min-height:0; }
/* O #page-prospeccao vira o containing block do inset:0 da view */
#page-prospeccao{ position:relative; min-height:100vh; }

/* ---------- MODAL LEAD UNIVERSAL (#ul-modal) ---------- */
#ul-modal{ background:rgba(5,8,12,.80) !important; }
#ul-modal .glass-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* hero: troca o gradient rosa→roxo (#ec4899→#a855f7) por vidro escuro com fio ciano embaixo */
#ul-modal #ul-hero{
  background:var(--panel-2, #111824);
  border-bottom:1px solid var(--line-strong) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  border-radius:var(--r) var(--r) 0 0 !important;
}
#ul-modal #ul-avatar{
  background:var(--raised) !important;
  border:3px solid var(--panel) !important;
  color:var(--text) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#ul-modal #ul-name{ color:var(--text) !important; }
#ul-modal #ul-category,
#ul-modal #ul-followers{ color:var(--mute) !important; }
#ul-modal #ul-intro{ color:var(--dim) !important; }
#ul-modal #ul-fields{ font-variant-numeric:tabular-nums; }
#ul-modal #ul-bottom{ border-top-color:var(--line) !important; }


/* === PROSPECT FACEBOOK === */
/* Cockpit override: preto tingido, vidro de borda fina, acento ciano disciplinado.
   ZERO neon, ZERO rosa/roxo. Escopo: #page-prospect-fb + seus modais.
   Targeta classes REAIS: glass, glass-card, btn(-primary/-secondary), stat-mini*,
   leads-grid, lead-card*, lead-avatar, lead-badge*, lead-action-btn*, lead-status-pill,
   form-input, fb-*-modal, tabela de buscas. */

/* ---------- SUPERFICIE BASE DA PAGINA ---------- */
#page-prospect-fb .glass,
#page-prospect-fb .glass-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#page-prospect-fb .glass-card{
  transition:border-color .18s ease, box-shadow .18s ease !important;
}
#page-prospect-fb .glass-card:hover{
  border-color:var(--accent-glow) !important;
}

/* header sticky da tela vira chapa de vidro do cockpit */
#page-prospect-fb header.glass{
  background:var(--panel-2, #111824);
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-fb h1{ color:var(--text); letter-spacing:-.01em; }
#page-prospect-fb .text-white\/45,
#page-prospect-fb .text-white\/40,
#page-prospect-fb .text-white\/30{ color:var(--mute) !important; }
#page-prospect-fb .text-white\/55,
#page-prospect-fb .text-white\/50{ color:var(--dim) !important; }

/* marca FB no header: chapa neutra contida, sem gradiente azul berrante */
#page-prospect-fb header .ui-icon-tile.swatch-blue-500,
#page-prospect-fb .ui-icon-tile.swatch-blue-600{
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
}
#page-prospect-fb header .ui-icon-tile.swatch-blue-500 svg,
#page-prospect-fb .ui-icon-tile.swatch-blue-600 svg{ color:var(--dim) !important; }

/* ---------- BOTOES ---------- */
#page-prospect-fb .btn{
  border-radius:var(--r-sm) !important;
  font-weight:600 !important;
  transition:border-color .16s ease, background .16s ease, color .16s ease !important;
}
/* acao primaria: unico lugar de acento solido */
#page-prospect-fb .btn-primary{
  background:var(--accent-deep) !important;
  color:var(--bg) !important;
  border:1px solid var(--accent) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-fb .btn-primary:hover{
  background:var(--accent) !important;
  color:var(--bg) !important;
  transform:none !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-fb .btn-primary:disabled{
  background:var(--raised) !important;
  color:var(--mute) !important;
  border-color:var(--line) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  cursor:not-allowed !important;
}
/* secundario: neutro contido */
#page-prospect-fb .btn-secondary{
  background:var(--panel-2) !important;
  color:var(--dim) !important;
  border:1px solid var(--line) !important;
}
#page-prospect-fb .btn-secondary:hover{
  background:var(--raised) !important;
  border-color:var(--accent-glow) !important;
  color:var(--text) !important;
}

/* ---------- STATS COMPACTAS ---------- */
#page-prospect-fb .stat-mini{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  padding:10px 13px !important;
  gap:4px !important;
  transition:border-color .16s ease !important;
}
#page-prospect-fb .stat-mini:hover{
  background:var(--panel-2) !important;
  border-color:var(--accent-glow) !important;
}
#page-prospect-fb .stat-mini-label{
  font-size:10px !important;
  letter-spacing:.12em !important;
  color:var(--mute) !important;
}
#page-prospect-fb .stat-mini-val{
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  font-size:19px !important;
  font-weight:600 !important;
  color:var(--text) !important;
  letter-spacing:-.02em !important;
}
/* tints utilitarios do tailwind nas metricas -> tokens de status */
#page-prospect-fb .stat-mini-val.text-cyan-300{ color:var(--accent) !important; }
#page-prospect-fb .stat-mini-val.text-emerald-300{ color:var(--live) !important; }
#page-prospect-fb .stat-mini-val.text-amber-300{ color:var(--warn) !important; }

/* ---------- TABELA DE BUSCAS ANTERIORES ---------- */
#page-prospect-fb table{ border-collapse:separate; border-spacing:0; }
#page-prospect-fb thead.bg-white\/5{
  background:var(--panel-2) !important;
}
#page-prospect-fb thead th{
  color:var(--mute) !important;
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  padding-top:11px !important;
  padding-bottom:11px !important;
}
#page-prospect-fb tbody tr{
  border-bottom:1px solid var(--line) !important;
  transition:background .14s ease !important;
}
#page-prospect-fb tbody tr:hover{ background:rgba(255,255,255,.025) !important; }
#page-prospect-fb tbody td{ color:var(--dim); }
/* numeros da tabela em mono telemetria */
#page-prospect-fb tbody td:nth-child(4),
#page-prospect-fb tbody td:nth-child(5),
#page-prospect-fb tbody td:nth-child(6){
  font-family:var(--mono) !important;
  font-variant-numeric:tabular-nums !important;
  color:var(--text);
}
#page-prospect-fb .border-white\/10{ border-color:var(--line) !important; }

/* ---------- FILTRO "SO COM WHATSAPP" ---------- */
#page-prospect-fb #fb-filter-wpp-wrap{
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  background:var(--panel-2) !important;
}
#page-prospect-fb #fb-filter-wpp-wrap:hover{
  background:var(--raised) !important;
  border-color:var(--accent-glow) !important;
}
#page-prospect-fb #fb-filter-wpp-wrap .text-emerald-300{ color:var(--live) !important; }
#page-prospect-fb input[type="checkbox"].accent-emerald-400{ accent-color:var(--accent) !important; }

/* ---------- INPUTS DO MODAL DE BUSCA ---------- */
#page-prospect-fb .form-input{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  color:var(--text) !important;
  font-variant-numeric:tabular-nums;
}
#page-prospect-fb .form-input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-fb #fb-max{ font-family:var(--mono) !important; }

/* ---------- MODAL DE NOVA BUSCA ---------- */
#fb-new-search-modal{ background:rgba(5,8,13,.72) !important; }
#fb-new-search-modal .glass-card{
  background:var(--panel) !important;
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* mata o wash gradiente azul/indigo do fundo do modal */
#fb-new-search-modal .ui-icon-tile{
  background:none !important;
}
/* titulo: SEM gradiente em texto (proibido) -> texto solido limpo */
#fb-new-search-modal h3.ui-icon-tile{
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
  color:var(--text) !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
}

/* ---------- GRID DE LEADS ---------- */
#page-prospect-fb .leads-grid{ gap:14px !important; }

#page-prospect-fb .lead-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
/* remove a borda-gradiente roxa/ciano (::before mask) */
#page-prospect-fb .lead-card::before{
  background:none !important;
  opacity:0 !important;
  display:none !important;
}
#page-prospect-fb .lead-card:hover{
  background:var(--panel) !important;
  border-color:var(--accent-glow) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-fb .lead-card:hover::before{ opacity:0 !important; }

/* avatar: chapa neutra (default era roxo a855f7 -> proibido) */
#page-prospect-fb .lead-avatar{
  background:var(--raised) !important;
  border:1px solid var(--line-strong) !important;
  color:var(--dim) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  text-shadow:none !important;
  border-radius:var(--r-sm) !important;
}
#page-prospect-fb .lead-card-username{
  font-family:var(--mono) !important;
  color:var(--text) !important;
}
#page-prospect-fb .lead-card-display{ color:var(--mute) !important; }
#page-prospect-fb .lead-card-bio{ color:var(--dim) !important; }
#page-prospect-fb .lead-card-checkbox{ accent-color:var(--accent) !important; }
#page-prospect-fb .lead-card-footer{ border-top:1px solid var(--line) !important; }

/* ---------- BADGES DOS LEADS ---------- */
/* tom contido: fundo neutro, borda fina, cor de status so onde tem proposito */
#page-prospect-fb .lead-badge{
  border-radius:999px !important;
  border:1px solid var(--line-strong) !important;
  background:var(--panel-2) !important;
  font-weight:500 !important;
}
/* oferta -> live (verde controlado, nao neon) */
#page-prospect-fb .lead-badge.b-offer{
  color:var(--live) !important;
  background:rgba(52,232,158,.08) !important;
  border-color:rgba(52,232,158,.28) !important;
}
/* whatsapp -> acento ciano (dado importante / canal ativo) */
#page-prospect-fb .lead-badge.b-wa{
  color:var(--accent) !important;
  background:var(--accent-glow) !important;
  border-color:rgba(34,224,214,.30) !important;
}
/* fonte -> neutro */
#page-prospect-fb .lead-badge.b-source{
  color:var(--dim) !important;
  background:var(--panel-2) !important;
  border-color:var(--line-strong) !important;
}
/* pessoa -> warn (ambar controlado, nao neon) */
#page-prospect-fb .lead-badge.b-person{
  color:var(--warn) !important;
  background:rgba(245,181,68,.08) !important;
  border-color:rgba(245,181,68,.28) !important;
}

/* ---------- ACOES DO CARD ---------- */
#page-prospect-fb .lead-action-btn{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--line-strong) !important;
  background:var(--panel-2) !important;
  color:var(--dim) !important;
}
#page-prospect-fb .lead-action-btn:hover{ transform:translateY(-1px) !important; }
#page-prospect-fb .lead-action-btn.la-approve{
  color:var(--live) !important;
  border-color:rgba(52,232,158,.32) !important;
  background:rgba(52,232,158,.06) !important;
}
#page-prospect-fb .lead-action-btn.la-approve:hover{ background:rgba(52,232,158,.14) !important; }
#page-prospect-fb .lead-action-btn.la-cancel{
  color:var(--warn) !important;
  border-color:rgba(245,181,68,.32) !important;
  background:rgba(245,181,68,.06) !important;
}
#page-prospect-fb .lead-action-btn.la-cancel:hover{ background:rgba(245,181,68,.14) !important; }
/* la-view era indigo a5b4fc -> vira acento ciano contido */
#page-prospect-fb .lead-action-btn.la-view{
  color:var(--accent) !important;
  border-color:rgba(34,224,214,.32) !important;
  background:var(--accent-glow) !important;
}
#page-prospect-fb .lead-action-btn.la-view:hover{ background:rgba(34,224,214,.16) !important; }

/* status pill (cor vem inline via JS): so arredonda e poe mono nos numeros */
#page-prospect-fb .lead-status-pill{
  border-radius:999px !important;
  font-weight:500 !important;
}

/* estado vazio */
#page-prospect-fb .lead-card-empty{
  border:1px dashed var(--line-strong) !important;
  border-radius:var(--r) !important;
  background:var(--panel-2) !important;
  color:var(--mute) !important;
}

/* ---------- MODAL DETALHE DE PAGE ---------- */
#fb-page-modal .glass-card{
  background:var(--panel) !important;
  border:1px solid var(--line-strong) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* capa: era gradiente azul FB chapado -> chapa de vidro discreta com acento sutil */
#fb-page-modal .glass-card > div[style*="decorative-fill(135deg, #1877f2"]{
  background:var(--panel-2, #111824);
  border-bottom:1px solid var(--line) !important;
}
#fb-page-modal #fb-modal-avatar{
  background:var(--raised) !important;
  border:3px solid var(--panel) !important;
  color:var(--dim) !important;
}
#fb-page-modal #fb-modal-name{ color:var(--text) !important; }


/* === Prospect LinkedIn === */
/* Tela stub "em construcao". Cockpit: preto tingido, vidro de borda fina,
   acento ciano disciplinado so no icone/destaque, zero gradiente azul berrante. */

/* ---- header de vidro ---- */
#page-prospect-linkedin .glass {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* ---- icone do header: caixa de acento contida, sem gradiente azul ---- */
#page-prospect-linkedin header .w-8.h-8 {
  background: var(--accent-glow) !important;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-linkedin header .w-8.h-8 svg {
  color: var(--accent) !important;
}

/* ---- tipografia do header ---- */
#page-prospect-linkedin header h1 {
  color: var(--text) !important;
  letter-spacing: -0.01em;
}
#page-prospect-linkedin header p,
#page-prospect-linkedin header .text-white\/45 {
  color: var(--mute) !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px !important;
}

/* ---- corpo: respiro generoso ---- */
#page-prospect-linkedin .px-8.py-12 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* ---- card central de vidro ---- */
#page-prospect-linkedin .glass-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition: border-color .2s ease, transform .2s ease;
  padding: 48px 40px !important;
}
#page-prospect-linkedin .glass-card:hover {
  border-color: var(--accent-glow) !important;
}

/* ---- icone grande central: mesmo tratamento de acento contido ---- */
#page-prospect-linkedin .glass-card .w-14.h-14 {
  background: var(--accent-glow) !important;
  border: 1px solid var(--line-strong);
  border-radius: var(--r) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
#page-prospect-linkedin .glass-card .w-14.h-14 svg {
  color: var(--accent) !important;
}

/* ---- hierarquia de texto do card ---- */
#page-prospect-linkedin .glass-card h2 {
  color: var(--text) !important;
  letter-spacing: -0.02em;
  font-weight: 600;
}
#page-prospect-linkedin .glass-card .text-white\/55 {
  color: var(--dim) !important;
}
#page-prospect-linkedin .glass-card .text-white\/40 {
  color: var(--mute) !important;
  line-height: 1.6;
}

/* ---- selo "em construcao" mono, label discreta ---- */
#page-prospect-linkedin .glass-card .text-white\/40:last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}




/* === CONTATOS (filtros/tabela/drawer) — CSS consolidado no bloco "=== CONTATOS ===" acima === */

/* ═══════════════════ AGENDAMENTO (Google Calendar) ═══════════════════ */
#page-agendamento{ padding:0; height:calc(100vh - 0px); }
.ag-shell{ display:flex; height:calc(100vh - 84px); gap:0; }
.ag-side{ width:264px; flex-shrink:0; padding:20px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:20px; overflow-y:auto; }
.ag-create-btn{ display:flex; align-items:center; gap:10px; padding:12px 18px; border:none; border-radius:14px; cursor:pointer;
  background:var(--panel-2, #111824); color:#04231f; font-weight:700; font-size:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .15s, box-shadow .15s; }
.ag-create-btn:hover{ transform:translateY(-2px); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.ag-create-btn svg{ width:18px; height:18px; }
.ag-mini{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; }
.ag-mini-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ag-mini-title{ font-size:13px; font-weight:700; color:var(--text); }
.ag-mini-nav{ display:flex; gap:4px; }
.ag-mini-nav button{ background:transparent; border:none; color:var(--dim); cursor:pointer; width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.ag-mini-nav button:hover{ background:var(--panel-2); color:var(--text); }
.ag-mini-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.ag-mini-dow{ font-size:9px; color:var(--mute); text-align:center; font-weight:700; padding:3px 0; text-transform:uppercase; }
.ag-mini-day{ font-size:11px; text-align:center; padding:5px 0; border-radius:7px; cursor:pointer; color:var(--text); transition:background .12s; }
.ag-mini-day:hover{ background:var(--panel-2); }
.ag-mini-day.out{ color:var(--mute); opacity:.45; }
.ag-mini-day.today{ background:var(--accent); color:#04231f; font-weight:800; }
.ag-mini-day.sel{ outline:1.5px solid var(--accent); }
.ag-cals-title{ font-size:11px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.ag-cal-list{ display:flex; flex-direction:column; gap:4px; }
.ag-cal-item{ display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:9px; cursor:pointer; transition:background .12s; }
.ag-cal-item:hover{ background:var(--panel-2); }
.ag-cal-check{ width:15px; height:15px; border-radius:4px; border:2px solid currentColor; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .12s; }
.ag-cal-check.on{ background:currentColor; }
.ag-cal-check svg{ width:10px; height:10px; color:var(--bg); opacity:0; }
.ag-cal-check.on svg{ opacity:1; }
.ag-cal-name{ font-size:12.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-skel-row{ height:30px; border-radius:9px; background:var(--panel-2, #111824); background-size:200% 100%; animation:agshimmer 1.3s infinite; }
@keyframes agshimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.ag-conn{ margin-top:auto; font-size:11px; }
.ag-conn-ok{ display:flex; align-items:center; gap:7px; padding:8px 10px; border-radius:9px; background:var(--panel); border:1px solid var(--line); color:var(--dim); }
.ag-conn-dot{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 1px 3px rgba(0,0,0,.18); flex-shrink:0; }
.ag-conn-mail{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-conn-bad{ display:flex; flex-direction:column; gap:7px; padding:10px; border-radius:10px; background:rgba(255,93,108,0.08); border:1px solid rgba(255,93,108,0.25); color:var(--text); }
.ag-conn-reconnect{ background:var(--bad); color:#fff; border:none; border-radius:8px; padding:7px 10px; font-size:11px; font-weight:700; cursor:pointer; }

.ag-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.ag-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-bottom:1px solid var(--line); flex-shrink:0; gap:14px; flex-wrap:wrap; }
.ag-tb-left{ display:flex; align-items:center; gap:14px; }
.ag-today-btn{ padding:8px 16px; border:1px solid var(--line-strong); border-radius:10px; background:var(--panel); color:var(--text); font-weight:600; font-size:13px; cursor:pointer; transition:border-color .15s,background .15s; }
.ag-today-btn:hover{ border-color:var(--accent); background:var(--panel-2); }
.ag-nav-arrows{ display:flex; gap:2px; }
.ag-arrow{ width:32px; height:32px; border:none; background:transparent; color:var(--dim); border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s,color .12s; }
.ag-arrow:hover{ background:var(--panel-2); color:var(--text); }
.ag-arrow svg{ width:18px; height:18px; }
.ag-period{ font-size:20px; font-weight:700; color:var(--text); margin:0; letter-spacing:-.01em; }
.ag-tb-right{ display:flex; align-items:center; gap:12px; }
.ag-view-toggle{ display:flex; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:3px; }
.ag-view-opt{ padding:7px 15px; border:none; background:transparent; color:var(--dim); font-size:13px; font-weight:600; border-radius:8px; cursor:pointer; transition:all .15s; }
.ag-view-opt:hover{ color:var(--text); }
.ag-view-opt.active{ background:var(--accent); color:#04231f; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.ag-refresh{ width:34px; height:34px; border:1px solid var(--line); background:var(--panel); color:var(--dim); border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.ag-refresh:hover{ color:var(--accent); border-color:var(--accent); }
.ag-refresh svg{ width:16px; height:16px; }
.ag-refresh.spin svg{ animation:agspin .8s linear infinite; }
@keyframes agspin{ to{ transform:rotate(360deg); } }
.ag-canvas{ flex:1; overflow:auto; position:relative; }
.ag-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:14px; color:var(--dim); }
.ag-spinner{ width:38px; height:38px; border:3px solid var(--line-strong); border-top-color:var(--accent); border-radius:50%; animation:agspin .8s linear infinite; }
.ag-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:12px; color:var(--mute); text-align:center; padding:40px; }
.ag-empty svg{ width:48px; height:48px; opacity:.4; }

/* ─ Onboarding "Conectar agenda" (multi-tenant sem agenda conectada) ─ */
.ag-onb{ display:flex; align-items:center; justify-content:center; height:100%; padding:40px 24px; }
.ag-onb-card{ width:100%; max-width:560px; background:var(--card); border:1px solid var(--line); border-radius:var(--card-radius); padding:34px 32px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.18); backdrop-filter:none; }
.ag-onb-ic{ width:74px; height:74px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--panel-2, #111824); border:1px solid var(--line-strong); }
.ag-onb-ic svg{ width:36px; height:36px; stroke:var(--accent); }
.ag-onb-title{ font-size:22px; font-weight:800; color:var(--text); margin:0 0 8px; letter-spacing:-0.01em; }
.ag-onb-sub{ font-size:14px; line-height:1.55; color:var(--dim); margin:0 auto 22px; max-width:440px; }
.ag-onb-steps{ list-style:none; margin:0 0 24px; padding:0; text-align:left; display:flex; flex-direction:column; gap:12px; }
.ag-onb-step{ display:flex; align-items:flex-start; gap:12px; font-size:13.5px; line-height:1.5; color:var(--text); }
.ag-onb-num{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--accent); background:var(--accent-glow); border:1px solid var(--line-strong); }
.ag-onb-step b{ color:var(--text); font-weight:700; }
.ag-onb-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ag-onb-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:11px; font-size:13.5px; font-weight:700; cursor:pointer; border:1px solid transparent; transition:transform .12s, filter .12s, background .15s; }
.ag-onb-btn:hover{ transform:translateY(-1px); }
.ag-onb-btn svg{ width:16px; height:16px; }
.ag-onb-btn-primary{ background:var(--panel-2, #111824); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.ag-onb-btn-primary:hover{ filter:brightness(1.06); }
.ag-onb-btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--text); }
.ag-onb-btn-ghost:hover{ background:var(--line); }
.ag-onb-link{ display:inline-block; margin-top:16px; font-size:12px; color:var(--mute); text-decoration:none; }
.ag-onb-link:hover{ color:var(--accent); text-decoration:underline; }

/* ─ Mes ─ */
.ag-month{ display:flex; flex-direction:column; min-height:100%; }
.ag-month-dow{ display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--line); }
.ag-month-dow > div{ padding:9px 8px; font-size:11px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.06em; text-align:right; }
.ag-month-grid{ display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:1fr; flex:1; }
.ag-mcell{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:104px; padding:5px 6px; cursor:pointer; position:relative; transition:background .12s; overflow:hidden; }
.ag-mcell:hover{ background:var(--panel); }
.ag-mcell.out{ background:var(--panel); opacity:.55; }
.ag-mcell-num{ font-size:13px; font-weight:600; color:var(--text); width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; margin-left:auto; }
.ag-mcell-head{ display:flex; justify-content:flex-end; }
.ag-mcell.today .ag-mcell-num{ background:var(--accent); color:#04231f; font-weight:800; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.ag-mcell-events{ display:flex; flex-direction:column; gap:3px; margin-top:3px; }
.ag-pill{ font-size:11px; padding:2px 7px; border-radius:6px; color:#fff; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .1s,filter .1s; display:flex; align-items:center; gap:5px; }
.ag-pill:hover{ transform:translateX(2px); filter:brightness(1.12); }
.ag-pill-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.85); flex-shrink:0; }
.ag-pill-time{ opacity:.85; font-weight:500; font-size:10px; }
.ag-more{ font-size:10.5px; color:var(--dim); font-weight:600; padding:1px 6px; cursor:pointer; }
.ag-more:hover{ color:var(--accent); }

/* ─ Semana / Dia ─ */
.ag-tl{ display:grid; grid-template-columns:62px 1fr; min-height:100%; }
.ag-tl-head{ display:grid; position:sticky; top:0; z-index:6; background:var(--bg); border-bottom:1px solid var(--line-strong); }
.ag-tl-headspacer{ border-right:1px solid var(--line); }
.ag-tl-daycol-head{ padding:10px 4px; text-align:center; border-right:1px solid var(--line); }
.ag-tl-dow{ font-size:11px; color:var(--mute); text-transform:uppercase; font-weight:700; letter-spacing:.05em; }
.ag-tl-dnum{ font-size:22px; font-weight:700; color:var(--text); margin-top:2px; width:38px; height:38px; line-height:38px; border-radius:50%; margin:2px auto 0; }
.ag-tl-daycol-head.today .ag-tl-dnum{ background:var(--accent); color:#04231f; }
.ag-tl-body{ display:grid; position:relative; }
.ag-tl-hours{ border-right:1px solid var(--line); }
.ag-tl-hour{ height:52px; position:relative; }
.ag-tl-hour span{ position:absolute; top:-7px; right:7px; font-size:10.5px; color:var(--mute); }
.ag-tl-daycol{ border-right:1px solid var(--line); position:relative; }
.ag-tl-hline{ height:52px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .1s; }
.ag-tl-hline:hover{ background:var(--panel); }
.ag-tl-now{ position:absolute; left:0; right:0; height:2px; background:var(--bad); z-index:5; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.ag-tl-now::before{ content:''; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--bad); }
.ag-ev{ position:absolute; left:3px; right:3px; border-radius:8px; padding:4px 8px; color:#fff; cursor:pointer; overflow:hidden; font-size:12px; box-shadow:0 1px 3px rgba(0,0,0,.18); border-left:3px solid rgba(255,255,255,.5); transition:transform .1s,filter .1s; z-index:3; }
.ag-ev:hover{ transform:scale(1.01); filter:brightness(1.1); z-index:4; }
.ag-ev-title{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-ev-sub{ font-size:10.5px; opacity:.9; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-allday-row{ display:grid; grid-template-columns:62px 1fr; border-bottom:1px solid var(--line-strong); background:var(--panel); }
.ag-allday-lbl{ font-size:9px; color:var(--mute); text-transform:uppercase; padding:6px; border-right:1px solid var(--line); text-align:right; }
.ag-allday-cells{ display:grid; }
.ag-allday-cell{ border-right:1px solid var(--line); padding:4px; display:flex; flex-direction:column; gap:3px; }

/* ─ Modal ─ */
.ag-modal{ max-width:480px; width:92vw; }
.ag-modal-body{ padding:20px 22px; display:flex; flex-direction:column; gap:14px; max-height:64vh; overflow-y:auto; }
.ag-field{ display:flex; flex-direction:column; gap:6px; }
.ag-field-row{ display:flex; gap:12px; }
.ag-field-row .ag-field{ flex:1; }
.ag-field-lbl{ font-size:11px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.05em; }
.ag-input{ background:var(--panel); border:1px solid var(--line-strong); border-radius:10px; padding:10px 12px; color:var(--text); font-size:14px; font-family:inherit; transition:border-color .15s; width:100%; }
.ag-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.ag-textarea{ resize:vertical; min-height:60px; }
.ag-check{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text); cursor:pointer; }
.ag-check input{ width:16px; height:16px; accent-color:var(--accent); }
.ag-glink{ font-size:13px; color:var(--accent); font-weight:600; text-decoration:none; }
.ag-glink:hover{ text-decoration:underline; }
.ag-modal-foot{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-top:1px solid var(--line); }
.ag-foot-right{ display:flex; gap:10px; margin-left:auto; }
.ag-btn-ghost{ padding:9px 18px; border:1px solid var(--line-strong); background:transparent; color:var(--dim); border-radius:10px; font-weight:600; cursor:pointer; font-size:13px; }
.ag-btn-ghost:hover{ color:var(--text); border-color:var(--text); }
.ag-btn-save{ padding:9px 22px; border:none; background:var(--panel-2, #111824); color:#04231f; border-radius:10px; font-weight:700; cursor:pointer; font-size:13px; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.ag-btn-save:hover{ filter:brightness(1.08); }
.ag-btn-del{ padding:9px 16px; border:1px solid rgba(255,93,108,.35); background:transparent; color:var(--bad); border-radius:10px; font-weight:600; cursor:pointer; font-size:13px; }
.ag-btn-del:hover{ background:rgba(255,93,108,.1); }
@media (max-width:860px){ .ag-side{ display:none; } .ag-period{ font-size:16px; } }

/* ════════════════════════════════════════════════════════════════════════
   REFINAMENTO PREMIUM 2026-07
   Camada incremental autorizada pelos contratos PRODUCT / DESIGN / UI-SPEC.
   Preserva estrutura e fluxos; unifica hierarquia, estados e acessibilidade.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --on-accent:#031514;
  --focus-ring:#67e8f9;
  --surface-shadow:0 12px 32px -24px rgba(0,0,0,.82);
  --surface-shadow-raised:0 18px 46px -28px rgba(0,0,0,.9);
}
[data-palette="roxo"], [data-palette="magenta"]{ --on-accent:#fff; }
[data-palette="ambar"]{ --on-accent:#231604; }
[data-palette="esmeralda"]{ --on-accent:#041a12; }
[data-theme="light"]{
  --on-accent:#fff;
  --focus-ring:#0e7490;
  --surface-shadow:0 10px 28px -22px rgba(15,23,42,.28);
  --surface-shadow-raised:0 18px 44px -26px rgba(15,23,42,.32);
}

html{ color-scheme:dark; scroll-behavior:smooth; }
[data-theme="light"]{ color-scheme:light; }
html body{
  background:var(--bg) !important;
  background-image:none !important;
  background-attachment:scroll !important;
  color:var(--text);
  font-family:'Manrope',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent-glow); color:var(--text); }
img,svg{ max-width:100%; }

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:10000;
  padding:10px 14px;
  border:1px solid var(--accent);
  border-radius:8px;
  background:var(--panel);
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  transform:translateY(-160%);
  transition:transform .16s ease;
}
.skip-link:focus{ transform:translateY(0); }

:where(a,button,input,select,textarea,[role="button"],[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring) !important;
  outline-offset:2px !important;
}
:where(button,input,select,textarea):disabled,
:where(button,[role="button"])[aria-disabled="true"]{
  cursor:not-allowed !important;
  opacity:.52;
}

h1,h2,h3,h4{
  color:var(--text);
  font-family:'Manrope',Inter,sans-serif;
  text-wrap:balance;
}
.main-area{ min-width:0; }
.page > header.glass{
  background:var(--panel) !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.glass,.glass-strong,.glass-card,
.agent-card,.channel-card,.detail-section,.ctxp-card,.bill-card,.bill-stat{
  background:var(--panel) !important;
  border-color:var(--line) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.agent-card::before,.channel-card::before,.btn-led::before,.surface-border::before{
  display:none !important;
}
.agent-card:hover,.channel-card:hover,.card-hover:hover{
  transform:none !important;
  border-color:var(--line-strong) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

.btn{
  min-height:40px;
  height:auto;
  padding:9px 15px;
  border-radius:9px;
  justify-content:center;
  font-weight:650;
  letter-spacing:0;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease;
}
.btn-primary{
  background:var(--accent-deep);
  background-image:none;
  border:1px solid var(--accent-deep);
  color:var(--on-accent);
  box-shadow:none;
}
.btn-primary:hover{
  transform:none;
  filter:brightness(1.08);
  box-shadow:none;
}
.btn-secondary{
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--text);
}
.btn-secondary:hover{ background:var(--raised); border-color:var(--line-strong); }
.btn-danger{ border-color:color-mix(in srgb,var(--bad) 35%,transparent); color:var(--bad); }
.btn-danger:hover{ background:color-mix(in srgb,var(--bad) 12%,transparent); color:var(--bad); }
.btn-sm{ min-height:36px; height:auto; padding:7px 11px; border-radius:8px; }

.form-input,.ag-input,.ctxm-inp{
  min-height:42px;
  border-radius:9px;
  background:var(--panel-2);
  border-color:var(--line-strong);
  color:var(--text);
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.form-input:focus,.ag-input:focus,.ctxm-inp:focus{
  border-color:var(--accent-deep) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.form-group label,.detail-field .label{ color:var(--dim); text-transform:none; letter-spacing:0; }

.modal-overlay{
  background:rgba(2,6,12,.72);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.modal{
  background:var(--panel) !important;
  border-color:var(--line-strong) !important;
  border-radius:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.modal::before{ display:none; }
.modal-header h2{
  background:none;
  color:var(--text);
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
}
.modal-close{ min-width:40px; min-height:40px; color:var(--dim); }
.stat-number{
  background:none;
  color:var(--text);
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}
.live-dot,.pulse-slow,#dnew-root .dnew-dot{ box-shadow:0 1px 3px rgba(0,0,0,.18); }
#page-dashboard #currentDate{ white-space:nowrap; flex-shrink:0; }

.mobile-nav-scrim{ display:none; }

@media (hover:hover) and (pointer:fine){
  .nav-item:hover{ background:var(--panel-2) !important; }
}

@media (max-width:1023px){
  .sidebar{
    width:min(86vw,304px) !important;
    transform:translateX(-104%) !important;
    transition:transform .2s ease !important;
    box-shadow:0 1px 3px rgba(0,0,0,.18);
    padding-top:max(0px,env(safe-area-inset-top));
    z-index:80;
  }
  .sidebar.open{ transform:translateX(0) !important; }
  .sidebar.collapsed{ width:min(86vw,304px) !important; }
  .sidebar.collapsed .sidebar-label{ display:inline !important; width:auto !important; opacity:1 !important; }
  .sidebar.collapsed .sidebar-logo{ padding:24px 20px 22px !important; justify-content:flex-start !important; }
  .sidebar.collapsed .sidebar-logo-sub{ display:block !important; }
  .sidebar.collapsed .sidebar-nav{ padding:10px 12px 18px !important; }
  .sidebar.collapsed .nav-item{ justify-content:flex-start !important; padding:10px 13px !important; gap:13px !important; }
  .sidebar.collapsed .nav-item .nav-icon{ margin:0 !important; }
  .sidebar.collapsed .sidebar-footer{ padding:14px 12px !important; text-align:left !important; }
  .sidebar.collapsed .logout-btn{ justify-content:flex-start !important; padding:11px 13px !important; gap:8px !important; }
  .sidebar.collapsed #ctx-switcher{ justify-content:flex-start; padding:11px 13px; margin:4px 12px 10px; }
  .sidebar.collapsed #ctx-switcher .ctx-sw-name,
  .sidebar.collapsed #ctx-switcher .ctx-sw-caret{ display:block; }
  .sidebar-collapse-btn{ display:none !important; }
  .nav-section-label{ display:none; }
  body[data-ctx="owner"] .sidebar.collapsed .nav-section-label[data-nav-scope="owner"],
  body[data-ctx="agency"] .sidebar.collapsed .nav-section-label[data-nav-scope="agency"],
  body[data-ctx="operating"] .sidebar.collapsed .nav-section-label[data-nav-scope="operating"],
  body[data-ctx="owner"] .nav-section-label[data-nav-scope="owner"],
  body[data-ctx="agency"] .nav-section-label[data-nav-scope="agency"],
  body[data-ctx="operating"] .nav-section-label[data-nav-scope="operating"]{ display:block !important; }
  .main-area,
  body:has(.sidebar.collapsed) .main-area,
  .sidebar.collapsed ~ .main-area{
    margin-left:0 !important;
    padding-top:calc(64px + env(safe-area-inset-top));
  }
  .mobile-toggle{
    display:flex !important;
    top:calc(10px + env(safe-area-inset-top));
    left:calc(12px + env(safe-area-inset-left));
    z-index:82;
    background:var(--panel) !important;
    border-color:var(--line-strong) !important;
    color:var(--text) !important;
    box-shadow:0 1px 3px rgba(0,0,0,.18);
  }
  body:has(.sidebar.open) .mobile-nav-scrim{
    display:block;
    position:fixed;
    inset:0;
    z-index:79;
    border:0;
    background:rgba(2,6,12,.64);
  }
  #page-conversas.active{
    display:flex;
    flex-direction:column;
    height:calc(100dvh - 64px - env(safe-area-inset-top));
    overflow:hidden;
  }
  #page-conversas > header{ flex:0 0 auto; }
  #page-conversas .conv-layout{ flex:1; height:auto !important; min-height:0; }
}

/* FRONTEND WAVE 2 · FAMILY 2
   Broadcast, automacoes, produtos, Meta Ads, agenda e tracking. */
:is(#page-campanhas,#page-automacoes,#page-produtos,#page-meta-ads,#page-agendamento,#page-vendas) .surface-state{
  grid-column:1/-1;
  display:grid;
  place-content:center;
  gap:8px;
  min-height:150px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--theme-surface,var(--panel));
  color:var(--dim);
  text-align:center;
}
:is(#page-campanhas,#page-automacoes,#page-produtos,#page-meta-ads,#page-agendamento,#page-vendas) .surface-state strong{color:var(--text)}
:is(#page-campanhas,#page-automacoes,#page-produtos,#page-meta-ads,#page-agendamento,#page-vendas) .surface-state.is-error{color:var(--bad)}
:is(#page-campanhas,#page-automacoes,#page-meta-ads,#page-vendas) .surface-state button,
#page-vendas .trk-retry{
  justify-self:center;
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--raised);
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

/* Broadcast */
#page-campanhas>div{max-width:1440px;margin:0 auto;padding:24px clamp(16px,3vw,36px)!important}
#page-campanhas #camp-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))!important;gap:16px!important}
#page-campanhas .camp-card{
  min-width:0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--theme-surface,var(--panel));
  color:var(--text);
  cursor:pointer;
  box-shadow:var(--theme-card-shadow,none);
}
#page-campanhas .camp-card:hover{border-color:var(--line-strong);background:var(--raised)}
#page-campanhas .camp-card>div:first-child>div{color:var(--text)!important}
#page-campanhas .camp-card button{background:var(--accent-glow)!important;color:var(--accent-deep)!important;border-color:var(--line-strong)!important}
#camp-new-modal .modal,#camp-actions-modal .modal{width:min(720px,calc(100vw - 28px));max-height:min(88dvh,900px);overflow:auto;background:var(--theme-surface,var(--panel))}
#camp-actions-modal .modal{width:min(560px,calc(100vw - 28px))}

/* Flow builder */
#flow-ov{--fw-top-h:56px;background:var(--theme-canvas)!important}
#flow-ov .fw-top{height:var(--fw-top-h);overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;background:var(--theme-surface,var(--panel))}
#flow-ov .fw-top>*{flex:none}
#flow-ov .fw-top>div[style*="flex:1"]{flex:1;min-width:12px}
#flow-ov .fw-back{padding:0;font:inherit}
#flow-ov .fw-btn{white-space:nowrap}
#flow-ov #fw-vp{inset:var(--fw-top-h) 0 0;background:var(--theme-canvas)}
#flow-ov .fw-node{border-radius:12px;background:var(--theme-surface,var(--panel))}
#fw-aud-ov .fw-aud-card,.fw-pop .fw-pop-card{max-height:calc(100dvh - 116px)}

/* Automacoes */
#page-automacoes{min-width:0}
#page-automacoes #auto-hub{height:auto!important;min-height:calc(100dvh - 64px);max-width:1440px;margin:0 auto;padding:clamp(20px,3vw,36px)!important}
#page-automacoes :is(#auto-pane-ig,#auto-pane-wa)>div[style*="height:calc"]{height:auto!important;min-height:calc(100dvh - 80px)}
#page-automacoes :is(#auto-grid,#wauto-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important;min-width:0}
#page-automacoes .auto-card,#page-automacoes .ch-card{background:var(--theme-surface,var(--panel))!important;box-shadow:none!important;transform:none!important}
#page-automacoes .igm-block{max-width:100%;overflow-x:auto}
#page-automacoes .igm-table{min-width:680px}
#page-automacoes .auto-tabs{max-width:100%;overflow-x:auto}

/* Produtos */
#page-produtos .pr-hero-media::after,#page-produtos .pr-card.pr-featured::before{display:none!important}
#page-produtos .pr-hero-media{aspect-ratio:16/10;min-height:0}
#page-produtos .pr-hero-media img,#page-produtos .pr-card-media img{width:100%;height:100%;object-fit:cover}
#page-produtos .pr-card-media{aspect-ratio:16/9}
#page-produtos .pr-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
#page-produtos .pr-card{background:var(--theme-surface,var(--panel));box-shadow:none}
#page-produtos .pr-card:hover{transform:none;border-color:var(--line-strong)}
#page-produtos .pr-card:hover .pr-card-media img{transform:none}
#page-produtos .pr-cta{background:var(--accent-deep);color:var(--on-accent,#fff);box-shadow:none}
#page-produtos .pr-card.pr-featured .pr-card-badge{background:var(--accent-deep);color:var(--on-accent,#fff)}

/* Meta Ads */
#page-meta-ads .ma-wrap{max-width:1440px;padding:clamp(20px,3vw,36px) clamp(16px,3vw,36px) 60px}
#page-meta-ads .ma-kpis[aria-busy="true"]{cursor:progress}
#page-meta-ads .ma-table-scroll{max-width:100%;overflow-x:auto}
#page-meta-ads table.ma-tbl{min-width:720px}
#page-meta-ads .ma-empty.surface-state{padding:28px;min-height:140px}
#page-meta-ads .ma-empty.surface-state button{margin-top:4px}

/* Agenda */
#page-agendamento{height:calc(100dvh - 0px)}
#page-agendamento .ag-shell{height:calc(100dvh - 84px);min-height:520px}
#page-agendamento .ag-side{width:248px}
#page-agendamento .ag-main{background:var(--theme-canvas)}
#page-agendamento .ag-error strong{color:var(--text);font-size:15px}
#page-agendamento .ag-modal{max-height:92dvh;overflow:auto}

/* Tracking e vendas */
#page-vendas{min-width:0}
#page-vendas>header.glass{gap:16px;flex-wrap:wrap}
#page-vendas>header.glass>div:last-child{min-width:0;flex-wrap:wrap;justify-content:flex-end}
#page-vendas .trk-tabsbar{top:72px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
#page-vendas .trk-tab-btn{flex:none;transform:none}
#page-vendas :is(.trk-tab-panel,.trk-pad,.max-w-\[1440px\]){min-width:0}
#page-vendas .overflow-x-auto{max-width:100%;overflow-x:auto}
#page-vendas table{min-width:720px}
#page-vendas #v-trk-table .surface-state{border:0;border-radius:0}

@media(max-width:767px){
  #page-campanhas>header.glass,#page-vendas>header.glass{align-items:flex-start!important}
  #page-campanhas>header.glass .crm-toolbar-btn{width:100%;justify-content:center}
  #flow-ov{--fw-top-h:64px}
  #flow-ov .fw-top{gap:8px;padding:0 10px}
  #flow-ov .fw-title small,#flow-ov .fw-hint,#flow-ov #fw-savemsg{display:none}
  #flow-ov .fw-btn{height:38px;padding:0 11px}
  #fw-aud-ov .fw-aud-card,.fw-pop .fw-pop-card{margin-top:72px;max-height:calc(100dvh - 84px);padding:17px}
  #page-automacoes .auto-card>div[style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
  #page-produtos .pr-wrap{padding:22px 16px 48px}
  #page-produtos .pr-hero{grid-template-columns:1fr;border-radius:14px}
  #page-produtos .pr-hero-body{padding:24px 20px 26px}
  #page-meta-ads .ma-controls{width:100%;align-items:flex-start}
  #page-meta-ads .ma-periods{max-width:100%;overflow-x:auto}
  #page-agendamento .ag-shell{height:calc(100dvh - 64px);min-height:440px}
  #page-agendamento .ag-side{display:none}
  #page-agendamento .ag-toolbar{padding:10px 12px;align-items:flex-start}
  #page-agendamento .ag-tb-left,#page-agendamento .ag-tb-right{width:100%;justify-content:space-between}
  #page-agendamento .ag-period{max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #page-agendamento .ag-view-toggle{flex:1}
  #page-agendamento .ag-view-opt{flex:1;padding:7px 10px}
  #page-vendas>header.glass>div:last-child{width:100%;justify-content:flex-start}
  #page-vendas .trk-field{width:100%;justify-content:space-between}
  #page-vendas .trk-select{max-width:70%}
  #page-vendas #customDateRangeVendas{width:100%;flex-wrap:wrap}
  #page-vendas .trk-tabsbar{top:112px;padding:10px 14px}
  #page-vendas .trk-pad,#page-vendas .max-w-\[1440px\]{padding-left:16px!important;padding-right:16px!important}
}

@media(max-width:420px){
  #page-campanhas .camp-card{padding:15px}
  #flow-ov .fw-title{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #flow-ov .fw-node{width:260px}
  #fw-aud-ov .fw-aud-tabs{overflow-x:auto}
  #fw-aud-ov .fw-aud-tabs button{flex:none;padding:0 10px}
  #page-automacoes #auto-hub{padding:18px 14px!important}
  #page-produtos .pr-head{align-items:flex-start}
  #page-produtos .pr-headbadge{white-space:normal}
  #page-meta-ads .ma-kpis{grid-template-columns:1fr}
  #page-meta-ads .ma-period{padding:7px 10px}
  #page-agendamento .ag-today-btn{padding:8px 10px}
  #page-agendamento .ag-period{font-size:14px}
  #page-agendamento .ag-field-row{flex-direction:column}
  #page-agendamento .ag-modal-foot{align-items:stretch;gap:10px}
  #page-vendas .trk-tabsbar{top:120px}
  #page-vendas .trk-tab-btn{padding:9px 12px}
}

/* FRONTEND WAVE 2 · FAMILY 3
   Administracao, credenciais, configuracoes, canais, agentes e contextos. */
:is(
  #page-channels,#page-agents,#page-configuracoes,#page-own-agencias,#page-contas,
  #page-own-faturamento,#page-own-chaves,#page-own-equipe,#page-own-config,
  #page-agc-subcontas,#page-agc-faturamento,#page-agc-chaves,#page-agc-config,#page-account-chaves
) .surface-state{
  grid-column:1/-1;
  display:grid;
  place-content:center;
  gap:8px;
  width:100%;
  min-height:150px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--theme-surface,var(--panel));
  color:var(--dim);
  text-align:center;
  box-sizing:border-box;
}
:is(
  #page-channels,#page-agents,#page-configuracoes,#page-contas,#page-own-faturamento,
  #page-own-equipe,#page-agc-faturamento
) .surface-state strong{color:var(--text)}
:is(
  #page-channels,#page-agents,#page-configuracoes,#page-contas,#page-own-faturamento,
  #page-own-equipe,#page-agc-faturamento
) .surface-state.is-error{color:var(--bad)}
:is(
  #page-channels,#page-agents,#page-configuracoes,#page-contas,#page-own-faturamento,
  #page-own-equipe,#page-agc-faturamento
) .surface-state button{
  justify-self:center;
  min-height:38px;
  padding:8px 13px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:var(--raised);
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

/* Canais */
#page-channels{min-width:0}
#page-channels>header.glass{gap:16px;flex-wrap:wrap}
#page-channels>header.glass>div:last-child{min-width:0;flex-wrap:wrap;justify-content:flex-end}
#page-channels>.max-w-\[1440px\]{width:min(100%,1440px);box-sizing:border-box}
#page-channels .channels-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important}
#page-channels .ch-card{background:var(--theme-surface,var(--panel))!important;box-shadow:none!important;transform:none!important}
#page-channels .ch-card:hover{border-color:var(--line-strong)!important;background:var(--raised)!important;transform:none!important}
#page-channels .ch-display,#page-channels .ch-stat-num{color:var(--text)!important}
#page-channels :is(.ch-username,.ch-bio,.ch-stat-lbl,.ch-meta-row){color:var(--dim)!important}
#page-channels .ch-meta-row b{color:var(--text)!important}
#page-channels .ch-phone-row{background:var(--raised)!important;border-color:var(--line)!important;color:var(--text)!important}
#page-channels .ch-phone-copy{color:var(--dim)!important}

/* Agentes e equipe */
#page-agents{min-width:0}
#page-agents>.max-w-\[1440px\]{width:min(100%,1440px);box-sizing:border-box}
#page-agents .naia-hero,#page-agents .team-card{background:var(--theme-surface,var(--panel));box-shadow:none;transform:none}
#page-agents .naia-hero:hover,#page-agents .team-card:hover{transform:none;border-color:var(--line-strong)}
#page-agents .team-card::before{width:1px}
#page-agents .team-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))}
#page-agents .naia-hero-avatar{border-width:1px}
#page-agents .team-avatar-initial{color:var(--text);background:var(--raised)}
#team-bio-modal .team-bio-modal-card{width:min(600px,calc(100vw - 28px));max-height:90dvh;overflow:auto;background:var(--theme-surface,var(--panel))}

/* Configuracoes e chaves */
#page-configuracoes .cfg-wrap{max-width:1180px;padding:clamp(22px,3vw,36px) clamp(16px,3vw,32px) 70px}
#page-configuracoes .cfg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#page-configuracoes :is(.cfg-card,.cfg-oauth-card,.aw-panel,.aw-modal-box){background:var(--theme-surface,var(--panel))}
#page-configuracoes :is(.cfg-save,.cfg-oauth-btn,.aw-confirm){background:var(--accent-deep);color:var(--on-accent,#fff)}
#page-configuracoes .aw-panel{max-width:100%;overflow-x:auto}
#page-configuracoes table.aw-tbl{min-width:680px}
#page-configuracoes .aw-modal{padding:16px}
#page-configuracoes .aw-modal-box{max-height:90dvh;overflow:auto}

/* Owner, agencia e subconta */
:is(
  #page-own-faturamento,#page-own-chaves,#page-own-equipe,#page-own-config,
  #page-agc-faturamento,#page-agc-chaves,#page-agc-config,#page-account-chaves
) .bill-wrap,
#page-contas .owner-accounts-wrap,
#page-agc-subcontas .ctxp-wrap{
  width:min(100%,1200px);
  margin:0 auto;
  padding:clamp(24px,4vw,48px);
  box-sizing:border-box;
}
:is(
  #page-own-faturamento,#page-own-chaves,#page-own-equipe,#page-own-config,
  #page-agc-faturamento,#page-agc-chaves,#page-agc-config,#page-account-chaves
) .bill-wrap>h1,
#page-contas .owner-accounts-head h1,
#page-agc-subcontas .ctxp-head h1{font-size:clamp(26px,3vw,34px)!important;letter-spacing:-.03em;line-height:1.15}
:is(.bill-card,.bill-stat,.ctxp-card,.owner-account-agency){background:var(--theme-surface,var(--panel));border-color:var(--line);box-shadow:none}
.bill-card{max-width:100%;overflow-x:auto}
.bill-table{min-width:680px}
.ctxp-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.ctxp-card-new{border-width:1px}
.ctxp-btn.primary,.bill-btn{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-accent,#fff)}
.owner-account-row{grid-template-columns:minmax(0,1fr) auto auto}
.ctx-modal-box{background:var(--theme-surface,var(--panel));border-color:var(--line-strong);max-height:90dvh}
.ctx-modal-x{min-width:40px;min-height:40px;border:0;background:transparent;color:var(--dim);font-size:24px;cursor:pointer}

@media(max-width:767px){
  #page-channels>header.glass{align-items:flex-start!important}
  #page-channels>header.glass>div:last-child{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  #page-channels>header.glass>div:last-child .btn{flex:none;white-space:nowrap}
  #page-channels #cn-period-bar{align-items:flex-start!important}
  #page-channels #cn-custom-range{display:grid!important;grid-template-columns:1fr auto 1fr auto}
  #page-agents .naia-hero{padding:22px;gap:18px}
  #page-agents .naia-hero-avatar{width:96px;height:96px;flex-basis:96px}
  #page-configuracoes .cfg-grid{grid-template-columns:1fr}
  #page-configuracoes .cfg-head{align-items:flex-start}
  #page-configuracoes .cfg-row{flex-wrap:wrap}
  #page-configuracoes .cfg-save{min-height:42px}
  .owner-account-row{grid-template-columns:minmax(0,1fr) auto}
  .owner-account-enter{grid-column:1/-1;width:100%}
}

@media(max-width:420px){
  #page-channels #cn-custom-range{grid-template-columns:1fr 1fr}
  #page-channels #cn-custom-range span{display:none}
  #page-agents .naia-hero{align-items:flex-start;flex-direction:column}
  #page-agents .team-card{padding:16px;gap:12px}
  #page-agents .team-avatar{width:52px;height:52px;flex-basis:52px}
  #page-configuracoes .cfg-row>*{flex:1 1 100%}
  #page-configuracoes .cfg-del{min-height:40px;width:100%}
  .ctxp-head{align-items:stretch}
  .ctxp-head .bill-btn{width:100%}
  .ctx-modal-box{padding:18px}
  .ctxm-row{grid-template-columns:1fr!important;display:grid!important}
}

@media (max-width:1100px){
  #page-dashboard #currentDate{ display:none; }
}

@media (max-width:767px){
  .page > header.glass{
    padding:12px 14px 12px 68px !important;
    gap:10px;
    flex-wrap:wrap;
  }
  .page > header.glass > div{ min-width:0; flex-wrap:wrap; }
  .agents-grid,.ctxp-grid,.bill-grid{ grid-template-columns:minmax(0,1fr); }
  .detail-stats{ grid-template-columns:minmax(0,1fr); }
  .modal-overlay{ padding:12px; align-items:flex-end; }
  .modal{ max-height:calc(100dvh - 24px); padding:22px 18px; border-radius:14px; }
  .toast{ left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); text-align:center; }
  input,select,textarea{ font-size:16px !important; }
}

/* Conversas: desktop em duas colunas; mobile em master/detail real. */
#page-conversas .conv-layout{
  grid-template-columns:minmax(300px,340px) minmax(0,1fr) !important;
  height:calc(100dvh - 80px) !important;
  min-width:0;
}
#page-conversas > header .cs-root:has(#conv-channel){
  width:100%;
  max-width:340px;
  margin-left:8px;
}
#page-conversas > header .cvtag-bar .cs-root{ width:100%; max-width:200px; }
#page-conversas #conv-list,
#page-conversas #conv-thread{ min-width:0; min-height:0; }
#conv-mobile-back{ display:none; }

@media (max-width:767px){
  #page-conversas.active{
    display:flex;
    flex-direction:column;
    height:calc(100dvh - 64px - env(safe-area-inset-top));
    overflow:hidden;
  }
  #page-conversas > header{
    position:relative;
    flex:0 0 auto;
    padding:10px 12px 10px 68px !important;
  }
  #page-conversas > header > .flex:first-child{
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr);
    flex:0 0 100%;
    width:100%;
    gap:8px 10px;
  }
  #page-conversas > header #conv-channel,
  #page-conversas > header .cvtag-bar{
    grid-column:1 / -1;
    width:100%;
    max-width:none !important;
    margin-left:0 !important;
  }
  #page-conversas > header .cs-root:has(#conv-channel){
    grid-column:1 / -1;
    width:100%;
    max-width:none;
    margin-left:0;
  }
  #page-conversas > header .cvtag-bar .cs-root{ max-width:none; }
  #page-conversas > header #conv-channel{ width:100% !important; min-width:0; }
  #page-conversas > header .cvtag-bar{ display:grid; grid-template-columns:minmax(0,1fr) auto; }
  #page-conversas > header .cvtag-bar > select{ width:100% !important; max-width:none !important; min-width:0; }
  #page-conversas > header > .flex:last-child{
    position:absolute;
    top:10px;
    right:12px;
    width:auto;
    justify-content:flex-end;
  }
  #page-conversas > header #conv-status{ display:none; }
  #page-conversas .conv-layout{
    display:block !important;
    flex:1;
    height:auto !important;
    min-height:0;
  }
  #page-conversas #conv-list{
    display:block !important;
    width:100%;
    height:100%;
    border-right:0 !important;
  }
  #page-conversas #conv-thread{
    display:none !important;
    width:100%;
    height:100%;
  }
  #page-conversas.conv-thread-open > header{ display:none !important; }
  #page-conversas.conv-thread-open #conv-list{ display:none !important; }
  #page-conversas.conv-thread-open #conv-thread{ display:flex !important; }
  #page-conversas #conv-thread-header{
    padding:10px 12px !important;
    min-height:64px;
  }
  #page-conversas #conv-thread-header > div{
    flex-wrap:wrap;
    gap:8px !important;
  }
  #page-conversas #conv-thread-header > div > div:nth-child(2) b{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #page-conversas #conv-thread-header > div > div:nth-child(2) > span:not(#conv-head-tags),
  #page-conversas #conv-head-tags{ display:none !important; }
  #conv-mobile-back{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    padding:0;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--panel-2);
    color:var(--text);
    font-size:20px;
  }
  #conv-tag-btn,#conv-del-btn,#conv-iphone-btn{
    width:44px;
    height:44px;
    padding:0;
    margin-right:0;
    justify-content:center;
    font-size:0;
  }
  #conv-tag-btn svg,#conv-del-btn svg,#conv-iphone-btn svg{ width:17px; height:17px; }
  #page-conversas #conv-msgs{ padding:14px 12px !important; }
  #page-conversas .conv-bubble-row{ max-width:88%; }
  #page-conversas #conv-input-wrap{
    padding:10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  #page-conversas #conv-input-form{
    flex-wrap:wrap;
    gap:7px !important;
  }
  #page-conversas #conv-input-text{ min-width:112px; }
  #page-conversas #conv-input-form .btn{ min-width:44px; padding-inline:11px; }
  #page-conversas #conv-input-wrap small{ display:block; margin-top:7px; line-height:1.4; }
}

@media (pointer:coarse){
  :where(button,[role="button"],a,input,select){ min-height:44px; }
  .nav-item{ min-height:44px; }
}

/* WAVE 2 — correcoes P1 verificadas em dark/light e 360/430px. */
[data-theme="light"] #page-automacoes #auto-hub > p,
[data-theme="light"] #page-automacoes #auto-hub .glass > div:nth-child(3),
[data-theme="light"] #page-channels .ch-empty p[style*="rgba(255,255,255,0.4)"],
[data-theme="light"] #page-ig-metrics #igm-overview > div[style*="grid-column"]{
  color:var(--dim) !important;
}
[data-theme="light"] #page-automacoes #auto-hub .glass > div:nth-child(2){ color:var(--text) !important; }
[data-theme="light"] #page-prospeccao header .btn-primary span{ color:#fff !important; }
[data-theme="light"] #dnew-root{ --dn-live:#15803d; }

#page-estudio #est-preview-empty{ color:#cbd5e1 !important; }
[data-theme="light"] #page-estudio header .crm-toolbar-btn:not(.primary){
  color:var(--dim) !important;
  background:var(--panel-2) !important;
  border-color:var(--line-strong) !important;
}

[data-theme="light"] #bk-tabbar{ background:var(--panel) !important; }
[data-theme="light"] #bk-tabbar .bk-tab:not(.active){
  color:var(--dim) !important;
  border-color:var(--line-strong) !important;
}
[data-theme="light"] #bk-tabbar .bk-tab.active{
  background:var(--accent-deep) !important;
  color:#fff !important;
}
[data-theme="light"] .ag-mini-day.out{ color:var(--dim); opacity:1; }

[data-theme="light"] :is(
  #page-faturamento,#page-minha-conta,#page-own-agencias,#page-contas,#page-own-faturamento,
  #page-own-chaves,#page-own-equipe,#page-own-config,#page-own-manual,
  #page-agc-subcontas,#page-agc-faturamento,#page-agc-config
) :is(.bill-wrap,.ctxp-wrap,.owner-accounts-wrap) p{
  color:var(--dim) !important;
}
[data-theme="light"] :is(
  #page-faturamento,#page-minha-conta,#page-own-faturamento,#page-own-chaves,
  #page-own-equipe,#page-own-config,#page-own-manual,#page-agc-faturamento,#page-agc-config
) [style*="color:#9fb3d1"]{
  color:var(--dim) !important;
}

@media (max-width:767px){
  #page-channels #cn-period-bar{ min-width:0; }
  #page-channels #cn-periods{
    display:flex;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    box-sizing:border-box;
  }
  #page-channels #cn-periods::-webkit-scrollbar{ display:none; }
  #page-channels .cn-period{ flex:0 0 auto; }
  #page-channels #cn-custom-range{ width:100%; flex-wrap:wrap; }
  #page-channels #cn-usage-summary{ width:100%; margin-left:0 !important; text-align:right; }
  #bk-tabbar{
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
  }
  #bk-tabbar::-webkit-scrollbar{ display:none; }
  #bk-tabbar .bk-tab{ flex:0 0 auto; }
}
@media (max-width:420px){
  #page-contatos .ct-daterow{ grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}



/* source-style-block:2:2e705b577f018d78bd8fca95f12374c94d74109e75ff49f74593c69c21692434 */

    /* Kanban */
    .crm-toolbar { display:flex; align-items:center; gap:10px; padding:14px 20px; flex-wrap:wrap;
      background:rgba(20,22,38,0.75); border-bottom:1px solid rgba(255,255,255,0.06); position:sticky; top:0; z-index:30; }
    .crm-pipeline-tabs { display:flex; gap:6px; flex-wrap:wrap; }
    .crm-pipe-tab { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
      background:rgba(255,255,255,0.04); color:#cdd2e8; font-size:13px; font-weight:500; cursor:pointer;
      border:1px solid rgba(255,255,255,0.06); transition:all .15s; user-select:none; }
    .crm-pipe-tab:hover { background:rgba(255,255,255,0.08); }
    .crm-pipe-tab.active { background:rgba(124,138,255,0.18); border-color:rgba(124,138,255,0.4); color:#fff; }
    .crm-pipe-tab .pipe-dot { width:8px; height:8px; border-radius:50%; }
    .crm-pipe-tab .pipe-badge { font-size:11px; opacity:.7; }
    .crm-toolbar-btn { padding:7px 14px; border-radius:8px; background:rgba(255,255,255,0.06); color:#cdd2e8;
      font-size:12.5px; font-weight:500; border:1px solid rgba(255,255,255,0.08); cursor:pointer; display:inline-flex;
      align-items:center; gap:6px; transition:all .15s; }
    .crm-toolbar-btn:hover { background:rgba(255,255,255,0.10); color:#fff; }
    .crm-toolbar-btn.primary { background:var(--panel-2, #111824); color:#fff; border:0; }
    .crm-board-wrap { display:flex; overflow-x:auto; padding:20px; gap:14px; min-height:calc(100vh - 160px);
      align-items:flex-start; }
    .crm-column { flex:0 0 300px; width:300px; min-width:300px; max-width:300px;
      background:rgba(28,30,46,0.65); border:1px solid rgba(255,255,255,0.05);
      border-radius:12px; display:flex; flex-direction:column; max-height:calc(100vh - 200px); box-sizing:border-box;
      position:relative; overflow:hidden; }
    .crm-column::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
      background:var(--panel-2, #111824);
      z-index:2; pointer-events:none;
      animation: pipeShimmer 5.5s ease-in-out infinite; }
    .crm-card-cover { height:3px; background:var(--panel-2, #111824);
      animation: pipeShimmer 5.5s ease-in-out infinite; }
    .crm-card-tag.client { background:rgba(124,138,255,0.20); color:#a9b2ff; }
    .crm-card-tag.user { background:rgba(255,255,255,0.06); color:#cdd2e8; text-transform:none;
      letter-spacing:0; font-weight:500; font-size:10px; }
    .crm-card-toprow { display:flex; gap:8px; align-items:flex-start; }
    .crm-card-titlerow { flex:1; min-width:0; display:flex; gap:9px; align-items:flex-start; }
    .crm-card-titlecol { flex:1; min-width:0; }
    .crm-card-badges-right { display:flex; flex-direction:column; gap:3px; align-items:flex-end; flex-shrink:0; max-width:46%; }
    .crm-card-badges-right .crm-card-tag { white-space:nowrap; }
    .crm-card-source { font-size:11px; color:#9aa1c4; display:inline-flex; align-items:center; gap:4px;
      margin-top:2px; opacity:.85; }
    .crm-card-source svg { flex-shrink:0; }
    .crm-card-igmeta { display:flex; align-items:center; gap:6px; margin-top:3px; flex-wrap:wrap; }
    .crm-ig-handle { font-size:11px; color:#e879f9; font-weight:600; text-decoration:none; }
    .crm-ig-handle:hover { color:#f0abfc; text-decoration:underline; }
    .crm-ig-verified { width:11px; height:11px; flex-shrink:0; vertical-align:-1px; }
    .crm-ig-followers { font-size:10px; padding:1px 5px; border-radius:8px;
      background:rgba(232,121,249,0.10); color:#e9d5ff; }
    .crm-card-bio { font-size:10.5px; color:#9aa1c4; line-height:1.35; margin-top:4px;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
      overflow:hidden; max-height:30px; opacity:.85; }
    .crm-card-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .crm-card-sale { margin-top:8px; padding:6px 8px; background:rgba(76,175,80,0.10);
      border:1px solid rgba(76,175,80,0.18); border-radius:6px;
      display:flex; gap:8px; align-items:flex-start; }
    .crm-card-sale-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
    .crm-card-sale-value { color:#7ee08a; font-weight:700; font-size:12.5px; }
    .crm-card-sale-prod { color:#9aa1c4; font-size:10.5px; line-height:1.3;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .crm-card-channels-overlay { display:flex; gap:3px; flex-shrink:0; flex-wrap:wrap; max-width:74px;
      justify-content:flex-end; }
    .crm-card-channels-overlay .crm-ch { width:22px; height:22px; background:rgba(0,0,0,0.22);
      border-radius:5px; }
    .crm-card-channels-overlay .crm-ch svg { width:12px; height:12px; }
    .crm-card-channels-row { display:flex; gap:6px; margin-top:8px; padding-top:8px;
      border-top:1px solid rgba(255,255,255,0.05); }
    .crm-card-meta { display:flex; gap:8px; margin-top:6px; font-size:10.5px; color:#7f87ae;
      align-items:center; }
    .crm-card-meta .crm-card-due.overdue { color:#ff8a80; font-weight:600; }
    .crm-ch { width:24px; height:24px; border-radius:6px; display:inline-flex; align-items:center;
      justify-content:center; background:rgba(255,255,255,0.04); transition:all .15s; cursor:pointer; }
    .crm-ch:hover { background:rgba(255,255,255,0.10); transform:translateY(-1px); }
    .crm-ch svg { width:14px; height:14px; }
    .crm-ch.email { color:#9aa1c4; }
    .crm-card-avatar { width:32px; height:32px; }
    @keyframes pipeShimmer {
      0%   { background-position: -50% 0, 0 0; }
      55%  { background-position: 150% 0, 0 0; }
      100% { background-position: 150% 0, 0 0; }
    }
    .crm-col-head { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.05); display:flex; align-items:center;
      gap:8px; position:relative; background:var(--col-color-soft, transparent); }
    .crm-col-head input.col-name { background:transparent; border:0; color:#fff; font-weight:600; font-size:14px;
      flex:1; padding:4px 6px; border-radius:4px; }
    .crm-col-head input.col-name:focus { background:rgba(255,255,255,0.06); outline:none; }
    .crm-col-count { font-size:11px; padding:2px 7px; border-radius:10px; background:rgba(255,255,255,0.08);
      color:#cdd2e8; font-weight:500; }
    .crm-col-menu { color:#9aa1c4; cursor:pointer; padding:4px; border-radius:6px; }
    .crm-col-menu:hover { background:rgba(255,255,255,0.08); color:#fff; }
    .crm-col-cards { flex:1; padding:10px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
      min-height:50px; }
    .crm-col-cards::-webkit-scrollbar { width:8px; }
    .crm-col-cards::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:4px; }
    .crm-card { background:#1b1e2e; border:1px solid rgba(255,255,255,0.05); border-radius:8px; padding:0;
      cursor:grab; transition:all .15s; overflow:hidden; flex-shrink:0; min-height:54px;
      content-visibility:auto; contain-intrinsic-size:auto 90px; }
    .crm-card:hover { border-color:rgba(124,138,255,0.4); transform:translateY(-1px); box-shadow:0 1px 3px rgba(0,0,0,.18); }
    .crm-card.sortable-ghost { opacity:.35; }
    .crm-card.sortable-drag { cursor:grabbing; box-shadow:0 1px 3px rgba(0,0,0,.18); }
    .crm-card-body { padding:10px 12px; }
    .crm-card-tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
    .crm-card-tag { font-size:10px; padding:2px 8px; border-radius:10px; background:rgba(124,138,255,0.16);
      color:#a9b2ff; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
    .crm-card-tag.won { background:rgba(76,175,80,0.18); color:#7ee08a; }
    .crm-card-tag.lost { background:rgba(244,67,54,0.18); color:#ff8a80; }
    .crm-card-tag.overdue { background:rgba(244,67,54,0.18); color:#ff8a80; }
    .crm-card-title { color:#fff; font-size:13.5px; line-height:1.35; font-weight:500; margin-bottom:8px;
      word-break:break-word; }
    .crm-card-contact { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .crm-card-avatar { width:24px; height:24px; border-radius:50%; background:var(--panel-2, #111824);
      color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:600;
      flex-shrink:0; }
    .crm-card-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
    .crm-card-contact-text { font-size:11.5px; color:#9aa1c4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .crm-card-footer { display:flex; align-items:center; gap:12px; font-size:11px; color:#9aa1c4; flex-wrap:wrap; }
    .crm-card-footer .meta { display:inline-flex; align-items:center; gap:3px; }
    .crm-card-footer .meta svg { width:12px; height:12px; }
    .crm-card-value { font-size:11.5px; color:#7ee08a; font-weight:600; }
    .crm-card-value.zero { color:#9aa1c4; font-weight:400; }
    .crm-card-due { color:#9aa1c4; }
    .crm-card-due.overdue { color:#ff8a80; font-weight:600; }
    .crm-col-add { padding:10px 12px; border-top:1px solid rgba(255,255,255,0.04);
      color:#9aa1c4; font-size:12px; cursor:pointer; display:flex; align-items:center; gap:6px;
      border-radius:0 0 12px 12px; transition:all .15s; }
    .crm-col-add:hover { background:rgba(255,255,255,0.04); color:#fff; }
    .crm-add-column { flex:0 0 290px; background:rgba(28,30,46,0.35); border:1px dashed rgba(255,255,255,0.10);
      border-radius:12px; padding:14px; color:#9aa1c4; font-size:13px; cursor:pointer; display:flex; align-items:center;
      justify-content:center; gap:6px; min-height:80px; transition:all .15s; }
    .crm-add-column:hover { background:rgba(124,138,255,0.08); color:#fff; border-color:rgba(124,138,255,0.5); }
    /* Card modal */
    .crm-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:1000; display:none;
      align-items:center; justify-content:center; padding:20px; }
    .crm-modal-overlay.open { display:flex; }
    .crm-modal { background:#1b1e2e; border:1px solid rgba(255,255,255,0.08); border-radius:14px;
      width:100%; max-width:780px; max-height:90vh; overflow-y:auto; padding:0; }
    .crm-modal-cover { height:48px; background:var(--panel-2, #111824); }
    .crm-modal-body { padding:20px 24px 24px; }
    .crm-modal-title { color:#fff; font-size:20px; font-weight:600; margin-bottom:4px; padding:8px; border:0;
      background:transparent; width:100%; border-radius:6px; }
    .crm-modal-title:focus { background:rgba(255,255,255,0.04); outline:none; }
    .crm-modal-sub { color:#9aa1c4; font-size:13px; margin:0 8px 18px; }
    .crm-modal-grid { display:grid; grid-template-columns:1fr 220px; gap:20px; }
    .crm-modal-section { margin-bottom:22px; }
    .crm-modal-section h3 { color:#cdd2e8; font-size:11.5px; font-weight:600; text-transform:uppercase;
      letter-spacing:.6px; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
    .crm-modal-section h3 svg { width:14px; height:14px; }
    .crm-form-row { display:flex; gap:10px; margin-bottom:10px; align-items:center; }
    .crm-form-row label { color:#9aa1c4; font-size:12px; min-width:80px; }
    .crm-input, .crm-textarea, .crm-select { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
      color:#fff; padding:8px 12px; border-radius:8px; font-size:13px; width:100%; }
    .crm-textarea { min-height:90px; resize:vertical; font-family:inherit; }
    .crm-input:focus, .crm-textarea:focus, .crm-select:focus { outline:none; border-color:#7c8aff; }
    .crm-side-btn { display:flex; align-items:center; gap:8px; padding:8px 12px; width:100%; background:rgba(255,255,255,0.04);
      border:0; color:#cdd2e8; font-size:12.5px; border-radius:6px; cursor:pointer; margin-bottom:6px; }
    .crm-side-btn:hover { background:rgba(255,255,255,0.08); color:#fff; }
    .crm-side-btn svg { width:14px; height:14px; }
    .crm-side-btn.danger { color:#ff8a80; }
    .crm-side-btn.danger:hover { background:rgba(244,67,54,0.15); }
    /* Modal contact card */
    .ccm-contact-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05);
      border-radius:10px; padding:14px; }
    .ccm-contact-empty { color:#7f87ae; font-size:13px; text-align:center; padding:18px; }
    .ccm-contact-head { display:flex; gap:14px; align-items:center; margin-bottom:12px; }
    .ccm-contact-avatar { width:60px; height:60px; border-radius:50%; flex-shrink:0;
      background:var(--panel-2, #111824); color:#fff; font-size:22px; font-weight:600;
      display:flex; align-items:center; justify-content:center; }
    .ccm-contact-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
    .ccm-contact-name { color:#fff; font-size:17px; font-weight:600; line-height:1.2; }
    .ccm-contact-biz { color:#a9b2ff; font-size:12.5px; margin-top:2px; }
    .ccm-contact-rows { display:grid; grid-template-columns:1fr; gap:8px; margin-top:8px; }
    .ccm-contact-row { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#cdd2e8;
      padding:6px 8px; background:rgba(255,255,255,0.03); border-radius:6px; }
    .ccm-contact-row a { color:inherit; text-decoration:none; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ccm-contact-row a:hover { color:#fff; text-decoration:underline; }
    .ccm-contact-row .row-ico { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
    .ccm-channels-big { display:flex; gap:8px; margin-top:12px; }
    .ccm-ch-big { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
      background:rgba(255,255,255,0.05); transition:all .15s; text-decoration:none; }
    .ccm-ch-big:hover { background:rgba(255,255,255,0.10); transform:translateY(-1px); box-shadow:0 1px 3px rgba(0,0,0,.18); }
    .ccm-ch-big svg { width:22px; height:22px; }
    .ccm-section-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
    .ccm-section-label { display:block; color:#9aa1c4; font-size:10.5px; font-weight:600;
      text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; width:100%; }
    .ccm-pill { font-size:11px; padding:3px 9px; border-radius:10px; background:rgba(124,138,255,0.14);
      color:#a9b2ff; font-weight:500; }
    .ccm-pill.source { background:rgba(255,255,255,0.06); color:#cdd2e8; }
    .ccm-pill.system { background:rgba(76,175,80,0.18); color:#7ee08a; }
    .ccm-contact-open-btn { margin-top:12px; display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
      background:rgba(124,138,255,0.16); color:#a9b2ff; border:0; border-radius:8px; font-size:12.5px;
      cursor:pointer; transition:all .15s; }
    .ccm-contact-open-btn:hover { background:rgba(124,138,255,0.28); color:#fff; }
    /* Sale card */
    .ccm-sale-card { background:var(--panel-2, #111824);
      border:1px solid rgba(76,175,80,0.25); border-radius:10px; padding:14px; }
    .ccm-sale-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
    .ccm-sale-value { color:#7ee08a; font-size:24px; font-weight:700; letter-spacing:-.5px; }
    .ccm-sale-when { color:#9aa1c4; font-size:11.5px; }
    .ccm-sale-prod { color:#fff; font-size:13.5px; font-weight:500; line-height:1.35; }
    .ccm-sale-platform { color:#a9b2ff; font-size:11.5px; margin-top:6px; display:inline-flex; align-items:center; gap:4px; }
    .crm-activity { background:rgba(255,255,255,0.03); border-radius:8px; padding:12px;
      max-height:280px; overflow-y:auto; }
    .crm-activity-item { display:flex; gap:10px; margin-bottom:10px; }
    .crm-activity-item:last-child { margin-bottom:0; }
    .crm-activity-dot { width:6px; height:6px; border-radius:50%; background:#7c8aff; margin-top:7px; flex-shrink:0; }
    .crm-activity-text { color:#cdd2e8; font-size:12px; line-height:1.5; flex:1; }
    .crm-activity-when { color:#7f87ae; font-size:11px; }
    /* Column popover */
    .crm-popover { position:fixed; background:#22253a; border:1px solid rgba(255,255,255,0.08); border-radius:8px;
      padding:6px; min-width:180px; box-shadow:0 1px 3px rgba(0,0,0,.18); z-index:900; }
    .crm-popover button { display:block; width:100%; text-align:left; padding:8px 10px; background:transparent; border:0;
      color:#cdd2e8; font-size:12.5px; cursor:pointer; border-radius:6px; }
    .crm-popover button:hover { background:rgba(255,255,255,0.06); color:#fff; }
    .crm-popover button.danger { color:#ff8a80; }
    .crm-popover button.danger:hover { background:rgba(244,67,54,0.12); }
    .crm-color-swatches { display:flex; gap:6px; padding:4px 8px; flex-wrap:wrap; }
    .crm-color-swatches span { width:18px; height:18px; border-radius:6px; cursor:pointer; border:2px solid transparent; }
    .crm-color-swatches span:hover { border-color:#fff; }
    /* ── Seleção múltipla CRM ── */
    .crm-card { position:relative; }
    .crm-card-sel { position:absolute; top:6px; left:6px; z-index:3; display:flex;
      align-items:center; justify-content:center; width:20px; height:20px; cursor:pointer;
      opacity:0; transition:opacity .12s; }
    .crm-card:hover .crm-card-sel, .crm-card-selected .crm-card-sel { opacity:1; }
    .crm-card-sel-cb { width:15px; height:15px; cursor:pointer; accent-color:#7c8aff; margin:0; }
    .crm-card-selected { outline:2px solid #7c8aff; outline-offset:-2px;
      box-shadow:0 1px 3px rgba(0,0,0,.18); }
    .crm-col-selall { cursor:pointer; color:#9aa1c4; font-size:13px; user-select:none;
      padding:0 2px; opacity:.65; }
    .crm-col-selall:hover { color:#7c8aff; opacity:1; }
    /* FASE C 2026-06-11: forecast bar */
    .crm-forecast-bar { display:flex; align-items:center; gap:18px; flex-wrap:wrap;
      padding:11px 22px; background:rgba(124,138,255,0.07);
      border-top:1px solid rgba(124,138,255,0.16); border-bottom:1px solid rgba(124,138,255,0.16); }
    :root:is([data-theme="light"],[data-theme="hybrid"]) .crm-forecast-bar {
      background:var(--panel); border-top-color:var(--line); border-bottom-color:var(--line); }
    .crm-fc-item { display:flex; flex-direction:column; gap:1px; }
    .crm-fc-label { font-size:10.5px; color:var(--dim,#9aa6b8); text-transform:uppercase; letter-spacing:.4px; }
    .crm-fc-value { font-size:16px; font-weight:700; color:var(--text,#eef2f8); letter-spacing:-.3px; }
    .crm-fc-value.weighted { color:var(--info,#4d7cff); }
    .crm-fc-value.won { color:var(--live,#34e89e); }
    .crm-fc-value.lost { color:var(--bad,#ff5d6c); }
    .crm-fc-sep { width:1px; height:30px; background:var(--line,rgba(255,255,255,0.08)); }
    /* win% no header da coluna */
    .crm-col-winprob { font-size:10.5px; font-weight:600; color:#7ee08a;
      background:rgba(126,224,138,0.12); border:1px solid rgba(126,224,138,0.22);
      border-radius:5px; padding:1px 5px; cursor:default; user-select:none; }
    .crm-col-winprob.editable { cursor:pointer; }
    .crm-col-winprob.editable:hover { background:rgba(126,224,138,0.22); }
    /* badge de tempo em etapa no card */
    .crm-card-stage-age { display:inline-flex; align-items:center; gap:3px; font-size:10px;
      color:#9aa1c4; background:rgba(255,255,255,0.05); border-radius:4px; padding:1px 5px; }
    .crm-card-stage-age.stale { color:#ffb74d; background:rgba(255,167,38,0.10); }
  

/* source-style-block:3:26e5f40dc366445fe22fe3d6db7a27ad170591aebc10adfca0966bf6f21d6b6b */

    .crm-pipe-modal { background:#1b1e2e; border:1px solid rgba(255,255,255,0.08); border-radius:14px;
      width:100%; max-width:640px; max-height:90vh; overflow-y:auto; }
    .crm-pipe-modal-head { padding:18px 22px 14px; border-bottom:1px solid rgba(255,255,255,0.06);
      display:flex; align-items:center; justify-content:space-between; }
    .crm-pipe-modal-head h2 { color:#fff; font-size:17px; font-weight:600; margin:0; }
    .crm-pipe-modal-body { padding:18px 22px; }
    .crm-pipe-modal-foot { padding:14px 22px; border-top:1px solid rgba(255,255,255,0.06);
      display:flex; justify-content:space-between; gap:10px; }
    .crm-field { margin-bottom:16px; }
    .crm-field label { display:block; color:#9aa1c4; font-size:11.5px; font-weight:600; text-transform:uppercase;
      letter-spacing:.5px; margin-bottom:6px; }
    .crm-palette { display:flex; flex-wrap:wrap; gap:8px; }
    .crm-palette span { width:30px; height:30px; border-radius:8px; cursor:pointer;
      border:2px solid transparent; transition:transform .12s; }
    .crm-palette span:hover { transform:scale(1.1); }
    .crm-palette span.selected { border-color:#fff; transform:scale(1.1); }
    .crm-col-list { display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto;
      background:rgba(0,0,0,0.18); padding:8px; border-radius:8px; }
    .crm-col-row { display:flex; align-items:center; gap:8px; background:#22253a;
      border:1px solid rgba(255,255,255,0.05); border-radius:8px; padding:8px 10px; position:relative; }
    .crm-col-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
      border-radius:8px 0 0 8px; background:var(--row-color, #7c8aff); }
    .crm-col-row .drag { color:#7f87ae; cursor:grab; padding:0 4px; }
    .crm-col-row .col-input { flex:1; background:transparent; border:0; color:#fff; font-size:13.5px;
      padding:4px 6px; border-radius:4px; }
    .crm-col-row .col-input:focus { background:rgba(255,255,255,0.06); outline:none; }
    .crm-col-row select.win-sel { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
      color:#cdd2e8; font-size:11.5px; padding:4px 8px; border-radius:6px; cursor:pointer; }
    .crm-col-row .color-btn { width:24px; height:24px; border-radius:6px; cursor:pointer; border:1px solid rgba(255,255,255,0.1);
      flex-shrink:0; position:relative; }
    .crm-col-row .del-btn { background:transparent; border:0; color:#9aa1c4; cursor:pointer; padding:4px;
      border-radius:6px; display:flex; }
    .crm-col-row .del-btn:hover { background:rgba(244,67,54,0.18); color:#ff8a80; }
    .crm-mini-popover { position:absolute; top:32px; right:32px; background:#1b1e2e; border:1px solid rgba(255,255,255,0.1);
      border-radius:8px; padding:8px; z-index:1100; display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
      box-shadow:0 1px 3px rgba(0,0,0,.18); }
    .crm-mini-popover span { width:24px; height:24px; border-radius:6px; cursor:pointer; border:2px solid transparent; }
    .crm-mini-popover span:hover { border-color:#fff; }
    .crm-add-col-btn { background:rgba(124,138,255,0.10); border:1px dashed rgba(124,138,255,0.35);
      color:#a9b2ff; padding:9px; border-radius:8px; width:100%; cursor:pointer; font-size:13px;
      display:flex; align-items:center; justify-content:center; gap:6px; transition:all .15s; }
    .crm-add-col-btn:hover { background:rgba(124,138,255,0.18); color:#fff; }
  

/* source-style-block:4:251f2055ce985388299d0288bb6c3734ccedf668e91b05018464741c75419167 */

    .camp-modal { background:#1b1e2e; border:1px solid rgba(255,255,255,0.08); border-radius:14px;
      width:100%; max-width:680px; max-height:92vh; overflow:hidden; display:flex; flex-direction:column; }
    .camp-modal-cover { height:56px; background:var(--panel-2, #111824); position:relative; }
    .camp-modal-cover::after { content:''; position:absolute; inset:0;
      background:var(--panel-2, #111824);
      animation: pipeShimmer 5.5s ease-in-out infinite; }
    .camp-modal-head { padding:14px 22px 12px; display:flex; align-items:center; justify-content:space-between;
      border-bottom:1px solid rgba(255,255,255,0.05); }
    .camp-modal-head h2 { color:#fff; font-size:17px; font-weight:600; margin:0; display:flex; align-items:center; gap:8px; }
    .camp-modal-body { padding:18px 22px; overflow-y:auto; flex:1; }
    .camp-modal-foot { padding:14px 22px; border-top:1px solid rgba(255,255,255,0.06);
      display:flex; gap:10px; align-items:center; }
    .camp-template-preview { background:#0d1117; border:1px solid rgba(255,255,255,0.06);
      border-radius:8px; padding:12px 14px; margin-top:8px; color:#cdd2e8; font-size:13px;
      line-height:1.45; white-space:pre-wrap; font-family:inherit; max-height:180px; overflow-y:auto; }
    .camp-template-preview .var { background:rgba(255,213,79,0.18); color:#ffd54f; padding:0 4px;
      border-radius:3px; font-weight:600; }
    .camp-template-meta { display:flex; gap:8px; font-size:11px; color:#7f87ae; margin-top:6px; }
    .camp-template-meta span { background:rgba(255,255,255,0.05); padding:2px 8px; border-radius:10px; }
    .camp-template-meta span.cat { color:#a9b2ff; }
    .camp-vars { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
    /* ManyChat-style flow */
    .cnm-flow { background:rgba(34,211,238,0.04); border:1px solid rgba(34,211,238,0.18);
      border-radius:10px; padding:14px 16px; }
    .cnm-flow-header { display:flex; align-items:center; margin-bottom:10px; }
    .cnm-flow-button { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
      border-radius:10px; padding:12px 14px; margin-top:10px; }
    .cnm-flow-button-label { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
    .cnm-flow-button-label .btn-chip { background:var(--panel-2, #111824); color:#0a1428;
      padding:4px 12px; border-radius:14px; font-size:11.5px; font-weight:700; letter-spacing:.5px; }
    .cnm-flow-button-label .btn-type { font-size:10.5px; color:#7f87ae; text-transform:uppercase; letter-spacing:1.2px; }
    .cnm-flow-arrow { font-size:13px; color:#22d3ee; margin:6px 0 10px 4px; font-weight:600; }
    .cnm-flow-act-block { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
      border-radius:8px; padding:11px 13px; margin-bottom:8px; }
    .cnm-flow-act-title { font-size:12px; font-weight:600; color:#cdd2e8; margin-bottom:7px;
      letter-spacing:.3px; }
    .cnm-flow-extras { margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,255,255,0.07); }
    .cnm-flow-toggle { background:transparent; border:1px solid transparent; padding:6px 10px;
      border-radius:8px; margin-bottom:6px; transition:background .15s,border-color .15s; }
    .cnm-flow-toggle:has(input:checked) { background:rgba(255,255,255,0.02); border-color:rgba(255,255,255,0.07); }
    .cnm-flow-check { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:12.5px;
      color:#cdd2e8; user-select:none; }
    .cnm-flow-check input[type=checkbox] { width:14px; height:14px; accent-color:#22d3ee; cursor:pointer; }
    .cnm-flow-toggle-body { padding-left:23px; padding-top:4px; }
    .cnm-flow-msg-input { width:100%; min-height:64px; padding:9px 11px; font-size:13px;
      background:#0d1117; color:#e6e9f5; border:1px solid rgba(255,255,255,0.08); border-radius:8px;
      resize:vertical; font-family:inherit; line-height:1.4; }
    .cnm-flow-msg-input:focus { border-color:rgba(34,211,238,0.5); outline:none; }
    .cnm-flow-hint { font-size:11px; color:#7f87ae; margin-top:5px; }
    .camp-var-row { display:flex; gap:8px; align-items:center; background:rgba(255,255,255,0.03);
      padding:7px 10px; border-radius:6px; }
    .camp-var-row .var-key { color:#ffd54f; font-weight:600; font-size:12px; min-width:36px; }
    .camp-var-row select { flex:0 0 160px; padding:6px 10px; font-size:12.5px; }
    .camp-var-row input { flex:1; padding:6px 10px; font-size:12.5px; }
    .camp-audience-tabs { display:flex; gap:4px; background:rgba(0,0,0,0.2); padding:4px;
      border-radius:8px; margin-bottom:10px; }
    .camp-audience-tabs button { flex:1; padding:7px 10px; background:transparent; border:0; color:#9aa1c4;
      font-size:12.5px; border-radius:6px; cursor:pointer; font-weight:500; transition:all .15s; }
    .camp-audience-tabs button.active { background:rgba(124,138,255,0.18); color:#fff; }
    .camp-aud-panel { display:none; }
    .camp-aud-panel.active { display:block; }
    .camp-estimate { margin-top:16px; padding:12px 14px; border-radius:10px;
      background:var(--panel-2, #111824);
      border:1px solid rgba(124,138,255,0.20); display:flex; align-items:center; gap:10px; }
    .camp-estimate .dot { width:8px; height:8px; border-radius:50%;
      background:#7c8aff; box-shadow:0 1px 3px rgba(0,0,0,.18); animation:pulseDot 2s infinite; }
    @keyframes pulseDot { 0%,100% { transform:scale(1); } 50% { transform:scale(1.2); } }
    .camp-estimate span:not(.dot) { color:#cdd2e8; font-size:13px; flex:1; }
    .camp-estimate b { color:#fff; font-size:15px; font-weight:700; }

    /* ════════════════════════════════════════════════════════════════
       LIGHT MODE — overrides dos HARDCODES por menu (specs A/B/C)
       Cobre o que swap de token NÃO resolve: dark fixo, white-rgba,
       cores de status claras, modal canvas Broadcast, monitor, fb modal.
       Cores de MARCA (WhatsApp/IG, séries de gráfico) NÃO invertem.
       ════════════════════════════════════════════════════════════════ */
    /* sombras pretas pesadas → sombra clara suave (cards/colunas/modais) */
    [data-theme="light"] .crm-column,
    [data-theme="light"] .crm-card,
    [data-theme="light"] .auto-card,
    [data-theme="light"] .agent-card,
    [data-theme="light"] .channel-card,
    [data-theme="light"] .lead-card,
    [data-theme="light"] .igm-card,
    [data-theme="light"] #page-campanhas > header.glass{
      box-shadow:0 1px 3px rgba(0,0,0,.18); }
    [data-theme="light"] .crm-card:hover,
    [data-theme="light"] .lead-card:hover,
    [data-theme="light"] .agent-card:hover{ box-shadow:0 1px 3px rgba(0,0,0,.18); }
    [data-theme="light"] .crm-card.sortable-drag{ box-shadow:0 1px 3px rgba(0,0,0,.18); }
    [data-theme="light"] .crm-modal,
    [data-theme="light"] .crm-popover{ box-shadow:0 1px 3px rgba(0,0,0,.18); }
    [data-theme="light"] .crm-modal-overlay{ background:rgba(15,23,42,.45) !important; }
    [data-theme="light"] .crm-card-channels-overlay .crm-ch{ background:rgba(15,23,42,.10) !important; color:var(--text) !important; }

    /* hovers/bordas/fundos rgba(255,255,255,*) que somem no branco */
    [data-theme="light"] .auto-tab:hover{ background:var(--panel-2) !important; }
    [data-theme="light"] #page-crm .igm-table tr:hover,
    [data-theme="light"] #page-automacoes .igm-table tr:hover,
    [data-theme="light"] #page-imersao tbody tr:hover,
    [data-theme="light"] #page-prospect-fb tbody tr:hover,
    [data-theme="light"] #page-prospect-b2b tbody tr:hover{ background:var(--table-hover) !important; }

    /* ── Broadcast: modal/canvas de nova campanha (100% hardcoded dark) ── */
    [data-theme="light"] .camp-modal{ background:var(--panel) !important; border-color:var(--line) !important; }
    [data-theme="light"] .camp-modal-head{ border-bottom-color:var(--line) !important; }
    [data-theme="light"] .camp-modal-head h2{ color:var(--text) !important; }
    [data-theme="light"] .camp-modal-foot{ border-top-color:var(--line) !important; }
    [data-theme="light"] .camp-template-preview{ background:var(--panel-2) !important; border-color:var(--line) !important; color:var(--dim) !important; }
    [data-theme="light"] .camp-template-preview .var{ background:rgba(180,83,9,.12) !important; color:var(--warn) !important; }
    [data-theme="light"] .camp-template-meta{ color:var(--mute) !important; }
    [data-theme="light"] .camp-template-meta span{ background:var(--panel-2) !important; }
    [data-theme="light"] .camp-template-meta span.cat{ color:var(--info) !important; }
    [data-theme="light"] .cnm-flow{ background:var(--accent-glow) !important; border-color:var(--accent-deep) !important; }
    [data-theme="light"] .cnm-flow-button{ background:var(--panel-2) !important; border-color:var(--line) !important; }
    [data-theme="light"] .cnm-flow-button-label .btn-chip{ background:var(--accent) !important; color:#fff !important; }
    [data-theme="light"] .cnm-flow-button-label .btn-type{ color:var(--mute) !important; }
    [data-theme="light"] .cnm-flow-arrow{ color:var(--accent) !important; }
    [data-theme="light"] .cnm-flow-act-block{ background:var(--panel-2) !important; border-color:var(--line) !important; }
    [data-theme="light"] .cnm-flow-act-title{ color:var(--text) !important; }
    [data-theme="light"] .cnm-flow-extras{ border-top-color:var(--line-strong) !important; }
    [data-theme="light"] .cnm-flow-toggle:has(input:checked){ background:var(--panel-2) !important; border-color:var(--line) !important; }
    [data-theme="light"] .cnm-flow-check{ color:var(--dim) !important; }
    [data-theme="light"] .cnm-flow-check input[type=checkbox]{ accent-color:var(--accent) !important; }
    [data-theme="light"] .cnm-flow-msg-input{ background:var(--panel-2) !important; color:var(--text) !important; border-color:var(--line) !important; }
    [data-theme="light"] .cnm-flow-msg-input:focus{ border-color:var(--accent) !important; }
    [data-theme="light"] .cnm-flow-hint{ color:var(--mute) !important; }
    [data-theme="light"] .camp-var-row{ background:var(--panel-2) !important; }
    [data-theme="light"] .camp-var-row .var-key{ color:var(--warn) !important; }
    [data-theme="light"] .camp-audience-tabs{ background:var(--panel-2) !important; }
    [data-theme="light"] .camp-audience-tabs button{ color:var(--dim) !important; }
    [data-theme="light"] .camp-audience-tabs button.active{ background:var(--accent-glow) !important; color:var(--accent-deep) !important; }
    [data-theme="light"] .camp-estimate{ background:var(--panel-2) !important; border-color:var(--line) !important; }
    [data-theme="light"] .camp-estimate .dot{ background:var(--accent) !important; box-shadow:0 1px 3px rgba(0,0,0,.18); }
    [data-theme="light"] .camp-estimate span:not(.dot){ color:var(--dim) !important; }
    [data-theme="light"] .camp-estimate b{ color:var(--text) !important; }
    /* stat tiles inline do modal de ações (border 0.06 + label 0.4) */
    [data-theme="light"] #camp-actions-modal [style*="rgba(255,255,255,0.06)"]{ border-color:var(--line) !important; }
    [data-theme="light"] #camp-actions-modal [style*="color:rgba(255,255,255,0.4)"]{ color:var(--mute) !important; }
    [data-theme="light"] #camp-actions-modal [style*="rgba(255,255,255,0.03)"]{ background:var(--panel-2) !important; }

    /* ── Facebook: modal de detalhe (inline hardcoded) ── */
    [data-theme="light"] #fb-page-modal{ background:rgba(15,23,42,.45) !important; }
    [data-theme="light"] #fb-modal-category,
    [data-theme="light"] #fb-modal-followers{ color:var(--mute) !important; }
    [data-theme="light"] #fb-modal-intro{ color:var(--dim) !important; }
    [data-theme="light"] #fb-modal-bottom{ border-top-color:var(--line) !important; }

    /* ── Contatos: row de cor fixa + chips pastel de baixo contraste ── */
    [data-theme="light"] #page-crm .ccm-contact-row{ color:var(--text) !important; }
    [data-theme="light"] #page-contatos .ct-tag.hot,
    [data-theme="light"] #page-contatos .ct-chip.hot{ color:#dc2626 !important; }
    [data-theme="light"] #page-contatos .ct-tag.imersao,
    [data-theme="light"] #page-contatos .ct-chip.imersao{ color:#7c3aed !important; }
    [data-theme="light"] #page-contatos .ct-tag.owner,
    [data-theme="light"] #page-contatos .ct-chip.owner{ color:#0369a1 !important; }

    /* ── headers .glass com fundo dark hardcoded (!important) ── */
    [data-theme="light"] #page-vendas > header.glass{ background:rgba(255,255,255,0.90) !important; }
    [data-theme="light"] #page-dashboard > header.glass{ background:var(--panel-2, #111824); }
    [data-theme="light"] #page-prospect-fb header.glass{ background:var(--panel-2, #111824); }
    /* ── overlays de modal quase-pretos → véu claro ── */
    [data-theme="light"] #modal-b2b-company.modal-overlay,
    [data-theme="light"] #ul-modal,
    [data-theme="light"] #fb-new-search-modal{ background:rgba(15,23,42,0.45) !important; }

    /* ── lead modal universal (Vendas) — avatar/textos inline brancos ── */
    [data-theme="light"] #ul-avatar,
    [data-theme="light"] #fb-modal-avatar{ background:var(--panel-2) !important; border-color:var(--panel-2) !important; color:var(--text) !important; }
    [data-theme="light"] #ul-category,
    [data-theme="light"] #ul-followers{ color:var(--mute) !important; }
    [data-theme="light"] #ul-intro{ color:var(--dim) !important; }
    [data-theme="light"] #ul-bottom{ border-top-color:var(--line) !important; }
  

/* source-style-block:5:6a09eea7a30e2bd913615c3c0cf9191361c6738f102704bf1734737fa1e27383 */

      #page-estudio .est-seg{display:inline-flex;gap:4px;padding:4px;background:var(--input-bg);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap}
      #page-estudio .est-fmt,#page-estudio .est-tab{padding:8px 14px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--mut);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
      #page-estudio .est-fmt:hover,#page-estudio .est-tab:hover{color:var(--txt)}
      #page-estudio .est-fmt.active,#page-estudio .est-tab.active{background:var(--acc);color:#0a0a0a}
      #page-estudio .est-label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin:0 0 7px;text-transform:uppercase;letter-spacing:.4px}
      #page-estudio .est-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
      @media(max-width:900px){#page-estudio .est-grid{grid-template-columns:1fr!important}}
    

/* source-style-block:6:81c28c5608d8e260eb0ace3d2f750fb8ca0d92ac98f76beda8ad203f96e476a3 */

#orb-overlay{
  position:fixed; inset:0; z-index:240; display:none;
  align-items:center; justify-content:center;
  background:var(--panel-2, #111824);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:0; transition:opacity .5s cubic-bezier(.16,1,.3,1);
}
#orb-overlay.orb-on{ display:flex; opacity:1; }
#orb-overlay.orb-leaving{ opacity:0; }
#orb-stage{
  position:relative; width:340px; height:340px;
  display:flex; align-items:center; justify-content:center;
  transform:scale(.86); opacity:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .6s ease-out;
}
#orb-overlay.orb-on #orb-stage{ transform:scale(1); opacity:1; }
#orb-overlay.orb-done #orb-stage{ transform:scale(1.04); }
/* canvas de partículas atrás do núcleo */
#orb-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
/* halo externo suave (respira) */
.orb-halo{
  position:absolute; inset:-6%; border-radius:50%;
  background:var(--panel-2, #111824);
  filter:none; animation:orbBreathe 4.6s ease-in-out infinite;
}
/* anel de gauge — decorative-fill controlado por --orb-deg */
.orb-ring{
  position:absolute; width:248px; height:248px; border-radius:50%;
  background:var(--panel-2, #111824);
  -webkit-mask:none;
          mask:none;
  transition:--orb-deg .9s cubic-bezier(.22,1,.36,1);
  filter:none;
}
/* trilho fino atrás do gauge */
.orb-ring-track{
  position:absolute; width:248px; height:248px; border-radius:50%;
  border:1px solid oklch(0.55 0.04 250 / 0.18);
}
/* núcleo de energia */
.orb-core{
  position:absolute; width:176px; height:176px; border-radius:50%;
  background:var(--panel-2, #111824);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  animation:orbBreathe 3.8s ease-in-out infinite;
}
/* brilho varrendo o núcleo */
.orb-core::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--panel-2, #111824);
  animation:orbSpin 7s linear infinite;
}
/* anel de partículas orbitando (CSS) */
.orb-orbit{
  position:absolute; width:300px; height:300px; border-radius:50%;
  animation:orbSpin 16s linear infinite;
}
.orb-orbit::before,.orb-orbit::after{
  content:''; position:absolute; width:6px; height:6px; border-radius:50%;
  background:oklch(0.88 0.12 205); box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.orb-orbit::before{ top:2px; left:50%; }
.orb-orbit::after{ bottom:6px; left:42%; width:4px; height:4px; opacity:.7; }
/* conteúdo central: % + label */
.orb-center{
  position:relative; z-index:3; text-align:center; line-height:1;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-shadow:0 1px 18px oklch(0.15 0.05 250 / 0.8);
}
#orb-pct{
  font-size:58px; font-weight:650; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  color:oklch(0.97 0.02 210);
}
#orb-pct .orb-sym{ font-size:24px; font-weight:500; color:oklch(0.82 0.06 215 / 0.85); margin-left:2px; }
#orb-label{
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:oklch(0.80 0.05 220 / 0.78); font-weight:500; min-height:1.1em;
  transition:opacity .35s ease;
}
#orb-sub{ font-size:11px; color:oklch(0.70 0.03 230 / 0.55); margin-top:2px; }
/* flash de conclusão */
.orb-flash{
  position:absolute; inset:-10%; border-radius:50%; opacity:0; pointer-events:none;
  background:var(--panel-2, #111824);
}
#orb-overlay.orb-done .orb-flash{ animation:orbFlash 1s cubic-bezier(.16,1,.3,1) forwards; }
#orb-overlay.orb-done .orb-core{ box-shadow:0 1px 3px rgba(0,0,0,.18); }
/* estado de erro: tinge tudo de âmbar/vermelho sóbrio */
#orb-overlay.orb-error .orb-ring{ filter:none; }
#orb-overlay.orb-error .orb-core{ background:var(--panel-2, #111824); animation:none; }
#orb-overlay.orb-error #orb-label{ color:oklch(0.78 0.12 45 / 0.9); }
.orb-cancel{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:oklch(0.68 0.03 235 / 0.5); background:none; border:0; cursor:pointer;
  transition:color .25s ease;
}
.orb-cancel:hover{ color:oklch(0.82 0.08 30 / 0.85); }
@keyframes orbBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
@keyframes orbSpin{ to{ transform:rotate(360deg); } }
@keyframes orbFlash{ 0%{ opacity:0; transform:scale(.7); } 30%{ opacity:1; } 100%{ opacity:0; transform:scale(1.25); } }
@property --orb-deg{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@media (prefers-reduced-motion: reduce){
  .orb-halo,.orb-core,.orb-core::after,.orb-orbit{ animation:none !important; }
}


/* source-style-block:7:905186d1fa1463679e159821b2401906781ed7d4405fe660e76e8049de179b28 */
@keyframes tnspin { to { transform: rotate(360deg); } }

/* source-style-block:8:39fe07417ef7e408a7b4298d6cb2976db5a1ff08d3582ef829b4f485b80962f3 */

#flow-ov .fw-top{position:absolute;top:0;left:0;right:0;height:56px;z-index:30;display:flex;align-items:center;gap:12px;padding:0 18px;background:rgba(8,11,17,0.85);backdrop-filter:none;border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
#flow-ov .fw-back{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2,#111824);color:var(--dim);display:grid;place-items:center;cursor:pointer}
#flow-ov .fw-title{font-weight:700;font-size:15px;color:var(--text)}
#flow-ov .fw-title small{display:block;font-weight:400;color:var(--mute);font-size:10px;letter-spacing:.08em}
#flow-ov .fw-btn{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
#flow-ov .fw-btn.primary{background:var(--panel-2, #111824);color:#04140f;border:none}
#flow-ov #fw-vp{position:absolute;inset:56px 0 0 0;overflow:hidden;cursor:grab;background:var(--panel-2, #111824)}
#flow-ov #fw-vp.pan{cursor:grabbing}
#flow-ov #fw-world{position:absolute;top:0;left:0;transform-origin:0 0}
#flow-ov #fw-wires{position:absolute;inset:0;pointer-events:none;z-index:5;width:100%;height:100%}
#flow-ov .fw-node{position:absolute;width:280px;background:var(--panel,#0c111a);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.18);z-index:10}
#flow-ov .fw-node.entry{border-color:rgba(37,211,102,.4)}
#flow-ov .fw-head{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--line);cursor:grab}
#flow-ov .fw-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:14px}
#flow-ov .ico-wa{background:rgba(37,211,102,.15)}#flow-ov .ico-act{background:var(--accent-glow,rgba(34,224,214,.16))}
#flow-ov .fw-ttl{font-size:13px;font-weight:600;flex:1;color:var(--text)}
#flow-ov .fw-ttl small{display:block;color:var(--mute);font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:500}
#flow-ov .fw-del{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--mute);cursor:pointer}
#flow-ov .fw-del:hover{background:rgba(255,93,108,.15);color:var(--bad,#ff5d6c)}
#flow-ov .fw-body{padding:12px 13px;display:flex;flex-direction:column;gap:9px}
#flow-ov .fw-lbl{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:3px}
#flow-ov select.fw-in,#flow-ov input.fw-in,#flow-ov textarea.fw-in{width:100%;background:var(--panel-2,#111824);border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:12.5px;padding:8px 10px;font-family:inherit;outline:none}
#flow-ov textarea.fw-in{resize:vertical;min-height:54px;line-height:1.4}
#flow-ov .fw-in:focus{border-color:var(--accent)}
#flow-ov .fw-prev{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:12px;line-height:1.45;color:var(--text);white-space:pre-wrap}
#flow-ov .fw-prev .ft{color:var(--mute);font-size:10px;margin-top:5px}
#flow-ov .fw-btnrow{position:relative;display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:8px;background:var(--raised,#161f2e);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--accent)}
#flow-ov .fw-btnrow input{flex:1;background:transparent;border:none;color:var(--accent);font-weight:600;font-size:12px;outline:none}
#flow-ov .fw-port{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--panel);border:2px solid var(--accent);cursor:crosshair;z-index:12}
#flow-ov .fw-port:hover{box-shadow:0 1px 3px rgba(0,0,0,.18)}
#flow-ov .fw-port.out{right:-20px;top:50%;transform:translateY(-50%)}
#flow-ov .fw-port.in{left:-9px;top:18px;border-color:var(--dim)}
#flow-ov .fw-port.in.hot{border-color:var(--live,#34e89e);box-shadow:0 1px 3px rgba(0,0,0,.18)}
#flow-ov .fw-mini{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--dim);cursor:pointer;padding:5px;border:1px dashed var(--line-strong,rgba(255,255,255,.14));border-radius:7px;justify-content:center}
#flow-ov .fw-mini:hover{border-color:var(--accent);color:var(--accent)}
#flow-ov .bcast-btn-del{flex:0 0 auto;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:var(--mute);cursor:pointer;font-size:12px;line-height:1;border:1px solid transparent}
#flow-ov .bcast-btn-del:hover{background:rgba(255,93,108,.15);color:var(--bad,#ff5d6c);border-color:rgba(255,93,108,.3)}
#flow-ov .fw-sec{border-top:1px solid var(--line);padding-top:8px}
#flow-ov .fw-zoom{position:absolute;left:18px;bottom:18px;z-index:30;display:flex;align-items:center;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px}
#flow-ov .fw-zoom button{width:28px;height:28px;border:none;background:transparent;color:var(--dim);font-size:15px;cursor:pointer;border-radius:7px}
#flow-ov .fw-zoom span{font-size:11px;color:var(--mute);padding:0 8px;min-width:44px;text-align:center}
#flow-ov .fw-hint{position:absolute;right:18px;bottom:18px;z-index:30;color:var(--mute);font-size:11px;background:var(--panel);border:1px solid var(--line);padding:7px 12px;border-radius:9px}
/* ── painel de audiência do canvas ── */
#fw-aud-ov{display:flex;align-items:flex-start;justify-content:center}
#fw-aud-ov .fw-aud-card{margin-top:84px;width:min(480px,92vw);max-height:calc(100vh - 120px);overflow:auto;background:var(--panel,#0c111a);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.18);padding:20px 22px}
#fw-aud-ov .fw-aud-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
#fw-aud-ov .fw-aud-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--mute);font-size:18px;line-height:1;cursor:pointer}
#fw-aud-ov .fw-aud-tabs{display:flex;gap:7px;margin-bottom:12px}
#fw-aud-ov .fw-aud-tabs button{flex:1;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--dim);font-size:12.5px;font-weight:600;cursor:pointer}
#fw-aud-ov .fw-aud-tabs button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-glow,rgba(34,224,214,.12))}
#fw-aud-ov .fw-aud-pane{display:none}
#fw-aud-ov .fw-aud-pane.active{display:block}
.fw-pop{display:none;position:absolute;inset:0;z-index:42;background:rgba(4,7,12,0.74);backdrop-filter:none}
.fw-pop.open{display:flex;align-items:flex-start;justify-content:center}
.fw-pop .fw-pop-card{margin-top:96px;width:min(420px,92vw);background:var(--panel,#0c111a);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.18);padding:20px 22px}
.fw-pop .fw-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.fw-pop .fw-pop-head h3{font-size:15px;font-weight:700;color:var(--text);margin:0}
.fw-pop .fw-pop-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--mute);font-size:18px;line-height:1;cursor:pointer}
.fw-pop .fw-pop-sub{font-size:12.5px;color:var(--dim);margin-bottom:16px;line-height:1.5}
.fw-pop .fw-pop-lbl{display:block;font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:6px}
.fw-pop input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:14px;padding:11px 13px;outline:none;font-family:inherit}
.fw-pop input:focus{border-color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.fw-pop .fw-pop-msg{font-size:12px;margin-top:10px;min-height:16px;line-height:1.45}
.fw-pop .fw-pop-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.fw-pop .fw-pop-btn{height:38px;padding:0 16px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.fw-pop .fw-pop-btn.primary{background:var(--panel-2, #111824);color:#04140f;border:none}
#fw-aud-ov .fw-aud-lbl{display:block;font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:4px}
#fw-aud-ov .fw-aud-est{display:flex;align-items:center;gap:9px;margin-top:16px;padding:11px 13px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--text)}
#fw-aud-ov .fw-aud-est .dot{width:8px;height:8px;border-radius:50%;background:var(--accent,#22e0d6);box-shadow:0 1px 3px rgba(0,0,0,.18)}
#fw-aud-ov .fw-aud-foot{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}


/* source-style-block:9:cef9ee4748dea32fcc558e7c0a4d64c61a193a5202203bacea8a6e5af1d72998 */

  .cs-root{
    position:relative;
    display:inline-block;
    width:100%;
    font-family:inherit;
    --cs-r: var(--r, 14px);
  }
  /* esconde o select nativo mas mantem no DOM (acessibilidade/foco) */
  .cs-native{
    position:absolute !important;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;border:0;
    opacity:0;pointer-events:none;
  }
  /* gatilho estilizado */
  .cs-trigger{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    box-sizing:border-box;
    min-height:42px;
    padding:0 14px;
    background:var(--panel-2, #111824);
    color:var(--text, #eef2f8);
    border:1px solid var(--line, rgba(255,255,255,.07));
    border-radius:var(--cs-r);
    font-size:14px;
    line-height:1.2;
    cursor:pointer;
    user-select:none;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
    text-align:left;
  }
  .cs-trigger:hover{
    border-color:var(--line-strong, rgba(255,255,255,.12));
    background:var(--raised, #161f2e);
  }
  .cs-root.is-open .cs-trigger{
    border-color:var(--accent, #22e0d6);
    box-shadow:0 1px 3px rgba(0,0,0,.18);
    background:var(--raised, #161f2e);
  }
  .cs-root.is-disabled{opacity:.5;pointer-events:none;}
  .cs-label{
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .cs-label.is-placeholder{color:var(--mute, #5e6b80);}
  .cs-caret{
    flex:0 0 auto;
    width:16px;height:16px;
    color:var(--dim, #9aa6b8);
    transition:transform .18s ease, color .15s ease;
  }
  .cs-root.is-open .cs-caret{
    transform:rotate(180deg);
    color:var(--accent, #22e0d6);
  }

  /* painel da lista */
  .cs-panel{
    position:fixed;
    z-index:1000000;
    left:0;
    right:auto;
    min-width:100%;
    width:max-content;
    max-width:min(560px, 92vw);
    margin:0;
    background:#0c111a;
    border:1px solid var(--line-strong, rgba(255,255,255,.12));
    border-radius:var(--cs-r, 14px);
    box-shadow:0 1px 3px rgba(0,0,0,.18);
    overflow:hidden;
    opacity:0;
    transform:translateY(-6px) scale(.98);
    transform-origin:top center;
    pointer-events:none;
    transition:opacity .14s ease, transform .14s ease;
  }
  .cs-panel.is-open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .cs-panel.cs-flip{
    margin-top:0;margin-bottom:6px;
    transform-origin:bottom center;
    transform:translateY(6px) scale(.98);
  }
  .cs-panel.is-open.cs-flip{
    transform:translateY(0) scale(1);
  }
  [data-theme="hybrid"] .cs-panel,
  [data-theme="hybrid"] .cs-list{background:#101722;}
  [data-theme="light"] .cs-panel,
  [data-theme="light"] .cs-list{background:#ffffff;}

  /* busca */
  .cs-search-wrap{
    padding:8px;
    border-bottom:1px solid var(--line, rgba(255,255,255,.07));
    background:var(--panel-2, #111824);
  }
  .cs-search{
    width:100%;
    box-sizing:border-box;
    padding:8px 10px;
    background:var(--bg, #070a0f);
    color:var(--text, #eef2f8);
    border:1px solid var(--line, rgba(255,255,255,.07));
    border-radius:10px;
    font-size:13px;
    font-family:var(--mono, 'JetBrains Mono'), monospace;
    outline:none;
  }
  .cs-search:focus{
    border-color:var(--accent-deep, #0fb5ad);
    box-shadow:0 1px 3px rgba(0,0,0,.18);
  }
  .cs-search::placeholder{color:var(--mute, #5e6b80);}

  /* viewport rolavel */
  .cs-list{
    max-height:300px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:6px;
    scrollbar-width:thin;
    scrollbar-color:var(--line-strong, rgba(255,255,255,.12)) transparent;
  }
  .cs-list::-webkit-scrollbar{width:10px;}
  .cs-list::-webkit-scrollbar-track{background:transparent;}
  .cs-list::-webkit-scrollbar-thumb{
    background:var(--line-strong, rgba(255,255,255,.12));
    border-radius:8px;
    border:3px solid var(--panel, #0c111a);
  }
  .cs-list::-webkit-scrollbar-thumb:hover{background:var(--mute, #5e6b80);}

  .cs-opt{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 11px;
    border-radius:10px;
    color:var(--dim, #9aa6b8);
    font-size:14px;
    line-height:1.25;
    cursor:pointer;
    transition:background .12s ease, color .12s ease;
  }
  .cs-opt:hover, .cs-opt.is-active{
    background:var(--panel-2, #111824);
    color:var(--text, #eef2f8);
  }
  .cs-opt.is-selected{
    color:var(--accent, #22e0d6);
    font-weight:500;
  }
  .cs-opt.is-disabled{
    opacity:.4;
    pointer-events:none;
  }
  .cs-opt-text{
    flex:1 1 auto;
    white-space:nowrap;
  }
  .cs-check{
    flex:0 0 auto;
    width:15px;height:15px;
    color:var(--accent, #22e0d6);
    opacity:0;
    transition:opacity .12s ease;
  }
  .cs-opt.is-selected .cs-check{opacity:1;}

  /* grupos (optgroup) */
  .cs-group-label{
    padding:9px 11px 5px;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--mute, #5e6b80);
    font-family:var(--mono, 'JetBrains Mono'), monospace;
  }
  .cs-empty{
    padding:16px 11px;
    text-align:center;
    color:var(--mute, #5e6b80);
    font-size:13px;
  }

  /* respeita selects do flow builder ja em linha */
  .fw-in.cs-native{display:none !important;}

/* Sidebar sections: progressive disclosure without changing the approved shell. */
.nav-section-toggle {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: color 160ms cubic-bezier(0.25, 1, 0.5, 1), background-color 160ms cubic-bezier(0.25, 1, 0.5, 1);
}
.nav-section-toggle:hover {
  background: rgba(255,255,255,0.025);
}
.nav-section-toggle:active {
  background: rgba(255,255,255,0.04);
}
.nav-section-toggle:focus-visible {
  outline: 2px solid var(--accent, #22e0d6);
  outline-offset: -2px;
  border-radius: 8px;
}
.nav-section-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .82;
  transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1);
}
.nav-section-toggle:hover .nav-section-title,
.nav-section-toggle.has-active .nav-section-title { opacity: 1; }
.nav-section-toggle:active .nav-section-title { opacity: .9; }
.nav-section-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: .58;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms cubic-bezier(0.25, 1, 0.5, 1);
}
.nav-section-toggle.is-open .nav-section-chevron {
  transform: rotate(0deg);
  opacity: .86;
}
.nav-section-toggle.has-active .nav-section-chevron {
  color: var(--accent, #22e0d6);
}
.nav-section-content {
  display: none;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 140ms cubic-bezier(0.7, 0, 0.84, 0),
    visibility 0s linear 200ms;
}
.nav-section-content.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}
.nav-section-content-inner {
  min-height: 0;
  overflow: hidden;
}

body[data-ctx="owner"] .nav-section-toggle[data-nav-scope="owner"],
body[data-ctx="agency"] .nav-section-toggle[data-nav-scope="agency"],
body[data-ctx="operating"] .nav-section-toggle[data-nav-scope="operating"] {
  display: flex;
}
body[data-ctx="owner"] .nav-section-content[data-nav-scope="owner"],
body[data-ctx="agency"] .nav-section-content[data-nav-scope="agency"],
body[data-ctx="operating"] .nav-section-content[data-nav-scope="operating"] {
  display: grid;
}

@media (min-width: 1024px) {
  .sidebar.collapsed .nav-section-toggle {
    display: none !important;
  }
  .sidebar.collapsed .nav-section-content {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transition: none !important;
  }
  .sidebar.collapsed .nav-section-content-inner {
    overflow: visible !important;
  }
}

@media (max-width: 1023px) {
  body[data-ctx="owner"] .sidebar.collapsed .nav-section-toggle[data-nav-scope="owner"],
  body[data-ctx="agency"] .sidebar.collapsed .nav-section-toggle[data-nav-scope="agency"],
  body[data-ctx="operating"] .sidebar.collapsed .nav-section-toggle[data-nav-scope="operating"],
  body[data-ctx="owner"] .nav-section-toggle[data-nav-scope="owner"],
  body[data-ctx="agency"] .nav-section-toggle[data-nav-scope="agency"],
  body[data-ctx="operating"] .nav-section-toggle[data-nav-scope="operating"] {
    display: flex !important;
  }
}

@media (pointer: coarse) {
  .nav-section-toggle {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-section-toggle,
  .nav-section-chevron,
  .nav-section-content,
  .nav-section-content.is-open {
    transition-duration: .01ms !important;
  }
}

/* QUIET UI 2026-07-15: mesma composição, superfícies sólidas e elevação neutra. */
[data-palette="azul"]{ --accent:#6f95ff; --accent-deep:#4d72d8; --accent-glow:rgba(111,149,255,.08); --on-accent:#06121a; }
[data-palette="azul_pastel"]{ --accent:#9ab8df; --accent-deep:#7695bd; --accent-glow:rgba(154,184,223,.08); --on-accent:#06121a; }
[data-palette="lavanda"]{ --accent:#b6a8d3; --accent-deep:#9181b0; --accent-glow:rgba(182,168,211,.08); --on-accent:#06121a; }
[data-palette="salvia"]{ --accent:#9bb29d; --accent-deep:#78927c; --accent-glow:rgba(155,178,157,.08); --on-accent:#06121a; }
[data-palette="areia"]{ --accent:#c4aa83; --accent-deep:#a08762; --accent-glow:rgba(196,170,131,.08); --on-accent:#06121a; }
[data-palette="rose"]{ --accent:#c99aa5; --accent-deep:#a87682; --accent-glow:rgba(201,154,165,.08); --on-accent:#06121a; }
[data-theme="light"][data-palette="azul"]{ --accent:#2450a4; --accent-deep:#183d86; --accent-glow:rgba(36,80,164,.07); --on-accent:#fff; }
[data-theme="light"][data-palette="azul_pastel"]{ --accent:#3d5f8f; --accent-deep:#2e4a74; --accent-glow:rgba(61,95,143,.07); --on-accent:#fff; }
[data-theme="light"][data-palette="lavanda"]{ --accent:#675384; --accent-deep:#503e6d; --accent-glow:rgba(103,83,132,.07); --on-accent:#fff; }
[data-theme="light"][data-palette="salvia"]{ --accent:#3f6847; --accent-deep:#315439; --accent-glow:rgba(63,104,71,.07); --on-accent:#fff; }
[data-theme="light"][data-palette="areia"]{ --accent:#76572e; --accent-deep:#5f4524; --accent-glow:rgba(118,87,46,.07); --on-accent:#fff; }
[data-theme="light"][data-palette="rose"]{ --accent:#834656; --accent-deep:#6b3544; --accent-glow:rgba(131,70,86,.07); --on-accent:#fff; }

/* FRONTEND WAVE 2 · FAMILY 1
 * Geometry and state contracts for Dashboard, CRM, Conversas and Contatos.
 * Page-scoped by design: no global reset and no decorative gradient. */
:is(#page-dashboard,#page-crm,#page-conversas,#page-contatos) .surface-state{
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  width:100%;
  min-height:160px;
  padding:28px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--theme-surface,var(--panel));
  color:var(--dim);
  text-align:center;
}
:is(#page-dashboard,#page-crm,#page-conversas,#page-contatos) .surface-state[hidden]{display:none}
:is(#page-dashboard,#page-crm,#page-conversas,#page-contatos) .surface-state.is-error{color:var(--bad)}
:is(#page-dashboard,#page-crm,#page-conversas,#page-contatos) .surface-state button{justify-self:center}

/* Dashboard: preserve the 676 cockpit proportions while containing every row. */
#page-dashboard{min-width:0;overflow-x:clip}
#page-dashboard > header.glass{
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  min-width:0;
  min-height:0;
  position:static !important;
  inset:auto !important;
  z-index:auto !important;
  padding:10px clamp(18px,2.5vw,32px) !important;
}
#page-dashboard > header.glass > .flex{min-width:0;flex-wrap:wrap}
#page-dashboard > header.glass > .flex:first-child{flex:0 1 auto}
#page-dashboard > header.glass > .flex:last-child{flex:1 1 680px;justify-content:flex-end;gap:8px 12px}
#page-dashboard > header #customDateRange{min-width:0;flex-wrap:wrap}
#page-dashboard > header select,#page-dashboard > header input{max-width:100%;min-height:34px}
#page-dashboard > header .theme-toggle{width:34px;height:34px}
#page-dashboard > header + div{
  width:min(100%,1440px);
  min-width:0;
  padding:clamp(20px,3vw,32px) clamp(16px,2.5vw,32px) !important;
  box-sizing:border-box;
}
#page-dashboard #dash-general,#page-dashboard #dnew-root,#page-dashboard #dnew-root>*{min-width:0}
#page-dashboard #dnew-root :is(.dnew-panel,.dnew-statcard,.dnew-block,.dnew-ig-side,.dnew-pr-side){min-width:0}
#page-dashboard #dnew-root :is(svg,canvas){max-width:100%}
#page-dashboard #dnew-root .dnew-kan-card::before{width:1px}
#page-dashboard #dnew-root .dnew-two-cards{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
#page-dashboard #dnew-root .dnew-two-cards>.dnew-block,
#page-dashboard #dnew-root .dnew-ch-grid,
#page-dashboard #dnew-root .dnew-ch-list,
#page-dashboard #dnew-root .dnew-ch-item,
#page-dashboard #dnew-root .dnew-kan-grid,
#page-dashboard #dnew-root .dnew-kan-card,
#page-dashboard #dnew-root .dnew-kan-card .kn,
#page-dashboard #dnew-root .dnew-kan-stats{min-width:0;max-width:100%}
#page-dashboard #dnew-root .dnew-ch-grid{
  grid-template-columns:minmax(150px,180px) minmax(0,1fr);
}
#page-dashboard #dnew-root .dnew-ch-item,
#page-dashboard #dnew-root .dnew-kan-card{overflow:hidden}
#page-dashboard #dnew-root .dnew-ch-meta .s,
#page-dashboard #dnew-root .dnew-kan-card .kn{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#page-dashboard #dnew-root .dnew-kan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#page-dashboard #dnew-root .dnew-kan-stats{flex-wrap:wrap;gap:12px 18px}

@media(max-width:1280px){
  #page-dashboard #dnew-root .dnew-two-cards{grid-template-columns:minmax(0,1fr)}
  #page-dashboard #dnew-root .dnew-ch-grid{grid-template-columns:minmax(150px,200px) minmax(0,1fr)}
}

/* CRM: fixed shell, scroll only the board, and make states part of the board. */
#page-crm.active{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100dvh;
  min-width:0;
  overflow:hidden;
  background:var(--theme-canvas,var(--bg));
}
#page-crm .crm-toolbar{
  position:sticky;
  top:0;
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;
  gap:10px;
  min-width:0;
  padding:13px clamp(16px,2vw,24px) !important;
  background:var(--theme-surface,var(--panel)) !important;
}
#page-crm #crm-pipe-title{min-width:0;flex:1 1 260px}
#page-crm #crm-pipe-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-crm #crm-pipe-select{flex:0 1 280px;min-width:180px;max-width:100% !important}
#page-crm .crm-board-wrap{
  flex:1 1 auto;
  align-items:stretch;
  width:100%;
  min-width:0;
  min-height:0 !important;
  padding:clamp(14px,2vw,22px) !important;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
  box-sizing:border-box;
}
#page-crm .crm-column{
  flex:0 0 clamp(280px,24vw,320px);
  width:clamp(280px,24vw,320px);
  min-width:280px;
  max-width:320px;
  max-height:none;
  min-height:0;
}
#page-crm .crm-col-cards{min-height:88px;overflow-y:auto}
#page-crm .crm-board-wrap>.surface-state{align-self:center;max-width:620px;margin:auto}

/* Conversas: stable master/detail, solid message canvas and one-pixel indicators. */
#page-conversas.active{min-width:0;overflow:hidden;background:var(--theme-canvas,var(--bg))}
#page-conversas > header{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  min-width:0;
  padding:12px clamp(16px,2.5vw,32px) !important;
}
#page-conversas > header > .flex{min-width:0;flex-wrap:wrap}
#page-conversas > header > .flex:first-child{flex:1 1 620px}
#page-conversas .conv-layout{
  display:grid;
  grid-template-columns:minmax(280px,340px) minmax(0,1fr) !important;
  width:100%;
  height:calc(100dvh - 72px) !important;
  min-width:0;
  min-height:0;
}
#page-conversas #conv-list,#page-conversas #conv-thread,#page-conversas #conv-msgs{min-width:0;min-height:0}
#page-conversas #conv-msgs{background-color:var(--theme-canvas,var(--bg)) !important;background-image:none !important}
#page-conversas .conv-item.active::before{width:1px;border-radius:0}
#page-conversas #conv-tpl-banner{border-left-width:1px !important}
#page-conversas #conv-list>.surface-state{min-height:100%;border:0;border-radius:0}
#page-conversas #conv-input-form>*{min-width:0}

/* Contatos: action header wraps, table scroll is intentional, drawers stay in viewport. */
#page-contatos.active{width:100%;height:100dvh;min-width:0;overflow:hidden}
#page-contatos .ct-top{gap:10px 12px;min-width:0;padding:14px clamp(16px,2vw,26px)}
#page-contatos .ct-head-l{min-width:0}
#page-contatos .ct-spacer{min-width:8px}
#page-contatos .ct-searchbox{flex:1 1 280px;min-width:min(280px,100%);max-width:480px}
#page-contatos .ct-body,#page-contatos .ct-tablewrap{min-width:0}
#page-contatos .ct-tablewrap{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#page-contatos .ct-table{min-width:980px}
#page-contatos .ct-drawer{height:100dvh;max-width:min(92vw,560px)}
#page-contatos .ct-tl-item::before{width:1px}
#page-contatos .ct-rows .surface-state,#page-contatos td>.surface-state{min-height:180px;border:0}

@media(max-width:1023px){
  #page-dashboard > header.glass > .flex:last-child{justify-content:flex-start}
  #page-crm.active,#page-contatos.active{height:calc(100dvh - 64px - env(safe-area-inset-top))}
}

@media(max-width:767px){
  #page-dashboard > header.glass{align-items:flex-start;padding:12px 14px 12px 68px !important}
  #page-dashboard > header.glass > .flex:first-child{flex:0 0 100%}
  #page-dashboard > header.glass > .flex:last-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;width:100%}
  #page-dashboard #dashAgentSelect,#page-dashboard #periodFilter{width:100%;min-width:0 !important}
  #page-dashboard #customDateRange{grid-column:1/-1;display:grid !important;grid-template-columns:1fr auto 1fr auto;width:100%}
  #page-dashboard #currentDate,#page-dashboard > header .pulse-slow,#page-dashboard > header .pulse-slow+span{display:none}
  #page-dashboard #dnew-root .dnew-sales-top{grid-template-columns:minmax(0,1fr)}
  #page-dashboard #dnew-root .dnew-sales-top .dnew-scell+.dnew-scell{border-left:0;border-top:1px solid var(--dn-line)}
  #page-dashboard #dnew-root .dnew-kan-grid,#page-dashboard #dnew-root .dnew-ig-mini{grid-template-columns:minmax(0,1fr)}
  #page-dashboard #dnew-root .dnew-sec-head{align-items:flex-start;flex-wrap:wrap}
  #page-dashboard #dnew-root .dnew-sec-link{margin-left:42px}

  #page-crm .crm-toolbar{padding:12px 14px 12px 68px !important}
  #page-crm #crm-pipe-title{flex-basis:100%}
  #page-crm #crm-pipe-select{flex:1 1 100%;width:100%;max-width:none !important}
  #page-crm .crm-board-wrap{padding:12px !important;gap:12px !important;scroll-snap-type:x proximity}
  #page-crm .crm-column{flex-basis:min(88vw,320px);width:min(88vw,320px);min-width:min(88vw,320px);scroll-snap-align:start}
  #page-crm #crm-bulk-bar{padding:10px 14px 10px 68px !important}

  #page-conversas .conv-layout{display:block;height:auto !important}
  #page-conversas #conv-input-form .btn{min-width:44px}

  #page-contatos .ct-top{padding:12px 14px 12px 68px}
  #page-contatos .ct-head-l{flex:1 1 calc(100% - 68px)}
  #page-contatos .ct-spacer{display:none}
  #page-contatos .ct-searchbox{order:2;flex:1 1 100%;max-width:none;min-width:0}
  #page-contatos .ct-status{order:3;margin-left:auto}
  #page-contatos .ct-btn{order:4;flex:1 1 auto;justify-content:center;min-height:44px}
  #page-contatos .ct-tabs,#page-contatos .ct-subtools,#page-contatos .ct-bulkbar{padding-inline:14px}
  #page-contatos .ct-count-info{flex:1 1 100%;margin-left:0}
  #page-contatos .ct-bulkbar{overflow-x:auto;flex-wrap:nowrap}
  #page-contatos .ct-foot{flex-wrap:wrap;gap:8px;padding:10px 14px}
  #page-contatos .ct-pager{width:100%;margin-left:0;overflow-x:auto}
  #page-contatos .ct-drawer,#page-contatos .ct-drawer.ct-wide{width:100%;max-width:100vw}
}

@media(max-width:420px){
  #page-dashboard > header.glass > .flex:last-child{grid-template-columns:minmax(0,1fr) auto auto}
  #page-dashboard #dashAgentSelect{grid-column:1/-1}
  #page-dashboard #customDateRange{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #page-dashboard #customDateRange span{display:none}
  #page-dashboard #customDateRange button{grid-column:1/-1;min-height:44px}
  #page-dashboard #dnew-root .dnew-panel{padding:16px}
  #page-dashboard #dnew-root .dnew-sdr-row{grid-template-columns:32px minmax(0,1fr)}
  #page-dashboard #dnew-root .dnew-sdr-count{grid-column:2;text-align:left}
  #page-conversas #conv-input-form{display:grid !important;grid-template-columns:minmax(0,1fr) repeat(2,44px)}
  #page-conversas #conv-input-text{grid-column:1/-1;width:100%}
  #page-contatos .ct-btn{flex:1 1 calc(50% - 6px)}
  #page-contatos .ct-btn.ct-primary{flex-basis:100%}
}

.ui-icon-tile{
  background:var(--raised)!important;
  border:1px solid var(--line)!important;
  color:var(--accent)!important;
  box-shadow:none!important;
}
.ui-icon-tile svg{ color:currentColor!important; }
.ui-icon-tile--success{ color:var(--live)!important; }
.ui-icon-tile--warning{ color:var(--warn)!important; }
.ui-icon-tile--danger{ color:var(--bad)!important; }
.ui-icon-tile--social,.ui-icon-tile--info{ color:var(--info)!important; }
.ui-dialog-tint{ background:var(--accent-glow)!important; opacity:.22; }
.ui-dialog-title{
  background:none!important;
  color:var(--text-primary)!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
}
.ui-avatar-fallback{
  background:var(--raised)!important;
  border:1px solid var(--line-strong);
  color:var(--text-primary)!important;
}
.agent-profile-frame{
  background:var(--raised)!important;
  border:1px solid var(--line-strong)!important;
}
.agent-profile-frame>div{ background:var(--panel-2)!important; }
.funnel-bar--primary{ background:var(--accent-deep)!important; }
.funnel-bar--secondary{ background:var(--info)!important; }
.funnel-bar--tertiary{ background:var(--live)!important; }
.pal-inherit{ grid-column:1/-1; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--text-secondary); cursor:pointer; }
.pal-inherit:hover,.pal-inherit:focus-visible{ border-color:var(--accent); color:var(--text-primary); outline:2px solid transparent; }
.btn-primary,.bill-btn,.ctxp-btn.primary,.aw-confirm{ color:var(--on-accent,#06121a)!important; }

body,
.login-overlay,
.sidebar,
header,
.glass,
.glass-strong,
.glass-card,
.agent-card,
.channel-card,
.crm-card,
.bill-card,
.ctxp-card,
.modal,
.modal-content {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  text-shadow:none!important;
}
.glass,
.glass-strong,
.glass-card {
  background:var(--panel, var(--bg-card-solid, #111824))!important;
  border-color:var(--line, var(--border-color))!important;
}
.surface-border::before,
.surface-border::after { display:none!important; }
.surface-border { border:1px solid var(--line, var(--border-color))!important; }
.stat-number {
  background:none!important;
  color:var(--text-primary)!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:none!important;
}
[class*="glow"],
[class*="neon"],
[style*="drop-shadow"],
[style*="box-shadow:0 0"] {
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  filter:none!important;
  text-shadow:none!important;
}
.pal-card.active { box-shadow:0 1px 3px rgba(0,0,0,.18); }
.pal-swatch { background:var(--pal-accent)!important; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.live-dot { box-shadow:0 1px 3px rgba(0,0,0,.18); animation:none!important; }

/* Frontend Wave 1: deterministic premium shell shared by all theme modes. */
.sidebar{
  width:248px;
  background:var(--theme-sidebar,var(--panel))!important;
  border-right:1px solid var(--sidebar-border,var(--line))!important;
  box-shadow:none!important;
}
.sidebar-logo{
  min-height:82px;
  padding:22px 20px 20px;
  gap:12px;
}
.sidebar-nav{
  padding:8px 12px 18px;
  scrollbar-gutter:stable;
}
.nav-section-toggle{
  min-height:34px;
  padding:11px 12px 6px;
  color:var(--theme-sidebar-muted,var(--mute));
  border-radius:8px;
}
.nav-section-toggle:hover{
  background:var(--theme-sidebar-hover,var(--panel-2));
  color:var(--theme-sidebar-text,var(--text));
}
.nav-item{
  min-height:40px;
  padding:9px 12px;
  gap:12px;
  border-radius:9px;
  font-size:13px;
  line-height:1.35;
}
.nav-item.active{
  background:var(--accent-glow)!important;
  border-color:color-mix(in srgb,var(--accent) 24%,transparent)!important;
  color:var(--theme-sidebar-text,var(--text))!important;
}
.main-area{
  margin-left:248px;
  min-width:0;
  background:var(--theme-canvas,var(--bg));
}
.main-area .page > header.glass{
  min-height:72px;
  padding:18px clamp(20px,3vw,36px)!important;
  background:var(--theme-surface,var(--panel))!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
}
.main-area .page > header :where(h1,h2){
  letter-spacing:-.025em;
  line-height:1.18;
}
.main-area .page > header p{
  color:var(--dim);
  line-height:1.5;
}
@media (max-width:1023px){
  .main-area{ margin-left:0!important; }
  .main-area .page > header.glass{
    min-height:64px;
    padding:15px 18px 15px 64px!important;
  }
}

/* Conversas: seletor de tags ativo, pesquisavel e legivel. */
.cvtag-native-hidden,
#page-conversas > header .cvtag-bar .cs-root:has(#cvtag-filter){
  display:none!important;
}
.cvtag-picker{
  position:relative;
  width:min(360px,32vw);
  min-width:260px;
}
.cvtag-trigger{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  font:inherit;
  font-size:13px;
  text-align:left;
  cursor:pointer;
}
.cvtag-trigger:hover,
.cvtag-trigger:focus-visible{
  border-color:color-mix(in srgb,var(--accent) 48%,var(--line));
  outline:none;
}
.cvtag-trigger > svg:first-child{ color:var(--accent); flex:none; }
#cvtag-trigger-label{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cvtag-chevron{ flex:none; color:var(--mute); transition:transform .16s ease; }
.cvtag-trigger[aria-expanded="true"] .cvtag-chevron{ transform:rotate(180deg); }
.cvtag-menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:90;
  width:clamp(340px,38vw,500px);
  max-width:calc(100vw - 28px);
  padding:14px;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.cvtag-menu.open{ display:block; }
.cvtag-menu-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:0 2px 11px;
}
.cvtag-menu-head strong{ color:var(--text); font-size:13px; font-weight:650; }
.cvtag-menu-head span{ color:var(--mute); font-size:11px; white-space:nowrap; }
.cvtag-search-wrap{
  height:42px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--mute);
}
.cvtag-search-wrap:focus-within{
  border-color:color-mix(in srgb,var(--accent) 48%,var(--line));
  color:var(--accent);
}
#cvtag-search{
  width:100%;
  min-width:0;
  color:var(--text);
  background:transparent;
  border:0;
  outline:0;
  font:inherit;
  font-size:13px;
}
#cvtag-search::placeholder{ color:var(--mute); }
.cvtag-options{
  max-height:330px;
  overflow-y:auto;
  margin-top:10px;
  padding-right:3px;
  scrollbar-width:thin;
}
.cvtag-option{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 11px;
  color:var(--text);
  background:transparent;
  border:0;
  border-radius:9px;
  font:inherit;
  font-size:13px;
  text-align:left;
  cursor:pointer;
}
.cvtag-option:hover,
.cvtag-option:focus-visible{ background:var(--panel-2); outline:none; }
.cvtag-option.selected{ color:var(--accent); background:var(--accent-glow); }
.cvtag-option span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cvtag-option small{
  min-width:30px;
  padding:2px 7px;
  color:var(--mute);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:10px;
  text-align:center;
}
.cvtag-empty{ padding:30px 12px; color:var(--mute); font-size:13px; text-align:center; }
@media (max-width:767px){
  #page-conversas > header .cvtag-picker{
    width:100%;
    min-width:0;
  }
  .cvtag-menu{
    left:auto;
    right:0;
    width:min(440px,calc(100vw - 24px));
  }
  .cvtag-options{ max-height:280px; }
}