/* ===========================================================================
   Quiz Dashboard — Retenção do Funil de Quiz (InLead).
   Identidade Underdogz (12/10/2026): marinho, luz azul-gelo, laranja como 2ª
   cor, Barlow — a mesma da Nexus. Os nomes das variáveis (--blue*) são os
   históricos. Escuro por padrão.
   Modelo em 2 camadas: Produto (base de dados) → Variante (URL livre do quiz).
   =========================================================================== */
:root, :root[data-theme="light"]{
  color-scheme:light;
  --page:#eef3f9; --surface:#ffffff; --surface-2:#f6f9fc; --border:#d5e0ec;
  --surface-3:#e4ebf4; --border-strong:#b7c8dc;
  --text-primary:#0a1628; --text-secondary:#3d5273; --text-muted:#6b84a1;
  --blue:#0057ff; --blue-dark:#003fbf; --blue-tint:#e4ecff; --blue-tint-2:#c6d7ff;
  --accent-solid:#0046cc;
  --accent2:#d96f2a; --accent2-dark:#b85a1e; --accent2-tint:rgba(217,111,42,.10);
  --chart-1:#0057ff; --chart-2:#d96f2a;
  --r-hi:#0a8f0a;   --r-hi-tint:#e7f6e7;
  --r-mid:#b58600;  --r-mid-tint:#fbf3d6;
  --r-low:#e0651a;  --r-low-tint:#fce7d4;
  --r-crit:#c9302c; --r-crit-tint:#fdeceb;
  --good:#0a8f0a; --bad:#c9302c; --warn:#c96a00;
  --page-glow:none; --on-accent:#ffffff;
  --radius:14px; --shadow:0 1px 2px rgba(20,20,22,.06);
  --font:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,"Roboto Mono",monospace;
  --glow-accent:0 0 0 1px var(--blue),0 0 14px -2px color-mix(in srgb,var(--blue) 55%,transparent);
  --glow-bad:0 0 0 1px var(--r-crit),0 0 16px -3px color-mix(in srgb,var(--r-crit) 55%,transparent);
  --glow-good:0 0 0 1px var(--r-hi),0 0 14px -3px color-mix(in srgb,var(--r-hi) 50%,transparent);
}
/* ---------------------------------------------------------------------------
   TEMA ESCURO — a identidade principal do dash (o claro é o modo alternativo).
   Marinho profundo da Underdogz, luz azul-gelo como marca, laranja como segunda
   cor, status inalterado.

   Dois tons por cor de marca, e a distinção IMPORTA:
     --blue       claro e saturado -> texto, ícone, glow, e fundo sólido de
                  elemento selecionado (sempre com texto ESCURO por cima)
     --blue-dark  ainda mais claro -> texto sobre fundo --blue-tint
     --accent-solid  escuro o bastante para carregar texto BRANCO
   Cor de marca clara NUNCA vira preenchimento de área grande em gráfico —
   para isso existe --chart-1/--chart-2, que passaram no teste de daltonismo
   (validado com node scripts/validate_palette.js do skill de dataviz).
   --------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0a1628; --surface:#122a47; --surface-2:#0f1f38; --surface-3:#163356;
  --border:#1f3b60; --border-strong:#2d5584;
  --text-primary:#e8f1f8; --text-secondary:#a9bdd3; --text-muted:#7f98b5;
  --blue:#87ceeb; --blue-dark:#b0e0ff;
  --blue-tint:rgba(135,206,235,.13); --blue-tint-2:rgba(135,206,235,.32);
  --accent-solid:#0057ff;
  --accent2:#ffb86b; --accent2-dark:#d96f2a; --accent2-tint:rgba(255,184,107,.14);
  --chart-1:#3d82ff; --chart-2:#d96f2a;
  --r-hi:#0ca30c;   --r-hi-tint:rgba(12,163,12,.16);
  --r-mid:#fab219;  --r-mid-tint:rgba(250,178,25,.16);
  --r-low:#ec835a;  --r-low-tint:rgba(236,131,90,.16);
  --r-crit:#d03b3b; --r-crit-tint:rgba(208,59,59,.16);
  --good:#0ca30c; --bad:#d03b3b; --warn:#fab219;
  --shadow:0 1px 2px rgba(0,0,0,.55),0 10px 30px -18px rgba(0,0,0,.9);
  --glow-accent:0 0 0 1px var(--blue),0 0 26px -4px color-mix(in srgb,var(--blue) 65%,transparent);
  --glow-accent2:0 0 0 1px var(--accent2),0 0 26px -4px color-mix(in srgb,var(--accent2) 65%,transparent);
  --glow-bad:0 0 0 1px var(--bad),0 0 26px -4px color-mix(in srgb,var(--bad) 70%,transparent);
  --glow-good:0 0 0 1px var(--good),0 0 24px -4px color-mix(in srgb,var(--good) 65%,transparent);
  /* brilho ambiente do fundo — dá profundidade sem custar performance */
  --page-glow:radial-gradient(900px 500px at 15% -10%,rgba(135,206,250,.16),transparent 60%),
              radial-gradient(700px 400px at 100% 100%,rgba(0,87,255,.14),transparent 60%);
  --on-accent:#0a1628;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#0a1628; --surface:#122a47; --surface-2:#0f1f38; --surface-3:#163356;
    --border:#1f3b60; --border-strong:#2d5584;
    --text-primary:#e8f1f8; --text-secondary:#a9bdd3; --text-muted:#7f98b5;
    --blue:#87ceeb; --blue-dark:#b0e0ff;
    --blue-tint:rgba(135,206,235,.13); --blue-tint-2:rgba(135,206,235,.32);
    --accent-solid:#0057ff;
    --accent2:#ffb86b; --accent2-dark:#d96f2a; --accent2-tint:rgba(255,184,107,.14);
    --chart-1:#3d82ff; --chart-2:#d96f2a;
    --r-hi:#0ca30c;   --r-hi-tint:rgba(12,163,12,.16);
    --r-mid:#fab219;  --r-mid-tint:rgba(250,178,25,.16);
    --r-low:#ec835a;  --r-low-tint:rgba(236,131,90,.16);
    --r-crit:#d03b3b; --r-crit-tint:rgba(208,59,59,.16);
    --good:#0ca30c; --bad:#d03b3b; --warn:#fab219;
    --shadow:0 1px 2px rgba(0,0,0,.55),0 10px 30px -18px rgba(0,0,0,.9);
    --glow-accent:0 0 0 1px var(--blue),0 0 26px -4px color-mix(in srgb,var(--blue) 65%,transparent);
    --glow-accent2:0 0 0 1px var(--accent2),0 0 26px -4px color-mix(in srgb,var(--accent2) 65%,transparent);
    --glow-bad:0 0 0 1px var(--bad),0 0 26px -4px color-mix(in srgb,var(--bad) 70%,transparent);
    --glow-good:0 0 0 1px var(--good),0 0 24px -4px color-mix(in srgb,var(--good) 65%,transparent);
    --page-glow:radial-gradient(1100px 520px at 82% -8%,rgba(255,140,51,.11),transparent 62%),
                radial-gradient(820px 420px at 8% 4%,rgba(124,58,237,.08),transparent 60%);
    --on-accent:#0a1628;
  }
}
*{box-sizing:border-box}
/* O brilho ambiente é `fixed` para não rolar junto com o conteúdo: rolando,
   ele se comportaria como uma mancha subindo pela tela. */
body{margin:0;font-family:var(--font);background:var(--page);color:var(--text-primary);font-size:14px;line-height:1.5;
  background-image:var(--page-glow);background-attachment:fixed;background-repeat:no-repeat}
.wrap{max-width:1480px;margin:0 auto;padding:24px 22px 60px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:600;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--blue);border-radius:2px}
h1{font-size:19px;margin:6px 0 0;letter-spacing:-.01em}
.lead{color:var(--text-secondary);font-size:14px;margin:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  transition:border-color .16s ease,box-shadow .16s ease}
.card:hover{border-color:var(--border-strong)}
.hide{display:none!important}

/* ---- BARRA DE CONTEXTO (Produto → Variante → Período) ---- */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.nav{display:flex;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:5px}
.nav button{border:none;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--text-secondary);padding:8px 15px;border-radius:7px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.nav button:hover{background:var(--page)}
.nav button.on{background:var(--blue-tint);color:var(--blue-dark);font-weight:600;box-shadow:inset 0 0 0 1px var(--blue-tint-2)}
.theme-btn{border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);border-radius:8px;padding:8px 14px;font:inherit;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.theme-btn:hover{border-color:var(--blue-tint-2);background:var(--blue-tint);color:var(--blue-dark)}
.theme-btn svg{flex-shrink:0}
.logout-btn{border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);border-radius:8px;padding:8px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.logout-btn:hover{border-color:var(--bad);color:var(--bad)}

/* Fase 8: um card só (era .context + .utm-filters separados, empilhados).
   Linha 1 = Produto/Variante/Período, linha 2 = UTM + Limpar filtros. */
.filters{padding:12px 16px;margin-bottom:16px}
.filters-row{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.filters-row-1{padding-bottom:12px;border-bottom:1px solid var(--border)}
.filters-row-2{align-items:flex-end;padding-top:12px}
.filters-row-2 .utm-grid{flex:1}
.ctx-block{display:flex;flex-direction:column;gap:6px;min-width:210px}
.ctx-block .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:6px;cursor:default}
.ctx-sel{border:1px solid var(--border);background:var(--surface-2);color:var(--text-primary);border-radius:9px;padding:11px 13px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-width:230px}
.ctx-sel:focus{outline:2px solid var(--blue-tint-2);border-color:var(--blue)}
.ctx-div{width:1px;background:var(--border);align-self:stretch}
.ctx-prices{display:flex;flex-direction:column;gap:6px;flex:1;min-width:250px}
.ctx-prices .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);cursor:default}

/* filtros UTM (origem, posicionamento, campanhas, criativos) */
.utm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.utm-field label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:7px}
.utm-field label .ml{color:var(--blue-dark);font-weight:600}
.utm-sel{width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text-primary);border-radius:9px;padding:10px 12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.utm-sel:focus{outline:2px solid var(--blue-tint-2);border-color:var(--blue)}
.utm-clear{flex-shrink:0;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);border-radius:8px;padding:8px 14px;font:inherit;font-size:12.5px;cursor:pointer}
.utm-clear:hover{background:var(--page)}
.price-chips{display:flex;gap:8px;flex-wrap:wrap}
.pchip{border:1px solid var(--border);background:var(--surface-2);color:var(--text-secondary);border-radius:8px;padding:9px 15px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.12s}
.pchip:hover{border-color:var(--blue-tint-2)}
.pchip.on{background:var(--blue);border-color:var(--blue);color:var(--on-accent);box-shadow:var(--glow-accent)}
.pchip .u{font-family:var(--mono);font-size:9.5px;opacity:.7;font-weight:500}
.pchip .allx{font-weight:700}

/* datepicker — estilo Nexus (calendário duplo + presets) */
.date-wrap{position:relative}
/* Fase 12: indicador "dado ao vivo" — o ponto pulsa em --good enquanto o
   último evento é recente; passa a --text-muted (sem pulso) depois de 60min,
   porque nesse ponto "ao vivo" já é uma promessa vazia. */
.live{display:flex;align-items:center;gap:7px;margin-top:8px;font-family:var(--mono);font-size:10.5px;color:var(--text-muted)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex-shrink:0;animation:live-pulso 1.8s ease-in-out infinite}
.live.live-frio .live-dot{background:var(--text-muted);animation:none}
@keyframes live-pulso{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}50%{opacity:.7;box-shadow:0 0 0 4px transparent}}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}
.date-btn{border:1px solid var(--blue-tint-2);background:var(--blue-tint);color:var(--blue-dark);border-radius:999px;padding:10px 16px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.date-btn:hover{filter:brightness(.98)}
.date-btn .car{font-size:10px;opacity:.7}
.date-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.18);padding:14px;display:none}
.date-pop.open{display:block}
.datepicker{display:flex;min-width:560px}
.dp-presets{border-right:1px solid var(--border);padding-right:10px;margin-right:14px;min-width:150px;max-height:296px;overflow-y:auto}
.dp-preset{display:block;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:13px;color:var(--text-primary);padding:8px 11px;border-radius:8px;cursor:pointer;white-space:nowrap}
.dp-preset:hover{background:var(--page)}
.dp-preset.on{background:var(--blue-tint);color:var(--blue-dark);font-weight:600}
.dp-cal{flex:1}
.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dp-nav button{border:none;background:none;font:inherit;font-size:16px;color:var(--text-secondary);cursor:pointer;padding:2px 10px;border-radius:6px}
.dp-nav button:hover{background:var(--page);color:var(--text-primary)}
.dp-months{display:flex;gap:22px}
.dp-month{flex:1}
.dp-month h4{text-align:center;font-size:13px;margin:0 0 8px;font-weight:600}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{font-size:10px;color:var(--text-muted);text-align:center;padding:3px 0}
.dp-day{border:none;background:none;font:inherit;font-size:12px;padding:6px 0;border-radius:7px;cursor:pointer;text-align:center;color:var(--text-primary);font-variant-numeric:tabular-nums}
.dp-day:hover{background:var(--blue-tint)}
.dp-day.out{color:var(--text-muted);opacity:.3;cursor:default}
.dp-day.out:hover{background:none}
.dp-day.inrange{background:var(--blue-tint);border-radius:0}
.dp-day.edge{background:var(--accent-solid);color:#fff;font-weight:700}
.dp-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;border-top:1px solid var(--border);padding-top:12px;font-size:13px;color:var(--text-secondary)}
.dp-apply{border:1px solid var(--blue);background:var(--blue-tint);color:var(--blue-dark);font:inherit;font-size:13px;font-weight:600;border-radius:9px;padding:8px 20px;cursor:pointer}
.dp-apply:hover{background:var(--blue);color:var(--on-accent)}

/* ---- KPI ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{padding:16px 18px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
/* brilho de canto na cor do próprio KPI — dá volume sem pesar */
.kpi::after{content:"";position:absolute;right:-40px;top:-60px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%);pointer-events:none}
.kpi.k-topo{--accent:var(--blue)} .kpi.k-cap{--accent:var(--good)}
.kpi.k-chk{--accent:var(--accent2)} .kpi.k-bounce{--accent:var(--bad);box-shadow:var(--glow-bad)}
.kpi .k-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kpi .k-ico{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.kpi .k-ico svg{width:15px;height:15px}
.kpi .k-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding-top:4px}
.kpi .k-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.kpi .k-val{font-size:31px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;position:relative}
.kpi .k-sub{font-size:12px;color:var(--text-secondary);position:relative}
/* Fase 10: pílula "vs. período anterior". Cor SEMÂNTICA (bom/ruim), não
   direcional — subir é bom pra captação, ruim pra bounce. "neutro" (leads no
   topo: volume não é bom nem ruim por si) usa o mesmo cinza do rótulo. */
.k-delta{font-family:var(--mono);font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;
  white-space:nowrap;background:var(--surface-3);color:var(--text-secondary);cursor:default}
.k-delta-good{background:var(--r-hi-tint);color:var(--good)}
.k-delta-bad{background:var(--r-crit-tint);color:var(--bad)}
/* pílula do Ranking (fase 12) — mesmo componente do KPI, um degrau menor */
.rank-pill{font-size:10px;padding:1px 7px}
/* sparkline: só a forma da curva (sem eixo/rótulo, o número já está ao lado).
   Cor por `currentColor`, herdada de `color` no card — --chart-1/2 conforme
   a fase 11 já usa pra marca de gráfico, nunca --blue/--accent2 (marca de UI). */
.k-spark{display:block;width:100%;height:28px;margin-top:10px;color:var(--chart-1)}
.kpi.k-chk .k-spark{color:var(--chart-2)}
/* Fase 11: anel da métrica-herói — só "Chegou na oferta". Troca o .k-ico
   genérico (os outros 3 KPIs mantêm o ícone) por um gauge que já mostra o
   número — mais informativo, e os dois juntos no mesmo card ficariam
   redundantes (dois círculos disputando o canto direito). */
.k-row-hero{justify-content:space-between;align-items:center;gap:12px}
.k-ring{width:56px;height:56px;flex-shrink:0}
.k-ring circle:last-child{filter:drop-shadow(0 0 5px var(--accent2));transition:stroke-dashoffset .5s cubic-bezier(.22,.68,.28,1)}
.kpi .k-sub b{color:var(--text-primary)}

/* ---- SECTIONS ---- */
.section{padding:20px 22px;margin-bottom:16px}
/* Fase 9: grade "bento" de 12 colunas — o dash passa a ocupar largura em vez
   de empilhar tudo numa coluna só (era ~3,5 telas de rolagem, agora ~2,2).
   Dentro do bento o espaçamento vertical é o `gap` da grade, não o
   margin-bottom do .section (senão dobra o espaço entre linhas). */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.bento>.section,.bento>.kpis{margin-bottom:0}
.span-12{grid-column:span 12}
.span-7{grid-column:span 7}
.span-6{grid-column:span 6}
.span-5{grid-column:span 5}
@media(max-width:820px){.span-12,.span-7,.span-6,.span-5{grid-column:span 12}}
.section .head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.section h2{font-size:16px;margin:0}
.section .sub{font-size:12px;color:var(--text-muted)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--text-secondary)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
/* `color` alimenta o currentColor da guia e do ponto que seguem o mouse;
   `crosshair` sinaliza que a silhueta é interativa. */
#silhueta{width:100%;height:230px;display:block;cursor:crosshair;color:var(--txt);
  /* Brilho bem mais contido que o original (era 0 0 18px / 30%). Junto com o
     halo borrado que saiu do SVG, aquele glow espalhava a forma e dava o
     aspecto de massa organica; aqui ele so assenta a area sobre o card. */
  filter:drop-shadow(0 1px 8px color-mix(in srgb,var(--blue) 14%,transparent))}
#silGuia,#silPonto{transition:opacity .12s ease;pointer-events:none}
.improve-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--blue-tint);color:var(--blue-dark);border:1px solid var(--blue-tint-2);border-radius:5px;padding:2px 7px;font-weight:700}

/* retenção */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.toolbar .switch{margin-left:auto}
.switch{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-secondary);cursor:pointer;user-select:none}
.head-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tsw{width:38px;height:21px;border-radius:999px;background:var(--border);position:relative;transition:.15s;flex-shrink:0}
.tsw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.15s}
.tsw.on{background:var(--r-hi)} .tsw.on::after{left:19px}
.screens{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.srow{display:grid;grid-template-columns:34px 1fr 92px 96px;align-items:center;gap:12px;padding:2px 0}
.srow.insert .sname{opacity:.72;font-style:italic}
.snum{font-family:var(--mono);font-size:11px;color:var(--text-muted);text-align:right}
.strack{height:22px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;overflow:hidden;position:relative;transition:border-color .14s}
.srow:hover .strack{border-color:var(--blue-tint-2)}
/* Barra na cor de MARCA (o comprimento já mede a retenção). Status fica só
   para a queda, à direita — ver comentário em render.js/drawScreens. */
.sfill{height:100%;border-radius:5px 0 0 5px;transition:width .5s cubic-bezier(.22,.68,.28,1);
  background:linear-gradient(90deg,var(--chart-1),var(--blue));
  box-shadow:0 0 14px -4px color-mix(in srgb,var(--blue) 70%,transparent)}
.sname{font-size:12px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px}
.spct{font-family:var(--mono);font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.sdelta{font-family:var(--mono);font-size:11px;text-align:right;color:var(--text-muted);font-variant-numeric:tabular-nums}
.sdelta.big{color:var(--bad);font-weight:700}
.srow.worst .strack{outline:2px solid var(--bad);outline-offset:1px}
.leadmark{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:6px 0;font-size:11.5px;color:var(--blue-dark);font-family:var(--mono)}
.leadmark::before,.leadmark::after{content:"";height:1px;background:var(--blue-tint-2);flex:1}
.footnote{font-size:11px;color:var(--text-muted);margin-top:12px;line-height:1.5}

/* checkout */
/* Fase 9: era 4 colunas fixas — quebrava feio dividindo a linha com "Descida
   na última tela" (span-6). auto-fit deixa o número de colunas se ajustar à
   largura disponível, sem depender de o card ocupar a linha inteira. */
.ck{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;margin-top:4px}
.ck>div{padding:14px 18px;border-right:1px solid var(--border)}
.ck>div:last-child{border-right:none}
.ck .ck-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);min-height:26px}
.ck .ck-val{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;margin:6px 0 1px}
.ck .ck-sub{font-size:11px;color:var(--text-muted)}
.ck .ck-desc{font-size:12px;color:var(--text-secondary);line-height:1.45}
.ck .ck-desc b{color:var(--blue-dark)}
.ck-total{background:var(--blue-tint);border-radius:10px;padding:14px 18px;margin-top:12px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ck-total .t-val{font-size:22px;font-weight:800;color:var(--blue-dark);font-variant-numeric:tabular-nums}
.ck-total .t-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-dark)}

/* comparação entre variantes */
/* minmax menor + alinhamento no topo: com 5 variantes o grid antes quebrava em
   4+1 e o card "melhor" ficava mais alto que os vizinhos. */
.price-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:4px;align-items:stretch}
.pc{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--surface-2);
  display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.pc:hover{border-color:var(--border-strong)}
.pc.best{border-color:var(--blue);box-shadow:var(--glow-accent)}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.pc .pc-price{font-size:17px;font-weight:800;line-height:1.2}
.pc .pc-badge{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;background:var(--blue);color:var(--on-accent);border-radius:5px;padding:2px 7px;flex-shrink:0}
.pc-url{font-family:var(--mono);font-size:10px;color:var(--text-muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-metrics{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pc-metrics .m{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px;gap:8px}
.pc-metrics .m .mv{font-weight:700;font-variant-numeric:tabular-nums}
/* a métrica-herói fica colada no rodapé do card para os 5 alinharem entre si */
.pc-hero{margin-top:auto;padding-top:12px}
.pc-hero .m{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px;gap:8px}
.pc-hero .m .mv{font-weight:800;font-variant-numeric:tabular-nums;color:var(--blue-dark);font-size:16px}
.pc-bar{height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:7px}
.pc-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--chart-1),var(--blue));
  transition:width .45s cubic-bezier(.22,.68,.28,1)}
.pc.best .pc-bar-fill{box-shadow:0 0 12px -2px var(--blue)}

/* ---- CONFIGURAÇÕES ---- */
.cfg-grid{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
@media(max-width:820px){.cfg-grid{grid-template-columns:1fr}}
.prod-list{display:flex;flex-direction:column;gap:6px}
.prod-item{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;padding:11px 13px;cursor:pointer;font-size:13.5px;font-weight:600;transition:border-color .15s}
.prod-item:hover{border-color:var(--border-strong)}
.prod-item.on{border-color:var(--blue);background:var(--blue-tint);color:var(--blue-dark)}
.prod-item .pdot{width:9px;height:9px;border-radius:50%;background:var(--blue);flex-shrink:0}
.prod-item .cnt{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--text-muted);font-weight:500}
.prod-item .prod-del{margin-left:8px;flex-shrink:0;border:1px solid transparent;background:none;color:var(--text-muted);
  border-radius:6px;width:22px;height:22px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.prod-item .prod-del:hover{background:var(--r-crit-tint);border-color:var(--bad);color:var(--bad)}
.add-btn{border:1px dashed var(--border);background:none;color:var(--text-secondary);border-radius:9px;padding:11px 13px;font:inherit;font-size:13px;cursor:pointer;text-align:left}
.add-btn:hover{border-color:var(--blue);color:var(--blue-dark)}
.field{margin-bottom:14px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:6px}
.field input{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);border-radius:8px;padding:10px 12px;font:inherit;font-size:13.5px;transition:border-color .15s}
.field input:hover{border-color:var(--border-strong)}
.field input:focus{outline:2px solid var(--blue-tint-2);border-color:var(--blue)}
.price-cfg-row{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:center;margin-bottom:6px}
.price-cfg-row input{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);border-radius:8px;padding:9px 11px;font:inherit;font-size:13px}
.price-cfg-row .del{border:1px solid var(--border);background:var(--surface);color:var(--text-muted);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:15px}
.price-cfg-row .del:hover{border-color:var(--bad);color:var(--bad)}
.price-cfg-slug{grid-column:1/-1;font-family:var(--mono);font-size:10px;color:var(--text-muted);margin:-2px 0 8px 2px}
.price-cfg-slug b{color:var(--blue-dark)}

/* ---- seção de webhooks ---- */
.wh-section{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.wh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.wh-head h3{margin:0;font-size:14.5px}
.wh-head .sub{font-size:12px;color:var(--text-muted)}
.wh-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.wh-item{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:11px 13px;transition:border-color .15s}
.wh-item:hover{border-color:var(--border-strong)}
.wh-item .wh-var{font-size:12.5px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.wh-item .wh-var .wh-slug{font-family:var(--mono);font-size:9.5px;font-weight:500;color:var(--blue-dark);background:var(--blue-tint);border:1px solid var(--blue-tint-2);border-radius:4px;padding:1px 6px}
.wh-copyrow{display:flex;align-items:stretch;gap:8px}
.wh-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.wh-hint{text-transform:none;letter-spacing:0;color:var(--text-muted);font-weight:400}
.wh-url{flex:1;font-family:var(--mono);font-size:11.5px;color:var(--blue-dark);word-break:break-all;background:var(--blue-tint);border:1px solid var(--blue-tint-2);border-radius:7px;padding:8px 10px;display:flex;align-items:center}
.wh-copy{border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);border-radius:7px;padding:0 14px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0}
.wh-copy:hover{border-color:var(--blue);color:var(--blue-dark);background:var(--blue-tint)}
.wh-copy.done{border-color:var(--good);color:var(--good);background:var(--good-tint)}
.wh-generic{margin-bottom:14px}
.cfg-note{background:var(--blue-tint);border:1px solid var(--blue-tint-2);border-radius:9px;padding:12px 14px;font-size:12.5px;color:var(--blue-dark);margin-top:14px;line-height:1.5}
/* Três níveis de ação, visualmente distintos — antes tudo era a mesma caixa
   com borda cinza e não dava pra saber o que era a ação principal. */
.btn-primary{border:none;background:var(--accent-solid);color:#fff;font:inherit;font-size:13px;font-weight:600;border-radius:10px;padding:10px 18px;cursor:pointer;margin-top:6px;
  transition:box-shadow .15s,filter .15s}
.btn-primary:hover{filter:brightness(1.12);box-shadow:var(--glow-accent)}
/* Fase 12: "Salvar produto" falhou de verdade (o backend existe desde a fase
   2 — cair aqui não é mais "sem backend ainda"). */
.btn-primary.erro{background:var(--bad)}
.btn-ghost{border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font:inherit;font-size:12.5px;border-radius:9px;padding:8px 14px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.btn-ghost:hover{background:var(--blue-tint);border-color:var(--blue-tint-2);color:var(--blue-dark)}
/* foco visível e consistente em tudo que é interativo */
.btn-primary:focus-visible,.btn-ghost:focus-visible,.pchip:focus-visible,.date-btn:focus-visible,
.nav button:focus-visible,.theme-btn:focus-visible,.logout-btn:focus-visible,.utm-clear:focus-visible,
.ctx-sel:focus-visible,.utm-sel:focus-visible,.field input:focus-visible,
.prod-item:focus-visible,.wh-item:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--blue-tint-2)}

.tooltip{position:fixed;pointer-events:none;background:var(--text-primary);color:var(--surface);font-size:11.5px;padding:7px 10px;border-radius:7px;opacity:0;transition:opacity .1s;z-index:99;font-family:var(--mono);line-height:1.5;max-width:230px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.disclaimer{font-family:var(--mono);font-size:11px;color:var(--text-muted);text-align:center;margin-top:28px;padding-top:18px;border-top:1px solid var(--border)}

/* ===========================================================================
   ESTADOS: carregando, vazio, erro. Aparecem enquanto o banco está vazio
   (antes do webhook popular) ou durante o fetch das APIs.
   =========================================================================== */
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;gap:12px}
.state .state-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--blue-tint);color:var(--blue-dark);font-size:24px}
.state h3{margin:0;font-size:16px;color:var(--text-primary)}
.state p{margin:0;font-size:13px;color:var(--text-secondary);max-width:420px;line-height:1.5}
.state.error .state-ico{background:var(--r-crit-tint);color:var(--bad)}

/* spinner */
.spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}

/* skeleton shimmer para KPIs enquanto carrega */
.skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:6px;color:transparent!important}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text-muted) 12%,transparent),transparent);transform:translateX(-100%);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none}}

/* banner "modo exemplo" quando não há dados reais ainda */
.demo-banner{display:flex;align-items:center;gap:10px;background:var(--blue-tint);border:1px solid var(--blue-tint-2);color:var(--blue-dark);border-radius:10px;padding:11px 15px;margin-bottom:16px;font-size:12.5px}
.demo-banner .db-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0}
.demo-banner b{font-weight:700}

/* ===== Vendas ===== */
.vendas-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
@media(max-width:820px){.vendas-kpis{grid-template-columns:1fr 1fr}}
.vk{border:1px solid var(--border);border-radius:10px;padding:13px 15px;background:var(--surface-2)}
.vk-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.vk-val{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;margin:6px 0 2px;color:var(--text-primary)}
.vk-sub{font-size:11px;color:var(--text-muted)}
.vk-sub b{color:var(--text-secondary);font-weight:700}
/* tile de receita em destaque (dinheiro = verde), com leve glow */
.vk-hero{background:var(--r-hi-tint);border-color:color-mix(in srgb,var(--good) 35%,var(--border))}
.vk-hero .vk-val{color:var(--good)}
.vk-hero .vk-lbl{color:color-mix(in srgb,var(--good) 70%,var(--text-muted))}

.pag-break-wrap{margin-top:16px}
.pag-title{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px}
.pag-break{display:flex;flex-direction:column;gap:7px}
.pag-row{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:12px}
.pag-lbl{font-size:12px;font-weight:600;color:var(--text-secondary)}
.pag-bar{height:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;overflow:hidden}
.pag-fill{height:100%;background:var(--blue);border-radius:5px 0 0 5px}
.pag-val{font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pag-empty{color:var(--text-muted);font-size:12px}
@media(max-width:560px){.pag-row{grid-template-columns:70px 1fr;grid-row-gap:2px}.pag-val{grid-column:2}}

/* Descida na última tela: 4 marcos lado a lado, cada um com barra própria.
   auto-fit + minmax faz cair para 2 colunas no celular sem media query. */
.scr{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:6px}
.scr-item{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.scr-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.scr-val{font-size:26px;font-weight:700;line-height:1.2;margin:2px 0 8px}
.scr-bar{height:6px;border-radius:99px;background:var(--border);overflow:hidden}
.scr-fill{height:100%;border-radius:99px;transition:width .35s ease}
.scr-sub{font-size:12px;color:var(--text-secondary);margin-top:6px}

/* ---- tendência diária ---- */
/* proporção preservada de propósito (sem preserveAspectRatio="none"): aqui há
   texto de eixo, e esticar o viewBox distorceria as letras. */
#tendencia{width:100%;height:250px;display:block;cursor:crosshair;color:var(--text-primary)}
#tendGuia{transition:opacity .12s ease;pointer-events:none}

/* ---- ranking por dimensão UTM ---- */
.rank-tabs{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:4px}
.rank-tabs button{border:none;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--text-secondary);padding:7px 12px;border-radius:7px;cursor:pointer}
.rank-tabs button:hover{color:var(--text-primary)}
.rank-tabs button.on{background:var(--blue);color:var(--on-accent)}
.rank-table{margin-top:8px;overflow-x:auto}
.rank-table table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
.rank-table th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);font-weight:600;padding:0 10px 8px;cursor:pointer;user-select:none;white-space:nowrap}
.rank-table th:hover{color:var(--blue-dark)}
.rank-table th.on{color:var(--blue-dark)}
.rank-table th .car{font-size:9px;margin-left:3px;opacity:.8}
.rank-table td{padding:9px 10px;border-top:1px solid var(--border);vertical-align:middle}
.rank-table tr:hover td{background:var(--surface-2)}
.rank-table td.valor{font-weight:600;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-table td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rank-cell{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.rank-bar-mini{width:64px;height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden;flex-shrink:0}
.rank-bar-mini i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--chart-1),var(--blue))}
.rank-empty{padding:20px 4px;color:var(--text-muted);font-size:12.5px}

/* ---------------------------------------------------------------------------
   CONTAS DE ACESSO (Configurações)
   Reaproveita .field/.btn-primary do formulário de produto; o que é novo aqui
   é a lista e a faixa de mensagem.
   --------------------------------------------------------------------------- */
.us-list{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.us-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;transition:border-color .12s}
.us-item:hover{border-color:var(--border-strong)}
.us-mail{font-family:var(--mono);font-size:12.5px;color:var(--text-primary);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.us-tag{font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:999px;
  background:var(--blue-tint);color:var(--blue-dark);font-weight:700;flex-shrink:0}
.us-quando{font-family:var(--mono);font-size:10.5px;color:var(--text-muted);flex-shrink:0}
.us-del{background:none;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;
  border-radius:8px;padding:3px 9px;font-size:11px;flex-shrink:0;transition:.12s}
.us-del:hover{border-color:var(--bad);color:var(--bad)}
.us-vazio{font-size:13px;color:var(--text-muted);padding:10px 2px}
/* A senha fica em coluna própria e mais estreita: o e-mail é o campo longo. */
.us-nova{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
@media (max-width:640px){.us-nova{grid-template-columns:1fr}}
.us-msg{margin-top:11px;font-size:12.5px;padding:9px 12px;border-radius:9px}
.us-msg.ok{background:var(--r-hi-tint);color:var(--good)}
.us-msg.erro{background:var(--r-crit-tint);color:var(--bad)}
.us-msg.aviso{background:var(--r-mid-tint);color:var(--warn)}

/* Tipografia Underdogz: Barlow Condensed nos títulos. */
h1,h2,h3,.brand,.logo-text{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;text-transform:uppercase;letter-spacing:.05em}