/* ============================================================
   Ultra Bruxo — UI neutra, moderna e premium.
   Interface 100% neutra (grafite/branco). Cor APENAS nos dados:
   verde = positivo, vermelho = negativo, âmbar = faixa intermediária.
   Suporta tema escuro (padrão) e claro via [data-theme].
   ============================================================ */

/* -------- Tema ESCURO (padrão) -------- */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:            #0B0B0E;
    --bg-soft:       #111114;
    --surface:       #16161B;
    --surface-2:     #1C1C22;
    --surface-hover: #212129;
    --border:        #26262E;
    --border-strong: #36363F;
    --text:          #F4F4F5;
    --text-2:        #A1A1AA;
    --text-3:        #71717A;

    /* dados (sinal) */
    --pos:           #3FBF8F;
    --neg:           #E5706B;
    --warn:          #CFA13E;

    /* chrome neutro */
    --ink-bg:        #F4F4F5;   /* botão primário / marca / avatar */
    --ink-fg:        #16161B;
    --ico-bg:        rgba(255,255,255,.05);

    --shadow:        0 1px 2px rgba(0,0,0,.35), 0 14px 34px -20px rgba(0,0,0,.7);
    --shadow-lift:   0 1px 2px rgba(0,0,0,.4), 0 20px 44px -20px rgba(0,0,0,.8);
}

/* -------- Tema CLARO -------- */
:root[data-theme="light"] {
    color-scheme: light;
    --bg:            #FAFAFA;
    --bg-soft:       #FFFFFF;
    --surface:       #FFFFFF;
    --surface-2:     #F6F6F7;
    --surface-hover: #F1F1F4;
    --border:        #E7E7EA;
    --border-strong: #D4D4DA;
    --text:          #18181B;
    --text-2:        #52525B;
    --text-3:        #8A8A93;

    --pos:           #15A34A;
    --neg:           #DC2626;
    --warn:          #B45309;

    --ink-bg:        #18181B;
    --ink-fg:        #FAFAFA;
    --ico-bg:        rgba(0,0,0,.045);

    --shadow:        0 1px 2px rgba(17,17,20,.05), 0 10px 26px -16px rgba(17,17,20,.16);
    --shadow-lift:   0 1px 3px rgba(17,17,20,.08), 0 18px 40px -18px rgba(17,17,20,.22);
}

:root {
    --r:    16px;
    --r-md: 12px;
    --r-sm: 9px;
    --mono: 'Space Grotesk', 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    --ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background .2s ease, color .2s ease;
}

a { color: inherit; text-decoration: none; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.unit { color: var(--text-3); font-size: 0.82em; margin-left: 1px; }

/* sinais (dados) */
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }
.neutral { color: var(--text-3); }
.t2 { color: var(--text-2); }

/* ----------------------------------------------------------------
   Shell: sidebar + main
   ---------------------------------------------------------------- */
.shell { display: flex; align-items: flex-start; min-height: 100vh; }

.sidebar {
    position: sticky; top: 0; height: 100vh;
    flex: 0 0 244px;
    display: flex; flex-direction: column; gap: 6px;
    padding: 22px 16px;
    background: var(--bg-soft);
    border-right: 1px solid var(--border);
}
.brand {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 18px;
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.brand-mark { display: inline-flex; align-items: center; }
.brand-logo { height: 26px; width: auto; display: block; }
.only-light { display: none; }
:root[data-theme="light"] .only-light { display: block; }
:root[data-theme="light"] .only-dark { display: none; }
.login-brand .brand-logo { height: 30px; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    padding: 9px 11px;
    border: none; background: transparent;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-family: var(--ui); font-size: 13.5px; text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: var(--surface-hover); color: var(--text); }
.nav-item.active .nav-ico { color: var(--text); }
.nav-ico { display: grid; place-items: center; width: 18px; height: 18px; color: var(--text-3); }
.nav-badge { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 600;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex;
    align-items: center; justify-content: center; color: var(--accent);
    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.nav-ico svg { width: 18px; height: 18px; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding-top: 14px; border-top: 1px solid var(--border); }
.user { display: flex; align-items: center; gap: 10px; padding: 6px 11px 10px; }
.user-avatar {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    font-size: 12px; font-weight: 600;
    color: var(--ink-fg); background: var(--ink-bg);
}
.user-name { font-size: 13.5px; color: var(--text); }

.main {
    flex: 1 1 auto; min-width: 0; width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding: 30px 32px 90px;
}

/* ----------------------------------------------------------------
   Cabeçalho de página
   ---------------------------------------------------------------- */
.topbar {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px; flex-wrap: wrap; margin-bottom: 30px;
}
.topbar-left h1 { margin: 2px 0 5px; font-size: 23px; font-weight: 600; letter-spacing: -0.02em; }
.sub { margin: 0; color: var(--text-2); font-size: 13px; }
.topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* Linha de acoes do cabecalho (ex.: "Ver campanhas" + "Novo funil").
   Era style inline no HTML — e, por ser inline, vencia o @media de 720px:
   no celular os dois botoes ficavam colados na direita, desalinhados do
   seletor de periodo e dos cards (todos de ponta a ponta). */
.topbar-acts { display: flex; gap: 8px; }

.back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; margin-bottom: 6px; transition: color .15s ease; }
.back:hover { color: var(--text); }
.back .arrow { font-size: 15px; }
.navlinks { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ----------------------------------------------------------------
   Próxima meta (faturamento acumulado da conta) — topo do Dashboard
   ---------------------------------------------------------------- */
.goal {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); box-shadow: var(--shadow);
    font-size: 12.5px; color: var(--text-2); white-space: nowrap;
}
.goal-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; }
.goal-ico svg { width: 16px; height: 16px; }
.goal-name { font-weight: 500; letter-spacing: -0.01em; }
.goal-track {
    position: relative; width: 108px; height: 6px; flex: 0 0 auto;
    border-radius: 999px; background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border);
    overflow: hidden;
}
.goal-fill {
    position: absolute; inset: 0 auto 0 0; min-width: 6px;
    border-radius: 999px; background: var(--pos);
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.goal-nums { font-family: var(--mono); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.goal-nums b { color: var(--text); font-weight: 600; }
.goal-slash { color: var(--text-3); margin: 0 4px; }
.goal.is-done .goal-ico { color: var(--pos); }

/* ----------------------------------------------------------------
   Botões
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px;
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--ui); font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn-ico { width: 15px; height: 15px; display: block; }
.btn-primary {
    color: var(--ink-fg); background: var(--ink-bg);
    border-color: transparent;
}
.btn-primary:hover { color: var(--ink-fg); background: var(--ink-bg); border-color: transparent; filter: brightness(.94); } /* .btn:hover tem a mesma especificidade e escurecia o fundo: texto escuro em fundo escuro */

/* ----------------------------------------------------------------
   Seletor de período
   ---------------------------------------------------------------- */
.period { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.seg-group {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px; gap: 2px;
}
.seg {
    padding: 6px 13px;
    background: transparent; color: var(--text-2);
    border: none; border-radius: 7px;
    font-family: var(--ui); font-size: 13px; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.seg:hover { color: var(--text); }
.seg.active { background: var(--surface-hover); color: var(--text); }

.seg-custom { display: none; align-items: center; gap: 8px; }
.seg-custom.open { display: inline-flex; }
.seg-custom input[type="date"] {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-sm); color: var(--text);
    font-family: var(--mono); font-size: 12px; padding: 7px 9px;
}
.seg-custom .seg { border: 1px solid var(--border); background: var(--surface); }
.seg-custom .dash { color: var(--text-3); }

/* ----------------------------------------------------------------
   Container-pai do cliente / conta + cartões de métrica
   ---------------------------------------------------------------- */
.client-stack { display: flex; flex-direction: column; gap: 18px; margin-bottom: 34px; }

/* Arrastar para reordenar */
.client-row { position: relative; }
.client-row .client-card { padding-left: 32px; }
.drag-grip {
    position: absolute; left: 5px; top: 0; bottom: 0;
    width: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-3); cursor: grab; opacity: .35;
    transition: opacity .15s ease, color .15s ease;
    z-index: 2;
}
.client-row:hover .drag-grip { opacity: .8; }
.drag-grip:active { cursor: grabbing; }
.drag-grip svg { width: 16px; height: 16px; display: block; }
.client-row.dragging { opacity: .55; }
.client-row.dragging .client-card { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }

.client-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 15px;
    box-shadow: var(--shadow);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.client-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
a.client-card:hover .cc-chevron { color: var(--text); transform: translateX(3px); }

.cc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.cc-avatar {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 33px; height: 33px;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    color: var(--ink-fg); background: var(--ink-bg);
    overflow: hidden;
}
.cc-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cc-name { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.cc-sub { font-size: 12px; color: var(--text-3); }
/* Selo de frescor (Fase 4): verde < 15 min, âmbar 15-60, vermelho > 60/falha */
.cc-fresh { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; vertical-align: 1px; }
.cc-fresh--ok   { color: #15803d; background: rgba(34,197,94,.14); }
.cc-fresh--warn { color: #b45309; background: rgba(245,158,11,.16); }
.cc-fresh--bad  { color: #b91c1c; background: rgba(239,68,68,.16); }
.cc-chevron { margin-left: auto; color: var(--text-3); font-size: 16px; transition: color .15s ease, transform .15s ease; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 11px; min-width: 0;
    /* Container de consulta: o valor abaixo dimensiona a fonte pela largura DESTE
       card, não da tela. Com 6 cards numa linha de 1080px cada um fica ~155px, e
       "R$ 191.886,85" em 18,5px não cabia — o número aparecia cortado ("R$ 20.385,…"). */
    container-type: inline-size;
}
.stat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.stat-ico {
    flex: 0 0 auto; width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--ico-bg); color: var(--text-2);
}
.stat-ico svg { width: 14px; height: 14px; display: block; }
.stat-label { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-weight: 500; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-info { flex: 0 0 auto; width: 13px; height: 13px; color: var(--text-3); opacity: .5; }
.stat-info:hover { opacity: 1; }
/* Fonte proporcional à largura do card (11,5% dela), com piso e teto: em cards
   largos mantém os 18,5px de sempre; quando aperta, encolhe até 13,5px em vez de
   truncar o número. Calibrado medindo no Chrome em 760/880/1000/1060/1120/1220/
   1440/1905px: zero cortes nos valores reais em todas essas larguras. */
.stat-val { font-size: clamp(13.5px, 11.5cqi, 18.5px); font-weight: 600; line-height: 1.1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.03em; }

/* ----------------------------------------------------------------
   Blocos / tabela "Dia a dia"
   ---------------------------------------------------------------- */
.block { margin-bottom: 30px; }
.block-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0 0 14px; }
.block-hint { color: var(--text-3); font-weight: 400; }

.table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow-x: auto;
    background: var(--surface);
    box-shadow: var(--shadow);
}
table.daily { width: 100%; border-collapse: collapse; font-size: 13px; }
table.daily thead th {
    font-size: 12px; font-weight: 500; color: var(--text-3);
    text-align: right; padding: 13px 16px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
    background: var(--bg-soft);
}
table.daily thead th.l { text-align: left; }
table.daily tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; color: var(--text); }
table.daily tbody tr:last-child td { border-bottom: none; }
table.daily tbody tr:hover td { background: var(--surface-hover); }
table.daily td.l { text-align: left; }
table.daily td.date { color: var(--text-2); }

/* Resumo do período: Média/dia abre a tabela, Total fecha. Fundo levemente
   distinto pra ler como "não é um dia" sem virar outro bloco visual. */
table.daily tr.sum-row td {
    padding: 13px 16px; background: var(--bg-soft);
    color: var(--text); font-weight: 500;
}
table.daily tbody.sum-top tr.sum-row td { border-bottom: 1px solid var(--border); }
table.daily tfoot tr.sum-row td { border-top: 1px solid var(--border); text-align: right; white-space: nowrap; }
table.daily tr.sum-row:hover td { background: var(--bg-soft); }   /* resumo não é linha clicável */
table.daily tr.sum-row td.l {
    text-align: left; color: var(--text-2); font-weight: 500;
    font-size: 12px; letter-spacing: .02em;
}
table.daily tr.sum-row .sum-hint { color: var(--text-3); font-weight: 400; }

/* Cor NOS VALORES (Lucro e ROAS): vence as cores neutras de base.
   Faturamento e Tráfego seguem neutros (sem classe de cor / .t2). */
.stat-val.pos,     table.daily td.pos     { color: var(--pos); }
.stat-val.neg,     table.daily td.neg     { color: var(--neg); }
.stat-val.warn,    table.daily td.warn    { color: var(--warn); }
.stat-val.neutral, table.daily td.neutral { color: var(--text-3); }
.stat-val.t2,      table.daily td.t2      { color: var(--text-2); }
.empty-row { color: var(--text-3); text-align: left; padding: 20px 16px; }

/* ----------------------------------------------------------------
   Últimas vendas
   ---------------------------------------------------------------- */
/* Largura de coluna DETERMINÍSTICA (table-layout: fixed + <colgroup>).
   Com o layout automático o navegador distribuía o que sobrava, e como todas as
   colunas são nowrap menos "Origem", quem apanhava era sempre a Origem: em tela
   mais estreita (MacBook) ela encolhia até ~80px e o nome do anúncio descia letra
   por letra, enquanto num monitor 1920px sobrava espaço e parecia normal. Fixo, o
   resultado é o mesmo em qualquer máquina; abaixo de 1000px o .table-wrap rola na
   horizontal em vez de espremer. */
table.sales { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; min-width: 1120px; }
table.sales col.c-date { width: 158px; }
table.sales col.c-cli  { width: 212px; }
table.sales col.c-orig { width: 224px; }
table.sales col.c-pay  { width: 138px; }
table.sales col.c-val  { width: 112px; }
table.sales col.c-st   { width: 118px; }
/* col.c-prod não tem width: fica com toda a sobra (o nome do produto é o texto
   mais longo e é o que deve crescer quando há espaço). */
table.sales thead th {
    font-size: 12px; font-weight: 500; color: var(--text-3);
    text-align: right; padding: 13px 16px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
    background: var(--bg-soft);
}
table.sales thead th.l { text-align: left; }
table.sales tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
table.sales tbody tr:last-child td { border-bottom: none; }
table.sales tbody tr:hover td { background: var(--surface-hover); }
table.sales td.l { text-align: left; }
table.sales td.date { color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Data/hora nunca vira "21:…" (20/10/2026): a coluna cabe a setinha do grupo +
   o recuo dos itens, e a célula não corta com reticências. */
table.sales tbody td.date { overflow: visible; text-overflow: clip; }
table.sales td.muted { color: var(--text-3); }
/* Produto: nome elástico com "…" e selos (OB/Upsell/Renov./AF) fixos à direita.
   Sem isso o nome comprido de order bump empurrava o selo pra fora da célula e a
   linha ficava sem dizer o que era aquela venda. O corte do texto é feito antes,
   em sale_product_label(); aqui é a rede de segurança do layout. */
table.sales td.prod { text-align: left; }
table.sales td.prod .prod-cell { display: flex; align-items: center; min-width: 0; }
table.sales td.prod .prod-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
table.sales td.prod .ob-badge,
table.sales td.prod .up-badge,
table.sales td.prod .af-badge { flex: 0 0 auto; }

/* Origem: 2 linhas — em cima o nível mais fundo da atribuição (anúncio, quando
   existe) com a etiqueta da página do teste A/B; embaixo o caminho acima dele
   (campanha › conjunto). */
table.sales td.origin { text-align: left; white-space: normal; }
table.sales td.origin .og-main { display: block; color: var(--text-2); overflow-wrap: anywhere; }
table.sales td.origin .og-sub  { display: block; margin-top: 2px; font-size: 11px; color: var(--text-3); overflow-wrap: anywhere; }
.og-var {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: .02em;
    color: var(--accent, var(--text-2));
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    vertical-align: middle;
}
/* Pagamento: marca + nome (como na tabela da Hotmart). Ícone 15px pra ficar na
   mesma linha-base do texto de 13px da tabela; Pix e PayPal na cor da marca, o
   resto herda a cor do texto secundário. */
table.sales td.pay { text-align: left; }
.pay-cell { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.pay-ico { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex-shrink: 0; color: var(--text-3); }
.pay-ico svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.pay-ico i, .pay-ico i svg { width: 15px; height: 15px; stroke-width: 2; }
.pay-ico.is-pix { color: #32bcad; }
.pay-ico.is-paypal { color: #0070e0; }
.pay-ico.is-apple, .pay-ico.is-gpay, .pay-ico.is-card { color: var(--text-2); }
.pay-lbl { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.pay-x { margin-left: 1px; font-size: 11px; color: var(--text-3); }
table.sales td.pos { color: var(--pos); }
table.sales td.neg { color: var(--neg); }
table.sales td.neutral { color: var(--text); }

/* Compras do mesmo cliente em sequência (20/10/2026): a linha do grupo abre em
   sanfona; os itens ficam recuados embaixo dela. Última coluna = "..." do detalhe. */
table.sales { min-width: 1190px; }
table.sales col.c-act { width: 44px; }
table.sales td.act { padding-left: 0; padding-right: 10px; overflow: visible; }
table.sales tr.grp-head { cursor: pointer; }
table.sales .grp-chev {
    display: inline-block; width: 7px; height: 7px; margin: 0 9px 2px 0;
    border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
    transform: rotate(-45deg); transition: transform .15s ease;
}
table.sales tr.grp-head[aria-expanded="true"] .grp-chev { transform: rotate(45deg); }
table.sales tr.grp-head[aria-expanded="true"] td { border-bottom-color: transparent; }
table.sales tbody tr.grp-item td { background: var(--surface-2); font-size: 12.5px; padding-top: 9px; padding-bottom: 9px; }
table.sales tr.grp-item td.date { padding-left: 32px; padding-right: 8px; }
table.sales tr.grp-item td.prod { padding-left: 26px; }
.grp-count {
    flex: 0 0 auto; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
    font-size: 10.5px; font-weight: 600; color: var(--text-2);
    border: 1px solid var(--border-strong); background: var(--surface-2);
}
.sale-more {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent;
    background: none; color: var(--text-3); cursor: pointer;
}
.sale-more svg { width: 15px; height: 15px; fill: currentColor; }
.sale-more:hover { color: var(--text); background: var(--surface-hover); border-color: var(--border); }

/* Popup do detalhe da venda */
.sd-modal { max-width: 520px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.sd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.sd-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.sd-sub { margin-top: 3px; font-size: 12px; color: var(--text-3); }
.sd-head-r { display: flex; align-items: center; gap: 8px; }
.sd-total { font-size: 16px; font-weight: 600; color: var(--pos); }
.sd-body { overflow-y: auto; padding: 6px 20px 18px; }
.sd-sec { padding: 12px 0; border-bottom: 1px solid var(--border); }
.sd-sec:last-child { border-bottom: none; }
.sd-sec-t { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.sd-prod { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sd-prod-n { font-size: 13px; font-weight: 600; color: var(--text); }
.sd-kv { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 4px 0; font-size: 13px; }
.sd-kv .k { color: var(--text-3); flex: 0 0 auto; }
.sd-kv .v { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); text-align: right; }
.sd-kv .vt { overflow-wrap: anywhere; }
.sd-copy, .sd-wa {
    flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
    border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2);
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.sd-copy:hover { color: var(--text); }
.sd-wa { color: #fff; background: #25d366; border-color: #25d366; }
.sd-wa:hover { filter: brightness(1.08); }
.sd-empty { font-size: 12.5px; color: var(--text-3); }

.ob-badge {
    display: inline-block; margin-left: 7px; padding: 1px 6px;
    border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: .02em;
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    background: color-mix(in srgb, var(--warn) 12%, transparent);
    vertical-align: middle;
}
/* Upsell = compra pós-checkout (1-clique). Cor própria (accent) pra não
   confundir com o OB (warn): são etapas diferentes do funil. */
.up-badge {
    display: inline-block; margin-left: 7px; padding: 1px 6px;
    border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: .02em;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    vertical-align: middle;
}
/* AF = venda com comissão de afiliado. Cor neutra de propósito: não é erro nem
   alerta, é um custo a mais naquela venda (o OB, em warn, marca outra coisa). */
.af-badge {
    display: inline-block; margin-left: 7px; padding: 1px 6px;
    border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: .02em;
    color: var(--text-2);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    vertical-align: middle;
}
.sale-status {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 500; border: 1px solid var(--border-strong);
    color: var(--text-3);
}
.sale-status.sale-ok    { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.sale-status.sale-neg   { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 40%, transparent); background: color-mix(in srgb, var(--neg) 12%, transparent); }
.sale-status.sale-muted { color: var(--text-3); }

/* ----------------------------------------------------------------
   Listas editáveis (contas / clientes)
   ---------------------------------------------------------------- */
.edit-list { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.edit-row {
    display: grid; grid-template-columns: 1.4fr 1.4fr 0.7fr auto;
    align-items: center; gap: 12px; padding: 11px 16px;
    border-bottom: 1px solid var(--border);
}
.edit-row-client { grid-template-columns: 64px 1.6fr 0.9fr 0.5fr 0.8fr 0.6fr; }
/* 4 botoes (Salvar, Acesso, Desativar, Excluir) nao cabiam nos 232px antigos e
   o grupo vazava por cima da coluna Status (overflow:visible). */
.edit-row-client select.inline-input { font-family: var(--ui); }
.edit-row:last-child { border-bottom: none; }
.edit-head { font-size: 12px; color: var(--text-3); background: var(--bg-soft); }
.edit-head .r { text-align: right; }
.row-muted { opacity: 0.5; }

/* Edição no-lugar: em repouso o campo parece TEXTO; a borda/fundo só aparecem
   no hover/foco. Tira a "parede de caixas" e deixa a lista calma e premium. */
.inline-input {
    width: 100%;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--r-sm); color: var(--text);
    font-family: var(--ui); font-size: 13.5px; padding: 8px 10px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    cursor: text;
}
.inline-input.num { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.inline-input:hover { background: var(--bg-soft); border-color: var(--border); }
.inline-input:focus { outline: none; background: var(--bg-soft); border-color: var(--border-strong); cursor: text; }
.inline-input::placeholder { color: var(--text-3); }
/* selects inline: sem cara de <select> em repouso; caret custom no hover */
select.inline-input {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: none; padding-right: 26px;
}
.edit-row { position: relative; }
select.inline-input:hover, select.inline-input:focus {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                      linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
    background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.status-cell { font-size: 12px; }
.actions-cell { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.pill { display: inline-block; padding: 3px 9px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 11px; color: var(--text-3); }
.pill-pos { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.pill-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pill-type { color: var(--text-2); border-color: var(--border-strong); background: var(--surface-2); }

.link { color: var(--text-2); border-bottom: 1px solid var(--border-strong); }
.link:hover { color: var(--text); }

.products-table select, .form-row select, .form-row input, .create-form select {
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--r-sm); color: var(--text);
    font-family: var(--ui); font-size: 13px; padding: 9px 11px;
}
/* min 140 (era 180) e o ID da plataforma embaixo do nome: com Custo + Sem frete a
   tabela passava da tela e o botão "sobra R$" da coluna Custo saía cortado (26/10). */
.products-table select { min-width: 140px; }
.prod-plat-id { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-3); }
/* nome do produto quebra linha (o resto da tabela é nowrap) em vez de empurrar as colunas pra fora */
@media (min-width: 721px) { .products-table tbody td:nth-child(2) { white-space: normal; min-width: 220px; } }
.prod-plat { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.prod-plat img { width: 16px; height: 16px; border-radius: 4px; background: #fff; padding: 1px; object-fit: contain; flex: none; }
.form-row select:focus, .form-row input:focus, .products-table select:focus, .create-form select:focus { outline: none; border-color: var(--border-strong); }

.row-pending td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.row-here td { background: color-mix(in srgb, var(--pos) 9%, transparent); }
.products-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--text); cursor: pointer; }

/* Configurar funil no celular: a tabela de 6–8 colunas rolava de lado e o
   seletor de Tipo (o campo que importa) ficava fora da tela. Cada produto vira
   um cartão: [✓] nome ........ situação / ID ........ N vendas / Tipo (largo). */
@media (max-width: 720px) {
    table.daily.products-table, table.daily.products-table tbody { display: block; width: 100%; }
    table.daily.products-table thead { display: none; }
    table.daily.products-table tbody tr {
        display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
        column-gap: 12px; row-gap: 8px; align-items: center;
        padding: 14px 16px; border-bottom: 1px solid var(--border);
    }
    table.daily.products-table tbody tr:last-child { border-bottom: none; }
    table.daily.products-table tbody tr.row-here    { background: color-mix(in srgb, var(--pos) 9%, transparent); }
    table.daily.products-table tbody tr.row-pending { background: color-mix(in srgb, var(--warn) 8%, transparent); }
    table.daily.products-table tbody td {
        display: block; min-width: 0; padding: 0; border: 0; background: transparent;
        text-align: left; white-space: normal;
    }
    table.daily.products-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1; line-height: 0; }
    table.daily.products-table tbody td:nth-child(2) { grid-column: 2; grid-row: 1; font-weight: 600; overflow-wrap: anywhere; }
    table.daily.products-table tbody td:last-child   { grid-column: 3; grid-row: 1; }
    table.daily.products-table tbody td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 12px; }
    table.daily.products-table tbody td:nth-last-child(2) { grid-column: 3; grid-row: 2; text-align: right; font-size: 12px; }
    table.daily.products-table tbody td:nth-last-child(2)::after { content: ' vendas'; color: var(--text-3); font-family: var(--ui); }
    table.daily.products-table tbody td:nth-child(4) { grid-column: 2 / -1; grid-row: 3; }
    /* e-commerce: venda líquida e "frete é receita" descem, cada um na sua linha */
    table.daily.products-table tbody td:nth-child(n+5):not(:nth-last-child(-n+2)) { grid-column: 2 / -1; }
    table.daily.products-table tbody td:has(> input[name^="net_revenue"]) {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    table.daily.products-table tbody td:has(> input[name^="net_revenue"])::before {
        content: 'Venda líquida (un.)'; font-size: 12px; color: var(--text-2);
    }
    .products-table select { min-width: 0; width: 100%; }
    .products-table .cs { display: block; width: 100%; }
    /* "Salvar" colado na tabela (4px): respiro igual ao resto dos blocos */
    .table-wrap + .form-actions { margin-top: 14px; }
}

/* ----------------------------------------------------------------
   Formulários
   ---------------------------------------------------------------- */
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-row input[type="text"] { flex: 1 1 200px; min-width: 160px; }
.form-actions { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.create-form { display: flex; flex-direction: column; gap: 18px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
/* minmax(0,...) + min-width:0: senao o campo mais largo (o select de tipo,
   com rotulo longo) define o minimo da coluna e o form estourava a tela
   em aparelho estreito (320px). */
.form-grid > .field, .field > .cs { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field span { font-size: 12px; color: var(--text-3); }
.create-form .field > input, .create-form .field > select, .act-row input {
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--r-sm); color: var(--text);
    font-family: var(--ui); font-size: 13px; padding: 9px 11px; width: 100%;
}
.act-row input.num { font-family: var(--mono); font-size: 12px; }
.create-form .field > input:focus, .create-form .field > select:focus, .act-row input:focus { outline: none; border-color: var(--border-strong); }

.act-rows { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.act-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.hint-line { font-size: 12px; color: var(--text-3); margin: 0; }

/* ----------------------------------------------------------------
   Alertas / webhook / vazio
   ---------------------------------------------------------------- */
.alert { border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 15px; font-size: 13px; margin-bottom: 20px; color: var(--text-2); background: var(--surface); }
.alert-pos { border-color: color-mix(in srgb, var(--pos) 35%, var(--border)); color: var(--pos); }
.alert-neg { border-color: color-mix(in srgb, var(--neg) 35%, var(--border)); color: var(--neg); }
.alert-info { color: var(--text-2); }

/* Alerta proativo global (todas as páginas) — cliente em prejuízo com proposta pendente */

.webhook-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.webhook-box code { font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; }

.empty { border: 1px dashed var(--border-strong); border-radius: var(--r); padding: 30px; text-align: center; color: var(--text-2); background: var(--surface); }
.empty a { color: var(--text); border-bottom: 1px solid var(--border-strong); }

/* ----------------------------------------------------------------
   Login
   ---------------------------------------------------------------- */
.auth-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
    width: 100%; max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r);
    padding: 30px 28px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: var(--shadow-lift);
}
.login-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.login-card .sub { margin-bottom: 6px; }
.login-card .field input {
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--r-sm); color: var(--text);
    font-family: var(--ui); font-size: 14px; padding: 11px 13px;
}
.login-card .field input:focus { outline: none; border-color: var(--border-strong); }
.login-card .btn-primary { margin-top: 6px; padding: 12px; }

/* ----------------------------------------------------------------
   Responsivo
   ---------------------------------------------------------------- */
/* Desktop: mobile-bar e backdrop escondidos */
.mobile-bar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 980px) {
    .shell { flex-direction: column; }

    /* Barra fixa no topo: logo + nome + hambúrguer */
    .mobile-bar {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 60;
        padding: 8px 16px; width: 100%;
        background: var(--bg-soft); border-bottom: 1px solid var(--border);
    }
    .mobile-bar .brand { padding: 0; gap: 10px; }
    .mobile-bar .brand-text { display: inline; font-size: 15px; }
    .mobile-bar .nav-toggle {
        display: inline-grid; place-items: center;
        width: 38px; height: 38px; border-radius: 10px;
        border: 1px solid var(--border); background: var(--surface);
        color: var(--text-2); cursor: pointer;
    }
    .mobile-bar .nav-toggle:hover { color: var(--text); border-color: var(--border-strong); }
    .mobile-bar .nav-toggle svg { width: 20px; height: 20px; }

    /* Backdrop escuro */
    .sidebar-backdrop {
        position: fixed; inset: 0; z-index: 69;
        background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
    }
    .sidebar-backdrop[hidden] { display: none; }
    body.menu-open { overflow: hidden; }

    /* Sidebar vira painel fixo que desliza da esquerda */
    .sidebar {
        position: fixed; top: 0; left: -280px; bottom: 0;
        width: 264px; height: 100vh; z-index: 70;
        flex-direction: column; align-items: stretch;
        padding: 22px 16px; gap: 6px;
        border-right: 1px solid var(--border); border-bottom: none;
        transition: left .28s cubic-bezier(.4,0,.2,1);
        box-shadow: none;
    }
    .sidebar.open {
        left: 0;
        box-shadow: 12px 0 40px rgba(0,0,0,.35);
    }
    /* dentro do sidebar slide-in: tudo visível normalmente */
    .sidebar .brand { display: flex; padding: 0 0 6px; }
    .sidebar .brand-text { display: inline; }
    .sidebar .nav { display: flex; flex-direction: column; }
    .sidebar .sidebar-foot { display: flex; flex-direction: column; }
    .nav-item { padding: 12px; width: 100%; justify-content: flex-start; }
    .user { display: none; }
    .js-theme .js-theme-label { display: inline; }
    .main { padding: 20px 16px 70px; }
}
@media (max-width: 860px) {
    .stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .topbar-right { align-items: stretch; width: 100%; }
    /* Os dois botoes dividem a linha inteira, na mesma margem do resto. */
    .topbar-acts { width: 100%; }
    .topbar-acts > .btn { flex: 1 1 0; justify-content: center; }
    .goal { width: 100%; justify-content: flex-start; }
    .goal-track { flex: 1 1 auto; width: auto; min-width: 60px; }
    .goal-name { display: none; }
    .period { align-items: flex-start; width: 100%; }
    .stat-row { grid-template-columns: 1fr 1fr; }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .act-row { grid-template-columns: 1fr; }
    .edit-row, .edit-row-client { grid-template-columns: 1fr; gap: 8px; }
    .edit-head { display: none; }
    .actions-cell { justify-content: flex-start; }
}

/* ----------------------------------------------------------------
   Engrenagem de configuração (impostos) no card
   ---------------------------------------------------------------- */
.cc-gear {
    position: relative;
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; margin-left: auto;
    border-radius: 8px; cursor: pointer; color: var(--text-3);
    border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.cc-refund-badge + .cc-gear { margin-left: 8px; }
.cc-gear:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border); }
.cc-gear svg { width: 17px; height: 17px; }
.cc-gear-dot {
    position: absolute; top: 3px; right: 3px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--pos);
    box-shadow: 0 0 0 2px var(--surface);
}
a.client-card .cc-gear { z-index: 2; }

/* ----------------------------------------------------------------
   Modal
   ---------------------------------------------------------------- */
body.modal-open { overflow: hidden; }
.modal-backdrop {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    width: 100%; max-width: 440px; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--r);
    box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden;
}
.modal-form { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.modal-x { background: none; border: none; color: var(--text-3); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.modal-x:hover { background: var(--surface-hover); color: var(--text); }
.modal-switch { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.modal-switch input { width: 16px; height: 16px; accent-color: var(--pos); }
.modal-field { display: flex; flex-direction: column; gap: 7px; }
.modal-field > label { font-size: 12px; color: var(--text-2); font-weight: 500; }
.modal-field .muted { color: var(--text-3); font-weight: 400; }
.input-suffix { display: flex; align-items: center; gap: 8px; }
.input-suffix input {
    flex: 1; background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 11px; color: var(--text); font-size: 14px;
    font-family: var(--mono);
}
.input-suffix input:focus { outline: none; border-color: var(--border-strong); }
.input-suffix > span { color: var(--text-3); font-size: 13px; }
.modal-hint { font-size: 11px; color: var(--text-3); }
.modal-radios { display: flex; gap: 16px; margin-top: 2px; }
.modal-radios label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.modal-radios input { accent-color: var(--pos); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ----------------------------------------------------------------
   Faixa de métricas secundárias
   ---------------------------------------------------------------- */
/* Flex com wrap, não grid de N colunas fixas. A faixa tem 5 itens no infoproduto
   (Vendas, Reembolsos, Ticket médio, CPA real, Taxas) e 6 no e-commerce; com
   `repeat(4, 1fr)` o 5º item caía sozinho numa segunda linha deixando 3 células
   vazias do lado — era isso que aparecia no MacBook. Com flex: cabendo todos numa
   linha, ficam numa linha (é o caso em qualquer tela de notebook pra cima); se não
   couberem, os que sobram ESTICAM e preenchem a linha, nunca sobra buraco.
   A base de 168px é o ponto em que "Ticket médio"/"Reembolsos" ainda cabem
   inteiros; abaixo disso o item quebra, não espreme. */
.metrics-strip {
    display: flex; flex-wrap: wrap; gap: 1px;
    background: var(--border); border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden; margin-bottom: 18px;
}
.ms-item { flex: 1 1 168px; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: var(--surface); }
.ms-ico { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; color: var(--text-3); }
.ms-ico svg { width: 17px; height: 17px; }
.ms-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ms-label { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.ms-val { font-size: 16.5px; color: var(--text); font-weight: 500; }
.ms-sub { font-size: 12px; color: var(--text-3); }
/* E-commerce mostra 6 itens (faturamento s/frete, frete cobrado, custos gerais, venda
   líquida, custo por venda, vendas) — é a ponte inteira do faturamento até o lucro.
   Base menor porque são 6 numa linha só. */
.metrics-strip.is-ecom .ms-item { flex-basis: 152px; padding: 13px 12px; gap: 9px; }
.metrics-strip.is-ecom .ms-val { font-size: 15.5px; }
/* Celular: 2 por linha (o que sobra estica). */
@media (max-width: 720px) { .metrics-strip .ms-item, .metrics-strip.is-ecom .ms-item { flex-basis: 42%; } }

/* ----------------------------------------------------------------
   Gráficos diários
   ---------------------------------------------------------------- */
.charts-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 22px; }
.chart-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 18px 14px; }
.chart-card canvas { max-width: 100%; }
.chart-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.chart-hint { font-size: 12px; font-weight: 400; color: var(--text-3); }
.chart-box { position: relative; height: 260px; }
.chart-empty { height: 120px; display: grid; place-items: center; color: var(--text-3); font-size: 13px; }
@media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }

/* Cabeçalho do gráfico + legenda própria (limpa) */
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-head .chart-title { margin-bottom: 0; }
.chart-legend { display: flex; align-items: center; gap: 16px; }
.cl-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.cl-item i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@media (max-width: 520px) { .chart-legend { gap: 12px; } .cl-item { font-size: 11px; } }

/* ----------------------------------------------------------------
   Avatar do cliente (foto)
   ---------------------------------------------------------------- */
.cc-avatar.has-img { background: none; padding: 0; }
.cc-avatar img { width: 33px; height: 33px; object-fit: cover; border-radius: 10px; display: block; }

/* Uploader na lista de clientes */
.avatar-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.av-edit {
    position: relative; width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center; cursor: pointer; overflow: hidden;
    background: var(--ink-bg); color: var(--ink-fg); font-weight: 600; font-size: 15px;
    border: 1px solid var(--border);
}
.av-edit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-ph { pointer-events: none; }
.av-cam {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity .15s ease;
}
.av-cam svg { width: 16px; height: 16px; }
.av-edit:hover .av-cam, .av-edit:focus-visible .av-cam { opacity: 1; }
.av-edit.is-busy { opacity: .55; pointer-events: none; }
.av-remove {
    background: none; border: none; color: var(--text-3); font-size: 10.5px;
    cursor: pointer; padding: 0; text-decoration: underline;
}
.av-remove:hover { color: var(--neg); }
@media (max-width: 720px) { .avatar-cell { align-items: flex-start; } }

/* ----------------------------------------------------------------
   Página principal: 2 clientes por linha (só no index, via .client-grid)
   ---------------------------------------------------------------- */
/* Antes: @media (min-width: 1600px) — ou seja, quem decidia era a largura da TELA.
   Num MacBook (1440px lógicos, mesmo com a tela "grande" em pixels físicos) nunca
   batia e a home caía pra 1 cliente por linha; num monitor Windows de 1920px batia
   e ficavam 2. Mesma build, visual diferente — não era Safari vs Chrome, era o
   breakpoint em cima do viewport.
   Agora quem decide é o ESPAÇO REAL do conteúdo (.main tem max-width 1360px): se
   couberem dois cards de 512px, são dois por linha — em qualquer SO, tela ou zoom.
   min(512px, 100%) evita estourar a largura no celular (< 512px de conteúdo). */
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(512px, 100%), 1fr));
    gap: 16px; align-items: start;
}
.client-grid .client-row .client-card { padding-left: 28px; }
/* O card vira container de consulta: as métricas compactam quando ELE aperta
   (2 por linha), não quando a janela aperta — mesmo critério do .stat lá em cima.
   Nome explícito porque .stat também é container (sem nome) e herdaria a regra. */
.client-grid .client-card { container-type: inline-size; container-name: clientcard; }
@container clientcard (max-width: 620px) {
    .stat { padding: 11px 9px; }
    .stat-top { margin-bottom: 8px; gap: 5px; }
    .stat-ico { width: 26px; height: 26px; }
    .stat-ico svg { width: 15px; height: 15px; }
    /* Rótulos mais longos (ex.: "Tráfego c/ imposto", "ROAS líquido") têm que caber
       inteiros no card estreito — truncado virava "Tráfego (com ...". */
    .stat-label { font-size: 11px; letter-spacing: -0.01em; }
    /* Nada de font-size fixo aqui: o clamp(...cqi) de .stat-val encolhe o número
       pela largura do card. Fixar 16px (como era na regra antiga de 1600px)
       desligava esse ajuste e cortava "R$ 191.886,85" com reticências.
       Piso/percentual menores que os da faixa larga porque aqui o .stat tem
       ~120px: 10,4% disso ainda cabe 13 caracteres do número. */
    .stat-val { font-size: clamp(12px, 10.4cqi, 16.5px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
}

/* ----------------------------------------------------------------
   Mobile: métricas empilhadas (uma embaixo da outra) + menu rolável
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
    .cc-name { font-size: 15px; }
    .main { padding: 20px 14px 70px; }
    .seg-group { flex-wrap: wrap; }
}

/* ----------------------------------------------------------------
   Sincronizar como ícone, ao lado do seletor de período
   ---------------------------------------------------------------- */
.period-bar { display: flex; align-items: flex-start; gap: 10px; }
.icon-btn {
    flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: var(--r-sm); border: 1px solid var(--border);
    background: var(--surface); color: var(--text-2); cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.icon-btn svg { width: 17px; height: 17px; }

/* ----------------------------------------------------------------
   Calendário de intervalo (Custom)
   ---------------------------------------------------------------- */
.period { position: relative; }
.cal-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    display: flex;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r); box-shadow: var(--shadow-lift); overflow: hidden;
}
.cal-pop[hidden] { display: none; }
.cal-presets { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-right: 1px solid var(--border); min-width: 152px; }
.cal-presets button {
    text-align: left; background: none; border: none; cursor: pointer;
    color: var(--text-2); font-size: 13px; padding: 8px 10px; border-radius: 8px;
}
.cal-presets button:hover { background: var(--surface-hover); color: var(--text); }
.cal-presets button.is-active { background: var(--surface-hover); color: var(--text); font-weight: 600; }
.cal-main { padding: 14px 16px; }
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-arrow {
    flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer;
    background: none; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-2); font-size: 16px; line-height: 1;
}
.cal-arrow:hover { background: var(--surface-hover); color: var(--text); }
.cal-titles { flex: 1 1 auto; display: flex; justify-content: space-around; gap: 16px; font-size: 13px; font-weight: 600; color: var(--text); text-transform: capitalize; }
.cal-months { display: flex; gap: 22px; }
.cal-month { width: 224px; }
.cal-wd, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 0; }
.cal-wd { margin-bottom: 6px; }
.cal-wd span { text-align: center; font-size: 11px; color: var(--text-3); padding: 2px 0; }
.cal-grid { row-gap: 3px; }
.cal-empty { aspect-ratio: 1 / 1; }
.cal-day {
    aspect-ratio: 1 / 1; display: grid; place-items: center;
    background: none; border: none; cursor: pointer; border-radius: 8px;
    color: var(--text); font-size: 12.5px; font-family: var(--mono);
    transition: background .12s ease;
}
.cal-day:hover:not(.is-disabled) { background: var(--surface-hover); }
.cal-day.is-disabled { color: var(--text-3); opacity: .35; cursor: default; }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-day.in-range { background: color-mix(in srgb, var(--ink-bg) 16%, transparent); border-radius: 0; }
.cal-day.sel-start, .cal-day.sel-end { background: var(--ink-bg); color: var(--ink-fg); font-weight: 600; }
.cal-day.sel-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-day.sel-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); font-family: var(--mono); text-align: center; }

/* ----------------------------------------------------------------
   Mobile: métricas empilhadas, sem alça de arrastar, calendário 1 mês
   ---------------------------------------------------------------- */
@media (max-width: 700px) {
    /* 2 por linha, não 1: no painel cada projeto virava 4 cards empilhados
       (~2.000 px de rolagem com 4 projetos). O card (~160 px) ainda cabe o
       rótulo curto e o número, que encolhe pelo clamp(...cqi) de .stat-val. */
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    /* Com 2 por linha o rótulo longo ("Disparos de recuperação", no WhatsApp)
       cortava em "…": aqui ele quebra em 2 linhas em vez de sumir. */
    .stat-row .stat-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
    .drag-grip { display: none; }
    /* Sem a alça, o recuo dela sai: padding igual dos 4 lados. O seletor precisa
       do .client-grid — a regra de 28px (.client-grid .client-row .client-card)
       é mais específica e vencia esta, deixando o card torto (28 à esq., 15 à dir.). */
    .client-row .client-card,
    .client-grid .client-row .client-card { padding-left: 15px; }
    .period-bar { width: 100%; }
    .period { width: 100%; align-items: stretch; }
}
@media (max-width: 640px) {
    .cal-pop { position: fixed; left: 12px; right: 12px; top: 90px; flex-direction: column; max-height: 78vh; overflow: auto; }
    .cal-presets { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); min-width: 0; }
    .cal-months { flex-direction: column; gap: 16px; }
    .cal-month { width: 100%; }
    .cal-arrow { width: 38px; height: 38px; }   /* alvo de toque (era 28px) */
}

/* ----------------------------------------------------------------
   Botão único de período (todas as telas, 01/10/2026)
   ---------------------------------------------------------------- */
.period-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 9px 14px; color: var(--text);
    font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.period-trigger > svg:first-child { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; }
.period-trigger .pt-name { font-weight: 600; }
.period-trigger .pt-sep { color: var(--text-3); margin-left: -4px; }
.period-trigger .pt-range { color: var(--text-2); font-family: var(--mono); font-size: 12.5px; }
.period-trigger .pt-caret { width: 14px; height: 14px; color: var(--text-3); flex: 0 0 auto; margin-left: 2px; transition: transform .15s ease; }
.period-trigger:hover { border-color: var(--border-strong); }
.period-trigger.is-open { border-color: var(--border-strong); }
.period-trigger.is-open .pt-caret { transform: rotate(180deg); }

@media (max-width: 720px) {
    .period-trigger { flex: 1 1 auto; justify-content: center; }
    .period-bar { width: 100%; }
}
/* Telas estreitas: o nome do período basta; a data sai pra não quebrar a linha. */
@media (max-width: 430px) {
    .period-trigger .pt-sep, .period-trigger .pt-range { display: none; }
}

/* Calendário no mobile: mostra 1 mês e presets em 2 colunas */
@media (max-width: 640px) {
    .cal-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .cal-presets button { text-align: center; border: 1px solid var(--border); }
    .cal-months .cal-month:first-child { display: none; }
    .cal-titles .cal-t1 { display: none; }
    .cal-titles { justify-content: center; }
}

/* ----------------------------------------------------------------
   Campanhas (gerenciador de visualização)
   ---------------------------------------------------------------- */
.camp-filters {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 14px 18px;
}
.camp-filter-line {
    display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
}
.camp-filter-left {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; flex: 0 1 auto;
}
.camp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.camp-field > span { font-size: 11px; color: var(--text-3); font-weight: 500; }
.camp-field select {
    padding: 8px 10px; font: inherit; font-size: 13px;
    color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer;
}
.camp-field select:focus { outline: none; border-color: var(--border-strong); }
.camp-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.camp-period-right { margin-left: auto; flex: 0 1 auto; }
.camp-period-right .period { margin: 0; }

.camp-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0 16px; }
.camp-tab {
    padding: 9px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
    color: var(--text-2); border: 1px solid transparent; text-decoration: none;
}
.camp-tab:hover { color: var(--text); background: var(--surface); }
.camp-tab.active { color: var(--text); background: var(--surface); border-color: var(--border); }
.camp-tracked { margin-left: auto; font-size: 13px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.camp-tracked .pos { color: var(--pos); } .camp-tracked .warn { color: var(--warn); } .camp-tracked .neg { color: var(--neg); }

.camp-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.camp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.camp-table th {
    text-align: left; font-size: 12px; font-weight: 500; color: var(--text-3);
    padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.camp-table th.r, .camp-table td.r { text-align: right; }
.camp-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.camp-table tbody tr:hover { background: var(--surface-2); }
.camp-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.camp-table td.pos { color: var(--pos); }
.camp-table td.neg { color: var(--neg); }
.camp-table tfoot td { border-top: 1px solid var(--border-strong); border-bottom: none; font-weight: 600; color: var(--text); }
.camp-name { color: var(--text); font-weight: 500; }
.camp-ctx { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.camp-empty { text-align: center; color: var(--text-2); padding: 30px 16px !important; }

.roas-pill {
    display: inline-block; min-width: 46px; text-align: center;
    padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--text-2);
}
.roas-pill.pos  { background: rgba(63,191,143,.16);  color: var(--pos); }
.roas-pill.warn { background: rgba(207,161,62,.16);  color: var(--warn); }
.roas-pill.neg  { background: rgba(229,112,107,.16); color: var(--neg); }

@media (max-width: 720px) {
    /* Filtros: compactos, alinhados à esquerda */
    .camp-filters { padding: 12px; }
    .camp-filter-line { flex-direction: column; align-items: stretch; gap: 8px; }
    .camp-filter-left { flex-direction: column; gap: 6px; align-items: stretch; }
    .camp-field { align-items: stretch; }
    .camp-field > span { text-align: left; font-size: 11px; }
    .camp-field select { width: 100%; padding: 9px 10px; font-size: 14px; text-align: left; -webkit-appearance: none; }
    .camp-btns { display: flex; gap: 6px; }
    .camp-btns .btn { flex: 1; text-align: center; padding: 9px 10px; }
    .camp-period-right { margin-left: 0; }
    .camp-period-right .period { width: 100%; }

    /* Abas: 2 linhas — métricas em cima, atribuição + rastreadas embaixo */
    .camp-tabs {
        flex-wrap: wrap; overflow: visible; gap: 0;
        margin: 4px 0 12px; padding: 0;
    }
    .camp-tab { padding: 7px 10px; font-size: 13px; flex: 0 0 auto; }
    .camp-tab-sep { display: none; }
    .camp-tab-attr { margin-top: 6px; margin-right: 12px; }
    .camp-tracked {
        margin-left: 0; flex: 1 0 auto; margin-top: 6px;
        font-size: 12px; text-align: right;
    }

    /* Tabela */
    .camp-table { min-width: 560px; font-size: 13px; }
    .camp-table th, .camp-table td { padding: 9px 10px; }
    .camp-name { white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
    .camp-toolbar { justify-content: flex-start; }
}

/* ----------------------------------------------------------------
   Atribuição manual (Fase 2)
   ---------------------------------------------------------------- */
.attr-filter-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.attr-filter-btn {
    padding: 7px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
    color: var(--text-2); border: 1px solid var(--border); text-decoration: none; background: transparent;
}
.attr-filter-btn:hover { color: var(--text); border-color: var(--border-strong); }
.attr-filter-btn.active { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
.attr-count { margin-left: auto; font-size: 13px; color: var(--text-3); }

.attr-table td { vertical-align: middle; }
.attr-product { font-weight: 500; color: var(--text); font-size: 13px; }
.attr-meta { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.attr-origin {
    display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500;
    background: var(--surface-2); color: var(--text-2);
}
.attr-utm {
    margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px;
    color: var(--text-3); word-break: break-all; max-width: 280px; line-height: 1.4;
}

.attr-form { display: flex; gap: 6px; align-items: center; }
.attr-sel {
    padding: 6px 8px; font: inherit; font-size: 12px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
    min-width: 0; max-width: 180px;
}
.attr-sel:disabled { opacity: .4; cursor: not-allowed; }
.attr-sel:focus { outline: none; border-color: var(--border-strong); }

.attr-actions {
    display: flex; gap: 6px; align-items: center; justify-content: flex-start;
    white-space: nowrap; min-height: 32px; width: 110px;
}
.attr-actions .btn-sm { height: 30px; display: inline-flex; align-items: center; flex: 0 0 auto; }
.attr-table th.c, .attr-table td.c { width: 130px; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
/* Botão fantasma. Nasceu só de ícone (✕) com 30px FIXOS — com texto ("Não" na
   confirmação de orçamento, "Revogar" no MCP) o rótulo saía cortado. Agora a
   largura acompanha o conteúdo e 30px é o mínimo: o ✕ continua quadrado. */
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-3); width: auto; min-width: 30px; justify-content: center; padding: 5px 8px; white-space: nowrap; }
.btn-ghost:hover { color: var(--neg); border-color: var(--neg); }
/* Reserva o espaço do botão remover mesmo quando ele não existe */
.attr-actions .btn-spacer { width: 30px; flex: 0 0 auto; }

/* Indicador visual de status */
tr.attr-none td:first-child { border-left: 3px solid var(--neg); }
tr.attr-auto td:first-child { border-left: 3px solid var(--pos); }
tr.attr-manual td:first-child { border-left: 3px solid #7c5cff; }

@media (max-width: 720px) {
    .attr-form { flex-direction: column; align-items: stretch; gap: 4px; }
    .attr-sel { max-width: 100%; }
    .attr-filter-bar { gap: 4px; }
    .attr-count { flex-basis: 100%; margin-left: 0; margin-top: 4px; }
}

/* Separador visual entre abas de métricas e atribuição */
.camp-tab-sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; flex: 0 0 auto; }
.camp-tab-attr {
    border: 1px dashed var(--border) !important; color: var(--text-2) !important;
    font-style: italic;
}
.camp-tab-attr.active {
    border-style: solid !important; border-color: #7c5cff !important;
    color: #7c5cff !important; background: rgba(124,92,255,.08) !important;
    font-style: normal;
}
.camp-tab-attr:hover { border-color: #7c5cff !important; color: #7c5cff !important; }

/* Sort headers */
.sort-hdr { color: var(--text-3); text-decoration: none; white-space: nowrap; cursor: pointer; }
.sort-hdr:hover { color: var(--text); }
.sort-active { color: var(--text) !important; font-weight: 600; }

/* Toolbar (CSV export etc.) */
.camp-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }

/* Export dropdown */
.export-drop { position: relative; display: inline-block; }
.export-menu {
    position: absolute; top: 100%; right: 0; z-index: 20; margin-top: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.3); min-width: 280px; overflow: hidden;
}
.export-menu[hidden] { display: none; }
.export-opt {
    display: block; padding: 10px 14px; font-size: 13px; color: var(--text);
    text-decoration: none; border-bottom: 1px solid var(--border);
}
.export-opt:last-child { border-bottom: none; }
.export-opt:hover { background: var(--surface-2); }

/* Status dot (bolinha ligado/desligado) */
.status-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle; flex: 0 0 7px;
}
.dot-on  { background: var(--pos); }
.dot-off { background: var(--neg); opacity: .7; }
.btn-active-on { border-color: var(--pos) !important; color: var(--pos) !important; }

/* ----------------------------------------------------------------
   Insights AI
   ---------------------------------------------------------------- */
.insights-bar { display: flex; justify-content: flex-end; margin-top: 16px; }
.insights-panel {
    margin-top: 12px; padding: 18px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--border);
}
.insights-header {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 12px;
}
.insights-ctx { margin-bottom: 12px; }
.insights-textarea {
    width: 100%; padding: 10px 12px; font: inherit; font-size: 13px; resize: vertical;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text);
}
.insights-textarea:focus { outline: none; border-color: var(--border-strong); }
.insights-textarea::placeholder { color: var(--text-3); }
.insights-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.insights-status { font-size: 13px; color: var(--text-2); }
.insights-result {
    font-size: 14px; line-height: 1.6; color: var(--text);
    max-height: 600px; overflow-y: auto;
}
.insights-result h3 { font-size: 15px; margin: 16px 0 6px; color: var(--text); }
.insights-result h4 { font-size: 14px; margin: 12px 0 4px; color: var(--text-2); }
.insights-result strong { color: var(--text); }
@media (max-width: 720px) {
    .insights-panel { padding: 14px; }
}

/* Checkboxes e filtro por seleção */
.camp-table .js-check-all, .camp-table .js-row-check { cursor: pointer; width: 16px; height: 16px; accent-color: #7c5cff; }
.camp-filter-active {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.25);
    border-radius: var(--r-sm); margin-bottom: 10px; font-size: 13px; color: var(--text);
}
.camp-filter-info { font-size: 13px; color: var(--text-2); }
.camp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.camp-toolbar-left { display: flex; align-items: center; gap: 8px; }

/* Insights AI - cards por seção */
.ins-card {
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 16px 18px; margin-bottom: 12px; background: var(--surface);
}
.ins-card-title {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-2); margin-bottom: 10px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.ins-card-body { font-size: 14px; line-height: 1.6; color: var(--text); }
.ins-card-body p { margin: 0; }
.ins-card-body strong { color: var(--text); }

.ins-line {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.ins-line:last-child { border-bottom: none; }
.ins-dot { flex: 0 0 auto; font-size: 14px; line-height: 1.5; }

.ins-campaigns { border-left: 3px solid #7c5cff; }
.ins-adsets { border-left: 3px solid #3b82f6; }
.ins-ads { border-left: 3px solid #8b5cf6; }
.ins-summary {
    border-left: 3px solid var(--pos);
    background: rgba(63,191,143,.04);
}
.ins-error { border-left: 3px solid var(--neg); background: rgba(229,112,107,.04); }

.ins-green .ins-dot { color: var(--pos); }
.ins-yellow .ins-dot { color: var(--warn); }
.ins-red .ins-dot { color: var(--neg); }

/* Indicador de reembolso no header do card */
.cc-refund-badge {
    font-size: 11px; font-weight: 500; color: var(--text-3);
    margin-left: auto; padding: 2px 8px; border-radius: 4px;
    background: var(--surface-2);
}

/* Select de tipo de produto na tela de produtos */
.select-type {
    font: inherit; font-size: 12px; padding: 4px 8px;
    background: var(--surface); color: var(--text-2); border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer;
}
.select-type:focus { border-color: var(--accent); outline: none; }

/* Linha de vendas orgânicas na tabela de campanhas */
.camp-organic-row td { border-top: 1px dashed var(--border); }
.camp-organic-label { font-size: 12px; color: var(--text-3); font-style: italic; }

/* ── Loading overlay — premium on-brand loader ──────────────────
   Green (#3ce6a0) is used ONLY as signal/light: a thin neutral ring
   with a single glowing green arc that rotates. Pure CSS, no markup
   change — spinner is drawn entirely with pseudo-elements.            */
.loading-overlay {
    display: none; position: fixed; inset: 0; z-index: 9999;
    justify-content: center; align-items: center; flex-direction: column; gap: 20px;
    /* tasteful dark dim that respects the active theme */
    background: color-mix(in srgb, var(--bg) 66%, rgba(0,0,0,.6));
    -webkit-backdrop-filter: blur(9px) saturate(118%);
            backdrop-filter: blur(9px) saturate(118%);
    animation: loadOverlayIn .3s ease both;
}
.loading-overlay.active { display: flex; }
@keyframes loadOverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* container only — the ring is painted by ::before (track) + ::after (arc) */
.loading-spinner {
    --ld-size: 46px;
    --ld-ring: 3px;
    position: relative;
    width: var(--ld-size); height: var(--ld-size);
}
.loading-spinner::before,
.loading-spinner::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-ring)), #000 calc(100% - var(--ld-ring)));
            mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-ring)), #000 calc(100% - var(--ld-ring)));
}
/* faint neutral track — reads on both dark and light themes */
.loading-spinner::before { background: conic-gradient(var(--border), var(--border)); }
/* the glowing green arc that sweeps around (green as light) */
.loading-spinner::after {
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(60,230,160,.10) 120deg,
        #1c8a63 275deg,
        #3ce6a0 352deg,
        transparent 360deg);
    filter: drop-shadow(0 0 6px rgba(60,230,160,.45)) drop-shadow(0 0 2px rgba(60,230,160,.55));
    animation: loadSpin .95s linear infinite;
}
@keyframes loadSpin { to { transform: rotate(360deg); } }

.loading-text {
    color: var(--text-2); font-size: 13px; font-weight: 500; letter-spacing: .04em;
    animation: loadTextPulse 1.9s ease-in-out infinite;
}
@keyframes loadTextPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .loading-overlay { animation: none; }
    .loading-spinner::after { animation-duration: 2.6s; }
    .loading-text { animation: none; opacity: .8; }
}

/* Meta columns styling */
.camp-meta-col { color: var(--text-3); font-size: 12px; }
thead .camp-meta-col { font-size: 11px; }

/* ── Toggle switches ──────────────────────────────────────── */
.camp-toggles { display: flex; align-items: center; gap: 12px; }
.camp-toggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
    border-radius: 20px; font-size: 13px; text-decoration: none;
    color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border);
    transition: background .15s, border-color .15s, color .15s;
}
.camp-toggle:hover { color: var(--text); border-color: var(--border-hover, var(--border)); }
.camp-toggle.is-on { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.tgl-track {
    width: 28px; height: 16px; border-radius: 8px; flex-shrink: 0;
    background: var(--surface-3); position: relative; transition: background .2s;
}
.camp-toggle.is-on .tgl-track { background: var(--accent); }
.tgl-thumb {
    position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.camp-toggle.is-on .tgl-thumb { transform: translateX(12px); }
.tgl-label { font-size: 12px; font-weight: 500; }

/* ── Drill-down link nos nomes ────────────────────────────── */
.camp-drill {
    color: inherit; text-decoration: none;
    border-bottom: 1px solid transparent; transition: border-color .15s, color .15s;
}
.camp-drill:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Δ diff column ────────────────────────────────────────── */
.camp-meta-col { color: var(--text-3) !important; font-size: 12px; }
thead .camp-meta-col { font-size: 11px; }

/* ============================================================
   Analytics — dashboard nativa (tokens do app; light + dark)
   ============================================================ */
.an-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:16px 0 14px;border-bottom:1px solid var(--border);}
.an-tab{padding:9px 14px;font-size:13px;font-weight:500;color:var(--text-3);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0;transition:.12s;}
.an-tab:hover{color:var(--text);background:var(--surface-hover);}
.an-tab.active{color:var(--text);border-bottom-color:var(--accent);font-weight:600;}
/* Celular: as 6 abas quebravam em 2 linhas e o sublinhado da ativa ficava
   solto no meio (o fio da barra só existe embaixo da 2ª linha). Viram uma
   linha só que rola de lado — o corte na borda direita avisa que tem mais. */
@media (max-width:720px){
  .an-tabs{flex-wrap:nowrap;gap:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .an-tabs::-webkit-scrollbar{display:none;}
  .an-tab{flex:0 0 auto;white-space:nowrap;margin-bottom:0;padding:11px 13px;}
  /* "Atualizar" (btn-sm, 26px) era o único controle baixinho do filtro */
  .camp-filter-left > .btn{min-height:40px;justify-content:center;}
}
.an-body{display:flex;flex-direction:column;gap:14px;}

/* helpers escopados */
.an-body .strong{font-weight:600;} .an-body .mono{font-family:var(--mono);}
.an-body td.l,.an-body th.l{text-align:left;}
.an-dim{color:var(--text-3);} .an-pos{color:var(--pos);} .an-neg{color:var(--neg);} .an-warn{color:var(--warn);}

.an-block-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.an-block-h h3{font-size:14px;font-weight:600;color:var(--text);margin:0;}
.an-ab-detect{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;padding:10px 12px;
    border:1px solid var(--border);border-radius:10px;background:var(--surface-2,rgba(255,255,255,.02));font-size:12.5px;color:var(--text-2,var(--text));}
.an-ab-detect-badge{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--brand);
    background:var(--accent-soft,rgba(52,211,153,.12));border:1px solid var(--brand);border-radius:999px;padding:2px 9px;}
.an-ab-sample{font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;padding:1px 6px;border-radius:6px;
    background:var(--bg-soft,rgba(0,0,0,.15));word-break:break-all;}
.an-ab-hit{background:var(--accent-soft,rgba(52,211,153,.22));color:var(--brand);font-weight:700;border-radius:3px;padding:0 2px;}
.an-ab-clarity{margin:0 0 14px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2,rgba(255,255,255,.02));font-size:12.5px;}
.an-ab-clarity-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.an-ab-clarity-head a{color:var(--brand);text-decoration:none;font-weight:600;}
.an-ab-clarity-head a:hover{text-decoration:underline;}
.an-ab-tokform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.an-ab-tokform input[type=password]{flex:1;min-width:260px;font-family:var(--mono,monospace);font-size:12px;padding:7px 10px;
    border-radius:8px;background:var(--bg-soft,rgba(0,0,0,.15));color:var(--text);border:1px solid var(--border);}
.an-ab-tokform input:focus{outline:none;border-color:var(--border-strong);}
.an-ab-maprows{display:flex;flex-direction:column;gap:7px;}
.an-ab-maprow{display:flex;align-items:center;gap:10px;margin:0;}
.an-ab-mapv{flex:0 0 40px;font-weight:700;color:var(--brand);}
.an-ab-maprow select{flex:1;max-width:520px;font-family:var(--ui);font-size:12px;padding:6px 10px;border-radius:8px;
    background:var(--surface,transparent);color:var(--text);border:1px solid var(--border);cursor:pointer;}
.an-ab-maprow select:hover,.an-ab-maprow select:focus{border-color:var(--border-strong);outline:none;}
.an-ab-automark{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);
    background:var(--accent-soft,rgba(52,211,153,.12));border:1px solid var(--brand);border-radius:999px;padding:1px 7px;}
.an-ab-warn{margin:10px 0 2px;padding:9px 12px;border-radius:9px;font-size:12px;line-height:1.5;
    color:#e8b923;background:rgba(232,185,35,.09);border:1px solid rgba(232,185,35,.35);}
.an-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
@media (max-width:980px){.an-two{grid-template-columns:1fr;}}

/* KPIs */
.an-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
@media (max-width:1200px){.an-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:680px){.an-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
.an-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r,14px);padding:14px 13px;}
.an-kpi-l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin-bottom:8px;}
.an-kpi-v{font-size:19px;font-weight:700;color:var(--text);line-height:1.15;font-family:var(--mono);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.an-kpi-s{font-size:12px;color:var(--text-3);margin-top:5px;}

/* métricas */
.an-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-sm,10px);overflow:hidden;}
.an-metric{background:var(--surface);padding:11px 13px;}
.an-metric-l{font-size:11.5px;color:var(--text-3);margin-bottom:4px;}
.an-metric-v{font-size:16px;font-weight:600;color:var(--text);font-family:var(--mono);}
.an-metric-s{font-size:11px;color:var(--text-3);margin-top:2px;}

/* funil */
.an-funnel{display:flex;flex-direction:column;gap:0;}
.an-funnel-row{display:flex;}
.an-funnel-block{background:var(--surface-2,var(--surface-hover));border:1px solid var(--border);border-radius:var(--r-sm,10px);padding:12px 14px;min-width:0;transition:width .3s;}
.an-funnel-block.is-final{background:var(--accent-soft,rgba(0,0,0,.04));border-color:var(--accent);}
.an-funnel-block.is-mute{opacity:.5;}
.an-funnel-name{display:block;font-size:12px;color:var(--text-2);margin-bottom:4px;}
.an-funnel-bottom{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.an-funnel-bottom b{font-size:19px;font-weight:700;font-family:var(--mono);color:var(--text);}
.an-funnel-conv{display:flex;justify-content:center;font-size:11px;color:var(--text-3);padding:5px 0;}

/* barras (ROAS / mix / take) */
.an-bars{display:flex;flex-direction:column;gap:11px;}
.an-bar-row{display:grid;grid-template-columns:180px 1fr 64px;align-items:center;gap:10px;}
.an-bar-label{font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.an-bar-track{height:14px;background:var(--surface-hover);border-radius:7px;overflow:hidden;}
.an-bar-track.sm{height:10px;}
.an-bar-fill{height:100%;border-radius:7px;}
.an-bar-fill.win{background:var(--pos);} .an-bar-fill.ok{background:var(--text-2);} .an-bar-fill.bad{background:var(--neg);}
.an-bar-val{font-size:13px;font-weight:600;font-family:var(--mono);text-align:right;}
.an-bar-val.win{color:var(--pos);} .an-bar-val.bad{color:var(--neg);}
@media (max-width:680px){.an-bar-row{grid-template-columns:110px 1fr 54px;}.an-bar-label{font-size:11px;}}
/* ROAS por criativo (26/09): 2 colunas, 12 primeiros + "mostrar todos", poucas vendas apagado */
.an-bars-2c{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;row-gap:11px;}
.an-bars-2c .an-bar-row{grid-template-columns:minmax(120px,190px) 1fr 64px;}
.an-bar-row.an-more{display:none;}
section.an-open .an-bar-row.an-more{display:grid;}
.an-bar-row.an-few .an-bar-fill{opacity:.45;}
.an-bar-label em{font-style:normal;font-size:10.5px;color:var(--text-3);margin-left:6px;}
.an-bar-track{position:relative;}
.an-over{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-style:normal;font-size:10px;line-height:1;color:var(--bg);font-weight:700;}
.an-more-btn{margin-top:14px;border:0;background:none;color:var(--text-2);font-size:12.5px;cursor:pointer;padding:6px 0;}
.an-more-btn:hover{color:var(--text);}
@media (max-width:1280px){.an-bars-2c{grid-template-columns:1fr;}}

.an-legend{font-size:11px;color:var(--text-3);display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.an-dot{width:9px;height:9px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:2px;}
.an-dot.win{background:var(--pos);} .an-dot.ok{background:var(--text-2);} .an-dot.bad{background:var(--neg);}

/* ofertas */
.an-offer{display:flex;flex-direction:column;gap:6px;}
.an-offer-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;}
.an-offer-foot{display:flex;gap:14px;font-size:11.5px;}
.an-ticket-hero{text-align:center;padding:18px 0 10px;}
.an-ticket-main{font-size:34px;font-weight:700;font-family:var(--mono);color:var(--text);}
.an-ticket-total{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:8px;font-size:14px;}
.an-ticket-total b{font-family:var(--mono);}

/* OB por oferta */
.an-obo{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (max-width:980px){.an-obo{grid-template-columns:1fr;}}
.an-obo-card{border:1px solid var(--border);border-radius:var(--r-sm,10px);padding:12px;}
.an-obo-head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px;}
.an-obo-row{display:grid;grid-template-columns:1fr 90px 48px 52px;align-items:center;gap:8px;font-size:12px;margin-bottom:7px;}
.an-obo-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* tabela */
.an-table-wrap{overflow-x:auto;margin:0 -2px;}
.an-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.an-table th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-3);font-weight:600;padding:8px 10px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;}
.an-table td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--border);color:var(--text);font-family:var(--mono);white-space:nowrap;}
.an-table td.l,.an-table th.l{text-align:left;font-family:inherit;}
.an-table tr:hover td{background:var(--surface-hover);}
.an-table .an-total td{font-weight:700;border-top:2px solid var(--border-strong,var(--border));}
/* Celular: nome longo de criativo/oferta numa linha só ocupava a tela inteira e
   escondia todos os números atrás da rolagem lateral. A 1ª coluna quebra. */
@media (max-width:720px){
  .an-table td.l:first-child{white-space:normal;min-width:140px;max-width:180px;overflow-wrap:anywhere;}
}

.an-pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:600;font-family:var(--mono);border:1px solid transparent;}
.an-pill.win{color:var(--pos);background:var(--pos-soft,rgba(22,163,74,.1));border-color:var(--pos);}
.an-pill.ok{color:var(--text-2);border-color:var(--border-strong,var(--border));}
.an-pill.bad{color:var(--neg);background:var(--neg-soft,rgba(220,38,38,.1));border-color:var(--neg);}
.an-pill.an-warn{color:var(--warn);border-color:var(--warn);}
.an-pill.an-neg{color:var(--neg);border-color:var(--neg);}
.an-pill.an-dim{color:var(--text-3);border-color:var(--border);}

/* simulador */
.an-sim{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:start;}
@media (max-width:980px){.an-sim{grid-template-columns:minmax(0,1fr);}}
.an-fields{display:flex;flex-direction:column;gap:14px;}
.an-field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-2);}
.an-field input[type=number]{width:100%;min-width:0;box-sizing:border-box;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--mono);font-size:14px;}
.an-field input[type=range]{width:100%;accent-color:var(--accent);}
.an-sim-out{position:sticky;top:14px;}
.an-sim-results{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.an-res{border-left:3px solid var(--border);padding:6px 0 6px 11px;}
.an-res-k{font-size:11px;color:var(--text-3);}
.an-res-v{font-size:20px;font-weight:700;font-family:var(--mono);color:var(--text);}
.an-res-b{font-size:11px;color:var(--text-3);margin-top:2px;}
.an-sim-chain{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:12.5px;text-align:center;}

/* IA */
.an-ia .btn{margin-top:6px;}
.an-ia-status{font-size:12px;color:var(--text-3);margin-left:10px;}
.an-insights{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.an-insight{border:1px solid var(--border);border-radius:var(--r-sm,10px);padding:13px 15px;background:var(--surface);}
.an-insight-top{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.an-insight-n{font-family:var(--mono);font-size:12px;color:var(--text-3);}
.an-insight-t{font-weight:600;font-size:14px;color:var(--text);flex:1;}
.an-insight-d{font-size:13px;color:var(--text-2);line-height:1.5;}
.an-insight-a{font-size:13px;color:var(--text);margin-top:7px;font-weight:500;}
.an-insight-r{font-size:12.5px;color:var(--text-2);margin-top:7px;padding-top:7px;border-top:1px dashed var(--border);}

/* ===== Analytics v2 — ajustes: funil skill-like, métricas 3-col, ticket bars, sim/AB ===== */
.an-metrics{grid-template-columns:repeat(3,1fr);}
@media (max-width:1100px){.an-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* Celular: 2 por linha (valores curtos: "28.400", "R$ 21,26"). Em 1 coluna eram
   14 linhas de ~68px, quase 1.000px de rolagem só nesse bloco. */
@media (max-width:640px){.an-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:340px){.an-metrics{grid-template-columns:1fr;}}

/* funil centralizado, blocos afunilando */
.an-funnel{display:flex;flex-direction:column;align-items:center;gap:0;}
.an-funnel-block{margin:0 auto;}
.an-funnel-conv{display:flex;align-items:center;gap:10px;width:60%;padding:7px 0;}
.an-funnel-conv-l{flex:1;height:1px;background:var(--border);}
.an-funnel-conv-p{font-size:11px;color:var(--text-3);white-space:nowrap;}

/* barras de ticket por oferta */
.an-ticket-split{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:120px;margin:14px 0 6px;padding:0 6px;}
.an-tsplit{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;max-width:90px;height:100%;justify-content:flex-end;}
.an-tsplit-bar-wrap{display:flex;align-items:flex-end;height:80px;width:34px;}
.an-tsplit-bar{width:100%;background:var(--accent,var(--text-2));border-radius:6px 6px 0 0;min-height:6px;}
.an-tsplit-v{font-size:12px;font-weight:600;font-family:var(--mono);color:var(--text);}
.an-tsplit-l{font-size:10.5px;color:var(--text-3);text-align:center;line-height:1.2;}

/* critério de campeão */
.an-champ-form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
.an-field-inline{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-2);}
.an-field-inline input{width:110px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--mono);}

/* simulador */
.an-sim{display:grid;grid-template-columns:1fr .9fr;gap:14px;align-items:start;}
@media (max-width:980px){.an-sim{grid-template-columns:minmax(0,1fr);}}
.an-sim-inputs{display:flex;flex-direction:column;gap:14px;min-width:0;}
/* Celular: sem minmax(0,...) na coluna e sem width no input numerico, a
   largura minima do campo (padrao do navegador) esticava a coluna e a
   pagina inteira rolava de lado no simulador. */
.an-sim-out-col, .an-sim-out, .an-fields, .an-field{min-width:0;}
.an-sim-out{position:sticky;top:14px;}
.an-row-edit{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.an-nm{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:13px;}
.an-mini{display:flex;flex-direction:column;gap:2px;}
.an-mini span{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em;}
.an-mini input{width:74px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--mono);font-size:13px;}
.an-x{width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-3);cursor:pointer;flex-shrink:0;align-self:flex-end;}
.an-x:hover{color:var(--neg);border-color:var(--neg);}
/* Simulador no celular: nome, 2 números e o ✕ numa linha só cortavam o nome
   ("Do Plantio à Colheit") e o campo do nome (sem rótulo) ficava 9px mais alto
   que os números (com rótulo). Nome ocupa a linha; números + ✕ embaixo. */
@media (max-width:560px){
  .an-row-edit{flex-wrap:wrap;align-items:flex-end;gap:6px 8px;margin-bottom:12px;}
  .an-row-edit .an-nm{flex:1 1 100%;padding:9px 10px;}
  .an-row-edit .an-mini{flex:1 1 0;min-width:0;}
  .an-row-edit .an-mini input{width:100%;padding:8px;}
  .an-row-edit .an-x{width:36px;height:34px;}
}
.an-sim-foot{margin-top:10px;font-size:12px;}

/* A/B */
.an-ab-visit{width:90px;padding:5px 7px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);font-family:var(--mono);text-align:right;}
.an-table tr.an-ab-win td{background:var(--pos-soft,rgba(22,163,74,.08));}
.an-ab-verdict{margin-top:14px;padding:11px 14px;border:1px solid var(--pos);border-radius:var(--r-sm,10px);background:var(--pos-soft,rgba(22,163,74,.07));font-size:13px;color:var(--text);}

.an-funnel-note{margin-top:12px;font-size:11.5px;line-height:1.5;max-width:540px;}
.an-funnel-conv-p.is-gap{color:var(--warn);}

/* ===== Analytics v3 — funil estilo skill + cores de bom/ruim funcionando ===== */

/* ---- CORES: precisam vencer o color base de .an-kpi-v / .an-metric-v ---- */
.an-kpi-v.an-pos,    .an-metric-v.an-pos,   .an-metric-s.an-pos,
.an-kpi-s.an-pos,    .an-funnel-value.an-pos { color: var(--pos) !important; }
.an-kpi-v.an-neg,    .an-metric-v.an-neg,   .an-metric-s.an-neg,
.an-kpi-s.an-neg,    .an-funnel-value.an-neg { color: var(--neg) !important; }

/* ---- FUNIL: centralizado, afunilando, badges em pílula (igual skill) ---- */
.an-funnel{display:flex;flex-direction:column;align-items:center;width:100%;padding:4px 0;gap:0;}
.an-funnel-block{
    display:flex;flex-direction:column;
    margin:0 auto;min-width:210px;max-width:100%;
    background:linear-gradient(180deg,var(--surface),var(--surface-2,var(--surface-hover)));
    border:1px solid var(--border);border-radius:14px;padding:14px 22px;
    transition:width .5s cubic-bezier(.4,0,.2,1);
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.an-funnel-block.is-mute{opacity:.6;}
.an-funnel-block.is-final{
    background:linear-gradient(180deg,var(--pos-soft,rgba(22,163,74,.10)),rgba(22,163,74,.03));
    border-color:var(--pos);
    box-shadow:0 4px 14px -8px rgba(22,163,74,.4);
}
.an-funnel-name{
    display:block;margin-bottom:9px;font-family:var(--mono);font-size:10.5px;
    color:var(--text-3);text-transform:uppercase;letter-spacing:.14em;font-weight:600;
}
.an-funnel-block.is-final .an-funnel-name{color:var(--pos);}
.an-funnel-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;}
.an-funnel-bottom b{font-family:var(--mono);font-size:30px;font-weight:500;color:var(--text);letter-spacing:-.025em;line-height:1;}
.an-funnel-block.is-final .an-funnel-bottom b{color:var(--pos);}
.an-funnel-bottom .an-dim{font-family:var(--mono);font-size:10.5px;margin-left:auto;white-space:nowrap;}

.an-funnel-conv{display:flex;align-items:center;gap:10px;padding:9px 0;width:210px;max-width:80%;}
.an-funnel-conv-l{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);}
.an-funnel-conv-p{
    font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text-2);
    background:var(--surface);border:1px solid var(--border);
    padding:3px 11px;border-radius:999px;white-space:nowrap;
}
.an-funnel-conv-p.is-gap{color:var(--warn);border-color:var(--warn);}

/* cor de bom/ruim vale em qualquer lugar (vence o color base dos cards) */
.an-pos{color:var(--pos)!important;}
.an-neg{color:var(--neg)!important;}

/* ===== Simulador: slider custom (bonito) + botão adicionar no fim ===== */
.an-field input[type=range]{
    -webkit-appearance:none; appearance:none;
    width:100%; height:6px; border-radius:999px; margin:10px 0 2px;
    background:var(--surface-hover); outline:none; cursor:pointer;
}
.an-field input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; border-radius:50%;
    background:var(--accent,var(--text)); border:2px solid var(--surface);
    box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; transition:transform .1s ease;
}
.an-field input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.18); }
.an-field input[type=range]::-webkit-slider-thumb:active{ transform:scale(1.05); }
.an-field input[type=range]::-moz-range-thumb{
    width:18px; height:18px; border-radius:50%;
    background:var(--accent,var(--text)); border:2px solid var(--surface);
    box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer;
}
.an-field input[type=range]::-moz-range-track{ height:6px; border-radius:999px; background:var(--surface-hover); }
.an-field input[type=range]:focus{ outline:none; }
.an-field span b[data-lbl]{ color:var(--accent,var(--text)); font-family:var(--mono); }

.an-add{ margin-top:10px; width:100%; }

/* ===== Anotações ===== */
.an-note-form { display:flex; flex-direction:column; gap:12px; }
.an-note-row { display:flex; gap:12px; flex-wrap:wrap; }
.an-note-field { display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px; }
.an-note-field span { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.an-note-field input, .an-note-field select, .an-note-field textarea {
    background:var(--surface); border:1px solid var(--border); color:var(--text);
    border-radius:6px; padding:8px 10px; font:inherit; font-size:14px; resize:vertical;
}
.an-note-field textarea { min-height:60px; }
.an-note-full { width:100%; }
.an-note-actions { display:flex; gap:8px; padding-top:4px; }

.an-notes-list { display:flex; flex-direction:column; gap:16px; }
.an-note-card {
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:16px; display:flex; flex-direction:column; gap:10px;
}
.an-note-card-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.an-note-card-info { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.an-note-card-actions { display:flex; gap:6px; }
/* Quando os botões quebram de linha (selo longo, ex. "Antes / depois") eles
   caíam à esquerda e o card seguinte, sem quebra, os mostrava à direita. */
@media (max-width:560px) { .an-note-card-actions { margin-left:auto; } }
.an-note-badge {
    font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px;
    border-radius:4px; background:var(--accent,var(--text)); color:var(--bg);
    font-weight:600;
}
.an-note-date { font-size:13px; color:var(--muted); font-family:var(--mono); }
.an-note-title { font-size:16px; font-weight:600; margin:0; }
.an-note-desc { font-size:14px; color:var(--muted); line-height:1.5; }
.an-note-content { font-size:14px; line-height:1.6; white-space:pre-wrap; }

/* card colapsado por padrão */
.an-note-body { display:none; margin-top:8px; }
.an-note-card.an-note-open .an-note-body { display:block; }
.an-note-toggle { font-size:10px; color:var(--muted); transition:transform .2s; margin-left:4px; }
.an-note-card.an-note-open .an-note-toggle { transform:rotate(180deg); }
.an-note-card-head:hover .an-note-toggle { color:var(--text); }

.an-note-ba { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .an-note-ba { grid-template-columns:1fr; } }
.an-note-ba-col {
    background:var(--bg); border:1px solid var(--border); border-radius:6px;
    padding:12px; display:flex; flex-direction:column; gap:6px;
}
.an-note-ba-label {
    font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:600;
    color:var(--muted);
}
.an-note-ba-content { font-size:14px; line-height:1.6; white-space:pre-wrap; }

.an-note-img-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:4px; }
.an-note-img-item { position:relative; border-radius:6px; overflow:hidden; background:var(--surface-hover); }
.an-note-img-item img { width:100%; display:block; cursor:pointer; }
.an-note-img-obs { font-size:12px; color:var(--muted); padding:6px 8px; line-height:1.4; }
.an-note-img-del { position:absolute; top:4px; right:4px; }

.an-note-upload { display:flex; flex-direction:column; gap:6px; }
#an-note-upload-area { position:relative; }
#an-note-upload-area input[type=file] { font-size:14px; }
#an-note-previews { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:8px; }
.an-note-preview-item { display:flex; flex-direction:column; gap:4px; }
.an-note-preview-item img { width:100%; border-radius:4px; max-height:120px; object-fit:cover; }
.an-note-obs-input {
    font-size:12px; padding:4px 6px; background:var(--surface); border:1px solid var(--border);
    color:var(--text); border-radius:4px;
}
.an-note-existing-imgs { margin-bottom:8px; }

.btn-danger { background:var(--neg,#e74c3c) !important; color:#fff !important; border:none; }

/* ============================================================
   DEU ROI — rebrand premium · camada de material (auth)
   Verde só como SINAL. Escopo: tela de login (auth). As páginas
   internas recebem o sistema numa passada separada.
   ============================================================ */
:root{ --brand:#3ce6a0; --brand-dim:#1c8a63; --brand-glow:rgba(60,230,160,.16); }
:root[data-theme="light"]{ --brand:#0b8a4e; --brand-glow:rgba(11,138,78,.13); }

/* fundo do login: usa a camada global de luz+grão (body::before/::after) */
.auth-main{ position:relative; }

/* card material: hairline + highlight interno + sombra em camadas */
.login-card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 30px 64px -30px rgba(0,0,0,.92);
  padding:28px 26px; }

/* logo + wordmark */
.login-brand{ font-size:16px; font-weight:700; letter-spacing:-.02em; gap:11px; margin-bottom:2px; }
.brand-tok{ width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(160deg,#12241c,#0c1613);
  border:1px solid rgba(60,230,160,.24);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 6px 18px -8px rgba(60,230,160,.4), inset 0 1px 0 rgba(255,255,255,.07); }
.brand-tok svg{ width:20px; height:20px; color:#3ce6a0; }
.wm{ font-weight:700; letter-spacing:-.03em; }
.wm-d{ color:var(--text-2); font-weight:600; }
.wm-r{ color:var(--brand); }
.login-card .sub{ color:var(--text-3); font-size:13px; }

/* inputs: superfície funda, foco em anel verde */
.login-card .field span{ color:var(--text-3); font-weight:500; }
.login-card .field input{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:11px 12px;
  color:var(--text); font-family:var(--ui); font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease; }
.login-card .field input:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }

/* CTA verde-marca (o único "preenchimento" verde: entrar = ver seu ROI) */
.login-card .btn-primary{
  background:linear-gradient(180deg,#33dd97,#1fae76);
  color:#06130c; border:1px solid rgba(60,230,160,.5); font-weight:600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px -10px var(--brand-glow);
  transition:filter .15s ease, box-shadow .15s ease, transform .05s ease; }
.login-card .btn-primary:hover{ color:#06130c; filter:brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 30px -8px var(--brand-glow); }
.login-card .btn-primary:active{ transform:translateY(.5px); }

/* ---- internas (shell): material + verde-marca ---- */
:root{ --pos:#35c98c; }
:root[data-theme="light"]{ --pos:#0f9d58; }

/* luz ambiente + grão — GLOBAL, atrás de tudo (z-index:-1: não altera layout algum) */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(54% 44% at 90% 3%, var(--brand-glow), transparent 74%); }
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.02; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E"); }

/* marca na sidebar: mark em token verde + wordmark two-tone */
.brand .brand-mark{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(160deg,#12241c,#0c1613); border:1px solid rgba(60,230,160,.24);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 6px 16px -8px rgba(60,230,160,.4), inset 0 1px 0 rgba(255,255,255,.07); }
.brand .brand-mark svg{ width:18px; height:18px; }
.brand-text{ letter-spacing:-.02em; }

/* cards de cliente: material (gradiente + hairline highlight + sombra) */
.client-card{ background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); }
.client-card:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-lift); }
.stat{ box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }

/* avatar: token vivo em vez de branco chapado */
.cc-avatar:not(.has-img), .user-avatar:not(.has-img){
  background:conic-gradient(from 210deg,#256045,#3ce6a0,#1c8a63,#256045) !important;
  color:#06130c !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }

/* glassmorphism: containers translúcidos deixam a luz ambiente vazar por trás */
.client-card{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 74%, transparent),
    color-mix(in srgb, var(--surface) 74%, transparent));
  backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25); }
.icon-btn, .period-trigger, .seg-group{
  background:color-mix(in srgb, var(--surface) 84%, transparent) !important;
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }

/* ---- painel do cliente (visão restrita) + login email-first ---- */
/* O overflow-x:clip vivia AQUI e cortava a tarja do topo: um filho full-bleed
   (width:100vw) é recortado pela caixa do pai que clipa, então a barra parava na
   largura da coluna em vez de ir de ponta a ponta. O clip subiu para o <body>
   (.body-client-main) — continua matando a rolagem horizontal que o 100vw cria
   por causa da barra de rolagem vertical, sem recortar a tarja.
   overflow-x:clip não cria scroll container, então o position:sticky da tarja
   segue funcionando. */
.client-main{ width:100%; max-width:1080px; margin-inline:auto; padding:0 24px 80px; }
/* O clip precisa ser no ELEMENTO RAIZ, não no <body>: com ele só no body ainda
   sobravam ~8px de rolagem lateral (metade da barra de rolagem, porque 100vw a
   inclui e a tarja transborda 7,5px de cada lado). overflow no <html> propaga
   para a viewport e mata isso; 'clip' não cria scroll container, então o sticky
   da tarja continua valendo. */
.page-client-main, .page-client-main > body{ overflow-x:clip; }
.client-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:64px; position:sticky; top:0; z-index:30; margin-bottom:6px;
  /* full-bleed: o fundo/borda vão de ponta a ponta da tela, mas o conteúdo
     (logo + período + Sair) fica alinhado à coluna central de 1080px. */
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-inline:max(24px, calc(50vw - 540px));
  background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 88%, transparent), color-mix(in srgb,var(--bg) 52%, transparent));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--border); }
.client-top-right{ display:flex; align-items:center; gap:12px; }
.client-hello{ padding:28px 0 16px; }
.client-hello h1{ font-size:26px; font-weight:700; letter-spacing:-.03em; }
.client-hello .sub{ margin-top:6px; }
/* Painel do cliente no celular: 24px de margem lateral comiam os cards (o resto
   do app usa 14–16px), e a logo herdava o padding do menu lateral
   (6px 10px 18px): ficava 6px acima do centro da barra e 10px à direita da
   coluna dos cards. */
@media (max-width: 720px) {
  .client-main{ padding:0 16px 64px; }
  .client-topbar{ padding-inline:16px; gap:10px; }
  .client-topbar .brand{ padding:0; }
  .client-hello{ padding:22px 0 14px; }
}
.login-id{ gap:4px; }
.login-id-val{ font-size:14px; color:var(--text-2); padding:2px 0; }
.login-back{ display:inline-block; margin-top:12px; font-size:12.5px; color:var(--text-3); text-decoration:none; }
.login-back:hover{ color:var(--text); }
/* Entrada (login/cadastro/esqueci/nova senha/convite) no celular:
   - input a 14px fazia o iOS dar zoom ao focar; 16px trava isso;
   - o aviso (.alert, margem 20) + gap do card (14) + margem do link (12) somavam
     46px de buraco entre o aviso e o "usar outro e-mail"/botão;
   - "Mostrar" da senha tinha 29px de alvo. */
@media (max-width: 720px){
  .login-card{ padding:24px 20px; }
  .login-card .field input{ font-size:16px; padding:12px 12px; }
  .login-card > .alert{ margin-bottom:0; }
  .login-card > .alert + .login-back{ margin-top:0; }
  .login-card .pw-eye{ min-height:36px; padding:8px 10px; }
  .login-card .login-back{ padding:6px 0; }
}

/* ================================================================
   Clientes / Contas — diagramação premium (organização + hierarquia)
   ================================================================ */

/* CTA primário = verde-marca em todo o app (coerência com o login) */
.btn-primary{
  background:linear-gradient(180deg,#33dd97,#1fae76);
  color:#06130c; border:1px solid rgba(60,230,160,.5); font-weight:600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px -12px var(--brand-glow);
  transition:filter .15s ease, box-shadow .15s ease, transform .05s ease; }
.btn-primary:hover{ color:#06130c; filter:brightness(1.05);
  /* devolve o verde: o .btn-primary:hover lá de cima (tema tinta) trocava o fundo
     por --ink-bg, e no hover o botão ficava preto (claro) ou branco (escuro) */
  background:linear-gradient(180deg,#33dd97,#1fae76); border-color:rgba(60,230,160,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 30px -10px var(--brand-glow); }
.btn-primary:active{ transform:translateY(.5px); }

/* Formulário de criação dentro de um card material (deixa de flutuar solto) */
.create-form, .block > .form-row{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 82%, transparent),
    color-mix(in srgb, var(--surface) 82%, transparent));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border); border-radius:14px;
  padding:18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); }
.create-form{ gap:13px; }

/* Rótulos de campo mais legíveis */
.field span{ color:var(--text-3); font-weight:500; letter-spacing:.005em; }

/* Foco verde-marca em TODOS os campos (igual ao login) */
.create-form .field > input:focus, .create-form .field > select:focus,
.act-row input:focus, .form-row input:focus, .form-row select:focus,
.inline-input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }

/* "+ adicionar outra conta": botão discreto (não uma barra vazia) */
.act-rows + .btn, .field > .btn-sm{
  align-self:flex-start; color:var(--text-3);
  border-style:dashed; background:transparent; }
.act-rows + .btn:hover, .field > .btn-sm:hover{
  color:var(--text); border-color:var(--brand); border-style:solid;
  background:color-mix(in srgb, var(--brand) 8%, transparent); }

/* Nova conta de anúncio: proporções controladas (nada esticado demais) */
.block > .form-row{ gap:12px; padding:16px 18px; }
.block > .form-row select{ flex:0 0 auto; min-width:170px; }
.block > .form-row input[type="text"]{ flex:1 1 180px; min-width:150px; max-width:none; }
.block > .form-row .btn-primary{ flex:0 0 auto; margin-left:auto; }

/* ---- Listas editáveis: material, cabeçalho e hover ---- */
.edit-list{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 82%, transparent),
    color-mix(in srgb, var(--surface) 82%, transparent));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); }
.edit-row{ padding:12px 18px; }
.edit-head{
  background:color-mix(in srgb, var(--surface-2) 60%, transparent);
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3); padding-top:10px; padding-bottom:10px; }
.edit-row:not(.edit-head):hover{ background:var(--surface-hover); }
.edit-row.row-muted:hover{ background:transparent; }

/* Inputs inline: superfície funda, altura consistente */
.inline-input{ padding:9px 11px; }

/* Ações: agrupadas à direita, sem quebrar linha, Salvar em destaque sutil */
.actions-cell{ flex-wrap:nowrap; gap:6px; }
.actions-cell .btn{ padding:6px 10px; }
.actions-cell button[type="submit"], .actions-cell .btn-save{
  color:var(--text); border-color:var(--border-strong); }
.actions-cell button[type="submit"]:hover, .actions-cell .btn-save:hover{
  border-color:var(--brand); color:var(--text);
  background:color-mix(in srgb, var(--brand) 8%, transparent); }

/* Coluna "Contas" (número) alinhada e discreta */
.edit-row-client .num{ color:var(--text-2); }
.edit-row-client .num .link{ border-bottom-color:var(--border); }
/* ================================================================
   Clientes / Contas — REPAGINAÇÃO (diagramação premium v2)
   Objetivo: lista calma "editável no lugar", linhas com ritmo,
   ações discretas agrupadas, form de criação estruturado.
   ================================================================ */

/* ---- Roster: linha calma de "lista", densidade alinhada ao dashboard ---- */
.edit-list{ border-radius:14px; }
.edit-row{ padding:9px 16px; gap:12px; align-items:center; transition:background-color .14s ease; }
.edit-row:not(.edit-head){ min-height:50px; }
.edit-head{ min-height:0; padding-top:9px; padding-bottom:9px; }
.edit-row:not(.edit-head):hover{ background:color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* Nome = âncora visual da linha */
.edit-row-client input[name="name"], .edit-row input[name="name"]{
  font-weight:600; font-size:13px; letter-spacing:-.01em; }

/* Colunas do cliente: proporções equilibradas + status/contas centrados.
   Coluna de ações FIXA: sem isso o cabeçalho (texto curto "Ações") e as linhas
   (3 botões) resolvem larguras `fr` diferentes → colunas desalinham entre header
   e dados. Fixar a última coluna alinha tudo perfeitamente. */
.edit-row-client{ grid-template-columns:48px 1.6fr 170px 80px 150px 90px; }
.actions-cell{ overflow:visible; }
/* IMPORTANTE: centralizar SÓ o número de contas (span.num), NÃO o input do
   hottok (que também tem classe .num). O hottok fica à esquerda. */
.inline-input{ text-align:left; }
.edit-row-client > span.num, .edit-row-client .status-cell{ text-align:center; }
.edit-row-client > span.num a{ display:inline-block; }
.edit-head span{ display:flex; align-items:center; }
.edit-row-client.edit-head span:nth-child(5),
.edit-row-client.edit-head span:nth-child(6){ justify-content:center; }

/* Contas de anúncio (funnels): colunas equilibradas */
.edit-row:not(.edit-row-client){ grid-template-columns:1.4fr 1.1fr 84px 228px; }
.edit-row:not(.edit-row-client) .status-cell{ text-align:center; }
.edit-row.edit-head:not(.edit-row-client) span:nth-child(3){ justify-content:center; }

/* ---- Avatar na lista: proporcional, "remover" só no hover (sem poluir) ---- */
.avatar-cell{ gap:0; }
.av-edit{ width:36px; height:36px; border-radius:10px; font-size:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.av-remove{ position:absolute; margin-top:2px; font-size:10.5px; opacity:0; transform:translateY(-2px);
  transition:opacity .14s ease, transform .14s ease; pointer-events:none; }
.avatar-cell:hover .av-remove:not([hidden]){ opacity:.75; transform:none; pointer-events:auto; }
.avatar-cell{ position:relative; padding-bottom:0; }

/* ---- Ações: chips calmos agrupados; primária (Abrir) em destaque sutil ---- */
.actions-cell{ gap:6px; }
.actions-cell .btn{
  padding:5px 10px; font-size:11.5px; border-radius:8px;
  color:var(--text-3); border:1px solid transparent; background:transparent;
  transition:color .14s ease, border-color .14s ease, background-color .14s ease; }
.edit-row:hover .actions-cell .btn{ border-color:var(--border); color:var(--text-2); }
.actions-cell .btn:hover{ color:var(--text); border-color:var(--border-strong);
  background:var(--surface-hover); }
/* "Abrir" (link) = ação primária da linha */
.edit-row-client .actions-cell a.btn{
  color:var(--brand); border-color:color-mix(in srgb, var(--brand) 30%, transparent);
  background:color-mix(in srgb, var(--brand) 8%, transparent); }
.edit-row-client:hover .actions-cell a.btn{ border-color:color-mix(in srgb, var(--brand) 45%, transparent); }
.edit-row-client .actions-cell a.btn:hover{ color:#06130c;
  background:linear-gradient(180deg,#33dd97,#1fae76); border-color:transparent; }

/* ---- "Novo cliente": form estruturado (labels fortes, sub-bloco de contas) ---- */
.create-form .block-sub{ font-size:12px; color:var(--text-3); margin-top:-6px; }
.field > span{ font-size:11.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-3); }
.field .hint-line{ text-transform:none; letter-spacing:0; font-weight:400; }
.create-form .field > input, .create-form .field > select{ padding:9px 11px; font-size:13px; }
.field{ gap:6px; }
/* Sub-bloco "Contas de anúncio" vira um painel embutido */
.create-form > .field:has(.act-rows){
  background:color-mix(in srgb, var(--bg-soft) 60%, transparent);
  border:1px solid var(--border); border-radius:11px; padding:14px; gap:9px; }
.act-rows{ margin:2px 0 0; }
.form-actions{ margin-top:4px; }
.form-actions .btn-primary{ padding:10px 18px; font-size:13px; border-radius:10px; }

/* ---- Webhook: faixa de config compacta (não um "alerta") ---- */
.webhook-box{ background:color-mix(in srgb, var(--surface-2) 60%, transparent);
  border:1px dashed var(--border-strong); border-radius:12px; padding:12px 16px;
  color:var(--text-3); font-size:12.5px; }
.webhook-box code{ font-size:12px; }
.webhook-box .btn{ margin-left:auto; }

/* ================================================================
   CONSISTÊNCIA GLOBAL (glass + tokens) — 29/07
   (1) --accent/--accent-soft estavam INDEFINIDOS mas usados em ~12
       lugares (aba ativa, funil-final, toggles, sliders) → caíam em
       fallback cinza. Alias p/ a verde-marca = consistência.
   (2) Material glass (mesmo do dashboard) nos filter bars, KPIs e
       estados vazios — antes eram flat var(--surface).
   ================================================================ */
:root{ --accent: var(--brand); --accent-soft: color-mix(in srgb, var(--brand) 14%, transparent); }

/* Glass reutilizável = material do dashboard */
.camp-filters, .an-kpi, .empty, .tags-empty{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 82%, transparent),
    color-mix(in srgb, var(--surface) 82%, transparent));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); }
.camp-filters{ border-radius:14px; }
.an-kpi{ border-radius:14px; }
.empty{ border-style:solid; }

/* KPIs e blocos do analytics: leitura de card material coerente */
.an-funnel-block{ background:color-mix(in srgb, var(--surface-2) 78%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.an-funnel-block.is-final{ background:color-mix(in srgb, var(--brand) 10%, transparent);
  border-color:color-mix(in srgb, var(--brand) 45%, transparent); }

/* ================================================================
   Dropdown custom (.cs) — substitui o popup nativo do <select>
   (feio/quadradão/azul do SO). O <select> nativo fica escondido só
   para a lógica (value + submit); a UI é esta lista glass.
   ================================================================ */
.cs{ position:relative; display:inline-block; vertical-align:top; }
.cs-native{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }
/* O <select> nativo fica escondido atras do botao do custom select (app.js).
   Varias telas estilizam `select` com min-width (WhatsApp 220px, Pixel, ...)
   e essa regra vencia o 1px daqui: um elemento invisivel de 220px, absoluto,
   sobrava pra fora da direita e a pagina ganhava rolagem lateral (visto na
   aba WhatsApp no desktop e no Pixel a 390px). Largura de elemento invisivel
   nao e decisao de tela — por isso o !important aqui. */
select.cs-native{ min-width:0 !important; max-width:1px !important; opacity:0 !important; }
.cs-trigger{
  display:inline-flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-width:170px; padding:8px 12px; font:inherit; font-size:13px; line-height:1.3;
  color:var(--text); background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-sm); cursor:pointer; text-align:left;
  transition:border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }
.cs-trigger:hover{ border-color:var(--border-strong); background:var(--surface-hover); }
.cs.is-open .cs-trigger{ border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.cs-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* `.field span` (rótulo do campo, 12px cinza) pegava também o valor escolhido
   do dropdown custom dentro de um .field — parecia placeholder. O valor herda
   do botão. (.cs no meio: vence .login-card .field span / .pxf .field span.) */
.field .cs .cs-label,
.field .cs .cs-option > span{ font-size:inherit; color:inherit; font-weight:inherit; letter-spacing:normal; text-transform:none; }
.cs-caret{ display:inline-flex; flex:0 0 auto; color:var(--text-3); transition:transform .18s ease; }
.cs.is-open .cs-caret{ transform:rotate(180deg); color:var(--text-2); }
.cs-caret svg{ width:14px; height:14px; display:block; }
.cs-panel{
  position:fixed; width:max-content; max-width:min(420px,86vw);
  z-index:3000; max-height:min(320px,58vh); overflow:auto; padding:6px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 94%, transparent),
    color-mix(in srgb, var(--surface) 96%, transparent));
  backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--border-strong); border-radius:12px;
  box-shadow:var(--shadow-lift); animation:cs-in .14s cubic-bezier(.2,.7,.3,1); }
.cs-panel[hidden]{ display:none; }
.cs-panel.cs-up{ top:auto; bottom:calc(100% + 6px); }
@keyframes cs-in{ from{opacity:0; transform:translateY(-5px) scale(.985);} to{opacity:1; transform:none;} }
.cs-option{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 11px; border-radius:8px; font-size:13px; color:var(--text-2); cursor:pointer;
  white-space:nowrap; transition:background-color .1s ease, color .1s ease; }
.cs-option:hover, .cs-option.is-active{ background:var(--surface-hover); color:var(--text); }
.cs-option.is-sel{ color:var(--brand); font-weight:500; }
.cs-option.is-sel::after{ content:''; width:15px; height:15px; flex:0 0 auto;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.cs-option:not(.is-sel)::after{ content:''; width:15px; flex:0 0 auto; }
.cs-option.is-dis{ opacity:.4; cursor:default; }
.cs-option[hidden], .cs-empty[hidden]{ display:none; }
.cs-trigger:disabled{ opacity:.55; cursor:not-allowed; }
.cs-trigger:disabled:hover{ border-color:var(--border); background:var(--surface-2); }
.cs-trigger:focus-visible{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
/* busca dentro do painel (select com data-cs-search) */
.cs-panel--search{ display:flex; flex-direction:column; padding:0; overflow:hidden; min-width:260px; }
.cs-panel--search[hidden]{ display:none; }
.cs-search{ flex:0 0 auto; margin:6px 6px 0; padding:8px 10px; font:inherit; font-size:13px;
  color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.cs-search:focus{ outline:none; border-color:var(--brand); }
.cs-search::placeholder{ color:var(--text-3); }
.cs-list{ flex:1 1 auto; overflow:auto; padding:6px; min-height:0; }
.cs-empty{ padding:10px 11px; font-size:12.5px; color:var(--text-3); }

/* ================================================================
   Caixa de integração (Clientes) — deixa claro que é a integração
   ESPECÍFICA do Hotmart (info-produtos), não a única/universal.
   ================================================================ */
.integ-box{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 82%, transparent),
    color-mix(in srgb, var(--surface) 82%, transparent));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin-bottom:20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); }
.integ-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.integ-plat{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text); }
.integ-plat svg{ width:16px; height:16px; color:var(--brand); }
.integ-plat b{ color:var(--brand); }
.integ-for{ font-size:11.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
.integ-for b{ color:var(--text-2); font-weight:600; }
.integ-body{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--text-3); }
.integ-body code{ font-family:var(--mono); font-size:12px; color:var(--text);
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-sm); padding:7px 10px; }
.integ-body .btn{ margin-left:auto; }
.integ-note{ margin:12px 0 0; font-size:11.5px; color:var(--text-3); line-height:1.5; }
.integ-note::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--text-3); opacity:.5; margin-right:7px; vertical-align:middle; }

/* ================================================================
   Clientes — botão danger, contador de contas, overlays/modais,
   wizard de novo cliente, cards de tipo e de integração (logos).
   ================================================================ */
.btn-danger{ color:var(--neg); }
.edit-row:hover .actions-cell .btn-danger{ border-color:color-mix(in srgb, var(--neg) 35%, transparent); color:var(--neg); }
.actions-cell .btn-danger:hover{ color:#fff; border-color:transparent;
  background:linear-gradient(180deg,#e5706b,#c8453f); }
.btn-danger.btn-solid{ color:#fff; border:1px solid transparent;
  background:linear-gradient(180deg,#e5706b,#c8453f); font-weight:600; }
.btn-danger.btn-solid:hover{ filter:brightness(1.06); color:#fff; }

/* Contador de contas = botão discreto (abre o gerenciador) */
/* Botão de gerenciar contas — afração VISÍVEL (o usuário precisa perceber que
   dá pra adicionar/gerir contas por aqui). Borda + fundo em repouso, verde no hover. */
.acc-count{ display:inline-flex; align-items:center; gap:6px; font:inherit;
  font-family:var(--mono); font-size:12.5px; color:var(--text-2); cursor:pointer;
  background:color-mix(in srgb, var(--bg-soft) 60%, transparent);
  border:1px solid var(--border); border-radius:8px; padding:5px 10px;
  transition:border-color .14s ease, color .14s ease, background-color .14s ease; }
.acc-count svg{ color:var(--brand); }
.acc-count:hover{ color:var(--text); border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 10%, transparent); }

/* ---- Overlay / modal genérico ---- */
.ov{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(6,8,10,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:ov-fade .16s ease; }
.ov[hidden]{ display:none; }
@keyframes ov-fade{ from{opacity:0;} to{opacity:1;} }
.ov-card{ width:100%; max-width:620px; max-height:90vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 96%, transparent),
    color-mix(in srgb, var(--surface) 97%, transparent));
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--border-strong); border-radius:18px; box-shadow:var(--shadow-lift);
  animation:ov-pop .18s cubic-bezier(.2,.7,.3,1); overflow:hidden; }
.ov-sm{ max-width:460px; }
@keyframes ov-pop{ from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;} }
.ov-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--border); }
.ov-head h3{ margin:0; font-size:16px; font-weight:600; color:var(--text); }
.ov-sub{ margin:4px 0 0; font-size:12.5px; color:var(--text-3); }
.ov-x{ background:transparent; border:none; color:var(--text-3); font-size:16px; cursor:pointer;
  width:30px; height:30px; border-radius:8px; flex:0 0 auto; transition:.14s; }
.ov-x:hover{ background:var(--surface-hover); color:var(--text); }
.ov-body{ padding:20px; overflow:auto; }
.ov-foot{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-top:1px solid var(--border); }
.ov-foot .btn:first-child{ margin-right:auto; }

/* ---- Excluir ---- */
.del-warn{ display:flex; gap:14px; align-items:flex-start; }
.del-warn svg{ color:var(--neg); flex:0 0 auto; margin-top:2px; }
.del-warn p{ margin:0; font-size:13.5px; color:var(--text-2); line-height:1.55; }
.del-warn b{ color:var(--text); }

/* ---- Gerenciar contas ---- */
.acc-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.acc-item{ display:grid; grid-template-columns:1.3fr 1fr auto auto; gap:8px; align-items:center;
  padding:8px; border:1px solid var(--border); border-radius:10px;
  background:color-mix(in srgb, var(--bg-soft) 55%, transparent); }
.acc-item.is-off{ opacity:.55; }
.acc-item input{ background:var(--bg-soft); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font:inherit; font-size:13px; padding:7px 9px; width:100%; }
.acc-item input.num{ font-family:var(--mono); font-size:12px; }
.acc-item input:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.acc-empty{ text-align:center; color:var(--text-3); font-size:13px; padding:18px 0; }
.acc-add{ border-top:1px dashed var(--border-strong); padding-top:14px; }
.acc-add-fields{ display:flex; gap:8px; flex-wrap:wrap; }
.acc-add-fields input{ flex:1 1 160px; min-width:130px; background:var(--bg-soft);
  border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; font-size:13px; padding:8px 10px; }
.acc-add-fields input.num{ font-family:var(--mono); font-size:12px; }
.acc-add-fields .btn{ flex:0 0 auto; }

/* ---- Wizard ---- */
.ov-wiz{ max-width:640px; }
.wiz-steps{ display:flex; gap:7px; padding:14px 20px 0; }
.wiz-dot{ height:4px; flex:1 1 0; border-radius:2px; background:var(--border); transition:background .2s ease; }
.wiz-dot.is-on{ background:var(--brand); }
.wiz-body{ min-height:280px; }
.wiz-step{ display:none; animation:wiz-in .2s ease; }
.wiz-step.is-active{ display:block; }
@keyframes wiz-in{ from{opacity:0; transform:translateX(8px);} to{opacity:1; transform:none;} }
.wiz-hint{ margin:0 0 14px; font-size:13px; color:var(--text-3); line-height:1.55; }
.field-label{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-3); margin:14px 0 8px; }
.wiz-foot .wiz-spacer{ flex:1 1 auto; }
.wiz-foot .btn:first-child{ margin-right:0; }

/* Tipo — cards selecionáveis */
.type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.type-card{ position:relative; display:flex; flex-direction:column; gap:3px; cursor:pointer;
  padding:13px 14px; border:1px solid var(--border); border-radius:12px;
  background:color-mix(in srgb, var(--bg-soft) 50%, transparent); transition:.14s; }
.type-card:hover{ border-color:var(--border-strong); background:var(--surface-hover); }
.type-card input{ position:absolute; opacity:0; pointer-events:none; }
.type-ic{ font-size:20px; line-height:1; }
.type-t{ font-size:13.5px; font-weight:600; color:var(--text); }
.type-d{ font-size:11.5px; color:var(--text-3); line-height:1.4; }
.type-card:has(input:checked){ border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 9%, transparent);
  box-shadow:0 0 0 1px var(--brand) inset; }

/* Integração — cards com "logo" */
.integ-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.integ-card{ display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left;
  padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--bg-soft);
  transition:.14s; }
.integ-card:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.integ-card.is-active{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; }
.integ-card-t{ font-size:11.5px; color:var(--text-3); }
.integ-card-arrow{ margin-left:auto; color:var(--text-3); font-size:18px; }
.integ-logo{ font-weight:800; font-size:16px; letter-spacing:-.02em; }
.integ-logo.hotmart{ color:#ff5c35; }
.integ-logo.yampi{ color:#c026d3; }
.integ-guide{ margin-top:14px; border:1px solid var(--border); border-radius:12px; padding:16px;
  background:color-mix(in srgb, var(--bg-soft) 55%, transparent); animation:wiz-in .18s ease; }
.guide-steps{ display:flex; flex-direction:column; gap:14px; }
.guide-step{ display:flex; gap:12px; font-size:13px; color:var(--text-2); line-height:1.5; }
.guide-step b{ color:var(--text); }
.guide-n{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:600; color:var(--brand);
  background:color-mix(in srgb, var(--brand) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.guide-code{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.guide-code code{ font-family:var(--mono); font-size:11.5px; color:var(--text);
  background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; padding:7px 9px;
  overflow:auto; max-width:100%; }
.guide-input{ display:block; margin-top:8px; width:100%; background:var(--bg-soft);
  border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit;
  font-family:var(--mono); font-size:12px; padding:8px 10px; }
.guide-input:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.guide-soon b{ color:var(--text); font-size:13.5px; }
.guide-soon p{ margin:8px 0 0; font-size:12.5px; color:var(--text-3); line-height:1.55; }
/* A linha honesta do fim da guia: esta plataforma assina o webhook, ou não. */
.integ-fact{ margin:14px 0 0; padding-top:12px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text-3); line-height:1.55; }
.integ-fact b{ color:var(--text-2); font-weight:600; }
/* O cartão de plataforma sem "logo" própria (vem da definição instalada). */
.integ-logo{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Revisão final */
.wiz-review{ margin-top:16px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.wiz-review-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 14px;
  font-size:13px; border-bottom:1px solid var(--border); }
.wiz-review-row:last-child{ border-bottom:none; }
.wiz-review-row span{ color:var(--text-3); }
.wiz-review-row b{ color:var(--text); font-weight:600; }

@media (max-width:560px){
  .type-grid, .integ-cards{ grid-template-columns:1fr; }
  .acc-item{ grid-template-columns:1fr 1fr; }
}

/* [hidden] deve sempre ocultar, mesmo com .btn{display:...} (senão botões hidden vazam no wizard). */
[hidden]{ display:none !important; }

/* Estado vazio (ex: cliente sem contas) precisa respirar antes da próxima seção. */
.empty{ margin-bottom:30px; }

/* Input (busca) dentro do filter bar padrão — mesmo visual do select. */
.camp-field input[type=search], .camp-field input[type=text]{
  padding:8px 10px; font:inherit; font-size:13px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
  min-width:200px; }
/* Input (busca) dentro do filter bar padrão — mesmo visual do select. */
.camp-field input[type=search], .camp-field input[type=text]{
  padding:8px 10px; font:inherit; font-size:13px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
  min-width:200px; }
.camp-field input[type=search]:focus, .camp-field input[type=text]:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }

/* ================================================================
   Usuário na sidebar (clicável) + Modal de perfil
   ================================================================ */
.user{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; border-radius:10px; padding:7px 9px;
  cursor:pointer; font:inherit; color:inherit; transition:background-color .14s ease, border-color .14s ease; }
.user:hover{ background:var(--surface); border-color:var(--border); }
.user-avatar{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  overflow:hidden; font-weight:600; font-size:13px; color:var(--ink-fg); background:var(--ink-bg); }
.user-avatar.has-img{ background:none; }
.user-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.user-name{ flex:1 1 auto; font-size:13px; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-edit{ flex:0 0 auto; color:var(--text-3); opacity:0; transition:opacity .14s ease; }
.user:hover .user-edit{ opacity:.8; }

/* Modal de perfil */
.pf-photo{ display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.pf-av{ position:relative; width:64px; height:64px; border-radius:16px; flex:0 0 auto; cursor:pointer;
  display:grid; place-items:center; overflow:hidden; color:var(--ink-fg); background:var(--ink-bg);
  font-size:24px; font-weight:600; border:1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.pf-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-av-cam{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.45);
  color:#fff; opacity:0; transition:opacity .14s ease; }
.pf-av-cam svg{ width:20px; height:20px; }
.pf-av:hover .pf-av-cam, .pf-av:focus-visible .pf-av-cam{ opacity:1; }
.pf-av.is-busy{ opacity:.55; pointer-events:none; }
.pf-photo-info{ display:flex; flex-direction:column; gap:4px; }
.pf-photo-info b{ font-size:13.5px; color:var(--text); font-weight:600; }
.pf-photo-remove{ align-self:flex-start; background:none; border:none; color:var(--text-3); cursor:pointer;
  font-size:12px; padding:0; text-decoration:underline; text-underline-offset:2px; }
.pf-photo-remove:hover{ color:var(--neg); }

.pf-form{ display:flex; flex-direction:column; gap:12px; }
.pf-form .field{ display:flex; flex-direction:column; gap:6px; }
.pf-form .field > span{ font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text-3); }
.pf-form .field input{ background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text); font:inherit; font-size:13.5px; padding:10px 12px; width:100%; }
.pf-form .field input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.pf-actions{ display:flex; justify-content:flex-end; margin-top:2px; }
.pf-pass{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.pf-sec-title{ font-size:12.5px; font-weight:600; color:var(--text-2); margin-bottom:2px; }

/* Idioma (perfil e login): bandeiras em SVG, nunca emoji (o Windows não desenha bandeira em emoji). */
.pf-lang{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border); gap:10px; }
.lang-pick{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.lang-opt{ position:relative; display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--border);
  border-radius:var(--r-sm); background:var(--bg-soft); color:var(--text-2); font-size:13px; cursor:pointer;
  transition:border-color .14s ease, background-color .14s ease, color .14s ease; }
.lang-opt:hover{ border-color:color-mix(in srgb, var(--brand) 55%, var(--border)); color:var(--text); }
.lang-opt.is-on{ border-color:var(--brand); color:var(--text); background:color-mix(in srgb, var(--brand) 10%, var(--bg-soft)); }
.lang-opt input{ position:absolute; opacity:0; pointer-events:none; }
.lang-opt:has(input:focus-visible){ box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.lang-flag{ flex:0 0 auto; display:grid; width:22px; height:16px; border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); }
.lang-flag svg{ width:100%; height:100%; display:block; }
.lang-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:420px){ .lang-pick{ grid-template-columns:1fr; } }

/* Link "Produtos & custo" no modal de gerenciar contas */
.acc-products{ display:flex; align-items:center; gap:12px; margin-top:16px; padding:12px 14px;
  border:1px solid var(--border); border-radius:11px; text-decoration:none; color:inherit;
  background:color-mix(in srgb, var(--bg-soft) 55%, transparent); transition:border-color .14s ease, background-color .14s ease; }
.acc-products:hover{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 8%, transparent); }
.acc-products-ic{ flex:0 0 auto; color:var(--brand); display:grid; place-items:center; }
.acc-products-t{ display:flex; flex-direction:column; gap:2px; }
.acc-products-t b{ font-size:13px; color:var(--text); font-weight:600; }
.acc-products-t span{ font-size:11.5px; color:var(--text-3); }
.acc-products-arrow{ margin-left:auto; color:var(--text-3); font-size:16px; }
.acc-products:hover .acc-products-arrow{ color:var(--brand); }

/* Na tela de Produtos, os campos de custo/nome devem parecer inputs de verdade
   (não a edição-no-lugar sutil), pra data-entry ficar claro. */
.products-table .inline-input{ background:var(--bg-soft); border:1px solid var(--border); }
.products-table .inline-input:hover{ border-color:var(--border-strong); }

/* ================================================================
   Tema — consistência e suavização
   - sidebar com a MESMA cor do canvas (antes destoava dos containers)
   - light menos branco (canvas cinza claro, cards brancos "flutuam")
   - sombras bem mais leves no light (não ficam feias)
   - logo (funil) adapta a cor ao tema
   ================================================================ */
/* Sidebar com a cor dos CONTAINERS (cards) — mesmo tom dos painéis do meio. */
.sidebar{ background: var(--surface); border-right: 1px solid var(--border); }
.brand .brand-mark{ color:#3ce6a0; }

/* Remove o ícone de info (ⓘ) dos cards de métrica → sobra espaço p/ o rótulo
   inteiro (ex.: "Faturamento" deixa de cortar). */
.stat .stat-info{ display:none; }
.stat-label{ letter-spacing:-.01em; }

:root[data-theme="light"]{
  --bg:            #EEF0F3;
  --bg-soft:       #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F6F7F9;
  --surface-hover: #EDEFF3;
  --shadow:        0 1px 2px rgba(20,22,28,.045), 0 4px 12px -8px rgba(20,22,28,.10);
  --shadow-lift:   0 1px 3px rgba(20,22,28,.06), 0 10px 24px -12px rgba(20,22,28,.14);
}

/* Logo no light: quadrado verde-claro + funil verde-escuro (contraste certo) */
:root[data-theme="light"] .brand .brand-mark{
  color:#0b8a4e;
  background:linear-gradient(160deg,#e9f7ef,#d7f0e2);
  border:1px solid rgba(11,138,78,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

/* No light o avatar verde não precisa de sombra escura */
:root[data-theme="light"] .cc-avatar:not(.has-img),
:root[data-theme="light"] .user-avatar:not(.has-img){ box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }

/* Suaviza o highlight interno branco dos cards no light (fica sujo no branco) */
:root[data-theme="light"] .client-card,
:root[data-theme="light"] .stat{ box-shadow: var(--shadow); }
:root[data-theme="light"] .stat{ box-shadow: none; }

/* ── Captação (leads/mensagens/seguidores) — blocos "funil à parte" ───────── */
.cap-card .cap-ico{ background:linear-gradient(160deg,#12241c,#0c1613); color:#3ce6a0;
  display:grid; place-items:center; }
.cap-card .cap-ico svg{ width:18px; height:18px; }
:root[data-theme="light"] .cap-card .cap-ico{ color:#0b8a4e; background:linear-gradient(160deg,#e9f7ef,#d7f0e2); }
.cap-manual{ display:inline-flex; align-items:center; gap:6px; }
.cap-manual .cap-input{ width:88px; font:inherit; font-weight:700; padding:3px 8px;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; color:var(--text);
  text-align:left; -moz-appearance:textfield; }
.cap-manual .cap-input::-webkit-outer-spin-button,
.cap-manual .cap-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cap-manual .cap-save{ font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  padding:4px 10px; border-radius:8px; border:1px solid rgba(60,230,160,.28);
  background:rgba(60,230,160,.12); color:#3ce6a0; }
.cap-manual .cap-save:hover{ background:rgba(60,230,160,.2); }
:root[data-theme="light"] .cap-manual .cap-save{ color:#0b8a4e; }

/* Captação: containers levemente mais apagados que os de venda (~20%), só p/
   diferenciação visual leve. */
.cap-card{ opacity:.8; }
.cap-card:hover{ opacity:.92; }

/* ── Funil: avatar colorível + ícone Lucide + arrastar + engrenagem ──────── */
.funnel-card{ position:relative; }
.funnel-card.dragging{ opacity:.45; }
.funnel-card.drop-above{ box-shadow:0 -3px 0 -1px var(--brand); }
.funnel-card.drop-below{ box-shadow:0 3px 0 -1px var(--brand); }
.funnel-link{ display:block; text-decoration:none; color:inherit; }
.cc-drag{ display:inline-flex; align-items:center; color:var(--text-3); cursor:grab; opacity:.45; margin-right:4px; }
.cc-drag:active{ cursor:grabbing; }
.cc-drag svg{ width:16px; height:16px; }
/* precisa vencer o .cc-avatar:not(.has-img){...!important} (quadrado verde). */
.cc-avatar.funnel-avatar{ color:var(--fnl) !important;
  background:color-mix(in srgb, var(--fnl) 18%, #0c1613) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fnl) 34%, transparent) !important;
  display:grid; place-items:center; }
.cc-avatar.funnel-avatar svg{ width:18px; height:18px; }
.cc-avatar.funnel-avatar .fnl-initial{ color:var(--fnl) !important; font-weight:700; }

/* Seletor de cor/ícone do funil */
.fs-ov{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
.fs-ov[hidden]{ display:none; }
.fs-card{ width:min(560px,96vw); max-height:88vh; display:flex; flex-direction:column; gap:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 18px 16px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6); }
.fs-head{ display:flex; align-items:center; gap:12px; }
.fs-preview{ width:40px; height:40px; flex:0 0 40px; border-radius:11px; display:grid; place-items:center;
  color:var(--fnl); background:color-mix(in srgb, var(--fnl) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--fnl) 30%, transparent); }
.fs-preview svg{ width:20px; height:20px; }
.fs-title{ font-weight:700; font-size:15px; flex:1; }
.fs-x{ background:none; border:none; color:var(--text-3); font-size:16px; cursor:pointer; padding:4px 8px; border-radius:8px; }
.fs-x:hover{ background:var(--bg-soft); color:var(--text); }
.fs-section{ display:flex; flex-direction:column; gap:8px; min-height:0; }
.fs-label{ font-size:12px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.04em; }
.fs-hint{ color:var(--text-3); text-transform:none; font-weight:400; letter-spacing:0; }
.fs-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.fs-sw{ width:26px; height:26px; border-radius:8px; border:2px solid transparent; cursor:pointer; padding:0; }
.fs-sw.sel{ border-color:var(--text); box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text); }
.fs-custom{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.fs-cur{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--fnl);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.fs-sliders{ flex:1; display:flex; flex-direction:column; gap:9px; }
.fs-hue, .fs-light{ -webkit-appearance:none; appearance:none; height:12px; border-radius:8px; cursor:pointer; outline:none; width:100%; }
.fs-hue{ background:linear-gradient(90deg,#ff5b5b,#fbbf24,#4ade80,#2dd4bf,#60a5fa,#a78bfa,#f472b6,#ff5b5b); }
.fs-light{ background:linear-gradient(90deg,#000, var(--hue-mid,#3ce6a0), #fff); }
.fs-hue::-webkit-slider-thumb, .fs-light::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.6); cursor:pointer; }
.fs-hue::-moz-range-thumb, .fs-light::-moz-range-thumb{ width:16px; height:16px; border:none; border-radius:50%; background:#fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.55); cursor:pointer; }
.fs-hex{ width:100px; font:inherit; font-family:ui-monospace,monospace; font-size:13px; padding:7px 10px;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; color:var(--text); text-transform:lowercase; }
.fs-hex:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent); }
.fs-search{ font:inherit; padding:9px 12px; background:var(--bg-soft); border:1px solid var(--border);
  border-radius:10px; color:var(--text); }
.fs-search:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent); }
.fs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px;
  overflow-y:auto; max-height:38vh; padding:4px; border:1px solid var(--border); border-radius:10px; background:var(--bg-soft); }
.fs-ic{ aspect-ratio:1; display:grid; place-items:center; border-radius:9px; cursor:pointer;
  color:var(--text-2); background:transparent; border:1px solid transparent; }
.fs-ic:hover{ background:var(--surface); color:var(--text); }
.fs-ic.sel{ border-color:var(--fnl,var(--brand)); color:var(--fnl,var(--brand)); background:var(--surface); }
.fs-ic svg{ width:20px; height:20px; }
.fs-empty{ grid-column:1/-1; text-align:center; color:var(--text-3); padding:18px; font-size:13px; }
.fs-foot{ display:flex; justify-content:flex-end; gap:10px; }
.fs-btn,.fs-btn-ghost{ font:inherit; font-weight:600; font-size:13px; padding:9px 16px; border-radius:10px; cursor:pointer; }
.fs-btn{ background:var(--brand); border:1px solid var(--brand); color:#04120b; }
.fs-btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--text-2); }
.fs-btn-ghost:hover{ background:var(--bg-soft); color:var(--text); }

/* Pop-up do Lançador de campanhas (iframe da ferramenta) */
.lch-ov{ position:fixed; inset:0; z-index:4000; display:grid; place-items:center; padding:24px;
  background:rgba(0,0,0,.62); backdrop-filter:blur(4px); }
.lch-ov[hidden]{ display:none; }
.lch-frame-wrap{ position:relative; width:min(1180px,97vw); height:min(92vh,900px);
  background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.7); }
.lch-frame{ width:100%; height:100%; border:0; display:block; background:var(--bg); }
.lch-x{ position:absolute; top:14px; right:18px; z-index:5; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; line-height:1;
  border:1px solid var(--border); background:rgba(20,23,29,.82); backdrop-filter:blur(6px);
  color:var(--muted,#98a1b2); cursor:pointer; font-size:15px; box-shadow:0 4px 14px -6px rgba(0,0,0,.6);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
.lch-x:hover{ background:rgba(60,230,160,.16); border-color:rgba(60,230,160,.5); color:#e6fff5; transform:scale(1.06); }
.lch-x:active{ transform:scale(.96); }

/* ================================================================
   Métricas do cliente — camada visual PREMIUM (KPIs tabulares,
   gauge de ROAS vs meta, gráficos com material sutil). Dark + light.
   ================================================================ */

/* KPIs: só um polish de hover (tipografia volta ao padrão original do app). */
.stat { transition: border-color .18s ease; }
.client-card:hover .stat { border-color: var(--border-strong); }

/* --- Cartões de gráfico: material translúcido + hairline no tom da marca --- */
.charts-grid .chart-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 55%, transparent),
    color-mix(in srgb, var(--surface) 80%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow);
}
/* (26/09) O traço verde de 1px no topo saiu: com a borda de 1px, ele ficava
   1px pra DENTRO do contorno e parecia uma segunda linha deslocada. */
:root[data-theme="light"] .charts-grid .chart-card {
  box-shadow: var(--shadow);
}

/* --- Micro-animação de entrada (fade + leve subida) --- */
@keyframes ub-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.charts-grid .chart-card, .metrics-strip { animation: ub-rise .5s ease both; }
.charts-grid .chart-side { animation-delay: .06s; }

@media (prefers-reduced-motion: reduce) {
  .rg-fill { animation: none; stroke-dashoffset: calc(119.38 * (1 - var(--pct, 0))); }
  .charts-grid .chart-card, .metrics-strip { animation: none; }
}

/* Funis sem movimento no período (client.php / painel.php): ficam escondidos
   atrás desta linha; clique abre/fecha, estado lembrado por cliente. */
.idle-toggle { display: inline-flex; align-items: center; gap: 6px; margin: -14px 0 34px; padding: 6px 0; background: none; border: 0; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.idle-toggle:hover { color: var(--text); }
.idle-caret { display: inline-block; transition: transform .15s ease; }
.idle-toggle[aria-expanded="true"] .idle-caret { transform: rotate(90deg); }
.idle-action { text-decoration: underline; text-underline-offset: 3px; }
.client-stack > .funnel-card.is-idle { opacity: .72; }

/* ----------------------------------------------------------------
   Checkout: Recuperação de vendas + Taxa de aprovação (20/09/2026)
   ---------------------------------------------------------------- */
/* Os dois cards têm altura própria (`align-items: start`): antes o grid esticava
   o card da esquerda até a altura do de aprovação e sobrava um vão morto embaixo
   quando o cliente ainda não tinha quebra por gatilho. */
.ck-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; }
/* os dois cards com a mesma altura; o da recuperação empurra a barra pro pé */
.ck-grid > .chart-main { display: flex; flex-direction: column; }
.ck-flow { margin-top: auto; padding-top: 18px; }
.ck-flow-bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.ck-flow-bar i { display: block; height: 100%; min-width: 6px; border-radius: 999px; }
.ck-flow i.rec { background: var(--pos); } .ck-flow i.pen { background: var(--warn); } .ck-flow i.unp { background: var(--neg); opacity: .85; }
.ck-flow-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.ck-flow-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ck-flow-leg span > i { width: 8px; height: 8px; border-radius: 50%; }
.ck-flow-leg b { color: var(--text); font-weight: 600; }
.ck-flow-tot { margin-left: auto; }
@media (max-width: 720px) { .ck-flow-tot { margin-left: 0; width: 100%; } }
.ck-pill { font-size: 11.5px; }
.ck-empty { height: auto; padding: 14px 8px 18px; text-align: center; line-height: 1.55; max-width: 520px; margin: 0 auto; }
/* Faixa de números no MESMO padrão do resto do painel (.metrics-strip / .wa-stat):
   valor 18px/500, rótulo 11.5px, sub 12px. Sem caixa dentro da caixa — as células
   só se separam por um fio vertical, que é como as outras quebras do card fazem. */
.ck-kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.ck-kpi { display: flex; flex-direction: column; gap: 2px; padding: 2px 16px; min-width: 0; border-left: 1px solid var(--border); }
.ck-kpi:first-child { border-left: 0; padding-left: 0; }
.ck-label { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.ck-val { font-size: 18px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; }
.ck-sub { font-size: 12px; color: var(--text-3); line-height: 1.35; }
/* Rótulo/valor/sub das 4 células alinhados na mesma linha-base mesmo quando um
   rótulo ou o sub quebra em duas linhas (subgrid). Sem subgrid, cai no flex de
   cima — desalinha um pouco, mas não quebra. */
@supports (grid-template-rows: subgrid) {
    .ck-kpis { grid-template-rows: auto auto auto; }
    .ck-kpi { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
}
.ck-camps { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px solid var(--border); }
.ck-camp { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.ck-camp:last-child { border-bottom: 0; }
.ck-camp-name { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.ck-camp-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); flex-shrink: 0; }
.ck-camp-n { color: var(--text); min-width: 28px; text-align: right; }
.ck-camp-amt { color: var(--pos); min-width: 96px; text-align: right; }
/* Linha de forma de pagamento: anel discreto (26px, do tamanho dos ícones da
   faixa de métricas) e tipografia na escala do painel — antes o círculo de 40px
   dominava a linha e o texto parecia miúdo do lado dele. */
.ck-methods { display: flex; flex-direction: column; }
.ck-method { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name ring" "sub ring"; align-items: center; column-gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.ck-method:first-child { padding-top: 2px; }
.ck-method:last-child { border-bottom: 0; padding-bottom: 2px; }
.ck-method-name { grid-area: name; font-size: 13px; color: var(--text); }
.ck-method-sub { grid-area: sub; font-size: 11.5px; color: var(--text-3); }
.ck-method-ring { grid-area: ring; display: inline-flex; align-items: center; gap: 9px; }
.ck-ring { width: 26px; height: 26px; transform: rotate(-90deg); flex-shrink: 0; }
.ck-ring circle { fill: none; stroke-width: 6; }
.ck-ring-bg { stroke: var(--border-strong); }
.ck-ring-fg { stroke: var(--text-2); stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.ck-ring.is-pos .ck-ring-fg { stroke: var(--pos); }
.ck-ring.is-warn .ck-ring-fg { stroke: var(--warn); }
.ck-ring.is-neg .ck-ring-fg { stroke: var(--neg); }
.ck-method-pct { font-size: 15.5px; font-weight: 500; color: var(--text); min-width: 46px; text-align: right; }
@media (max-width: 1100px) {
    /* 2 por linha: volta pro flex (com subgrid o row-gap da faixa entraria também
       entre rótulo, valor e sub de cada célula). */
    .ck-kpis { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; row-gap: 16px; }
    .ck-kpi { display: flex; grid-row: auto; }
    .ck-kpi:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) { .ck-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    /* Rótulo que quebra em 2 linhas ("Taxa de / recuperação"): em flex o texto
       virava um bloco da largura toda e o "i" ia parar na outra ponta da célula.
       Em linha, o ícone acompanha a última palavra. */
    .ck-label { display: block; line-height: 1.35; }
    .ck-label .stat-info { display: inline-block; vertical-align: -2px; margin-left: 3px; }
    /* Linhas por mensagem: gap menor dá espaço ao nome; o valor mantém largura
       mínima (cada linha é um grid próprio — sem ela as colunas desalinham). */
    .ck-camp { gap: 10px; }
    .ck-camp-amt { min-width: 88px; }
}

/* ================================================================
   CELULAR — correções de diagramação (22/09/2026)

   Este bloco vive no FIM do arquivo de propósito. As regras da
   "repaginação premium" de .edit-row-client / .edit-row (por volta
   da linha 1916) vêm DEPOIS do @media de 720px lá de cima e venciam
   por ordem de cascata: no celular a lista de clientes e a de contas
   de anúncio continuavam em 7 colunas somando ~750px dentro de um
   card de 345px com overflow:hidden — nome, status e os botões
   (Salvar / Desativar / Excluir) ficavam literalmente inalcançáveis.
   ================================================================ */
@media (max-width: 720px) {
    /* Lista editável empilha: uma coluna, cada campo em sua linha. */
    /* `.edit-row:not(.edit-row-client)` (a lista de contas de anuncio) tem
       especificidade 0,2,0 la em cima — o seletor aqui precisa empatar. */
    .edit-row:not(.edit-row-client), .edit-row-client { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
    .edit-row.edit-head { display: none; }
    /* Sem cabeçalho, centralizar número/status deixava a linha torta. */
    .edit-row-client > span.num, .edit-row-client .status-cell,
    .edit-row:not(.edit-row-client) .status-cell { text-align: left; }
    /* Ações: podem quebrar e começam na esquerda (não há coluna fixa). */
    .actions-cell, .actions-cell.r { flex-wrap: wrap; justify-content: flex-start; margin-left: 0; }
    /* No toque não existe hover: sem isto os botões ficam sem borda
       (a borda só aparecia em .edit-row:hover) e "remover" da foto,
       que só existia no hover, era inalcançável. */
    .actions-cell .btn { border-color: var(--border); color: var(--text-2); }
    .avatar-cell { justify-self: start; }
    /* Sem cabecalho, um "4" solto no meio da linha nao diz nada. */
    .edit-row-client > span.num::after { content: ' funis'; color: var(--text-3); font-size: 12px; }
    .av-remove { position: static; opacity: .7; transform: none; pointer-events: auto; }
}

/* Cabeçalho do card de cliente: com o selo de reembolso a engrenagem
   era espremida (30px → 23px) e "3 contas · Info produtor" quebrava
   embaixo do selo. No celular o selo desce pra segunda linha. */
@media (max-width: 600px) {
    .cc-head { flex-wrap: wrap; }
    .cc-gear { flex: 0 0 auto; }
    .cc-refund-badge + .cc-gear { margin-left: auto; }
    .cc-refund-badge { order: 5; margin-left: 44px; }
}

/* URL do webhook: <code> e filho de flex — sem min-width:0 ele nao encolhe,
   o overflow:auto dele nunca entra em acao e a PAGINA rolava de lado. */
.guide-code, .guide-code code { min-width: 0; }
@media (max-width: 480px) { .guide-code code { flex: 1 1 100%; } }

/* Analytics: com 2 KPIs por linha o valor em mono 19px nao cabe em 140px e
   virava "R$ 105.480,…" — numero cortado em painel de dinheiro nao serve.
   A fonte encolhe com a tela em vez de cortar. */
@media (max-width: 680px) {
    .an-kpi { padding: 13px 11px; }
    .an-kpi-v { font-size: clamp(14px, 4.3vw, 19px); }
    .an-kpi-l { font-size: 10.5px; }
}

/* Analytics: no celular o cabecalho do bloco espremia titulo e legenda em duas
   colunas estreitas ("Teste A/B por | pagina" x "versoes detectadas..."). Cada
   um na sua linha. */
@media (max-width: 640px) {
    .an-block-h { flex-wrap: wrap; align-items: flex-start; gap: 2px 10px; }
    /* So titulo e legenda ocupam a linha inteira; botao/link continuam do
       tamanho deles (um "+ Nova anotacao" de ponta a ponta fica pesado). */
    .an-block-h > h3, .an-block-h > span { flex: 1 1 100%; }
    .an-block-h > .btn { margin-top: 6px; }
}

/* WhatsApp: "ver painel →" no topo do card quebrava em duas linhas. */
.wa-sum-go { flex: 0 0 auto; white-space: nowrap; }
.wa-sum-h > div { min-width: 0; }

/* ============================================================
   AVISOS (app_notifications) — faixa da tela inicial / cliente
   Conta de anúncio travada por pagamento e afins. Discreto como
   o resto do painel: superfície normal + barra de cor à esquerda.
   ============================================================ */
.notif-stack { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.notif {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--r-md); padding: 13px 15px;
}
.notif-critico { border-left-color: var(--neg); }
.notif-aviso   { border-left-color: var(--warn); }
.notif-info    { border-left-color: var(--text-3); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--text-3); }
.notif-critico .notif-dot { background: var(--neg); }
.notif-aviso   .notif-dot { background: var(--warn); }
.notif-txt { flex: 1 1 auto; min-width: 0; }
.notif-txt strong { display: block; font-size: 13.5px; color: var(--text); font-weight: 600; letter-spacing: -.01em; }
.notif-txt p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.notif-when { color: var(--text-3); white-space: nowrap; }
.notif-ok      { border-left-color: var(--pos); }
.notif-ok .notif-dot { background: var(--pos); }
/* Resposta do botao "Resolvido" dentro de um aviso que CONTINUA aberto: ou a
   Meta disse que o problema segue, ou nao deu pra perguntar. Nunca e verde. */
.notif-ack { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--neg); font-weight: 500; }
.notif-ack-erro { color: var(--warn); }
.notif-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.notif-form { margin: 0; }
.notif-acts .btn { height: 30px; display: inline-flex; align-items: center; }
/* Adiar / ocultar (28/09/2026): menu que abre embaixo do botão, sem JS (<details>) */
.notif-acts .notif-form { display: flex; align-items: center; gap: 8px; }
.notif-more { position: relative; }
.notif-more > summary { list-style: none; cursor: pointer; gap: 5px; }
.notif-more > summary::-webkit-details-marker { display: none; }
.notif-more > summary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.notif-more[open] > summary svg { transform: rotate(180deg); }
.notif-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 190px; padding: 6px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); display: flex; flex-direction: column; }
:root:not([data-theme="light"]) .notif-menu { background: rgba(18, 20, 20, .97); border-color: rgba(255, 255, 255, .1); }
.notif-menu-h { font-size: 11px; color: var(--text-3); padding: 6px 10px 4px; }
.notif-menu button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.notif-menu button:hover, .notif-menu button:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); }
.notif-menu-sep { height: 1px; background: var(--border); margin: 5px 6px; }
.notif-menu button[value="ocultar"] { color: var(--text-2); }
.notif-undo { border-left-color: var(--text-3); }

@media (max-width: 720px) {
    .notif { flex-wrap: wrap; }
    /* a barra colorida da esquerda ja diz a gravidade; o ponto so quebraria linha */
    .notif-dot { display: none; }
    .notif-acts { width: 100%; justify-content: flex-end; }
}

/* ===== Acesso do cliente (modal de login do projeto) ================== */
/* O ponto no botao da linha diz o estado sem abrir nada: cinza = sem acesso,
   amarelo = criado mas sem senha, verde = cliente ja entrou e definiu a dele. */
.acc-dot{ display:inline-block; width:7px; height:7px; border-radius:999px; margin-right:7px;
          background:var(--text-3); opacity:.5; vertical-align:1px; }
.acc-dot.is-on{ background:var(--pos); opacity:1; }
.acc-dot.is-pending{ background:var(--warn); opacity:1; }
.lg-state{ margin:0 0 14px; font-size:13px; line-height:1.5; color:var(--text-2); }
.lg-state.is-on{ color:var(--pos); }
.lg-state.is-pending{ color:var(--warn); }
.lg-actions{ display:flex; justify-content:flex-end; }
.lg-foot .js-lg-danger{ display:flex; gap:8px; margin-right:auto; }

/* ===== Projetos: linha so de LEITURA, edicao no popup ==================
   A linha era um formulario com 4 botoes e 3 inputs: o grupo de acoes vazava
   por cima da coluna Status e a tela virava um formulario gigante. Agora a
   linha e um botao (abre o popup do projeto) e toda edicao mora la dentro. */
.proj-row{ width:100%; text-align:left; background:transparent; border:0;
  border-bottom:1px solid var(--border); color:inherit; font:inherit; cursor:pointer;
  align-items:center; transition:background .12s ease; }
.proj-row:hover{ background:var(--bg-soft); }
.proj-row:focus-visible{ outline:2px solid var(--pos); outline-offset:-2px; }
.proj-list .edit-head{ pointer-events:none; }
.proj-av{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; overflow:hidden; background:var(--bg-soft);
  border:1px solid var(--border); font-size:14px; font-weight:600; color:var(--text-3); }
.proj-av img{ width:100%; height:100%; object-fit:cover; }
.proj-name{ font-weight:600; font-size:13px; letter-spacing:-.01em; }
.proj-type{ font-size:12.5px; color:var(--text-2); }
.proj-acc{ display:flex; align-items:center; font-size:12px; color:var(--text-3); }
/* Celular: a linha virava 6 linhas soltas empilhadas (foto, nome, tipo, funis,
   acesso, status — ~200px por projeto). Vira um item de lista: foto à esquerda,
   nome + tipo, status no canto, funis · acesso embaixo. */
@media (max-width: 720px) {
  .proj-list .proj-row.edit-row-client{
    grid-template-columns:36px auto minmax(0,1fr) auto;
    grid-template-areas:"av name name st" "av type type st" "av num acc acc";
    column-gap:12px; row-gap:3px; align-items:center; }
  .proj-row .proj-av{ grid-area:av; align-self:start; }
  .proj-row .proj-name{ grid-area:name; min-width:0; overflow-wrap:anywhere; }
  .proj-row .proj-type{ grid-area:type; }
  .proj-row > span.num{ grid-area:num; font-size:12px; }
  .proj-row .proj-acc{ grid-area:acc; min-width:0; }
  .proj-row .status-cell{ grid-area:st; align-self:start; }
}

/* ---- popup do projeto: mesma linguagem do resto (superficie calma, campos
   com foco verde, acao perigosa discreta, uma primaria so) ---------------- */
.ov-proj{ max-width:600px; }
.ov-proj .ov-body{ display:flex; flex-direction:column; gap:16px; padding:20px 22px 22px; }

.proj-head{ align-items:center; gap:14px; padding:18px 22px; }
.proj-head .avatar-cell{ flex:0 0 auto; }
.proj-head .av-edit{ width:52px; height:52px; border-radius:15px; font-size:19px; }
.proj-head-id{ flex:1; min-width:0; }
.proj-head-id h3{ font-size:17px; letter-spacing:-.015em; }
.proj-head-id .ov-sub{ display:flex; align-items:center; gap:7px; }
.proj-head-id .pill{ padding:2px 8px; font-size:10.5px; }

/* campos: o .field so ganhava estilo dentro de .create-form — aqui os inputs
   apareciam crus (borda dura, fundo claro), o que derrubava a tela inteira. */
.proj-form{ display:flex; flex-direction:column; gap:13px; }
.proj-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:13px; }
.ov-proj .field > input, .ov-proj .field > select{
  width:100%; padding:10px 12px; font-family:var(--ui); font-size:13px;
  color:var(--text); background:var(--bg-soft);
  border:1px solid var(--border); border-radius:var(--r-sm); transition:.14s; }
.ov-proj .field > input.num{ font-family:var(--mono); font-size:12px; letter-spacing:-.01em; }
.ov-proj .field > input::placeholder{ color:var(--text-3); opacity:.75; }
.ov-proj .field > input:focus, .ov-proj .field > select:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }

/* painel embutido do acesso */
.proj-panel{ border:1px solid var(--border); border-radius:12px; padding:14px 15px;
  background:color-mix(in srgb, var(--bg-soft) 55%, transparent); }
.proj-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.proj-panel h4{ margin:0; font-size:12.5px; font-weight:600; letter-spacing:-.01em; color:var(--text); }
.proj-state{ display:flex; align-items:center; font-size:11.5px; color:var(--text-3); }
.proj-state.is-on{ color:var(--pos); }
.proj-state.is-pending{ color:var(--warn); }
.proj-login{ display:flex; gap:8px; }
.proj-login input{ flex:1; min-width:0; padding:9px 12px; font-size:13px; font-family:var(--ui);
  color:var(--text); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); transition:.14s; }
.proj-login input:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.proj-login .btn{ flex:0 0 auto; }
.proj-hint{ margin:9px 0 0; font-size:11.5px; color:var(--text-3); line-height:1.55; }
.proj-login-acts{ display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }

/* atalho pros funis (mesmo padrao do card "Produtos & custo") */
.proj-link{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 14px; border:1px solid var(--border); border-radius:12px; cursor:pointer;
  color:inherit; font:inherit; background:color-mix(in srgb, var(--bg-soft) 55%, transparent);
  transition:border-color .14s ease, background-color .14s ease; }
.proj-link:hover{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 8%, transparent); }
.proj-link-ic{ color:var(--brand); display:grid; place-items:center; flex:0 0 auto; }
.proj-link-t{ display:flex; flex-direction:column; gap:2px; }
.proj-link-t b{ font-size:13px; font-weight:600; }
.proj-link-t span{ font-size:11.5px; color:var(--text-3); }
.proj-link-arrow{ margin-left:auto; color:var(--text-3); font-size:18px; }
.proj-link:hover .proj-link-arrow{ color:var(--brand); }
a.proj-link{ text-decoration:none; }
.proj-link + .proj-link{ margin-top:10px; }

/* acoes secundarias: fantasma. So "Salvar alteracoes" e verde na tela toda —
   dois botoes vermelhos solidos (Remover acesso / Excluir) gritavam mais que a
   acao principal. */
.btn-quiet{ background:transparent !important; border:1px solid var(--border) !important;
  color:var(--text-2) !important; box-shadow:none !important; font-weight:500; }
.btn-quiet:hover{ border-color:var(--border-strong) !important; color:var(--text) !important;
  background:var(--surface-hover) !important; }
.btn-quiet.is-danger{ color:var(--neg) !important;
  border-color:color-mix(in srgb, var(--neg) 30%, transparent) !important; }
.btn-quiet.is-danger:hover{ color:#fff !important; background:var(--neg) !important;
  border-color:var(--neg) !important; }
.proj-foot{ padding:14px 22px; }
.proj-foot-left{ display:flex; gap:8px; margin-right:auto; }

@media (max-width:560px){
  .proj-grid{ grid-template-columns:1fr; }
  .proj-login{ flex-wrap:wrap; }
}

/* recusa da Meta na foto de perfil: o aviso vira vermelho, nao some no cinza */
.wa-photo small.is-bad { color: var(--neg); }

/* ----------------------------------------------------------------
   Foto de verdade nao usa moldura (23/09/2026)
   As caixas de avatar ganham borda/anel de 1px pra dar corpo ao
   quadrado com a inicial. Quando tem IMAGEM dentro, esse mesmo 1px
   vira um risco fino por cima da foto ("borda estranha"). Entao:
   caixa com <img> = sem borda e sem anel interno.
   ---------------------------------------------------------------- */
.user-avatar.has-img,
.cc-avatar.has-img,
.av-edit:has(img),
.proj-av:has(img),
.pf-av:has(img),
.wa-card-ava:has(img),
.wa-num-ico:has(img),
.wa-topbar-ava:has(img){ border:none !important; box-shadow:none !important; background:none !important; }

/* ================================================================
   PÁGINAS JURÍDICAS PÚBLICAS (privacidade / termos / exclusão)
   ----------------------------------------------------------------
   Exigidas pela Meta no App Review, então são PÚBLICAS: entram pelo
   layout_head(..., chrome=false) — mesma fonte, mesmos tokens de cor
   e mesma marca do painel, sem sidebar e sem login.
   Coluna de leitura (~72ch), não a largura do dashboard.
   ---------------------------------------------------------------- */
.legal-main { max-width: 860px; margin: 0 auto; padding: 40px 24px 96px; }

.legal { color: var(--text-2); font-size: 15px; line-height: 1.72; }

.legal-top {
    display: flex; flex-wrap: wrap; gap: 16px 24px;
    align-items: center; justify-content: space-between;
    padding-bottom: 20px; margin-bottom: 40px;
    border-bottom: 1px solid var(--border);
}
.legal-brand {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--text); text-decoration: none;
    font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}
.legal-brand .brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--r-sm);
    background: var(--ink-bg); color: var(--ink-fg);
}
.legal-brand .brand-mark svg { width: 18px; height: 18px; }

.legal-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.legal-nav a {
    padding: 6px 11px; border-radius: 999px;
    color: var(--text-3); text-decoration: none;
    font-size: 13px; font-weight: 500; white-space: nowrap;
    border: 1px solid transparent;
}
.legal-nav a:hover { color: var(--text); background: var(--surface-2); }
.legal-nav a.is-active { color: var(--text); background: var(--surface-2); border-color: var(--border); }

.legal h1 {
    margin: 0 0 6px; color: var(--text);
    font-size: 34px; line-height: 1.16; font-weight: 650; letter-spacing: -.025em;
}
.legal-meta { margin: 0 0 24px; color: var(--text-3); font-size: 13px; }
.legal-lead { margin: 0 0 8px; color: var(--text-2); font-size: 16.5px; line-height: 1.68; }

.legal-sec { margin-top: 44px; }
.legal h2 {
    margin: 0 0 14px; color: var(--text);
    font-size: 20px; line-height: 1.3; font-weight: 620; letter-spacing: -.015em;
}
.legal h3 {
    margin: 28px 0 8px; color: var(--text);
    font-size: 15.5px; font-weight: 600; letter-spacing: -.005em;
}
.legal p { margin: 0 0 14px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.legal a:hover { text-decoration-color: currentColor; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 7px 0; }
.legal li > ul { margin-top: 7px; margin-bottom: 0; }
.legal code {
    font-family: var(--mono); font-size: .86em; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 5px; padding: 1px 5px;
}

/* Blocos de apoio: nota lateral, base legal e prazo. */
.legal-note, .legal-basis {
    margin: 16px 0; padding: 12px 16px;
    border-left: 2px solid var(--border-strong);
    background: var(--bg-soft);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 14px;
}
.legal-basis { color: var(--text-3); font-size: 13.5px; }
.legal-deadline {
    margin: 18px 0 0; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); font-size: 14.5px;
}

/* Seção com peso extra (sem garantia de resultado / pedido em 3 passos). */
.legal-highlight {
    padding: 22px 24px;
    border: 1px solid var(--border); border-radius: var(--r);
    background: var(--surface);
}
.legal-highlight > h2 { margin-top: 0; }
.legal-highlight > :last-child { margin-bottom: 0; }

.legal-steps { counter-reset: none; }
.legal-steps > li { margin: 12px 0; padding-left: 4px; }

/* Definições (controladora, DPO, contato). */
.legal-def { margin: 0 0 14px; }
.legal-def dt { margin-top: 14px; color: var(--text); font-size: 13px; font-weight: 600; }
.legal-def dt:first-child { margin-top: 0; }
.legal-def dd { margin: 3px 0 0; }

/* Tabelas: rolam sozinhas no mobile, o corpo da página nunca rola na horizontal. */
.legal-table-wrap { margin: 0 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal-table {
    width: 100%; min-width: 480px;
    border-collapse: collapse; font-size: 14px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    overflow: hidden;
}
.legal-table th, .legal-table td {
    padding: 11px 14px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.legal-table thead th {
    color: var(--text); background: var(--surface-2);
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: none; }

.legal-foot {
    margin-top: 56px; padding-top: 22px;
    border-top: 1px solid var(--border);
    color: var(--text-3); font-size: 13px;
}
.legal-foot p { margin: 0 0 6px; }
.legal-foot-links a { color: var(--text-3); }
.legal-copy { margin-top: 12px; color: var(--text-3); }

@media (max-width: 560px) {
    .legal-main { padding: 28px 18px 72px; }
    .legal h1 { font-size: 27px; }
    .legal h2 { font-size: 18px; }
    .legal-highlight { padding: 18px 16px; }
    /* As 3 abas (Privacidade/Termos/Exclusão) quebravam em 2 linhas a 375px,
       com "Exclusão de dados" sozinha embaixo. Aqui ficam numa linha só;
       se um dia não couber, a faixa rola por dentro em vez de quebrar. */
    .legal-top { margin-bottom: 28px; }
    .legal-nav { width: 100%; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none; }
    .legal-nav::-webkit-scrollbar { display: none; }
    .legal-nav a { padding: 8px 7px; font-size: 12.5px; }
    .legal a { overflow-wrap: anywhere; }   /* e-mail longo passava da borda do cartão */
}
/* .legal a (sublinhado + cor do texto) vinha depois e vencia .legal-nav a:
   as abas apareciam sublinhadas e todas brancas, em qualquer largura. */
.legal .legal-nav a, .legal a.legal-brand { text-decoration: none; }
.legal .legal-nav a:not(.is-active):not(:hover) { color: var(--text-3); }

/* ================================================================
   Gráfico por hora (funnel.php) — investimento hora a hora com o
   faturamento da mesma hora por cima. Card largura cheia, com a
   mesma pele premium dos gráficos diários (.charts-grid).
   ================================================================ */
.charts-one { grid-template-columns: minmax(0, 1fr); }
.chart-headings { min-width: 0; }
.chart-sub { margin-top: 3px; font-size: 12px; color: var(--text-3); }
.cl-item i.sq { border-radius: 3px; width: 10px; height: 10px; }

/* Faixa de destaques: as duas horas que mudam decisão (pico de gasto e melhor
   retorno) + o total. Fica ACIMA do gráfico porque é a leitura de 2 segundos. */
.hr-facts {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0 0 14px;
}
.hr-fact {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.hr-k { font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.hr-v { font-size: 15px; font-weight: 650; color: var(--text); }
.hr-x { font-size: 12px; color: var(--text-2); }

.chart-box-hourly { height: 300px; }

@media (max-width: 560px) {
    .hr-facts { gap: 8px; }
    .hr-fact { padding: 6px 10px; }
    .hr-k { font-size: 10.5px; }
    .hr-v { font-size: 14px; }
    .chart-box-hourly { height: 260px; }
}

/* ============================================================
   ROLAGEM — padrão da plataforma (25/09/2026)

   Até aqui todo painel do produto usava a barra de rolagem do
   sistema: larga, cinza, com setinhas, e clara mesmo no tema
   escuro. Num painel escuro ela é a coisa mais chamativa da
   tela, e é a única parte que não é nossa.

   Vale pro app inteiro de propósito: barra de rolagem é
   moldura, não conteúdo, e ter duas aparências no mesmo
   produto é o tipo de detalhe que faz parecer remendo.
   Firefox usa scrollbar-width/color; o resto, ::-webkit-.
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 99px;
    /* a borda transparente afina o polegar sem encostar nas beiradas */
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }
/* Em área que rola sem o ponteiro por perto, some de vez: o conteúdo manda. */
@media (hover: hover) {
    .wa-side-b, .waf-side-b { scrollbar-gutter: stable; }
}

/* Etiquetas de template (25/09/2026). Situação e categoria deixaram de dividir
   paleta: uma responde "posso enviar", a outra "quanto custa".
     situação  em análise branco · aprovado verde · reprovado vermelho
     categoria utilidade azul   · marketing amarelo                     */
:root{ --info:#3B82F6; }
:root[data-theme="light"]{ --info:#1D4ED8; }
.pill-info { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: color-mix(in srgb, var(--info) 13%, transparent); }
.pill-neutro { color: var(--text); border-color: var(--border-strong); background: color-mix(in srgb, var(--text) 8%, transparent); }

/* ============================================================
   SUPERFÍCIE E LUZ — handoff Zouti × Deu ROI (26/09/2026)
   Fases 1 e 2, só no tema ESCURO (o claro fica como está).

   Diagnóstico medido na landing, que vale igual aqui: nossos
   objetos eram plástico opaco (cinza neutro #16161B/#1C1C22,
   borda 1px sólida, sombra genérica) sobre fundo neutro. Os
   da referência são vidro translúcido sobre um fundo que já é
   da cor da marca.

   Fase 2 — o fundo pertence à marca: preto com viés verde.
   Fase 1 — vidro nos CONTAINERS (cards, tiles de métrica,
   controles do topo). Tabela densa segue sóbria.

   Por que --surface continua OPACO (só muda o tom): ele pinta
   modal, menu suspenso, tooltip e cabeçalho grudado. Se virasse
   translúcido, o que está atrás vazaria por dentro deles. O
   vidro mora em tokens próprios (--glass*) e só entra por regra
   explícita, componente a componente.
   ============================================================ */
:root:not([data-theme="light"]) {
    /* fundo quase neutro (26/09 tarde: o Leon achou o rgb(5,10,8) verde demais;
       sobra só um fio de matiz frio, a marca aparece na luz e nos acentos) */
    --bg:            rgb(8, 9, 9);
    --bg-soft:       rgb(12, 13, 13);
    /* sólidos no mesmo matiz — o que o vidro vira quando não pode ser vidro */
    --surface:       #121414;
    --surface-2:     #171A19;
    --surface-hover: #1D2120;
    --border:        #232826;
    --border-strong: #343B38;

    /* vidro */
    --glass:        rgba(238, 246, 242, .03);
    --glass-2:      rgba(238, 246, 242, .028);
    --glass-hover:  rgba(238, 246, 242, .055);
    /* camada de DENTRO de um card: mais escura que o card, não mais clara
       (branco sobre branco deixava tile e bloco interno cinza-leitoso) */
    --glass-in:     rgba(0, 0, 0, .2);
    --glass-grad:   linear-gradient(267deg, rgba(238, 246, 242, .06), rgba(238, 246, 242, .02));
    --glass-grad-2: linear-gradient(267deg, rgba(238, 246, 242, .045), rgba(238, 246, 242, .012));
    --glass-blur:   blur(6px);
    --glass-blur-2: blur(3px);

    /* anel de 1px (fio de vidro), no lugar da borda sólida */
    --ring:        0 0 0 1px rgba(255, 255, 255, .075);
    --ring-strong: 0 0 0 1px rgba(255, 255, 255, .14);
    --ring-brand:  0 0 0 1px rgba(60, 230, 160, .38);

    /* SEM relevo (Leon, 26/09: "relevo ficou feio demais, não é nada moderno").
       Vidro é chapado: translúcido + fio de 1px + blur. Tokens neutros pra não
       quebrar quem ainda os referencia. */
    --mold:      0 0 #0000;
    --mold-soft: 0 0 #0000;

    /* véu de pé desligado (também era relevo) */
    --veil: linear-gradient(transparent, transparent);

    /* marca como matéria */
    --brand-grad-deep: linear-gradient(132deg, #0A3B28, #04140E);
    --brand-grad-lit:  linear-gradient(-44deg, #0A3B28, #2FD693);

    /* luz: UM por tela, no elemento focal. Difusa e embaixo (bloom), nunca
       halo apertado de neon em volta do objeto (era 0 0 9px 2px .55). */
    --glow:     0 8px 26px -10px rgba(60, 230, 160, .45);
    --glow-neg: 0 8px 26px -10px rgba(229, 112, 107, .40);

    /* sombra de apoio (sem o traço inset de 4%) */
    --drop:        0 24px 48px -28px rgba(0, 0, 0, .9);
    --shadow:      0 24px 48px -28px rgba(0, 0, 0, .9);
    --shadow-lift: 0 30px 56px -26px rgba(0, 0, 0, .95);

    /* raios do sistema novo (os antigos --r/--r-md/--r-sm ficam pra Fase 3) */
    --r-card: 12px;
    --r-box:  16px;
    --r-pill: 999px;
}

/* luz ambiente verde-marca + contraluz discreto: é o que o vidro desfoca.
   Todo gradiente nasce e morre em transparente (nada de aresta). */
:root:not([data-theme="light"]) body::before {
    background:
        radial-gradient(58% 42% at 88% -4%, rgba(60, 230, 160, .055), transparent 72%),
        radial-gradient(46% 40% at 30% 4%, rgba(47, 214, 147, .018), transparent 70%),
        radial-gradient(40% 36% at 70% 96%, rgba(47, 214, 147, .014), transparent 70%);
}

/* sidebar: deixa de ser um bloco cinza; vira vidro fino sobre o fundo */
:root:not([data-theme="light"]) .sidebar {
    background: rgba(255, 255, 255, .018);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid rgba(255, 255, 255, .06);
}
:root:not([data-theme="light"]) .nav-item:hover  { background: var(--glass-2); }
:root:not([data-theme="light"]) .nav-item.active { background: var(--glass-hover); box-shadow: var(--ring), var(--mold-soft); }

/* ---------- cards de projeto (home) / painel do cliente / funil ---------- */
:root:not([data-theme="light"]) .client-card {
    background-color: var(--glass);
    background-image: var(--veil), var(--glass-grad);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold), var(--drop);
}
:root:not([data-theme="light"]) .client-card:hover,
:root:not([data-theme="light"]) a.client-card:hover {
    border-color: transparent;
    background-color: var(--glass-2);
    box-shadow: var(--ring-strong), var(--mold), var(--shadow-lift);
}
:root:not([data-theme="light"]) .client-row.dragging .client-card {
    border-color: transparent; box-shadow: var(--ring-strong), var(--mold), var(--shadow-lift);
}

/* tiles de métrica (Faturamento / Tráfego / Lucro / ROAS): vidro mais leve */
:root:not([data-theme="light"]) .stat {
    background-color: var(--glass-in);
    background-image: var(--glass-grad-2);
    backdrop-filter: var(--glass-blur-2); -webkit-backdrop-filter: var(--glass-blur-2);
    border-color: transparent;
    border-radius: var(--r-card);
    box-shadow: var(--ring), var(--mold-soft);
}
:root:not([data-theme="light"]) .client-card:hover .stat {
    border-color: transparent;
    box-shadow: var(--ring-strong), var(--mold-soft);
}
/* ícone do tile: botão de vidro redondo, sem chapa cinza */
:root:not([data-theme="light"]) .stat-ico {
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
}
/* resultado positivo: o tile ganha uma luz verde que nasce do pé e some
   (não é glow — é luz de fundo; o glow da tela fica no controle ativo) */
:root:not([data-theme="light"]) .stat:has(> .stat-val.pos) {
    background-image:
        radial-gradient(110% 80% at 50% 135%, rgba(60, 230, 160, .17), transparent 72%),
        var(--glass-grad-2);
}
:root:not([data-theme="light"]) .stat:has(> .stat-val.neg) {
    background-image:
        radial-gradient(110% 80% at 50% 135%, rgba(229, 112, 107, .14), transparent 72%),
        var(--glass-grad-2);
}

/* chips do cabeçalho do card: pill de vidro */
:root:not([data-theme="light"]) .cc-refund-badge {
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
    padding: 2px 9px;
}
:root:not([data-theme="light"]) .cc-avatar:not(.has-img) {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

/* ---------- controles do topo: vidro + anel ---------- */
:root:not([data-theme="light"]) .icon-btn,
:root:not([data-theme="light"]) .period-trigger,
:root:not([data-theme="light"]) .seg-group {
    background: var(--glass) !important;
    background-image: var(--glass-grad) !important;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    box-shadow: var(--ring), var(--mold-soft);
}
:root:not([data-theme="light"]) .icon-btn:hover,
:root:not([data-theme="light"]) .period-trigger:hover {
    border-color: transparent;
    box-shadow: var(--ring-strong), var(--mold-soft);
}
/* Faixa "Próxima meta": ficou de fora da rodada 1 e destoava do seletor ao
   lado (chapa opaca + sombra projetada, número em mono, 34px contra 36px).
   Agora é o mesmo vidro dos controles do topo; o trilho é camada de DENTRO
   (mais escura), o preenchimento é a marca acesa. Sem glow: o focal do
   cabeçalho continua sendo o período ativo. */
:root:not([data-theme="light"]) .goal {
    height: 36px;
    padding: 0 14px 0 12px;
    background-color: var(--glass);
    background-image: var(--glass-grad);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-pill);
    box-shadow: var(--ring), var(--mold-soft);
    font-size: 13px;
}
:root:not([data-theme="light"]) .goal-name { color: var(--text-2); }
:root:not([data-theme="light"]) .goal-track {
    height: 5px;
    background: var(--glass-in);
    box-shadow: inset 0 0 0 1px var(--hair, rgba(255, 255, 255, .06));
}
/* sólido, igual ao arco do .ck-ring: o gradiente de marca começa quase preto
   e, em barra curta, a ponta escura sumia no trilho (parecia menos progresso) */
:root:not([data-theme="light"]) .goal-fill { background: #2FD693; }
/* número no mesmo idioma dos tiles (Inter tabular), não em mono de código */
:root:not([data-theme="light"]) .goal-nums {
    font-family: var(--ui); font-size: 13px; letter-spacing: -0.01em;
    color: var(--text-3);
}
:root:not([data-theme="light"]) .goal-nums b { color: var(--text); font-weight: 600; }
/* Período ativo: vira matéria da marca (gradiente fundo + anel verde). */
:root:not([data-theme="light"]) .seg-group .seg.active {
    background: var(--brand-grad-deep);
    color: #E9FFF5;
    box-shadow: var(--ring-brand);
}
/* UM glow por seção. No cabeçalho, o focal é o CTA verde quando ele existe
   (o .btn-primary já tem a luz dele); sem CTA — a home, o painel do cliente —
   o focal é o período ativo, que define todo número da tela. */
:root:not([data-theme="light"]) :is(.topbar, .client-topbar):not(:has(.btn-primary)) .seg-group .seg.active {
    box-shadow: var(--ring-brand), var(--glow);
}
/* O gatilho de período assumiu o lugar dos chips (01/10/2026): aberto, ele é a
   matéria da marca; o preset escolhido dentro do popover acompanha. */
:root:not([data-theme="light"]) .period-trigger.is-open {
    border-color: transparent;
    box-shadow: var(--ring-brand), var(--mold-soft);
}
:root:not([data-theme="light"]) .cal-presets button.is-active {
    background: var(--brand-grad-deep);
    color: #E9FFF5;
    box-shadow: var(--ring-brand);
}

/* ============================================================
   SUPERFÍCIE E LUZ — rodada 2 (26/09/2026), tema escuro
   Tela do cliente (faixa de métricas, gráficos, recuperação,
   aprovação, tabelas), Analytics e Campanhas (só containers),
   Fase 3 (raios 12/16/999 e Geist nos títulos).
   Tabela densa segue sóbria: o vidro é na MOLDURA, a linha
   ganha só divisória de 6% de branco.
   ============================================================ */
:root:not([data-theme="light"]) {
    /* Fase 3 — raios: controles, campos e navegação vão pra 12 */
    --r-sm: 12px;
    /* Fase 3 — título em Geist; texto corrido segue Inter, número segue Geist Mono */
    --display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hair: rgba(255, 255, 255, .06);   /* divisória interna */
}

/* ---------- títulos ---------- */
:root:not([data-theme="light"]) :is(h1, h2, h3, .block-title, .chart-title, .cc-name, .an-block-h) {
    font-family: var(--display);
}
:root:not([data-theme="light"]) h1 { letter-spacing: -.035em; }
:root:not([data-theme="light"]) :is(h2, h3, .block-title, .chart-title, .cc-name, .an-block-h) { letter-spacing: -.02em; }

/* ---------- raios: pill nos chips e botões pequenos ---------- */
:root:not([data-theme="light"]) .seg-group,
:root:not([data-theme="light"]) .seg-group .seg,
:root:not([data-theme="light"]) .btn-sm,
:root:not([data-theme="light"]) .ob-badge { border-radius: var(--r-pill); }

/* ---------- tela do cliente: faixa de métricas ---------- */
/* Antes: gap de 1px pintado com a borda sólida. Agora a faixa é um vidro
   só e a separação é uma linha de 6% desenhada no vão (o overflow do
   container esconde a que cairia na beirada). */
:root:not([data-theme="light"]) .metrics-strip {
    background-color: var(--glass);
    background-image: var(--veil), var(--glass-grad);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold), var(--drop);
}
:root:not([data-theme="light"]) .metrics-strip .ms-item {
    background: transparent;
    box-shadow: -1px 0 0 var(--hair), 0 -1px 0 var(--hair);
}

/* ---------- cartões de gráfico / recuperação / aprovação ---------- */
:root:not([data-theme="light"]) .chart-card,
:root:not([data-theme="light"]) .charts-grid .chart-card {
    background-color: var(--glass);
    background-image: var(--veil), var(--glass-grad);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold), var(--drop);
}
:root:not([data-theme="light"]) .ck-kpi { border-left-color: var(--hair); }
:root:not([data-theme="light"]) .ck-camps { border-top-color: var(--hair); }
:root:not([data-theme="light"]) .ck-camp,
:root:not([data-theme="light"]) .ck-method { border-bottom-color: var(--hair); }
/* anel de progresso: trilho = ponta funda do gradiente de marca, arco = ponta acesa.
   (Gradiente de verdade no arco pede um <linearGradient> dentro do SVG: é markup.) */
:root:not([data-theme="light"]) .ck-ring-bg { stroke: rgba(47, 214, 147, .18); }
:root:not([data-theme="light"]) .ck-ring.is-pos .ck-ring-fg { stroke: #2FD693; }
:root:not([data-theme="light"]) .ck-ring:not(.is-pos):not(.is-warn):not(.is-neg) .ck-ring-bg { stroke: rgba(255, 255, 255, .08); }

/* ---------- tabelas Dia a dia e Últimas vendas: moldura de vidro ---------- */
:root:not([data-theme="light"]) .table-wrap {
    background-color: var(--glass);
    background-image: var(--glass-grad);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold-soft), var(--drop);
}
:root:not([data-theme="light"]) :is(table.daily, table.sales) thead th {
    background: rgba(0, 0, 0, .22);
    border-bottom-color: var(--hair);
}
:root:not([data-theme="light"]) :is(table.daily, table.sales) tbody td { border-bottom-color: var(--hair); }
:root:not([data-theme="light"]) :is(table.daily, table.sales) tbody tr:hover td { background: rgba(255, 255, 255, .035); }
:root:not([data-theme="light"]) table.daily tr.sum-row td,
:root:not([data-theme="light"]) table.daily tr.sum-row:hover td { background: rgba(0, 0, 0, .16); }
:root:not([data-theme="light"]) table.daily tbody.sum-top tr.sum-row td { border-bottom-color: var(--hair); }
:root:not([data-theme="light"]) table.daily tfoot tr.sum-row td { border-top-color: var(--hair); }

/* ---------- Analytics: só containers ---------- */
:root:not([data-theme="light"]) :is(.camp-filters, .an-kpi) {
    background-color: var(--glass);
    background-image: var(--veil), var(--glass-grad);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold), var(--drop);
}
:root:not([data-theme="light"]) .an-kpi:has(.an-kpi-v.an-pos) {
    background-image: radial-gradient(110% 80% at 50% 135%, rgba(60, 230, 160, .15), transparent 72%), var(--veil), var(--glass-grad);
}
:root:not([data-theme="light"]) .an-metrics {
    background-color: var(--glass);
    background-image: var(--glass-grad);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold-soft), var(--drop);
}
:root:not([data-theme="light"]) .an-metrics .an-metric {
    background: transparent;
    box-shadow: -1px 0 0 var(--hair), 0 -1px 0 var(--hair);
}
:root:not([data-theme="light"]) .an-funnel-block {
    background-color: var(--glass-in);
    background-image: var(--glass-grad-2);
    backdrop-filter: var(--glass-blur-2); -webkit-backdrop-filter: var(--glass-blur-2);
    border-color: transparent;
    border-radius: var(--r-card);
    box-shadow: var(--ring), var(--mold-soft);
}
/* o fim do funil (a venda) é o focal da tela: matéria da marca + o único glow */
:root:not([data-theme="light"]) .an-funnel-block.is-final {
    background: var(--brand-grad-deep);
    box-shadow: var(--ring-brand), var(--mold-soft), var(--glow);
}
:root:not([data-theme="light"]) .an-insight {
    background-color: var(--glass-in);
    background-image: var(--glass-grad-2);
    backdrop-filter: var(--glass-blur-2); -webkit-backdrop-filter: var(--glass-blur-2);
    border-color: transparent;
    border-radius: var(--r-card);
    box-shadow: var(--ring), var(--mold-soft);
}

/* ---------- Campanhas: só containers (a grade densa não muda) ---------- */
:root:not([data-theme="light"]) .camp-kpi {
    background-color: var(--glass);
    background-image: var(--veil), var(--glass-grad);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold), var(--drop);
}
:root:not([data-theme="light"]) .camp-kpi:hover,
:root:not([data-theme="light"]) .camp-kpi.is-sorting {
    border-color: transparent; background-color: var(--glass-2);
    box-shadow: var(--ring-strong), var(--mold), var(--drop);
}
/* sai a borda-esquerda colorida; o sinal vira luz de pé (mesma leitura do tile da home) */
:root:not([data-theme="light"]) .camp-kpi::before { display: none; }
:root:not([data-theme="light"]) .camp-kpi.is-pos  { background-image: radial-gradient(110% 80% at 50% 135%, rgba(60, 230, 160, .15), transparent 72%), var(--veil), var(--glass-grad); }
:root:not([data-theme="light"]) .camp-kpi.is-neg  { background-image: radial-gradient(110% 80% at 50% 135%, rgba(229, 112, 107, .13), transparent 72%), var(--veil), var(--glass-grad); }
:root:not([data-theme="light"]) .camp-kpi.is-warn { background-image: radial-gradient(110% 80% at 50% 135%, rgba(207, 161, 62, .12), transparent 72%), var(--veil), var(--glass-grad); }
:root:not([data-theme="light"]) .camp-kpi-meter-bar { background: rgba(255, 255, 255, .07); border-radius: var(--r-pill); }
:root:not([data-theme="light"]) .camp-kpi-meter-bar::after { border-radius: var(--r-pill); }
:root:not([data-theme="light"]) .camp-kpi-meter-bar.pos::after { background: var(--brand-grad-lit); }
:root:not([data-theme="light"]) :is(.camp-scope-form, .camp-tabs-group, .camp-search-wrap, .camp-fresh-chip) {
    background-color: var(--glass);
    background-image: var(--glass-grad);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    box-shadow: var(--ring), var(--mold-soft);
}
:root:not([data-theme="light"]) .camp-scope-form { border-radius: var(--r-card); }
:root:not([data-theme="light"]) .camp-scope-field + .camp-scope-field { border-left-color: var(--hair); }
:root:not([data-theme="light"]) .camp-tabs-group,
:root:not([data-theme="light"]) .camp-tab,
:root:not([data-theme="light"]) .camp-fresh-chip { border-radius: var(--r-pill); }
:root:not([data-theme="light"]) .camp-search-wrap { border-radius: var(--r-card); }
/* a grade: moldura em anel e raio 16, mas o fundo continua SÓLIDO: cabeçalho e
   colunas grudadas (sticky) são opacos e precisam casar com o corpo */
:root:not([data-theme="light"]) .camp-table-wrap {
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--drop);
}

/* ============================================================
   SUPERFÍCIE E LUZ — rodada 3 (26/09/2026), tema escuro
   WhatsApp, Tags, Projetos/Contas, Alertas, Pixel (+ wizard),
   Relatórios, Conta, Integrações; modais e menus em vidro fosco.
   Mesmas três receitas das rodadas 1 e 2:
     caixa  = vidro cheio, raio 16 (container principal)
     cartão = vidro leve, raio 12 (bloco dentro da caixa)
     linha  = divisória de 6% (tabela e lista densas ficam sóbrias)
   ============================================================ */

/* ---------- caixa ---------- */
:root:not([data-theme="light"]) :is(
    .wa-sum-card, .wa-inbox, .wa-gat, .wa-panel, .wa-tpl, .wa-tablewrap:not(.plain),
    .tg-table, .edit-list, .create-form, .block > .form-row, .cm-conn,
    .alf-card, .alf-save, .px-instsec, .pxc, .px-log-rail, .px-log-card, .pxw-card,
    .nt-card, .uso-card, .as-card, .ig-card, .alert.alert-info, .empty, .insights-panel
) {
    background-color: var(--glass);
    background-image: var(--veil), var(--glass-grad);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold), var(--drop);
}
/* lista/tabela dentro da caixa: sem véu (o véu escurecia as últimas linhas) */
:root:not([data-theme="light"]) :is(.edit-list, .wa-tablewrap:not(.plain), .wa-inbox, .px-log-rail, .px-log-card) {
    background-image: var(--glass-grad);
    box-shadow: var(--ring), var(--mold-soft), var(--drop);
}
:root:not([data-theme="light"]) a.wa-sum-card:hover { box-shadow: var(--ring-strong), var(--mold), var(--shadow-lift); }

/* ---------- cartão ---------- */
:root:not([data-theme="light"]) :is(
    .wa-cat, .wa-prod, .wa-ftile, .wa-f-sec, .wa-help, .wa-score,
    .tg-how-step, .ig-how-step, .alf-custo > div,
    .pxk2, .px-or, .px-line, .px-al, .px-evcard, .px-score, .px-chartbox, .px-rec,
    .as-k, .as-plano
) {
    background-color: var(--glass-in);
    background-image: var(--glass-grad-2);
    backdrop-filter: var(--glass-blur-2); -webkit-backdrop-filter: var(--glass-blur-2);
    border-color: transparent;
    border-radius: var(--r-card);
    box-shadow: var(--ring), var(--mold-soft);
}
:root:not([data-theme="light"]) .wa-ftile-new { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), var(--mold-soft); }
/* cartões com sinal: o sinal vira anel colorido, não borda de 1px */
:root:not([data-theme="light"]) .px-al.neg { box-shadow: 0 0 0 1px rgba(229, 112, 107, .35), var(--mold-soft); }
:root:not([data-theme="light"]) .px-al.pos { box-shadow: 0 0 0 1px rgba(60, 230, 160, .3), var(--mold-soft); }
:root:not([data-theme="light"]) .px-evcard.active,
:root:not([data-theme="light"]) .as-plano.atual {
    background-image: radial-gradient(110% 80% at 50% 135%, rgba(60, 230, 160, .15), transparent 72%), var(--glass-grad-2);
    box-shadow: var(--ring-brand), var(--mold-soft);
}
/* barrinhas de nota do Pixel: trilho de vidro */
:root:not([data-theme="light"]) .px-evcard-bar { background: rgba(255, 255, 255, .07); }

/* Instalação do Pixel: sai a barra verde da esquerda; o bloco é o chamado da
   tela, então ganha o anel da marca e a luz de pé verde */
:root:not([data-theme="light"]) .px-instsec::before { display: none; }
:root:not([data-theme="light"]) .px-instsec {
    background-image: radial-gradient(70% 90% at 0% 100%, rgba(60, 230, 160, .09), transparent 70%), var(--veil), var(--glass-grad);
    box-shadow: var(--ring-brand), var(--mold), var(--drop);
}

/* ---------- divisórias internas (6%) ---------- */
:root:not([data-theme="light"]) :is(.edit-row, .alf-opt, table.wa th, table.wa td, .pxc-head, .pxc-tabs) { border-color: var(--hair); }
:root:not([data-theme="light"]) .edit-head { background: rgba(0, 0, 0, .22); }
:root:not([data-theme="light"]) .edit-row:not(.edit-head):hover { background: rgba(255, 255, 255, .035); }
:root:not([data-theme="light"]) .wa-tablewrap:not(.plain) table.wa th { background: rgba(0, 0, 0, .22); }

/* ---------- WhatsApp: fluxo ---------- */
/* o canvas mantém o fundo pontilhado (é a régua do desenho): só troca borda por anel */
:root:not([data-theme="light"]) .waf {
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--drop);
}
/* nós do fluxo: vidro fosco — ficam sobre a malha de pontos e precisam ler limpo */
:root:not([data-theme="light"]) .waf-node {
    background-color: rgba(18, 20, 20, .92);   /* era rgba(14,22,18): verde fixo (26/09) */
    background-image: var(--glass-grad);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    /* borda e sombra ficam com o wa-flow.css: daqui (mais específico) elas
       apagavam o contorno de selecionado, de erro e de aviso do cartão */
}

/* ---------- títulos de card em Geist ---------- */
:root:not([data-theme="light"]) :is(.tg-funnel-name, .tg-how-t, .alf-head h2, .pxc-title h3, .wa-sec-h h2, .wa-sum-card h3) {
    font-family: var(--display);
    letter-spacing: -.02em;
}

/* ---------- UM glow por tela, no foco ---------- */
/* 1) cabeçalho com CTA verde: o CTA é o foco (Projetos, Pixel, Campanhas, cliente) */
:root:not([data-theme="light"]) .topbar .btn-primary { box-shadow: var(--glow); }
/* 2) telas sem CTA no cabeçalho: o foco de cada uma */
:root:not([data-theme="light"]) :is(
    .alf-save .btn-primary,                      /* Alertas: Salvar */
    .nt-acoes .btn-primary,                      /* Relatórios: Salvar */
    .pxw-pane.on .pxw-foot .btn-primary,         /* Wizard do Pixel: Continuar */
    .uso-cta .btn-primary,                       /* Conta › Uso: Ver planos */
    .create-form .form-actions .btn-primary,     /* Conta › Perfil: Salvar */
    .cm-conn-acts .btn-primary,                  /* Contas: Reconectar */
    .wa-sec-h .btn-primary,                      /* WhatsApp: Nova automação / Criar template */
    .waf-top .btn-primary,                       /* Fluxo: Salvar fluxo */
    .ig-bar .btn-primary                         /* Integrações: Criar integração */
) { box-shadow: var(--glow); }
/* Integrações tem dois CTAs verdes (criar e salvar segredo): o glow fica só no primeiro */
:root:not([data-theme="light"]) .ig-card:has(.ig-bar .btn-primary) ~ .ig-card .ig-bar .btn-primary { box-shadow: 0 8px 22px -12px var(--brand-glow); }
/* Assinatura: o plano atual é o foco */
:root:not([data-theme="light"]) .as-plano.atual { box-shadow: var(--ring-brand), var(--mold-soft), var(--glow); }
/* WhatsApp sem CTA na seção (Visão geral, Conversas): a aba ativa */
:root:not([data-theme="light"]) .wa-tab.is-on { box-shadow: var(--ring-brand), var(--mold-soft); }
:root:not([data-theme="light"]) .wa:not(:has(.wa-sec-h .btn-primary, .waf-top .btn-primary)) .wa-tab.is-on { box-shadow: var(--ring-brand), var(--mold-soft), var(--glow); }
/* Tags: a primeira tag rodando na Meta (é o que está gastando agora) */
:root:not([data-theme="light"]) .tg-sec:first-of-type > :is(.tg-sec-head, .tg-sec-sub) + .tg-funnel .tg-funnel-body > .tg-tag:first-child .tg-use.live { box-shadow: 0 0 0 1px rgba(60, 230, 160, .45), var(--glow); }

/* ---------- modais e menus: vidro FOSCO ---------- */
/* opaco o bastante pro que está atrás não ser lido; o desfoque só tinge */
:root:not([data-theme="light"]) :is(.modal, .ov-card, .camp-modal) {
    background: rgba(18, 20, 20, .92);
    background-image: var(--glass-grad);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-color: transparent;
    border-radius: var(--r-box);
    box-shadow: var(--ring-strong), var(--mold), 0 40px 80px -30px rgba(0, 0, 0, .95);
}
:root:not([data-theme="light"]) :is(.cs-panel, .waf-sel-lst, .waf-menu, .export-menu, .cal-pop, .camp-col-panel, .camp-pop, .camp-fresh-detail) {
    background: rgba(18, 20, 20, .95);   /* era rgba(12,20,16): verde fixo que escapou da neutralização (26/09) */
    background-image: var(--glass-grad);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-color: transparent;
    border-radius: var(--r-card);
    box-shadow: var(--ring-strong), var(--mold-soft), 0 24px 48px -20px rgba(0, 0, 0, .9);
}
:root:not([data-theme="light"]) .cal-pop { border-radius: var(--r-box); }
:root:not([data-theme="light"]) .export-opt { border-bottom-color: var(--hair); }
/* véu atrás do modal: grafite, no tom do fundo (era verde) */
:root:not([data-theme="light"]) :is(.ov, .modal-backdrop, .camp-modal-ov) { background: rgba(4, 5, 5, .66); }
/* item escolhido na lista: texto branco e o ✓ verde; verde nos dois gritava */
:root:not([data-theme="light"]) .cs-option.is-sel { color: var(--text); font-weight: 600; }

/* ---------- anel de aprovação: o gradiente da marca de verdade ---------- */
/* o <linearGradient id="ck-ring-grad"> mora no próprio SVG (includes/checkout_ui.php) */
:root:not([data-theme="light"]) .ck-ring.is-pos .ck-ring-fg { stroke: url(#ck-ring-grad); }
/* estados que antes eram cor de borda: viram anel (a leitura do sinal fica) */
:root:not([data-theme="light"]) :is(.wa-gat, .wa-ftile, .px-evcard):hover { background-color: var(--glass-hover); }
:root:not([data-theme="light"]) .wa-gat:hover { box-shadow: var(--ring-strong), var(--mold), var(--drop); }
:root:not([data-theme="light"]) .wa-ftile:hover { box-shadow: var(--ring-strong), var(--mold-soft); }
:root:not([data-theme="light"]) :is(.wa-ftile.is-on, .wa-ftile.is-over, .wa-tpl.is-picked) { box-shadow: var(--ring-brand), var(--mold-soft); }
:root:not([data-theme="light"]) .uso-card.is-over { box-shadow: 0 0 0 1px rgba(229, 112, 107, .45), var(--mold), var(--drop); }
:root:not([data-theme="light"]) .uso-card.is-near { box-shadow: 0 0 0 1px rgba(207, 161, 62, .45), var(--mold), var(--drop); }
/* ----------------------------------------------------------------
   Faixa de cobrança (paywall, includes/paywall.php)
   soft = trial/assinatura acabando · warn = fatura/somente leitura
   neg = bloqueado. Usa os tokens do tema; funciona em 390px.
   ---------------------------------------------------------------- */
.paywall-bar {
    --pw: var(--text-3);
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 20px; padding: 11px 12px 11px 14px;
    border: 1px solid color-mix(in srgb, var(--pw) 32%, var(--border));
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--pw) 7%, var(--surface));
    color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.paywall-bar--warn { --pw: var(--warn); }
.paywall-bar--neg  { --pw: var(--neg); }
.paywall-bar--soft { padding-block: 8px; font-size: 12.5px; }
.paywall-bar__dot {
    flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
    background: var(--pw); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pw) 22%, transparent);
}
.paywall-bar--soft .paywall-bar__dot { width: 6px; height: 6px; box-shadow: none; }
.paywall-bar__txt { flex: 1 1 auto; min-width: 0; }
.paywall-bar__txt b { color: var(--text); font-weight: 600; }
.paywall-bar--warn .paywall-bar__txt b { color: var(--warn); }
.paywall-bar--neg  .paywall-bar__txt b { color: var(--neg); }
.paywall-bar__cta {
    flex: 0 0 auto; white-space: nowrap;
    padding: 7px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; text-decoration: none;
    color: var(--ink-fg); background: var(--ink-bg);
}
.paywall-bar--warn .paywall-bar__cta { color: #1a1204; background: var(--warn); }
.paywall-bar--neg  .paywall-bar__cta { color: #fff; background: var(--neg); }
:root[data-theme="light"] .paywall-bar--warn .paywall-bar__cta { color: #fff; }
.paywall-bar--soft .paywall-bar__cta { padding: 5px 10px; color: var(--text); background: transparent; border: 1px solid var(--border-strong); }
.paywall-bar__cta:hover { filter: brightness(1.06); }
@media (max-width: 560px) {
    .paywall-bar { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
    .paywall-bar__dot { margin-top: 7px; }
    .paywall-bar__txt { flex-basis: calc(100% - 20px); }
    .paywall-bar__cta { margin-left: 18px; }
}
.paywall-flash { margin-bottom: 14px; }
.paywall-neutro__t { font-size: 18px; font-weight: 600; margin: 4px 0 0; color: var(--text); }

/* ============================================================
   UX 26/09 — casca global (acessibilidade e toque).
   Só ACRESCENTA: nada aqui muda o layout de uma tela específica.
   ============================================================ */

/* Link "Pular para o conteúdo": invisível até receber foco pelo Tab. */
.skip-link {
    position: absolute; left: 12px; top: -64px; z-index: 1000;
    padding: 10px 14px; border-radius: 10px;
    background: var(--ink-bg); color: var(--ink-fg);
    font-family: var(--ui); font-size: 13.5px; font-weight: 600;
    text-decoration: none; box-shadow: var(--shadow-lift);
    transition: top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible { top: 12px; outline: 2px solid var(--brand, #3ce6a0); outline-offset: 2px; }
/* o <main> recebe foco pelo link acima; sem contorno no bloco inteiro */
#conteudo:focus { outline: none; }

/* Foco visível pelo teclado no painel todo. :where() = especificidade zero,
   então qualquer :focus-visible próprio de um componente continua valendo. */
:where(a, button, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--brand, #3ce6a0);
    outline-offset: 2px;
}
/* itens do menu: contorno por dentro, pra não ser cortado pela borda da sidebar */
.nav-item:focus-visible,
.user:focus-visible { outline: 2px solid var(--brand, #3ce6a0); outline-offset: -2px; }
.nav-item:focus-visible { color: var(--text); }

/* Texto terciário (unidades, legendas, ícones do menu) com contraste de
   leitura (~4,5:1 sobre o fundo), sem mudar o tom do visual. */
:root:not([data-theme="light"]) { --text-3: #80808A; }
:root[data-theme="light"]       { --text-3: #76767F; }

@media (max-width: 980px) {
    /* alvo de toque confortável pro botão do menu (era 38px) */
    .mobile-bar .nav-toggle { width: 44px; height: 44px; }
    .sidebar .nav-item { min-height: 44px; }
    /* O escurecido atrás do menu nunca aparecia: a regra-base (.sidebar-backdrop
       { display:none }) não era desfeita no mobile — só o [hidden] é que deve esconder. */
    .sidebar-backdrop { display: block; }
    /* No celular o menu abre POR CIMA do conteúdo. O vidro de 1,8% sem desfoque
       (o blur saiu em 26/09) deixava os cards aparecerem através dos itens do menu:
       aqui ele é praticamente sólido, com o mesmo fio de 1px à direita. */
    :root:not([data-theme="light"]) .sidebar {
        background: color-mix(in srgb, var(--bg-soft) 97%, transparent);
    }
    /* menu fechado fora da tela não recebe Tab nem leitor de tela */
    .sidebar {
        visibility: hidden;
        transition: left .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
    }
    .sidebar.open {
        visibility: visible;
        transition: left .28s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
    }
}

/* Quem pede menos movimento no sistema: menu e casca sem animação. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body, .sidebar, .nav-item, .skip-link { transition: none !important; }
}

/* card de métrica com dica no hover inteiro (title): cursor de ajuda só no "i" */
.stat-info { cursor: default; }

/* Texto só para leitor de tela: some da tela, continua acessível. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Balão de dica no toque (app.js, só em telas sem hover). */
.touch-tip {
    position: absolute; z-index: 1100; max-width: min(280px, calc(100vw - 16px));
    padding: 8px 11px; border-radius: 10px;
    background: var(--ink-bg); color: var(--ink-fg);
    font-family: var(--ui); font-size: 12.5px; line-height: 1.4; font-weight: 500;
    box-shadow: var(--shadow-lift); pointer-events: auto; white-space: normal;
}

/* ============================================================
   SEM DESFOQUE NOS CARDS (26/09/2026)
   O Leon via uma linha vertical cortando cards (Campanhas, painel, tabelas).
   Causa: backdrop-filter em elemento com raio + degradê, que o Chrome desenha
   em blocos com o zoom do Windows em 125/150% e deixa emenda. Atrás dos cards o
   fundo é liso, então o desfoque não mostrava nada. Fica só no que abre POR CIMA
   de conteúdo (modais, menus, popovers, tooltips), onde ele aparece de verdade.
   ============================================================ */
:root:not([data-theme="light"]) { --glass-blur: none; --glass-blur-2: none; }
:is(.sidebar, .client-card, .stat, .icon-btn, .period-trigger, .seg-group, .client-topbar,
    .create-form, .block > .form-row, .edit-list, .camp-filters, .an-kpi, .an-metrics,
    .an-funnel-block, .an-insight, .empty, .tags-empty, .integ-box, .table-wrap, .goal,
    .metrics-strip, .charts-grid .chart-card, .camp-kpi, .camp-scope-form, .camp-tabs-group,
    .camp-search-wrap, .camp-fresh-chip, .waf-node) {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* UX 26/09 — barra de navegação: aparece no clique, antes do servidor responder */
.nav-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 10000;
    background: var(--accent); box-shadow: 0 0 8px var(--accent);
    opacity: 0; pointer-events: none;
}
.nav-progress.on { opacity: 1; animation: nav-progress-run 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes nav-progress-run { 0% { width: 0; } 10% { width: 35%; } 40% { width: 70%; } 100% { width: 92%; } }
@media (prefers-reduced-motion: reduce) {
    .nav-progress.on { animation: none; width: 60%; }
}

/* ============================================================
   CELULAR — campos e botões pequenos (27/09/2026)
   1) iOS dá zoom na tela ao focar campo com fonte < 16px (a maioria aqui
      tinha 12–14px: .inline-input, .create-form, filtros, busca, simulador).
      Só o tamanho da fonte muda; o !important é de propósito — são dezenas de
      regras de campo com seletores fortes e nenhuma deve voltar abaixo de 16px
      no celular. O botão do dropdown custom (.cs-trigger) é <button>: não dá
      zoom e fica como está; a busca dentro dele é <input> e entra na regra.
   2) .btn-sm media 25–29px de altura: alvo de toque vai a 36px.
   ============================================================ */
@media (max-width: 720px) {
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"],
              [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]),
    select:not(.cs-native),
    textarea { font-size: 16px !important; }

    .btn-sm { min-height: 36px; }
    .btn-ghost { min-width: 36px; }
}

/* ----------------------------------------------------------------
   Menu lateral: grupo "Pixel e UTM" (29/09/2026). O item abre, dentro do
   próprio menu, uma tela por plataforma (Meta, Google Ads, TikTok) com a marca
   oficial ao lado. Aberto/fechado mora em .is-open (o script do grupo, em
   includes/layout.php, restaura o último estado sem piscar).
   ---------------------------------------------------------------- */
.sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.nav-group { display: flex; flex-direction: column; }
.nav-group-btn .nav-caret { margin-left: auto; display: grid; place-items: center; width: 16px; height: 16px; color: var(--text-3); transition: transform .18s ease; }
.nav-group-btn .nav-caret svg { width: 14px; height: 14px; }
.nav-group.is-open > .nav-group-btn .nav-caret { transform: rotate(90deg); }
.nav-group.in-group > .nav-group-btn { color: var(--text); }
.nav-group.in-group > .nav-group-btn .nav-ico { color: var(--text); }
.nav-group:not(.is-open) > .nav-sub { display: none; }
.nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 20px; padding-left: 8px; border-left: 1px solid var(--border); }
.nav-subitem { padding: 7px 10px; gap: 10px; font-size: 13px; }
.nav-subitem .nav-ico { width: 16px; height: 16px; }
.nav-subitem .nav-ico svg { width: 16px; height: 16px; }
/* A nota do TikTok é currentColor: segue o texto do item (claro/escuro). */
.nav-subitem .nav-ico-plat { color: var(--text-2); }
.nav-subitem.active .nav-ico-plat, .nav-subitem:hover .nav-ico-plat { color: var(--text); }
@media (max-width: 980px) {
    .nav-sub { margin-left: 22px; }
    .sidebar .nav-subitem { min-height: 40px; padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) { .nav-group-btn .nav-caret { transition: none; } }

/* Analytics › Visão geral: origem das vendas (direto + resgatado) e receita indireta
   (PLANO-ATRIBUICAO-RESGATE-LTV §1.6, §3.3). Só aparece com crédito no período. */
.an-credit { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; padding: 0; margin-top: 14px; overflow: hidden; }
.an-credit-cell { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; cursor: help; min-width: 0; }
.an-credit-cell + .an-credit-cell { border-left: 1px solid var(--border); }
.an-credit-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-3); }
.an-credit-big { font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.an-credit-big b { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.an-credit-big b.an-credit-resg { color: var(--accent); }
.an-credit-bar { display: flex; height: 5px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.an-credit-bar i { display: block; height: 100%; background: var(--text-3); }
.an-credit-bar i.is-resg { background: repeating-linear-gradient(135deg, var(--accent) 0 3px, color-mix(in srgb, var(--accent) 55%, transparent) 3px 6px); }
.an-credit .an-dim { font-size: 12px; }
@media (max-width: 640px) {
  .an-credit-cell + .an-credit-cell { border-left: 0; border-top: 1px solid var(--border); }
  .an-credit-big b { font-size: 18px; }
}

/* Modo "Ocultar nomes": borra só nome/foto de projeto e funil (.priv). Números ficam. */
.priv { transition: filter .15s ease; }
html.priv-on .priv { filter: blur(7px); user-select: none; -webkit-user-select: none; }
html.priv-on .priv img { pointer-events: none; }
/* interruptor liga/desliga (mesmo desenho dos de campanha) */
.priv-switch {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; cursor: pointer;
    border-radius: var(--r-sm); font-family: var(--ui); font-size: 13px; font-weight: 500; line-height: normal; white-space: nowrap;
    color: var(--text-2); background: var(--surface); border: 1px solid var(--border);
    transition: background .15s, border-color .15s, color .15s;
}
.priv-switch:hover { color: var(--text); background: var(--surface-hover); border-color: var(--border-strong); }
.priv-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.priv-on .priv-switch { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
html.priv-on .priv-switch .tgl-track { background: var(--accent); }
html.priv-on .priv-switch .tgl-thumb { transform: translateX(12px); }

/* Menu do logo (21/10/2026): braços do Deu ROI — Ads / Zap / Organic (em breve).
   Markup em includes/layout.php render_brand_switch(). */
.brand-switch { position: relative; }
.brand-btn { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; text-align: left; border-radius: var(--r-sm); }
.sidebar .brand-btn { display: flex; padding: 6px 8px 6px 6px; margin-bottom: 12px; }
.brand-btn:hover, .brand-switch.is-open .brand-btn { background: var(--surface); }
.brand-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand-arm { font-weight: 500; color: var(--text-2); margin-left: 2px; }
.brand-caret { width: 15px; height: 15px; margin-left: auto; color: var(--text-2); transition: transform .15s; }
.brand-switch.is-open .brand-caret { transform: rotate(180deg); }
.brand-menu { position: relative; z-index: 60; margin: -6px 0 12px;
  padding: 6px; border-radius: 12px; background: var(--surface-2, var(--surface)); border: 1px solid var(--border);
  box-shadow: var(--shadow-lift); display: flex; flex-direction: column; gap: 2px; }
.brand-menu[hidden] { display: none; }
.bm-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: var(--text); text-decoration: none; }
a.bm-item:hover, a.bm-item:focus-visible { background: var(--surface-hover); outline: none; }
.bm-item.is-on { background: var(--surface-hover); }
.bm-ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: grid; place-items: center;
  background: color-mix(in srgb, #3ce6a0 12%, transparent); color: #3ce6a0; }
.bm-ico svg { width: 17px; height: 17px; }
.bm-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bm-nome { font-size: 13.5px; font-weight: 600; }
.bm-desc { font-size: 12px; color: var(--text-2); }
.bm-tag { margin-left: auto; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 99px;
  border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.bm-tag-on { border-color: color-mix(in srgb, #3ce6a0 45%, transparent); color: #3ce6a0; }
.bm-item.is-soon { cursor: not-allowed; opacity: .55; }
.bm-item.is-soon .bm-ico { background: var(--surface-hover); color: var(--text-2); }
.nav-sec { margin: 12px 11px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }

/* Explicação do "i" (27/10/2026): aparece NA HORA, sem o "?" no cursor (era o
   <title> nativo do navegador, com atraso de ~1 s). Desenhada pelo app.js. */
.ii-tip { position: fixed; z-index: 10000; max-width: 300px; padding: 9px 12px; border-radius: 10px;
  background: var(--surface-3, #1d1f22); color: var(--text-1, #f2f2f2); border: 1px solid var(--line, rgba(255,255,255,.12));
  box-shadow: 0 10px 30px rgba(0,0,0,.35); font: 500 12.5px/1.45 Inter, system-ui, sans-serif; letter-spacing: 0;
  text-transform: none; white-space: normal; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .08s, transform .08s; }
.ii-tip.is-on { opacity: 1; transform: none; }
[data-theme="light"] .ii-tip { background: #fff; color: #17181a; border-color: rgba(0,0,0,.1); box-shadow: 0 10px 30px rgba(0,0,0,.12); }

/* olhinho de ocultar nomes fora do painel v2 (home) */
.priv-ico { display: inline-flex; align-items: center; width: 36px; min-width: 36px; padding: 0; justify-content: center; }
.priv-ico svg { width: 16px; height: 16px; }
.priv-ico .eo { display: none; }
html.priv-on .priv-ico .e { display: none; }
html.priv-on .priv-ico .eo { display: inline; }
html.priv-on .priv-ico { color: var(--text); border-color: var(--accent); }

/* 28/10/2026: login do cliente com o painel do lançamento: mesma largura da tela de quem gerencia */
.client-main:has(.client-launch){ max-width:1360px; padding-inline:32px; }
@media (max-width:720px){ .client-main:has(.client-launch){ padding-inline:16px; } }
.client-main:has(.client-launch) .client-topbar{ padding-inline:max(32px, calc(50vw - 648px)); }
/* 28/10/2026: o olho da tela inicial do mesmo tamanho do botão de sincronizar */
.period-bar .priv-ico { width: 38px; min-width: 38px; height: 38px; flex: 0 0 auto; }
.period-bar .priv-ico svg { width: 17px; height: 17px; }
/* topo do cliente: fundo que não deixa o painel aparecer por trás (o desfoque falhava no iPhone) */
.client-topbar { background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }

/* Marca nova (30/10/2026): o R solto, sem quadrado em volta, com brilho leve. */
html .brand .brand-mark, html .legal-brand .brand-mark, html .brand-tok, html .brand-menu .bm-item .brand-mark {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; }
html .brand .brand-mark svg, html .legal-brand .brand-mark svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(37,227,148,.4)); }
html .brand-tok svg { width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(37,227,148,.4)); }
.wm-r { color: #13f0b4; }

/* Google Ads / TikTok Ads em beta fechado (ads_multi_liberado): item apagado, marca
   sem cor e selo neutro. O "apagado" é só aparência: quem trava é o disabled + o servidor. */
.ads-beta-off { opacity: .6; cursor: not-allowed; }
.ads-beta-off svg { filter: grayscale(1); }
.ads-beta-selo.ads-beta-selo { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; color: var(--text-2); background: var(--ico-bg); border: 1px solid var(--border); }
.nav-subitem.ads-beta-off { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; }
.nav-subitem.ads-beta-off:hover { background: transparent; color: inherit; }
.nav-subitem.ads-beta-off .ads-beta-selo, .sb-fly-i .ads-beta-selo { margin-left: auto; }
.sb-fly-i[disabled] { width: 100%; border: 0; background: transparent; font: inherit; opacity: .6; cursor: not-allowed; }
.camp-plat-opt.ads-beta-off:hover { color: var(--text-3); background: transparent; }
.camp-plat-opt.ads-beta-off .camp-plat-lbl { display: none; } /* a barra não comporta o nome: fica a marca, o selo e o tooltip */
.rules-plat.ads-beta-off, .rules-plat.ads-beta-off:hover { border-color: var(--border); color: var(--text-3); }
.rules-plat.ads-beta-off input { cursor: not-allowed; }
.cc-tab.ads-beta-off:hover { background: inherit; border-color: var(--border); }

/* Celular: a tela nunca rola de lado (30/10/2026), mesmo que um filho estoure a largura.
   'clip' não cria scroll container, então a barra grudada do topo segue funcionando.
   'hidden' fica de reserva pro navegador antigo que não conhece 'clip'. */
@media (max-width: 980px) {
  html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
}