/* ============================================================
   Traffic Manager — Camada de tema "minimal luxury" (global)
   Carregada DEPOIS de style.css: sobrepõe tokens + refina o shell
   e os componentes compartilhados. Aditiva e reversível (é só
   remover o <link> no layout pra voltar ao anterior).
   ============================================================ */

/* Tokens — reskin global (todo componente que usa var(--…) adota) */
:root{
  --bg:#0a0b0e;
  --panel:#111318;
  --panel-2:#14171c;
  --line:rgba(255,255,255,.07);
  --text:#e7e9ec;
  --muted:#8b929c;
  --accent:#3ddc97;          /* acento único (growth) */
  --spend:#c99a4b;           /* gasto (âmbar sóbrio) */
  --rev:#3ddc97;             /* receita */
  --good:#3ddc97;
  --ok:#e0b64a;
  --bad:#e5675f;
  /* meta/google/other/unknown mantidos do style.css */
}

/* Tipografia */
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background-image:radial-gradient(1100px 520px at 82% -10%,rgba(61,220,151,.05),transparent 60%);
}
.num,.k-value,.tbl td,.tbl th{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.k-label,.eyebrow,.tbl th{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.k-value{letter-spacing:-.02em}

/* Topbar — vidro fosco + hairline */
.topbar{
  background:rgba(10,11,14,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;
}
.brand .dot{box-shadow:0 0 10px var(--accent)}

/* Tabs — sublinhado esmeralda, respiro */
.tabs{background:transparent;border-bottom:1px solid var(--line)}
.tab{font-weight:600}
.tab.active{border-bottom-color:var(--accent)}
.lastsync{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.04em}

/* Cartões / painéis — cantos suaves, hairline, hover discreto */
.card,.kpi{border-radius:16px;border-color:var(--line);transition:border-color .2s ease,transform .2s ease}
.card:hover,.kpi:hover{border-color:rgba(255,255,255,.12)}
.card{background:var(--panel)}
.kpi{background:var(--panel)}
.kpi.big{border-color:rgba(61,220,151,.22)}
.card-head h2{letter-spacing:-.01em}

/* KPIs — número maior e mais encorpado */
.k-value{font-weight:800}
.kpi.big .k-value{color:var(--accent)}

/* Botões / chips */
.btn,.btn-sync,.presets .chip,.period-btn{border-radius:10px}
.btn{background:var(--accent);border-color:var(--accent);color:#04150d;font-weight:700}
.btn:hover{filter:brightness(1.05)}
.btn.sm{padding:7px 12px}
.btn.danger{background:transparent;border:1px solid rgba(229,103,95,.4);color:#f0a8a2}
.btn.danger:hover{border-color:var(--bad)}
.btn-sync{border-radius:10px}
.btn-sync:hover:not(:disabled){border-color:var(--accent)}

/* Tabelas — cabeçalho técnico, linhas hairline */
.tbl th{color:var(--muted);font-size:10.5px;border-bottom:1px solid var(--line)}
.tbl td{border-bottom:1px solid var(--line)}
.tbl tbody tr{transition:background .15s ease}
.tbl tbody tr:hover{background:rgba(255,255,255,.02)}

/* Tags de canal — pílula sóbria */
.tag{border-radius:7px;font-weight:700;font-size:11px}

/* Inputs / selects */
input,select,textarea{border-radius:9px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(61,220,151,.4);outline-offset:1px;border-color:var(--accent)}

/* Faixas de contexto */
.banner.warn{border-radius:0}
.organic-strip{border-radius:14px}

/* Efeito de entrada global (usado pelo fx.js; sem JS nada é escondido) */
.fx-hidden{opacity:0;transform:translateY(10px)}
.fx-in{opacity:1 !important;transform:none !important}

@media (prefers-reduced-motion: reduce){
  .fx-hidden{opacity:1;transform:none}
}

/* ===== Modal de atualização: uma barra de progresso por plataforma ===== */
.sync-steps{display:flex;flex-direction:column;gap:14px;margin-top:8px;width:100%}
.sync-plat{display:flex;flex-direction:column;gap:7px}
.sync-plat .sp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.sync-plat .sp-name{font-weight:700;letter-spacing:-.01em}
.sync-plat .sp-meta{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.sync-plat.err .sp-meta{color:#f0a8a2}
.sp-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.sp-bar>span{display:block;height:100%;border-radius:6px;width:0;transition:width .7s cubic-bezier(.4,0,.2,1)}
.sp-bar.run{background:rgba(255,255,255,.05)}
.sp-bar.run>span{width:38%;animation:sp-slide 1.15s ease-in-out infinite}
@keyframes sp-slide{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
@media (prefers-reduced-motion: reduce){ .sp-bar.run>span{animation:none;width:100%;opacity:.45} }
/* Barra determinada em progresso: largura = % real + brilho passando por cima */
.sync-plat.run .sp-bar>span{position:relative;overflow:hidden}
.sync-plat.run .sp-bar>span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:sp-sheen 1.3s ease-in-out infinite}
@keyframes sp-sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.sync-plat.ok .sp-meta{color:var(--accent)}
@media (prefers-reduced-motion: reduce){ .sync-plat.run .sp-bar>span::after{animation:none} }