/* GN.IA v11 — "modo ataque" (11/10/2026)
   Redesenho do v9 minimalista: escuro de verdade, 1 cor de marca (volt), números grandes em Archivo
   (largura variável: estreito nos números, largo nos títulos), rótulos pequenos em mono.
   Claro = papel + tinta preta + volt de marca-texto. A classe .ink força o escuro (placar do lucro, PIN, barra do celular).
   As cores por tipo de número continuam (faturamento azul, lucro verde/volt, gasto vermelho, leads roxo…). */

:root {
  color-scheme: light;
  --f-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-num: Archivo, Inter, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --volt: #c6ff3a;
  --volt-ink: #0a0a0a;
  --hl: #c8f53c;
  --bg: #ecece6;
  --surface: #ffffff;
  --surface-2: #f3f3ee;
  --surface-3: #e7e7e0;
  --line: #e0e0d9;
  --line-2: #cbcbc3;
  --text: #0a0a0a;
  --text-2: #484843;
  --text-3: #85857d;
  --accent: #0a0a0a;
  --accent-ink: #0a0a0a;
  --accent-soft: rgba(10, 10, 10, .06);
  --neg: #e11d2e;
  --good-text: #2c7a00;
  --bad-text: #d0141f;
  --warn-bg: #fff3d1;
  --warn-text: #7a4b00;
  --c-fat: #1f5eea;
  --c-lucro: #2c7a00;
  --c-gasto: #e11d2e;
  --c-leads: #6d3bf0;
  --c-vendas: #00877a;
  --c-conv: #a86400;
  --c-ticket: #c2185b;
  --c-meta: #dc520a;
  --btn: #0a0a0a;
  --btn-text: #c6ff3a;
  --on-bar: #ffffff;
  --glow: 0;
  --shadow: 0 18px 50px -12px rgba(10, 10, 10, .22);
  --card-shadow: 0 1px 0 rgba(10, 10, 10, .03);
  --r: 18px;
  --nav-h: 64px;
  --rg-rs: #2a78d6;   /* regiões (05/10): 3 primeiras cores da paleta categórica validada */
  --rg-sc: #eb6834;
  --rg-pr: #1baf7a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rg-rs: #4a94ff;
    --rg-sc: #ff7a3d;
    --rg-pr: #22c98a;
    --bg: #060607;
    --surface: #0f1012;
    --surface-2: #16171a;
    --surface-3: #1e2024;
    --line: #1d1f23;
    --line-2: #2c2f35;
    --text: #f5f6f0;
    --text-2: #a9aba4;
    --text-3: #6d706a;
    --accent: #c6ff3a;
    --accent-ink: #c6ff3a;
    --accent-soft: rgba(198, 255, 58, .11);
    --neg: #ff4d4d;
    --good-text: #c6ff3a;
    --bad-text: #ff6262;
    --warn-bg: #2a2109;
    --warn-text: #ffcc4d;
    --c-fat: #5ca8ff;
    --c-lucro: #c6ff3a;
    --c-gasto: #ff5a5a;
    --c-leads: #a98bff;
    --c-vendas: #33e0c5;
    --c-conv: #ffc94a;
    --c-ticket: #ff6fb7;
    --c-meta: #ff9147;
    --btn: #c6ff3a;
    --btn-text: #0a0a0a;
    --on-bar: #0a0a0a;
    --glow: 1;
    --shadow: 0 24px 60px -10px rgba(0, 0, 0, .7);
    --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  }
}
:root[data-theme="dark"], .ink {
  color-scheme: dark;
  --rg-rs: #4a94ff;
  --rg-sc: #ff7a3d;
  --rg-pr: #22c98a;
  --bg: #060607;
  --surface: #0f1012;
  --surface-2: #16171a;
  --surface-3: #1e2024;
  --line: #1d1f23;
  --line-2: #2c2f35;
  --text: #f5f6f0;
  --text-2: #a9aba4;
  --text-3: #6d706a;
  --accent: #c6ff3a;
  --accent-ink: #c6ff3a;
  --accent-soft: rgba(198, 255, 58, .11);
  --neg: #ff4d4d;
  --good-text: #c6ff3a;
  --bad-text: #ff6262;
  --warn-bg: #2a2109;
  --warn-text: #ffcc4d;
  --c-fat: #5ca8ff;
  --c-lucro: #c6ff3a;
  --c-gasto: #ff5a5a;
  --c-leads: #a98bff;
  --c-vendas: #33e0c5;
  --c-conv: #ffc94a;
  --c-ticket: #ff6fb7;
  --c-meta: #ff9147;
  --btn: #c6ff3a;
  --btn-text: #0a0a0a;
  --on-bar: #0a0a0a;
  --glow: 1;
  --shadow: 0 24px 60px -10px rgba(0, 0, 0, .7);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.ink { color: var(--text); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(720px 420px at -8% -6%, color-mix(in srgb, var(--volt) calc(var(--glow) * 9%), transparent), transparent 72%),
    radial-gradient(640px 380px at 108% -4%, color-mix(in srgb, var(--c-fat) calc(var(--glow) * 10%), transparent), transparent 72%),
    var(--bg);
  background-repeat: no-repeat;
  font: 15px/1.45 var(--f-body);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--volt); color: #0a0a0a; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-ink); text-decoration-color: var(--hl); text-decoration-thickness: 3px; text-underline-offset: 3px; }
:root[data-theme="dark"] a, .ink a { text-decoration-color: color-mix(in srgb, var(--volt) 45%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a { text-decoration-color: color-mix(in srgb, var(--volt) 45%, transparent); } }
[hidden] { display: none !important; }
.num, .v, .big, .hero-val, td.r { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.dim { color: var(--text-2); }
/* cores por tipo de número */
.c-fat { color: var(--c-fat); }
.c-lucro { color: var(--c-lucro); }
.c-gasto { color: var(--c-gasto); }
.c-leads { color: var(--c-leads); }
.c-vendas { color: var(--c-vendas); }
.c-conv { color: var(--c-conv); }
.c-ticket { color: var(--c-ticket); }
.c-meta { color: var(--c-meta); }
.neg-t { color: var(--bad-text); }
.pos-t { color: var(--good-text); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------------- portão (PIN) — sempre escuro ---------------- */
.gate {
  position: fixed; inset: 0; z-index: 100;
  background:
    radial-gradient(520px 380px at 50% 18%, rgba(198, 255, 58, .16), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 32px 32px,
    #060607;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.gate-in { width: 100%; max-width: 300px; text-align: center; }
.gate-logo { display: block; width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 50px rgba(198, 255, 58, .22); }
.gate h1 { font: 900 30px/1 var(--f-num); font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 8px; }
.gate p { margin: 0 0 30px; color: var(--text-3); font: 500 11.5px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; min-height: 18px; }
.gate-dots { display: flex; gap: 10px; justify-content: center; margin-bottom: 34px; }
.gate-dots i { width: 38px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); transition: background .15s, box-shadow .15s; }
.gate-dots i.on { background: var(--volt); box-shadow: 0 0 16px rgba(198, 255, 58, .55); }
.gate-dots.err i { background: var(--neg); box-shadow: 0 0 14px rgba(255, 77, 77, .5); }
.gate-dots.err { animation: shake .4s; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.gate-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gate-keys button {
  height: 64px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035);
  font: 700 26px/1 var(--f-num); color: var(--text); display: grid; place-items: center; transition: background .12s, border-color .12s, transform .08s;
}
.gate-keys button:hover { border-color: rgba(198, 255, 58, .4); }
.gate-keys button:active { background: var(--volt); color: #0a0a0a; transform: scale(.96); }
.gate-keys .blank { visibility: hidden; }
.gate-wait .gate-keys, .gate-wait .gate-dots { visibility: hidden; }

/* ---------------- barra superior ---------------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.top-in { max-width: 1160px; margin: 0 auto; height: 62px; padding: 0 20px; display: flex; align-items: center; gap: 14px; }
.brand { text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 10px; }
.brand span { font: 900 17px/1 var(--f-num); font-stretch: 122%; letter-spacing: .01em; text-transform: uppercase; }
.brand img { width: 32px; height: 32px; border-radius: 9px; display: block; flex: none; box-shadow: 0 0 0 1px var(--line-2); }
.top-title { display: none; font: 900 19px/1 var(--f-num); font-stretch: 120%; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.sync { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); display: flex; align-items: center; gap: 7px; padding: 0 8px; white-space: nowrap; }
.sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--good-text); box-shadow: 0 0 calc(var(--glow) * 10px) var(--good-text); }
.sync.off i { background: var(--neg); box-shadow: 0 0 calc(var(--glow) * 10px) var(--neg); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.icon-btn svg { width: 19px; height: 19px; }

/* navegação: em cima no computador, doca flutuante no celular */
.nav { display: flex; gap: 4px; margin-left: 18px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.nav button {
  border: 0; background: transparent; color: var(--text-2); font-weight: 600; font-size: 13.5px;
  padding: 7px 12px; border-radius: 10px; display: flex; align-items: center; gap: 7px; position: relative; transition: background .12s, color .12s;
}
.nav button svg { width: 17px; height: 17px; }
.nav button:hover { color: var(--text); background: var(--surface-3); }
.nav button.on { color: var(--btn-text); background: var(--btn); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--btn) calc(var(--glow) * 80%), transparent); }
.nav .badge {
  min-width: 18px; height: 18px; border-radius: 9px; background: var(--neg); color: #fff;
  font: 700 10.5px/1 var(--f-mono); display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}

@media (max-width: 759px) {
  .top { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }  /* backdrop-filter aqui prende o position:fixed da doca */
  .top-in { height: 58px; padding: 0 14px; gap: 10px; }
  .brand span { display: none; }
  .brand img { width: 34px; height: 34px; }
  .top-title { display: block; }
  .sync span { display: none; }
  .sync { padding: 0 4px; }
  .nav {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; margin: 0;
    background: rgba(14, 15, 17, .9); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .09); border-radius: 22px; padding: 6px; gap: 2px;
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
    justify-content: space-between;
  }
  .nav button { flex: 1; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 600; padding: 8px 0 7px; border-radius: 16px; color: #8d9089; min-width: 0; }
  .nav button span { font-size: 10.5px; }
  .nav button:hover { background: transparent; color: #f5f6f0; }
  .nav button.on { background: var(--volt); color: #0a0a0a; box-shadow: 0 6px 20px -6px rgba(198, 255, 58, .6); }
  .nav button svg { width: 21px; height: 21px; }
  .nav .badge { position: absolute; top: 3px; left: calc(50% + 5px); }
  body { padding-bottom: calc(var(--nav-h) + 26px + env(safe-area-inset-bottom)); }
}

/* ---------------- página ---------------- */
main { max-width: 1160px; margin: 0 auto; padding: 20px 20px 48px; }
@media (max-width: 759px) { main { padding: 14px 14px 32px; } }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 16px; }
.page-head h1 { font: 900 26px/1.05 var(--f-num); font-stretch: 118%; text-transform: uppercase; letter-spacing: 0; margin: 0; }
@media (max-width: 520px) {
  .page-head h1 { font-size: 21px; font-stretch: 108%; }
  #m-title { min-width: 0 !important; flex: 1; white-space: nowrap; }
  #m-sync { flex-basis: 100%; text-align: center; margin-top: -4px; }
}
.page-head .sub { color: var(--text-3); font: 500 11.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.back { border: 0; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px 6px 2px; font-size: 14px; font-weight: 600; }
.back:hover { color: var(--text); }
.back svg { width: 18px; height: 18px; }

.grid2 { display: grid; gap: 14px; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.stack { display: grid; gap: 14px; }

.card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, var(--text) 1.5%), var(--surface));
  border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-width: 0;
  box-shadow: var(--card-shadow);
}
.card + .card { margin-top: 0; }
.card h2 {
  font: 800 13px/1.25 var(--f-num); font-stretch: 112%; text-transform: uppercase; letter-spacing: .035em;
  margin: 0 0 14px; display: flex; align-items: center; gap: 8px; min-height: 26px;
}
.card h2 small { font: 500 12px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--text-3); font-stretch: 100%; white-space: nowrap; }
@media (max-width: 520px) { .card h2 { font-stretch: 100%; letter-spacing: .02em; } }
@media (max-width: 420px) {
  .card h2 { font-size: 12px; letter-spacing: 0; gap: 7px; }
  .card h2 .btn.sm { padding: 5px 9px; font-size: 12.5px; }
}
.card h2 .end { margin-left: auto; }
.card h2 .btn, .card h2 .seg, .card h2 .link-btn { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.note { font-size: 12.5px; color: var(--text-3); margin-top: 12px; line-height: 1.55; }
.note b { color: var(--text-2); font-weight: 600; }
.empty { color: var(--text-3); font: 500 11.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding: 22px 0; text-align: center; }
.sec-gap { height: 14px; }

/* entrada das telas: os blocos sobem em sequência quando a tela abre */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view:not([hidden]) > * { animation: rise .42s cubic-bezier(.2, .7, .2, 1) both; }
.view:not([hidden]) > :nth-child(2) { animation-delay: .04s; }
.view:not([hidden]) > :nth-child(3) { animation-delay: .08s; }
.view:not([hidden]) > :nth-child(4) { animation-delay: .12s; }
.view:not([hidden]) > :nth-child(5) { animation-delay: .16s; }
.view:not([hidden]) > :nth-child(n+6) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .view:not([hidden]) > * { animation: none; } }

/* controle segmentado */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; padding: 4px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { border: 0; background: transparent; padding: 7px 13px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; transition: background .12s, color .12s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--btn); color: var(--btn-text); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--btn) calc(var(--glow) * 90%), transparent); }
.seg .n { font: 600 11px/1 var(--f-mono); color: var(--text-3); }
.seg .n.hot { color: var(--c-meta); font-weight: 700; }
.seg button.on .n { color: inherit; opacity: .7; }
.seg.sm { border-radius: 11px; padding: 3px; }
.seg.sm button { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }
.seg.sm button.on { background: var(--text); color: var(--bg); box-shadow: none; }
.seg.full { display: flex; }
.seg.full button { flex: 1; justify-content: center; }
#range { padding: 5px; border-radius: 15px; }
#range button { padding: 8px 15px; font-size: 14px; border-radius: 10px; }
@media (max-width: 759px) {
  #range, #rg-range { display: flex; width: 100%; }
  #range button, #rg-range button { flex: 1 0 auto; justify-content: center; padding: 8px 10px; }
}

/* frase do momento (tela Overview) — faixa "ao vivo" */
.mood {
  --m: var(--c-fat);
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px 16px 14px 18px; border-radius: var(--r);
  background: linear-gradient(100deg, color-mix(in srgb, var(--m) 16%, var(--surface)) 0%, var(--surface) 62%);
  border: 1px solid color-mix(in srgb, var(--m) 32%, var(--line));
}
.mood::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--m); box-shadow: 0 0 calc(var(--glow) * 18px) var(--m); }
.mood[data-s="quente"] { --m: var(--c-meta); }
.mood[data-s="batida"] { --m: var(--c-lucro); }
.mood[data-s="frio"] { --m: var(--c-leads); }
.mood[data-s="fds"] { --m: var(--c-vendas); }
.mood-e {
  font-size: 26px; line-height: 1; flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--m) 16%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--m) 28%, transparent);
}
.mood-t { flex: 1; min-width: 0; }
.mood-t > b { display: block; font: 800 18px/1.25 var(--f-num); font-stretch: 100%; letter-spacing: -.01em; }
.mood-s { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.mood-s span { white-space: nowrap; }
.mood-s .c-fat, .mood-s .c-lucro, .mood-s .c-gasto, .mood-s .c-meta { font-weight: 700; }
.mood-live { display: inline-flex; align-items: center; gap: 7px; color: var(--m) !important; font: 700 10.5px/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.mood-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--m); animation: vivo 2s ease-out infinite; }
.mood-live.velho { color: var(--bad-text) !important; }
@keyframes vivo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.mood.novo .mood-t > b, .mood.novo .mood-e { animation: moodIn .5s ease-out; }
@keyframes moodIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mood *, .mood.novo * { animation: none !important; } }
@media (max-width: 759px) {
  .mood { padding: 12px 12px 12px 15px; gap: 12px; align-items: flex-start; }
  .mood-e { width: 42px; height: 42px; font-size: 22px; border-radius: 12px; }
  .mood-t > b { font-size: 16px; }
  .mood-s > span:nth-child(n+4) { display: none; }
}

/* ---------------- placar do lucro (sempre escuro) ---------------- */
.hero {
  --hero-c: var(--volt);
  position: relative; overflow: hidden; isolation: isolate;
  padding: 24px; border-radius: 22px; border-color: #24272c;
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--hero-c) 17%, transparent), transparent 58%),
    linear-gradient(180deg, #121316, #0a0b0c);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--hero-c) 40%, rgba(0, 0, 0, .6)), inset 0 1px 0 rgba(255, 255, 255, .06);
  display: grid; gap: 18px 36px;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent 75%);
}
.hero:has(.hero-val.neg-t) { --hero-c: var(--neg); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); align-items: center; padding: 28px 30px; }
  .hero > .note { grid-column: 1 / -1; }
}
.hero-main, .hero-side { min-width: 0; }
.hero-lbl { color: var(--text-2); font: 700 11.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-lbl .delta { font-family: var(--f-num); letter-spacing: 0; text-transform: none; }
.hero-lbl .trend-l { font: 500 11px/1.3 var(--f-mono); letter-spacing: .04em; text-transform: none; }
.hero-val {
  font: 800 clamp(54px, 15vw, 104px)/.95 var(--f-num); font-stretch: 86%; letter-spacing: -.035em; margin: 10px 0 4px;
  text-shadow: 0 0 44px color-mix(in srgb, currentColor 38%, transparent);
  white-space: nowrap;
}
@media (min-width: 760px) { .hero-val { font-size: clamp(72px, 8vw, 110px); } }
.hero .bar { height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .07); margin-top: 16px !important;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(5% - 3px), transparent calc(5% - 3px) 5%); }
.hero .bar i { border-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-meta) 85%, var(--volt)), var(--volt)); box-shadow: none; }
.hero .bar.ok i { background: var(--volt); }
.hero .bar-lbl { font-size: 13px; margin-top: 9px; }
.hero-cap { font: 700 10.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); margin-bottom: 8px; }
.hero-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--text-2); font-size: 13.5px; }
.hero-sub > span b { font-family: var(--f-num); font-weight: 700; }
/* placar sozinho (tela Mês): uma coluna, brilho azul do faturamento */
.hero.solo { --hero-c: var(--c-fat); display: block; }
.hero.solo .hero-val { font-size: clamp(50px, 13vw, 84px); }
.hero.solo > .hero-sub { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .1); gap: 6px 18px; }
.card:not(.hero) > .hero-val { font-size: clamp(44px, 12vw, 72px); }
.hero > .note { margin-top: -4px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .1); }

/* v11.3: dinheiro caindo no fundo do placar (money-bg.js), em ciclo infinito */
#h-hero { padding-bottom: 30px; }
@media (min-width: 900px) { #h-hero { padding: 34px 32px 38px; min-height: 360px; } }
#h-hero::after { z-index: -2; }
.hero-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.hero-fx.on { opacity: 1; }
.hero-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* sombra atrás do texto: o número e a conta continuam fáceis de ler.
   12/10 (Gustavo: "algumas letras ficaram apagadas por conta das notas"): véu escuro no dinheiro todo + mais forte atrás do número */
.hero-fx::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(95% 42% at 28% 15%, rgba(8, 9, 10, .82), transparent 74%),
    linear-gradient(180deg, rgba(8, 9, 10, .42), rgba(8, 9, 10, .26));
}
@media (min-width: 900px) {
  .hero-fx::after { background: radial-gradient(62% 80% at 25% 38%, rgba(8, 9, 10, .82), transparent 78%), linear-gradient(180deg, rgba(8, 9, 10, .4), rgba(8, 9, 10, .24)); }
}
/* texto solto em cima do dinheiro: cada um numa plaquinha de vidro escuro (antes era só um halo e sumia em cima das notas) */
#h-hero .hero-lbl, #h-hero .hero-cap, #h-hero .eq-roi {
  width: fit-content; max-width: 100%; padding: 6px 11px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(8, 9, 10, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#h-hero .hero-lbl, #h-hero .hero-cap { color: var(--text); }
#h-hero .hero-lbl .trend-l { color: var(--text-2); }
#h-hero .hero-val { text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .85), 0 0 22px rgba(0, 0, 0, .9), 0 0 48px color-mix(in srgb, currentColor 40%, transparent); }
#h-hero > .note { margin-top: 0; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px;
  background: rgba(8, 9, 10, .86); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }

/* barra da meta em neon (cor vem do app.js em --neon: vermelho → laranja → amarelo → verde; bateu = verde neon)
   numa placa escura com borda e brilho da mesma cor + saco de dinheiro neon na ponta */
#h-meta { --neon: #ff1a1a; position: relative; margin-top: 30px; padding: 14px 14px 11px; border-radius: 14px;
  background: rgba(8, 9, 10, .86); border: 1px solid color-mix(in srgb, var(--neon) 60%, transparent);
  box-shadow: 0 0 28px -6px color-mix(in srgb, var(--neon) 75%, transparent), inset 0 0 24px -10px var(--neon);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .8s, box-shadow .8s; }
.meta-trilho { position: relative; padding-right: 64px; }
.meta-trilho .bar { margin-top: 0 !important; }
/* o brilho fica no pai: a máscara dos segmentos cortaria a sombra se ela estivesse na própria barra */
.bar-neon { filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 10px var(--neon)); }
#h-meta .bar { height: 16px; background: color-mix(in srgb, var(--neon) 9%, rgba(255, 255, 255, .05)); }
#h-meta .bar i { position: relative; overflow: hidden; }
/* miolo branco fino de tubo de neon + um brilho que corre pela barra */
#h-meta .bar i::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(255, 255, 255, .5) 50%, transparent 72%); }
#h-meta .bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%);
  transform: translateX(-100%); animation: neon-corre 2.4s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes neon-corre { 55%, 100% { transform: translateX(100%); } }
#h-meta.bateu .bar-neon { filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 14px var(--neon)); }
/* 29/10 (Gustavo: "saco de dinheiro fica tampando a meta"): o texto embaixo da barra para antes do saco e quebra a linha se precisar */
#h-meta .bar-lbl { margin-top: 10px; padding-right: 64px; flex-wrap: wrap; row-gap: 2px; column-gap: 10px; }
/* o saco fica em pé na ponta da barra (a barra termina embaixo dele)
   v11.6 (13/10, Gustavo: "deixe o saco de dinheiro mais bonito… sons ao clicar no saco"): boca franzida, corda dourada
   com laço, medalha R$ e 3 acabamentos (.s-neon pano escuro com dinheiro neon por dentro · .s-moedas saco transparente
   enchendo de moedas · .s-juta saco clássico com as notas saindo pela boca); toque = sacode + moedas voando + som */
.saco { --saco-cor: var(--neon); --q: 0; position: absolute; right: -16px; bottom: -8px; width: 84px; height: 84px;
  cursor: pointer; border-radius: 50%; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.saco:focus-visible { box-shadow: 0 0 0 2px var(--saco-cor); }
.saco svg { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: 50% 92%; transition: transform .25s cubic-bezier(.2, .7, .2, 1);
  filter: drop-shadow(0 0 1.5px var(--saco-cor)) drop-shadow(0 0 7px color-mix(in srgb, var(--saco-cor) 60%, transparent)); }
@media (hover: hover) { .saco:hover svg { transform: translateY(-2px) scale(1.05); } }
.saco:active svg { transform: scale(.94); transition-duration: .08s; }
.saco.sacode svg { animation: saco-sacode .7s cubic-bezier(.3, .7, .3, 1); }
@keyframes saco-sacode {
  0% { transform: none; } 14% { transform: rotate(-13deg) scale(1.1, .92); } 30% { transform: rotate(11deg) scale(.95, 1.07); }
  48% { transform: rotate(-7deg) scale(1.04, .98); } 66% { transform: rotate(4deg); } 84% { transform: rotate(-1.5deg); } 100% { transform: none; }
}
.saco-corpo { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--saco-esc, .78)); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.saco-sobe { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.saco-pano { fill: url(#saco-pano); }
.saco-trama { fill: none; }
.saco-borda { fill: none; stroke: var(--saco-cor); stroke-width: 1.9; stroke-linejoin: round; }
.saco-vinco { fill: none; stroke: #000; stroke-opacity: .45; stroke-width: 1.1; stroke-linecap: round; }
.saco-vinco-l { fill: none; stroke: #fff; stroke-opacity: .14; stroke-width: .7; stroke-linecap: round; }
.saco-dobra-s { fill: none; stroke: #000; stroke-opacity: .32; stroke-width: 1.5; stroke-linecap: round; }
.saco-dobra-l { fill: none; stroke: #fff; stroke-opacity: .12; stroke-width: .7; stroke-linecap: round; }
.saco-reflexo { fill: #fff; fill-opacity: .07; }
.saco-costura { fill: none; stroke: #fff; stroke-opacity: .28; stroke-width: .7; stroke-dasharray: 1.5 1.5; stroke-linecap: round; }
.saco-luz { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 1.7; stroke-linecap: round; }
.saco-luz-p { fill: #fff; fill-opacity: .5; }
.saco-chao { opacity: .9; }
/* corda dourada torcida, laço e as duas pontas com franja */
.saco-corda { fill: url(#saco-ouro); stroke: #6b4300; stroke-width: .5; }
.saco-torcao { fill: none; stroke: #6b4300; stroke-opacity: .75; stroke-width: .6; stroke-linecap: round; }
.saco-corda-luz { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: .5; stroke-linecap: round; }
.saco-ponta-s { fill: none; stroke: #5a3800; stroke-width: 2.3; stroke-linecap: round; }
.saco-ponta { fill: none; stroke: url(#saco-ouro); stroke-width: 1.4; stroke-linecap: round; }
.saco-franja { fill: none; stroke: #ffd34d; stroke-width: .6; stroke-linecap: round; }
.saco-laco, .saco-no { fill: url(#saco-ouro); stroke: #6b4300; stroke-width: .5; stroke-linejoin: round; }
/* medalha R$ */
.saco-selo { fill: url(#saco-ouro); stroke: #5e3b00; stroke-width: .5; }
.saco-selo-i { fill: #0d1712; stroke: #ffe9a3; stroke-opacity: .55; stroke-width: .45; }
.saco-rs { font: 900 9.2px/1 Archivo, sans-serif; fill: url(#saco-ouro); letter-spacing: -.02em; }
.saco-selo-luz { fill: #fff; fill-opacity: .75; }
/* notas e moedas (também as que voam no toque) */
.sn-v { fill: url(#saco-nota-v); stroke: #0b4a26; stroke-width: .4; }
.sn-a { fill: url(#saco-nota-a); stroke: #0f3a75; stroke-width: .4; }
.sn-borda { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: .35; }
.sn-oval { fill: #fff; fill-opacity: .28; stroke: none; }
/* o que tem dentro: cada acabamento liga o seu */
.saco-liquido, .saco-pilha { display: none; }
.saco-espia { transform: translateY(calc((1 - var(--q)) * 17px)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
/* 1. neon: pano escuro, dinheiro neon sobe por dentro (com moedas de leve, pra não virar uma bolha lisa) */
.s-neon .saco-espia { display: none; }
.s-neon .saco-liquido { display: inline; }
.saco-nivel { fill: var(--saco-cor); fill-opacity: .92; }
.saco-nivel2 { fill: var(--saco-cor); fill-opacity: .4; }
.saco-crista { fill: none; stroke: #fff; stroke-opacity: .9; stroke-width: .9; }
.saco-liq-moedas { opacity: .22; mix-blend-mode: multiply; }
.saco-onda { animation: saco-onda 2.6s linear infinite; }
.saco-onda2 { animation: saco-onda 3.8s linear infinite reverse; }
@keyframes saco-onda { from { transform: translateX(0); } to { transform: translateX(32px); } }
.saco-bolhas circle { fill: #fff; fill-opacity: .55; transform-box: fill-box; animation: saco-bolha 2.8s ease-in infinite; }
.saco-bolhas circle:nth-child(2) { animation-delay: .7s; } .saco-bolhas circle:nth-child(3) { animation-delay: 1.3s; }
.saco-bolhas circle:nth-child(4) { animation-delay: 1.9s; } .saco-bolhas circle:nth-child(5) { animation-delay: 2.3s; }
@keyframes saco-bolha { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
/* 2. moedas: saco transparente, a pilha de moedas sobe por dentro */
.s-moedas .saco-pano { fill: #0b0e12; fill-opacity: .62; }
.s-moedas .saco-pilha { display: inline; }
.s-moedas .saco-espia { display: none; }
.s-moedas .saco-reflexo { fill-opacity: .2; }
.s-moedas .saco-dobra-s { stroke-opacity: .18; }
.s-moedas .saco-dobra-l { stroke-opacity: .22; }
.s-moedas .saco-vinco { stroke-opacity: .3; }
/* 3. juta: saco clássico, o dinheiro vai saindo pela boca conforme a meta */
.s-juta .saco-pano { fill: url(#saco-juta); }
.s-juta .saco-trama { fill: url(#saco-trama); }
.s-juta .saco-borda { stroke: #4a2e0a; stroke-width: .9; }
.s-juta .saco-vinco { stroke: #4a2e0a; stroke-opacity: .5; }
.s-juta .saco-vinco-l { stroke-opacity: .3; }
.s-juta .saco-dobra-s { stroke: #4a2e0a; stroke-opacity: .38; }
.s-juta .saco-dobra-l { stroke: #fff3d1; stroke-opacity: .35; }
.s-juta .saco-reflexo { fill: #fff3d1; fill-opacity: .14; }
.s-juta .saco-costura { stroke: #4a2e0a; stroke-opacity: .55; }
.s-juta .saco-luz { stroke: #fff8e6; stroke-opacity: .55; }
.s-juta .saco-selo-i { fill: #123d22; }
.saco.s-juta svg { filter: drop-shadow(0 0 1px var(--saco-cor)) drop-shadow(0 0 5px color-mix(in srgb, var(--saco-cor) 45%, transparent)); }
/* bateu / passou da meta */
.saco.cheio svg { filter: drop-shadow(0 0 2px var(--saco-cor)) drop-shadow(0 0 12px var(--saco-cor)); }
.saco-brilhos > * { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.saco.cheio .saco-brilhos > * { animation: saco-brilha 1.8s ease-in-out infinite; }
.saco.cheio .saco-brilhos .b2 { animation-delay: .6s; }
.saco.cheio .saco-brilhos .b3 { animation-delay: 1.2s; }
@keyframes saco-brilha { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
.saco-pulos > * { opacity: 0; transform-box: fill-box; transform-origin: center; }
.saco.transborda .saco-pulos > * { animation: saco-pula 2s cubic-bezier(.3, .6, .4, 1) infinite; }
.saco.transborda .saco-pulos .p2 { animation-delay: .5s; --dx: 18px; }
.saco.transborda .saco-pulos .p3 { animation-delay: 1s; --dx: -12px; }
.saco.transborda .saco-pulos .p4 { animation-delay: 1.5s; --dx: -20px; }
@keyframes saco-pula {
  0% { opacity: 0; transform: translate(0, 6px) rotate(0) scale(.6); }
  12% { opacity: 1; }
  45% { transform: translate(calc(var(--dx, 12px) * .6), -20px) rotate(140deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 12px), 40px) rotate(300deg) scale(.9); }
}
/* moedas e notas que voam do saco (e do lucro) no toque — o app.js cria e elas somem sozinhas */
.voa { position: absolute; left: 0; top: 0; width: 16px; height: 16px; z-index: 6; pointer-events: none; overflow: visible; will-change: transform, opacity; }
.voa.nota { width: 13px; height: 21px; }
@media (prefers-reduced-motion: reduce) {
  .saco-onda, .saco-onda2, .saco-bolhas circle, .saco.transborda .saco-pulos > *, .saco.cheio .saco-brilhos > *, .saco.sacode svg, #h-meta .bar i::after { animation: none; }
}

/* a conta do lucro numa linha só (faturamento − anúncios − IA − fixos = lucro) */
.eqh { display: flex; width: 100%; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
  background: rgba(8, 9, 10, .86); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.eqh-i { position: relative; flex: 1 1 0; min-width: 0; padding: 10px 5px 11px 7px; text-align: center; }
.eqh-i + .eqh-i { border-left: 1px solid rgba(255, 255, 255, .08); }
.eqh-i[data-op]::before {
  content: attr(data-op); position: absolute; z-index: 1; left: 0; top: 50%; transform: translate(-50%, -50%);
  width: 13px; height: 13px; border-radius: 50%; background: #17181b; border: 1px solid rgba(255, 255, 255, .16);
  font: 800 10px/11px var(--f-num); color: var(--text-2); text-align: center;
}
.eqh-i > span { display: block; font: 700 8.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqh-i > span i { font-style: normal; }
.eqh-i > span .lg { display: none; }
.eqh-i > b { display: block; margin-top: 6px; font: 700 13.5px/1 var(--f-num); font-stretch: 82%; letter-spacing: -.01em; white-space: nowrap; }
.eqh-i.tot { background: rgba(255, 255, 255, .05); border-radius: 0 13px 13px 0; }
.eqh-i.tot > span { color: var(--text); }
.eqh-i.tot > b { font-weight: 800; font-size: 15px; }
@media (min-width: 900px) {
  .eqh-i { padding: 13px 8px 14px; }
  .eqh-i > span { font-size: 9px; letter-spacing: .02em; }
  .eqh-i > b { font-size: 18px; margin-top: 8px; } .eqh-i.tot > b { font-size: 20px; }
}
/* 13/10: com a bolinha da legenda, "Faturamento"/"Custos fixos" só cabem inteiros em tela bem larga */
@media (min-width: 1240px) { .eqh-i > span .sh { display: none; } .eqh-i > span .lg { display: inline; } }
/* v11.6 (13/10, Gustavo: "deixe o lucro interativo"): cada valor da conta abre a explicação; a barra mostra pra onde foi
   cada R$ do faturamento (lucro, anúncios, IA, fixos) e acende junto com o valor tocado; tocar no número grande conta de novo */
.eqh-i { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; transition: background .2s, box-shadow .2s; }
.eqh-i:first-child { border-radius: 13px 0 0 13px; }
.eqh-i[data-k="fat"] { --ic: var(--c-fat); }
.eqh-i[data-k="ads"], .eq-barra [data-k="ads"] { --ic: #ff5a5a; }
.eqh-i[data-k="ia"], .eq-barra [data-k="ia"] { --ic: #ffa04a; }
.eqh-i[data-k="fix"], .eq-barra [data-k="fix"] { --ic: #e0508a; }
.eqh-i[data-k="luc"], .eq-barra [data-k="luc"] { --ic: var(--c-lucro); }
.eqh-i.neg[data-k="luc"] { --ic: var(--neg); }
@media (hover: hover) { .eqh-i:hover { background: rgba(255, 255, 255, .06); } }
.eqh-i:focus-visible { box-shadow: inset 0 0 0 2px var(--ic); }
.eqh-i.sel { background: color-mix(in srgb, var(--ic) 15%, transparent); box-shadow: inset 0 -3px 0 var(--ic); }
.eqh-i:active { background: color-mix(in srgb, var(--ic) 22%, transparent); }
/* bolinha da cor da barra no rótulo (legenda) */
.eqh-i:not([data-k="fat"]) > span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 2px; margin-right: 4px; vertical-align: 1px; background: var(--ic); }
.eq-onde { margin-top: 8px; padding: 10px 12px 11px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
  background: rgba(8, 9, 10, .86); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.eq-barra { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.eq-barra > i { display: block; min-width: 4px; height: 100%; background: var(--ic); cursor: pointer; transition: opacity .25s, filter .25s, flex-grow .6s cubic-bezier(.2, .7, .2, 1); }
.eq-barra > i[data-k="luc"] { background: linear-gradient(90deg, color-mix(in srgb, var(--ic) 70%, #000), var(--ic)); }
.eq-barra.foco > i:not(.sel) { opacity: .22; }
.eq-barra > i.sel { filter: brightness(1.15) drop-shadow(0 0 6px var(--ic)); }
.eq-onde-t { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); min-height: 36px; }
.eq-onde-t b { color: var(--text); font-family: var(--f-num); font-weight: 800; }
.eq-onde-t .dica { color: var(--text-3); white-space: nowrap; }
.eq-onde-t.novo { animation: eq-surge .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes eq-surge { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* o número grande do lucro: toque = conta de novo com som */
#h-val { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation; transform-origin: 0 60%; width: fit-content; max-width: 100%; border-radius: 10px; }
#h-val:focus-visible { box-shadow: 0 0 0 2px currentColor; }
#h-val.pula { animation: lucro-pula .55s cubic-bezier(.2, .8, .3, 1.35); }
@keyframes lucro-pula { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #h-val.pula, .eq-onde-t.novo { animation: none; } }

/* faturamento e projeção do mês, dentro do placar */
.hero-mes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.hm-i { min-width: 0; padding: 12px 13px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
  background: rgba(8, 9, 10, .86); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.hm-i > span { display: block; font: 700 10px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-i > b { display: block; margin-top: 7px; font: 800 25px/1 var(--f-num); font-stretch: 88%; letter-spacing: -.02em; white-space: nowrap; }
.hm-i > small { display: block; margin-top: 5px; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 760px) { .hm-i > b { font-size: 30px; } .hm-i > span { font-size: 10.5px; } }
@media (max-width: 370px) { .hm-i > span { white-space: normal; } .hm-i > b { font-size: 22px; } }
.big { font: 800 32px/1.1 var(--f-num); font-stretch: 90%; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

/* a conta do lucro, linha por linha (faturamento − anúncios − IA − fixos) */
.eq { display: grid; width: 100%; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .025); overflow: hidden; }
.eq-i { display: grid; grid-template-columns: 18px 1fr auto; align-items: baseline; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 13.5px; }
.eq-i:first-child { border-top: 0; }
.eq-i::before { content: attr(data-op); font: 800 16px/1 var(--f-num); color: var(--text-3); }
.eq-i > span { color: var(--text-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-i > b { font: 700 17px/1 var(--f-num); font-stretch: 92%; letter-spacing: -.01em; white-space: nowrap; }
.eq-i.tot { background: rgba(255, 255, 255, .04); border-top: 1px solid rgba(255, 255, 255, .14); }
.eq-i.tot > span { color: var(--text); font-weight: 600; }
.eq-i.tot > b { font-size: 20px; }
.eq-roi { margin-top: 10px; font-size: 13px; color: var(--text-2); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.eq-roi b { font: 800 15px/1 var(--f-num); }
.eq-roi small { color: var(--text-3); font-size: 12px; }

.delta { font: 700 12px/1.2 var(--f-num); padding: 3px 8px; border-radius: 7px; white-space: nowrap; letter-spacing: 0; }
.delta.up { color: var(--good-text); background: color-mix(in srgb, var(--good-text) 14%, transparent); }
.delta.down { color: var(--bad-text); background: color-mix(in srgb, var(--bad-text) 14%, transparent); }
.delta.flat { color: var(--text-3); background: var(--surface-2); }
/* 11/10: com o que a seta compara, escrito (o celular não mostra o title) */
.trend-l { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.kpi-cmp { font: 500 10.5px/1.4 var(--f-mono); color: var(--text-3); margin: 8px 2px 0; text-transform: uppercase; letter-spacing: .06em; }

/* barras de progresso */
.bar { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .7s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 0 calc(var(--glow) * 14px) color-mix(in srgb, var(--accent) 60%, transparent); }
.bar.ok i { background: var(--good-text); }
.bar-lbl { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-2); margin-top: 8px; }
.bar-lbl b { color: var(--text); font-weight: 700; }

/* grade de números (KPIs) */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .stats.s6 { grid-template-columns: repeat(6, 1fr); } .stats.s4 { grid-template-columns: repeat(4, 1fr); } .stats.s3 { grid-template-columns: repeat(3, 1fr); } }
.stat {
  --k: var(--line-2);
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--k) calc(var(--glow) * 7% + 3%), var(--surface)), var(--surface) 70%);
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 12px; min-width: 0; box-shadow: var(--card-shadow);
}
.stat::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--k); box-shadow: 0 0 calc(var(--glow) * 12px) var(--k); }
.stat[data-k="leads"] { --k: var(--c-leads); }
.stat[data-k="vendas"] { --k: var(--c-vendas); }
.stat[data-k="conv"] { --k: var(--c-conv); }
.stat[data-k="ticket"] { --k: var(--c-ticket); }
.stat[data-k="ads"] { --k: var(--c-gasto); }
.stat[data-k="fat"] { --k: var(--c-fat); }
.stat[data-k="res"] { --k: var(--c-lucro); }
.stat .l { font: 600 10.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v { font: 800 28px/1.1 var(--f-num); font-stretch: 90%; letter-spacing: -.025em; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .h { font-size: 12px; color: var(--text-3); margin-top: 6px; display: flex; gap: 6px; align-items: center; min-height: 22px; white-space: nowrap; overflow: hidden; }
.stat .h > span:not(.delta) { overflow: hidden; text-overflow: ellipsis; }
.stat .h .delta { font-size: 11.5px; padding: 2px 7px; }
@media (max-width: 759px) { .stats { gap: 8px; } .stat { padding: 13px 12px 11px; border-radius: 14px; } .stat .v { font-size: 25px; } }
.stat.click { cursor: pointer; transition: border-color .12s, transform .12s; }
.stat.click:hover { border-color: color-mix(in srgb, var(--k) 55%, var(--line)); transform: translateY(-1px); }

/* linhas rótulo → valor */
.rows { display: grid; }
.rows .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rows .row:first-child { border-top: 0; }
.rows .row > span:first-child { color: var(--text-2); min-width: 0; }
.rows .row > b, .rows .row > span.r { font: 700 15px/1.3 var(--f-num); font-stretch: 94%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rows .row small { color: var(--text-3); font-weight: 400; font-family: var(--f-body); font-stretch: 100%; font-size: 12px; }
.rows.tap .row { cursor: pointer; }
.rows.tap .row:hover { background: var(--surface-2); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; }

/* listas editáveis (planilha, recompensas) */
.list { display: grid; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.item:first-child { border-top: 0; }
.item .t { flex: 1; min-width: 0; }
.item .t b { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .t span { font-size: 12.5px; color: var(--text-3); }
.item .val { font: 700 15px/1.2 var(--f-num); font-stretch: 94%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item.tap { cursor: pointer; }
.item.tap:hover .t b { color: var(--accent-ink); }
.add-row { border: 0; background: transparent; color: var(--accent-ink); font-weight: 700; padding: 12px 0 2px; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.add-row svg { width: 16px; height: 16px; }
.group-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; }
.group-h h3 { margin: 0; font: 700 10.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.group-h span { font: 800 15px/1.2 var(--f-num); font-variant-numeric: tabular-nums; }
.owner { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-right: 6px; }

/* botões */
.btn {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text); border-radius: 12px;
  padding: 9px 15px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .08s, opacity .12s;
}
.btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--text) 25%, var(--line-2)); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn svg { width: 16px; height: 16px; }
.btn.primary, .btn.accent { background: var(--btn); border-color: var(--btn); color: var(--btn-text); font-weight: 700; box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--btn) calc(var(--glow) * 90%), transparent); }
.btn.primary:hover, .btn.accent:hover { opacity: .9; background: var(--btn); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { color: var(--bad-text); }
.btn.danger:hover { border-color: color-mix(in srgb, var(--bad-text) 45%, var(--line-2)); }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 10px; }
.btn.sm.primary, .btn.sm.accent { box-shadow: none; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.link-btn { border: 0; background: transparent; color: var(--accent-ink); padding: 0; font-weight: 700; font-size: 13px; text-decoration: underline; text-decoration-color: var(--hl); text-decoration-thickness: 3px; text-underline-offset: 3px; }
:root[data-theme="dark"] .link-btn { text-decoration: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .link-btn { text-decoration: none; } }

/* avisos */
.alerts { display: grid; gap: 8px; margin-bottom: 14px; }
.alerts:empty { display: none; }
.alert { background: var(--warn-bg); color: var(--warn-text); border-radius: 14px; padding: 12px 16px; font-size: 13.5px; font-weight: 500; border: 1px solid color-mix(in srgb, var(--warn-text) 25%, transparent); text-align: left; display: flex; gap: 10px; align-items: center; width: 100%; }
.alert.info { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.alert .go { margin-left: auto; font-weight: 700; white-space: nowrap; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11.5px; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; font-weight: 600; border: 1px solid var(--line); }
.chip.blue { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.chip.good { background: color-mix(in srgb, var(--good-text) 13%, transparent); color: var(--good-text); border-color: color-mix(in srgb, var(--good-text) 25%, transparent); }
.chip.warn { background: var(--warn-bg); color: var(--warn-text); border-color: color-mix(in srgb, var(--warn-text) 22%, transparent); }

/* formulários */
.field { display: grid; gap: 7px; margin-top: 16px; }
.field:first-child { margin-top: 0; }
.field > label, .lbl { font: 700 10.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 12px;
  padding: 11px 13px; font-size: 16px; outline: none; min-width: 0; transition: border-color .12s, box-shadow .12s, background .12s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.hint { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two .field { margin-top: 16px; }
.switch { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; font-weight: 500; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.pickrow { display: flex; flex-wrap: wrap; gap: 6px; }
.pickrow button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 10px; padding: 8px 13px; font-size: 13.5px; font-weight: 600; }
.pickrow button.on { border-color: var(--btn); background: var(--btn); color: var(--btn-text); }
.money { position: relative; }
.money span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; font-weight: 600; }
.money .input { padding-left: 40px; font-family: var(--f-num); font-weight: 700; }

/* folha (formulários) — de baixo no celular, centro no computador */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .2s ease-out; }
@keyframes fade { from { opacity: 0; } }
.sheet-card {
  position: relative; background: var(--surface); width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto;
  border-radius: 24px 24px 0 0; padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: var(--shadow);
  border: 1px solid var(--line); border-bottom: 0;
  animation: up .24s cubic-bezier(.2, .8, .2, 1);
}
.sheet-card::before { content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); }
@keyframes up { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } }
@media (min-width: 760px) { .sheet { align-items: center; } .sheet-card { border-radius: 24px; padding: 26px; border-bottom: 1px solid var(--line); } .sheet-card::before { display: none; } }
.sheet-card h3 { margin: 0; font: 900 21px/1.15 var(--f-num); font-stretch: 108%; letter-spacing: -.005em; }
.sheet-card .sub { color: var(--text-3); font-size: 13px; margin: 5px 0 18px; }
.sheet-act { display: flex; gap: 8px; margin-top: 22px; }
.sheet-act .btn { flex: 1; padding: 12px 14px; }
.sheet-act .btn.danger { flex: 0 0 auto; }

/* conversa */
.drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.drawer-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fade .2s ease-out; }
.drawer-panel {
  position: relative; width: 100%; max-width: 500px; height: 100%; background: var(--bg); display: flex; flex-direction: column;
  box-shadow: var(--shadow); padding-top: env(safe-area-inset-top); border-left: 1px solid var(--line);
  animation: slideIn .24s cubic-bezier(.2, .8, .2, 1);
}
@keyframes slideIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.dh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.dh .t { min-width: 0; flex: 1; }
.dh .t b { display: block; font: 800 16px/1.25 var(--f-num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh .t span { font: 500 11px/1.4 var(--f-mono); color: var(--text-3); letter-spacing: .02em; }
.dchips { padding: 10px 14px 0; }
.chat { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.bub { max-width: 82%; padding: 9px 12px; border-radius: 16px; font-size: 14.5px; line-height: 1.42; white-space: pre-wrap; word-wrap: break-word; }
.bub.h { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bub.a { align-self: flex-end; background: color-mix(in srgb, var(--volt) 15%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--volt) 32%, transparent); border-bottom-right-radius: 5px; }
.bub .tm { display: block; font: 500 10px/1 var(--f-mono); opacity: .6; margin-top: 4px; text-align: right; }
.sys { align-self: center; font-size: 12px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 8px; text-align: center; max-width: 90%; }
.day-sep { align-self: center; font: 600 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin: 10px 0 4px; }
.reply { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); align-items: flex-end; }
.reply textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; scrollbar-width: none; }
.reply textarea::-webkit-scrollbar { display: none; }
.reply .btn { height: 44px; width: 48px; padding: 0; border-radius: 12px; }
.dact { display: flex; gap: 6px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); overflow-x: auto; }
.dact .btn { flex: 1; min-width: max-content; }

/* leads */
.leads-top { display: grid; gap: 10px; margin-bottom: 14px; }
.search { position: relative; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-3); }
.search .input { padding-left: 40px; }
.leads-row { display: flex; gap: 8px; align-items: stretch; }
.leads-row .search { flex: 1; min-width: 0; }
.leads-row .btn { white-space: nowrap; }
.qp-list { display: grid; gap: 10px; }
.qp-list .card.lead { box-shadow: none; }
.lead { cursor: pointer; transition: border-color .12s, transform .12s; }
.lead:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lead-h { display: flex; align-items: baseline; gap: 10px; }
.lead-h b { font: 800 16px/1.25 var(--f-num); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-h span { font: 500 11px/1.3 var(--f-mono); color: var(--text-3); white-space: nowrap; }
.lead-s { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.lead-m { font-size: 13.5px; color: var(--text-2); margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-left: 10px; border-left: 2px solid var(--line-2); }
.lead-m em { font-style: normal; color: var(--text-3); font-size: 12px; margin-right: 4px; }
.lead .chips { margin-top: 10px; }
.lead-a { display: flex; gap: 6px; margin-top: 12px; }
.lead.wait { box-shadow: inset 4px 0 0 var(--accent), var(--card-shadow); }
.leads-list { display: grid; gap: 10px; }
@media (min-width: 900px) { .leads-list { grid-template-columns: 1fr 1fr; } }
.fab {
  position: fixed; right: 16px; bottom: calc(var(--nav-h) + 30px + env(safe-area-inset-bottom)); z-index: 25;
  border: 0; background: var(--btn); color: var(--btn-text); border-radius: 18px; padding: 14px 20px; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow), 0 10px 30px -8px color-mix(in srgb, var(--btn) calc(var(--glow) * 70%), transparent);
}
.fab svg { width: 18px; height: 18px; }
@media (min-width: 760px) { .fab { bottom: 28px; right: 28px; } }

/* menu de ações */
.menu { position: fixed; z-index: 70; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; min-width: 220px; animation: fade .12s ease-out; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; }
.menu button:hover { background: var(--surface-2); }
.menu button.danger { color: var(--bad-text); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }

/* toast */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 30px + env(safe-area-inset-bottom)); z-index: 90;
  background: var(--btn); color: var(--btn-text); padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 700; max-width: calc(100vw - 32px); box-shadow: var(--shadow);
  animation: toastIn .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes toastIn { from { transform: translate(-50%, 12px); opacity: 0; } }
.toast.err { background: var(--neg); color: #fff; }
@media (min-width: 760px) { .toast { bottom: 28px; } }

/* faixa de notificações */
.push {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); z-index: 26;
  max-width: 460px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow);
  padding: 14px 16px; display: flex; gap: 12px; align-items: center; font-size: 13.5px;
}
.push div { flex: 1; }
.push b { display: block; font-weight: 700; }
.push span { color: var(--text-3); font-size: 12.5px; }
@media (min-width: 760px) { .push { bottom: 28px; } }

/* ---------------- gráficos ---------------- */
.tip {
  position: fixed; z-index: 80; pointer-events: none; background: var(--text); color: var(--bg); font-size: 12.5px; font-weight: 600;
  padding: 7px 10px; border-radius: 9px; white-space: nowrap; box-shadow: var(--shadow); transform: translate(-50%, calc(-100% - 10px));
}
.cols { display: flex; align-items: flex-end; gap: 3px; height: 130px; border-bottom: 1px solid var(--line-2); }
.cols > div { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; min-width: 0; }
.cols > div > i { display: block; width: 100%; max-width: 24px; border-radius: 5px 5px 1px 1px; background: var(--accent); }
.cols .bg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 24px; background: var(--surface-2); border-radius: 5px 5px 1px 1px; }
.cols .fg { position: relative; }
#h-hours .fg, #h-week > div > i { background: var(--c-vendas); }
.cols > div.today > i { background: var(--c-meta); box-shadow: 0 0 calc(var(--glow) * 14px) var(--c-meta); }
.axis { display: flex; gap: 3px; font: 500 10.5px/1.3 var(--f-mono); color: var(--text-3); margin-top: 6px; }
.axis span { flex: 1; text-align: center; min-width: 0; white-space: nowrap; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); margin-top: 12px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* resultado por dia: cresce pra cima (positivo) ou pra baixo (negativo) a partir do zero */
.dv { display: flex; gap: 3px; height: 150px; position: relative; }
.dv::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-2); }
.dv > div { flex: 1; position: relative; min-width: 0; }
.dv > div > i { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 20px; }
.dv > div > i.p { bottom: 50%; background: var(--c-lucro); border-radius: 4px 4px 1px 1px; box-shadow: 0 0 calc(var(--glow) * 10px) color-mix(in srgb, var(--c-lucro) 50%, transparent); }
.dv > div > i.n { top: 50%; background: var(--neg); border-radius: 1px 1px 4px 4px; }
.dv > div > i.o { top: calc(50% - 2px); height: 4px !important; width: 4px; border-radius: 50%; background: var(--line-2); }

/* funil: cada etapa com a sua cor, do roxo (lead) ao volt (pagou) */
.funnel { display: grid; gap: 7px; }
.fstep { --fc: var(--c-leads); display: grid; grid-template-columns: 124px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
.fstep:nth-child(2) { --fc: color-mix(in srgb, var(--c-leads) 60%, var(--c-fat)); }
.fstep:nth-child(3) { --fc: color-mix(in srgb, var(--c-leads) 25%, var(--c-fat)); }
.fstep:nth-child(4) { --fc: var(--c-fat); }
.fstep:nth-child(5) { --fc: color-mix(in srgb, var(--c-fat) 40%, var(--c-vendas)); }
.fstep:nth-child(6) { --fc: var(--c-vendas); }
.fstep:nth-child(7) { --fc: var(--c-lucro); }
.fstep .nm { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fstep .tr { height: 26px; position: relative; background: var(--surface-2); border-radius: 7px; }
.fstep .tr i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fc); border-radius: 7px; min-width: 4px; box-shadow: 0 0 calc(var(--glow) * 14px) color-mix(in srgb, var(--fc) 45%, transparent); }
.fstep .tr span { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font: 800 13px/1 var(--f-num); color: var(--on-bar); }
.fstep .tr span.out { color: var(--text); }
.fstep .pc { text-align: right; color: var(--text-3); font: 600 12px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.fstep.loss .pc { color: var(--bad-text); font-weight: 800; }
@media (max-width: 420px) { .fstep { grid-template-columns: 104px 1fr 38px; gap: 8px; } }

/* sparkline */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 38px; margin: 12px 0 6px; }
.spark i { flex: 1; background: var(--surface-3); border-radius: 2px 2px 0 0; min-height: 2px; max-width: 14px; }
.spark i.today { background: var(--accent); }

/* tabelas simples */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: right; font: 700 10px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); padding: 0 0 9px; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td { text-align: right; padding: 9px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tbl td + td { font-family: var(--f-num); font-weight: 600; }
.tbl td + td, .tbl th + th { padding-left: 10px; }
.tbl tr.muted td { color: var(--text-3); }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
@media (max-width: 520px) { .hide-sm { display: none; } }
.show-sm { display: none; }
@media (max-width: 520px) { .show-sm { display: inline; } }

/* dias do mês */
.days { display: grid; }
.day { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }
.day:first-child { border-top: 0; }
.day:hover { background: var(--surface-2); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; }
.day .d b { display: block; font: 900 20px/1 var(--f-num); font-stretch: 90%; }
.day .d span { font: 600 10px/1.6 var(--f-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.day .m { font-size: 13px; color: var(--text-2); min-width: 0; }
.day .m div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day .m small { color: var(--text-3); font-size: 12px; }
.day .r { text-align: right; font: 800 16px/1.2 var(--f-num); font-stretch: 92%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day .r small { display: block; font: 500 11px/1.4 var(--f-body); color: var(--text-3); }
.day.off { opacity: .5; }
.day.today { position: relative; }
.day.today .d b { color: var(--accent-ink); text-shadow: 0 0 calc(var(--glow) * 16px) color-mix(in srgb, var(--accent) 60%, transparent); }
.day.today::before { content: ''; position: absolute; left: -18px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.day.future { cursor: default; opacity: .35; }
.day.future:hover { background: transparent; margin: 0; padding-left: 0; padding-right: 0; }

/* meses do ano */
.months .mo { display: grid; grid-template-columns: 44px 1fr 1fr 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; cursor: pointer; font-variant-numeric: tabular-nums; }
.months .mo:first-child { border-top: 0; }
.months .mo.head { cursor: default; color: var(--text-3); font: 700 10px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; padding-top: 0; }
.months .mo > span { text-align: right; font-family: var(--f-num); font-weight: 600; }
.months .mo.head > span { font-family: var(--f-mono); font-weight: 700; }
.months .mo > span:first-child { text-align: left; font-weight: 800; text-transform: uppercase; font-size: 12.5px; }
.months .mo.on > span:first-child { color: var(--accent-ink); }
.months .mo.none { color: var(--text-3); }
.months .mo:not(.head):hover { background: var(--surface-2); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; }

/* recompensas */
.rw { padding: 14px 0; border-top: 1px solid var(--line); }
.rw:first-child { border-top: 0; }
.rw-h { display: flex; gap: 12px; align-items: center; }
.rw-e { font-size: 22px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.rw-h .t { flex: 1; min-width: 0; }
.rw-h .t b { font-weight: 700; display: block; }
.rw-h .t span { font-size: 12.5px; color: var(--text-3); }
.rw .bar { margin: 10px 0 0 54px; }
.rw .bar-lbl { margin-left: 54px; }
.rw-a { display: flex; gap: 6px; margin: 10px 0 0 54px; flex-wrap: wrap; }
.rw.done { opacity: .55; }
.emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.emojis button { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); }
.emojis button.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }

/* mais */
.menu-list { display: grid; }
.menu-list button { display: flex; align-items: center; gap: 14px; border: 0; background: transparent; padding: 15px 4px; border-top: 1px solid var(--line); text-align: left; width: 100%; border-radius: 0; transition: background .12s; }
.menu-list button:first-child { border-top: 0; }
.menu-list button:hover { background: var(--surface-2); }
.menu-list svg { width: 20px; height: 20px; color: var(--text-2); flex: none; }
.menu-list > button > svg:first-child { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.menu-list .t { flex: 1; }
.menu-list .t b { display: block; font: 800 15px/1.3 var(--f-num); }
.menu-list .t span { font-size: 12.5px; color: var(--text-3); }
.menu-list .chev { width: 16px; height: 16px; color: var(--text-3); }

/* status */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--text-3); }
.dot.ok { background: #2ecc40; box-shadow: 0 0 calc(var(--glow) * 8px) #2ecc40; }
.dot.warn { background: #fab219; box-shadow: 0 0 calc(var(--glow) * 8px) #fab219; }
.dot.bad { background: #ff3b3b; box-shadow: 0 0 calc(var(--glow) * 8px) #ff3b3b; }

/* conteúdos */
.drop { border: 1.5px dashed var(--line-2); border-radius: 16px; padding: 26px; text-align: center; color: var(--text-2); cursor: pointer; font-size: 14px; transition: border-color .12s, background .12s; }
.drop.on, .drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin-top: 8px; }
.lib-it { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; position: relative; background: var(--surface); }
.lib-it .th { aspect-ratio: 1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; }
.lib-it .th img, .lib-it .th video { width: 100%; height: 100%; object-fit: cover; }
.lib-it .in { padding: 8px 10px; font-size: 12.5px; }
.lib-it .in b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-it .in span { color: var(--text-3); font-size: 11.5px; }
.lib-it .del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 1; }
.pick-list { display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; }
.pick-list button { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 8px 10px; }
.pick-list button:hover { border-color: var(--accent); }
.pick-list .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 20px; flex: none; }
.pick-list .ic img { width: 100%; height: 100%; object-fit: cover; }
.pick-list b { display: block; font-weight: 600; font-size: 14px; }
.pick-list small { color: var(--text-3); font-size: 12px; }

/* simulador */
.slider { padding: 12px 0; border-top: 1px solid var(--line); }
.slider:first-child { border-top: 0; }
.slider .sh { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); }
.slider .sh b { color: var(--text); font: 800 15px/1.2 var(--f-num); font-variant-numeric: tabular-nums; }
.slider input { width: 100%; accent-color: var(--accent); margin: 10px 0 0; }

.skel { display: inline-block; color: transparent !important; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; border-radius: 8px; animation: shimmer 1.3s linear infinite; text-shadow: none !important; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pulse { 50% { opacity: .5; } }

/* tela Mês: no celular os dias vêm logo depois da meta */
@media (max-width: 899px) {
  .mes-grid { display: flex; flex-direction: column; }
  .mes-grid > .stack { display: contents; }
}

/* v9.3 — cartão "Quando vende": conclusão em cima + linhas (faixa · barra · % e "x de y") */
.qv-top { display: grid; gap: 7px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.qv-top b { color: var(--text); font-weight: 700; }
.qv { display: grid; gap: 2px; margin-top: 8px; }
.qv-row { display: grid; grid-template-columns: minmax(96px, 150px) 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.qv-row .qv-n { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qv-row .qv-n small, .qv-row .qv-v small { color: var(--text-3); font-family: var(--f-body); font-weight: 400; }
.qv-row .qv-bar { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.qv-row .qv-bar i { display: block; height: 100%; background: var(--c-conv, var(--accent)); border-radius: 5px; box-shadow: 0 0 calc(var(--glow) * 10px) color-mix(in srgb, var(--c-conv) 50%, transparent); }
.qv-row .qv-v { text-align: right; white-space: nowrap; font: 700 14px/1.2 var(--f-num); font-variant-numeric: tabular-nums; min-width: 92px; }
.qv-row.best .qv-n { color: var(--text); font-weight: 700; }
.qv-row.best .qv-bar i { background: var(--c-meta); box-shadow: 0 0 calc(var(--glow) * 14px) var(--c-meta); }
.qv-row.best .qv-n::after { content: ' 🔥'; }
.qv-row.pouco { opacity: .45; }
@media (max-width: 420px) { .qv-row { grid-template-columns: 104px 1fr auto; gap: 8px; } .qv-row .qv-v { min-width: 80px; } }

/* v9.4 — custos fixos (folha de edição) */
.cf-row { display: grid; grid-template-columns: 1fr 112px auto auto; gap: 8px; align-items: center; margin-top: 10px; }
.cf-w { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.cf-w input { accent-color: var(--accent); }
@media (max-width: 420px) { .cf-row { grid-template-columns: 1fr 96px auto auto; gap: 6px; } }
/* v9.4 — conferência da venda (o que o lead escreveu depois da chave) */
.vd-conf { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); display: grid; gap: 6px; }
.vd-conf .chips { margin: 0; }
.vd-msg { font-size: 13px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.vd-msg small { color: var(--text-3); font: 500 10.5px/1 var(--f-mono); font-variant-numeric: tabular-nums; margin-right: 4px; }
/* v9.4 — simulador do mês */
.sim-h { font: 900 15px/1.2 var(--f-num); font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em; margin: 4px 2px 12px; }
.sim-h small { font: 500 12.5px/1.2 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--text-3); margin-left: 6px; }
.stats.sm-stats { grid-template-columns: repeat(2, 1fr); }
.stats.sm-stats .stat .h { white-space: normal; }

/* v9.5 — comprovantes (foto/PDF do PIX) */
.cp-linha { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-width: 0; }
.cp-linha .hint { margin: 0; }
.cp-img { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface-2); padding: 0; display: grid; place-items: center; cursor: zoom-in; font-size: 20px; line-height: 1; }
.cp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-img.cp-pdf { grid-auto-flow: row; gap: 2px; }
.cp-img.cp-pdf small { font-size: 10px; color: var(--text-3); font-weight: 700; }
.cp-bub { display: flex; align-items: center; gap: 10px; }
.cp-box { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.cp-box-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.cp-box-in { position: relative; display: grid; gap: 10px; justify-items: center; max-width: min(560px, 100%); width: 100%; }
.cp-box-in img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 14px; background: #fff; }
.cp-box-in iframe { width: 100%; height: calc(100vh - 110px); border: 0; border-radius: 14px; background: #fff; }

/* v9.6 — tirar do PIX pendente (lead que recebeu a chave e não pagou) */
.pr-wrap { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 4px; }
.pr-wrap > .btn { justify-self: start; }
.pr-row { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pr-row > div { flex: 1; min-width: 0; }
.pr-row b { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-row small { display: block; font-size: 12.5px; color: var(--text-3); }
.pr-row .btn { flex: none; }

/* ---------------- v9.9 (03/10): botão ⟳ atualizar + cartão "Contas do mês" no Overview ---------------- */
.icon-btn.girando svg { animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon-btn.girando svg { animation-duration: 2.4s; } }
.ct-top { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; font-size: 13.5px; }
.ct-top .big { margin-right: 4px; }
.tbl.ct td:last-child, .tbl.ct th:last-child { font-weight: 800; }
.tbl.ct tr.hl td { font-size: 15.5px; font-weight: 800; background: color-mix(in srgb, var(--c-meta) 10%, transparent); }
.tbl.ct tr.hl td:first-child { padding-left: 10px; border-radius: 10px 0 0 10px; font-family: var(--f-body); }
.tbl.ct tr.hl td:last-child { padding-right: 10px; border-radius: 0 10px 10px 0; }
.tbl.ct tr.hl + tr td { border-top-color: transparent; }
@media (max-width: 420px) {
  .tbl.ct { font-size: 12.5px; }
  .tbl.ct tr.hl td { font-size: 13.5px; }
  .tbl.ct td + td, .tbl.ct th + th { padding-left: 6px; }
}

/* ================= Regiões (v10, 05/10) ================= */
.uf { display: inline-flex; align-items: center; gap: 5px; font: 800 10.5px/1.5 var(--f-mono); letter-spacing: .04em; padding: 1px 7px 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); vertical-align: 1px; white-space: nowrap; }
.uf::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--uf-c, var(--text-3)); box-shadow: 0 0 calc(var(--glow) * 8px) var(--uf-c, transparent); }
.uf-rs { --uf-c: var(--rg-rs); } .uf-sc { --uf-c: var(--rg-sc); } .uf-pr { --uf-c: var(--rg-pr); }
/* 19/10: cartão Cidades com todas as cidades (filtro por estado + ver todas) */
.cid-uf { display: flex; margin: 0 0 10px; }
.cid-mais { margin-top: 12px; text-align: center; }
.tbl td .uf { margin-left: 4px; }
i.rg-rs, .rg-dot.rg-rs { background: var(--rg-rs); } i.rg-sc, .rg-dot.rg-sc { background: var(--rg-sc); } i.rg-pr, .rg-dot.rg-pr { background: var(--rg-pr); }
.rg-bars { display: grid; gap: 10px; }
.rg-bar { display: grid; grid-template-columns: 74px 1fr minmax(0, auto); gap: 10px; align-items: center; font-size: 13px; }
.rg-bar .nm { white-space: nowrap; font-weight: 600; }
.rg-bar .tr { height: 26px; position: relative; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.rg-bar .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; }
.rg-bar .vl { text-align: right; font: 800 15px/1.2 var(--f-num); font-variant-numeric: tabular-nums; min-width: 96px; }
.rg-bar .vl small { display: block; font: 400 11.5px/1.3 var(--f-body); color: var(--text-3); }
.rg-cards { display: grid; gap: 14px; }
@media (min-width: 760px) { .rg-cards { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.rg-card.off { opacity: .8; }
.rg-card { position: relative; overflow: hidden; }
.rg-card::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--rg-c, transparent); box-shadow: 0 0 calc(var(--glow) * 14px) var(--rg-c, transparent); }
.rg-card:has(.rg-dot.rg-rs) { --rg-c: var(--rg-rs); }
.rg-card:has(.rg-dot.rg-sc) { --rg-c: var(--rg-sc); }
.rg-card:has(.rg-dot.rg-pr) { --rg-c: var(--rg-pr); }
/* 11/10: no celular a linha do faturamento (valor + LTV + diferença) passava da tela e cortava as outras */
.rg-card .rows { grid-template-columns: minmax(0, 1fr); }
.rg-card .rows .row > b { white-space: normal; }
.rg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rg-head b { font: 900 16px/1.2 var(--f-num); font-stretch: 110%; text-transform: uppercase; }
.rg-head .chip { margin-left: auto; }
.rg-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rg-big { font: 800 34px/1.05 var(--f-num); font-stretch: 88%; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.rg-big-l { font: 600 10.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 4px 0 10px; }
.tbl-wrap { overflow-x: auto; margin: 0 -2px; }
.rg-tbl td, .rg-tbl th { white-space: nowrap; }
.rg-fun td small { display: block; font-size: 11px; font-weight: 400; color: var(--text-3); }
#rg-leads .rg-sub { display: block; margin-top: 2px; }
@media (max-width: 520px) { .rg-tbl { font-size: 12.5px; } .rg-tbl td + td, .rg-tbl th + th { padding-left: 8px; } .rg-tbl td:first-child, .rg-tbl th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; padding-right: 4px; } }
.tbl tr.tot td { border-top: 2px solid var(--line-2); font-weight: 800; }
.rg-cols { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 6px; }
.rg-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; min-width: 0; cursor: default; }
.rg-col .stk { flex: 1; width: 100%; max-width: 30px; display: flex; flex-direction: column-reverse; gap: 2px; justify-content: flex-start; }
.rg-col .stk i { display: block; width: 100%; min-height: 2px; border-radius: 1px; }
.rg-col .stk i:last-child { border-radius: 5px 5px 1px 1px; }
.rg-col > span { font: 500 10px/1.3 var(--f-mono); color: var(--text-3); height: 13px; }
.rg-col.today > span { color: var(--accent-ink); font-weight: 800; }
.rg-col:hover .stk { opacity: .8; }
.rg-leg { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--text-2); }
.rg-leg span { display: inline-flex; align-items: center; gap: 6px; }
.rg-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* 07/10 — lançar dia: total do dia (vendas + LTV) e os LTV lançados no dia */
.dia-tot { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px; margin-top: 12px; gap: 2px 12px; }
.ltv-dia { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.ltv-dia .lbl { color: var(--text-3); }
.ltv-dia #dia-ltv-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ltv-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 2px 2px 2px 8px; }
.ltv-chip .icon-btn { width: 24px; height: 24px; font-size: 15px; border-radius: 6px; }

/* ---------------- 12/10: WhatsApps ao vivo (botão no topo; 23/10: o cartão do Overview saiu → "N ativos" no card 📡) ---------------- */
.wa-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font: 700 11.5px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.wa-pill[hidden] { display: none; }
.wa-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--good-text); box-shadow: 0 0 calc(var(--glow) * 10px) var(--good-text); flex: none; }
.wa-pill:hover { color: var(--text); border-color: var(--line-2); }
.wa-pill.warn { color: var(--warn-text); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-text) 30%, transparent); }
.wa-pill.warn i { background: var(--warn-text); box-shadow: none; }
.wa-pill.bad { color: #fff; background: var(--neg); border-color: var(--neg); animation: waPulsa 1.6s ease-in-out infinite; }
.wa-pill.bad i { background: #fff; box-shadow: none; }
@keyframes waPulsa { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--neg) 28%, transparent); } }
@media (prefers-reduced-motion: reduce) { .wa-pill.bad { animation: none; } }
@media (max-width: 759px) { .wa-pill { height: 30px; padding: 0 9px; font-size: 11px; } .wa-pill-x { display: none; } }

.wa-d { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); display: inline-block; flex: none; }
.wa-d.on { background: var(--good-text); box-shadow: 0 0 calc(var(--glow) * 8px) var(--good-text); }
.wa-d.off { background: var(--neg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 25%, transparent); }
.wa-d.api, .wa-d.velho { background: var(--warn-text); }
.wa-d.sem { background: transparent; border: 1.5px dashed var(--text-3); }

/* 15/10 (Gustavo: "está muito lento"): desfoque (blur) em cima do dinheiro animado = o navegador refaz o blur
   de cada plaquinha a cada quadro (pesado no celular). Sem blur e um pouco mais escuras (.84–.86 → .9): mesma leitura */
#h-hero .hero-lbl, #h-hero .hero-cap, #h-hero .eq-roi, #h-hero > .note, #h-hero #h-meta, #h-hero .eqh, #h-hero .eq-onde, #h-hero .hm-i {
  -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(8, 9, 10, .9);
}

.wa-d.manual { background: var(--text-3); box-shadow: none; }

/* 16/10 (Gustavo: "quero que o site não vire para o lado quando o celular estiver na horizontal"): o iPhone não deixa
   site nem app da tela de início travar a rotação (ignora o "portrait" do manifest) → celular deitado = tela pedindo
   pra virar. Só celular (toque, sem mouse, tela baixa): PC e tablet seguem normais; teclado aberto no Android não conta. */
.deitado { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 540px) and (hover: none) and (pointer: coarse) {
  html, body { overflow: hidden; }
  .deitado {
    display: flex; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center;
    padding: 24px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left));
    background: radial-gradient(420px 300px at 50% 30%, rgba(198, 255, 58, .14), transparent 70%), #060607;
    color: #f2f2ee; text-align: center;
  }
  .deitado-in { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .deitado-cel { color: #c6ff3a; margin-bottom: 8px; animation: deitado-gira 1.8s cubic-bezier(.5, 0, .2, 1) infinite; }
  .deitado b { font: 900 24px/1.1 var(--f-num); font-stretch: 118%; text-transform: uppercase; letter-spacing: .01em; }
  .deitado span { font: 500 11.5px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: rgba(242, 242, 238, .55); }
}
@keyframes deitado-gira { 0%, 20% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .deitado-cel { animation: none; } }

/* ===== 23/10: plataformas (WhatsApp × Telegram) — card do Overview + filtros e etiqueta da aba Leads ===== */
:root { --pl-wa: #1a9e4f; --pl-tg: #1f8fd0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pl-wa: #2fd26b; --pl-tg: #3db2f0; } }
:root[data-theme="dark"], .ink { --pl-wa: #2fd26b; --pl-tg: #3db2f0; }
.pl-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pl-c, var(--text-3)); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 calc(var(--glow) * 8px) var(--pl-c, transparent); }
.pl-dot.wa { --pl-c: var(--pl-wa); }
.pl-dot.tg { --pl-c: var(--pl-tg); }
.seg button .pl-dot { margin-right: 0; }
.pl { display: inline-flex; align-items: center; font: 700 10.5px/1.5 var(--f-mono); letter-spacing: .02em; padding: 1px 7px 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; vertical-align: 1px; margin-left: 2px; }
.pl .pl-dot { width: 7px; height: 7px; margin-right: 5px; }
.pl-tg { border-color: color-mix(in srgb, var(--pl-tg) 40%, var(--line)); }

.leads-f2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.leads-f2 .select { width: auto; max-width: 100%; padding: 6px 10px; font-size: 13px; border-radius: 11px; font-weight: 600; color: var(--text-2); }
@media (max-width: 759px) { .leads-f2 .select { flex: 1 1 100%; font-size: 16px; } }

#h-plat { scroll-margin-top: 84px; }   /* 23/10: a bolinha do topo rola até aqui (o topo fixo não cobre o título) */
#h-plat .pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pl-box { --pl-c: var(--pl-wa); position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pl-c) calc(var(--glow) * 7% + 4%), var(--surface)), var(--surface) 75%);
  border: 1px solid var(--line); border-radius: 16px; padding: 14px; min-width: 0; transition: border-color .12s; }
.pl-box.tg { --pl-c: var(--pl-tg); }
.pl-box::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--pl-c); box-shadow: 0 0 calc(var(--glow) * 12px) var(--pl-c); }
.pl-box:hover { border-color: color-mix(in srgb, var(--pl-c) 55%, var(--line)); }
.pl-box:focus-visible { outline: 2px solid var(--pl-c); outline-offset: 2px; }
.pl-box > span { display: block; min-width: 0; }
.pl-h { display: flex !important; align-items: center; gap: 0; min-width: 0; }
.pl-h b { font: 800 15px/1.2 var(--f-num); }
.pl-h small { margin-left: auto; padding-left: 8px; font: 500 10.5px/1.3 var(--f-mono); color: var(--text-3); white-space: nowrap; }
.pl-ativos { display: flex !important; flex-wrap: wrap; align-items: center; gap: 3px 0; margin-top: -2px; font-size: 12.5px; color: var(--text-2); }
.pl-ativos .wa-d { width: 8px; height: 8px; margin-right: 7px; }
.pl-ativos b { font: 800 15px/1 var(--f-num); color: var(--good-text); margin-right: 4px; font-variant-numeric: tabular-nums; }
.pl-ativos b.z { color: var(--bad-text); }
.pl-ativos small { flex-basis: 100%; padding-left: 15px; font: 500 10.5px/1.35 var(--f-mono); color: var(--text-3); }
.pl-ativos small span { white-space: nowrap; }
/* 29/10: cada WhatsApp da Luci numa linha — verde operando, vermelho fora */
.pl-ativos .pl-nums { display: grid; gap: 3px; padding: 5px 0 0 1px; }
.pl-nums span { display: flex; align-items: center; font: 700 11px/1.3 var(--f-mono); }
.pl-nums .on { color: var(--good-text); }
.pl-nums .off { color: var(--bad-text); }
.pl-ativos .pl-nums .wa-d { width: 7px; height: 7px; margin-right: 7px; }
.pl-tbl .pl-st { width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; }
.pl-kpis { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-kpis > span { display: block; min-width: 0; }
.pl-v { display: block; font: 800 30px/1.05 var(--f-num); font-stretch: 90%; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-l { display: block; font: 600 10px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-top: 3px; }
.pl-l em { font-style: normal; text-transform: none; letter-spacing: 0; }
.pl-rows { display: grid !important; gap: 0; border-top: 1px solid var(--line); }
.pl-rows > span { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.pl-rows > span:last-child { border-bottom: 0; }
.pl-rows b { font: 700 13.5px/1.2 var(--f-num); color: var(--text); font-variant-numeric: tabular-nums; }
.pl-rows b.c-vendas { color: var(--c-vendas); }
.pl-ufs { font-size: 12.5px; color: var(--text-2); display: flex !important; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pl-ufs > span { white-space: nowrap; }
.pl-ufs b { font-family: var(--f-num); }
.pl-share { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface-2); margin-top: 14px; gap: 2px; }
.pl-share i { display: block; height: 100%; min-width: 3px; background: var(--pl-wa); }
.pl-share i.tg { background: var(--pl-tg); }
.pl-share-l { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.pl-share-l b { font-family: var(--f-num); color: var(--text); }
.pl-share-l span { color: var(--text-3); }
.pl-lbl { margin: 18px 0 6px; }
.pl-tbl tbody tr { cursor: pointer; }
.pl-tbl td:first-child { white-space: nowrap; }
.pl-tbl td small { color: var(--text-3); font: 500 11px/1 var(--f-mono); margin-left: 3px; }
@media (max-width: 520px) {
  #h-plat .pl-grid { gap: 8px; }
  .pl-box { padding: 12px 11px; gap: 9px; border-radius: 14px; }
  .pl-h small { display: none; }
  .pl-kpis { grid-template-columns: 1fr; gap: 6px; }
  .pl-v { font-size: 26px; }
  .pl-rows > span { font-size: 12.5px; }
}