@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
*{box-sizing:border-box;}
:root{
  --fundo:#F4F6F4; --painel:#FFFFFF; --tinta:#121613; --suave:#566951;
  --linha:#E2E8E2; --acento:#00A854; --acento-vivo:#00E676; --acento-claro:rgba(0,168,84,.10);
  --sidebar:#121613; --sidebar-tinta:#9FB0A3;
  --lead:#566951; --qualificado:#2E7CB8; --oportunidade:#B07A12; --venda:#00A854; --perdido:#EF4444;
  --titulo:'Montserrat',sans-serif;
}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font-family:'Hanken Grotesk',-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:15px; line-height:1.5;
}
.layout{display:grid; grid-template-columns:220px 1fr; min-height:100vh;}

/* sidebar */
.sidebar{background:var(--sidebar); color:var(--sidebar-tinta); display:flex; flex-direction:column; padding:18px 0;}
.marca{font-family:var(--titulo); font-size:19px; font-weight:800; color:#fff; padding:0 20px 18px; letter-spacing:-.02em;}
.marca span{color:var(--acento-vivo);}
.sidebar nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.nav-item{padding:9px 20px; color:var(--sidebar-tinta); text-decoration:none; font-size:14px;}
.nav-item.ativo{background:rgba(0,230,118,.10); color:#fff; border-left:3px solid var(--acento-vivo); padding-left:17px; font-weight:600;}
.nav-item.breve{opacity:.45; cursor:default; display:flex; justify-content:space-between; align-items:center;}
.nav-item.breve em{font-style:normal; font-size:10px; border:1px solid currentColor; border-radius:8px; padding:0 6px; opacity:.8;}
.sidebar-rodape{padding:14px 20px 0; border-top:1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; align-items:center;}
.usuario{font-size:13px;}
.sair{background:none; border:none; color:var(--sidebar-tinta); font-size:13px; cursor:pointer; text-decoration:underline; padding:0;}

/* conteúdo */
.conteudo{padding:28px 34px; max-width:1200px;}
.topo-pagina{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; flex-wrap:wrap;}
h1{margin:0 0 4px; font-family:var(--titulo); font-weight:800; font-size:24px; letter-spacing:-.02em;}
h2{font-family:var(--titulo); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--acento); margin:22px 0 10px;}
.voltar{color:var(--acento); text-decoration:none; font-size:13px;}
.sub-detalhe{margin:0; color:var(--suave); font-size:14px;}

/* chips do funil */
.funil-resumo{display:flex; gap:8px; flex-wrap:wrap;}
.funil-chip{
  border:1px solid var(--linha); background:var(--painel); border-radius:999px;
  padding:4px 14px; font-size:12px; font-weight:600; letter-spacing:.03em;
  color:var(--suave); text-decoration:none; text-transform:uppercase;
}
.funil-chip b{color:var(--tinta); margin-left:4px; font-variant-numeric:tabular-nums;}
.funil-chip.selecionado{border-color:var(--acento); background:var(--acento-claro); color:var(--acento);}

/* filtros */
.filtros{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.filtros input[type=search]{flex:1; min-width:260px;}
input,select{
  font:inherit; padding:9px 13px; border:1.5px solid var(--linha); border-radius:10px;
  background:var(--painel); color:var(--tinta);
}
input:focus,select:focus{outline:2px solid var(--acento-vivo); outline-offset:0; border-color:var(--acento);}

/* tabela */
.resultado-info{color:var(--suave); font-size:13px; margin:0 0 8px;}
.tabela{width:100%; border-collapse:collapse; background:var(--painel); border:1px solid var(--linha); border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(18,22,19,.05);}
.tabela th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--suave); padding:10px 14px; border-bottom:1px solid var(--linha); background:var(--fundo);
}
.tabela td{padding:10px 14px; border-bottom:1px solid var(--linha); font-size:14px;}
.tabela tbody tr{cursor:pointer;}
.tabela tbody tr:hover{background:var(--acento-claro);}
.tabela tr:last-child td{border-bottom:none;}
.tabela .nome a{color:var(--tinta); font-weight:600; text-decoration:none;}
.tabela .num{font-variant-numeric:tabular-nums; color:var(--suave);}
.vazio{color:var(--suave); font-style:italic; padding:18px 14px;}

/* badges de etapa */
.badge{font-size:12px; font-weight:600; border-radius:12px; padding:2px 10px; color:#fff; white-space:nowrap;}
.badge.grande{font-size:14px; padding:6px 16px; border-radius:16px;}
.etapa-lead{background:var(--lead);}
.etapa-qualificado{background:var(--qualificado);}
.etapa-oportunidade{background:var(--oportunidade);}
.etapa-venda{background:var(--venda);}
.etapa-perdido{background:var(--perdido);}
a.funil-chip.etapa-lead,a.funil-chip.etapa-qualificado,a.funil-chip.etapa-oportunidade,
a.funil-chip.etapa-venda,a.funil-chip.etapa-perdido{background:var(--painel); color:var(--suave);}
a.funil-chip.selecionado{background:var(--acento-claro); color:var(--acento);}

/* paginação */
.paginacao{display:flex; gap:14px; align-items:center; margin-top:14px; font-size:13.5px; color:var(--suave);}
.paginacao a{color:var(--acento); text-decoration:none;}

/* detalhe */
.colunas-detalhe{display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start;}
.painel-campos,.painel-timeline{background:var(--painel); border:1px solid var(--linha); border-radius:14px; padding:20px 22px; box-shadow:0 1px 3px rgba(18,22,19,.05);}
.painel-campos h2:first-child,.painel-timeline h2:first-child{margin-top:0;}
dl{margin:0; display:grid; grid-template-columns:minmax(120px,40%) 1fr; gap:6px 12px; font-size:13.5px;}
dt{color:var(--suave);}
dd{margin:0; overflow-wrap:anywhere;}

/* timeline */
.timeline{list-style:none; margin:0; padding:0 0 0 6px; border-left:2px solid var(--linha);}
.evento{position:relative; padding:0 0 16px 18px;}
.evento .ponto{
  position:absolute; left:-7px; top:5px; width:10px; height:10px; border-radius:50%;
  background:var(--suave); border:2px solid var(--painel);
}
.evento.tipo-conversao .ponto{background:var(--acento);}
.evento.tipo-mudanca_etapa .ponto{background:var(--qualificado);}
.evento.tipo-email_aberto .ponto,.evento.tipo-email_clicado .ponto{background:var(--oportunidade);}
.evento.tipo-email_bounce .ponto{background:var(--perdido);}
.evento b{font-size:14px; display:block;}
.evento-meta{font-size:12px; color:var(--suave);}

/* login */
.tela-login{display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:radial-gradient(900px 500px at 70% -10%, rgba(0,230,118,.14), transparent 60%), #121613;}
.cartao-login{background:var(--painel); border-radius:18px; padding:36px 38px; width:380px; box-shadow:0 24px 60px rgba(0,0,0,.45);}
.marca-login{color:var(--tinta); padding:0; font-size:26px; text-align:center;}
.marca-login span{color:var(--acento);}
.login-sub{text-align:center; color:var(--suave); font-size:13.5px; margin:4px 0 22px;}
.cartao-login label{display:block; font-size:13px; font-weight:600; margin:12px 0 4px;}
.cartao-login input{width:100%;}
.cartao-login button{
  width:100%; margin-top:18px; padding:12px; font:inherit; font-weight:700;
  background:var(--acento-vivo); color:#0C1813; border:none; border-radius:10px; cursor:pointer;
}
.cartao-login button:hover{filter:brightness(1.08);}
.erro{color:var(--perdido); font-size:13.5px; text-align:center;}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;}
  .sidebar{flex-direction:row; align-items:center; overflow-x:auto;}
  .sidebar nav{flex-direction:row;}
  .sidebar-rodape{border:none; padding:0 14px;}
  .colunas-detalhe{grid-template-columns:1fr;}
}

/* segmentações */
.botao{
  display:inline-block; background:var(--acento-vivo); color:#0C1813; border:none; border-radius:10px;
  padding:9px 18px; font:inherit; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer;
  transition:transform .08s ease, filter .12s ease;
}
.botao:hover{filter:brightness(1.06); transform:translateY(-1px);}
.botao.secundario{background:var(--painel); color:var(--tinta); border:1.5px solid var(--linha); font-weight:600;}
.botao.secundario:hover{border-color:var(--acento);}
.botao.perigo{background:#fff; color:var(--perdido); border:1.5px solid var(--perdido);}
.aviso{border-radius:6px; padding:10px 14px; font-size:14px;}
.aviso.error{background:rgba(169,68,65,.1); color:var(--perdido);}
.aviso.success{background:var(--acento-claro); color:var(--acento);}
.form-seg{background:var(--painel); border:1px solid var(--linha); border-radius:14px; padding:22px 24px; max-width:820px; box-shadow:0 1px 3px rgba(18,22,19,.05);}
.linha-form{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-seg label{display:block; font-size:13px; font-weight:600;}
.form-seg label input{width:100%; margin-top:4px; font-weight:400;}
.form-seg fieldset{border:none; margin:16px 0 6px; padding:0; display:flex; gap:18px; align-items:center;}
.form-seg legend{font-size:13px; font-weight:600; margin-bottom:6px;}
.radio{font-weight:400 !important; font-size:14px !important; display:flex; align-items:center; gap:6px;}
.condicao{display:grid; grid-template-columns:1fr 180px 1fr 34px; gap:8px; margin-bottom:8px; align-items:center;}
.condicao .remover{
  background:none; border:1px solid var(--linha); border-radius:6px; height:34px;
  font-size:16px; color:var(--suave); cursor:pointer;
}
.condicao .remover:hover{color:var(--perdido); border-color:var(--perdido);}
.acoes-form{display:flex; gap:10px; margin-top:18px;}
.resumo-condicoes{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px;}
.regra-combinador{font-size:12px; color:var(--suave); text-transform:uppercase; letter-spacing:.06em;}
.regra{
  background:var(--painel); border:1px solid var(--linha); border-radius:14px;
  padding:3px 12px; font-size:13px;
}

/* automações */
.st-ativa{background:var(--venda);}
.st-sombra{background:var(--qualificado);}
.st-pausada{background:var(--suave);}
.st-rascunho{background:var(--oportunidade);}
.log-executado{background:var(--venda);}
.log-sombra{background:var(--qualificado);}
.log-agendado{background:var(--suave);}
.log-encerrado{background:var(--oportunidade);}
.log-erro{background:var(--perdido);}
.form-automacao{max-width:980px;}
.form-automacao h2{margin-top:26px;}
.linha-gatilho{grid-template-columns:220px 1fr;}
.reentrada{margin-top:12px;}
.passo-linha{
  display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap;
  background:var(--fundo); border:1px solid var(--linha); border-radius:8px; padding:8px 10px;
}
.passo-num{
  width:24px; height:24px; border-radius:50%; background:var(--acento-claro); color:var(--acento);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;
}
.passo-linha .slot{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.passo-linha input[type=number]{width:80px;}
.passo-linha .remover{
  margin-left:auto; background:none; border:1px solid var(--linha); border-radius:6px;
  width:30px; height:30px; font-size:15px; color:var(--suave); cursor:pointer; flex-shrink:0;
}
.passo-linha .remover:hover{color:var(--perdido); border-color:var(--perdido);}
.acoes-status{display:flex; gap:10px; align-items:center;}
.barra-status{display:flex; justify-content:space-between; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.barra-status form{display:flex; gap:8px;}
.colunas-automacao{grid-template-columns:380px 1fr;}
.fluxo{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.fluxo-passo{
  border-left:3px solid var(--acento); background:var(--fundo); border-radius:0 6px 6px 0;
  padding:8px 12px; font-size:13.5px;
}
.fluxo-passo.tipo-espera{border-left-color:var(--suave);}
.fluxo-passo.tipo-condicao{border-left-color:var(--oportunidade);}
.fluxo-passo b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--suave);}
.tabela-log td{font-size:13px;}

/* e-mail */
.abas{display:flex; gap:2px; margin-bottom:18px; border-bottom:1px solid var(--linha);}
.abas a{padding:8px 16px; color:var(--suave); text-decoration:none; font-size:14px; border-bottom:2px solid transparent;}
.abas a.ativa{color:var(--acento); border-bottom-color:var(--acento); font-weight:600;}
.cp-rascunho{background:var(--oportunidade);}
.cp-enviando{background:var(--qualificado);}
.cp-concluida{background:var(--venda);}
.cp-pausada{background:var(--suave);}
.metricas{display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap;}
.metrica{background:var(--painel); border:1px solid var(--linha); border-radius:14px; padding:14px 24px; text-align:center; box-shadow:0 1px 3px rgba(18,22,19,.05);}
.metrica b{display:block; font-family:var(--titulo); font-weight:800; font-size:24px; font-variant-numeric:tabular-nums;}
.metrica span{font-size:12px; color:var(--suave);}
.form-template{max-width:980px;}
.form-template textarea{width:100%; font-family:ui-monospace,Menlo,monospace; font-size:13px; margin-top:4px;}
.form-seg code{background:var(--acento-claro); color:var(--acento); border-radius:4px; padding:1px 6px; font-size:12px;}
.evento.tipo-email_entregue .ponto{background:var(--venda);}
.evento.tipo-descadastro .ponto{background:var(--perdido);}

/* landing pages */
.lp-rascunho{background:var(--oportunidade);}
.lp-publicada{background:var(--venda);}
.lp-arquivada{background:var(--suave);}
.form-seg textarea{width:100%; font:inherit; padding:8px 12px; border:1px solid var(--linha); border-radius:6px; margin-top:4px;}

/* painel */
.grade-painel{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px;}
.cartao-grafico{background:var(--painel); border:1px solid var(--linha); border-radius:14px; padding:20px 22px; box-shadow:0 1px 3px rgba(18,22,19,.05);}
.cartao-grafico h2{margin-top:0;}
.colunas-dias{display:flex; align-items:flex-end; gap:2px; height:140px; margin-top:10px;}
.coluna-dia{flex:1; display:flex; align-items:flex-end; height:100%; min-width:3px;}
.coluna-barra{width:100%; background:var(--acento); border-radius:3px 3px 0 0; min-height:2px; opacity:.9;}
.coluna-dia:hover .coluna-barra{opacity:1; filter:brightness(1.15);}
.eixo-dias{display:flex; justify-content:space-between; font-size:11px; color:var(--suave); margin-top:6px;}
.barras-h{display:grid; gap:10px; margin-top:12px;}
.barra-h-linha{display:grid; grid-template-columns:140px 1fr 48px; gap:10px; align-items:center;}
.barra-h-rotulo{font-size:13px; color:var(--suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.barra-h-trilha{background:var(--fundo); border-radius:4px; height:14px; overflow:hidden;}
.barra-h-fill{background:var(--acento); height:100%; border-radius:4px; min-width:2px;}
.barra-h-valor{font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right;}
.grande-num{font-size:16px;}
.barra-h-valor.alerta{color:var(--perdido);}
.nota-grafico{font-size:13px; color:var(--suave); margin:6px 0 12px;}
@media (max-width:1000px){.grade-painel{grid-template-columns:1fr;}}

/* integrações */
.cards-integracao{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px;}
.card-integracao{background:var(--painel); border:1px solid var(--linha); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:8px; box-shadow:0 1px 3px rgba(18,22,19,.05);}
.ci-topo{display:flex; align-items:center; gap:8px; font-size:15px;}
.ci-status{width:10px; height:10px; border-radius:50%; background:var(--linha); flex-shrink:0;}
.ci-status.on{background:var(--venda);}
.card-integracao p{margin:0; font-size:13.5px; color:var(--suave);}
.ci-webhook{font-size:11px; background:var(--fundo); border-radius:4px; padding:3px 8px; cursor:pointer; overflow-wrap:anywhere;}
.ci-acoes{display:flex; gap:8px; align-items:center; margin-top:auto; flex-wrap:wrap;}
.ci-quando{font-size:11.5px; color:var(--suave);}

.marca-sub{
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sidebar-tinta); margin-left:8px; vertical-align:2px;
}

/* ============ interface v2 ============ */
/* sidebar com ícones e grupos */
.sidebar{width:236px; padding:22px 0 16px;}
.layout{grid-template-columns:236px 1fr;}
.nav-grupo{
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(159,176,163,.55); padding:16px 20px 6px;
}
.nav-item{display:flex; align-items:center; gap:11px; padding:9px 20px; font-size:14px; border-left:3px solid transparent; transition:background .1s ease;}
.nav-item:hover{background:rgba(255,255,255,.04); color:#fff;}
.nav-item svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; opacity:.85;}
.nav-item.ativo{padding-left:17px;}
.nav-item.ativo svg{stroke:var(--acento-vivo); opacity:1;}

/* avatares */
.avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--acento-claro); color:var(--acento);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--titulo); font-weight:800; font-size:14px;
}
.avatar-rodape{width:28px; height:28px; font-size:12px; background:rgba(0,230,118,.15); color:var(--acento-vivo);}
.avatar-g{width:56px; height:56px; font-size:22px;}
.sidebar-rodape{display:flex; align-items:center; gap:10px;}
.sidebar-rodape .usuario{flex:1;}
.sair{display:flex; padding:6px; border-radius:8px; text-decoration:none;}
.sair svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.sair:hover{background:rgba(255,255,255,.06); color:#fff;}

/* cabeçalho de página */
.pagina-cabecalho{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:22px; flex-wrap:wrap;}
.eyebrow{
  margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acento);
}
.pagina-cabecalho h1{font-size:28px; margin:0;}

/* KPIs com delta */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:18px;}
.kpi{
  display:flex; gap:14px; align-items:center;
  background:var(--painel); border:1px solid var(--linha); border-radius:14px;
  padding:16px 18px; box-shadow:0 1px 3px rgba(18,22,19,.05);
}
.kpi-icone{
  width:42px; height:42px; border-radius:12px; background:var(--acento-claro);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.kpi-icone svg{width:20px; height:20px; fill:none; stroke:var(--acento); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.kpi-rotulo{font-size:12px; color:var(--suave); display:block;}
.kpi-linha{display:flex; align-items:baseline; gap:8px;}
.kpi-linha b{font-family:var(--titulo); font-weight:800; font-size:24px; font-variant-numeric:tabular-nums;}
.delta{font-size:11.5px; font-weight:700; border-radius:999px; padding:1px 8px;}
.delta.up{background:var(--acento-claro); color:var(--acento);}
.delta.down{background:rgba(239,68,68,.1); color:var(--perdido);}

/* topo dos cartões */
.cartao-topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.cartao-topo h2{margin:0;}
.cartao-sub{font-size:12px; color:var(--suave);}
.cartao-sub.link{color:var(--acento); text-decoration:none; font-weight:600;}
.grade-painel .cartao-grafico > .barras-h, .grade-painel .cartao-grafico > .colunas-dias{margin-top:16px;}

/* busca com ícone */
.campo-busca{position:relative; flex:1; min-width:280px;}
.campo-busca svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; fill:none; stroke:var(--suave); stroke-width:2; stroke-linecap:round;
}
.campo-busca input{width:100%; padding-left:36px;}
.filtros .campo-busca input[type=search]{min-width:0;}

/* tabela de leads com pessoa */
.tabela-leads td{padding:12px 14px;}
.pessoa{display:flex; align-items:center; gap:12px;}
.pessoa-info{display:flex; flex-direction:column; line-height:1.3;}
.pessoa-info a{color:var(--tinta); font-weight:600; text-decoration:none; font-size:14px;}
.pessoa-info span{font-size:12.5px; color:var(--suave);}
.col-suave{color:var(--suave); font-size:13.5px;}
.col-seta{color:var(--linha); font-size:18px; font-weight:700; text-align:right; width:30px;}
.tabela tbody tr:hover .col-seta{color:var(--acento);}

/* cabeçalho do lead */
.cabecalho-lead{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--painel); border:1px solid var(--linha); border-radius:14px;
  padding:20px 24px; margin:12px 0 20px; box-shadow:0 1px 3px rgba(18,22,19,.05);
}
.cabecalho-lead-info{flex:1; min-width:240px;}
.cabecalho-lead h1{font-size:22px; margin:0 0 6px;}
.chips-contato{display:flex; gap:8px; flex-wrap:wrap;}
.chip-info{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--fundo); border:1px solid var(--linha); border-radius:999px;
  padding:3px 12px; font-size:12.5px; color:var(--suave);
}
.chip-info svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8;}

/* empty state */
.vazio-bloco{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:44px 20px; text-align:center;
}
.vazio-bloco svg{width:34px; height:34px; fill:none; stroke:var(--linha); stroke-width:1.6; margin-bottom:4px;}
.vazio-bloco b{font-family:var(--titulo); font-size:15px;}
.vazio-bloco span{font-size:13px; color:var(--suave);}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;}
  .nav-grupo{display:none;}
}

/* ============ interface v3 — estrutura do RD ============ */
body.app{display:flex; flex-direction:column; min-height:100vh;}

/* topbar branca como a do RD */
.topbar{
  height:56px; background:#fff; border-bottom:1px solid var(--linha);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; position:sticky; top:0; z-index:50;
}
.topbar-marca{display:flex; align-items:center; gap:14px;}
.topbar .logo{
  font-family:var(--titulo); font-weight:800; font-size:19px; letter-spacing:-.02em;
  color:var(--tinta); text-decoration:none;
}
.topbar .logo span{color:var(--acento);}
.topbar-divisor{width:1px; height:24px; background:var(--linha);}
.topbar-produto{font-family:var(--titulo); font-weight:700; font-size:15px; color:var(--acento);}
.topbar-direita{display:flex; align-items:center; gap:10px;}
.avatar-top{width:30px; height:30px; font-size:12.5px;}
.topbar-user{font-size:13.5px; color:var(--suave);}
.sair-top{
  display:flex; padding:7px; border:none; background:none; border-radius:8px;
  color:var(--suave); cursor:pointer;
}
.sair-top svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.sair-top:hover{background:var(--fundo); color:var(--tinta);}

/* corpo: rail escuro de ícones + conteúdo */
.corpo{display:flex; flex:1; min-height:0;}
.rail{
  width:60px; background:var(--sidebar); padding:10px 0; flex-shrink:0;
  display:flex; flex-direction:column; gap:2px;
  position:sticky; top:56px; height:calc(100vh - 56px);
}
.rail-item{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:46px; color:#8FA394; border-left:3px solid transparent;
}
.rail-item svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.rail-item:hover{color:#fff; background:rgba(255,255,255,.05);}
.rail-item.ativo{color:var(--acento-vivo); background:rgba(0,230,118,.12); border-left-color:var(--acento-vivo);}
.rail-tip{
  display:none; position:absolute; left:64px; top:50%; transform:translateY(-50%);
  background:var(--sidebar); color:#fff; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:7px; white-space:nowrap; z-index:60;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.rail-item:hover .rail-tip{display:block;}

.corpo .conteudo{flex:1; padding:26px 32px; max-width:1280px;}

/* pills de status em uppercase, como no RD */
.badge{
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  border-radius:5px; padding:3px 9px;
}
.badge.grande{font-size:12px; padding:6px 14px; border-radius:7px;}

/* tabelas no clima do RD: cabeçalho leve, linhas altas, hover suave */
.tabela th{background:#fff; border-bottom:2px solid var(--linha); padding:12px 14px;}
.tabela td{padding:13px 14px;}
.tabela tbody tr:hover{background:#F6FBF7;}

/* botão estilo "Criar fluxo" do RD (escuro) como variante */
.botao.escuro{background:var(--sidebar); color:#fff;}
.botao.escuro:hover{filter:brightness(1.25);}

@media (max-width:900px){
  .rail{position:fixed; bottom:0; top:auto; left:0; right:0; width:100%; height:56px;
        flex-direction:row; justify-content:space-around; padding:0; z-index:50;}
  .rail-item{border-left:none; border-top:3px solid transparent; flex:1;}
  .rail-item.ativo{border-left:none; border-top-color:var(--acento-vivo);}
  .rail-tip{display:none !important;}
  .corpo .conteudo{padding:18px 16px 80px;}
}

/* ============ dataviz v2 ============ */
.grade-painel .span2{grid-column:1 / -1;}

/* KPI com sparkline */
.kpi{flex-direction:column; align-items:stretch; gap:8px;}
.kpi-cima{display:flex; justify-content:space-between; align-items:center;}
.kpi-baixo{display:flex; justify-content:space-between; align-items:flex-end; gap:10px;}
.kpi-baixo b{font-family:var(--titulo); font-weight:800; font-size:26px; font-variant-numeric:tabular-nums; line-height:1;}
.spark{width:96px; height:30px; overflow:visible;}
.spark polyline{fill:none; stroke:var(--acento); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.85;}
.anel{
  width:34px; height:34px; border-radius:50%;
  background:conic-gradient(var(--acento) calc(var(--pct)*1%), var(--linha) 0);
  -webkit-mask:radial-gradient(circle 10px, transparent 98%, #000 100%);
          mask:radial-gradient(circle 10px, transparent 98%, #000 100%);
}

/* gráfico de área com tooltip */
.grafico-area{position:relative; margin-top:14px;}
.grafico-area svg{display:block; width:100%; height:190px;}
.grafico-area .grade{stroke:var(--linha); stroke-width:1;}
.grafico-area .grade.tracejada{stroke-dasharray:3 5;}
.linha-atual{fill:none; stroke:var(--acento); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.area-atual{fill:var(--acento); opacity:.10;}
.linha-prev{fill:none; stroke:var(--suave); stroke-width:1.6; stroke-dasharray:5 5; opacity:.65;}
.cursor{stroke:var(--tinta); stroke-width:1; stroke-dasharray:2 3; opacity:.5;}
.cursor-ponto{fill:var(--acento); stroke:#fff; stroke-width:2;}
.eixo-y{position:absolute; right:2px; font-size:10.5px; color:var(--suave); font-variant-numeric:tabular-nums;}
.eixo-y.topo{top:0;}
.eixo-y.meio{top:44%;}
.tooltip-grafico{
  position:absolute; top:6px; background:var(--sidebar); color:#fff;
  border-radius:8px; padding:8px 12px; font-size:12px; pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.25); min-width:110px; line-height:1.5;
}
.tooltip-grafico b{display:block; font-size:11px; color:var(--acento-vivo); letter-spacing:.04em;}
.tooltip-grafico span{display:block; color:#AEBDB2; font-size:11px;}
.legenda{display:flex; gap:14px;}
.leg{font-size:11.5px; color:var(--suave); display:flex; align-items:center; gap:6px;}
.leg:before{content:''; width:16px; height:0; border-top:2.5px solid var(--acento); border-radius:2px;}
.leg-prev:before{border-top:2px dashed var(--suave);}

/* funil visual com taxas */
.funil-visual{display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:14px;}
.funil-barra-wrap{width:100%; display:flex; justify-content:center;}
.funil-barra{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--acento); color:#fff; border-radius:7px; padding:7px 14px;
  min-width:130px; transition:filter .1s ease;
}
.funil-barra:hover{filter:brightness(1.1);}
.funil-barra-wrap:nth-child(n+3) .funil-barra{background:color-mix(in oklab, var(--acento) 82%, #fff);}
.funil-barra-wrap:nth-child(n+5) .funil-barra{background:color-mix(in oklab, var(--acento) 64%, #fff);}
.funil-barra-wrap:nth-child(n+7) .funil-barra{background:color-mix(in oklab, var(--acento) 46%, #fff); color:var(--tinta);}
.funil-barra-wrap:last-child .funil-barra{background:var(--fundo); color:var(--suave); border:1px dashed var(--linha);}
.funil-nome{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.funil-n{font-family:var(--titulo); font-weight:800; font-size:15px; font-variant-numeric:tabular-nums;}
.funil-taxa{font-size:11px; font-weight:700; color:var(--suave); padding:1px 0;}

/* jornada do e-mail */
.fill-suave{background:color-mix(in oklab, var(--acento) 70%, #fff);}
.barra-h-valor .pct{font-style:normal; color:var(--suave); font-weight:400; font-size:11px; margin-left:2px;}
.cartao-sub.alerta{color:var(--perdido); font-weight:700;}

/* feed de conversões */
.feed{display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; margin-top:12px;}
.feed-item{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--tinta);
  padding:9px 10px; border-radius:10px;
}
.feed-item:hover{background:var(--fundo);}
.feed-info{flex:1; min-width:0; line-height:1.3;}
.feed-info b{display:block; font-size:13.5px;}
.feed-info span{font-size:12px; color:var(--suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
.feed-quando{font-size:11.5px; color:var(--suave); white-space:nowrap;}
@media (max-width:900px){.feed{grid-template-columns:1fr;}}