/* ============================================================
   JARVIS — design system
   Fundo #0A0A0A · cards grafite azulado · texto #EAEAEA
   Ciano aquisição · azul/violeta progressão · magenta follow-up
   Laranja #FF5A1F fechamento e faturamento · verde só positivo
   Tipografia Manrope (Inter como alternativa). Sem fonte mono.
   ============================================================ */

:root{
  /* superfícies */
  --bg:#0A0A0A;
  --bg-soft:radial-gradient(1100px 620px at 20% -10%, rgba(34,211,238,.055) 0%, transparent 62%),
            radial-gradient(900px 540px at 88% -4%, rgba(139,92,246,.05) 0%, transparent 60%),
            radial-gradient(760px 520px at 60% 108%, rgba(255,90,31,.035) 0%, transparent 62%);
  --card:#0E1116;
  --card-2:#121722;
  --card-3:#171E2A;
  --card-hi:#1B2432;

  /* linhas finas */
  --line:rgba(234,234,234,.07);
  --line-2:rgba(234,234,234,.12);
  --line-3:rgba(234,234,234,.18);

  /* texto */
  --text:#EAEAEA;
  --text-2:#9AA6B5;
  --text-3:#6B7787;
  --text-4:#49535F;

  /* cor por significado */
  --cyan:#22D3EE;      --cyan-d:rgba(34,211,238,.12);  --cyan-l:rgba(34,211,238,.30);
  --sky:#38BDF8;
  --blue:#3B82F6;      --blue-d:rgba(59,130,246,.12);
  --indigo:#6366F1;
  --violet:#8B5CF6;    --violet-d:rgba(139,92,246,.12);
  --magenta:#D946EF;   --magenta-d:rgba(217,70,239,.12);
  --orange:#FF5A1F;    --orange-d:rgba(255,90,31,.11); --orange-l:rgba(255,90,31,.32);
  --green:#22C55E;     --green-d:rgba(34,197,94,.11);
  --red:#EF4444;       --red-d:rgba(239,68,68,.11);
  --amber:#F59E0B;     --amber-d:rgba(245,158,11,.11);

  /* espaço e raio */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:44px;
  --r-sm:10px; --r:12px; --r-lg:16px;

  --f:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --sidebar:236px;
  --sidebar-min:66px;
  --topbar:64px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--f);background:var(--bg);background-image:var(--bg-soft);
  background-attachment:fixed;color:var(--text);
  font-size:14px;line-height:1.5;font-weight:500;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
/* o drawer fechado vive fora da tela; sem isto ele estica a largura do documento */
.drawer{visibility:hidden}
.drawer.on{visibility:visible}
.funnel-wrap,.health-wrap{max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:rgba(34,211,238,.28)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(234,234,234,.10);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(234,234,234,.20);background-clip:padding-box}

/* ── tipografia ─────────────────────────────────────────── */
.metric{font-weight:800;letter-spacing:-.028em;line-height:1.04}
.h1{font-size:20px;font-weight:700;letter-spacing:-.02em}
.h2{font-size:15px;font-weight:700;letter-spacing:-.012em}
.h3{font-size:13.5px;font-weight:600;letter-spacing:-.008em}
.lbl{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.aux{font-size:12px;font-weight:400;color:var(--text-3)}

/* ============================================================
   LAYOUT
   ============================================================ */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar);flex-shrink:0;position:fixed;inset:0 auto 0 0;z-index:60;
  background:linear-gradient(180deg,#0C0F14 0%,#0A0A0A 100%);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:width .22s var(--ease);
}
.sidebar.min{width:var(--sidebar-min)}
.brand{height:var(--topbar);display:flex;align-items:center;gap:11px;padding:0 var(--s5);border-bottom:1px solid var(--line);flex-shrink:0}
.brand-mark{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--orange) 0%,#C23A0E 100%);
  font-weight:800;font-size:15px;color:#fff;letter-spacing:-.04em;
  box-shadow:0 0 0 1px rgba(255,90,31,.22),0 6px 18px -9px rgba(255,90,31,.7);
}
.brand-txt{min-width:0;overflow:hidden}
.brand-name{font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.brand-sub{font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-4);white-space:nowrap}
.sidebar.min .brand-txt{display:none}
.sidebar.min .brand{padding:0 18px}

.nav{flex:1;overflow-y:auto;padding:var(--s4) 0 var(--s6)}
.nav-group{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);padding:var(--s4) var(--s5) var(--s2);white-space:nowrap}
.sidebar.min .nav-group{opacity:0;height:14px;padding:6px 0 0}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:9px var(--s5);
  color:var(--text-3);font-size:13.5px;font-weight:500;position:relative;white-space:nowrap;
  transition:color .15s,background .15s;
}
.nav-item svg{width:16px;height:16px;flex-shrink:0;stroke-width:1.7}
.nav-item:hover{color:var(--text-2);background:rgba(234,234,234,.025)}
.nav-item.on{color:var(--text);background:linear-gradient(90deg,var(--orange-d) 0%,transparent 78%)}
.nav-item.on::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:0 2px 2px 0;background:var(--orange)}
.nav-item.on svg{color:var(--orange)}
.nav-label{overflow:hidden;text-overflow:ellipsis}
.sidebar.min .nav-label,.sidebar.min .nav-badge{display:none}
.nav-badge{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--text-4)}
.nav-badge.alert{color:var(--red)}
.nav-foot{padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.collapse-btn{display:flex;align-items:center;gap:11px;width:100%;padding:7px 8px;border-radius:var(--r-sm);color:var(--text-4);font-size:12.5px;font-weight:500;transition:.15s}
.collapse-btn:hover{color:var(--text-2);background:rgba(234,234,234,.03)}
.collapse-btn svg{width:15px;height:15px;flex-shrink:0;transition:transform .22s var(--ease)}
.sidebar.min .collapse-btn span{display:none}
.sidebar.min .collapse-btn svg{transform:rotate(180deg)}

.main{flex:1;min-width:0;margin-left:var(--sidebar);transition:margin-left .22s var(--ease)}
.shell.min .main{margin-left:var(--sidebar-min)}

/* ── topbar ─────────────────────────────────────────────── */
.topbar{
  height:var(--topbar);position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:var(--s4);padding:0 var(--s6);
  background:rgba(10,10,10,.84);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--line);
}
.tb-client{display:flex;align-items:center;gap:11px;min-width:0}
.tb-client .select{font-size:14px;font-weight:700;max-width:240px}
.tb-logo{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:var(--card-3);border:1px solid var(--line-2);font-weight:700;font-size:12.5px;color:var(--text-2);
}
.tb-name{font-size:16px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-meta{font-size:11px;font-weight:500;color:var(--text-4);white-space:nowrap}
.tb-sp{flex:1}
.tb-right{display:flex;align-items:center;gap:var(--s2)}

.select-wrap{position:relative}
.select{
  appearance:none;background:var(--card-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:7px 30px 7px 12px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;
  transition:border-color .15s,background .15s;max-width:210px;
}
.select:hover{border-color:var(--line-3);background:var(--card-3)}
.select:focus{outline:none;border-color:var(--cyan-l)}
.select-wrap::after{content:'';position:absolute;right:11px;top:50%;width:5px;height:5px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* integrações ativas */
.integr{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--line-2);background:var(--card-2);font-size:12px;font-weight:600;color:var(--text-2);
  white-space:nowrap;transition:.16s;
}
.integr:hover{border-color:var(--line-3);color:var(--text)}
.integr .beat{width:7px;height:7px;border-radius:99px;background:var(--green);position:relative;flex-shrink:0}
.integr .beat::after{content:'';position:absolute;inset:-4px;border-radius:99px;background:var(--green);opacity:.28;animation:beat 2.6s var(--ease) infinite}
.integr.warn .beat{background:var(--amber)} .integr.warn .beat::after{background:var(--amber)}
.integr.bad .beat{background:var(--red)}    .integr.bad .beat::after{background:var(--red)}
@keyframes beat{0%,100%{transform:scale(.75);opacity:.30}50%{transform:scale(1.5);opacity:0}}

.icon-btn{
  width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--card-2);color:var(--text-2);transition:.16s;position:relative;
}
.icon-btn:hover{color:var(--text);border-color:var(--line-3);background:var(--card-3)}
.icon-btn svg{width:16px;height:16px;stroke-width:1.8}
.icon-btn.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn .badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
.menu-btn{display:none}
.sync-txt{font-size:11.5px;font-weight:500;color:var(--text-4);white-space:nowrap}

/* ── barra de período ───────────────────────────────────── */
.periodbar{display:flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s6) 0;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:2px;overflow-x:auto;max-width:100%}
.seg button{padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text-3);white-space:nowrap;transition:.15s}
.seg button:hover{color:var(--text-2)}
.seg button.on{background:var(--card-hi);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.range-inputs{display:none;align-items:center;gap:6px}
.range-inputs.on{display:flex}
.range-inputs input{background:var(--card-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px 10px;font-size:12.5px;font-weight:600;color:var(--text);color-scheme:dark}
.range-inputs button{padding:6px 14px;border-radius:var(--r-sm);background:var(--orange);color:#fff;font-size:12.5px;font-weight:700}
.range-note{font-size:11.5px;color:var(--text-4);margin-left:auto;white-space:nowrap;font-weight:500}

/* ============================================================
   BLOCOS
   ============================================================ */
.page{padding:var(--s5) var(--s6) var(--s8);max-width:1680px}
.sec{margin-top:var(--s6)}
.sec:first-child{margin-top:var(--s4)}
.sec-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.sec-head .h2{margin-right:auto}
.sec-sub{font-size:12px;color:var(--text-4);font-weight:500}

.card{
  background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset,0 14px 36px -28px rgba(0,0,0,.9);
}
.card-pad{padding:var(--s5)}
.card-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s5) var(--s5) 0;flex-wrap:wrap}
.card-head .h2{margin-right:auto}
.card-body{padding:var(--s4) var(--s5) var(--s5)}

/* ── Ver mais (padrão único do sistema) ─────────────────── */
.more{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--cyan);padding:4px 2px;border-radius:6px;position:relative;
  transition:color .16s;flex-shrink:0;
}
.more::after{content:'';position:absolute;left:2px;right:14px;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease);opacity:.5}
.more:hover{color:#67E8F9}
.more:hover::after{transform:scaleX(1)}
.more .arw{display:inline-block;transition:transform .2s var(--ease)}
.more:hover .arw{transform:translateX(3px)}
.more:active{transform:translateY(1px)}
.more.on{color:#67E8F9}

/* ── KPI ────────────────────────────────────────────────── */
.kpi-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(4,1fr)}
.kpi{
  position:relative;padding:var(--s5);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 100%);
  border:1px solid var(--line);overflow:hidden;
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.kpi::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:var(--accent-c,var(--cyan));opacity:.5}
.kpi:hover{transform:translateY(-2px);border-color:var(--accent-l,var(--cyan-l));background:linear-gradient(180deg,var(--card-3) 0%,var(--card-2) 100%);box-shadow:0 10px 30px -22px var(--accent-c,var(--cyan))}
.kpi.c-spend{--accent-c:var(--cyan);--accent-l:var(--cyan-l)}
.kpi.c-rev{--accent-c:var(--orange);--accent-l:var(--orange-l)}
.kpi.c-roas{--accent-c:var(--violet);--accent-l:rgba(139,92,246,.34)}
.kpi.c-cost{--accent-c:var(--blue);--accent-l:rgba(59,130,246,.34)}
.kpi{display:flex;align-items:flex-start;gap:var(--s4)}
.kpi-main{flex:1;min-width:0}
.kpi-goal{text-align:right;flex-shrink:0;padding-top:2px}
.kpi-goal-l{font-size:10.5px;font-weight:600;color:var(--text-4);text-transform:uppercase;letter-spacing:.06em}
.kpi-goal-v{font-size:13px;font-weight:700;color:var(--text-2);margin-top:3px;white-space:nowrap}
.kpi-goal-p{font-size:12px;font-weight:700;margin-top:5px}
.kpi.c-rev .kpi-val{color:var(--orange)}
.kpi-top{display:flex;align-items:center;gap:6px;margin-bottom:11px}
.kpi-name{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.kpi-val{font-size:29px;font-weight:800;letter-spacing:-.03em;line-height:1.04}
.kpi-val.na{font-size:15px;font-weight:600;color:var(--text-4);letter-spacing:0}
.kpi-foot{display:flex;align-items:center;gap:9px;margin-top:11px;flex-wrap:wrap;min-height:20px}
.kpi-prev{font-size:11.5px;color:var(--text-4);font-weight:500}
.goal{display:flex;align-items:center;gap:7px;margin-top:11px}
.goal-bar{flex:1;height:4px;border-radius:99px;background:rgba(234,234,234,.07);overflow:hidden}
.goal-fill{height:100%;border-radius:99px;background:var(--accent-c,var(--cyan));transition:width .8s var(--ease)}
.goal-txt{font-size:10.5px;font-weight:600;color:var(--text-4);white-space:nowrap}

.delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700}
.delta.up{color:var(--green)} .delta.down{color:var(--red)} .delta.flat{color:var(--text-4)}
.delta svg{width:11px;height:11px;stroke-width:2.6}

.help{
  width:14px;height:14px;border-radius:99px;display:inline-grid;place-items:center;cursor:help;flex-shrink:0;
  border:1px solid var(--line-2);color:var(--text-4);font-size:9px;font-weight:800;
}
.help:hover{color:var(--text-2);border-color:var(--line-3)}

/* ── resumo inteligente ─────────────────────────────────── */
.summary{
  display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s5);border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(34,211,238,.055) 0%,var(--card-2) 44%,rgba(255,90,31,.04) 100%);
  border:1px solid var(--line-2);
}
.summary-ico{
  width:34px;height:34px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(34,211,238,.10);border:1px solid var(--cyan-l);color:var(--cyan);
  animation:breathe 3.6s ease-in-out infinite;
}
.summary-ico svg{width:17px;height:17px;stroke-width:1.9}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}50%{box-shadow:0 0 16px 0 rgba(34,211,238,.30)}}
.summary-txt{flex:1;font-size:14px;line-height:1.62;font-weight:500;color:var(--text-2);animation:fadeIn .45s var(--ease)}
.summary-txt b{color:var(--text);font-weight:700}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── funil circular ─────────────────────────────────────── */
.funnel-wrap{position:relative}
.funnel-svg{width:100%;height:auto;display:block;overflow:visible}
/* transform-box:fill-box faz a rotação girar em torno do próprio elemento.
   Sem isso a origem é lida no sistema do SVG escalado e o grupo varre uma área
   enorme, o que empurrava a largura da página no mobile. */
.fn-ring-out{transform-box:fill-box;transform-origin:center;animation:spinSlow 26s linear infinite}
.fn-ring-out.rev{animation:spinSlow 22s linear infinite reverse}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.fn-arc{stroke-linecap:round;transition:stroke-width .2s var(--ease)}
.fn-node{cursor:pointer;transition:transform .22s var(--ease)}
.fn-node:hover{transform:scale(1.03)}
.fn-node:hover .fn-ring-out{animation-play-state:paused}
.fn-node.dim{opacity:.42;transition:opacity .22s}
.fn-node.sel .fn-halo{opacity:.9}
.fn-halo{transition:opacity .22s}
.fn-flow{stroke-dasharray:3 7;animation:flow 2.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-40}}
.fn-pulse{animation:pulseDot 3.4s var(--ease) infinite}
@keyframes pulseDot{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.fn-label{font-size:11px;font-weight:600;fill:var(--text-2)}
.fn-num{font-weight:800;letter-spacing:-.03em}
.fn-groupline{stroke:var(--line-2);stroke-dasharray:2 4}
.fn-grouptag{font-size:9.5px;font-weight:700;letter-spacing:.14em;fill:var(--text-4)}

.leak{
  display:flex;align-items:flex-start;gap:11px;padding:12px var(--s4);border-radius:var(--r);
  background:var(--orange-d);border:1px solid var(--orange-l);margin-top:var(--s4);
  animation:leakIn .5s var(--ease);
}
@keyframes leakIn{0%{opacity:0;transform:translateY(6px);box-shadow:0 0 0 0 rgba(255,90,31,0)}
  55%{opacity:1;transform:none;box-shadow:0 0 22px -4px rgba(255,90,31,.45)}
  100%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(255,90,31,0)}}
.leak svg{width:16px;height:16px;flex-shrink:0;color:var(--orange);margin-top:1px;stroke-width:2}
.leak b{color:var(--orange);font-weight:700}
.leak-txt{font-size:13px;line-height:1.55;color:var(--text-2);font-weight:500}

/* ── anel de atendimento comercial ──────────────────────── */
.health-wrap{display:block}
.health-sat{pointer-events:none}
.health-svg{flex-shrink:0}
.health-seg{cursor:pointer;transition:opacity .2s,stroke-width .2s}
.health-wrap.hovering .health-seg{opacity:.32}
.health-wrap.hovering .health-seg.on{opacity:1;stroke-width:11}
.health-core{animation:corePulse 4.5s ease-in-out infinite}
@keyframes corePulse{0%,100%{opacity:.55}50%{opacity:.95}}
.health-list{flex:1;min-width:190px;display:flex;flex-direction:column;gap:9px}
.health-row{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;cursor:default}
.health-row i{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.health-row .nm{flex:1;color:var(--text-2)}
.health-row .vl{font-weight:700}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;margin-top:var(--s4)}
.stat{background:var(--card);padding:var(--s3) var(--s4)}
.stat .k{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-4);margin-bottom:4px}
.stat .v{font-size:16px;font-weight:800;letter-spacing:-.02em}
.stat .v.na{font-size:12px;font-weight:500;color:var(--text-4)}
.stat .d{font-size:10.5px;margin-top:2px;font-weight:600}

/* ── gráfico de desempenho ──────────────────────────────── */
.chart-wrap{position:relative}
.chart{width:100%;height:auto;display:block;overflow:visible}
.ch-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ch-line.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw var(--dur,1100ms) var(--ease) forwards var(--delay,0ms)}
@keyframes draw{to{stroke-dashoffset:0}}
.ch-dot{opacity:0;animation:dotIn .3s var(--ease) forwards var(--ddelay,0ms)}
@keyframes dotIn{to{opacity:1}}
.ch-series{transition:opacity .25s var(--ease)}
.ch-series.off{opacity:0;pointer-events:none}
.ch-cursor{stroke:var(--line-3);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s}
.chart-wrap.live .ch-cursor{opacity:1}
.ch-axis{font-size:10px;font-weight:500;fill:var(--text-4)}
.ch-grid{stroke:var(--line);stroke-width:1}
.legend{display:flex;gap:var(--s3);flex-wrap:wrap}
.legend button{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-2);padding:4px 9px;border-radius:8px;border:1px solid transparent;transition:.16s}
.legend button:hover{background:rgba(234,234,234,.03);border-color:var(--line)}
.legend button.off{color:var(--text-4)}
.legend button.off i{background:var(--text-4)!important;box-shadow:none!important}
.legend i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.ch-tip{
  position:absolute;pointer-events:none;z-index:6;padding:9px 12px;border-radius:var(--r);
  background:var(--card-hi);border:1px solid var(--line-2);font-size:12px;font-weight:500;
  box-shadow:0 14px 34px -18px #000;opacity:0;transition:opacity .14s,transform .14s var(--ease);
}
.ch-tip.on{opacity:1}
.ch-tip .d{font-weight:700;font-size:11.5px;margin-bottom:5px;color:var(--text)}
.ch-tip .r{display:flex;align-items:center;gap:7px;margin-top:3px;white-space:nowrap}
.ch-tip .r i{width:7px;height:7px;border-radius:2px}
.ch-tip .r b{margin-left:auto;font-weight:700}

/* ── microcards do gestor ───────────────────────────────── */
.micro-grid{display:grid;gap:var(--s2);grid-template-columns:repeat(6,1fr)}
.micro-grid.cols2{grid-template-columns:1fr 1fr}
.micro-grid.cols2 .micro{display:flex;align-items:center;gap:11px;padding:12px var(--s4)}
.micro-grid.cols2 .micro-ico{width:30px;height:30px;border-radius:9px;background:var(--card-3);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.micro-grid.cols2 .micro-ico svg{width:15px;height:15px}
.micro-grid.cols2 .micro-body{flex:1;min-width:0}
.micro-grid.cols2 .micro-top{margin-bottom:2px}
.micro-grid.cols2 .micro-val{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.micro-grid.cols2 .micro-val.na{font-size:11px;line-height:1.35;white-space:normal}
.micro-grid.cols2 .micro-foot{margin:0;min-height:0;flex-shrink:0}
.micro{
  padding:var(--s4);border-radius:var(--r);background:var(--card-2);border:1px solid var(--line);
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.micro:hover{border-color:var(--cyan-l);transform:translateY(-1px)}
.micro:hover .micro-ico{transform:translateX(2px)}
.micro-top{display:flex;align-items:center;gap:5px;margin-bottom:8px}
.micro-ico{color:var(--cyan);display:inline-flex;transition:transform .18s var(--ease)}
.micro-ico svg{width:13px;height:13px;stroke-width:2}
.micro-name{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.micro-val{font-size:19px;font-weight:800;letter-spacing:-.025em}
.micro-val.na{font-size:11.5px;font-weight:500;color:var(--text-4);letter-spacing:0}
.micro-foot{margin-top:6px;min-height:16px;opacity:0;animation:fadeIn .4s var(--ease) .35s forwards}

/* ── criativos ──────────────────────────────────────────── */
.cre-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(4,1fr)}
.cre{
  border-radius:var(--r);background:var(--card-2);border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.cre:hover{border-color:var(--line-3);transform:translateY(-2px)}
.cre.win{border-color:var(--orange-l)}
.cre-media{position:relative;aspect-ratio:16/9;background:var(--card-3);overflow:hidden;flex-shrink:0}
.cre-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease)}
.cre:hover .cre-media img{transform:scale(1.035)}
.cre-media .noimg{width:100%;height:100%;display:grid;place-items:center;color:var(--text-4);font-size:11px}
.cre-rank{
  position:absolute;top:8px;left:8px;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  background:rgba(10,10,10,.76);backdrop-filter:blur(6px);border:1px solid var(--line-2);font-size:10.5px;font-weight:800;
}
.cre.win .cre-rank{background:var(--orange);border-color:var(--orange);color:#fff}
.cre-plat{position:absolute;top:8px;right:8px;font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:5px;background:rgba(10,10,10,.76);backdrop-filter:blur(6px);border:1px solid var(--line-2);color:var(--text-2)}
.cre-body{padding:11px var(--s4) var(--s4);display:flex;flex-direction:column;gap:9px;flex:1}
.cre-nm{font-size:12.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cre-cp{font-size:10.5px;color:var(--text-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.cre-kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 9px;margin-top:auto}
.cre-k .l{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-4);margin-bottom:2px}
.cre-k .v{font-size:13px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.cre-k .v.na{font-size:10.5px;font-weight:500;color:var(--text-4);letter-spacing:0}
.cre-share{height:3px;border-radius:99px;background:rgba(234,234,234,.07);overflow:hidden;margin-top:2px}
.cre-share i{display:block;height:100%;background:var(--orange);border-radius:99px;transition:width .7s var(--ease)}

/* ── abas ───────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);position:relative;overflow-x:auto}
.tabs button{padding:10px 15px;font-size:13px;font-weight:600;color:var(--text-3);white-space:nowrap;transition:color .18s;position:relative}
.tabs button:hover{color:var(--text-2)}
.tabs button.on{color:var(--text)}
.tab-ink{position:absolute;bottom:-1px;height:2px;background:var(--cyan);border-radius:2px;transition:left .24s var(--ease),width .24s var(--ease)}
.tab-panel{animation:tabIn .24s var(--ease)}
@keyframes tabIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}

/* ── chips / badges / tags ──────────────────────────────── */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 11px;border-radius:99px;font-size:12px;font-weight:600;color:var(--text-3);border:1px solid var(--line-2);background:var(--card-2);transition:.15s;white-space:nowrap}
.chip:hover{color:var(--text-2);border-color:var(--line-3)}
.chip.on{background:var(--cyan-d);border-color:var(--cyan-l);color:var(--cyan)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;border:1px solid var(--line-2);color:var(--text-3);white-space:nowrap}
.tag.ok{color:var(--green);border-color:rgba(34,197,94,.30);background:var(--green-d)}
.tag.warn{color:var(--amber);border-color:rgba(245,158,11,.30);background:var(--amber-d)}
.tag.bad{color:var(--red);border-color:rgba(239,68,68,.30);background:var(--red-d)}
.tag.neutral{color:var(--text-4)}
.tag.meta{color:var(--magenta);border-color:rgba(217,70,239,.28);background:var(--magenta-d)}
.tag.google{color:var(--cyan);border-color:var(--cyan-l);background:var(--cyan-d)}
.tag.sale{color:var(--orange);border-color:var(--orange-l);background:var(--orange-d)}

/* ── tabela ─────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:720px}
table.tbl th{text-align:left;padding:11px var(--s4);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-4);border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card-2);position:sticky;top:0;cursor:pointer;user-select:none}
table.tbl th.num,table.tbl td.num{text-align:right}
table.tbl th:hover{color:var(--text-2)}
table.tbl th.sorted{color:var(--text-2)}
table.tbl th .sort{opacity:.4;font-size:9px;margin-left:3px}
table.tbl th.sorted .sort{opacity:1;color:var(--cyan)}
table.tbl td{padding:11px var(--s4);border-bottom:1px solid var(--line);color:var(--text-2);white-space:nowrap;font-weight:500}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr{transition:background .12s}
table.tbl tbody tr:hover{background:rgba(234,234,234,.022)}
table.tbl td.strong{color:var(--text);font-weight:700}
.cellname{display:flex;flex-direction:column;gap:2px;max-width:300px}
.cellname b{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.cellname i{font-style:normal;font-size:10.5px;color:var(--text-4);overflow:hidden;text-overflow:ellipsis}

.search{background:var(--card-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:7px 12px;font-size:12.5px;font-weight:500;min-width:200px}
.search:focus{outline:none;border-color:var(--cyan-l)}

/* ── botões ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;border:1px solid var(--line-2);background:var(--card-2);color:var(--text-2);transition:.16s}
.btn:hover{color:var(--text);border-color:var(--line-3);background:var(--card-3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.primary:hover{background:#FF7443;border-color:#FF7443}
.btn.cyan{color:var(--cyan);border-color:var(--cyan-l);background:var(--cyan-d)}
.btn svg{width:14px;height:14px;stroke-width:2}
.btn.sm{padding:5px 10px;font-size:11.5px}

/* ── drawer ─────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(4,5,7,.62);backdrop-filter:blur(2px);z-index:80;opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(1080px,96vw);z-index:90;
  background:var(--card);border-left:1px solid var(--line-2);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s var(--ease);
  box-shadow:-30px 0 70px -40px rgba(0,0,0,.95);
}
.drawer.on{transform:translateX(0)}
.drawer.narrow{width:min(620px,96vw)}
.drawer-head{padding:var(--s5);border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:var(--s3);flex-shrink:0}
.drawer-body{flex:1;overflow-y:auto;padding:var(--s5);animation:none}
.drawer.on .drawer-body > *{animation:fadeUp .4s var(--ease) backwards}
.drawer.on .drawer-body > *:nth-child(1){animation-delay:.08s}
.drawer.on .drawer-body > *:nth-child(2){animation-delay:.14s}
.drawer.on .drawer-body > *:nth-child(3){animation-delay:.2s}
.drawer.on .drawer-body > *:nth-child(n+4){animation-delay:.26s}
.drawer-foot{padding:var(--s4) var(--s5);border-top:1px solid var(--line);display:flex;gap:var(--s2);flex-wrap:wrap;flex-shrink:0}

/* ── conversa ───────────────────────────────────────────── */
.conv-split{display:grid;grid-template-columns:1fr 400px;gap:var(--s4);align-items:start}
.msg-pane{max-height:min(66vh,720px);overflow-y:auto;padding-right:6px}
.msg{margin-bottom:11px;display:flex;flex-direction:column;max-width:80%;scroll-margin-top:20px}
.msg.in{align-items:flex-start}
.msg.out{align-items:flex-end;margin-left:auto}
.msg .b{padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;font-weight:500;transition:box-shadow .3s,background .3s}
.msg.in .b{background:var(--card-3);border-bottom-left-radius:5px}
.msg.out .b{background:linear-gradient(135deg,#1E4620,#22C55E33);border:1px solid rgba(34,197,94,.22);border-bottom-right-radius:5px}
.msg.auto .b{background:var(--card-2);border:1px dashed var(--line-2);color:var(--text-3)}
.msg .t{font-size:10px;color:var(--text-4);margin-top:4px;padding:0 4px;font-weight:500}
.msg.hl .b{box-shadow:0 0 0 2px var(--amber),0 0 22px -6px var(--amber);background:rgba(245,158,11,.10)}
.msg-sep{display:flex;align-items:center;gap:10px;margin:var(--s4) 0;color:var(--text-4);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.msg-sep::before,.msg-sep::after{content:'';flex:1;height:1px;background:var(--line)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:8px var(--s4);font-size:12.5px}
.kv dt{color:var(--text-4);font-weight:500}
.kv dd{color:var(--text-2);text-align:right;word-break:break-word;font-weight:600}

.tl{display:flex;flex-direction:column;gap:0;position:relative;padding-left:18px}
.tl::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.tl-item{position:relative;padding:9px 0;cursor:pointer;opacity:0;animation:fadeUp .38s var(--ease) forwards}
.tl-item::before{content:'';position:absolute;left:-16px;top:14px;width:9px;height:9px;border-radius:99px;background:var(--card);border:2px solid var(--cyan)}
.tl-item.sale::before{border-color:var(--orange)}
.tl-item.lost::before{border-color:var(--red)}
.tl-item.block::before{border-color:var(--amber)}
.tl-item:hover .tl-l{color:var(--cyan)}
.tl-l{font-size:12.5px;font-weight:600;transition:color .15s}
.tl-d{font-size:11px;color:var(--text-4);margin-top:1px;font-weight:500}

details.tech{border:1px solid var(--line);border-radius:var(--r);background:var(--card-2);padding:0;margin-top:var(--s3)}
details.tech summary{padding:11px var(--s4);font-size:12px;font-weight:600;color:var(--text-3);cursor:pointer;list-style:none}
details.tech summary::-webkit-details-marker{display:none}
details.tech summary::before{content:'▸ ';color:var(--text-4)}
details.tech[open] summary::before{content:'▾ '}
details.tech .in{padding:0 var(--s4) var(--s4)}
details.tech code{font-family:inherit;font-size:11px;color:var(--text-3);word-break:break-all}

/* ── estados ────────────────────────────────────────────── */
.sk{background:linear-gradient(90deg,rgba(234,234,234,.03) 25%,rgba(234,234,234,.07) 50%,rgba(234,234,234,.03) 75%);background-size:200% 100%;animation:shim 1.4s infinite;border-radius:var(--r)}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-kpi{height:132px}
.sk-line{height:12px;margin-bottom:9px;border-radius:6px}
.sk-funnel{height:330px}
.sk-chart{height:260px}
.sk-card{height:200px}

.empty{display:flex;flex-direction:column;align-items:center;gap:9px;padding:var(--s8) var(--s5);text-align:center;color:var(--text-4)}
.empty svg{width:30px;height:30px;stroke-width:1.3;opacity:.5}
.empty b{font-weight:700;font-size:13.5px;color:var(--text-3)}
.empty span{font-size:12.5px;max-width:420px;line-height:1.55;font-weight:500}
.na-txt{color:var(--text-4);font-weight:500}

/* ── tooltip global ─────────────────────────────────────── */
#tip{
  position:fixed;z-index:200;max-width:300px;padding:10px 13px;border-radius:var(--r);
  background:var(--card-hi);border:1px solid var(--line-2);color:var(--text-2);font-size:12px;line-height:1.55;font-weight:500;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.95);pointer-events:none;opacity:0;transition:opacity .14s;
}
#tip.on{opacity:1}
#tip b{color:var(--text);font-weight:700;display:block;margin-bottom:3px}

#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);z-index:210;opacity:0;transition:.24s var(--ease);pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast .t{padding:11px 19px;border-radius:99px;background:var(--card-hi);border:1px solid var(--line-2);font-size:12.5px;font-weight:600;box-shadow:0 18px 40px -20px #000}

/* ============================================================
   ENTRADA PROGRESSIVA
   ============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal > *{animation:fadeUp .42s var(--ease) backwards}
.reveal > *:nth-child(1){animation-delay:.02s}
.reveal > *:nth-child(2){animation-delay:.08s}
.reveal > *:nth-child(3){animation-delay:.14s}
.reveal > *:nth-child(4){animation-delay:.2s}
.reveal > *:nth-child(5){animation-delay:.26s}
.reveal > *:nth-child(6){animation-delay:.32s}
.reveal > *:nth-child(n+7){animation-delay:.38s}
.kpi-grid.reveal > *:nth-child(1){animation-delay:0ms}
.kpi-grid.reveal > *:nth-child(2){animation-delay:60ms}
.kpi-grid.reveal > *:nth-child(3){animation-delay:120ms}
.kpi-grid.reveal > *:nth-child(4){animation-delay:180ms}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1400px){
  .micro-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .cre-grid{grid-template-columns:repeat(2,1fr)}
  .conv-split{grid-template-columns:1fr}
}
@media (max-width:1080px){
  .split{grid-template-columns:1fr!important}
}
@media (max-width:900px){
  :root{--topbar:56px}
  .menu-btn{display:grid}
  .sidebar{transform:translateX(-100%);transition:transform .26s var(--ease);width:262px;box-shadow:24px 0 60px -30px #000}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0!important}
  .page{padding:var(--s4) var(--s4) var(--s8)}
  .periodbar{padding:var(--s3) var(--s4) 0}
  .topbar{padding:0 var(--s4);gap:var(--s3)}
  .tb-meta,.sync-txt{display:none}
  .tb-logo{display:none}
  .tb-name{font-size:15px;max-width:32vw}
  .integr span.txt{display:none}
  .integr{padding:6px 9px}
  .select{max-width:130px;font-size:12.5px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-val{font-size:24px}
  .micro-grid{grid-template-columns:repeat(2,1fr)}
  .cre-grid{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(210px,72%);
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(var(--s4)*-1);padding:0 var(--s4) var(--s2);
  }
  .cre{scroll-snap-align:start}
  .range-note{width:100%;margin:6px 0 0}
  .drawer{width:100vw}
  .health-wrap{justify-content:center}
}
@media (max-width:640px){
  .kpi-grid{grid-template-columns:1fr}
  .micro-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .tbl-wrap{border:0;background:transparent;overflow:visible}
  table.tbl{min-width:0;display:block}
  table.tbl thead{display:none}
  table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%}
  table.tbl tr{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--s2);padding:var(--s3) var(--s4)}
  table.tbl td{border:0;padding:5px 0;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);white-space:normal;text-align:right}
  table.tbl td::before{content:attr(data-l);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4);text-align:left;flex-shrink:0}
  table.tbl td:first-child{border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:5px}
  table.tbl td:first-child::before{display:none}
  .cellname{max-width:none;text-align:left}
  .msg{max-width:92%}
}

/* ============================================================
   ACESSIBILIDADE — redução de movimento
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.12s!important;scroll-behavior:auto!important}
  .fn-ring-out,.fn-flow,.fn-pulse,.health-core,.summary-ico,.integr .beat::after{animation:none!important}
  .ch-line.draw{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .ch-dot{opacity:1!important}
  .reveal > *,.drawer.on .drawer-body > *,.tl-item{animation:none!important;opacity:1!important;transform:none!important}
  .kpi:hover,.micro:hover,.cre:hover{transform:none!important}
}
/* aba em segundo plano: nada roda */
body.paused .fn-ring-out,body.paused .fn-flow,body.paused .fn-pulse,
body.paused .health-core,body.paused .summary-ico,body.paused .integr .beat::after,
body.paused .sk{animation-play-state:paused}

/* ── criativo horizontal: miniatura ~38% do card ───────────── */
.cre{flex-direction:row}
.cre-media{width:38%;flex-shrink:0;aspect-ratio:auto;min-height:150px}
.cre-body{flex:1;min-width:0;padding:var(--s4)}
.cre-head{display:flex;align-items:flex-start;gap:8px}
.cre-badge{
  position:absolute;top:8px;right:8px;font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:6px;
  background:var(--blue);color:#fff;letter-spacing:.02em;
}
.cre-kpis{grid-template-columns:repeat(3,1fr);gap:9px 10px;margin-top:11px}
.cre-foot{display:flex;align-items:center;gap:var(--s3);margin-top:11px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.cre-roas{font-size:11px;font-weight:600;color:var(--text-4)}
.cre-roas b{font-size:14px;font-weight:800;color:var(--text);margin-left:5px}
.cre-part{font-size:11px;font-weight:600;color:var(--cyan);margin-left:auto;white-space:nowrap}
.cre-share{margin-top:8px}
@media (max-width:1200px){ .cre-media{width:34%;min-height:128px} }
@media (max-width:900px){
  .cre{flex-direction:column}
  .cre-media{width:100%;aspect-ratio:16/9;min-height:0}
  .cre-part{margin-left:0}
}


/* ── aliases usados pelas telas operacionais preservadas ──── */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:11.5px;font-weight:600;border:1px solid var(--line-2);background:var(--card-2);color:var(--text-3);white-space:nowrap;
}
.pill .dot{width:6px;height:6px;border-radius:99px;background:var(--text-4);flex-shrink:0}
.pill.ok{color:var(--green);border-color:rgba(34,197,94,.24);background:var(--green-d)}
.pill.ok .dot{background:var(--green)}
.pill.off{color:var(--text-3)}
.pill.bad{color:var(--red);border-color:rgba(239,68,68,.24);background:var(--red-d)}
.pill.bad .dot{background:var(--red)}
.funnel-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden}
.fstat{background:var(--card);padding:var(--s3) var(--s4)}
.fstat-l{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4);margin-bottom:4px}
.fstat-v{font-size:16px;font-weight:800;letter-spacing:-.02em}
.fstat-v.na{font-size:12px;font-weight:500;color:var(--text-4)}
.fstat-d{font-size:10.5px;margin-top:2px;font-weight:600}
.diag{display:flex;gap:11px;padding:13px var(--s4);border-radius:var(--r);background:var(--card-2);border:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--text-2);font-weight:500}
.diag-i{width:7px;height:7px;border-radius:99px;flex-shrink:0;margin-top:6px;background:var(--text-4)}
.diag.good{border-left:2px solid var(--green)} .diag.good .diag-i{background:var(--green)}
.diag.warn{border-left:2px solid var(--amber)} .diag.warn .diag-i{background:var(--amber)}
.diag.info{border-left:2px solid var(--blue)}  .diag.info .diag-i{background:var(--blue)}
.diag-grid{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.sec-title{font-size:15px;font-weight:700;letter-spacing:-.012em}
.card-pad{padding:var(--s5)}

/* ── correções de acabamento ───────────────────────────────── */
.split{align-items:start}
/* o núcleo do anel é um brilho de fundo, não um disco cheio */
@keyframes corePulse{0%,100%{opacity:.06}50%{opacity:.13}}
/* criativo dentro do painel estreito: miniatura menor e métricas em 2 colunas */
.cre-media{width:34%;min-height:132px}
.cre-kpis{grid-template-columns:repeat(2,1fr);gap:8px 10px}
.cre-k .l{font-size:8.5px}
.cre-k .v{font-size:12px}
.cre-nm{font-size:12px;-webkit-line-clamp:2}
.cre-part{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cre-foot{gap:var(--s2)}
.cre-roas b{font-size:13px}
/* eixos do gráfico não encostam na área de plotagem */
.chart{padding:0 2px}
/* criativo compacto no painel da home */
.cre-grid.compact .cre-media{width:32%;min-height:120px}
.cre-grid.compact .cre-kpis{grid-template-columns:1fr 1fr;gap:7px 9px}
.cre-grid.compact .cre-k .v{font-size:12.5px}
.cre-grid.compact .cre-body{padding:12px}
.cre-grid.compact .cre-foot{margin-top:9px;padding-top:8px}
.cre-grid.compact .cre-part{font-size:10px}

/* Item de grid tem largura mínima automática: sem min-width:0 a faixa cresce
   até o min-content do conteúdo (tabela, carrossel de criativo) e estoura a
   tela no celular mesmo com a coluna já colapsada para 1fr. */
.split,.split>*,.card,.card-body,.card-head,.kpi-grid>*,.micro-grid>*,.cre-grid>*,
.conv-split,.conv-split>*,.stat-grid>*,.health-list,.msg-pane{min-width:0}
.card-body>*{max-width:100%}
@media (max-width:640px){
  /* microcard estreito: a variação vai para baixo do valor em vez de disputar a linha */
  .micro-grid.cols2 .micro{flex-wrap:wrap;gap:9px}
  .micro-grid.cols2 .micro-body{flex:1 1 100%;order:2}
  .micro-grid.cols2 .micro-ico{order:1}
  .micro-grid.cols2 .micro-foot{order:3;flex:0 0 auto;margin-left:auto}
  .micro-grid.cols2 .micro-val{font-size:16px}
}