/* ============ eXPulse Marketing — extensões ============ */
:root{--c-meta:#3b6cf6;--c-google:#c99a2e;--c-lp:#0f9f8f;--c-yt:#e5484d}
[data-theme="dark"]{--c-meta:#6f95ff;--c-google:#e8b949;--c-lp:#2dd4bf;--c-yt:#f87171}
.login-brand .bg{background-image:url('../assets/bg.webp')}

/* filtros de período */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;gap:2px}
.seg button{height:32px;padding:0 13px;border-radius:9px;font-weight:700;font-size:12.5px;color:var(--muted);transition:.14s;white-space:nowrap}
.seg button.on{background:var(--navy);color:#fff}
[data-theme="dark"] .seg button.on{background:var(--gold);color:#2a1f05}
.tb-note{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.live{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(18,128,92,.5);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,128,92,.45)}70%{box-shadow:0 0 0 8px rgba(18,128,92,0)}100%{box-shadow:0 0 0 0 rgba(18,128,92,0)}}

/* KPI 6 colunas */
.kpis.k6{grid-template-columns:repeat(6,1fr)}
.kpi .val.fit{font-size:clamp(18px,2vw,24px)}
.kpi .sub{font-size:11px;color:var(--muted-2);margin-top:2px}

/* canal */
.ch-dot{width:10px;height:10px;border-radius:3px;flex:none;display:inline-block}
.ch-logo{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.ch-logo svg{width:21px;height:21px}
.ch-card{padding:18px;position:relative;overflow:hidden}
.ch-card .strip{position:absolute;left:0;top:0;right:0;height:3px}
.ch-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.ch-stats div{background:var(--surface-2);border:1px solid var(--line-2);border-radius:11px;padding:10px}
.ch-stats span{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:block}
.ch-stats b{font-family:var(--display);font-size:16px}
.soon{opacity:.62}

/* gráficos svg */
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-svg text{font-family:var(--sans);font-size:10.5px;fill:var(--muted-2);font-weight:600}
.chart-svg .grid-l{stroke:var(--line);stroke-width:1}
.donut-wrap{display:flex;align-items:center;gap:20px}
.donut-wrap .lg{flex:1;display:flex;flex-direction:column;gap:10px}
.lg-row{display:flex;align-items:center;gap:9px;font-size:13px}
.lg-row b{margin-left:auto;font-family:var(--display)}
.lg-row small{color:var(--muted);font-size:11.5px;width:42px;text-align:right}

/* criativos */
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.cr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:.16s;cursor:pointer}
.cr:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cr .th{aspect-ratio:1/1;background:var(--navy-2) center/cover;position:relative}
.cr .th .tags{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between}
.cr .th .rank{position:absolute;bottom:10px;left:10px;background:rgba(15,23,42,.82);backdrop-filter:blur(6px);color:#fff;border-radius:10px;padding:6px 10px;font-size:11.5px;font-weight:700;display:flex;gap:6px;align-items:center}
.cr .th .rank b{color:var(--gold-2);font-family:var(--display)}
.cr .info{padding:14px}
.cr .info h4{font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.3}
.cr .info p{font-size:11.5px;color:var(--muted);margin:3px 0 12px}
.cr .mets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.cr .mets div{background:var(--surface-2);border-radius:9px;padding:7px 4px}
.cr .mets span{display:block;font-size:10px;color:var(--muted);font-weight:700}
.cr .mets b{font-size:13px;font-family:var(--display)}
.gad{padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);margin-bottom:10px}
.gad .u{font-size:11.5px;color:var(--green);font-weight:600}
.gad h4{font-family:var(--sans);font-size:15px;color:var(--blue);font-weight:700;margin:3px 0}
.gad p{font-size:12.5px;color:var(--muted)}

/* lead drawer */
.qa{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.qa div{padding:11px 14px;border-bottom:1px solid var(--line-2)}
.qa div:last-child{border-bottom:none}
.qa span{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.qa b{font-size:13.5px}
.utm{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.utm div{background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;font-size:12px;overflow:hidden}
.utm span{display:block;font-size:10px;color:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.utm code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;word-break:break-all}
.dw-close{margin-left:auto}

/* tempo até conversão */
.speed{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.speed>div{padding:16px;border-right:1px solid var(--line-2);position:relative}
.speed>div:last-child{border-right:none}
.speed span{font-size:11.5px;color:var(--muted);font-weight:600;display:block}
.speed b{font-family:var(--display);font-size:22px;display:block;margin:4px 0 2px}
.speed small{font-size:11px;font-weight:700}
.speed .step{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--gold);text-transform:uppercase}

/* funil mensal */
.mf{display:grid;grid-template-columns:130px repeat(4,1fr);gap:0}
.mf>div{padding:11px 12px;border-bottom:1px solid var(--line-2);font-size:13px}
.mf .h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
.mf .lbl{font-weight:700;display:flex;align-items:center;gap:8px}
.mf .cell b{font-family:var(--display);font-size:15px}
.mf .cell small{display:block;font-size:10.5px;color:var(--muted)}
.mf .cell .mini{height:5px;border-radius:3px;background:var(--surface-2);margin-top:6px;overflow:hidden}
.mf .cell .mini i{display:block;height:100%;border-radius:3px}
.conv-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--muted);font-weight:700}

/* funil horizontal */
.hfunnel{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hf-st{position:relative;border-radius:var(--r-sm);padding:14px;color:#fff;overflow:hidden}
.hf-st span{font-size:11.5px;opacity:.8;font-weight:600}
.hf-st b{font-family:var(--display);font-size:26px;display:block}
.hf-st small{font-size:11px;opacity:.85;font-weight:700}

/* ROAS badge */
.roas{font-family:var(--display);font-weight:800}
.roas.hi{color:var(--green)}.roas.md{color:var(--amber)}.roas.lo{color:var(--red)}

/* Claude MCP */
.mcp-shell{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.chat{display:flex;flex-direction:column;height:620px;background:#faf9f5;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
[data-theme="dark"] .chat{background:#1f1e1c}
.chat-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.claude-ic{width:30px;height:30px;border-radius:9px;background:#d97757;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.chat-b{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.msg-u{align-self:flex-end;background:#efe9de;color:#29261b;border-radius:16px 16px 4px 16px;padding:10px 14px;max-width:82%;font-size:13.5px}
[data-theme="dark"] .msg-u{background:#393733;color:#eee}
.msg-a{align-self:flex-start;max-width:94%;font-size:13.5px;line-height:1.6;color:var(--ink)}
.msg-a p{margin-bottom:8px}
.msg-a table{border-collapse:collapse;margin:8px 0;font-size:12.5px;width:100%}
.msg-a th,.msg-a td{border:1px solid var(--line);padding:6px 9px;text-align:left}
.msg-a th{background:var(--surface-2);font-weight:700}
.tool-call{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:5px 10px;margin:0 6px 8px 0}
.tool-call code{font-family:ui-monospace,Menlo,monospace;color:var(--ink);font-size:11.5px}
.tool-call .ok{color:var(--green)}
.chat-f{border-top:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:10px}
.sugs{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px}
.sugs button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--ink);transition:.14s}
.sugs button:hover{border-color:#d97757;color:#d97757}
.chat-in{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 6px 6px 14px}
.chat-in input{flex:1;border:none;outline:none;background:none;color:var(--ink);height:34px}
.chat-in button{width:34px;height:34px;border-radius:10px;background:#d97757;color:#fff;display:flex;align-items:center;justify-content:center}
.typing{display:inline-flex;gap:4px;padding:6px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-2);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.code-box{background:var(--navy);color:#e5e7eb;border-radius:12px;padding:12px 14px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.6;overflow-x:auto;white-space:pre}
.code-box .k{color:var(--gold-2)}.code-box .s{color:#86efac}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.perm-row:last-child{border-bottom:none}
.sw{width:40px;height:23px;border-radius:20px;background:var(--line);position:relative;flex:none;transition:.18s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on{background:var(--green)}
.sw.on::after{left:20px}

/* integrações */
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.int{padding:18px}
.int .kv{display:flex;justify-content:space-between;font-size:12.5px;padding:7px 0;border-bottom:1px dashed var(--line-2)}
.int .kv:last-of-type{border-bottom:none}
.int .kv span{color:var(--muted)}
.int .kv b{font-weight:700;text-align:right}

/* escritórios */
.bar-h{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.bar-h i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.stack{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--surface-2)}
.stack i{display:block;height:100%}

/* skeleton p/ troca de período */
.fade-in{animation:fin .35s ease}
@keyframes fin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(max-width:1280px){.kpis.k6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.mcp-shell{grid-template-columns:1fr}.speed{grid-template-columns:1fr 1fr}.speed>div:nth-child(2){border-right:none}.speed>div:nth-child(-n+2){border-bottom:1px solid var(--line-2)}}
@media(max-width:820px){
  .kpis.k6{grid-template-columns:1fr 1fr}
  .toolbar{margin-bottom:14px}
  .toolbar .seg{width:100%;overflow-x:auto}
  .toolbar .seg button{flex:1}
  .hfunnel{grid-template-columns:1fr 1fr}
  .mf{grid-template-columns:96px repeat(4,1fr);font-size:12px}
  .mf>div{padding:9px 6px}
  .mf .cell b{font-size:13px}
  .mf-wrap{overflow-x:auto}
  .mf-wrap .mf{min-width:520px}
  .chat{height:560px}
  .cr-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cr .info{padding:10px}.cr .info h4{font-size:12.5px}
  .cr .mets b{font-size:11.5px}
  .donut-wrap{flex-direction:column;align-items:stretch}
  .donut-wrap svg{margin:0 auto}
  .drawer{width:100%;max-width:100%}
  .toast{bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom))}
}
@media(max-width:420px){.kpis.k6{grid-template-columns:1fr 1fr}.kpis.k6 .kpi{padding:13px}.ch-stats{grid-template-columns:1fr 1fr 1fr}}