/* ============================================================================
   2. #page-ig-metrics · métricas Instagram
   O header vira lx-topbar (core já dá a faixa carbon de 52px); aqui o corpo,
   os cards injetados pelo JS (.igm-kpi, .igm-eng-kpi, .igm-post-card) e a
   tabela. Cores dos gráficos Chart.js já são theme-aware no app.js.
   ========================================================================== */
:root[data-theme] #page-ig-metrics{
  background:var(--lx-void);
  color:var(--lx-mist);
}
@media (min-width:1024px){
  :root[data-theme] #page-ig-metrics.page.active{
    display:flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
  }
}
:root[data-theme] #page-ig-metrics .igm-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--lx-s20) var(--lx-s24) var(--lx-s40);
  background:var(--lx-void);
}
:root[data-theme] #page-ig-metrics .igm-scroll{ height:auto; }

/* KPIs do overview (injetados por renderIgOverview) */
:root[data-theme] #page-ig-metrics .igm-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--lx-s12);
  margin-bottom:var(--lx-s16);
}
:root[data-theme] #page-ig-metrics .igm-kpi{
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-card);
  box-shadow:var(--lx-sh-subtle);
  padding:14px 16px 12px;
  transition:border-color .12s ease;
}
:root[data-theme] #page-ig-metrics .igm-kpi:hover{
  background:var(--lx-obsidian);
  border-color:var(--lx-smoke);
}
:root[data-theme] #page-ig-metrics .igm-kpi-label{
  color:var(--lx-fog);
  font-size:12px;
  font-weight:var(--lx-w-reg);
  letter-spacing:0;
  text-transform:none;
  margin-bottom:8px;
}
:root[data-theme] #page-ig-metrics .igm-kpi-value{
  color:var(--lx-paper);
  font-family:var(--lx-font-ui);
  font-size:26px;
  font-weight:var(--lx-w-590);
  letter-spacing:-.6px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
:root[data-theme] #page-ig-metrics .igm-kpi-delta{
  font-family:var(--lx-font-mono);
  font-size:12px;
  margin-top:6px;
}
:root[data-theme] #page-ig-metrics .igm-kpi-delta.up{ color:var(--lx-green-text); }
:root[data-theme] #page-ig-metrics .igm-kpi-delta.down{ color:var(--lx-coral-text); }
:root[data-theme] #page-ig-metrics .igm-kpi-delta.flat{ color:var(--lx-ash); }

/* blocos-painel */
:root[data-theme] #page-ig-metrics .igm-block{
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-card);
  box-shadow:var(--lx-sh-subtle);
  padding:14px 16px 16px;
  margin-bottom:var(--lx-s12);
  min-width:0;
}
:root[data-theme] #page-ig-metrics .igm-block-head{ margin-bottom:10px; }
:root[data-theme] #page-ig-metrics .igm-block-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
:root[data-theme] #page-ig-metrics .igm-block-title{
  color:var(--lx-bone);
  font-family:var(--lx-font-ui);
  font-size:15px;
  font-weight:var(--lx-w-510);
  letter-spacing:-.165px;
  margin:0;
}
:root[data-theme] #page-ig-metrics .igm-title-note{
  color:var(--lx-ash);
  font-size:12px;
  font-weight:var(--lx-w-reg);
}
:root[data-theme] #page-ig-metrics .igm-block-sub{
  color:var(--lx-fog);
  font-size:12px;
  margin-top:2px;
}
:root[data-theme] #page-ig-metrics .igm-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--lx-s12);
  margin-bottom:0;
}
:root[data-theme] #page-ig-metrics .igm-row .igm-block{ margin-bottom:var(--lx-s12); }
@media (max-width:920px){
  :root[data-theme] #page-ig-metrics .igm-row{ grid-template-columns:minmax(0,1fr); }
}
:root[data-theme] #page-ig-metrics .igm-chartbox{
  height:220px;
  position:relative;
}
:root[data-theme] #page-ig-metrics .igm-chartbox-lg{ height:260px; }
:root[data-theme] #page-ig-metrics .igm-note{
  margin-top:6px;
  font-size:11px;
  color:var(--lx-ash);
}
:root[data-theme] #page-ig-metrics .igm-engagement{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:4px;
}

/* KPIs de engajamento (injetados por renderIgEngagement) */
:root[data-theme] #page-ig-metrics .igm-engagement-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;
}
:root[data-theme] #page-ig-metrics .igm-eng-kpi{
  background:var(--lx-carbon);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-md);
  box-shadow:var(--lx-sh-subtle);
  padding:12px 14px;
}
:root[data-theme] #page-ig-metrics .igm-eng-kpi-label{
  color:var(--lx-fog);
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}
:root[data-theme] #page-ig-metrics .igm-eng-kpi-value{
  color:var(--lx-paper);
  font-family:var(--lx-font-ui);
  font-size:22px;
  font-weight:var(--lx-w-590);
  letter-spacing:-.4px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
:root[data-theme] #page-ig-metrics .igm-eng-kpi-sub{
  color:var(--lx-ash);
  font-size:11px;
  margin-top:4px;
}
:root[data-theme] #page-ig-metrics .igm-status-pill{
  border-radius:var(--lx-r-badge);
  font-size:11px;
  padding:2px 8px;
}
:root[data-theme] #page-ig-metrics .igm-status-pill.excelente,
:root[data-theme] #page-ig-metrics .igm-status-pill.limpo{
  background:var(--lx-wash-green);
  color:var(--lx-green-text);
}
:root[data-theme] #page-ig-metrics .igm-status-pill.bom{
  background:var(--lx-wash-teal);
  color:var(--lx-teal-text);
}
:root[data-theme] #page-ig-metrics .igm-status-pill.regular,
:root[data-theme] #page-ig-metrics .igm-status-pill.suspeito{
  background:var(--lx-wash-hover-2);
  color:var(--lx-fog);
}
:root[data-theme] #page-ig-metrics .igm-status-pill.fraco,
:root[data-theme] #page-ig-metrics .igm-status-pill.muito_fraco,
:root[data-theme] #page-ig-metrics .igm-status-pill.alta{
  background:var(--lx-wash-coral);
  color:var(--lx-coral-text);
}
/* barras de benchmark/autenticidade: trilho graphite, preenchimento sólido */
:root[data-theme] #page-ig-metrics .igm-bench-bar{
  background:var(--lx-graphite);
  border-radius:var(--lx-r-pill);
}
:root[data-theme] #page-ig-metrics .igm-bench-zone{
  background:var(--lx-wash-active);
}
:root[data-theme] #page-ig-metrics .igm-bench-marker{
  background:var(--lx-acid-lime);
}
:root[data-theme] #page-ig-metrics .igm-bench-labels{
  color:var(--lx-ash);
  font-size:10px;
}
:root[data-theme] #page-ig-metrics .igm-auth-bar{
  background:var(--lx-graphite);
  border-radius:var(--lx-r-pill);
}
:root[data-theme] #page-ig-metrics .igm-auth-fill{ border-radius:var(--lx-r-pill); }

/* top posts */
:root[data-theme] #page-ig-metrics .igm-top-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--lx-s12);
}
:root[data-theme] #page-ig-metrics .igm-sort{
  max-width:200px;
}
:root[data-theme] #page-ig-metrics .igm-post-card{
  background:var(--lx-carbon);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-card);
  box-shadow:var(--lx-sh-subtle);
  overflow:hidden;
  cursor:pointer;
  transition:border-color .12s ease;
}
:root[data-theme] #page-ig-metrics .igm-post-card:hover{
  transform:none;
  border-color:var(--lx-smoke);
}
:root[data-theme] #page-ig-metrics .igm-post-thumb{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--lx-void);
}
:root[data-theme] #page-ig-metrics .igm-post-meta{
  padding:10px 12px;
  font-size:12px;
  color:var(--lx-fog);
  display:grid;
  gap:4px;
}
:root[data-theme] #page-ig-metrics .igm-post-meta b{
  color:var(--lx-paper);
  font-weight:var(--lx-w-590);
  font-variant-numeric:tabular-nums;
}
:root[data-theme] #page-ig-metrics .igm-pill{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 6px;
  border-radius:var(--lx-r-badge);
  font-size:11px;
  background:var(--lx-wash-hover);
  color:var(--lx-fog);
}
:root[data-theme] #page-ig-metrics .igm-pill.reel{
  background:var(--lx-wash-lavender);
  color:var(--lx-lavender-text);
}
:root[data-theme] #page-ig-metrics .igm-pill.video{
  background:var(--lx-wash-teal);
  color:var(--lx-teal-text);
}
:root[data-theme] #page-ig-metrics .igm-pill.carousel{
  background:var(--lx-wash-violet);
  color:var(--lx-violet-text);
}

/* tabela de posts */
:root[data-theme] #page-ig-metrics .igm-tablewrap{ overflow-x:auto; }
:root[data-theme] #page-ig-metrics .igm-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
:root[data-theme] #page-ig-metrics .igm-table th{
  text-align:left;
  padding:8px 12px;
  color:var(--lx-ash) !important;
  font-size:12px;
  font-weight:var(--lx-w-510);
  border-bottom:1px solid var(--lx-graphite) !important;
  white-space:nowrap;
}
:root[data-theme] #page-ig-metrics .igm-table td{
  padding:8px 12px;
  border-bottom:1px solid var(--lx-graphite) !important;
  color:var(--lx-mist);
  font-variant-numeric:tabular-nums;
}
:root[data-theme] #page-ig-metrics .igm-table tr:hover td{
  background:var(--lx-wash-hover);
}
:root[data-theme] #page-ig-metrics .igm-thumb{
  width:40px;
  height:40px;
  border-radius:var(--lx-r-md);
  object-fit:cover;
  background:var(--lx-void);
}
:root[data-theme] #page-ig-metrics .igm-caption{
  color:var(--lx-fog);
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* modal embed */
:root[data-theme] #page-ig-metrics #igm-embed-modal{
  background:rgba(8,9,10,.72);
  backdrop-filter:none;
}
:root[data-theme] #page-ig-metrics #igm-embed-modal .igm-embed-dialog{
  background:var(--lx-carbon);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-card);
  box-shadow:var(--lx-sh-xl);
}
:root[data-theme] #page-ig-metrics #igm-embed-modal .igm-embed-close{
  border-radius:var(--lx-r-md);
  background:var(--lx-obsidian);
  border:1px solid var(--lx-smoke);
  color:var(--lx-bone);
}
:root[data-theme] #page-ig-metrics #igm-embed-modal .igm-embed-close:hover{
  background:var(--lx-graphite);
}


/* ============================================================================
   3. #page-meta-ads · relatório Meta Ads
   O header vira lx-topbar; .ma-wrap vira o corpo rolante. KPIs e tabela
   mantêm as classes ma-* que o app.js injeta — aqui só a pele nova.
   ========================================================================== */
:root[data-theme] #page-meta-ads{
  background:var(--lx-void);
  color:var(--lx-mist);
}
@media (min-width:1024px){
  :root[data-theme] #page-meta-ads.page.active{
    display:flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
  }
  :root[data-theme] #page-meta-ads > .ma-wrap{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
  }
}
:root[data-theme] #page-meta-ads .ma-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:var(--lx-s20) var(--lx-s24) var(--lx-s48);
}
:root[data-theme] #page-meta-ads .ma-context{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:var(--lx-s16);
}
:root[data-theme] #page-meta-ads .ma-sub{
  font-size:13px;
  color:var(--lx-fog);
  margin:0;
  max-width:600px;
}
:root[data-theme] #page-meta-ads .ma-acct{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--lx-ash);
  margin:0;
}
:root[data-theme] #page-meta-ads .ma-acct b{
  color:var(--lx-lime-ink);
  font-weight:var(--lx-w-510);
}

/* pills de período na topbar */
:root[data-theme] #page-meta-ads .ma-periods{
  display:inline-flex;
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-md);
  padding:2px;
}
:root[data-theme] #page-meta-ads .ma-period{
  border:none;
  background:transparent;
  color:var(--lx-fog);
  font-family:var(--lx-font-ui);
  font-size:12px;
  font-weight:var(--lx-w-510);
  padding:0 10px;
  height:24px;
  border-radius:var(--lx-r-badge);
  cursor:pointer;
  transition:background-color .12s ease,color .12s ease;
}
:root[data-theme] #page-meta-ads .ma-period:hover{ color:var(--lx-bone); }
:root[data-theme] #page-meta-ads .ma-period.active{
  background:var(--lx-graphite);
  color:var(--lx-paper);
  box-shadow:none;
}
:root[data-theme] #page-meta-ads .ma-updated{
  gap:6px;
  font-size:12px;
  color:var(--lx-fog);
}
:root[data-theme] #page-meta-ads .ma-updated .dot{
  width:6px;
  height:6px;
  border-radius:var(--lx-r-pill);
  background:var(--lx-pulse-green);
  box-shadow:none;
}
:root[data-theme] #page-meta-ads .ma-refresh{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:var(--lx-h-btn);
  padding:0 12px;
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-md);
  background:transparent;
  color:var(--lx-mist);
  font-family:var(--lx-font-ui);
  font-size:13px;
  font-weight:var(--lx-w-510);
  cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
:root[data-theme] #page-meta-ads .ma-refresh:hover{
  background:var(--lx-wash-hover);
  border-color:var(--lx-smoke);
  color:var(--lx-bone);
}
:root[data-theme] #page-meta-ads .ma-refresh:disabled{
  opacity:.52;
  cursor:default;
}
:root[data-theme] #page-meta-ads .ma-refresh svg{ width:14px; height:14px; }

/* KPIs injetados por maKpi() */
:root[data-theme] #page-meta-ads .ma-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--lx-s12);
  margin-bottom:var(--lx-s16);
}
@media (max-width:920px){
  :root[data-theme] #page-meta-ads .ma-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  :root[data-theme] #page-meta-ads .ma-kpis{ grid-template-columns:minmax(0,1fr); }
}
:root[data-theme] #page-meta-ads .ma-kpi{
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-card);
  box-shadow:var(--lx-sh-subtle);
  padding:14px 16px 12px;
  min-height:0;
}
:root[data-theme] #page-meta-ads .ma-kpi .lbl{
  color:var(--lx-fog);
  font-family:var(--lx-font-ui);
  font-size:12px;
  font-weight:var(--lx-w-reg);
  letter-spacing:0;
  text-transform:none;
}
:root[data-theme] #page-meta-ads .ma-kpi .val{
  color:var(--lx-paper);
  font-family:var(--lx-font-ui);
  font-size:26px;
  font-weight:var(--lx-w-590);
  letter-spacing:-.6px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  margin-top:8px;
}
:root[data-theme] #page-meta-ads .ma-kpi .sub{
  color:var(--lx-ash);
  font-size:11px;
  margin-top:5px;
}
/* .ma-kpi.accent é o trio de dinheiro (spend/compras/valor): âmbar, e só ele */
:root[data-theme] #page-meta-ads .ma-kpi.accent{
  border-color:var(--lx-graphite);
}
:root[data-theme] #page-meta-ads .ma-kpi.accent .val{
  color:var(--lx-amber);
  font-family:var(--lx-font-mono);
  letter-spacing:-.013em;
}
:root[data-theme] #page-meta-ads .ma-loading,
:root[data-theme] #page-meta-ads .ma-empty{
  color:var(--lx-ash);
  font-size:13px;
  padding:20px;
  text-align:center;
}

/* card da tabela de campanhas */
:root[data-theme] #page-meta-ads .ma-card{
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-card);
  box-shadow:var(--lx-sh-subtle);
  padding:14px 16px 16px;
  margin-bottom:var(--lx-s16);
}
:root[data-theme] #page-meta-ads .ma-card h3{
  color:var(--lx-bone) !important;
  font-family:var(--lx-font-ui);
  font-size:15px;
  font-weight:var(--lx-w-510);
  letter-spacing:-.165px;
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:8px;
}
:root[data-theme] #page-meta-ads .ma-card .tag{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 6px;
  border-radius:var(--lx-r-badge);
  background:var(--lx-wash-hover);
  color:var(--lx-fog);
  font-size:12px;
  font-weight:var(--lx-w-reg);
}
:root[data-theme] #page-meta-ads .ma-tbl{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
:root[data-theme] #page-meta-ads .ma-tbl th{
  text-align:left;
  padding:8px 12px;
  color:var(--lx-ash) !important;
  font-size:12px;
  font-weight:var(--lx-w-510);
  border-bottom:1px solid var(--lx-graphite) !important;
  white-space:nowrap;
}
:root[data-theme] #page-meta-ads .ma-tbl td{
  padding:9px 12px;
  border-bottom:1px solid var(--lx-graphite) !important;
  color:var(--lx-mist);
  font-variant-numeric:tabular-nums;
}
:root[data-theme] #page-meta-ads .ma-tbl tr:hover td{
  background:var(--lx-wash-hover);
}
:root[data-theme] #page-meta-ads .ma-tbl td.cname{
  color:var(--lx-bone);
  font-weight:var(--lx-w-510);
}
/* dinheiro na tabela: âmbar mono */
:root[data-theme] #page-meta-ads .ma-tbl td.spend,
:root[data-theme] #page-meta-ads .ma-tbl td.pval{
  color:var(--lx-amber);
  font-family:var(--lx-font-mono);
  letter-spacing:-.013em;
}