/* Tema claro estilo "Boltshift" — SaaS moderno, cards arredondados, azul primário. */
:root {
  --bg: #f4f6fb; --card: #ffffff; --text: #0f1729; --muted: #6b7589; --line: #e9edf3;
  --accent: #2f6bff; --accent-2: #5b8cff;
  --grad: linear-gradient(135deg, #5b8cff 0%, #2f6bff 100%);
  --good: #12b76a; --good-bg: #e7f8ef; --bad: #f04438; --bad-bg: #fdeceb; --warn: #f79009; --warn-bg: #fef3e6;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --radius: 16px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.55 "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
code { background: #eef1f6; padding: 1px 6px; border-radius: 6px; font-size: 12px; }
h1 { font-size: 24px; letter-spacing: -.02em; } h2 { font-size: 17px; } h3 { margin: 0; font-size: 15px; }

/* ===================== FLUIDEZ (motion baseline — sutil/premium) =====================
   Sem gate de prefers-reduced-motion (convenção do projeto: o dono roda Windows com os
   "efeitos de animação" desligados e QUER ver o movimento). Só anima props baratas:
   opacity/transform/color/background/border/box-shadow → segura 60fps. */
html { scroll-behavior: smooth; }

/* entrada suave a cada página (app multi-página: roda em toda navegação) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wrap { animation: pageIn .42s cubic-bezier(.22,.61,.36,1) .03s both; }

/* transição-base nos elementos interativos: hover/foco/tema viram fade em vez de salto seco */
a, button, input, select, textarea, .pill, .badge, .seg, .kpi, .stat, .card, article.card, tbody tr {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .2s ease, transform .16s ease, opacity .18s ease;
}
/* cards de resumo respondem ao cursor (lift bem sutil) — inclui o card de créditos da IA */
.kpi:hover, .stat:hover, .ai-credits:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,24,40,.10); }
/* troca de tema (claro↔escuro) faz fade em vez de piscar */
body { transition: background-color .25s ease, color .25s ease; }
.nav { animation: fadeIn .3s ease both; transition: background-color .25s ease, border-color .25s ease; }

/* ---- top nav (pílulas) ---- */
.nav {
  display: flex; align-items: center; gap: 22px; padding: 12px 26px; margin: 14px 24px 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
}
.nav .brand { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.nav .brand .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--grad);
  display: grid; place-items: center; color: #fff; font-size: 15px; }
.nav nav { display: flex; gap: 6px; flex: 1; }
.nav nav a { color: var(--muted); font-weight: 500; padding: 7px 14px; border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, transform .16s ease, box-shadow .2s ease; }
.nav nav a:hover { background: #f1f4f9; text-decoration: none; color: var(--text); transform: translateY(-2px); }
.nav nav a:active { transform: translateY(0) scale(.96); }
.nav nav a.active { background: var(--text); color: #fff; box-shadow: 0 4px 12px rgba(15,23,41,.22); animation: navPop .3s ease; }
/* engrenagem de configurações gira suavemente ao passar o mouse */
.nav nav a.icon svg { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.nav nav a.icon:hover svg { transform: rotate(90deg); }
@keyframes navPop { 0% { transform: scale(.9); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
/* sem gate de prefers-reduced-motion aqui de propósito — mesma convenção do resto do painel
   (o dono roda Windows com "efeitos de animação" off, o que dispara 'reduce' e sumiria com tudo). */
.nav .who { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.nav .who .pill.role { background: #eef2ff; color: var(--accent); border: 0; }
.nav .logout { color: var(--bad); font-weight: 600; }

.wrap { max-width: 1080px; margin: 22px auto; padding: 0 26px; }
.foot { max-width: 1080px; margin: 30px auto; padding: 16px 26px; color: var(--muted); font-size: 12px; }

/* ---- header da página ---- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.page-head .sub { color: var(--muted); margin-top: 2px; }

/* ---- flash ---- */
.flash { padding: 11px 15px; border-radius: 12px; margin-bottom: 18px; font-weight: 500; }
.flash.ok { background: var(--good-bg); color: #08714a; }
.flash.err { background: var(--bad-bg); color: #b42318; }

/* ---- cards genéricos ---- */
.card, article.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.card header, article.card header { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 10px; }

/* ---- KPI cards ---- */
.cards { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0; }
.kpi { flex: 1; min-width: 200px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); position: relative; }
.kpi .ico { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: #eef2ff; color: var(--accent); font-size: 18px; }
.kpi .lbl { color: var(--muted); font-size: 13px; }
.kpi .val { font-size: 27px; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi.primary { background: var(--grad); color: #fff; border: 0; }
.kpi.primary .lbl, .kpi.primary .sub { color: rgba(255,255,255,.82); }
.kpi.primary .ico { background: rgba(255,255,255,.22); color: #fff; }
.kpi.good .val { color: var(--good); } .kpi.bad .val { color: var(--bad); }
.kpi.link a { color: inherit; display: block; } .kpi.link:hover { border-color: var(--accent); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge.up { background: var(--good-bg); color: #08714a; } .badge.down { background: var(--bad-bg); color: #b42318; }

/* ---- painéis (gráficos) ---- */
.panels { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-bottom: 16px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); }
.panel > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.gauge-wrap { position: relative; height: 170px; display: grid; place-items: end center; }
.gauge-center { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; }
.gauge-center b { font-size: 30px; display: block; letter-spacing: -.02em; }
.ministats { display: flex; gap: 12px; margin-top: 8px; }
.ministats .mini { flex: 1; background: #f7f9fc; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ministats .mini span { color: var(--muted); font-size: 12px; } .ministats .mini b { font-size: 19px; display: block; }
@media (max-width: 820px) { .panels { grid-template-columns: 1fr; } }

/* ---- tabela ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: #f7f9fc; }
td.good { color: var(--good); font-weight: 600; } td.bad { color: var(--bad); font-weight: 600; }
tr.inactive { opacity: .5; }

/* ---- pills / status ---- */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #eef1f6; color: #475067; border: 1px solid transparent; }
.pill.good { background: var(--good-bg); color: #08714a; }
.pill.bad  { background: var(--bad-bg); color: #b42318; }
.pill.warn { background: var(--warn-bg); color: #b54708; }
.pill.role { text-transform: uppercase; font-size: 10.5px; letter-spacing: .05em; background: #eef2ff; color: var(--accent); }
.pill.status.rascunho, .pill.status.pending, .pill.status.queued, .pill.status.running { background: #eef1f6; color: #475067; }
.pill.status.aprovado, .pill.status.approved, .pill.status.applied, .pill.status.done { background: var(--good-bg); color: #08714a; }
.pill.status.rejeitado, .pill.status.rejected, .pill.status.failed { background: var(--bad-bg); color: #b42318; }

/* ---- conteúdo de sugestões ---- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin: 8px 0; font-size: 14px; }
.copy { background: #f7f9fc; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); }
.achados { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.achados li { margin: 4px 0; }
details summary { cursor: pointer; color: var(--muted); margin-top: 8px; }

/* ---- botões / forms ---- */
.actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.actions form { margin: 0; }
button { background: var(--accent); color: #fff; border: 0; padding: 9px 18px; border-radius: 10px;
  font-weight: 600; cursor: pointer; font-size: 14px; }
button:hover { filter: brightness(1.06); }
button.ok { background: var(--good); } button.danger { background: var(--bad); }
button.small { padding: 5px 11px; font-size: 12px; background: #eef1f6; color: var(--text); }
button:disabled { opacity: .5; cursor: not-allowed; }
.run-opts { display: flex; flex-direction: column; gap: 13px; margin: 12px 0; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.chk input[type=number] { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.stack input, .stack select { background: #fff; border: 1px solid var(--line); color: var(--text);
  padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.stack input:focus, .stack select:focus { outline: 2px solid #d4e0ff; border-color: var(--accent); }
.form-narrow { max-width: 440px; }
article.card.run header h3 { font-size: 14px; }

/* ---- login ---- */
.login-card { max-width: 380px; margin: 9vh auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 30px; box-shadow: var(--shadow); }
.login-card h1 { font-size: 21px; margin: 0 0 4px; }
.login-card form { margin-top: 20px; }
.login-card button { width: 100%; padding: 11px; }

/* ---- tooltip dos KPIs (hover) ---- */
.kpi[data-tip] { cursor: help; }
.kpi[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 14px; right: 14px; bottom: calc(100% + 9px);
  background: var(--tip-bg); color: var(--tip-fg); padding: 9px 12px; border-radius: 10px;
  font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left; letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(16,24,40,.22); opacity: 0; visibility: hidden;
  transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 30; pointer-events: none;
}
.kpi[data-tip]::before {
  content: ''; position: absolute; left: 30px; bottom: calc(100% + 3px);
  border: 6px solid transparent; border-top-color: var(--tip-bg);
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; z-index: 30; pointer-events: none;
}
.kpi[data-tip]:hover::after, .kpi[data-tip]:hover::before { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---- tooltip genérico (ex.: cabeçalho "CPL vs meta") — abre abaixo do elemento ---- */
.tip { position: relative; cursor: help; text-decoration: underline dotted var(--muted); text-underline-offset: 4px; }
.tip::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 8px); width: max-content; max-width: 260px;
  background: var(--tip-bg); color: var(--tip-fg); padding: 9px 12px; border-radius: 10px;
  font-size: 12px; font-weight: 400; line-height: 1.45; white-space: normal; letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(16,24,40,.22); opacity: 0; visibility: hidden;
  transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 30; pointer-events: none;
}
.tip::before {
  content: ''; position: absolute; left: 16px; top: calc(100% + 2px);
  border: 6px solid transparent; border-bottom-color: var(--tip-bg);
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; z-index: 30; pointer-events: none;
}
.tip:hover::after, .tip:hover::before { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---- seletor de período do gráfico ---- */
.period {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: #eef1f6; color: #475067; border: 0; border-radius: 999px;
  padding: 5px 26px 5px 13px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475067' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 10px;
}
.period:focus { outline: 2px solid #d4e0ff; }

/* ---- página de configurações (tema) ---- */
.theme-opts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.theme-opt { display: flex; align-items: center; gap: 10px; background: var(--card); color: var(--text);
  border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 18px; font-weight: 600;
  font-size: 14px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.theme-opt:hover { border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(47, 107, 255, .18); }
.theme-opt:active { transform: scale(.97); }
.theme-opt.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 107, 255, .16); }
.theme-opt.active:hover { box-shadow: 0 0 0 3px rgba(47, 107, 255, .16), 0 8px 18px rgba(47, 107, 255, .22); }
.theme-opt .swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.theme-opt:hover .swatch { transform: scale(1.14) rotate(-20deg); }
.theme-opt:active .swatch { transform: scale(1.04) rotate(-20deg); }
.swatch.light { background: #f4f6fb; }
.swatch.dark { background: #000000; }
.swatch.system { background: linear-gradient(90deg, #f4f6fb 0 50%, #000000 50% 100%); }

/* nav: link só-ícone (engrenagem) */
.nav nav a.icon { padding: 7px 10px; display: inline-flex; align-items: center; }

/* ===================== TEMA ESCURO ===================== */
:root { --tip-bg: #0f1729; --tip-fg: #ffffff; }
[data-theme="dark"] {
  --bg: #000000; --card: #0e0e10; --text: #e6e9ef; --muted: #9aa4b2; --line: #26262a;
  --accent: #4a82ff; --accent-2: #5b8cff;
  --grad: linear-gradient(135deg, #3d6fe0 0%, #2f6bff 100%);
  --good: #34d399; --good-bg: rgba(52,211,153,.14); --bad: #f87171; --bad-bg: rgba(248,113,113,.14);
  --warn: #fbbf24; --warn-bg: rgba(251,191,36,.14);
  --shadow: 0 1px 2px rgba(0,0,0,.30), 0 6px 20px rgba(0,0,0,.35);
  --tip-bg: #2c2c31; --tip-fg: #ffffff;
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] code, [data-theme="dark"] .ministats .mini, [data-theme="dark"] .copy,
[data-theme="dark"] button.small { background: #161618; }
[data-theme="dark"] button.small { color: var(--text); }
[data-theme="dark"] .nav nav a:hover { background: #1c1c1f; }
[data-theme="dark"] .nav nav a.active { background: var(--accent); color: #fff; }
[data-theme="dark"] tbody tr:hover { background: #161618; }
[data-theme="dark"] .kpi .ico { background: rgba(74,130,255,.16); }
[data-theme="dark"] .nav .who .pill.role, [data-theme="dark"] .pill.role { background: rgba(74,130,255,.18); color: #9bb8ff; }
[data-theme="dark"] .stack input, [data-theme="dark"] .stack select { background: #000000; }
[data-theme="dark"] .period { background-color: #26262a; color: #c2cad6;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c2cad6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
[data-theme="dark"] .pill, [data-theme="dark"] .pill.status.rascunho, [data-theme="dark"] .pill.status.pending,
[data-theme="dark"] .pill.status.queued, [data-theme="dark"] .pill.status.running { background: #26262a; color: #c2cad6; }
[data-theme="dark"] .flash.ok, [data-theme="dark"] .pill.good, [data-theme="dark"] .badge.up,
[data-theme="dark"] .pill.status.aprovado, [data-theme="dark"] .pill.status.approved,
[data-theme="dark"] .pill.status.applied, [data-theme="dark"] .pill.status.done { color: #6ee7b7; }
[data-theme="dark"] td.good { color: #6ee7b7; } [data-theme="dark"] td.bad { color: #fca5a5; }
[data-theme="dark"] .flash.err, [data-theme="dark"] .pill.bad, [data-theme="dark"] .badge.down,
[data-theme="dark"] .pill.status.rejeitado, [data-theme="dark"] .pill.status.rejected,
[data-theme="dark"] .pill.status.failed { color: #fca5a5; }
[data-theme="dark"] .pill.warn, [data-theme="dark"] .pill.status.warn { color: #fcd34d; }

/* ---- login em dois painéis (hero azul à esquerda, formulário à direita) ---- */
.login-split {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 900px; min-height: 460px; margin: 0 auto; animation: loginIn .65s cubic-bezier(.22,.61,.36,1) both;
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow); overflow: hidden;
}
.login-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, #7aa6ff, #2f6bff, #1f57db, #5b8cff);
  background-size: 300% 300%; animation: heroFlow 6s ease-in-out infinite;
  padding: 40px 38px; display: flex; flex-direction: column; justify-content: space-between;
}
.login-hero::before { content: ''; position: absolute; right: -55px; bottom: -45px;
  width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.08); }
.login-hero::after { content: ''; position: absolute; left: -30px; top: 38px;
  width: 90px; height: 90px; border-radius: 50%; border: 2px solid rgba(255,255,255,.14); }
.login-hero .login-brand { position: relative; z-index: 1; font-weight: 700;
  display: flex; align-items: center; gap: 8px; font-size: 15px; }
.login-hero .login-brand .logo { font-size: 18px; }
.login-hero .login-brand.sub { font-weight: 500; font-size: 12.5px; color: rgba(255,255,255,.8); }
.login-hero-body { position: relative; z-index: 1; }
.login-hero-body h1 { font-size: 34px; line-height: 1.1; margin: 0 0 14px; letter-spacing: -.02em; color: #fff; }
.login-hero-body .rule { display: block; width: 46px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.7); margin-bottom: 18px; }
.login-hero-body p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 300px; }
.login-form { padding: 46px 42px; display: flex; flex-direction: column; justify-content: center; }
.login-form h2 { font-size: 25px; margin: 0 0 8px; color: var(--accent); letter-spacing: -.01em; }
.login-form .rule.dark { display: block; width: 46px; height: 3px; border-radius: 2px;
  background: var(--accent); margin-bottom: 22px; }
.login-form button { margin-top: 10px; padding: 12px; border-radius: 999px; font-size: 15px; }
.login-foot { font-size: 12.5px; margin-top: 18px; }
@media (max-width: 720px) {
  .login-split { grid-template-columns: 1fr; max-width: 420px; min-height: 0; }
  .login-hero { padding: 32px 30px; }
  .login-hero-body h1 { font-size: 28px; }
}
/* login: card centralizado na tela (vertical+horizontal) + rodapé fixo embaixo centralizado */
body.login-page { min-height: 100vh; display: flex; flex-direction: column; }
body.login-page .wrap { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; width: 100%; margin: 0 auto; padding: 20px 26px; }
body.login-page .foot { text-align: center; margin: 0 auto; }
/* animações do login (sempre ativas — ver nota no fim do bloco) */
@keyframes loginIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes loginFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes heroFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.login-hero::before { animation: loginFloat 6s ease-in-out infinite; }
.login-hero::after { animation: loginFloat 7.5s ease-in-out infinite reverse; }
/* círculos do hero um pouco mais visíveis + hover do botão */
.login-hero::before { background: rgba(255,255,255,.11); }
.login-hero::after { border-color: rgba(255,255,255,.20); }
.login-form button { transition: transform .15s ease, box-shadow .15s ease, filter .12s ease; }
.login-form button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(47,107,255,.32); }
/* NB: o login anima SEMPRE, de propósito. NÃO desligamos por preferência de "reduzir
   movimento" do sistema (pedido explícito do dono). Era este bloco, agora removido, que
   suprimia a animação quando o Windows está com "efeitos de animação" desativados. */

/* ===================== ABA RODADAS ===================== */
.runs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 18px 0; }
.stat { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .ico { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: #eef2ff; color: var(--accent); }
.stat.ok .ico { background: var(--good-bg); color: var(--good); }
.stat.warn .ico { background: var(--warn-bg); color: var(--warn); }
.stat .lbl { color: var(--muted); font-size: 12.5px; }
.stat .val { font-size: 19px; font-weight: 700; margin-top: 2px; letter-spacing: -.01em; }
@media (max-width: 900px) { .runs-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Selo de créditos da Anthropic (dashboard + Rodadas) — animação SEMPRE ligada,
   sem gate de prefers-reduced-motion (mesma convenção do login/nav: o dono roda com
   "efeitos de animação" do Windows desativados e quer ver as animações). ---- */
.ai-credits { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px;
  border-left: 4px solid var(--ai-cor, #98a2b3);
  animation: aiCardIn .5s cubic-bezier(.2,.75,.3,1) both; }
.ai-credits.state-ok           { --ai-cor: #12b76a; }
.ai-credits.state-sem_creditos { --ai-cor: #f04438; }
.ai-credits.state-erro         { --ai-cor: #f79009; }
.ai-credits.state-desconhecido { --ai-cor: #98a2b3; }
.ai-credits-body { flex: 1; min-width: 0; }
.ai-credits-title { font-weight: 600; }
.ai-credits-sub { font-size: 12px; margin-top: 2px; }
.ai-credits-act { margin: 0; }
.ai-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ai-cor, #98a2b3); }
/* alerta (sem créditos): pulso vermelho contínuo que chama atenção */
.ai-credits.state-sem_creditos .ai-dot { animation: aiPulseRed 1.7s ease-out infinite; }
/* ok / erro: "respiração" suave (verde / âmbar) */
.ai-credits.state-ok   .ai-dot { animation: aiBreatheGreen 2.6s ease-in-out infinite; }
.ai-credits.state-erro .ai-dot { animation: aiBreatheAmber 2.6s ease-in-out infinite; }
/* botão "Verificar": mesmo gesto dos outros botões do painel — sobe + sombra + realce no hover, afunda no clique */
.ai-credits-act button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,24,40,.14);
  border-color: var(--accent); color: var(--accent); }
.ai-credits-act button:active { transform: translateY(0) scale(.97); box-shadow: none; }
/* entrada só com fade (o slide vem do .wrap da página); sem transform aqui p/ liberar o lift no hover */
@keyframes aiCardIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes aiPulseRed { 0% { box-shadow: 0 0 0 0 rgba(240,68,56,.55); }
  70% { box-shadow: 0 0 0 11px rgba(240,68,56,0); } 100% { box-shadow: 0 0 0 0 rgba(240,68,56,0); } }
@keyframes aiBreatheGreen { 0%, 100% { box-shadow: 0 0 0 0 rgba(18,183,106,0); }
  50% { box-shadow: 0 0 0 6px rgba(18,183,106,.16); } }
@keyframes aiBreatheAmber { 0%, 100% { box-shadow: 0 0 0 0 rgba(247,144,9,0); }
  50% { box-shadow: 0 0 0 6px rgba(247,144,9,.16); } }

.runs-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.runs-side { display: flex; flex-direction: column; gap: 16px; }
.runs-side .card { margin-bottom: 0; }        /* sem a margem dobrada: Boas práticas cola no Resumo (gap = 16px) */
.runs-side .tip-card { flex: 1; }              /* Boas práticas cresce p/ nivelar o fundo com a coluna da esquerda */
/* card "Rodar agora" (esquerda): sem a margin-bottom (que o deixava 16px mais curto que a direita) e
   conteúdo distribuído p/ preencher a altura — o botão "Disparar rodada" ancora no rodapé, alinhando
   o fundo do card com a coluna da direita. */
.runs-grid > .card { margin-bottom: 0; display: flex; flex-direction: column; }
.runs-grid > .card form { display: flex; flex-direction: column; flex: 1; }
/* align-self: senão o botão estica na coluna flex; volta a ter a largura do conteúdo (como antes).
   Gap fixo acima do botão (não fica grudado no "sugerir") + a dica é empurrada p/ o rodapé do card. */
.runs-grid > .card .btn-run { margin-top: 20px; align-self: flex-start; }
.runs-grid > .card form .hint { margin-top: auto; padding-top: 14px; }
.run-opts { gap: 16px; }                        /* mesmo ritmo do checklist "Resumo rápido" */

/* ---- toggles (switch) das opções de "Rodar agora" — substituem os checkboxes, com animação ---- */
.tgl { display: flex; align-items: center; gap: 11px; cursor: pointer; font-size: 14px; user-select: none; }
.tgl input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tgl-track { position: relative; flex: none; width: 40px; height: 23px; border-radius: 999px;
  background: #d6dbe4; transition: background .25s ease; }
.tgl-knob { position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(16,24,40,.28);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1); }       /* desliza com leve "bounce" ao ativar */
.tgl input:checked + .tgl-track { background: var(--accent); }
.tgl input:checked + .tgl-track .tgl-knob { transform: translateX(17px); }
.tgl input:focus-visible + .tgl-track { outline: 2px solid #d4e0ff; outline-offset: 2px; }
[data-theme="dark"] .tgl-track { background: #3a3a40; }
.tgl.locked { opacity: .6; pointer-events: none; }    /* "analisar" travado-ligado qdo enviar/propor/sugerir está ativo */

/* card "Último relatório" (aba Rodadas) */
.rel-card .rel-when { margin-left: auto; font-size: 12.5px; font-weight: 500; }
.rel-box { white-space: pre-wrap; word-break: break-word; background: #f7f9fc; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; max-height: 380px; overflow-y: auto; }
[data-theme="dark"] .rel-box { background: #161618; }
.rel-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rel-link { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: 12px;
  border-radius: 8px; transition: transform .16s ease, box-shadow .18s ease, border-color .15s,
  color .15s, background-color .15s; }
.rel-link svg { flex: none; transition: transform .2s ease; }
.rel-link:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(16,24,40,.10);
  border-color: var(--accent); color: var(--accent); }
.rel-link:hover svg { transform: scale(1.18); }
.rel-link:active { transform: translateY(0) scale(.96); box-shadow: none; }

/* tooltip do "!" da dica em "Rodar agora" — abre ACIMA (a dica fica no rodapé do card) */
.hint .tip { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.tip.up::after { top: auto; bottom: calc(100% + 8px); transform: translateY(4px); }
.tip.up:hover::after, .tip.up:focus::after { transform: translateY(0); }
.tip.up::before { top: auto; bottom: calc(100% + 2px); border-bottom-color: transparent;
  border-top-color: var(--tip-bg); }
.tip.up:focus::after, .tip.up:focus::before { opacity: 1; visibility: visible; }
@media (max-width: 900px) { .runs-grid { grid-template-columns: 1fr; } }

/* cabeçalho de card com ícone (aba rodadas) */
.card .hd { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.card .hd .i { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: #eef2ff; color: var(--accent); }
.card .hd .i.y { background: var(--warn-bg); color: var(--warn); }
.card .hd h2 { font-size: 18px; margin: 0; } .card .hd h3 { margin: 0; }

/* resumo rápido — checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.checklist li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.checklist .i { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.checklist .i.g { background: var(--good-bg); color: var(--good); }
.checklist .i.b { background: #eef2ff; color: var(--accent); }
.checklist .i.w { background: var(--warn-bg); color: var(--warn); }
.tip-card .body { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* form "rodar agora" */
.run-divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.suggest-row { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.suggest-gen-desc { margin: 2px 0 8px; max-width: 78ch; line-height: 1.55; }
.btn-run { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  transition: transform .16s ease, box-shadow .18s ease, filter .12s ease; }
/* animação do botão "Disparar rodada" (mesmo estilo de Posts) */
.btn-run:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 9px 20px rgba(47,107,255,.32); }
.btn-run:not(:disabled):active { transform: translateY(0) scale(.97); box-shadow: none; }
.btn-run svg { transition: transform .2s ease; }
.btn-run:not(:disabled):hover svg { transform: translateX(2px) scale(1.1); }
.hint { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin-top: 12px; }
.hint svg { flex: none; }

/* histórico — tabela + estado vazio */
.runs-table th { font-size: 11px; }
.empty { text-align: center; padding: 30px 20px 24px; }
.empty .art { color: var(--accent); opacity: .45; margin-bottom: 8px; }
.empty h4 { margin: 0 0 4px; font-size: 15px; }
.empty p { color: var(--muted); margin: 0; font-size: 13px; }
.posts-card { display: flex; flex-direction: column; }
.posts-card .empty { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* lista de melhores posts */
.postlist { list-style: none; margin: 0; padding: 0; }
.postitem { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.postitem:last-child { border-bottom: 0; }
.postitem .rank { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: #eef2ff; color: var(--accent); font-weight: 700; font-size: 13px; }
.postitem .pbody { flex: 1; min-width: 0; }
.pcap { font-size: 13.5px; line-height: 1.45; }
.pmeta { font-size: 12px; margin-top: 4px; } .pmeta .pill { margin-right: 6px; }
.pactions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; }
.pactions a.small, .pactions button.small { padding: 5px 10px; font-size: 12px; border-radius: 8px; white-space: nowrap; }
.pactions a.small { background: #eef1f6; color: var(--text); text-decoration: none; }
.pactions a.small:hover { filter: brightness(.97); }
.pactions button.gen { background: var(--accent); color: #fff; cursor: pointer; }
.pactions button.gen:hover { filter: brightness(1.06); }
[data-theme="dark"] .postitem .rank { background: rgba(74,130,255,.16); }
[data-theme="dark"] .pactions a.small { background: #26262a; color: #c2cad6; }
/* barra de filtros (quantidade + intervalo de datas) */
.posts-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 16px; }
.posts-filter .ff { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.posts-filter select, .posts-filter input[type=date], .posts-filter .ff input {
  background: #fff; border: 1px solid var(--line); color: var(--text); font-family: inherit;
  padding: 9px 13px; border-radius: 13px; font-size: 13.5px; min-height: 40px; }
.posts-filter select:focus, .posts-filter input:focus { outline: 2px solid #d4e0ff; border-color: var(--accent); }
.posts-filter .filter-go { padding: 0 18px; min-height: 40px; background: var(--accent); color: #fff;
  border: 0; border-radius: 13px; font-weight: 600; font-size: 14px; cursor: pointer; }
.posts-filter .filter-go:hover { filter: brightness(1.06); }
.posts-filter .clearf { align-self: center; font-size: 13px; text-decoration: none; }
.posts-filter .clearf:hover { text-decoration: underline; }
.posts-filter .filter-hint { flex-basis: 100%; font-size: 12px; margin-top: 2px; }
.filter-active { font-size: 12.5px; margin: 0 0 10px; }
[data-theme="dark"] .posts-filter select, [data-theme="dark"] .posts-filter input[type=date],
[data-theme="dark"] .posts-filter .ff input {
  background: #000000; color: #c2cad6; border-color: #2c2c31; color-scheme: dark; }

/* tema escuro: fundos de ícone claros -> azul translúcido */
[data-theme="dark"] .stat .ico, [data-theme="dark"] .card .hd .i, [data-theme="dark"] .checklist .i.b {
  background: rgba(74,130,255,.16); }

/* ===================== SALA DE CONTROLE ===================== */
/* Cards de resumo (5): número grande + borda-esquerda colorida por status. */
.cr-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 18px 0; }
.cr-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); border-left: 4px solid var(--cr-cor, #98a2b3); }
.cr-card .cr-n { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.cr-card .cr-l { color: var(--muted); font-size: 12.5px; margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-green { --cr-cor: var(--good, #12b76a); } .cr-amber { --cr-cor: var(--warn, #f79009); }
.cr-red { --cr-cor: var(--bad, #f04438); } .cr-blue { --cr-cor: var(--accent, #2f6bff); }
.cr-muted { --cr-cor: #98a2b3; }
.cr-card.is-soon { opacity: .62; }
.cr-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,24,40,.10); }
@media (max-width: 1100px) { .cr-summary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cr-summary { grid-template-columns: 1fr 1fr; } }

/* Seções + listas */
.cr-section { margin: 22px 0; }
.cr-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.cr-list { display: flex; flex-direction: column; gap: 12px; }
.cr-empty { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.cr-ok { color: var(--good); font-weight: 700; }

/* Alertas: borda + bolinha colorida por gravidade (crítico pulsa, reusa aiPulseRed) */
.cr-alert { display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--cr-cor, #98a2b3); }
.cr-alert.sev-critical { --cr-cor: var(--bad, #f04438); }
.cr-alert.sev-warning  { --cr-cor: var(--warn, #f79009); }
.cr-alert.sev-info     { --cr-cor: var(--accent, #2f6bff); }
.cr-alert-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--cr-cor); }
.cr-alert.sev-critical .cr-alert-dot { animation: aiPulseRed 1.7s ease-out infinite; }
.cr-alert-body { flex: 1; min-width: 0; }
.cr-alert-title { font-weight: 600; }
.cr-alert-desc { font-size: 12.5px; margin-top: 2px; }
.cr-act { flex: none; white-space: nowrap; text-decoration: none; }
/* botões de ação da Sala de Controle: mesmo gesto do painel — sobe+sombra no hover (o realce de
   cor vem do .ghost), afunda no clique. Sem sublinhado (são links <a>; o a:hover global sublinharia).
   Animação sempre ligada (sem gate de prefers-reduced-motion). */
.cr-act:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(16,24,40,.12); text-decoration: none; }
.cr-act:active { transform: translateY(0) scale(.97); box-shadow: none; }

/* Pendências: card por tipo + lista de itens */
.cr-pending-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cr-pending-hd .cr-act { margin-left: auto; }
.cr-items { list-style: none; margin: 0; padding: 0; }
.cr-items li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px;
  border-top: 1px solid var(--line); }
.cr-items li:first-child { border-top: 0; }
.cr-it-id { color: var(--muted); font-size: 12px; flex: none; }
.cr-it-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-it-when { flex: none; font-size: 12px; }
.cr-more { color: var(--muted); padding-top: 8px; font-size: 12.5px; border-top: 1px solid var(--line); }
.cr-soon p { margin: 0; line-height: 1.6; }
/* Triagem de campanhas (Fase 2) — borda colorida pela recomendacao (verde escalar / ambar revisar / vermelho pausar) */
.cr-camp { border-left: 4px solid var(--cr-cor, #98a2b3); }
.cr-camp.sev-critical { --cr-cor: var(--bad, #f04438); }
.cr-camp.sev-warning  { --cr-cor: var(--warn, #f79009); }
.cr-camp.sev-info     { --cr-cor: var(--good, #12b76a); }
.cr-camp:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,24,40,.10); }
.cr-camp-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cr-camp-name { font-size: 14.5px; }
.cr-camp-metrics { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.cr-camp-metrics b { color: var(--text); font-weight: 600; }
.cr-camp-reason { font-size: 12.5px; margin-top: 8px; }
.cr-camp-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cr-foot { font-size: 12px; margin: 18px 0 0; }
@media (max-width: 640px) { .cr-alert, .cr-pending-hd, .cr-camp-hd { flex-wrap: wrap; } }

/* ===================== MAPA POR REGIÃO ===================== */
.geo-warn { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted);
  border-left: 4px solid var(--accent); margin-bottom: 16px; }
.geo-warn svg { flex: none; color: var(--accent); margin-top: 1px; }
.geo-sumcard .cr-n { font-size: 18px; }   /* nome de estado cabe melhor que o número grande padrão */
.geo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
@media (max-width: 820px) { .geo-cols { grid-template-columns: 1fr; } }
.geo-rank { list-style: none; margin: 0; padding: 0; }
.geo-rank li { padding: 8px 0; border-top: 1px solid var(--line); display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.geo-rank li:first-child { border-top: 0; }
.geo-table-wrap { overflow-x: auto; }
.geo-table { width: 100%; border-collapse: collapse; }
.geo-table th { font-size: 11px; text-align: left; color: var(--muted); padding: 6px 8px; white-space: nowrap; }
.geo-table td { padding: 9px 8px; border-top: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.geo-bar { height: 4px; border-radius: 3px; background: var(--line); margin-top: 5px; overflow: hidden;
  max-width: 160px; }
.geo-bar span { display: block; height: 100%; background: var(--accent); }
.geo-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.geo-green { background: var(--good-bg); color: var(--good); }
.geo-blue { background: #eef2ff; color: var(--accent); }
.geo-amber { background: var(--warn-bg); color: var(--warn); }
.geo-red { background: var(--bad-bg); color: var(--bad); }
.geo-muted { background: #eef1f6; color: var(--muted); }
[data-theme="dark"] .geo-blue { background: rgba(74,130,255,.18); }
[data-theme="dark"] .geo-muted { background: #26262a; }

/* melhorias portadas: filtros + card de diagnóstico + aviso de baixo volume */
/* cabeçalho do Mapa por Região: título à esquerda; os 4 filtros numa grade 2×2 à direita.
   o título encolhe (o subtítulo quebra) e a grade fica fixa à direita; em telas estreitas a grade
   quebra p/ baixo do título (flex-wrap) e vira 1 coluna no celular. Respeita a sidebar do app. */
.geo-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; margin-bottom: 18px; }
.geo-head > div { flex: 1 1 0; min-width: 240px; }
.geo-head .sub { margin-top: 2px; }
.geo-filters { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(186px, 232px)); gap: 10px; }
@media (max-width: 560px) { .geo-filters { grid-template-columns: 1fr; width: 100%; } }
.geo-diag { margin: 16px 0; }
.geo-stats { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 12px; }
.geo-stats > div { display: flex; flex-direction: column; gap: 2px; }
.geo-stats span { font-size: 11.5px; color: var(--muted); }
.geo-stats b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.geo-diag-text { margin: 0; line-height: 1.55; }
.geo-cmp { margin: 8px 0 0; font-size: 12px; }
.geo-lowvol { color: var(--warn); }
.geo-lowvol svg { color: var(--warn); }
/* confiança global no cabeçalho do diagnóstico (empurra p/ a direita) */
.geo-conf { margin-left: auto; }

/* selo de leitura preliminar */
.geo-prelim { color: var(--muted); }
.geo-prelim svg { color: var(--warn); }
.geo-prelim-tag { margin-right: 6px; }

/* bloco de UF única (leitura focada) */
.geo-single { margin-bottom: 6px; }
.geo-single-msg { margin: 0 0 10px; font-size: 12.5px; }
.geo-ufname { font-size: 11.5px; }

/* ---- filtros empilhados: "pílulas elevadas" + menus customizados (animados) ---- */
.geo-dd { position: relative; }
.geo-pill { list-style: none; user-select: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 13px; padding: 10px 13px; font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, border-color .18s ease; }
.geo-pill::-webkit-details-marker { display: none; }
.geo-pill::marker { content: ""; }
.geo-pill:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(16, 24, 40, .13);
  border-color: #d6e0f1; }
.geo-pill:active { transform: translateY(0) scale(.98); }
.geo-dd[open] > .geo-pill { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 107, 255, .15); }
.geo-ic { flex: none; color: var(--accent); }
.geo-pill-t { color: var(--muted); }
.geo-pill-v { margin-left: auto; font-weight: 700; max-width: 142px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.geo-chev { flex: none; color: var(--muted); transition: transform .22s ease; }
.geo-dd[open] > .geo-pill .geo-chev { transform: rotate(180deg); }

/* painel/menu suspenso — anima ao abrir (sem gate de reduced-motion: efeitos ficam off na máquina) */
.geo-dd-panel { position: absolute; z-index: 50; top: calc(100% + 7px); left: 0; min-width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .18); padding: 6px;
  animation: geoDdIn .17s cubic-bezier(.22,.61,.36,1) both; }
@keyframes geoDdIn { from { opacity: 0; transform: translateY(-7px) scale(.98); }
  to { opacity: 1; transform: none; } }
.geo-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px;
  font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, transform .15s ease; }
.geo-opt:hover { background: #eef2fb; transform: translateX(2px); }
.geo-opt input { accent-color: var(--accent); }
.geo-opt input:checked + span { color: var(--accent); font-weight: 700; }

/* painel de Estados (multiseleção): largo o bastante p/ NÃO ter rolagem horizontal */
.geo-ufpick > .geo-dd-panel { left: auto; right: 0; }
.geo-ufpanel { width: 520px; max-width: 92vw; padding: 12px; }
.geo-ufgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px;
  max-height: min(64vh, 460px); overflow-y: auto; overflow-x: hidden; }
.geo-ufgroup { min-width: 0; }
.geo-ufgh { display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  margin: 4px 0; }
.geo-ufall { background: none; border: 0; color: var(--accent); font: inherit; font-size: 10.5px;
  font-weight: 700; cursor: pointer; padding: 0; transition: opacity .14s ease; }
.geo-ufall:hover { text-decoration: underline; opacity: .82; }
.geo-ufitem { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 4px 7px;
  border-radius: 7px; font-size: 12.5px; cursor: pointer; transition: background .14s ease; }
.geo-ufitem:hover { background: #eef2fb; }
.geo-ufitem input { accent-color: var(--accent); flex: none; }
.geo-ufsig { font-weight: 700; min-width: 24px; }
.geo-ufitem em { font-style: normal; font-size: 11.5px; color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-ufactions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
  border-top: 1px solid var(--line); padding-top: 10px; }
.geo-ufbtn { font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 16px; border-radius: 9px;
  cursor: pointer; border: 1px solid var(--line);
  transition: transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .16s ease, background .16s ease, filter .16s ease; }
.geo-ufbtn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(16, 24, 40, .14); }
.geo-ufbtn:active { transform: translateY(0) scale(.96); }
.geo-ufapply { background: var(--accent); color: #fff; border-color: var(--accent); }
.geo-ufapply:hover { filter: brightness(1.07); box-shadow: 0 8px 20px rgba(47, 107, 255, .32); }
.geo-ufclear { background: transparent; color: var(--muted); }
.geo-ufclear:hover { color: var(--text); border-color: #d6e0f1; }

[data-theme="dark"] .geo-dd-panel { background: #0e0e10; border-color: #2c2c31; }
[data-theme="dark"] .geo-opt:hover,
[data-theme="dark"] .geo-ufitem:hover { background: #1c1c1f; }
[data-theme="dark"] .geo-pill:hover,
[data-theme="dark"] .geo-ufclear:hover { border-color: #3a3a44; }

/* ===================== ABA SUGESTÕES ===================== */
/* KPIs reutilizam .runs-stats/.stat; aqui só os variantes de cor + número maior */
.sug-stats .stat .val { font-size: 26px; margin-top: 1px; }
.sug-stats .stat.purple .ico { background: #f1ecfe; color: #7a5af8; }
.sug-stats .stat.bad .ico { background: var(--bad-bg); color: var(--bad); }

/* toolbar: pílulas de filtro + busca + ordenação */
.sug-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; margin: 18px 0; }
.seg-group { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); }
.seg:hover { background: #f1f4f9; color: var(--text); text-decoration: none; }
.seg.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.seg.active:hover { background: var(--accent); color: #fff; }
.sug-tools { display: flex; align-items: center; gap: 10px; }
.search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 0 12px; min-height: 40px; }
.search svg { color: var(--muted); flex: none; }
.search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--text);
  min-width: 200px; padding: 9px 0; }
.search input::placeholder { color: var(--muted); }
.search:focus-within { border-color: var(--accent); outline: 2px solid #d4e0ff; }
.sug-tools .period { min-height: 40px; font-size: 13px; padding: 8px 32px 8px 14px; border-radius: 10px;
  background-color: var(--card); border: 1px solid var(--line); color: var(--text); }

/* card de sugestão */
.sug > .sug-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.sug-title { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.sug-sub { font-size: 12.5px; margin-top: 3px; }
.sug-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: none; }
.pill.meta { display: inline-flex; align-items: center; gap: 5px; background: #eef2ff; color: var(--accent); }

.sug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sug-col { display: flex; flex-direction: column; gap: 16px; }
.sec { font-size: 13px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.sec-hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.sec-hd .sec { margin: 0; }
.sug-box { background: #f7f9fc; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  font-size: 13.5px; line-height: 1.55; }
.sug-box .mt { margin-top: 8px; }
.kv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.kv2 > div { font-size: 13px; }

/* B copy + botão fantasma */
.ghost { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line);
  color: var(--text); border-radius: 9px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.ghost svg { flex: none; }
.ghost.done { color: var(--good); border-color: var(--good); }

/* D criativo */
.criativo { display: flex; gap: 16px; align-items: flex-start; }
.criativo p { margin: 0; flex: 1; }
/* O quadro acompanha o ASPECTO NATURAL do criativo: largura fixa, altura automática — preenche
   sem barras e sem corte. Pode crescer além do texto se a peça for vertical (ok p/ ver certinho). */
.criativo .thumb { flex: none; width: 180px; border-radius: 12px; overflow: hidden; background: #eef2ff; }
.criativo .thumb .thumb-link { display: block; line-height: 0; }
.criativo .thumb .thumb-img { width: 100%; height: auto; display: block; }
/* placeholder (sugestões sem criativo): aparece enquanto carrega ou se a imagem falhar */
.criativo .thumb .thumb-ph { min-height: 200px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; color: var(--accent); }
.criativo .thumb.has-cr .thumb-ph { display: none; }
.criativo .thumb .thumb-ph > svg { width: 46px; height: 46px; }
.criativo .dots { display: flex; gap: 5px; }
.criativo .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(47,107,255,.32); }
.criativo .dots i:first-child { background: var(--accent); }

/* E checklist */
.sug-checklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
.ck { display: flex; align-items: center; gap: 9px; font-size: 13px; background: #f7f9fc;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.ck svg { flex: none; box-sizing: content-box; width: 14px; height: 14px; padding: 3px; border-radius: 50%; color: #fff; }
.ck.ok svg { background: var(--good); } .ck.warn svg { background: var(--warn); } .ck.bad svg { background: var(--bad); }
.sug-findings { margin-top: 12px; } .sug-findings summary { font-size: 13px; }

/* Gate OAB v2 — painel de revisão ética (só aparece qudo há resultado v2 no compliance) */
.oab-v2 { border-left: 3px solid var(--border, #e3e8ef); padding-left: 12px; }
.oab-issues { list-style: none; margin: 10px 0 0; padding: 0; }
.oab-issues li { padding: 8px 0; border-top: 1px solid var(--border, #eef1f6); font-size: 13px; }
.oab-issues li:first-child { border-top: 0; }
.oab-issues b { margin-left: 6px; }
.oab-match { font-style: italic; opacity: .85; }
.oab-fix { margin-top: 3px; font-size: 12.5px; opacity: .9; }
.oab-suggestion { margin-top: 12px; }
.oab-sugbox { margin: 6px 0 8px; white-space: pre-wrap; }
.oab-aviso { margin-top: 12px; font-size: 12.5px; }
.sug-approve.needs-just { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sug-approve .just-input { min-width: 240px; padding: 7px 10px; border: 1px solid var(--border, #d8dee8);
  border-radius: 8px; font-size: 13px; }

/* footer de ações */
.sug-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line); }
.sug-actions form { margin: 0; }
.sug-actions button { display: inline-flex; align-items: center; gap: 7px; }
/* "Editar" (.ghost) no MESMO tamanho de Aprovar/Rejeitar. Base é 9px 18px sem borda; o .ghost tem
   borda 1px (+2px de altura), então 8px vertical compensa → mesma altura final (34px). */
.sug-actions .ghost { padding: 8px 18px; font-size: 14px; border-radius: 10px; }
.sug-actions .sug-id { margin-left: auto; font-size: 12px; }

/* ---- edição inline de uma sugestão (espelha .opt-edit da aba Otimizações) ---- */
.sug-edit { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.sug-edit.show { display: block; }
.sug-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.sug-edit label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sug-edit label.full { grid-column: 1 / -1; }
.sug-edit input[type=text], .sug-edit textarea { background: #fff; border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 14px; line-height: 1.5; padding: 9px 12px; border-radius: 10px; width: 100%; }
.sug-edit textarea { min-height: 64px; resize: vertical; }
.sug-edit input:focus, .sug-edit textarea:focus { outline: 2px solid #d4e0ff; border-color: var(--accent); }
.sug-edit-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.sug-edit-hint { flex-basis: 100%; font-size: 11.5px; }
.sug-edit button { min-height: 38px; transition: transform .16s ease, box-shadow .18s ease,
  filter .12s ease, border-color .15s ease, color .15s ease; }
.sug-edit button.ok:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 18px rgba(18,183,106,.32); }
.sug-edit button.ok:active, .sug-edit .ghost:active { transform: translateY(0) scale(.97); box-shadow: none; }
.sug-edit .ghost:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(16,24,40,.10); }
.sug-actions .ghost.on { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .sug-edit input[type=text], [data-theme="dark"] .sug-edit textarea {
  background: #000000; color: #c2cad6; border-color: #2c2c31; }

/* ---- animações dos botões da aba Sugestões (mesmo estilo da aba Posts) ----
   `.sug-toolbar:not(.opt-toolbar)` limita as pílulas de filtro à aba Sugestões (a aba Otimizações
   reusa `.sug-toolbar`). Sem gate de prefers-reduced-motion, igual à aba Posts (pedido do dono). */
.sug-toolbar:not(.opt-toolbar) .seg, .sug [data-copy], .sug-actions button {
  transition: transform .16s ease, box-shadow .18s ease, background-color .15s ease,
              border-color .15s ease, color .15s ease, filter .12s ease;
}
/* pílulas de filtro */
.sug-toolbar:not(.opt-toolbar) .seg:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(16,24,40,.10); }
.sug-toolbar:not(.opt-toolbar) .seg:active { transform: translateY(0) scale(.97); box-shadow: none; }
/* "copiar copy" (ghost) */
.sug [data-copy]:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(16,24,40,.10); }
.sug [data-copy]:active { transform: translateY(0) scale(.97); box-shadow: none; }
.sug [data-copy] svg { transition: transform .2s ease; }
.sug [data-copy]:hover svg { transform: scale(1.15); }
/* Aprovar / Rejeitar: elevam com glow na cor do botão, afundam no clique, ícone anima */
.sug-actions button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.sug-actions button:active { transform: translateY(0) scale(.97); box-shadow: none; }
.sug-actions button.ok:hover { box-shadow: 0 8px 18px rgba(18,183,106,.32); }
.sug-actions button.danger:hover { box-shadow: 0 8px 18px rgba(240,68,56,.30); }
.sug-actions button svg { transition: transform .2s ease; }
.sug-actions button.ok:hover svg { transform: scale(1.18); }
.sug-actions button.danger:hover svg { animation: xWobble .45s ease; }
@keyframes xWobble { 0%, 100% { transform: rotate(0) scale(1.1); }
  30% { transform: rotate(-14deg) scale(1.12); } 65% { transform: rotate(10deg) scale(1.12); } }

@media (max-width: 820px) { .sug-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .sug-checklist { grid-template-columns: repeat(2, 1fr); }
  .sug-tools { flex: 1; } .search input { min-width: 0; } .search { flex: 1; } }
@media (max-width: 520px) { .kv2 { grid-template-columns: 1fr; } .sug-checklist { grid-template-columns: 1fr; }
  .criativo { flex-direction: column; } .criativo .thumb { width: 100%; max-width: 240px; } }

/* tema escuro */
[data-theme="dark"] .seg { background: #0e0e10; }
[data-theme="dark"] .seg:hover { background: #1c1c1f; }
[data-theme="dark"] .seg.active, [data-theme="dark"] .seg.active:hover { background: var(--accent); color: #fff; }
[data-theme="dark"] .search, [data-theme="dark"] .sug-tools .period, [data-theme="dark"] .ghost { background: #0e0e10; }
[data-theme="dark"] .sug-box, [data-theme="dark"] .ck { background: #161618; }
[data-theme="dark"] .criativo .thumb { background: rgba(74,130,255,.14); }
[data-theme="dark"] .pill.meta { background: rgba(74,130,255,.18); color: #9bb8ff; }
[data-theme="dark"] .sug-stats .stat.ok .ico { background: var(--good-bg); color: var(--good); }
[data-theme="dark"] .sug-stats .stat.purple .ico { background: rgba(122,90,248,.22); color: #b9a6ff; }
[data-theme="dark"] .sug-stats .stat.bad .ico { background: var(--bad-bg); color: var(--bad); }

/* ===================== ABA POSTS (ranking com potencial de campanha) ===================== */
.posts-stats .stat .val { font-size: 26px; margin-top: 1px; }
.posts-stats .stat .val small { font-size: 14px; font-weight: 600; color: var(--muted); }
.posts-stats .stat.purple .ico { background: #f1ecfe; color: #7a5af8; }
.posts-stats .stat.amber .ico { background: var(--warn-bg); color: var(--warn); }
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--accent); text-decoration: none; }

/* barra de filtros como painel + botão "Atualizar dados" à direita */
.posts-filterbar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.posts-filterbar .posts-filter { flex: 1; margin: 0; }
.btn-refresh { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: var(--card);
  border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 13px; border-radius: 10px;
  padding: 0 16px; min-height: 38px; }
.btn-refresh:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-refresh svg { flex: none; }

/* card de ranking */
.rank-card .rank-hd h3 { font-size: 16px; }
.rank-card .rank-hd p { margin: 3px 0 0; font-size: 13px; }
.rankrow { display: grid; grid-template-columns: 42px 132px minmax(0, 1fr) 230px auto; gap: 16px;
  align-items: center; padding: 16px 2px; border-top: 1px solid var(--line); }
.rankrow:first-child { border-top: 0; }
.rank { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; background: #eef2ff; color: var(--accent); }
.rank.rk-imagem { background: var(--good-bg); color: #08714a; }
.rank.rk-carrossel { background: #f1ecfe; color: #7a5af8; }
.rtags { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.pill.kind { background: #eef1f6; color: #475067; text-transform: capitalize; }
.pill.theme { background: #eef2ff; color: var(--accent); }
.rcap { font-size: 13.5px; line-height: 1.45; }
.rmeta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin-top: 7px; }
.rmeta span { display: inline-flex; align-items: center; gap: 4px; }
.rmeta svg { flex: none; opacity: .8; }
.rreco { font-size: 12.5px; }
.rreco-lbl { font-size: 11px; margin-top: 7px; text-transform: uppercase; letter-spacing: .03em; }
.rreco-text { margin-top: 2px; line-height: 1.4; }
.pill.reco { display: inline-flex; align-items: center; gap: 5px; }
.pill.reco.alto { background: var(--good-bg); color: #08714a; }
.pill.reco.bom { background: #eef2ff; color: var(--accent); }
.pill.reco.testar { background: var(--warn-bg); color: #b54708; }
.pill.reco.atencao { background: var(--warn-bg); color: #b54708; }
.pill.reco.baixo { background: #eef1f6; color: #5f6b7d; }
.pill.reco.semdados { background: #f1f4f9; color: #8a94a6; }
/* badge de uso do post (já virou sugestão/campanha) */
.pill.used { font-weight: 700; }
.pill.used.rasc { background: #eaf0ff; color: #3257c4; }
.pill.used.apr, .pill.used.pub { background: var(--good-bg); color: #08714a; }
.pill.used.rej { background: #fdecec; color: #c0322b; }
/* seção Oportunidades (posts de alto/bom potencial ainda não usados em campanha) */
.op-hd h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.op-hd h3 svg { color: #d9a400; flex: none; }
.op-hd p { margin: 3px 0 14px; font-size: 13px; }
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.op-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; display: flex;
  flex-direction: column; gap: 8px; background: var(--card); }
.op-top { display: flex; flex-wrap: wrap; gap: 6px; }
.op-cap { font-size: 13px; line-height: 1.4; flex: 1; }
.op-meta { font-size: 11.5px; }
.op-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 600; min-height: 34px; border-radius: 9px; padding: 6px 12px; cursor: pointer; }
/* miniatura do post (ranking + Oportunidades) — usa a rota /creative/{id} que rebusca a imagem do IG */
.rthumb, .op-thumb { width: 100%; aspect-ratio: 1.91 / 1; border-radius: 8px; overflow: hidden;
  background: #eef1f6; margin-bottom: 6px; }
.rthumb { max-width: 150px; }   /* na coluna de tags fica ~132px; cap evita gigante no layout empilhado */
.rthumb img, .op-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x img { display: none; }
.ractions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 150px; }
.ractions .ghost, .ractions .primary { display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; font-size: 13px; line-height: 1.2; min-height: 40px; font-weight: 600; border-radius: 10px;
  padding: 8px 14px; white-space: nowrap; cursor: pointer; }
.ractions .ghost { background: var(--card); border: 1px solid var(--line); color: var(--text); }
.ractions .ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; filter: none; }
/* border transparente (não 0) p/ ficar com a MESMA altura do "Ver post" (que tem borda 1px) */
.ractions .primary { background: var(--accent); color: #fff; border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(47,107,255,.22); }
.ractions .primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---- animações dos botões da aba Posts (hover/press + ícones) ----
   SEM gate de prefers-reduced-motion de propósito: o dono pediu animação e roda o Windows com os
   "efeitos de animação" desligados — o que dispara 'reduce' e sumiria com as animações (lição do login). */
.posts-filter .filter-go, .posts-filter .clearf, .btn-refresh,
.ractions .ghost, .ractions .primary {
  transition: transform .16s ease, box-shadow .18s ease, background-color .15s ease,
              border-color .15s ease, color .15s ease, filter .12s ease;
}
.posts-filter .filter-go:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(47,107,255,.30); }
.btn-refresh:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,24,40,.12); }
.ractions .ghost:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(16,24,40,.10); }
.ractions .primary:not(:disabled):hover { transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(47,107,255,.34); filter: brightness(1.05); }
/* pressionar: afunda */
.posts-filter .filter-go:active, .btn-refresh:active,
.ractions .ghost:active, .ractions .primary:not(:disabled):active { transform: translateY(0) scale(.97); box-shadow: none; }
.posts-filter .clearf:hover { color: var(--accent); }
/* ícone "Atualizar dados" gira ao passar o mouse */
.btn-refresh svg { transition: transform .55s cubic-bezier(.5,.1,.2,1); }
.btn-refresh:hover svg { transform: rotate(-180deg); }
/* "Ver post": olho dá um leve pop; "Gerar campanha": raio dá um zap ao passar o mouse */
.ractions .ghost svg, .ractions .primary svg { transition: transform .2s ease; }
.ractions .ghost:hover svg { transform: scale(1.14); }
.ractions .primary:not(:disabled):hover svg { animation: boltZap .5s ease; }
@keyframes boltZap { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.3) rotate(-10deg); }
  60% { transform: scale(.92) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
/* Oportunidades: "Gerar campanha" (.op-btn) eleva com glow + raio dá zap — mesmo estilo do ranking
   (.ractions .primary). Sem gate de prefers-reduced-motion, igual ao resto da aba Posts (pedido do dono). */
.op-btn { transition: transform .16s ease, box-shadow .18s ease, filter .12s ease; }
.op-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(47,107,255,.34); filter: brightness(1.05); }
.op-btn:not(:disabled):active { transform: translateY(0) scale(.97); box-shadow: none; }
.op-btn svg { transition: transform .2s ease; }
.op-btn:not(:disabled):hover svg { animation: boltZap .5s ease; }

/* rodapé de posts: disclaimer + carimbo de atualização */
.posts-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 4px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); font-size: 12.5px; color: var(--muted); }
.posts-foot .pf-note { display: inline-flex; align-items: center; gap: 8px; }
.posts-foot .pf-note svg { flex: none; color: var(--accent); }

@media (max-width: 980px) {
  .rankrow { grid-template-columns: 42px 1fr; gap: 8px 14px; }
  .rtags, .rmain, .rreco, .ractions { grid-column: 2; }
  .rreco { padding-top: 8px; border-top: 1px dashed var(--line); }
  .ractions { flex-direction: row; flex-wrap: wrap; }
}

/* tema escuro */
[data-theme="dark"] .btn-refresh, [data-theme="dark"] .ractions .ghost { background: #0e0e10; }
[data-theme="dark"] .pill.kind { background: #26262a; color: #c2cad6; }
[data-theme="dark"] .pill.theme, [data-theme="dark"] .pill.reco.bom { background: rgba(74,130,255,.18); color: #9bb8ff; }
[data-theme="dark"] .pill.reco.alto { color: #6ee7b7; }
[data-theme="dark"] .pill.reco.testar { color: #fcd34d; }
[data-theme="dark"] .rank { background: rgba(74,130,255,.16); color: #9bb8ff; }
[data-theme="dark"] .rank.rk-imagem { background: var(--good-bg); color: var(--good); }
[data-theme="dark"] .rank.rk-carrossel { background: rgba(122,90,248,.22); color: #b9a6ff; }
[data-theme="dark"] .posts-stats .stat.ok .ico { background: var(--good-bg); color: var(--good); }
[data-theme="dark"] .posts-stats .stat.purple .ico { background: rgba(122,90,248,.22); color: #b9a6ff; }
[data-theme="dark"] .posts-stats .stat.amber .ico { background: var(--warn-bg); color: var(--warn); }

/* ===================== ABA OTIMIZAÇÕES (propostas de ação) ===================== */
/* KPIs reutilizam .runs-stats/.stat; aqui só os variantes de cor */
.opt-stats .stat .val { font-size: 24px; }
.opt-stats .stat .val small { font-size: 13px; font-weight: 600; color: var(--muted); }
.opt-stats .stat .val.g { color: var(--good); }
.opt-stats .stat .val.p { color: #7a5af8; }
.opt-stats .stat.purple .ico { background: #f1ecfe; color: #7a5af8; }
.opt-toolbar { margin-bottom: 16px; }

/* layout: coluna ÚNICA de cards, largura total (sidebar removida — igual ao card de criativos) */
.opt-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.opt-main { min-width: 0; }

/* card de proposta */
.opt-card.card { padding: 22px 26px; }  /* .card,article.card (0,1,1) vence .opt-card só → precisa 0,2,0 */
.opt-head { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.opt-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.opt-id h3 { font-size: 15.5px; letter-spacing: -.01em; }
.opt-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: #eef2ff; color: var(--accent); }
.opt-ic.reduzir { background: var(--bad-bg); color: var(--bad); }
.opt-ic.pausar { background: var(--warn-bg); color: var(--warn); }
.opt-tags { display: flex; gap: 8px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.pill.neutral { background: #eef1f6; color: #475067; }

/* corpo: "Alteração sugerida" (esq.) + quadro de métricas (dir.) */
.opt-body { display: grid; grid-template-columns: 270px 1fr; gap: 80px; margin-bottom: 24px; align-items: start; }
.opt-sec { font-size: 13px; font-weight: 700; color: var(--accent); margin: 0 0 12px; }
.opt-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 14.5px; padding: 8px 0; }
.opt-kv span { color: var(--muted); }
.opt-kv b { font-weight: 700; text-align: right; font-size: 16.5px; }
.opt-val.up { color: var(--good); } .opt-val.down { color: var(--bad); }

.opt-metrics { display: grid; grid-template-columns: repeat(4, 1fr); background: #fafbfe;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; align-self: start; }
.opt-metrics .m { padding: 12px 8px; text-align: center; border-left: 1px solid var(--line); }
.opt-metrics .m:first-child { border-left: 0; }
.opt-metrics .ml { color: var(--muted); font-size: 11px; }
.opt-metrics .mv { font-size: 14px; font-weight: 700; margin-top: 4px; letter-spacing: -.01em; }

/* "Motivo da recomendação" + "Impacto esperado/Recomendação" */
.opt-reason { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start;
  padding-top: 20px; border-top: 1px solid var(--line); }
.opt-reason .opt-sec { margin-bottom: 6px; }
.opt-reason p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* bloco "Ver detalhes" (toggle) */
.opt-details { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.opt-det-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; }
.opt-det-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-det-grid span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.opt-det-grid b { font-size: 13px; word-break: break-all; }
.opt-det-ia { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.opt-det-ia span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.opt-det-ia p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* formulário inline "Editar valor" (oculto até clicar; toggle por classe .show) */
.opt-edit { display: none; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 14px; border-top: 1px dashed var(--line); }
.opt-edit.show { display: flex; }
.opt-edit label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.opt-edit input[type=number] { background: #fff; border: 1px solid var(--line); color: var(--text);
  font-family: inherit; padding: 8px 11px; border-radius: 10px; font-size: 14px; min-height: 38px; width: 150px; }
.opt-edit input:focus { outline: 2px solid #d4e0ff; border-color: var(--accent); }
.opt-edit button { min-height: 38px; }
.opt-edit-hint { flex-basis: 100%; font-size: 11.5px; }
[data-theme="dark"] .opt-edit input[type=number] { background: #000000; color: #c2cad6; border-color: #2c2c31; }

/* footer de ações */
.opt-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line); flex-wrap: wrap; }
.opt-actions form { margin: 0; }
.opt-actions button.ok, .opt-actions button.danger { display: inline-flex; align-items: center; gap: 7px; }
/* botões de ação com o MESMO tamanho (Aprovar/Rejeitar/Ver detalhes/Editar valor): largura E altura */
.opt-actions button { min-width: 140px; min-height: 36px; box-sizing: border-box; justify-content: center; }
.opt-actions .ghost.on { border-color: var(--accent); color: var(--accent); }
.opt-pid { margin-left: auto; font-size: 12px; }

/* ---- animações dos botões da aba Otimizações (mesmo estilo de Posts/Sugestões) ---- */
.opt-toolbar .seg, .opt-actions button, .opt-edit button {
  transition: transform .16s ease, box-shadow .18s ease, background-color .15s ease,
              border-color .15s ease, color .15s ease, filter .12s ease;
}
.opt-toolbar .seg:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(16,24,40,.10); }
.opt-toolbar .seg:active { transform: translateY(0) scale(.97); box-shadow: none; }
/* Aprovar / Salvar (verde) e Rejeitar (vermelho): elevam com glow na cor, afundam no clique */
.opt-actions button.ok:hover, .opt-edit button.ok:hover { transform: translateY(-1px);
  filter: brightness(1.05); box-shadow: 0 8px 18px rgba(18,183,106,.32); }
.opt-actions button.danger:hover { transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(240,68,56,.30); }
.opt-actions button.ok:active, .opt-actions button.danger:active,
.opt-edit button.ok:active { transform: translateY(0) scale(.97); box-shadow: none; }
.opt-actions button svg, .opt-edit button svg { transition: transform .2s ease; }
.opt-actions button.ok:hover svg, .opt-edit button.ok:hover svg { transform: scale(1.18); }
.opt-actions button.danger:hover svg { animation: xWobble .45s ease; }
/* ghosts: Ver detalhes / Editar valor / Cancelar */
.opt-actions .ghost:hover, .opt-edit .ghost:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(16,24,40,.10); }
.opt-actions .ghost:active, .opt-edit .ghost:active { transform: translateY(0) scale(.97); box-shadow: none; }
.opt-actions .ghost:hover svg, .opt-edit .ghost:hover svg { transform: scale(1.14); }

/* sidebar */
.opt-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.opt-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); }
.opt-panel-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.opt-panel-hd h2 { font-size: 15px; margin: 0; }
.opt-panel-hd .i { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid;
  place-items: center; background: #eef2ff; color: var(--accent); }

.opt-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.opt-rules li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; }
.opt-rules svg { flex: none; margin-top: 1px; color: var(--accent); }
.opt-rules code { font-size: 11px; }

.opt-sum { display: flex; flex-direction: column; gap: 10px; }
.opt-sum-row { display: flex; align-items: center; gap: 11px; background: #f7f9fc; border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 13px; font-size: 13px; }
.opt-sum-row > b { font-size: 17px; font-weight: 800; }
.opt-sum-row .sl { color: var(--muted); }
.opt-sum-row .si { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; }
.opt-sum-row .si.up { background: var(--good-bg); color: var(--good); }
.opt-sum-row .si.down { background: var(--bad-bg); color: var(--bad); }
.opt-sum-row .si.blue { background: #eef2ff; color: var(--accent); }
.opt-sum-row.net .opt-net { margin-left: auto; font-weight: 800; }
.opt-net.up { color: var(--good); } .opt-net.down { color: var(--bad); }
.opt-sum-foot { font-size: 11.5px; margin: 4px 2px 0; line-height: 1.45; }

@media (max-width: 720px) {
  .opt-body { grid-template-columns: 1fr; }
  .opt-reason { grid-template-columns: 1fr; }
  .opt-metrics .m { padding: 12px 8px; }
  .opt-det-grid { grid-template-columns: repeat(2, 1fr); }
}

/* tema escuro */
[data-theme="dark"] .opt-stats .stat.purple .ico { background: rgba(122,90,248,.22); color: #b9a6ff; }
[data-theme="dark"] .opt-stats .stat .val.p { color: #b9a6ff; }
[data-theme="dark"] .opt-metrics { background: #161618; }
[data-theme="dark"] .opt-sum-row { background: #161618; }
[data-theme="dark"] .pill.neutral { background: #26262a; color: #c2cad6; }
[data-theme="dark"] .opt-ic, [data-theme="dark"] .opt-panel-hd .i,
[data-theme="dark"] .opt-sum-row .si.blue { background: rgba(74,130,255,.16); }
[data-theme="dark"] .opt-ic.reduzir { background: var(--bad-bg); color: var(--bad); }
[data-theme="dark"] .opt-ic.pausar { background: var(--warn-bg); color: var(--warn); }

/* ===================== ABA AUDITORIA ===================== */
/* só a aba Auditoria usa container mais largo — a tabela tem 6 colunas e precisa de espaço
   (as outras abas continuam em 1080). Escopo via body.aud-page (block body_class no template). */
body.aud-page .wrap, body.aud-page .foot { max-width: 1280px; }
.aud-sub { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.aud-stats .stat .val { font-size: 21px; }
.aud-stats .stat.purple .ico { background: #f1ecfe; color: #7a5af8; }
.aud-stats .stat.amber .ico { background: var(--warn-bg); color: var(--warn); }

/* toolbar: busca + filtros + exportar */
.aud-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.aud-toolbar .search { flex: 1; min-width: 200px; min-height: 42px; }
.aud-toolbar .ff { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.aud-toolbar .ff select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  background-color: #fff; color: var(--text); border: 1px solid var(--line); font-family: inherit;
  padding: 9px 30px 9px 12px; border-radius: 10px; font-size: 14px; min-height: 42px; min-width: 148px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475067' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px; }
.aud-toolbar .ff select:focus { outline: 2px solid #d4e0ff; border-color: var(--accent); }
.aud-export { min-height: 42px; }
[data-theme="dark"] .aud-toolbar .ff select { background-color: #000000; color: #c2cad6; border-color: #2c2c31;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c2cad6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }

/* card da tabela */
.aud-card { padding: 18px 20px; }
.aud-h { font-size: 16px; margin: 0 0 10px; }
.aud-table-wrap { overflow-x: auto; }
.aud-table { width: 100%; }
.aud-table th, .aud-table td { padding: 10px 8px; }      /* mais compacto: cabem as 6 colunas */
.aud-table th:first-child, .aud-table td:first-child { padding-left: 2px; }
.aud-table th:last-child, .aud-table td:last-child { text-align: right; padding-right: 2px; }
.aud-table .aud-resumo { color: var(--muted); }
.aud-table tbody tr.sel { background: #eef4ff; }
[data-theme="dark"] .aud-table tbody tr.sel { background: rgba(74,130,255,.12); }
.aud-det-btn { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }

/* pílulas de evento por categoria */
.pill.ev { font-weight: 600; }
.pill.ev.rodadas { background: var(--good-bg); color: #08714a; }
.pill.ev.relatorios { background: #f1ecfe; color: #7a5af8; }
.pill.ev.propostas { background: #eaf1ff; color: var(--accent); }
.pill.ev.campanhas { background: var(--warn-bg); color: #b54708; }
.pill.ev.sistema { background: #eef1f6; color: #475067; }
[data-theme="dark"] .pill.ev.rodadas { color: #6ee7b7; }
[data-theme="dark"] .pill.ev.relatorios { background: rgba(122,90,248,.22); color: #b9a6ff; }
[data-theme="dark"] .pill.ev.propostas { background: rgba(74,130,255,.18); color: #9bb8ff; }
[data-theme="dark"] .pill.ev.campanhas { color: #fcd34d; }
[data-theme="dark"] .pill.ev.sistema { background: #26262a; color: #c2cad6; }

/* rodapé + paginação */
.aud-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.pager { display: flex; align-items: center; gap: 6px; }
.pager .pg { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text);
  font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s, background-color .15s; }
.pager .pg:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pager .pg.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager .pg.disabled { opacity: .4; pointer-events: none; }
[data-theme="dark"] .pager .pg { background: #0e0e10; }

/* gráfico "Eventos por tipo" */
.aud-bars { display: flex; flex-direction: column; gap: 13px; }
.aud-bar { display: grid; grid-template-columns: 74px 1fr 26px; align-items: center; gap: 10px; font-size: 13px; }
.aud-bar .bl { color: var(--muted); }
.aud-bar .bt { height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.aud-bar .bf { display: block; height: 100%; border-radius: 999px; transform-origin: left;
  animation: barGrow .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.aud-bar .bn { text-align: right; font-weight: 700; }
.bf.rodadas { background: var(--good); } .bf.relatorios { background: #7a5af8; }
.bf.propostas { background: var(--accent); } .bf.campanhas { background: var(--warn); }
.bf.sistema { background: #98a2b3; }
[data-theme="dark"] .aud-bar .bt { background: #26262a; }

/* painel "Detalhe do evento" */
.aud-detail .aud-kv { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.aud-detail .aud-kv:last-child { border-bottom: 0; }
.aud-detail .aud-kv > span { color: var(--muted); flex: none; }
.aud-detail .aud-kv > b { font-weight: 600; text-align: right; word-break: break-word; }
.aud-detail #det-extra:not(:empty) { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); }
.aud-rules .bad-ic { color: var(--bad); }

@media (max-width: 720px) {
  .aud-toolbar .ff, .aud-toolbar .ff select { width: 100%; }
  .aud-toolbar .search { flex-basis: 100%; }
}

/* ===================== ABA USUÁRIOS ===================== */
.users-stats { grid-template-columns: repeat(3, 1fr); }
.users-stats .stat .val { font-size: 24px; }
.users-stats .stat.purple .ico { background: #f1ecfe; color: #7a5af8; }
[data-theme="dark"] .users-stats .stat.purple .ico { background: rgba(122,90,248,.22); color: #b9a6ff; }

/* card lista + toolbar */
.users-card { padding: 18px 20px; }
.users-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.users-toolbar .search { flex: 1; min-width: 200px; min-height: 42px; }
.users-filter { min-height: 42px; font-size: 13px; padding: 8px 32px 8px 14px; border-radius: 10px;
  background-color: var(--card); border: 1px solid var(--line); color: var(--text); }
.users-new { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }

/* pílulas de papel (rótulos em PT — sem caixa-alta p/ caber "Administrador"/"Visualizador") */
.pill.urole { text-transform: none; font-size: 11.5px; letter-spacing: 0; }
.pill.urole.admin { background: #eaf1ff; color: var(--accent); }
.pill.urole.approver { background: var(--good-bg); color: #08714a; }
.pill.urole.analyst { background: #f1ecfe; color: #7a5af8; }
.pill.urole.viewer { background: #eef1f6; color: #475067; }
[data-theme="dark"] .pill.urole.admin { background: rgba(74,130,255,.18); color: #9bb8ff; }
[data-theme="dark"] .pill.urole.approver { color: #6ee7b7; }
[data-theme="dark"] .pill.urole.analyst { background: rgba(122,90,248,.22); color: #b9a6ff; }
[data-theme="dark"] .pill.urole.viewer { background: #26262a; color: #c2cad6; }

/* status com bolinha */
.pill.st-dot { display: inline-flex; align-items: center; gap: 6px; }
.pill.st-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.st-dot.off { background: #eef1f6; color: #667085; }
[data-theme="dark"] .pill.st-dot.off { background: #26262a; color: #98a2b3; }
.users-table tr.inactive { opacity: 1; }   /* o status já é a pílula; não esmaecer a linha toda */

/* ações da linha (Editar / Desativar) — com animação igual aos demais botões */
.users-table td:last-child, .users-table th:last-child { text-align: left; white-space: nowrap; }
.urow-acts { display: inline-flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.urow-acts form { margin: 0; }
.u-act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: 12.5px;
  border-radius: 9px; transition: transform .16s ease, box-shadow .18s ease, border-color .15s,
  color .15s, background-color .15s; }
.u-act svg { flex: none; transition: transform .2s ease; }
.u-act:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(16,24,40,.10);
  border-color: var(--accent); color: var(--accent); }
.u-act:hover svg { transform: scale(1.15); }
.u-act:active { transform: translateY(0) scale(.96); box-shadow: none; }
.u-act.danger-ghost:hover { border-color: var(--bad); color: var(--bad); }
.u-self { font-size: 12px; }

/* formulário "Novo usuário" */
.u-create { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 4px; }
.pwd { position: relative; display: flex; }
.pwd input { flex: 1; padding-right: 40px; }
.pwd-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0;
  color: var(--muted); padding: 6px; cursor: pointer; display: inline-flex; }
.pwd-eye:hover { color: var(--accent); filter: none; }
.pwd-eye.on { color: var(--accent); }
.form-note { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.45; margin: 2px 0 2px; }
.form-note svg { flex: none; margin-top: 1px; }

/* permissões e segurança */
.perm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 13px; }
.perm-list li { position: relative; padding-left: 16px; line-height: 1.4; }
.perm-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); }

/* modal de edição */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(16,24,40,.45); display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; width: 100%;
  max-width: 420px; padding: 20px 22px; box-shadow: 0 24px 60px rgba(16,24,40,.35); animation: loginIn .25s ease both; }
.modal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-hd h3 { font-size: 17px; }
.modal-x { background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.modal-x:hover { color: var(--text); filter: none; }
.modal-email { font-size: 13px; margin-bottom: 2px; word-break: break-all; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.modal-actions .ghost, .modal-actions button { padding: 9px 16px; }
[data-theme="dark"] .modal { background: rgba(0,0,0,.6); }

/* layout: lista em largura cheia + "Novo usuário" (esq.) e a coluna de cards (dir.) abaixo dela */
.users-bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.nu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 4px; }
#novo-usuario .stack { gap: 13px; }
.users-side { display: flex; flex-direction: column; gap: 16px; }
/* rótulo "Senha (mín. 8)" numa linha só (alinha com o campo "Papel" ao lado) */
.lbl-line { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
/* barras "Distribuição por papel" — rótulo mais largo p/ os nomes em PT + cores por papel */
.users-bars .aud-bar { grid-template-columns: 100px 1fr 22px; font-size: 12.5px; }
.bf.p-admin { background: var(--accent); } .bf.p-approver { background: var(--good); }
.bf.p-analyst { background: #7a5af8; } .bf.p-viewer { background: #98a2b3; }

/* animação dos botões (Novo usuário / Criar usuário / modal) */
.users-new, .u-create { transition: transform .16s ease, box-shadow .18s ease, filter .12s ease; }
.users-new svg, .u-create svg { transition: transform .2s ease; }
.users-new:hover, .u-create:hover { transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(47,107,255,.30); }
.users-new:active, .u-create:active { transform: translateY(0) scale(.97); box-shadow: none; }
.users-new:hover svg, .u-create:hover svg { transform: scale(1.12); }
.modal-actions button { transition: transform .16s ease, box-shadow .18s ease, filter .12s ease, border-color .15s, color .15s; }
.modal-actions button[type=submit]:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 18px rgba(47,107,255,.30); }
.modal-actions .ghost:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(16,24,40,.10); border-color: var(--accent); color: var(--accent); }
.modal-actions button:active { transform: translateY(0) scale(.97); box-shadow: none; }

@media (max-width: 900px) { .users-bottom { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .nu-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .users-new { margin-left: 0; } .users-toolbar .search { flex-basis: 100%; } }

/* ===== Perfil no topo (avatar + nome/funcao) + menu suspenso (3 barras) ===== */
.nav .who { position: relative; gap: 8px; }
.profile-info { display: flex; align-items: center; gap: 9px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
          border: 2px solid #fff; box-shadow: 0 1px 4px rgba(20,30,80,.14); }
.avatar-ini { display: inline-flex; align-items: center; justify-content: center; color: #fff;
              font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.profile-meta { display: flex; flex-direction: column; line-height: 1.12; }
.profile-name { font-weight: 600; font-size: 13px; color: var(--text); max-width: 160px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-role { font-size: 10px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .05em; color: var(--accent); }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px;
            height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
            color: var(--text); padding: 0; cursor: pointer;
            transition: background .15s, transform .12s, box-shadow .15s; }
.menu-btn svg { display: block; }
.menu-btn:hover { background: #eef2ff; color: var(--accent); transform: translateY(-1px);
                  box-shadow: 0 3px 10px rgba(47,107,255,.18); }
.menu-btn:active { transform: scale(.95); }
.profile-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 198px;
                background: var(--card); border: 1px solid var(--line); border-radius: 12px;
                box-shadow: 0 14px 40px rgba(20,30,80,.16); padding: 6px; z-index: 60;
                animation: menuPop .14s ease; }
@keyframes menuPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.profile-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px;
                  color: var(--text); font-size: 13px; font-weight: 500; }
.profile-menu a:hover { background: #f2f5fb; text-decoration: none; transform: translateX(3px); }
.profile-menu a.danger { color: var(--bad); }
.profile-menu a.danger:hover { background: var(--bad-bg); }
.profile-menu svg { opacity: .72; transition: transform .18s ease; }
/* animações dos itens: entrada escalonada ao abrir + slide e ícone no hover */
.profile-menu a { transition: background .14s ease, transform .14s ease, color .12s ease;
                  animation: menuItem .24s ease backwards; }
.profile-menu a:nth-child(1) { animation-delay: .03s; }
.profile-menu a:nth-child(2) { animation-delay: .08s; }
.profile-menu a:nth-child(3) { animation-delay: .13s; }
.profile-menu a:hover svg { transform: scale(1.18); }
.profile-menu a.danger:hover svg { transform: translateX(2px) scale(1.06); }
@keyframes menuItem { from { opacity: 0; transform: translateX(-7px); } }

/* ===== Pagina Editar perfil ===== */
.avatar-lg { width: 96px; height: 96px; font-size: 34px; border-width: 3px; }
.perfil-card { max-width: 560px; }
.perfil-form { display: flex; flex-direction: column; gap: 18px; }
.perfil-avatar-row { display: flex; align-items: center; gap: 20px; }
.perfil-avatar-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-file { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px;
            background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer;
            width: max-content; transition: transform .12s, box-shadow .15s; }
.btn-file:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(47,107,255,.25); }
.chk-remover { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.perfil-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.perfil-field input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
                      background: var(--card); color: var(--text); font-weight: 400; }
.perfil-readonly { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.perfil-foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
/* animacoes dos botoes do perfil (linguagem do projeto: hover lift + glow + active scale + icone) */
.btn-file, .perfil-foot button.ok, .perfil-foot .ghost {
  transition: transform .14s ease, box-shadow .16s ease, filter .12s ease, color .12s, border-color .12s; }
.btn-file:active { transform: scale(.97); }
.perfil-foot button.ok:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(18,183,106,.30); filter: brightness(1.04); }
.perfil-foot button.ok:active { transform: scale(.97); }
.perfil-foot button.ok svg { transition: transform .18s ease; }
.perfil-foot button.ok:hover svg { transform: scale(1.18); }
.perfil-foot .ghost:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,30,80,.12);
  border-color: var(--accent); color: var(--accent); }
.perfil-foot .ghost:active { transform: scale(.97); }

/* dark */
[data-theme="dark"] .menu-btn:hover { background: rgba(74,130,255,.16); }
[data-theme="dark"] .profile-menu a:hover { background: #161618; }
[data-theme="dark"] .avatar { border-color: #2c2c31; }

/* ============================ LANDING PAGE (apresentacao) ============================ */
body.landing { background: #f4f6fb; color: var(--text); }
.landing .logo { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:8px; background: linear-gradient(135deg,#2f6bff,#7a5cff); }
.lp-nav { position: sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding: 15px 7vw; background: rgba(244,246,251,.82); backdrop-filter: blur(10px); border-bottom:1px solid rgba(20,30,80,.06); }
.lp-brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; color:var(--text); text-decoration:none; }
.lp-brand .muted { font-weight:500; font-size:13px; }
.lp-links { display:flex; align-items:center; gap:6px; }
.lp-links > a { color: var(--muted); font-weight:600; font-size:14px; padding:8px 14px; border-radius:999px; transition: color .15s, background .15s; }
.lp-links > a:hover { color: var(--text); background:#eef2ff; text-decoration:none; }
.lp-enter { color:#fff !important; background: linear-gradient(135deg,#2f6bff,#5b8cff) !important;
  box-shadow:0 6px 16px rgba(47,107,255,.28); transition: transform .14s, box-shadow .16s; }
.lp-enter:hover { transform: translateY(-1px); box-shadow:0 9px 22px rgba(47,107,255,.36); }
.lp-enter:active { transform: scale(.97); }
.lp-hero { position:relative; text-align:center; padding: 76px 7vw 38px; overflow:hidden; }
.lp-glow { position:absolute; inset:-40% 0 auto 0; height:560px; z-index:0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(91,140,255,.32), rgba(122,92,255,.15) 45%, transparent 72%); }
.lp-hero > *:not(.lp-glow) { position:relative; z-index:1; }
/* entrada animada do hero (escalonada) — badge, titulo, subtitulo, botoes */
.lp-hero .lp-badge { animation: lpUp .5s ease both; }
.lp-hero h1 { animation: lpUp .5s ease .09s both; }
.lp-hero .lp-sub { animation: lpUp .5s ease .18s both; }
.lp-hero .lp-cta { animation: lpUp .5s ease .27s both; }
@keyframes lpUp { from { opacity: 0; transform: translateY(18px); } }
.lp-badge { display:inline-block; padding:7px 15px; border-radius:999px; background:#fff;
  border:1px solid rgba(47,107,255,.22); color: var(--accent); font-weight:600; font-size:13px;
  box-shadow:0 4px 14px rgba(20,30,80,.06); margin-bottom:22px; }
.lp-hero h1 { font-size: clamp(34px, 6vw, 62px); line-height:1.05; letter-spacing:-.02em; font-weight:800; margin:0 0 18px; color:#101935; }
.lp-sub { max-width:620px; margin:0 auto 30px; font-size: clamp(15px,2vw,18px); line-height:1.6; color: var(--muted); }
.lp-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.lp-btn-primary { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px;
  background: linear-gradient(135deg,#2f6bff,#5b8cff); color:#fff; font-weight:700; font-size:15px;
  box-shadow:0 10px 24px rgba(47,107,255,.32); transition: transform .14s, box-shadow .16s, filter .12s; }
.lp-btn-primary:hover { transform: translateY(-2px); box-shadow:0 14px 30px rgba(47,107,255,.42); filter:brightness(1.03); text-decoration:none; }
.lp-btn-primary:active { transform: scale(.97); }
.lp-btn-primary.lg { padding:15px 34px; font-size:16px; }
.lp-btn-ghost { display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--text); font-weight:600; font-size:15px;
  transition: transform .14s, box-shadow .16s, border-color .14s, color .14s; }
.lp-btn-ghost:hover { transform: translateY(-2px); box-shadow:0 8px 20px rgba(20,30,80,.1); border-color: var(--accent); color:var(--accent); text-decoration:none; }
.lp-btn-ghost:active { transform: scale(.97); }
.lp-preview { padding: 8px 7vw 66px; display:flex; justify-content:center; }
.lp-mock { width:100%; max-width:920px; background:#fff; border:1px solid rgba(20,30,80,.07); border-radius:20px;
  box-shadow:0 30px 70px rgba(20,30,80,.16); padding:18px; }
.lp-mock-top { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 14px; }
.lp-mock-brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; }
.lp-mock-brand .logo { width:22px; height:22px; }
.lp-mock-hi { font-size:13px; color:var(--muted); font-weight:600; }
.lp-mock-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.lp-k { display:flex; align-items:center; gap:10px; background:#f7f9fc; border:1px solid var(--line); border-radius:13px; padding:12px 13px; }
.lp-k-ic { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; font-weight:800; font-size:13px; flex:none; }
.lp-k-ic.blue{ background:#e7eeff; color:#2f6bff } .lp-k-ic.green{ background:#e7f8ef; color:#12b76a }
.lp-k-ic.amber{ background:#fef3e6; color:#f79009 } .lp-k-ic.purple{ background:#efe9ff; color:#7a5cff }
.lp-k-l { font-size:11.5px; color:var(--muted); } .lp-k-v { font-size:18px; font-weight:800; color:#101935; }
.lp-mock-chart { margin-top:12px; background:#f7f9fc; border:1px solid var(--line); border-radius:13px; padding:14px; }
.lp-chart-hd { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:12px; }
.lp-dot-leg i { display:inline-block; width:9px; height:9px; border-radius:3px; vertical-align:middle; margin:0 2px 0 8px; }
.lp-dot-leg i.b{ background:#2f6bff } .lp-dot-leg i.l{ background:#7a5cff }
.lp-bars { display:flex; align-items:flex-end; gap:10px; height:118px; }
.lp-bars i { flex:1; border-radius:6px 6px 0 0; background: linear-gradient(180deg,#5b8cff,#2f6bff); }
.lp-features { padding: 22px 7vw 58px; }
.lp-sec-hd { text-align:center; max-width:600px; margin:0 auto 36px; }
.lp-sec-hd h2 { font-size: clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.02em; margin:0 0 10px; color:#101935; }
.lp-sec-hd p { color:var(--muted); font-size:16px; line-height:1.55; }
.lp-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1120px; margin:0 auto; }
.lp-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 20px; transition: transform .16s ease, box-shadow .18s ease; }
.lp-card:hover { transform: translateY(-4px); box-shadow:0 16px 36px rgba(20,30,80,.12); }
.lp-card-ic { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; margin-bottom:14px; }
.lp-card-ic.blue{ background:#e7eeff; color:#2f6bff } .lp-card-ic.green{ background:#e7f8ef; color:#12b76a }
.lp-card-ic.amber{ background:#fef3e6; color:#f79009 } .lp-card-ic.purple{ background:#efe9ff; color:#7a5cff }
.lp-card h3 { font-size:17px; font-weight:700; margin:0 0 8px; color:#101935; }
.lp-card p { font-size:13.5px; line-height:1.55; color:var(--muted); margin:0; }
.lp-final { padding: 18px 7vw 66px; }
.lp-final-card { max-width:1120px; margin:0 auto; text-align:center; border-radius:24px; padding:54px 30px;
  background: linear-gradient(135deg,#2f6bff,#7a5cff); color:#fff; box-shadow:0 24px 60px rgba(47,107,255,.3); }
.lp-final-card h2 { font-size: clamp(24px,3.6vw,34px); font-weight:800; margin:0 0 10px; }
.lp-final-card p { opacity:.92; font-size:16px; margin:0 0 26px; }
.lp-final-card .lp-btn-primary { background:#fff; color:#2f6bff; box-shadow:0 10px 26px rgba(0,0,0,.18); }
.lp-final-card .lp-btn-primary:hover { filter:none; box-shadow:0 14px 32px rgba(0,0,0,.24); }
.lp-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding: 24px 7vw 40px; border-top:1px solid rgba(20,30,80,.06); color:var(--muted); font-size:13px; }
.lp-brand.sm { font-size:14px; font-weight:600; }
.lp-foot a { color:var(--muted); } .lp-foot a:hover { color:var(--accent); }
@media (max-width: 820px) {
  .lp-mock-kpis { grid-template-columns:repeat(2,1fr); }
  .lp-cards { grid-template-columns:repeat(2,1fr); }
  .lp-links > a:not(.lp-enter) { display:none; }
}
@media (max-width: 520px) { .lp-cards { grid-template-columns:1fr; } }

/* ===== Datepicker (flatpickr) no tema do painel — aba Posts ===== */
.flatpickr-calendar { border-radius: 16px; border: 1px solid var(--line); padding: 6px;
  /* largura travada no grid de dias (238) + padding(12) + borda(2) = 252; senao o default 307.875px
     do flatpickr deixa ~70px de "parte branca" a direita e joga o cabecalho/setas pra fora do grid */
  width: 252px; box-shadow: 0 16px 46px rgba(20,30,80,.18); font-family: inherit; }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months { padding-top: 4px; }
.flatpickr-current-month, .flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months { font-weight: 700; color: var(--text); font-size: 15px; }
.flatpickr-weekday { color: var(--muted); font-weight: 600; font-size: 12px; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--muted); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); }
.flatpickr-day { border-radius: 9px; color: var(--text); font-weight: 500; max-width:34px; height:33px; line-height:32px; font-size:13px; }
/* calendario mais compacto (estava grande demais) */
.flatpickr-days, .flatpickr-rContainer, .flatpickr-weekdaycontainer, .flatpickr-weekdays { width: 238px; }
.dayContainer { width: 238px; min-width: 238px; max-width: 238px; }
.flatpickr-weekday { font-size: 11.5px; }
.flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-monthDropdown-months { font-size: 14px; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { padding: 9px 10px; }
.flatpickr-day:hover, .flatpickr-day:focus { background: #eef2ff; border-color: transparent; }
.flatpickr-day.today { border-color: var(--accent); color: var(--accent); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus,
.flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 4px 12px rgba(47,107,255,.32); }
.flatpickr-day.inRange { background: #eef2ff; border-color: #eef2ff; box-shadow: -5px 0 0 #eef2ff, 5px 0 0 #eef2ff; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #c4ccd8; }
.flatpickr-day.flatpickr-disabled:hover { background: transparent; }
/* o campo (altInput) do flatpickr herda o estilo dos inputs do filtro */
.posts-filter .ff input.flatpickr-input.active, .posts-filter .ff input.form-control { color: var(--text); }
/* campo De/Ate: aparencia antiga (icone de calendario a direita + dd/mm/aaaa via placeholder no JS) */
.posts-filter .ff input { padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7589' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; }
/* dark */
[data-theme="dark"] .flatpickr-calendar { background: #0e0e10; border-color: #2c2c31; box-shadow: 0 16px 46px rgba(0,0,0,.5); }
[data-theme="dark"] .flatpickr-current-month, [data-theme="dark"] .flatpickr-current-month input.cur-year,
[data-theme="dark"] .flatpickr-weekday, [data-theme="dark"] .flatpickr-day { color: var(--text); }
[data-theme="dark"] .flatpickr-day:hover, [data-theme="dark"] .flatpickr-day:focus { background: #26262a; }
[data-theme="dark"] .flatpickr-day.inRange { background:#2c2c31; border-color:#2c2c31; box-shadow:-5px 0 0 #2c2c31,5px 0 0 #2c2c31; }
[data-theme="dark"] .flatpickr-day.flatpickr-disabled, [data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay { color: #54545c; }
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg, [data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: #9aa4b2; }

/* ===== Calendario flatpickr v2: cabecalho compacto, setas agrupadas, ano dropdown, anim ===== */
.flatpickr-months { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 8px 10px 2px; }
.flatpickr-months .flatpickr-month { flex: 0 1 auto; order: 0; height: auto; overflow: visible; }
.flatpickr-current-month { position: static; left: auto; width: auto; height: auto; padding: 0;
  display: inline-flex; align-items: center; gap: 6px; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; font-size: 14px; color: var(--text);
  padding: 2px 4px; border-radius: 7px; -webkit-appearance: auto; appearance: auto; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { color: var(--accent); background: #eef2ff; }
.flatpickr-current-month .numInputWrapper { display: none; }   /* spinner de ano escondido -> vira dropdown (JS) */
.fp-year-sel { -webkit-appearance: auto; appearance: auto; border: 0; background: transparent;
  font: inherit; font-weight: 700; font-size: 14px; color: var(--text); cursor: pointer; padding: 2px 2px; border-radius: 7px; }
.fp-year-sel:hover { color: var(--accent); background: #eef2ff; }
/* setas saem dos cantos absolutos -> fluxo, lado a lado, perto do mes/ano */
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  /* centraliza o svg nas DUAS setas (habilitada e desabilitada) pra nao "subir" a da direita
     em mes sem futuro: sem isto, a desabilitada (display:flex) cola o icone no topo */
  position: static; flex: none; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 6px; border-radius: 8px; }
.flatpickr-months .flatpickr-prev-month { order: 1; }
.flatpickr-months .flatpickr-next-month { order: 2; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: #eef2ff; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; }
/* dias desabilitados (futuro) menos "em branco" — cinza visivel */
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #aeb7c4; }
/* animacoes: abertura + dias */
.flatpickr-calendar.open { animation: fpOpen .17s cubic-bezier(.34,1.3,.5,1); }
@keyframes fpOpen { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.flatpickr-day { transition: background .13s ease, color .13s ease, transform .1s ease, box-shadow .15s ease; }
.flatpickr-day:hover { transform: translateY(-1px); }
.flatpickr-day:active { transform: scale(.9); }
/* dark */
[data-theme="dark"] .fp-year-sel, [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--text); }
[data-theme="dark"] .fp-year-sel:hover, [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover, [data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover { background: #26262a; }
[data-theme="dark"] .flatpickr-day.flatpickr-disabled, [data-theme="dark"] .flatpickr-day.prevMonthDay, [data-theme="dark"] .flatpickr-day.nextMonthDay { color: #5a5a63; }
/* mantem AMBAS as setas visiveis lado a lado (a indisponivel esmaecida em vez de sumir) */
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled { display: flex; opacity: .32; pointer-events: none; }

/* ============================ ABA CRIATIVOS (upload + biblioteca) ============================
   Botoes e form do upload ganham a linguagem de animacao do painel: hover lift + glow, active
   scale, dropzone com drag&drop + preview, e cards da biblioteca com entrada escalonada.
   Tudo escopado em body.page-creatives para nao vazar pras outras abas.
   SEM gate de prefers-reduced-motion de proposito — mesma convencao do resto do painel
   (o dono roda o Windows com efeitos off, mas pediu as animacoes). */

/* ---- icone do cabecalho do estudio de envio (.cr-studio-hd) ---- */
.page-creatives .cr-up-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: #eef2ff; color: var(--accent); flex: none; }

/* ---- corpo do form (grade de 2 colunas no estúdio de envio) ---- */
.page-creatives .cr-upload { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px;
  align-items: start; animation: crFormIn .3s ease both; }
.page-creatives .cr-field-wide { grid-column: 1 / -1; }
.page-creatives .cr-field-wide:not(.cr-field) { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@keyframes crFormIn { from { opacity: 0; transform: translateY(-5px); } }
.page-creatives .cr-flabel { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.page-creatives .cr-upload .ff { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.page-creatives .cr-upload .ff > span { color: var(--muted); font-size: 12.5px; }
.page-creatives .cr-upload .ff input[type=text],
.page-creatives .cr-upload .ff select { font: inherit; font-weight: 400; background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 14px; height: 40px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.page-creatives .cr-upload .ff input[type=text]:hover,
.page-creatives .cr-upload .ff select:hover { border-color: #c6d2e8; }
.page-creatives .cr-upload .ff input[type=text]:focus,
.page-creatives .cr-upload .ff select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,.16); }
.page-creatives .cr-upload .ff select { appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer; padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a95a8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
.page-creatives .cr-upload-note { margin: 2px 0 0; font-size: .82em; line-height: 1.5; }

/* ---- dropzone ---- */
.page-creatives .cr-drop { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 118px; border: 1.6px dashed #c9d4e8; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #fafbff, #f3f7fd);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .2s ease, transform .14s ease; }
.page-creatives .cr-drop:hover { border-color: var(--accent); background: #eef4ff; }
.page-creatives .cr-drop.dragover { border-style: solid; border-color: var(--accent); background: #e6efff;
  box-shadow: 0 0 0 4px rgba(47,107,255,.16); transform: scale(1.008); }
.page-creatives .cr-drop.has-file { border-style: solid; border-color: var(--line); background: #fff; }
.page-creatives .cr-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1; }
.page-creatives .cr-drop-body { position: relative; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 16px; }
/* display:flex sobreporia o atributo [hidden] (UA tem especificidade menor) — restaura o ocultar */
.page-creatives .cr-drop-body[hidden], .page-creatives .cr-drop-preview[hidden] { display: none; }
.page-creatives .cr-drop-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #e6eeff; color: var(--accent); margin-bottom: 2px;
  transition: transform .26s cubic-bezier(.34,1.56,.64,1), background-color .18s; }
.page-creatives .cr-drop:hover .cr-drop-ico { transform: translateY(-3px) scale(1.07); background: #d9e5ff; }
.page-creatives .cr-drop.dragover .cr-drop-ico { animation: crBob .75s ease-in-out infinite; background: #d9e5ff; }
@keyframes crBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.page-creatives .cr-drop-text { display: flex; flex-direction: column; gap: 1px; font-size: 14px; color: var(--text); }
.page-creatives .cr-drop-text b { color: var(--accent); font-weight: 700; }
.page-creatives .cr-drop-text span { color: var(--muted); font-weight: 500; font-size: 13px; }
.page-creatives .cr-drop-hint { font-size: 11.5px; color: var(--muted); }

/* preview do arquivo escolhido */
.page-creatives .cr-drop-preview { position: relative; z-index: 0; pointer-events: none;
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px;
  animation: crPreviewIn .28s cubic-bezier(.22,.61,.36,1) both; }
@keyframes crPreviewIn { from { opacity: 0; transform: scale(.96); } }
.page-creatives .cr-drop-thumb { width: 74px; height: 74px; object-fit: cover; border-radius: 11px; flex: none;
  border: 1px solid var(--line); box-shadow: 0 3px 10px rgba(16,24,40,.12); }
.page-creatives .cr-drop-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.page-creatives .cr-drop-name { font-weight: 600; font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-creatives .cr-drop-dim { font-size: 12px; color: var(--muted); }
.page-creatives .cr-drop-clear { position: relative; z-index: 2; pointer-events: auto; flex: none;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 9px;
  background: #fff; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  transition: transform .15s ease, background-color .14s, color .14s, border-color .14s, box-shadow .16s; }
.page-creatives .cr-drop-clear:hover { background: var(--bad-bg); color: var(--bad); border-color: var(--bad);
  transform: rotate(90deg); box-shadow: 0 3px 10px rgba(240,68,56,.24); }
.page-creatives .cr-drop-clear:active { transform: rotate(90deg) scale(.9); box-shadow: none; }

/* ---- botoes de acao da aba (enviar / filtrar / aprovar = primary; rejeitar/arquivar/salvar = ghost) ---- */
.page-creatives button.primary, .page-creatives .filter-go { display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; transition: transform .15s ease, box-shadow .18s ease, filter .12s ease; }
.page-creatives button.primary:hover, .page-creatives .filter-go:hover {
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(47,107,255,.30); filter: brightness(1.05); }
.page-creatives button.primary:active, .page-creatives .filter-go:active { transform: translateY(0) scale(.97); box-shadow: none; }
.page-creatives button.primary svg { transition: transform .22s ease; }
.page-creatives button.primary:hover svg { transform: translateY(-2px) scale(1.12); }

.page-creatives .ghost { transition: transform .15s ease, box-shadow .18s ease, border-color .14s, color .14s, background-color .14s; }
.page-creatives .ghost:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(16,24,40,.10);
  border-color: var(--accent); color: var(--accent); }
.page-creatives .ghost:active { transform: translateY(0) scale(.97); box-shadow: none; }
.page-creatives .clearf { transition: color .14s ease; }
.page-creatives .clearf:hover { color: var(--accent); }

/* ---- cards da biblioteca: entrada escalonada + lift no hover + zoom na imagem ---- */
.page-creatives .cr-card { animation: crCardIn .42s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(min(var(--i, 0), 12) * 45ms);
  transition: transform .18s ease, box-shadow .2s ease, border-color .15s ease; }
@keyframes crCardIn { from { opacity: 0; transform: translateY(14px); } }
.page-creatives .cr-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,24,40,.14); border-color: #d6e0f1; }
.page-creatives .cr-card img { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.page-creatives .cr-card:hover img { transform: scale(1.05); }
/* mini-form "Editar" dentro do card: alinha os campos nativos ao resto da aba */
.page-creatives .cr-card input[type=text], .page-creatives .cr-card select { font: inherit; font-size: 13px;
  background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  transition: border-color .15s ease, box-shadow .15s ease; }
.page-creatives .cr-card input[type=text]:focus, .page-creatives .cr-card select:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,.16); }
[data-theme="dark"] .page-creatives .cr-card input[type=text],
[data-theme="dark"] .page-creatives .cr-card select { background: #000000; color: #c2cad6; border-color: #2c2c31; }

/* ---- tema escuro ---- */
[data-theme="dark"] .page-creatives .cr-up-ico { background: rgba(74,130,255,.16); }
[data-theme="dark"] .page-creatives .cr-upload .ff input[type=text],
[data-theme="dark"] .page-creatives .cr-upload .ff select { background: #000000; color: #c2cad6; border-color: #2c2c31; }
[data-theme="dark"] .page-creatives .cr-upload .ff input[type=text]:hover,
[data-theme="dark"] .page-creatives .cr-upload .ff select:hover { border-color: #3a3a44; }
[data-theme="dark"] .page-creatives .cr-drop { border-color: #30303a; background: linear-gradient(180deg, #141416, #0c0c0e); }
[data-theme="dark"] .page-creatives .cr-drop:hover { border-color: var(--accent); background: #16161a; }
[data-theme="dark"] .page-creatives .cr-drop.dragover { background: #1c1c22; border-color: var(--accent); }
[data-theme="dark"] .page-creatives .cr-drop.has-file { background: #000000; border-color: #2c2c31; }
[data-theme="dark"] .page-creatives .cr-drop-ico { background: rgba(74,130,255,.16); }
[data-theme="dark"] .page-creatives .cr-drop:hover .cr-drop-ico,
[data-theme="dark"] .page-creatives .cr-drop.dragover .cr-drop-ico { background: rgba(74,130,255,.26); }

/* ============ NOVA NAVEGAÇÃO: sidebar + topbar (body.has-sidebar / NEW_NAV_ENABLED) ============
   Reversível por flag: TUDO escopado em body.has-sidebar; com a flag OFF a nav clássica fica intacta.
   Usa as variáveis de tema (--card/--line/--text/--muted/--accent) → respeita claro/escuro.
   Recolhível (.nav-collapsed, lembrado no localStorage) e responsivo (overlay no mobile via .nav-open). */
:root { --sidebar-w: 248px; --sidebar-cw: 72px; }

body.has-sidebar .sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 40;
  background: var(--card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 14px 12px; overflow-y: auto;
  transition: width .18s ease, transform .2s ease;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; }
.sb-logo { width: 30px; height: 30px; border-radius: 9px; flex: none; display: block; object-fit: cover;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 10px rgba(47,107,255,.3); }
/* logo + nome viram um botão que recarrega a página (mesmo visual da marca) */
.sb-brand-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer; border-radius: 8px; transition: opacity .14s ease; }
.sb-brand-link:hover { opacity: .82; }
.sb-brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sb-title { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.sb-title b { font-size: 14.5px; letter-spacing: -.01em; }
.sb-title small { font-size: 11px; color: var(--muted); }
/* mesmo estilo + animação do botão do menu de perfil (.menu-btn) */
.sb-collapse { margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex: none;
  transition: background .15s, transform .12s, box-shadow .15s; }
.sb-collapse:hover { background: #eef2ff; color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(47,107,255,.18); }
.sb-collapse:active { transform: scale(.95); }
.sb-collapse svg { display: block; transition: transform .2s ease; }
[data-theme="dark"] .sb-collapse:hover { background: rgba(74,130,255,.16); }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-group { margin-top: 10px; }
.sb-gl { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--muted); text-transform: uppercase;
  padding: 6px 10px; opacity: .82; white-space: nowrap; }
.sb-link { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px;
  color: var(--text); font-size: 13.5px; font-weight: 500; text-decoration: none; position: relative;
  transition: background .14s ease, color .14s ease; }
.sb-link .sb-ico { display: grid; place-items: center; flex: none; transition: transform .2s ease; }
.sb-link .sb-ico svg { width: 18px; height: 18px; }
.sb-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-link:hover { background: rgba(120,132,156,.13); text-decoration: none; }
.sb-link:hover .sb-ico { transform: translateY(-1px); }
.sb-link.active { background: rgba(47,107,255,.12); color: var(--accent); font-weight: 600; }
.sb-link.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent); }
.sb-link.danger:hover { background: rgba(240,68,56,.13); color: #e0413a; }

/* conteúdo deslocado para a direita da sidebar */
body.has-sidebar .topbar,
body.has-sidebar > .wrap,
body.has-sidebar > .foot { margin-left: var(--sidebar-w); transition: margin-left .18s ease; }
body.has-sidebar > .wrap { max-width: none; }
body.has-sidebar > .foot { max-width: none; }

/* topbar */
body.has-sidebar .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  background: var(--card); border-bottom: 1px solid var(--line); padding: 11px 22px; }
.tb-burger { display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); place-items: center; cursor: pointer; }
.tb-search { display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 11px; padding: 8px 12px; width: 340px; max-width: 42vw; color: var(--muted); }
.tb-search input { border: 0; background: transparent; outline: 0; font: inherit; font-size: 13.5px; color: var(--text); width: 100%; }
.tb-search input::placeholder { color: var(--muted); }
.tb-kbd { margin-left: auto; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 6px; background: var(--card); white-space: nowrap; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tb-icon { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: background .14s, transform .14s; }
.tb-icon:hover { background: var(--bg); color: var(--text); transform: translateY(-1px); text-decoration: none; }
.topbar .who { display: flex; align-items: center; gap: 8px; position: relative; }

/* recolhido (desktop) */
body.has-sidebar.nav-collapsed .sidebar { width: var(--sidebar-cw); }
body.has-sidebar.nav-collapsed .topbar,
body.has-sidebar.nav-collapsed > .wrap,
body.has-sidebar.nav-collapsed > .foot { margin-left: var(--sidebar-cw); }
body.nav-collapsed .sb-brand-link, body.nav-collapsed .sb-title, body.nav-collapsed .sb-lbl, body.nav-collapsed .sb-gl, body.nav-collapsed .sb-logo { display: none; }
body.nav-collapsed .sb-brand { justify-content: center; padding: 6px 0 14px; }
body.nav-collapsed .sb-collapse { margin: 0; }
body.nav-collapsed .sb-collapse svg { transform: rotate(180deg); }
body.nav-collapsed .sb-link { justify-content: center; padding: 10px; }
body.nav-collapsed .sb-link.active::before { left: -10px; }

/* mobile: sidebar vira overlay */
.sb-backdrop { position: fixed; inset: 0; background: rgba(8,12,22,.42); z-index: 39; }
@media (max-width: 880px) {
  body.has-sidebar .sidebar { transform: translateX(-100%); box-shadow: 0 14px 44px rgba(8,12,22,.22); width: var(--sidebar-w); }
  body.has-sidebar.nav-open .sidebar { transform: none; }
  body.has-sidebar .topbar,
  body.has-sidebar > .wrap,
  body.has-sidebar > .foot { margin-left: 0; }
  body.nav-collapsed .sb-title, body.nav-collapsed .sb-lbl, body.nav-collapsed .sb-gl, body.nav-collapsed .sb-logo { display: revert; }
  body.nav-collapsed .sb-brand-link { display: flex; }
  body.nav-collapsed .sb-link { justify-content: flex-start; padding: 9px 10px; }
  .tb-burger { display: grid; }
  .tb-search { width: auto; flex: 1; max-width: none; }
}
[data-theme="dark"] .page-creatives .cr-drop-clear { background: #0e0e10; border-color: #2c2c31; }
[data-theme="dark"] .page-creatives .cr-drop-thumb { border-color: #2c2c31; }
/* card sem imagem (arquivo sumiu — ex.: storage local apagado num redeploy): placeholder claro */
.page-creatives .cr-thumb { position: relative; aspect-ratio: 1.91 / 1; overflow: hidden;
  background: var(--bg); border-radius: var(--radius) var(--radius) 0 0; }
.page-creatives .cr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-creatives .cr-thumb-missing { display: none; }
.page-creatives .cr-thumb-missing.show { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px; padding: 12px; text-align: center;
  color: var(--muted); font-size: 12px; font-weight: 600; }
.page-creatives .cr-thumb-missing svg { opacity: .55; }

/* ---- cartões de número (KPIs): ícones coloridos + linha descritiva ---- */
.page-creatives .stat { align-items: flex-start; }
.page-creatives .stat .val { font-size: 22px; }
.page-creatives .stat .desc { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.page-creatives .stat.blue .ico { background: #eef2ff; color: var(--accent); }
.page-creatives .stat.amber .ico { background: var(--warn-bg); color: var(--warn); }
.page-creatives .stat.purple .ico { background: #f1ecfe; color: #7a5af8; }
[data-theme="dark"] .page-creatives .stat.blue .ico { background: rgba(74,130,255,.16); color: #9bb8ff; }
[data-theme="dark"] .page-creatives .stat.purple .ico { background: rgba(122,90,248,.22); color: #b9a6ff; }

/* ---- estúdio de envio: 2 colunas (form | boas práticas + fluxo) ---- */
/* dois cards separados (form | boas práticas + fluxo), lado a lado com espaço entre eles */
/* align-items:stretch → os 2 cards ficam da mesma altura; margin-bottom devolve o espaço que o
   card único tinha (senão o card de busca de baixo cola no estúdio) */
.page-creatives .cr-studio { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.page-creatives .cr-studio > .card { margin: 0; }
.page-creatives .cr-studio-main { min-width: 0; }
.page-creatives .cr-studio-hd { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 15px; margin-bottom: 15px; }
.page-creatives .cr-studio-side { display: flex; flex-direction: column; gap: 20px; }
.page-creatives .cr-tips h4, .page-creatives .cr-flow h4 { margin: 0 0 12px; font-size: 13px; }
.page-creatives .cr-tips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.page-creatives .cr-tips-list li { display: flex; gap: 10px; align-items: flex-start; }
.page-creatives .cr-tips-list li > div { min-width: 0; }
.page-creatives .cr-tip-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: #eef2ff; color: var(--accent); flex: none; }
.page-creatives .cr-tip-ico.tip-blue { background: #eef2ff; color: var(--accent); }
.page-creatives .cr-tip-ico.tip-amber { background: var(--warn-bg); color: var(--warn); }
.page-creatives .cr-tip-ico.tip-green { background: var(--good-bg); color: var(--good); }
.page-creatives .cr-tips-list b { display: block; font-size: 13px; }
.page-creatives .cr-tips-list span { font-size: 12px; color: var(--muted); }
/* fluxo: stepper horizontal com ícone em cada etapa + conector tracejado/seta */
.page-creatives .cr-flow-steps { display: flex; align-items: flex-start; }
.page-creatives .cr-flow-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto;
  width: 60px; text-align: center; font-size: 9.5px; color: var(--muted); line-height: 1.25; }
.page-creatives .cr-flow-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--card); border: 1.5px solid var(--line); color: var(--muted); }
.page-creatives .cr-flow-step.is-active { color: var(--text); font-weight: 600; }
.page-creatives .cr-flow-step.is-active .cr-flow-ico { background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(47,107,255,.32); }
.page-creatives .cr-flow-arrow { flex: 1 1 auto; min-width: 12px; display: flex; align-items: center; gap: 1px;
  margin-top: 13px; color: var(--line); }
.page-creatives .cr-flow-arrow .cr-flow-dash { flex: 1; border-top: 1.5px dashed currentColor; height: 0; }
/* stepper dinâmico (Fluxo do criativo): etapas concluídas + conectores percorridos + pop na etapa atual */
.page-creatives .cr-flow-step.is-done { color: var(--text); }
.page-creatives .cr-flow-step.is-done .cr-flow-ico { border-color: var(--accent); color: var(--accent); background: rgba(47,107,255,.10); }
.page-creatives .cr-flow-arrow.is-on { color: var(--accent); }
.page-creatives .cr-flow-step.is-active .cr-flow-ico { animation: crFlowPop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes crFlowPop { 0% { transform: scale(.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ============ Revisão da Campanha do Zero (zero_campaign_preview) ============ */
/* botões de ação no MESMO tamanho (Aprovar criação pausada / Rejeitar / Cancelar) + animação de hover */
.page-zc-preview .primary, .page-zc-preview .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 10px 20px; font-size: 14px; line-height: 1.2; font-weight: 600; border-radius: 11px;
  transition: transform .16s ease, box-shadow .18s ease, filter .12s ease, border-color .15s ease, color .15s ease; }
.page-zc-preview .ghost { background: var(--card); border: 1px solid var(--line); color: var(--text); }
.page-zc-preview .primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(47,107,255,.34); filter: brightness(1.05); }
.page-zc-preview .ghost:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(16,24,40,.12); border-color: var(--accent); color: var(--accent); text-decoration: none; }
.page-zc-preview .primary:not(:disabled):active, .page-zc-preview .ghost:active { transform: translateY(0) scale(.97); box-shadow: none; }
.page-zc-preview .primary:disabled { opacity: .55; cursor: not-allowed; }
/* form "Editar textos / segmentação": campos em largura total, consistentes e cientes do tema escuro */
.page-zc-preview .ff { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.page-zc-preview .ff > span { font-weight: 600; }
.page-zc-preview .ff input, .page-zc-preview .ff textarea, .page-zc-preview .ff select {
  width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 10px; min-height: 40px; }
.page-zc-preview .ff textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.page-zc-preview .ff input:focus, .page-zc-preview .ff textarea:focus, .page-zc-preview .ff select:focus {
  outline: 2px solid #d4e0ff; border-color: var(--accent); }
.page-zc-preview .ff .sel, .page-zc-preview .ff .sel > .sel-trigger { width: 100%; box-sizing: border-box; }
[data-theme="dark"] .page-zc-preview .ff input, [data-theme="dark"] .page-zc-preview .ff textarea,
[data-theme="dark"] .page-zc-preview .ff select { background: #000; color: #c2cad6; border-color: #2c2c31; color-scheme: dark; }

/* ---- barra de ferramentas: busca + filtros + alternar grade/lista ---- */
.page-creatives .cr-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 16px; }
.page-creatives .cr-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0; flex: 1; }
.page-creatives .cr-filter .ff { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.page-creatives .cr-search { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 200px;
  height: 40px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 0 13px; color: var(--muted);
  transition: border-color .15s ease, box-shadow .15s ease; }
.page-creatives .cr-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,.16); }
.page-creatives .cr-search svg { flex: none; }
.page-creatives .cr-search input { border: 0; background: transparent; outline: 0; font: inherit; font-size: 14px;
  color: var(--text); width: 100%; }
/* botão Buscar: mesma altura (40px) dos demais controles da barra */
.page-creatives .cr-toolbar .filter-go { min-height: 40px; }
.page-creatives .cr-view { display: inline-flex; gap: 2px; flex: none; background: var(--bg); border: 1px solid var(--line);
  border-radius: 11px; padding: 3px; }
.page-creatives .cr-view-btn { display: grid; place-items: center; width: 36px; height: 32px; padding: 0; border: 0;
  background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; transition: background .14s, color .14s; }
.page-creatives .cr-view-btn:hover { color: var(--text); }
.page-creatives .cr-view-btn.is-on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(16,24,40,.12); }

/* ---- grade da biblioteca + modo lista ---- */
.page-creatives .cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
/* borda/sombra explicitas: nao dependem do .card herdado nem do .cr-card global (Sala de Controle, que
   tem border-left:4px) — o card de criativo fica visualmente independente mesmo se o markup mudar. */
.page-creatives .cr-grid > .cr-card { margin: 0; padding: 0; overflow: visible; display: flex; flex-direction: column;
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.page-creatives .cr-card.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 22px rgba(16,24,40,.10); }
.page-creatives .cr-card.is-featured:hover { box-shadow: 0 0 0 1px var(--accent), 0 14px 30px rgba(16,24,40,.16); }
.page-creatives .cr-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.page-creatives .cr-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.page-creatives .pill.ready { background: #e7eeff; color: #3257c4; }
[data-theme="dark"] .page-creatives .pill.ready { background: rgba(74,130,255,.16); color: #9bb8ff; }
.page-creatives .cr-title { font-weight: 600; line-height: 1.25; }
.page-creatives .cr-meta { font-size: .82em; }
.page-creatives .cr-by { font-size: .8em; }
.page-creatives .cr-acts { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.page-creatives .cr-acts .primary, .page-creatives .cr-acts > .ghost { padding: 6px 12px; font-size: .85em; }
.page-creatives .cr-use { text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.page-creatives .cr-use:hover { text-decoration: none; }
/* modo lista: card na horizontal (imagem à esquerda) */
.page-creatives .cr-grid.is-list { grid-template-columns: 1fr; }
.page-creatives .cr-grid.is-list > .cr-card { flex-direction: row; }
.page-creatives .cr-grid.is-list .cr-thumb { width: 240px; flex: none; aspect-ratio: auto; align-self: stretch;
  border-radius: var(--radius) 0 0 var(--radius); }
.page-creatives .cr-grid.is-list .cr-body { flex: 1; }

/* ---- selo DESTAQUE + estrela (favoritar) ---- */
.page-creatives .cr-destaque { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--grad); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(47,107,255,.35); }
.page-creatives .cr-star-form { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.page-creatives .cr-star { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; background: rgba(255,255,255,.92); color: #9aa4b2; box-shadow: 0 2px 8px rgba(16,24,40,.18);
  transition: transform .15s ease, color .15s ease, background .15s ease; }
.page-creatives .cr-star:hover { transform: scale(1.12); color: #f5b301; }
.page-creatives .cr-star.is-on { color: #f5b301; }
.page-creatives .cr-star.is-static { position: absolute; top: 8px; right: 8px; z-index: 2; cursor: default; }
[data-theme="dark"] .page-creatives .cr-star { background: rgba(22,28,38,.92); }

/* ---- menu "..." de ações secundárias (aprovar/rejeitar/arquivar) ---- */
.page-creatives .cr-menu { position: relative; margin: 0; }
.page-creatives .cr-menu-trigger { display: inline-grid; place-items: center; width: 34px; height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--muted); cursor: pointer;
  list-style: none; transition: background .14s, color .14s, border-color .14s, transform .14s; }
.page-creatives .cr-menu-trigger::-webkit-details-marker { display: none; }
.page-creatives .cr-menu-trigger::marker { content: ""; }
.page-creatives .cr-menu-trigger:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.page-creatives .cr-menu[open] .cr-menu-trigger { color: var(--accent); border-color: var(--accent); }
.page-creatives .cr-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 170px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
  display: flex; flex-direction: column; gap: 2px; animation: crMenuIn .16s ease both; }
@keyframes crMenuIn { from { opacity: 0; transform: translateY(-4px); } }
.page-creatives .cr-menu-pop form { margin: 0; }
.page-creatives .cr-menu-item { width: 100%; text-align: left; padding: 8px 11px; border: 0; background: transparent;
  color: var(--text); border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; transition: background .12s, color .12s; }
.page-creatives .cr-menu-item:hover { background: var(--bg); }
.page-creatives .cr-menu-item.ok:hover { background: var(--good-bg); color: var(--good); }
.page-creatives .cr-menu-item.danger:hover { background: var(--bad-bg); color: var(--bad); }

/* ---- formulário "Editar" inline (revelado pelo botão Editar) ---- */
.page-creatives .cr-edit { display: grid; gap: 7px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line);
  animation: crFormIn .22s ease both; }
.page-creatives .cr-edit[hidden] { display: none; }
.page-creatives .cr-edit-acts { display: flex; gap: 7px; }
.page-creatives .cr-edit .primary, .page-creatives .cr-edit .ghost { padding: 6px 12px; font-size: 13px; }

/* ---- tema escuro (componentes novos) ---- */
[data-theme="dark"] .page-creatives .cr-search,
[data-theme="dark"] .page-creatives .cr-menu-trigger { background: #000000; border-color: #2c2c31; }
[data-theme="dark"] .page-creatives .cr-search input { color: #e6e9ef; }
[data-theme="dark"] .page-creatives .cr-view { background: #000000; border-color: #2c2c31; }
[data-theme="dark"] .page-creatives .cr-view-btn.is-on { background: #161618; }
[data-theme="dark"] .page-creatives .cr-tip-ico { background: rgba(74,130,255,.16); }
[data-theme="dark"] .page-creatives .cr-tip-ico.tip-amber { background: var(--warn-bg); color: var(--warn); }
[data-theme="dark"] .page-creatives .cr-tip-ico.tip-green { background: var(--good-bg); color: var(--good); }
[data-theme="dark"] .page-creatives .cr-flow-ico { background: #0e0e10; border-color: #2c2c31; }
[data-theme="dark"] .page-creatives .cr-menu-pop { background: #0e0e10; border-color: #2c2c31; }
[data-theme="dark"] .page-creatives .cr-menu-item:hover { background: #161618; }

/* ---- responsivo: empilha o estúdio e a lista vira coluna única ---- */
@media (max-width: 860px) {
  .page-creatives .cr-studio { grid-template-columns: 1fr; }
  .page-creatives .cr-upload { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-creatives .cr-grid.is-list > .cr-card { flex-direction: column; }
  .page-creatives .cr-grid.is-list .cr-thumb { width: auto; aspect-ratio: 1.91 / 1;
    border-radius: var(--radius) var(--radius) 0 0; }
}

/* ============================ ABA CAMPANHA DO ZERO (montar rascunho) ============================
   Form em seções numeradas, campos estilizados, prévia que mostra o criativo COMPLETO (contain),
   e a linguagem de animação do painel (hover lift/glow, focus ring, entrada). Escopado em
   body.page-zero. SEM gate de prefers-reduced-motion (convenção do projeto — o dono pediu animação). */
.page-zero .z-form { display: grid; gap: 20px; max-width: 760px; padding: 22px 24px;
  animation: zFormIn .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes zFormIn { from { opacity: 0; transform: translateY(10px); } }

/* seções com cabeçalho numerado + divisória */
.page-zero .z-section { display: grid; gap: 13px; }
.page-zero .z-section + .z-section { padding-top: 20px; border-top: 1px solid var(--line); }
.page-zero .z-section-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px;
  color: var(--text); letter-spacing: -.01em; }
.page-zero .z-step { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; flex: none;
  background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 2px 7px rgba(47,107,255,.32); }

/* campos (a classe .ff é "crua" fora das toolbars — aqui ganha o estilo do painel) */
.page-zero .ff { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.page-zero .ff > span { color: var(--muted); font-size: 12.5px; }
.page-zero .ff input[type=text], .page-zero .ff select, .page-zero .ff textarea {
  font: inherit; font-weight: 400; background: #fff; color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.page-zero .ff textarea { min-height: 92px; line-height: 1.5; resize: vertical; }
.page-zero .ff input[type=text]:hover, .page-zero .ff select:hover, .page-zero .ff textarea:hover { border-color: #c6d2e8; }
.page-zero .ff input[type=text]:focus, .page-zero .ff select:focus, .page-zero .ff textarea:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,.16); }
.page-zero .ff select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a95a8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); }
.page-zero .z-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* prévia do criativo — mostra a imagem COMPLETA (contain), nada cortado */
.page-zero .z-prev { position: relative; margin: 2px 0 0; display: grid; place-items: center; min-height: 150px;
  padding: 16px; border: 1.5px dashed #c9d4e8; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #fafbff, #f3f7fd); transition: border-color .18s ease, background-color .18s ease; }
.page-zero .z-prev.has-img { border-style: solid; border-color: var(--line); background: #fbfcfe; }
.page-zero .z-prev img { max-width: 100%; max-height: 340px; object-fit: contain; border-radius: 10px; display: none;
  opacity: 0; transform: scale(.98); box-shadow: 0 8px 24px rgba(16,24,40,.16);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22,.61,.36,1); }
.page-zero .z-prev.has-img img { display: block; opacity: 1; transform: none; }
.page-zero .z-prev-ph { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  color: var(--muted); font-size: 13px; padding: 12px 16px; }
.page-zero .z-prev-ph svg { width: 42px; height: 42px; opacity: .55; }
.page-zero .z-prev.has-img .z-prev-ph { display: none; }
.page-zero .z-prev-cap { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: center;
  display: none; }
.page-zero .z-prev.has-img .z-prev-cap { display: block; animation: fadeIn .3s ease both; }

/* botão "usar texto-modelo" (ghost) + submit (primary) com a linguagem de animação do painel */
.page-zero .ghost { display: inline-flex; align-items: center; gap: 7px; justify-self: start;
  transition: transform .15s ease, box-shadow .18s ease, border-color .14s, color .14s, background-color .14s; }
.page-zero .ghost:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(16,24,40,.10);
  border-color: var(--accent); color: var(--accent); text-decoration: none; }
.page-zero .ghost:active { transform: translateY(0) scale(.97); box-shadow: none; }
.page-zero .z-usetpl svg { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.page-zero .z-usetpl:hover svg { transform: rotate(90deg) scale(1.15); }

.page-zero .z-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-zero .z-foot-note { font-size: .85em; }
.page-zero button.primary { display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s ease, box-shadow .18s ease, filter .12s ease; }
.page-zero button.primary:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(47,107,255,.32); filter: brightness(1.05); }
.page-zero button.primary:active { transform: translateY(0) scale(.97); box-shadow: none; }
.page-zero .z-submit .z-arrow { transition: transform .2s ease; }
.page-zero .z-submit:hover .z-arrow { transform: translateX(4px); }

/* tabela de rascunhos: hover na linha + botão revisar (ghost já coberto acima) */
.page-zero table tbody tr { transition: background-color .14s ease; }
.page-zero table tbody tr:hover { background: #f6f8fd; }

@media (max-width: 560px) { .page-zero .z-grid-2 { grid-template-columns: 1fr; } }

/* tema escuro */
[data-theme="dark"] .page-zero .ff input[type=text], [data-theme="dark"] .page-zero .ff select,
[data-theme="dark"] .page-zero .ff textarea { background: #000000; color: #c2cad6; border-color: #2c2c31; }
[data-theme="dark"] .page-zero .ff input[type=text]:hover, [data-theme="dark"] .page-zero .ff select:hover,
[data-theme="dark"] .page-zero .ff textarea:hover { border-color: #3a3a44; }
[data-theme="dark"] .page-zero .z-prev { border-color: #30303a; background: linear-gradient(180deg, #141416, #0c0c0e); }
[data-theme="dark"] .page-zero .z-prev.has-img { background: #000000; border-color: #2c2c31; }
[data-theme="dark"] .page-zero table tbody tr:hover { background: #161618; }

/* feedback do botão "usar texto-modelo": pulso nos campos + confirmação no botão (o texto-modelo
   pode já estar igual por causa do preenchimento automático — sem isso o clique parecia inerte). */
.page-zero .z-flash { animation: zFieldFlash .7s ease-out; }
@keyframes zFieldFlash { 0% { box-shadow: 0 0 0 0 rgba(47,107,255,.45); } 100% { box-shadow: 0 0 0 9px rgba(47,107,255,0); } }
.page-zero .z-usetpl.z-applied { border-color: var(--good); color: var(--good); }
.page-zero .z-usetpl.z-applied svg { color: var(--good); }

/* botões de texto (modelo + IA) lado a lado + status da geração por IA.
   Os dois com o MESMO tamanho: largura fixa igual (cap p/ não esticar pro form todo) + mesma altura. */
.page-zero .z-tpl-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 510px; }
.page-zero .z-tpl-actions .ghost, .page-zero .z-tpl-actions .z-aibtn {
  flex: 0 1 248px; min-width: 0; box-sizing: border-box; justify-content: center;
  min-height: 40px; padding: 0 14px; font-size: 13px; }
.page-zero .z-tpl-actions .z-ai-msg { flex-basis: 100%; margin-top: 2px; }
.page-zero .z-aibtn { display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer;
  padding: 8px 15px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #7a5cff 0%, #2f6bff 100%); box-shadow: 0 3px 10px rgba(91,76,255,.28);
  transition: transform .15s ease, box-shadow .18s ease, filter .12s ease; }
.page-zero .z-aibtn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(91,76,255,.36); filter: brightness(1.05); }
.page-zero .z-aibtn:active { transform: translateY(0) scale(.97); box-shadow: none; }
.page-zero .z-aibtn:disabled { opacity: .75; cursor: progress; transform: none; filter: none; box-shadow: none; }
.page-zero .z-aibtn .z-ai-ico { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.page-zero .z-aibtn:hover .z-ai-ico { transform: rotate(12deg) scale(1.12); }
.page-zero .z-aibtn.z-loading .z-ai-ico { animation: zSpin .8s linear infinite; transform-origin: 50% 50%; }
@keyframes zSpin { to { transform: rotate(360deg); } }
.page-zero .z-ai-msg { font-size: 12.5px; font-weight: 600; }
.page-zero .z-ai-msg.ok { color: var(--good); }
.page-zero .z-ai-msg.warn { color: var(--warn); }
.page-zero .z-ai-msg.bad { color: var(--bad); }

/* ============ ABA OTIMIZAÇÕES — DESEMPENHO DOS CRIATIVOS (card) ============ */
/* Lista campanhas ATIVAS + seus criativos com métricas e classificação heurística (bom/atenção/
   ruim). Usa as vars de tema → o dark herda sozinho (poucos overrides explícitos no fim). */
.opt-secao { margin: 26px 0 2px; font-size: 17px; }
.opt-secao-sub { margin: 0 0 14px; }

.creatives-perf { margin: 30px 0 6px; }
.cre-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cre-hd-t h2 { margin: 0 0 3px; font-size: 17px; }
.cre-hd-t p { margin: 0; font-size: 13px; max-width: 62ch; }
.cre-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cre-period { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.cre-seg { padding: 5px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, transform .12s; }
.cre-seg:hover { color: var(--text); background: var(--card); transform: translateY(-1px); box-shadow: 0 2px 7px rgba(16,24,40,.12); text-decoration: none; }
.cre-seg.active { background: var(--accent); color: #fff; }
.cre-seg.active:hover { box-shadow: 0 3px 9px rgba(47,107,255,.32); }
.cre-seg:active { transform: translateY(0) scale(.95); box-shadow: none; }

.cre-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 4px;
  padding: 11px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.cre-sum b { color: var(--text); }
.cre-tot { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.cre-tot i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cre-tot.bom { color: #08714a; } .cre-tot.bom i { background: var(--good); }
.cre-tot.ruim { color: #b42318; } .cre-tot.ruim i { background: var(--bad); }

.cre-group { margin-top: 18px; }
.cre-group-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.cre-gt { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cre-gt h3 { margin: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52ch; }
.cre-gmeta { font-size: 12.5px; }
.pill.status.active { background: var(--good-bg); color: #08714a; }

.cre-list { display: flex; flex-direction: column; gap: 10px; }
.cre-row { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(0, 2.3fr) auto;
  gap: 12px 18px; align-items: center; padding: 13px 14px; border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 12px; background: var(--card); }
.cre-row.bom { border-left-color: var(--good); }
.cre-row.ruim { border-left-color: var(--bad); }
.cre-row.atencao { border-left-color: var(--warn); }
.cre-row.teste { border-left-color: var(--muted); }
.cre-row.is-paused { opacity: .72; }

.cre-info { min-width: 0; }
.cre-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cre-bullet { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cre-bullet.bom { background: var(--good); } .cre-bullet.ruim { background: var(--bad); }
.cre-bullet.atencao { background: var(--warn); } .cre-bullet.teste { background: var(--muted); }
.cre-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cre-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; }
.pill.tier { font-size: 11px; font-weight: 700; }
.pill.tier.bom { background: var(--good-bg); color: #08714a; }
.pill.tier.ruim { background: var(--bad-bg); color: #b42318; }
.pill.tier.atencao { background: var(--warn-bg); color: #b54708; }
.pill.tier.teste { background: var(--line); color: var(--muted); }
.pill.ad-paused { background: var(--line); color: var(--muted); font-size: 11px; }
.pill.ad-issue { background: var(--bad-bg); color: #b42318; font-size: 11px; }
.cre-reco { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }

.cre-metrics { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px 12px; }
.cm { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cm span { font-size: 10.5px; color: var(--muted); line-height: 1.2; }
.cm b { font-size: 13.5px; }
.cm.soon b { color: var(--muted); font-weight: 600; font-style: italic; font-size: 12px; }

.cre-act { display: flex; justify-content: flex-end; }
.cre-act form { margin: 0; }
.cre-act button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, filter .15s; }
.cre-act button.danger:hover { transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(240, 68, 56, .32); }
.cre-act button.danger:hover svg { animation: xWobble .45s ease; }
.cre-act button.ok:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(18, 183, 106, .32); }
.cre-act button.ok:hover svg { transform: scale(1.16); }
.cre-act button:active { transform: scale(.97); }

.cre-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }
.cre-foot span { display: inline-flex; align-items: center; gap: 7px; }
.cre-foot svg { flex: none; }
.cre-when { color: var(--muted); }

/* responsivo: empilha info / métricas / ação */
@media (max-width: 920px) {
  .cre-row { grid-template-columns: 1fr; gap: 12px; }
  .cre-act { justify-content: flex-start; }
  .cre-metrics { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
}

/* dark: contrastes que não vêm só das vars de tema */
[data-theme="dark"] .cre-tot.bom, [data-theme="dark"] .pill.tier.bom,
[data-theme="dark"] .pill.status.active { color: #6ee7b7; }
[data-theme="dark"] .cre-tot.ruim, [data-theme="dark"] .pill.tier.ruim,
[data-theme="dark"] .pill.ad-issue { color: #fca5a5; }
[data-theme="dark"] .pill.tier.atencao { color: #fcd34d; }

/* ===================== DASHBOARD v3 — Visão de Tráfego (tudo escopado em .dash) ===================== */
.dash [hidden] { display: none !important; }  /* display:flex/grid abaixo não pode vencer o atributo hidden */
.dash .dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dash .dash-head h1 { font-size: 25px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 9px; letter-spacing: -.02em; }
.dash .dash-head h1 .spark { color: var(--accent); }
.dash .dash-head .sub { color: var(--muted); margin-top: 5px; font-size: 13.5px; }
.dash .dash-toolbar { display: flex; align-items: center; gap: 10px; }
.dash .dash-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; box-shadow: var(--shadow); }
.dash .ff-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.dash .seg { display: inline-flex; gap: 4px; background: #f1f3f8; border-radius: 9px; padding: 3px; }
.dash .seg button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: .12s; }
.dash .seg button.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(16,24,40,.12); }

.dash .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 18px; align-items: stretch; }
.dash .mkpi { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px 13px; box-shadow: var(--shadow); overflow: hidden; min-height: 108px; transition: transform .18s, box-shadow .18s; }
.dash .mkpi:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(16,24,40,.10); }
.dash .mkpi .top { display: flex; align-items: flex-start; justify-content: space-between; }
.dash .mkpi .lbl { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.dash .mkpi .chip { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #eef2ff; color: var(--accent); }
.dash .mkpi .val { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 2px; }
.dash .mkpi .val.good { color: var(--good); }
.dash .mkpi .foot { font-size: 13px; color: var(--muted); margin: 0; padding: 0; max-width: none; }
.dash .mkpi .kfoot { margin-top: 6px; position: relative; z-index: 1; }
.dash .mkpi.grad { background: var(--grad); border: 0; color: #fff; }
.dash .mkpi.grad .lbl, .dash .mkpi.grad .foot { color: rgba(255,255,255,.82); }
.dash .mkpi.grad .chip { background: rgba(255,255,255,.20); color: #fff; }
.dash .mkpi .sparkline { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; width: 100%; }
.dash .delta { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12.5px; }
.dash .delta.up { color: var(--good); } .dash .delta.down { color: var(--bad); }
.dash .spill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dash .spill.good { background: var(--good-bg); color: var(--good); }
.dash .spill.warn { background: var(--warn-bg); color: var(--warn); }
.dash .spill.bad { background: var(--bad-bg); color: var(--bad); }
.dash .spill.gray { background: #eef1f6; color: var(--muted); }

.dash .dcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px; min-width: 0; }
.dash .dcard > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash .dcard h3 { font-size: 15.5px; font-weight: 700; margin: 0; }
.dash .small { font-size: 12px; }
.dash .panels { display: grid; grid-template-columns: 1.66fr 1fr; gap: 18px; margin-bottom: 18px; }
.dash .panels .dcard { margin-bottom: 0; }
.dash .chart-box { height: 280px; }
/* dica + painel de detalhe do dia (abre ao clicar num bloco do gráfico; reversível) */
.dash .chart-hint { margin: 9px 2px 0; text-align: center; }
.dash .daydetail { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); padding: 16px 18px; }
.dash .daydetail.dd-in { animation: dashUp .3s cubic-bezier(.22,.61,.36,1); }
.dash .daydetail .dd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash .daydetail .dd-head b { font-size: 16px; font-weight: 800; }
.dash .daydetail .dd-sum { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.dash .daydetail .dd-close { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; padding: 2px 7px; margin: 0; border-radius: 8px; cursor: pointer; transition: .15s; }
.dash .daydetail .dd-close:hover { color: var(--text); background: rgba(16,24,40,.06); }
.dash .daydetail .dd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 16px; }
.dash .daydetail .dd-card { background: #f7f9fc; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.dash .daydetail .dd-clabel { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dash .daydetail .dd-card b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.dash .daydetail .dd-scroll { overflow-x: auto; }
.dash .daydetail .dd-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash .daydetail .dd-tab th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dash .daydetail .dd-tab td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dash .daydetail .dd-tab tbody tr:last-child td { border-bottom: 0; }
.dash .daydetail .dd-tab td.num, .dash .daydetail .dd-tab th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dash .daydetail .dd-name { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.dash .daydetail .dd-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.dash .daydetail .dd-dot.on { background: var(--accent); }
.dash .daydetail .dd-dot.off { background: #94a3b8; }
.dash .daydetail .dd-off { font-size: 11px; color: var(--muted); margin-left: 6px; }
.dash .daydetail .dd-sharecell { white-space: nowrap; }
.dash .daydetail .dd-bar { display: inline-block; width: 60px; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.dash .daydetail .dd-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.dash .daydetail .dd-bar.off i { background: #94a3b8; }
.dash .daydetail .dd-pct { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash .daydetail .dd-empty { margin: 4px 2px; }
[data-theme="dark"] .dash .daydetail .dd-card { background: #161618; }
[data-theme="dark"] .dash .daydetail .dd-bar { background: rgba(255,255,255,.12); }
[data-theme="dark"] .dash .daydetail .dd-close:hover { background: rgba(255,255,255,.10); }
/* Card "Economia vs meta" (substitui o gauge "CPL vs meta"): interpreta o CPL vs a meta em R$/%.
   Usa as variáveis de tema → acompanha claro/escuro e a cor de marca (accent). */
/* O card estica até a altura do gráfico ao lado (280px). Distribui o conteúdo: a informação desce um
   pouco do cabeçalho, a faixa "Economia no período" preenche o meio e os atalhos ancoram no rodapé. */
.dash .evm-card { display: flex; flex-direction: column; }
.dash .evm-card .evm { margin-top: 12px; }
.dash .evm-card .evm-econ { margin-top: 14px; }
.dash .evm-card .ministats { margin-top: auto; }
.dash .evm { padding-top: 2px; }
.dash .evm-hl { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--text); }
.dash .evm.good .evm-hl { color: var(--good); }
.dash .evm.warn .evm-hl { color: var(--warn); }
.dash .evm.bad .evm-hl { color: var(--bad); }
.dash .evm.muted .evm-hl { font-size: 16px; color: var(--muted); }
.dash .evm-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.dash .evm-bar { position: relative; height: 10px; border-radius: 999px; background: var(--line); margin: 15px 0 10px; overflow: hidden; }
.dash .evm-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .3s ease; }
.dash .evm-fill.good { background: var(--good); }
.dash .evm-fill.warn { background: var(--warn); }
.dash .evm-fill.bad { background: var(--bad); }
.dash .evm-fill.muted { background: transparent; }
.dash .evm-ends { display: flex; justify-content: space-between; align-items: flex-end; }
.dash .evm-ends > div { display: flex; flex-direction: column; gap: 2px; }
.dash .evm-ends .evm-meta { text-align: right; }
.dash .evm-ends span { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dash .evm-ends b { font-size: 15px; font-weight: 700; color: var(--text); }
.dash .evm-econ { border-radius: 12px; padding: 11px 13px; background: var(--good-bg); }
.dash .evm-econ.warn { background: var(--warn-bg); }
.dash .evm-econ.bad { background: var(--bad-bg); }
.dash .evm-econ.muted { background: rgba(107,117,137,.08); }
.dash .evm-econ-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dash .evm-econ-lbl { font-size: 12.5px; font-weight: 600; color: var(--text); }
.dash .evm-econ-val { font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.dash .evm-econ.good .evm-econ-val { color: var(--good); }
.dash .evm-econ.warn .evm-econ-val { color: var(--warn); }
.dash .evm-econ.bad .evm-econ-val { color: var(--bad); }
.dash .evm-econ-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dash .ministats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.dash .mini { display: flex; flex-direction: column; gap: 10px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 12px; padding: 13px; text-decoration: none; color: inherit; transition: .15s; }
.dash .mini:hover { border-color: var(--accent); transform: translateY(-1px); }
.dash .mini .mtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dash .mini .mlbl { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.3; }
.dash .mini .mic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #eef2ff; color: var(--accent); flex: none; }
.dash .mini b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }

.dash .btn-ghost { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; transition: border-color .15s, color .15s, transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s; }
.dash .btn-ghost svg { transition: transform .2s cubic-bezier(.22,.61,.36,1); }
.dash .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16,24,40,.12); }
.dash .btn-ghost:hover svg { transform: translateX(4px); }
.dash .btn-ghost:active { transform: translateY(0); box-shadow: none; }
.dash a:hover { text-decoration: none; }   /* sem "linha embaixo" em nenhum nome/link do dashboard (vence o a:hover global) */

.dash .tscroll { overflow-x: auto; }
.dash table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dash thead th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dash tbody td { padding: 13px 12px; border-bottom: 1px solid var(--line); }
.dash tbody tr:hover { background: #fafbfe; }
.dash td.num, .dash th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash td.good { color: var(--good); font-weight: 600; } .dash td.bad { color: var(--bad); font-weight: 600; }
.dash .cmp { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 210px; }
.dash .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dash .dot.good { background: var(--good); } .dash .dot.warn { background: var(--warn); } .dash .dot.bad { background: var(--bad); } .dash .dot.gray { background: #c7cdd9; }
.dash tr.total td { font-weight: 800; border-top: 2px solid var(--line); border-bottom: 0; background: #fafbfe; }
.dash .empty-filter { margin: 14px 4px 0; }

.dash .geo { display: grid; grid-template-columns: 1fr 1.05fr; gap: 22px; align-items: center; }
.dash .geo-map { background: #f7f9fc; border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; place-items: center; }
.dash .geo-map svg { width: 100%; height: auto; max-height: 250px; }
.dash .brz { fill: var(--accent); fill-opacity: .14; stroke: var(--accent); stroke-opacity: .30; stroke-width: 1.5; stroke-linejoin: round; }
.dash .bubble { fill: var(--accent); fill-opacity: .82; }
.dash .blabel { font: 700 9px Inter, sans-serif; fill: #fff; pointer-events: none; }
.dash .legend { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin-top: 8px; justify-content: center; }
.dash .legbar { height: 8px; width: 110px; border-radius: 5px; background: linear-gradient(90deg, var(--bg), var(--accent)); }

/* tooltips dos KPIs/headers (escopado) */
.dash [data-tip] { position: relative; }
.dash [data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 12px; top: 100%; margin-top: 6px; z-index: 6; max-width: 260px; width: max-content; background: var(--tip-bg); color: var(--tip-fg); font-size: 12px; font-weight: 500; line-height: 1.4; padding: 8px 11px; border-radius: 8px; box-shadow: 0 8px 24px rgba(16,24,40,.18); pointer-events: none; }

@media (max-width: 1080px) { .dash .cards { grid-template-columns: 1fr 1fr; } .dash .panels, .dash .geo { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dash .cards { grid-template-columns: 1fr; } .dash .dash-head { flex-direction: column; align-items: flex-start; } }

/* dark: fundos claros hardcoded que não vêm das vars de tema */
[data-theme="dark"] .dash .mkpi .chip, [data-theme="dark"] .dash .mini .mic { background: rgba(74,130,255,.16); }
[data-theme="dark"] .dash .mini, [data-theme="dark"] .dash .geo-map, [data-theme="dark"] .dash .seg { background: #161618; }
[data-theme="dark"] .dash tbody tr:hover, [data-theme="dark"] .dash tr.total td { background: #161618; }
[data-theme="dark"] .dash .spill.gray { background: rgba(255,255,255,.12); color: var(--muted); }
[data-theme="dark"] .dash .dot.gray { background: rgba(255,255,255,.20); }
[data-theme="dark"] .dash .brz { fill: var(--accent); fill-opacity: .18; stroke: var(--accent); stroke-opacity: .34; }
[data-theme="dark"] .dash .legbar { background: linear-gradient(90deg, var(--card), var(--accent)); }

/* ===== Dropdown de seleção reutilizável (.sel) — substitui <select> nativos pelo menu
   customizado animado (mesmo visual do Mapa por Região). Renderizado pela macro _dropdown.html
   e ligado pelo JS compartilhado do base.html (procura por `details.sel`). ===== */
.sel { position: relative; display: inline-block; }
.sel > .sel-trigger { list-style: none; user-select: none; cursor: pointer; display: inline-flex; margin: 0;
  align-items: center; gap: 9px; background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 13px; padding: 9px 13px; font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, border-color .18s ease; }
.sel > .sel-trigger::-webkit-details-marker { display: none; }
.sel > .sel-trigger::marker { content: ""; }
.sel > .sel-trigger:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(16, 24, 40, .13);
  border-color: #d6e0f1; }
.sel > .sel-trigger:active { transform: translateY(0) scale(.98); }
.sel[open] > .sel-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 107, 255, .15); }
.sel-ic { flex: none; color: var(--accent); }
.sel-label { color: var(--muted); }
.sel-value { margin-left: auto; font-weight: 700; max-width: 180px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sel-chev { flex: none; color: var(--muted); transition: transform .22s ease; }
.sel[open] > .sel-trigger .sel-chev { transform: rotate(180deg); }
.sel-menu { position: absolute; z-index: 60; top: calc(100% + 7px); left: 0; min-width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .18); padding: 6px; max-height: 320px; overflow-y: auto;
  animation: geoDdIn .17s cubic-bezier(.22,.61,.36,1) both; }
.sel-menu.r { left: auto; right: 0; }
.sel-opt { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px;
  font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap; color: var(--text);
  text-decoration: none; background: none; border: 0; width: 100%; text-align: left;
  transition: background .15s ease, transform .15s ease; }
.sel-opt:hover { background: #eef2fb; transform: translateX(2px); text-decoration: none; }
.sel-opt input { accent-color: var(--accent); }
.sel-opt input:checked + span,
.sel-opt.is-on { color: var(--accent); font-weight: 700; }
/* animação: ao abrir, as opções entram escalonadas (fill backwards p/ não travar o hover depois) */
.sel[open] > .sel-menu .sel-opt { animation: selOptIn .24s cubic-bezier(.22,.61,.36,1) backwards; }
.sel[open] > .sel-menu .sel-opt:nth-child(1) { animation-delay: .02s; }
.sel[open] > .sel-menu .sel-opt:nth-child(2) { animation-delay: .05s; }
.sel[open] > .sel-menu .sel-opt:nth-child(3) { animation-delay: .08s; }
.sel[open] > .sel-menu .sel-opt:nth-child(4) { animation-delay: .11s; }
.sel[open] > .sel-menu .sel-opt:nth-child(5) { animation-delay: .14s; }
.sel[open] > .sel-menu .sel-opt:nth-child(n+6) { animation-delay: .16s; }
@keyframes selOptIn { from { opacity: 0; transform: translateX(-7px); } }
[data-theme="dark"] .sel-menu { background: #0e0e10; border-color: #2c2c31; }
[data-theme="dark"] .sel-opt:hover { background: #1c1c1f; }
[data-theme="dark"] .sel > .sel-trigger:hover { border-color: #3a3a44; }

/* .sel-auto: <select> realçado pelo JS como .sel, mantendo o nativo escondido (fonte de verdade
   do form/JS — preserva cascata Estado→Cidade e prévia do criativo). Variante full-width. */
.sel-native-off { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.sel.sel-block { display: block; }
.sel.sel-block > .sel-trigger { width: 100%; }
.sel.sel-block .sel-value { margin-left: 0; max-width: none; }
.sel.sel-block .sel-chev { margin-left: auto; }
.sel.sel-block .sel-opt { white-space: normal; }

/* região: ações do cabeçalho (seletor de estado + botão) e destaque da UF no mapa */
.dash .geo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash .bubble { transition: fill-opacity .15s ease; }
.dash .bubble.hi { fill-opacity: 1; stroke: #fff; stroke-width: 2.5; }
.dash .bubble.dim { fill-opacity: .18; }
[data-theme="dark"] .dash .bubble.hi { stroke: #e6e9ef; }

/* mapa de estados (choropleth): cada UF é um <path class="st">, pintado por leads via JS */
.dash .brmap { width: 100%; height: auto; max-height: 250px; display: block; }
.dash .st { fill: var(--accent); fill-opacity: .07; stroke: #fff; stroke-width: .6; transition: fill .15s ease, opacity .15s ease; }
.dash .st.hi { stroke: var(--accent); stroke-width: 1.8; }
.dash .st.dim { opacity: .32; }
[data-theme="dark"] .dash .st { fill: var(--accent); fill-opacity: .16; stroke: #000000; }
[data-theme="dark"] .dash .st.hi { stroke: var(--accent); }

/* === seletores dos cabeçalhos = componente .sel (menu animado, igual às outras abas) === */
.dash .sel-trigger { margin: 0; }                                 /* zera o margin-top:8px do `details summary` global (vazava no gatilho e desalinhava) */
.dash .dcard > header .sel { flex: none; }                        /* não estica/encolhe no header flex */
.dash .geo-actions .sel.sel-block { display: inline-block; }      /* o seletor de estado (.sel-auto) fica compacto, não full-width */
.dash .geo-actions .sel.sel-block > .sel-trigger { width: auto; }
.dash .geo-actions .sel-menu { left: auto; right: 0; }            /* abre alinhado à direita (não estoura a tela) */
.dash .geo-actions .btn-ghost { padding-top: 9px; padding-bottom: 9px; }  /* mesma altura do gatilho do dropdown ao lado → alinhados */

/* === entrada animada dos blocos — igual às outras abas (sobe + fade) ===
   backwards (não both/forwards) p/ NÃO congelar o transform e manter o lift no :hover dos cards */
@keyframes dashUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.dash .mkpi { animation: dashUp .5s cubic-bezier(.22,.61,.36,1) backwards; }
.dash .cards .mkpi:nth-child(1) { animation-delay: .04s; }
.dash .cards .mkpi:nth-child(2) { animation-delay: .10s; }
.dash .cards .mkpi:nth-child(3) { animation-delay: .16s; }
.dash .cards .mkpi:nth-child(4) { animation-delay: .22s; }
.dash > .panels { animation: dashUp .55s cubic-bezier(.22,.61,.36,1) .28s backwards; }
.dash > .dcard { animation: dashUp .55s cubic-bezier(.22,.61,.36,1) .34s backwards; }
.dash > .dcard:last-child { animation-delay: .42s; }

/* ===================== SAÚDE / STATUS POR CAMPANHA (badge) ===================== */
/* Badge determinístico (campaign_health.py). 6 níveis em tons distintos — mesmo idioma dos
   geo-badges (tinta + texto saturado). Excelente/Revisar usam tons mais fortes p/ destacar dos
   vizinhos (Boa/Atenção). Reutilizável em qualquer listagem de campanha (Dashboard, Sala de Controle). */
.hbadge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; white-space: nowrap; line-height: 1.55; }
.hb-exc  { background: #dcfce7; color: #15803d; }                       /* Excelente — verde forte */
.hb-boa  { background: var(--good-bg, #ecfdf3); color: var(--good, #12b76a); }  /* Boa — verde */
.hb-atn  { background: var(--warn-bg, #fffaeb); color: var(--warn, #f79009); }  /* Atenção — âmbar */
.hb-rev  { background: #ffedd5; color: #c2410c; }                       /* Revisar — laranja */
.hb-ruim { background: var(--bad-bg, #fef3f2); color: var(--bad, #f04438); }    /* Ruim — vermelho */
.hb-nd   { background: #eef1f6; color: var(--muted, #667085); }         /* Sem dados — cinza */
[data-theme="dark"] .hb-exc { background: rgba(34,197,94,.20); color: #4ade80; }
[data-theme="dark"] .hb-rev { background: rgba(234,88,12,.22); color: #fdba74; }
[data-theme="dark"] .hb-nd  { background: #26262a; color: var(--muted); }

/* ===================== ORÇAMENTO MENSAL ===================== */
/* Bloco do Controle de Orçamento Mensal (Dashboard, Sala de Controle, Configurações). Reusa o
   badge .hbadge para o status; barra de progresso em CSS puro (sem Chart.js). Tema claro/escuro
   via vars. Read-only/gerencial — nada aqui aplica mudança na Meta. */
.bud-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bud-head h3 { margin: 0; font-size: 15px; }
.bud-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 4px 0 14px; }
.bud-bar-fill { display: block; height: 100%; border-radius: 999px; background: #98a2b3; transition: width .4s ease; }
.bud-bar-fill.tone-green { background: var(--good, #12b76a); }
.bud-bar-fill.tone-amber { background: var(--warn, #f79009); }
.bud-bar-fill.tone-red { background: var(--bad, #f04438); }
.bud-bar-fill.tone-gray { background: #98a2b3; }
.bud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 18px; }
.bud-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bud-grid span { font-size: 11.5px; color: var(--muted); }
.bud-grid b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.bud-over { color: var(--bad, #f04438); }
.bud-under { color: var(--good, #12b76a); }
.bud-msg { font-size: 12.5px; margin: 14px 0 0; line-height: 1.5; }
.bud-benefit { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.bud-benefit i { font-style: normal; font-weight: 600; color: var(--text); }
.bud-empty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.bud-empty a, .bud-set a { text-decoration: none; }
@media (max-width: 760px) { .bud-grid { grid-template-columns: 1fr 1fr; } }

/* resumo compacto na Sala de Controle */
.bud-mini { margin: 22px 0; }
.bud-mini .bud-mini-card { display: flex; flex-direction: column; gap: 8px; }
.bud-mini-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bud-mini-top b { font-size: 14.5px; }
.bud-mini-rows { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--muted); }
.bud-mini-rows b { color: var(--text); font-weight: 600; }
.bud-mini .bud-bar { margin: 2px 0 4px; }

/* formulário de orçamento em Configurações */
.bud-form { display: grid; grid-template-columns: 160px 1fr; gap: 12px 16px; align-items: end; max-width: 560px; }
.bud-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.bud-form input, .bud-form textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--card); color: var(--text); }
.bud-form .bud-form-notes { grid-column: 1 / -1; }
.bud-form .bud-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.bud-current { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.bud-current b { color: var(--text); }
@media (max-width: 560px) { .bud-form { grid-template-columns: 1fr; } }

/* =================== Funil de Qualidade dos Leads (página /lead-quality + card do Dashboard) ===================
   Badges em 5 cores (verde/amarelo/laranja/vermelho/cinza) — compatível com o design; classes próprias .lq-* */
.lqbadge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.7; vertical-align: middle; white-space: nowrap; }
.lqbadge.lq-alta    { background: rgba(18,183,106,.14); color: #0f9b5a; }
.lqbadge.lq-boa     { background: rgba(234,179,8,.18);  color: #a16207; }
.lqbadge.lq-atencao { background: rgba(249,115,22,.15); color: #c2410c; }
.lqbadge.lq-ruim    { background: rgba(240,68,56,.14);  color: #d92d20; }
.lqbadge.lq-nd      { background: rgba(100,116,139,.16); color: #64748b; }

.lq { max-width: 1180px; }
.lq h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.lq .sub { font-size: 13px; margin-top: 3px; }
.lq-top { margin-bottom: 16px; }

/* filtros */
.lq-filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding: 14px 16px; margin-bottom: 16px; }
.lq-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.lq select, .lq input, .lq textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--card); color: var(--text); min-width: 150px; }
.lq textarea { resize: vertical; width: 100%; min-width: 0; }
.lq select:focus, .lq input:focus, .lq textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* cards reaproveitam .dcard; cabeçalho com badge + link */
.lq-card .lq-head, .lq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lq-head h3 { margin: 0; font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.lq-more { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  color: var(--accent); text-decoration: none; white-space: nowrap; }
.lq-more:hover { text-decoration: none; opacity: .82; }

/* grade de estatísticas (resumo) */
.lq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lq-stat { display: flex; flex-direction: column; gap: 3px; background: var(--bg, #f7f9fc); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 13px; min-width: 0; }
.lq-stat span { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.lq-stat b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.lq-note { font-size: 12px; margin: 12px 0 0; }

/* formulário de lançamento */
.lq-launch { padding: 0; }
.lq-launch > summary { list-style: none; cursor: pointer; padding: 16px 18px; font-size: 14px; }
.lq-launch > summary::-webkit-details-marker { display: none; }
.lq-launch[open] > summary { border-bottom: 1px solid var(--line); }
.lq-launch form { padding: 16px 18px; }
.lq-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 14px; }
.lq-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.lq-form-grid .lq-wide { grid-column: 1 / -1; }
.lq-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }

/* tabelas */
.lq-tablewrap { overflow-x: auto; }
.lq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lq-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.lq-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.lq-table tr:last-child td { border-bottom: 0; }
.lq-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* lista de lançamentos (editar/excluir) */
.lq-entries { display: flex; flex-direction: column; gap: 8px; }
.lq-entry { border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--card); }
.lq-entry > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 14px;
  align-items: center; padding: 11px 14px; }
.lq-entry > summary::-webkit-details-marker { display: none; }
.lq-entry[open] > summary { border-bottom: 1px solid var(--line); }
.lq-e-date { font-weight: 700; font-variant-numeric: tabular-nums; }
.lq-e-name { font-weight: 600; }
.lq-e-nums { font-size: 12px; margin-left: auto; }
.lq-entry form { padding: 14px; }
.lq-readonly { padding: 12px 14px; }
.lq-del { padding-top: 0 !important; margin-top: -4px; }
.danger-btn { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 9px;
  border: 1px solid rgba(240,68,56,.4); background: rgba(240,68,56,.08); color: #d92d20; cursor: pointer; }
.danger-btn:hover { background: rgba(240,68,56,.14); }

.lq-warn { color: #c2410c; font-weight: 600; }
.lq-empty, .lq-foot { padding: 6px 2px; }
.lq-foot { margin-top: 18px; }
@media (max-width: 640px) { .lq-form-grid, .lq-grid { grid-template-columns: 1fr 1fr; } .lq-e-nums { margin-left: 0; width: 100%; } }

/* Funil visual (sem JS): etapas em linha, barra proporcional ao total de conversas, seta entre etapas */
.lq-funnel { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.lq-fstep { flex: 1 1 120px; min-width: 108px; display: flex; flex-direction: column; gap: 2px;
  background: var(--bg, #f7f9fc); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 10px; }
.lq-fstep .lq-fvalue { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.lq-fstep .lq-flabel { font-size: 12px; font-weight: 600; }
.lq-fstep .lq-frate { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.lq-fbar-wrap { margin-top: 8px; height: 6px; border-radius: 999px; background: rgba(100,116,139,.16); overflow: hidden; }
.lq-fbar { height: 100%; border-radius: 999px; background: var(--accent, #2f6bff); min-width: 2px; transition: width .4s ease; }
.lq-farrow { align-self: center; color: var(--muted); font-weight: 700; font-size: 16px; flex: 0 0 auto; }
@media (max-width: 640px) { .lq-farrow { display: none; } .lq-fstep { flex-basis: 100%; } }

/* Mensagem interpretativa (Dashboard + Sala de Controle + aba) — determinística, cores por classificação */
.lq-msg { display: block; margin: 12px 0 0; font-size: 13px; font-weight: 600; padding: 9px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg, #f7f9fc); }
.lq-msg-boa { border-color: rgba(18,183,106,.30); background: rgba(18,183,106,.10); color: #0f9b5a; }
.lq-msg-atencao { border-color: rgba(249,115,22,.30); background: rgba(249,115,22,.10); color: #c2410c; }
.lq-msg-nd { border-color: rgba(100,116,139,.25); background: rgba(100,116,139,.10); color: #64748b; }
.lq-msg-ok { border-color: rgba(47,107,255,.25); background: rgba(47,107,255,.08); color: var(--accent, #2f6bff); }

/* Aviso LGPD no campo de observação + filtros por data */
.lq-lgpd { font-size: 11px; font-weight: 600; color: #c2410c; margin-top: 2px; }
.lq-sub-meta { opacity: .82; }
.lq-filters input[type=date] { min-width: 148px; }

/* Lançamentos como tabela com Ações; a linha de edição abre via :target (sem JS) */
.lq-entries-table td { vertical-align: top; }
.lq-obs { max-width: 280px; color: var(--muted); font-size: 12.5px; }
.lq-acts { white-space: nowrap; display: flex; gap: 12px; align-items: center; }
.lq-acts form { display: inline; }
.lq-act-edit { font-size: 12.5px; font-weight: 600; }
.lq-act-del { font: inherit; font-size: 12.5px; font-weight: 600; padding: 0; border: 0; background: none;
  color: #d92d20; cursor: pointer; }
.lq-act-del:hover { text-decoration: underline; }
.lq-editrow { display: none; }
.lq-editrow:target { display: table-row; }
.lq-editrow > td { background: var(--bg, #f7f9fc); padding: 8px 12px 14px; }
.lq-cancel { font-size: 12.5px; }
/* Dica no campo manual de conversas (fallback) + selo "Meta" quando a conversa veio da coleta */
.lq-hint { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.lq-tag { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; vertical-align: middle; padding: 1px 5px; border-radius: 5px;
  background: rgba(47,107,255,.12); color: var(--accent, #2f6bff); }

/* Criativos com problema (arquivo quebrado/ausente) — separados da biblioteca pronta */
.cr-prob-hd h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.cr-prob-hd h3 svg { color: #b54708; flex: none; }
.cr-prob-hd p { margin: 4px 0 12px; font-size: 12.5px; }
.cr-prob-list { display: flex; flex-direction: column; gap: 8px; }
.cr-prob-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cr-prob-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.cr-prob-info b { font-weight: 600; }
.cr-prob-acts { display: flex; gap: 8px; align-items: center; }
.cr-prob-acts .ghost { padding: 6px 12px; font-size: 12.5px; }
/* dica de orçamento sugerido por benefício (Campanha do Zero) */
.z-bsug { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.4; }

/* ===================== COR DO PAINEL (accent selecionável) ===================== */
/* Eixo independente do claro/escuro: data-accent no <html> troca só a cor de marca
   (--accent/--accent-2/--grad). Azul = padrão (:root e [data-theme="dark"]). Persistido em
   localStorage.accent e aplicado antes do paint (base.html). Estes blocos vêm DEPOIS do
   [data-theme="dark"] para vencer por ordem; os compostos vencem por especificidade no dark. */
[data-accent="green"]   { --accent: #0f9d58; --accent-2: #34c77b;
  --grad: linear-gradient(135deg, #34c77b 0%, #0f9d58 100%); }
[data-accent="marsala"] { --accent: #93293a; --accent-2: #bf4f5f;
  --grad: linear-gradient(135deg, #bf4f5f 0%, #93293a 100%); }
[data-theme="dark"][data-accent="green"]   { --accent: #26c98a; --accent-2: #34c77b;
  --grad: linear-gradient(135deg, #2f9e6a 0%, #157f54 100%); }
[data-theme="dark"][data-accent="marsala"] { --accent: #d97484; --accent-2: #bf4f5f;
  --grad: linear-gradient(135deg, #a83b4b 0%, #7e2433 100%); }

/* ===================== Calendário de Campanhas (tudo escopado em .cal) ===================== */
.cal .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cal .page-head h1 { font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.cal .page-head .sub { margin-top: 4px; font-size: 13.5px; }
.cal .small { font-size: 12px; }
.cal-head-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-viewtoggle { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; box-shadow: var(--shadow); }
.cal-viewtoggle a { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.cal-viewtoggle a.on { background: var(--accent); color: #fff; }
.cal .btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none; }
.cal .btn-primary:hover { filter: brightness(1.06); }
.cal .btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; }
.cal .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.cal .btn-ghost.danger-ghost:hover { border-color: var(--bad); color: var(--bad); }

.cal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cal-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cal-klabel { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cal-kpi b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.cal-kpi b.warnv { color: var(--warn); }

.cal-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px !important; }
.cal-filters .sel { flex: none; }
.cal-clear { font-size: 12.5px; color: var(--muted); text-decoration: none; margin-left: auto; }
.cal-clear:hover { color: var(--accent); }

.cal-new { padding: 0 !important; overflow: hidden; }
.cal-new > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 14px 18px; list-style: none; font-weight: 700; }
.cal-new > summary::-webkit-details-marker { display: none; }
.cal-new > summary::before { content: '+'; font-size: 18px; color: var(--accent); font-weight: 800; line-height: 1; }
.cal-new[open] > summary::before { content: '\2212'; }
.cal-new-t { font-size: 15px; }
.cal-new .cal-form { padding: 0 18px 18px; }

.cal-form { margin-top: 6px; }
.cal-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cal-fgrid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-fgrid label.wide { grid-column: 1 / -1; }
.cal-fgrid input, .cal-fgrid select, .cal-fgrid textarea { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; font-weight: 400; }
.cal-fgrid input:focus, .cal-fgrid select:focus, .cal-fgrid textarea:focus { outline: 2px solid #d4e0ff; border-color: var(--accent); }
.cal-fgrid textarea { resize: vertical; }
.cal-factions { margin-top: 14px; }
.cal-factions button { background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 9px 18px; font-weight: 700; font-size: 13.5px; cursor: pointer; }

.cal-month { margin-bottom: 16px; }
.cal-month > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cal-month h3 { font-size: 15px; font-weight: 800; margin: 0; }
.cal-list { display: flex; flex-direction: column; gap: 10px; }
.cal-item { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; background: var(--card); transition: border-color .15s; }
.cal-item:hover { border-color: var(--accent); }
.cal-item.is-arch { opacity: .6; }
.cal-ihead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cal-imain { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cal-title { font-size: 15px; font-weight: 700; }
.cal-idate { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cal-imeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cal-tag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--muted); background: #f4f6fb; border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; }
.cal-tag.accent { color: var(--accent); background: #eef2ff; border-color: #dbe6ff; }
.cal-desc { margin: 9px 0 0; font-size: 13px; color: var(--text); line-height: 1.5; }
.cal-iacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; align-items: center; }
.cal-inline { display: inline; margin: 0; }
.cal-edit > summary { list-style: none; }
.cal-edit > summary::-webkit-details-marker { display: none; }
.cal-edit[open] > summary { margin-bottom: 4px; }
.cal-edit .cal-form { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 8px; }

.cal-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cal-pri { display: inline-flex; align-items: center; border-radius: 7px; padding: 2px 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.cal .pri-bad { background: var(--bad-bg); color: var(--bad); }
.cal .pri-warn { background: var(--warn-bg); color: var(--warn); }
.cal .pri-muted { background: #eef1f6; color: var(--muted); }
.cal .st-good { background: var(--good-bg); color: var(--good); }
.cal .st-warn { background: var(--warn-bg); color: var(--warn); }
.cal .st-bad { background: var(--bad-bg); color: var(--bad); }
.cal .st-plan { background: #e8f0ff; color: var(--accent); }
.cal .st-muted { background: #eef1f6; color: var(--muted); }

.cal-gridnav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.cal-gridnav b { font-size: 15px; font-weight: 800; min-width: 180px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-gh { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 0; }
.cal-cell { min-height: 92px; border: 1px solid var(--line); border-radius: 9px; padding: 6px; display: flex; flex-direction: column; gap: 3px; background: var(--card); overflow: hidden; }
.cal-cell.out { background: var(--bg); opacity: .55; }
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cday { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cal-cell.today .cal-cday { color: var(--accent); }
.cal-chip { font-size: 10.5px; font-weight: 600; border-radius: 5px; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cmore { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.cal-leg { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 9px; }
.cal-foot { margin-top: 14px; text-align: center; }

@media (max-width: 620px) { .cal-cell { min-height: 64px; } .cal-chip { font-size: 9.5px; } .cal-idate { font-size: 12px; } }
[data-theme="dark"] .cal-tag { background: #161618; }
[data-theme="dark"] .cal-tag.accent { background: rgba(74,130,255,.16); border-color: rgba(74,130,255,.28); }
[data-theme="dark"] .cal .st-plan { background: rgba(74,130,255,.16); }
[data-theme="dark"] .cal .st-muted, [data-theme="dark"] .cal .pri-muted { background: rgba(255,255,255,.10); }
[data-theme="dark"] .cal-cell.out { background: #0c0c0e; }
.cal .cal-genhint { margin: 0 0 12px; }
.cal .btn-ghost.gen { border-color: var(--accent); color: var(--accent); font-weight: 700; }
/* bloco "Próximas campanhas" na Sala de Controle (control_room.html) */
.cr-upc { display: flex; flex-direction: column; gap: 9px; }
.cr-upc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-upc-date { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 46px; color: var(--accent); }
.cr-upc-title { font-weight: 600; }
.cr-upc-pend { margin-left: auto; font-size: 12px; color: var(--muted); }

/* ===== Calendário Sazonal (simplificado): chip-botão, filtros, modal nativo <dialog> ===== */
.cal .cal-chip { display: block; width: 100%; border: 0; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 600; text-align: left; line-height: 1.45; }
.cal .cal-chip:hover { filter: brightness(.96); }
.cal-archtoggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.cal-archtoggle input { margin: 0; }
.cal-nodate { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-nodate .cal-chip { width: auto; display: inline-block; max-width: 240px; }
.cal-dlg { border: 0; border-radius: 16px; padding: 0; max-width: 560px; width: 92vw; background: var(--card); color: var(--text); box-shadow: 0 20px 60px rgba(16,24,40,.28); }
.cal-dlg::backdrop { background: rgba(16,24,40,.45); }
.cal-dlg-inner { padding: 18px 20px; }
.cal-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-dlg-head h3 { font-size: 18px; font-weight: 800; margin: 6px 0 0; }
.cal-dlg-sub { font-size: 12.5px; margin-top: 3px; }
.cal-dlg-x { background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.cal-dlg-x:hover { color: var(--text); }
.cal-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 6px; }
.cal-dl > div.wide { grid-column: 1 / -1; }
.cal-dl dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.cal-dl dd { margin: 2px 0 0; font-size: 13.5px; }
.cal-dlg-sec { border-top: 1px solid var(--line); margin-top: 8px; }
.cal-dlg-sec > summary { cursor: pointer; padding: 11px 0 7px; font-weight: 700; font-size: 13.5px; color: var(--accent); list-style: none; }
.cal-dlg-sec > summary::-webkit-details-marker { display: none; }
.cal-dlg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cal-dlg-acts .cal-inline { display: inline; margin: 0; }
.cal-dlg-close { margin-left: auto; }
[data-theme="dark"] .cal-dlg::backdrop { background: rgba(0,0,0,.6); }
.cal-empty { margin: 0 0 12px; padding: 11px 14px; border: 1px dashed var(--line); border-radius: 10px; background: #f7f9fc; color: var(--muted); font-size: 13px; text-align: center; }
[data-theme="dark"] .cal-empty { background: #161618; }

/* ============================ Sino de notificações (topbar, NEW_NAV) ============================ */
/* Sem gate de prefers-reduced-motion (convenção do projeto: o dono QUER ver o movimento). */
.tb-notif { position: relative; }
.nb-btn { position: relative; overflow: visible; padding: 0; font: inherit; line-height: 0; }
.nb-ico { display: block; transform-origin: 50% 4px; transition: color .18s; }
.nb-btn:hover .nb-ico { color: var(--accent); }

.nb-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1;
  border-radius: 999px; box-shadow: 0 0 0 2px var(--card);
  animation: nbBadgePop .28s cubic-bezier(.22,1.4,.36,1) both;
}
.nb-badge[hidden] { display: none; }  /* author display:flex venceria o [hidden] da UA — reforça aqui */
.nb-badge.pulse { animation: nbBadgePop .28s cubic-bezier(.22,1.4,.36,1) both, nbPulse 2s ease-out .3s infinite; }
@keyframes nbBadgePop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes nbPulse {
  0%   { box-shadow: 0 0 0 2px var(--card), 0 0 0 0 rgba(240,68,56,.5); }
  70%  { box-shadow: 0 0 0 2px var(--card), 0 0 0 8px rgba(240,68,56,0); }
  100% { box-shadow: 0 0 0 2px var(--card), 0 0 0 0 rgba(240,68,56,0); }
}
.nb-btn.ring .nb-ico { animation: bellRing .9s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes bellRing {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(16deg); }  20% { transform: rotate(-13deg); }
  30% { transform: rotate(10deg); }  40% { transform: rotate(-7deg); }
  55% { transform: rotate(4deg); }   70% { transform: rotate(-2deg); }
}

.nb-pop {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 60;
  width: 350px; max-width: calc(100vw - 24px);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(16,24,40,.20); overflow: hidden;
  animation: nbPopIn .16s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes nbPopIn { from { opacity: 0; transform: translateY(-7px) scale(.985); } }
.nb-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.nb-title { font-weight: 700; font-size: 13.5px; }
.nb-list { list-style: none; margin: 0; padding: 5px; max-height: 376px; overflow-y: auto; }
.nb-item { display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: inherit; animation: nbItemIn .26s ease backwards; }
.nb-item + .nb-item { margin-top: 2px; }
.nb-item:hover { background: var(--bg); }
a.nb-item { cursor: pointer; }
a.nb-item:hover { text-decoration: none; }
@keyframes nbItemIn { from { opacity: 0; transform: translateX(-6px); } }
.nb-item.is-unread { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
.nb-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: var(--bg); }
.nb-item.k-err .nb-ic  { background: var(--bad-bg, rgba(240,68,56,.12)); }
.nb-item.k-ok .nb-ic   { background: var(--good-bg, rgba(18,183,106,.12)); }
.nb-item.k-warn .nb-ic { background: var(--warn-bg, rgba(247,144,9,.14)); }
.nb-body { min-width: 0; flex: 1; }
.nb-it-title { font-weight: 700; font-size: 12.8px; display: flex; align-items: center; gap: 6px; }
.nb-it-title .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.nb-it-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-it-msg { color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nb-it-ago { color: var(--muted); font-size: 11px; margin-top: 3px; }
.nb-empty { padding: 28px 14px; text-align: center; color: var(--muted); font-size: 12.5px; }