/*
 * Design system do painel: une o DESIGN_SYSTEM.md (tokens HSL no padrão shadcn/ui, base slate, Plus Jakarta Sans
 * nos títulos, Inter no corpo, verde/âmbar/vermelho semânticos) com o redesenho do Stitch (índigo como cor principal,
 * topo branco translúcido, cards de 16px com cabeçalho separado, número da etapa em círculo, rótulos em caixa alta,
 * controle segmentado, JetBrains Mono em códigos e contadores, prévia com o fundo do WhatsApp).
 * Os tons são os da paleta do Tailwind (slate, indigo, violet, emerald, amber, rose).
 */

:root {
  color-scheme: light;
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --background: 210 40% 98%; /* slate-50 */
  --foreground: 217 33% 17%; /* slate-800 */
  --heading: 222 47% 11%; /* slate-900 */
  --card: 0 0% 100%;
  --card-foreground: 217 33% 17%;
  --popover: 0 0% 100%;
  --primary: 243 75% 59%; /* indigo-600 */
  --primary-hover: 245 58% 51%; /* indigo-700 */
  --primary-foreground: 0 0% 100%;
  --brand-2: 258 90% 66%; /* violet-500, fim do degradê da marca */
  --secondary: 210 40% 96%; /* slate-100 */
  --secondary-foreground: 215 25% 27%; /* slate-700 */
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%; /* slate-500 */
  --subtle-foreground: 215 20% 65%; /* slate-400 */
  --accent: 160 84% 39%;
  --accent-foreground: 0 0% 100%;
  --destructive: 350 89% 60%; /* rose-500 */
  --destructive-foreground: 0 0% 100%;
  --border: 214 32% 91%; /* slate-200 */
  --border-soft: 210 40% 96%; /* slate-100: divisórias dentro do card */
  --input: 214 32% 91%;
  --ring: 239 84% 67%; /* indigo-500 */
  --success: 160 84% 39%; /* emerald-500 */
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%; /* amber-500 */
  --warning-foreground: 0 0% 100%;

  /* topo: navy sólido (o conteúdo não aparece por trás ao rolar) */
  --header-bg: 222 47% 11%;
  --header-fg: 213 31% 75%;
  --header-fg-strong: 210 40% 98%;
  --header-accent: 222 47% 17%;
  --header-border: 222 47% 18%;

  /* texto colorido com contraste em cada tema */
  --success-text: 161 94% 30%; /* emerald-700 */
  --warning-text: 26 90% 37%; /* amber-700 */
  --destructive-text: 347 77% 50%; /* rose-600 */
  --primary-text: 245 58% 51%; /* indigo-700 */
  --input-bg: 210 40% 99%;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --radius-card: 1rem;
  --radius: 0.75rem;
  --radius-md: 0.5rem;
  --radius-sm: 0.375rem;
  --card-pad: 24px;
  --shadow-sm: 0 1px 2px hsl(215 25% 15% / 0.05);
  --shadow-md: 0 4px 12px hsl(215 25% 15% / 0.06), 0 1px 3px hsl(215 25% 15% / 0.04);
  --shadow-lg: 0 12px 32px hsl(215 25% 15% / 0.08), 0 2px 6px hsl(215 25% 15% / 0.04);
  --shadow-card: 0 1px 2px hsl(215 25% 15% / 0.05);
  --shadow-primary: 0 4px 10px -2px hsl(243 75% 59% / 0.35);

  /* prévia do WhatsApp */
  --wa-bg: #efeae2;
  --wa-dots: #d1c7b7;
  --wa-bubble: #ffffff;
  --wa-text: #111b21;
  --wa-muted: #667781;
  --wa-link: #4f46e5;
  --mark-bg: hsl(48 96% 89%); /* amber-100 */
  --mark-text: hsl(22 78% 26%); /* amber-900 */
}

/* Tema escuro: base navy do design system, com o índigo mais claro para manter o contraste */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --background: 222 47% 7%;
    --foreground: 210 40% 96%;
    --heading: 210 40% 98%;
    --card: 222 47% 11%;
    --card-foreground: 210 40% 96%;
    --popover: 222 47% 11%;
    --primary: 239 84% 67%;
    --primary-hover: 234 89% 74%;
    --secondary: 222 47% 16%;
    --secondary-foreground: 210 40% 90%;
    --muted: 222 47% 16%;
    --muted-foreground: 213 31% 70%;
    --subtle-foreground: 215 20% 55%;
    --border: 222 40% 19%;
    --border-soft: 222 40% 15%;
    --input: 222 40% 22%;
    --ring: 234 89% 74%;
    --header-bg: 222 47% 9%;
    --header-border: 222 47% 16%;
    --success-text: 158 64% 52%;
    --warning-text: 43 96% 56%;
    --destructive-text: 351 95% 71%;
    --primary-text: 230 94% 82%;
    --input-bg: 222 47% 8%;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.25);
    --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.3);
    --shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.45);
    --shadow-card: 0 1px 3px hsl(0 0% 0% / 0.25);
    --shadow-primary: 0 4px 12px -2px hsl(239 84% 67% / 0.35);
    --wa-bg: #0b141a;
    --wa-dots: #17242c;
    --wa-bubble: #1f2c34;
    --wa-text: #e9edef;
    --wa-muted: #8696a0;
    --wa-link: #a5b4fc;
    --mark-bg: hsl(38 92% 50% / 0.22);
    --mark-text: hsl(48 96% 76%);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --background: 222 47% 7%;
  --foreground: 210 40% 96%;
  --heading: 210 40% 98%;
  --card: 222 47% 11%;
  --card-foreground: 210 40% 96%;
  --popover: 222 47% 11%;
  --primary: 239 84% 67%;
  --primary-hover: 234 89% 74%;
  --secondary: 222 47% 16%;
  --secondary-foreground: 210 40% 90%;
  --muted: 222 47% 16%;
  --muted-foreground: 213 31% 70%;
  --subtle-foreground: 215 20% 55%;
  --border: 222 40% 19%;
  --border-soft: 222 40% 15%;
  --input: 222 40% 22%;
  --ring: 234 89% 74%;
  --header-bg: 222 47% 9%;
  --header-border: 222 47% 16%;
  --success-text: 158 64% 52%;
  --warning-text: 43 96% 56%;
  --destructive-text: 351 95% 71%;
  --primary-text: 230 94% 82%;
  --input-bg: 222 47% 8%;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.25);
  --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.3);
  --shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.45);
  --shadow-card: 0 1px 3px hsl(0 0% 0% / 0.25);
  --shadow-primary: 0 4px 12px -2px hsl(239 84% 67% / 0.35);
  --wa-bg: #0b141a;
  --wa-dots: #17242c;
  --wa-bubble: #1f2c34;
  --wa-text: #e9edef;
  --wa-muted: #8696a0;
  --wa-link: #a5b4fc;
  --mark-bg: hsl(38 92% 50% / 0.22);
  --mark-text: hsl(48 96% 76%);
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html, body { margin: 0; }
/* gate.js: escondido até a conta ser conferida (o painel não pisca antes de mandar para o login) */
html.booting body { visibility: hidden; }
body {
  font-family: var(--font-body);
  /* algarismos de largura fixa em todo o painel: números alinhados nas tabelas e cards */
  font-variant-numeric: tabular-nums;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* destaques (inclusive números nas tabelas e cards) em SemiBold, como os números dos cards; o <b> da prévia do WhatsApp continua negrito */
strong { font-weight: 600; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.01em; color: hsl(var(--heading)); }
h2 { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
h3 { margin: 0; font-size: 16px; font-weight: 700; }
h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
p { margin: 0; }
a { color: hsl(var(--primary-text)); text-underline-offset: 2px; }
code { font-family: var(--font-mono); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); padding: 1px 6px; font-size: 11.5px; }
.mono { font-family: var(--font-mono); }
::selection { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
/* barras de rolagem finas */
* { scrollbar-width: thin; scrollbar-color: hsl(var(--subtle-foreground) / 0.6) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--subtle-foreground) / 0.6); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }
input[type='radio'] { accent-color: hsl(var(--primary)); width: 16px; height: 16px; }
/* checkbox no estilo shadcn: borda slate, marcado preenche de índigo */
input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid hsl(var(--subtle-foreground));
  border-radius: 4px;
  background: hsl(var(--input-bg)) center / 12px 12px no-repeat;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
input[type='checkbox']:hover { border-color: hsl(var(--primary)); }
input[type='checkbox']:checked {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
input[type='checkbox']:disabled { opacity: .5; cursor: not-allowed; }
/* rótulo de seção: caixa alta pequena */
.eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--secondary-foreground)); }

/* ---------- topo ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 24px;
  background: hsl(var(--header-bg));
  color: hsl(var(--header-fg-strong));
  border-bottom: 1px solid hsl(var(--header-border));
  box-shadow: var(--shadow-md);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; color: hsl(var(--header-fg-strong)); }
.brand-mark { width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center; background: linear-gradient(to top right, hsl(243 75% 59%), hsl(var(--brand-2))); color: #fff; box-shadow: 0 4px 12px hsl(243 75% 59% / 0.4); }
/* menu em pílulas dentro de um trilho, como no Stitch; a aba ativa fica índigo cheia */
nav { display: flex; gap: 2px; padding: 4px; border-radius: var(--radius); background: hsl(var(--header-accent) / 0.7); border: 1px solid hsl(var(--header-border)); }
nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: hsl(var(--header-fg));
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: background-color .15s, color .15s;
}
nav a svg { color: hsl(var(--header-fg) / 0.8); }
nav a:hover { background: hsl(var(--header-accent)); color: hsl(var(--header-fg-strong)); }
nav a.active { background: hsl(243 75% 59%); color: #fff; font-weight: 600; box-shadow: 0 2px 8px -2px hsl(243 75% 59% / 0.6); }
nav a.active svg { color: #fff; }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.head-status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: hsl(var(--header-accent)); color: hsl(var(--header-fg)); border: 1px solid hsl(var(--header-border)); font-weight: 500; }
.head-status:has(.dot.ok) { border-color: hsl(160 84% 39% / 0.35); color: hsl(158 64% 62%); }
.head-status:has(.dot.bad) { border-color: hsl(350 89% 60% / 0.4); color: hsl(351 95% 76%); }
.theme-toggle { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; background: transparent; color: hsl(var(--header-fg)); border: 1px solid hsl(var(--header-border)); border-radius: var(--radius-md); box-shadow: none; }
.theme-toggle:hover { background: hsl(var(--header-accent)); color: hsl(var(--header-fg-strong)); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--header-fg)); display: inline-block; flex: none; }
.dot.ok { background: hsl(var(--success)); box-shadow: 0 0 0 3px hsl(var(--success) / 0.2); }
.dot.bad { background: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.2); }

/* ---------- layout ---------- */

main { padding: 28px 32px 40px; max-width: 1400px; margin: 0 auto; }
section { display: flex; flex-direction: column; gap: 20px; }
.hidden { display: none !important; }
.tab-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.tab-head p.muted { font-size: 14px; }
.tab-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.tab-title h2 { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill svg { color: hsl(var(--subtle-foreground)); flex: none; }

.card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); padding: var(--card-pad); box-shadow: var(--shadow-card); }
/* cabeçalho do card (número da etapa + título): faixa separada por uma linha, como no redesenho */
.card > .step-head:first-child,
.card > .tpl-head:first-child,
.card > .phones-head:first-child { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 20px; padding: 18px var(--card-pad); border-bottom: 1px solid hsl(var(--border-soft)); }
.card > .tpl-head:first-child .step-head, .card > .phones-head:first-child .step-head { margin-bottom: 0; }
.step-head .step-tag { margin-left: auto; align-self: center; }
.empty { color: hsl(var(--muted-foreground)); text-align: center; padding: 24px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: hsl(var(--muted-foreground)); }
.small { font-size: 12px; }
.ok-text { color: hsl(var(--success-text)); }
.warn-text { color: hsl(var(--warning-text)); }
.bad-text, .danger-text { color: hsl(var(--destructive-text)) !important; }

/* ---------- botões ---------- */

button, a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font: 500 14px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .15s, opacity .15s;
}
button:hover, a.button:hover { background: hsl(var(--primary-hover)); }
button:focus-visible, a.button:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
button.secondary { background: hsl(var(--card)); color: hsl(var(--secondary-foreground)); border-color: hsl(var(--border)); }
button.secondary:hover { background: hsl(var(--secondary)); color: hsl(var(--heading)); }
/* índigo claro: ações de apoio (inserir variável, adicionar botão) */
button.soft { background: hsl(var(--primary) / 0.08); color: hsl(var(--primary-text)); border-color: hsl(var(--primary) / 0.25); box-shadow: none; font-weight: 600; }
button.soft:hover { background: hsl(var(--primary) / 0.14); }
button.success { background: hsl(var(--success)); color: hsl(var(--success-foreground)); }
button.success:hover { background: hsl(var(--success) / 0.9); }
button.ghost { background: transparent; color: hsl(var(--muted-foreground)); box-shadow: none; }
button.ghost:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
button.ghost.danger-text:hover { background: hsl(var(--destructive) / 0.1); }
button:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* botões de atualizar: o ícone gira enquanto busca, sem trocar o texto */
.refresh-icon { flex: none; }
button.loading { opacity: 1; cursor: progress; background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); border-color: transparent; }
button.loading .refresh-icon { animation: refresh-spin .8s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
/* terminou: verde (ou vermelho no erro) que clareia até a cor normal do botão */
button.done { animation: refresh-done 2.4s ease-out; }
button.failed { animation: refresh-failed 2.4s ease-out; }
@keyframes refresh-done { 0%, 45% { background: hsl(var(--success) / 0.14); color: hsl(var(--success)); border-color: transparent; } }
@keyframes refresh-failed { 0%, 45% { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); border-color: transparent; } }
/* Resultado do disparo ainda não gravado no Supabase: botão laranja pulsando até o Sync */
button.attention, button.secondary.attention { background: hsl(var(--warning)); color: hsl(222 47% 11%); border-color: hsl(var(--warning)); font-weight: 600; animation: attention-pulse 1.6s ease-out infinite; }
button.attention:hover, button.secondary.attention:hover { background: hsl(var(--warning) / 0.88); }
@keyframes attention-pulse {
  0% { box-shadow: 0 0 0 0 hsl(var(--warning) / 0.65); }
  70% { box-shadow: 0 0 0 10px hsl(var(--warning) / 0); }
  100% { box-shadow: 0 0 0 0 hsl(var(--warning) / 0); }
}
@media (prefers-reduced-motion: reduce) {
  button.attention, button.secondary.attention { animation: none; box-shadow: 0 0 0 3px hsl(var(--warning) / 0.45); }
}
.small-btn, button.small-btn, a.button.small-btn { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-md); }
button.big { height: 46px; border-radius: var(--radius); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-primary); }

/* ---------- formulários ---------- */

input, select, textarea {
  background: hsl(var(--input-bg));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-md);
  padding: 0 12px;
  height: 40px;
  font: 400 14px var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}
input[type='checkbox'], input[type='radio'] { height: 16px; padding: 0; }
/* seta própria das listas: afastada da borda, com espaço para o texto não encostar nela */
select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; cursor: pointer; text-overflow: ellipsis; }
select:disabled { cursor: not-allowed; opacity: .6; }
textarea { width: 100%; height: auto; padding: 8px 12px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground) / 0.8); }
input:focus, select:focus, textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18); background-color: hsl(var(--card)); }
input.tiny { width: 92px; }
input.wide { width: 300px; }
input.rate { width: 84px; }
input.rate.share { width: 72px; }
.unit-input { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.share-hint { margin-top: 4px; white-space: nowrap; }
.phones-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 24px; margin-top: 16px; padding: 12px 16px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--muted) / 0.35); }
.phones-legend h5 { margin: 0 0 8px; font-size: 13px; }
.phones-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legend-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 2px; }
.legend-foot { grid-column: 1 / -1; }
.speed-legend { grid-template-columns: 1fr; gap: 8px; }
.speed-rows li { display: grid; grid-template-columns: 56px 130px 100px 130px auto; align-items: center; gap: 8px; font-size: 13px; }
/* tabela de números: Número mais estreito e Limite 24h mais largo, para o box ficar alinhado */
.phones-table th:nth-child(2) { width: 180px; }
.phones-table th:last-child { width: 280px; }
.nowrap { white-space: nowrap; }
input.inline { width: 120px; margin-left: 6px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: hsl(var(--secondary-foreground)); }
label input, label select { color: hsl(var(--foreground)); font-size: 14px; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: hsl(var(--foreground)); font-size: 14px; font-weight: 400; }
label.inline-label { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
/* texto de ajuda dentro do rótulo fica leve */
label > .muted { font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
details { margin-top: 12px; }
details summary { cursor: pointer; color: hsl(var(--muted-foreground)); font-weight: 500; }
/* rótulos dos campos em grade: caixa alta pequena (o texto de ajuda dentro do rótulo fica normal) */
.form-grid > label:not(.check):not(.inline-label),
.ed-main .card > label:not(.check):not(.inline-label) { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.form-grid > label:not(.check):not(.inline-label) > *,
.ed-main .card > label:not(.check):not(.inline-label) > * { text-transform: none; letter-spacing: normal; }
details summary:hover { color: hsl(var(--foreground)); }

/* ---------- badges e alertas ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 1px solid hsl(var(--border));
  white-space: nowrap;
}
.badge.ok { background: hsl(var(--success) / 0.1); color: hsl(var(--success-text)); border-color: hsl(var(--success) / 0.25); }
.badge.warn { background: hsl(var(--warning) / 0.12); color: hsl(var(--warning-text)); border-color: hsl(var(--warning) / 0.3); }
.badge.bad { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive-text)); border-color: hsl(var(--destructive) / 0.25); }
.badge.info { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary-text)); border-color: hsl(var(--primary) / 0.25); }
.badge.muted { color: hsl(var(--muted-foreground)); }

.alert { border-radius: var(--radius); padding: 12px 14px; margin: 8px 0; border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); line-height: 1.5; }
.alert.ok { border-color: hsl(var(--success) / 0.3); background: hsl(var(--success) / 0.08); color: hsl(var(--success-text)); }
.alert.warn { border-color: hsl(var(--warning) / 0.4); background: hsl(var(--warning) / 0.08); }
.alert.bad { border-color: hsl(var(--destructive) / 0.3); background: hsl(var(--destructive) / 0.07); }
.alert.bad, .alert.warn { color: hsl(var(--foreground)); }
.alert.info { border-color: hsl(var(--primary) / 0.3); background: hsl(var(--primary) / 0.07); color: hsl(var(--foreground)); }
.alert.prev-run { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alert.prev-run button { flex: none; }

/* ---------- tabelas ---------- */

.table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.table th { text-align: left; color: hsl(var(--muted-foreground)); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid hsl(var(--border-soft)); vertical-align: middle; }
.table tbody tr { transition: background-color .15s; }
.table tbody tr:hover td { background: hsl(var(--muted) / 0.5); }
.table tr.selected td { background: hsl(var(--primary) / 0.06); }
.table tbody tr:last-child td { border-bottom: 0; }
.table.compact th { padding: 8px; }
.table.compact td { padding: 6px 8px; font-size: 12px; }
.table select, .table input:not([type='checkbox']) { height: 34px; font-size: 13px; }
.table.compact select, .var-row select { padding-left: 10px; padding-right: 28px; background-position: right 9px center; background-size: 14px 14px; }
.table.compact select { height: 30px; padding-left: 8px; font-size: 12px; }
.table .num { text-align: right; }
.scroll-box { max-height: 330px; overflow: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); margin: 12px 0; }
.scroll-box .table { margin: 0; }
.scroll-box th { position: sticky; top: 0; z-index: 1; background: hsl(var(--card)); }

/* ---------- Conexões ---------- */

.conn { display: flex; flex-direction: column; gap: 12px; }
.conn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.conn-head h3 { font-size: 18px; }
.token-form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; padding: 16px; border: 1px solid hsl(var(--primary) / 0.25); border-radius: var(--radius-md); background: hsl(var(--primary) / 0.04); }.waba { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); padding: 16px; background: hsl(var(--muted) / 0.35); }
.waba-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.conn-view { max-width: 420px; margin: 0 0 6px; }
.conn-view-hint { margin: 0 0 16px; }

/* ---------- Campanha ---------- */

.campaign-layout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 20px; align-items: start; }
.steps { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 20px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; }
.side .card { --card-pad: 20px; }
.side ul { margin: 6px 0 0; padding-left: 18px; }
.side li { margin: 4px 0; font-size: 12px; }
.list { margin: 8px 0; }
.list.bad strong { color: hsl(var(--destructive-text)); }
.list.warn strong { color: hsl(var(--warning-text)); }
.step-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.step-head h3 { font-size: 16px; }
.step-head .muted.small { margin-top: 1px; }
/* número da etapa: círculo índigo claro */
.step-n {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.3);
  display: grid;
  place-items: center;
  font: 700 13px var(--font-body);
  flex: none;
}
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; margin-top: 4px; }
.tcard { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; background: hsl(var(--muted) / 0.35); }
.limit { min-width: 120px; }
.limit-bar { height: 4px; max-width: 150px; margin: 4px 0 2px; border-radius: 2px; background: hsl(var(--muted)); overflow: hidden; }
.limit-bar i { display: block; height: 100%; background: hsl(var(--success)); }
.limit-bar i.warn { background: hsl(var(--warning)); }
.limit-bar i.bad { background: hsl(var(--destructive)); }
th .limit-refresh { height: 22px; padding: 0 6px; margin-left: 2px; }
.tpl-head, .phones-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; }
.tpl-head .step-head, .phones-head .step-head { flex: 1 1 420px; }
/* botão de atualizar em cima e a hora da última atualização embaixo, alinhados à direita */
.tpl-sync, .phones-sync { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tpl-add { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.tpl-add input { width: 100%; }
.tpl-results { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow: auto; }
.tpl-results:empty { display: none; }
.tpl-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--card)); font-size: 12px; }
.tpl-hit-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.tpl-hit-actions { display: flex; gap: 4px; }
.tpl-hit-actions .small-btn { height: 28px; padding: 0 8px; font-size: 12px; }
.held-filter { flex: 1; min-width: 220px; }
.chips-label { font-size: 12px; font-weight: 500; margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--muted-foreground));
  border-radius: var(--radius-sm);
  padding: 3px 4px 3px 8px;
  font-size: 12px;
  box-shadow: var(--shadow-sm);
}
.chip.cat-UTILITY { border-left-color: hsl(var(--success)); }
.chip.cat-MARKETING { border-left-color: hsl(var(--destructive)); }
.chip.missing { border-color: hsl(var(--destructive)); }
.chip button { height: auto; background: transparent; color: hsl(var(--muted-foreground)); padding: 0 4px; font-size: 12px; border-radius: 4px; }
.chip button:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.chip.held { opacity: 0.6; border-style: dashed; border-left-color: hsl(var(--warning)); }
.chip.held b { text-decoration: line-through; }
.chip-held { color: hsl(var(--warning)); font-size: 11px; }
.seg-filter { margin-top: 16px; padding: 12px 14px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--muted) / 0.35); }
.seg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seg-head input.inline { width: 120px; height: 30px; }
.seg-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
label.seg-opt { flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--card)); cursor: pointer; }
label.seg-opt.on { border-color: hsl(var(--primary) / 0.6); box-shadow: 0 0 0 1px hsl(var(--primary) / 0.25); }
.aud-actions { margin-top: 14px; }
.aud-sheet { margin-top: 10px; }
.aud-sheet input { flex: 1 1 320px; max-width: 520px; }
.imp-sheet { margin: -2px 0 14px; }
.imp-tabs { margin-top: 8px; }
.imp-tabs label.seg-opt { padding: 5px 10px; font-size: 13px; }
.btn-icon { flex: none; }
#stepAudience.drop-on { outline: 2px dashed hsl(var(--primary) / 0.6); outline-offset: -6px; }
label.check.aud-skip { align-self: end; min-height: 38px; }
.imp-panel { margin-top: 12px; padding: 14px 16px; border: 1px solid hsl(var(--primary) / 0.35); border-radius: var(--radius-md); background: hsl(var(--card)); }
.imp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.imp-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 24px; }
.imp-grid h5 { margin: 0 0 6px; font-size: 13px; }
.imp-fields td { vertical-align: top; }
.imp-fields td:first-child { width: 40%; }
.imp-fields select { width: 100%; min-width: 170px; }
.imp-ex { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 18px !important; }
.imp-opts { display: flex; flex-direction: column; gap: 12px; }
.imp-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.imp-extra select, .block-box .imp-panel select { width: auto; max-width: 200px; height: 32px; padding-top: 0; padding-bottom: 0; }
.imp-result { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 12px 24px; margin: 14px 0 10px; }
.imp-count { list-style: none; margin: 0; padding: 0; }
.imp-count li { padding: 5px 0; border-bottom: 1px dashed hsl(var(--border)); font-size: 13px; font-variant-numeric: tabular-nums; }
.imp-line { display: flex; justify-content: space-between; gap: 12px; }
.imp-count li.strong { font-weight: 600; border-bottom-style: solid; }
.imp-why { margin: 2px 0 0; font-weight: 400; }
.imp-why summary { font-size: 12px; }
.imp-notes { display: flex; flex-direction: column; gap: 8px; }
.block-box { margin: 20px 0 16px; padding: 14px; border: 1px dashed hsl(var(--warning) / 0.7); background: hsl(var(--warning) / 0.06); border-radius: var(--radius-md); }
.block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.block-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: hsl(var(--warning) / 0.14); color: hsl(var(--warning-text)); }
.block-title { flex: 1 1 320px; }
.block-empty { margin-top: 10px; }
.block-sources { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.block-sources li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--card)); }
.block-box .imp-panel .row { margin-top: 8px; }
@media (max-width: 900px) { .imp-grid, .imp-result { grid-template-columns: 1fr; } }
.held-box { margin-top: 18px; padding: 12px 16px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--muted) / 0.35); }
.held-box > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: hsl(var(--foreground)); }
.held-box > summary strong { font-family: var(--font-display); }
.held-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.held-form input { flex: 1; min-width: 240px; }
.held-sub { margin-top: 16px; }
.held-redo { margin-top: 8px; }
.held-scroll { max-height: 260px; margin: 8px 0 0; background: hsl(var(--card)); }
.held-table { table-layout: fixed; }
.held-table th:nth-child(1) { width: 48px; }
.held-table th:nth-child(3) { width: 80px; }
.held-table th:nth-child(4) { width: 120px; }
.held-table th:nth-child(5) { width: 110px; }
.held-table th:nth-child(6) { width: 180px; }
button.small-btn.held-release { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.held-release svg { flex: none; }
.varfam { border-top: 1px solid hsl(var(--border)); padding-top: 16px; margin-top: 12px; }
.var-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; }
.var-rows { display: flex; flex-direction: column; gap: 12px; }
.var-row { display: grid; grid-template-columns: 150px 140px minmax(0, 1fr); gap: 8px; align-items: start; }
.var-label { display: flex; flex-direction: column; gap: 3px; }
.var-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; min-width: 0; }
.var-field > * { width: 100%; min-width: 0; }
.var-field [data-v=fallback] { grid-column: span 2; }
.url-input { display: grid; grid-template-columns: minmax(0, auto) minmax(90px, 1fr); align-items: center; gap: 4px; min-width: 0; }
.url-input span { word-break: break-all; }
.url-input input { width: 100%; min-width: 0; }
.var-label code { align-self: flex-start; }
/* fundo pontilhado do WhatsApp Web */
.wa { background-color: var(--wa-bg); background-image: radial-gradient(var(--wa-dots) 0.75px, transparent 0.75px), radial-gradient(var(--wa-dots) 0.75px, transparent 0.75px); background-size: 30px 30px; background-position: 0 0, 15px 15px; color: var(--wa-text); border-radius: var(--radius); padding: 16px; border: 1px solid hsl(var(--border)); }
.wa-bubble { background: var(--wa-bubble); border-radius: 14px 14px 14px 3px; padding: 10px 12px; font-size: 13px; line-height: 1.5; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); }
.wa-header { font-weight: 700; margin-bottom: 4px; }
/* mídia inteira na proporção real (como o WhatsApp mostra); só imagem muito alta é cortada */
.wa-media { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.wa-media-file { padding: 10px; margin-bottom: 6px; border-radius: 6px; background: hsl(var(--muted)); font-size: 12px; }
.wa-footer { color: var(--wa-muted); font-size: 11px; margin-top: 6px; }
.wa-btn { background: var(--wa-bubble); border-radius: var(--radius); margin-top: 4px; padding: 8px; text-align: center; color: var(--wa-link); font-size: 12.5px; font-weight: 600; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); }
.wa-url { color: var(--wa-muted); font-size: 10px; font-weight: 400; word-break: break-all; }
.wa-btn-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.wa-btn-label svg { flex: none; }
.wa-note { margin-top: 10px; }
.wa .muted { color: var(--wa-muted); }
mark { background: var(--mark-bg); color: var(--mark-text); border-radius: 4px; padding: 0 3px; font-weight: 600; }
mark.unset { font-family: var(--font-mono); font-size: 11.5px; }
mark.unset { background: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive-text)); }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.summary { margin: 0; padding-left: 18px; line-height: 1.9; }
.cost { margin-top: 8px; font-size: 15px; }
label.sim { margin: 16px 0; padding: 14px; border: 1px dashed hsl(var(--warning) / 0.7); background: hsl(var(--warning) / 0.06); border-radius: var(--radius-md); }

/* ---------- Disparo ---------- */

.controls button.success { padding: 0 20px; }
.dispatch-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.metrics .stat { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid hsl(var(--border)); }
.metrics .stat strong { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.metrics .stat-note { padding: 6px 0 9px; border-bottom: 1px solid hsl(var(--border)); line-height: 1.4; }
.progress { height: 10px; background: hsl(var(--secondary)); border-radius: 999px; overflow: hidden; margin: 14px 0 6px; }
.progress div { height: 100%; background: hsl(var(--success)); border-radius: 999px; transition: width .4s; }
.numbers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 20px; }
.numcard { display: flex; flex-direction: column; gap: 10px; }
.numcard.state-running { border-color: hsl(var(--success) / 0.5); }
.numcard.state-paused { border-color: hsl(var(--warning) / 0.55); }
.numcard.state-exhausted { border-color: hsl(var(--destructive) / 0.55); }
.num-head { display: flex; justify-content: space-between; align-items: center; }
.num-head strong { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; font-size: 16px; }
.num-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.num-stats div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radius-md); background: hsl(var(--muted) / 0.6); color: hsl(var(--muted-foreground)); font-size: 12px; }
.num-stats strong { font-family: var(--font-body); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
/* velocidade automática: o que o painel fez quando a Meta pediu para desacelerar */
.speed-auto { padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); line-height: 1.45; }
.speed-auto:empty { display: none; }
.speed-auto.warn { border-color: hsl(var(--warning) / 0.4); background: hsl(var(--warning) / 0.1); }
.speed-auto.info { border-color: hsl(var(--primary) / 0.3); background: hsl(var(--primary) / 0.07); }
.speed-auto.ok { border-color: hsl(var(--success) / 0.3); background: hsl(var(--success) / 0.08); }
.speed-auto.muted { color: hsl(var(--muted-foreground)); }
.logs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.log { background: hsl(var(--muted) / 0.5); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); padding: 12px; margin: 0; height: 220px; overflow: auto; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
dialog { background: hsl(var(--popover)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); padding: 24px; min-width: 340px; box-shadow: var(--shadow-lg); }
dialog h3 { font-size: 18px; }
dialog::backdrop { background: hsl(222 47% 11% / 0.55); backdrop-filter: blur(2px); }
dialog .stat { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid hsl(var(--border)); }
dialog .stat strong { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
dialog button { margin-top: 16px; width: 100%; }

#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: 460px; }
.toast { background: hsl(var(--popover)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-left: 4px solid hsl(var(--primary)); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-lg); }
.toast.ok { border-left-color: hsl(var(--success)); }
.toast.error { border-left-color: hsl(var(--destructive)); }
.toast.warn { border-left-color: hsl(var(--warning)); }

@media (max-width: 1100px) {
  .campaign-layout, .dispatch-layout, .var-layout, .review-grid, .logs { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; overflow: visible; }
  .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  header { gap: 12px; padding: 0 16px; }
  .brand strong, nav a svg, .head-status .small { display: none; }
  /* a navegação rola dentro do topo em vez de alargar a página */
  nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav a { padding: 6px 8px; font-size: 13px; }
  .head-right { gap: 6px; }
  main { padding: 20px 16px 32px; }
  .card { --card-pad: 18px; }
  .numbers-grid, .tcards { grid-template-columns: 1fr; }
}
.numcard .table select { max-width: 130px; }

/* ---------- lista de campanhas ---------- */

.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; color: hsl(var(--muted-foreground)); text-decoration: none; font-size: 12px; font-weight: 600; }
.back:hover { color: hsl(var(--primary-text)); }
.back + .tab-head { margin-top: -14px; }
.clist { display: flex; flex-direction: column; gap: 12px; }
.ccard { display: flex; flex-direction: column; gap: 16px; padding: 0; transition: box-shadow .15s, border-color .15s; }
.ccard-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; border-radius: var(--radius-card); }
.ccard-bar:hover { background: hsl(var(--muted) / 0.45); }
.ccard-bar:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.ccard-caret { flex: none; color: hsl(var(--muted-foreground)); transition: transform .15s; }
.ccard-bar:hover .ccard-caret { color: hsl(var(--foreground)); }
.ccard.open .ccard-caret { transform: rotate(90deg); }
.ccard-bar .ccard-title { flex: 1; min-width: 0; }
.ccard-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ccard-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ccard-body { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 18px; }
.ccard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ccard-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ccard-bar { flex-wrap: wrap; } .ccard-actions { width: 100%; justify-content: flex-start; } }
.ccard:hover { box-shadow: var(--shadow-md); }
.ccard.selected { border-color: hsl(var(--success) / 0.55); box-shadow: 0 0 0 1px hsl(var(--success) / 0.25), var(--shadow-card); }
.ccard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ccard-title { min-width: 0; }
.cname { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: hsl(var(--foreground)); text-decoration: none; }
.cname:hover { color: hsl(var(--primary-text)); }
.ccard .mbox { margin-top: 0; }
.ccard .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* com mensagens de serviço: 4 colunas, e o card de serviço ocupa duas, ao lado de Cliques */
.ccard .mgrid.has-service { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 600px) { .ccard .mgrid, .ccard .mgrid.has-service { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dialog-form { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; width: min(440px, 80vw); }
.dialog-form input:not([type='checkbox']), .dialog-form select { width: 100%; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-actions button { width: auto; }

/* ---------- Retorno da Meta e cards de métrica ---------- */

.res-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.res-head h4 { margin: 0; font-size: 16px; }
.res-period { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; }
.res-period input { flex: 1; min-width: 0; height: 36px; padding: 0 8px; font-size: 13px; }
.seg { display: flex; gap: 4px; margin: 12px 0 4px; padding: 4px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.seg button { flex: 1; height: 30px; padding: 0 8px; background: transparent; color: hsl(var(--muted-foreground)); border: 1px solid transparent; box-shadow: none; font-size: 12.5px; border-radius: var(--radius-md); }
.seg button:hover { background: transparent; color: hsl(var(--heading)); }
.seg button.on { background: hsl(var(--card)); color: hsl(var(--primary-text)); border-color: hsl(var(--border) / 0.6); box-shadow: var(--shadow-sm); font-weight: 600; }
.mbox { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); padding: 14px; margin-top: 12px; background: hsl(var(--card)); }
.mbox.total { border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary) / 0.04); }
.mbox-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.mbox-head strong { font-family: var(--font-display); }
.mgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.m { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: hsl(var(--muted) / 0.7); }
.mbox.total .m { background: hsl(var(--card)); box-shadow: var(--shadow-sm); }
.m > span { color: hsl(var(--muted-foreground)); font-size: 12px; font-weight: 500; }
.m > small { color: hsl(var(--muted-foreground)); font-size: 11px; }
.m strong { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; font-size: 17px; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.m.service { grid-column: span 2; }
.mbtns { margin-top: 10px; padding-top: 8px; border-top: 1px solid hsl(var(--border)); }
.mbtn { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 13px; }
.mbtn strong { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.res-group { margin-top: 16px; font-family: var(--font-display); font-weight: 700; }
.res-idle { margin-top: 6px; }
.res-split { margin-top: 10px; }
.res-rate { margin: 2px 0 6px; flex-wrap: wrap; }
.res-rate input { height: 32px; padding: 0 8px; font-size: 13px; }
.res-runs { margin-top: 14px; padding-top: 12px; border-top: 1px solid hsl(var(--border)); }
.res-runs .small { margin: 4px 0; }
.res-note { margin-top: 12px; line-height: 1.55; }

/* ---------- aba Templates ---------- */

.info-text { color: hsl(var(--primary-text)); }
button.danger { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
button.danger:hover { background: hsl(var(--destructive) / 0.88); }
button.link-btn { height: auto; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
button.link-btn:hover { background: none; color: hsl(var(--primary-text)); }
label.button { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-weight: 500; }
label.button:hover { background: hsl(var(--muted-foreground) / 0.12); }
label.button.small-btn { height: 32px; padding: 0 12px; font-size: 13px; }

.tpl-accounts { padding: 18px 20px; }
.tpl-accounts-head, .tpl-jobs-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tpl-jobs-head { margin-bottom: 10px; }
.tpl-jobs-head > .muted { flex: 1 1 320px; }
.tpl-jobs-sync { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.tpl-accounts .table td { white-space: nowrap; }
.tpl-accounts .table td.small { white-space: normal; min-width: 140px; }
.tpl-job .ccard-bar { align-items: center; }
.tpl-progress { flex: 0 0 160px; margin: 0; height: 8px; }
.tpl-job-items { max-height: 360px; overflow: auto; }
/* nome e conta numa linha só; o status (que pode trazer o erro da Meta) é que quebra */
.tpl-job-items td:nth-child(-n + 2) { white-space: nowrap; }
.tpl-job-items td:nth-child(3) { min-width: 220px; }

.tpl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tpl-filters input[type='search'] { flex: 1 1 280px; }
.tpl-filters select { flex: 0 1 auto; }
.tpl-count { margin-bottom: 8px; }
.tpl-fam .ccard-bar { padding: 12px 18px; }
.tpl-fam-name { font-family: var(--font-display); font-size: 15px; }
.tpl-fam-text { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 820px; }
.tpl-table td { vertical-align: middle; }
.tpl-accounts .scroll-box { max-height: none; }
#tplJobs:empty { display: none; }
.tpl-table code { font-size: 12px; }
#tplMore { margin: 0; }

.tpl-bulk { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid hsl(var(--primary) / 0.35); border-radius: var(--radius); background: hsl(var(--card)); box-shadow: var(--shadow-lg); }

dialog.tpl-dialog { width: min(980px, 94vw); max-height: 90vh; overflow: auto; }
dialog.tpl-dialog button { margin-top: 0; width: auto; }
dialog.tpl-dialog .dialog-actions { margin-top: 16px; }
dialog.tpl-dialog .dialog-form { width: 100%; }
dialog.tpl-dialog.sm { width: min(520px, 94vw); }
/* excluir template: cabeçalho com ícone e a lista do que vai ser apagado */
.del-head { display: flex; align-items: flex-start; gap: 14px; }
.del-head h3 { margin: 0; }
.del-head p { margin: 4px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.del-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive-text)); }
.del-body { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.del-body .alert { margin: 0; }
.del-list { display: flex; flex-direction: column; max-height: 280px; overflow: auto; border: 1px solid hsl(var(--border)); border-radius: 12px; }
.del-it { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-bottom: 1px solid hsl(var(--border-soft)); }
.del-it:last-child { border-bottom: 0; }
.del-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.del-top code { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.del-top .badge { flex: none; margin-left: auto; }
.del-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--foreground) / 0.8); }
#delConfirm { display: inline-flex; align-items: center; gap: 6px; }
.tpl-view, .lib { display: flex; flex-direction: column; gap: 12px; }
.tpl-view-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tpl-view-body { max-width: 420px; }

/* contas de destino */
.tgt { display: flex; flex-direction: column; gap: 12px; }
.tgt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--muted) / 0.5); }
.tgt-head label.check { font-size: 13px; font-weight: 600; }
.tgt-head .inline-label { font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.tgt-head input.tiny { width: 64px; height: 30px; text-align: center; font-weight: 600; }
.tgt-list { display: flex; flex-direction: column; gap: 14px; max-height: 460px; overflow: auto; padding-right: 4px; }
.tgt-bm { display: flex; flex-direction: column; gap: 8px; }
.tgt-bm-name { font-size: 11px; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .05em; }
.tgt-rows { border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; background: hsl(var(--card)); }
label.tgt-row { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid hsl(var(--border-soft)); color: hsl(var(--foreground)); font-weight: 400; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
label.tgt-row:last-child { border-bottom: 0; }
label.tgt-row:hover { background: hsl(var(--muted) / 0.5); }
label.tgt-row.on { background: hsl(var(--primary) / 0.04); box-shadow: inset 3px 0 0 hsl(var(--primary)); }
.tgt-name { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tgt-name strong { color: hsl(var(--heading)); font-weight: 600; }
.tgt-name .muted { font-family: var(--font-mono); font-size: 11.5px; }
.tgt-copies { display: flex; align-items: center; gap: 6px; color: hsl(var(--muted-foreground)); font-size: 12px; }
.tgt-copies input.tiny { width: 60px; height: 30px; text-align: center; font-weight: 600; }
.tgt-off { margin-top: 0; border: 1px dashed hsl(var(--border)); border-radius: var(--radius); padding: 10px 12px; }
.tgt-off > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tgt-off[open] > summary { margin-bottom: 10px; }
.tgt-off .tgt-row { opacity: .85; }

/* editor */
.ed-layout { display: grid; grid-template-columns: clamp(300px, 30vw, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
/* prévia à esquerda; a coluna ocupa a altura toda do editor para a prévia ficar presa no topo enquanto rola */
.ed-side { align-self: stretch; order: -1; }
.ed-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ed-main > #edMain { display: flex; flex-direction: column; gap: 20px; }
.ed-sticky { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 100px); overflow: auto; }

/* painel da prévia: cabeçalho, conversa, conferência e envio */
.pv-card { padding: 0; overflow: hidden; flex: none; }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid hsl(var(--border-soft)); background: hsl(var(--muted) / 0.5); }
.pv-live { display: inline-flex; align-items: center; gap: 8px; }
.pv-live i { width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--success)); box-shadow: 0 0 0 3px hsl(var(--success) / 0.18); }
.pv-chip { padding: 1px 8px; border-radius: 999px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 11px; font-weight: 500; white-space: nowrap; }
.pv-chat .wa { border: 0; border-radius: 0; padding: 18px 16px; }
.pv-checks { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-top: 1px solid hsl(var(--border-soft)); }
.pv-cta { padding: 14px 16px; border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.5); }
.pv-cta button { width: 100%; }
.pv-tip { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--radius-card); border: 1px solid hsl(var(--primary) / 0.15); background: hsl(var(--primary) / 0.05); font-size: 12px; line-height: 1.55; }
.pv-tip strong { display: flex; align-items: center; gap: 6px; color: hsl(var(--heading)); }
.pv-tip svg { color: hsl(var(--primary)); }
.pv-tip p { color: hsl(var(--muted-foreground)); }
/* lista de conferência com ícone por situação */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.45; }
.checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; }
.checks li::before { content: ''; width: 16px; height: 16px; margin-top: 0; background: currentColor; -webkit-mask: var(--icon) center / 16px no-repeat; mask: var(--icon) center / 16px no-repeat; }
.checks li.ok { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'/%3E%3C/svg%3E"); color: hsl(var(--success-text)); font-weight: 500; }
.checks li.bad { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14l2-2m0 0 2-2m-2 2-2-2m2 2 2 2m7-2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'/%3E%3C/svg%3E"); }
.checks li.bad::before { background: hsl(var(--destructive)); }
.checks li.warn { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v4m0 4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'/%3E%3C/svg%3E"); }
.checks li.warn::before { background: hsl(var(--warning)); }
.checks li.sum { font-weight: 500; color: hsl(var(--warning-text)); }

/* 1. formato */
.ed-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
label.ed-kind { position: relative; gap: 2px; padding: 14px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: hsl(var(--foreground)); font-weight: 400; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
label.ed-kind:hover { border-color: hsl(var(--subtle-foreground) / 0.7); box-shadow: var(--shadow-sm); }
label.ed-kind input { display: none; }
label.ed-kind strong { color: hsl(var(--heading)); font-size: 14px; font-weight: 600; }
label.ed-kind .muted { line-height: 1.4; margin-top: 2px; }
.ed-kind-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ed-kind-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-md); background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); transition: background-color .15s, color .15s; }
.ed-kind-check { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
label.ed-kind.on { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)), var(--shadow-sm); background: hsl(var(--primary) / 0.04); }
label.ed-kind.on .ed-kind-icon { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
label.ed-kind.on strong { font-weight: 700; }
label.ed-kind.off { opacity: .45; cursor: not-allowed; }

/* 3. conteúdo */
.ed-block { display: flex; flex-direction: column; gap: 8px; }
.ed-block + .ed-block { margin-top: 22px; }
.ed-block-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.ed-block-head > strong { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--secondary-foreground)); }
.ed-seg { margin: 0; flex-wrap: wrap; }
.ed-seg button { flex: 1 1 auto; padding: 0 10px; }
.ed-field { position: relative; }
.ed-field textarea, .ed-field input { width: 100%; padding-right: 64px; }
.ed-count { position: absolute; right: 10px; bottom: 8px; pointer-events: none; font-family: var(--font-mono); font-size: 11.5px; color: hsl(var(--subtle-foreground)); }
.ed-field input + .ed-count { bottom: auto; top: 50%; transform: translateY(-50%); }
.ed-tools { display: flex; align-items: center; gap: 4px; }
.ed-tools .small-btn { height: 26px; padding: 0 8px; font-size: 12px; }
.ed-tools .ed-fmt { min-width: 28px; padding: 0 6px; background: hsl(var(--secondary)); box-shadow: none; }
.ed-tools .ed-fmt:hover { background: hsl(var(--border)); }
/* painel de emojis (abre embaixo da barra do corpo) */
.ed-tools { position: relative; }
.ed-tools .ed-emoji svg { flex: none; }
.ed-tools:has(.emoji-pop) .ed-emoji { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary-text)); }
.emoji-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 320px; padding: 8px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--popover)); box-shadow: var(--shadow-lg); }
.emoji-pop button { height: auto; padding: 0; border: 0; background: transparent; color: inherit; box-shadow: none; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font-body); }
.emoji-tabs { display: flex; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid hsl(var(--border-soft)); }
.emoji-tabs button { flex: 1; height: 30px; font-size: 16px; border-radius: var(--radius-md); }
.emoji-tabs button:hover { background: hsl(var(--secondary)); }
.emoji-tabs button.on { background: hsl(var(--primary) / 0.1); box-shadow: inset 0 -2px 0 hsl(var(--primary)); }
.emoji-name { margin: 8px 2px 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; max-height: 210px; overflow: auto; }
.emoji-grid button { height: 34px; font-size: 20px; border-radius: var(--radius-md); transition: background-color .1s, transform .1s; }
.emoji-grid button:hover { background: hsl(var(--secondary)); transform: scale(1.12); }
.ed-tools-sep { width: 1px; height: 16px; margin: 0 4px; background: hsl(var(--border)); }
/* corpo: caixa com barra de dica e contador embaixo */
.ed-area { border: 1px solid hsl(var(--input)); border-radius: var(--radius); overflow: hidden; background: hsl(var(--card)); transition: border-color .15s, box-shadow .15s; }
.ed-area:focus-within { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18); }
.ed-area textarea { display: block; border: 0; border-radius: 0; padding: 12px 14px; background: transparent; line-height: 1.6; box-shadow: none !important; }
.ed-area-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px; border-top: 1px solid hsl(var(--border-soft)); background: hsl(var(--muted) / 0.5); color: hsl(var(--muted-foreground)); font-size: 12px; }
.ed-area-foot code { padding: 0 2px; border: 0; background: transparent; color: hsl(var(--primary-text)); font-size: 11px; }
.ed-area-foot .ed-count { position: static; flex: none; font-weight: 500; }
.ed-media { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ed-media img { max-height: 90px; max-width: 160px; border-radius: var(--radius-md); border: 1px solid hsl(var(--border)); }
.ed-btns { display: flex; flex-direction: column; gap: 8px; }
.ed-btn { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--muted) / 0.4); }
.ed-btn-main, .ed-btn-extra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-btn select, .ed-btn input:not([type='checkbox']) { height: 34px; font-size: 13px; background-color: hsl(var(--card)); }
.ed-btn-main select { flex: 0 0 190px; }
.ed-btn-text { flex: 1 1 180px; }
.ed-btn-fixed { flex: 1 1 180px; }
.ed-btn-move { display: flex; gap: 2px; margin-left: auto; }
.ed-btn-move .small-btn { height: 28px; }
button.icon-btn { width: 28px; padding: 0; color: hsl(var(--subtle-foreground)); }
button.icon-btn:hover { color: hsl(var(--heading)); }
button.icon-btn.danger-text:hover { background: hsl(var(--destructive) / 0.1); }
.ed-btn-extra input:not([type='checkbox']) { flex: 1 1 200px; }
.ed-btn-extra label.check { flex: none; }
.ed-url-group { flex: 1 1 360px; display: flex; min-width: 0; }
.ed-url-group input { flex: 1 1 0; min-width: 0; }
/* link + final variável viram um campo só: o começo à esquerda e o exemplo do final colado à direita */
.ed-url-group.dyn .ed-url { flex: 3 1 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ed-url-group.dyn .ed-url-ex { flex: 2 1 0; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; background: hsl(var(--primary) / 0.04); font-family: var(--font-mono); font-size: 12.5px; }
.ed-url-group input:focus { position: relative; z-index: 1; }
.ed-btn-extra label.ed-url-dyn { margin-left: auto; white-space: nowrap; }
.ed-add select { flex: 0 1 240px; height: 32px; font-size: 13px; }
.ed-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ed-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed hsl(var(--border)); border-radius: var(--radius); }
.ed-card .ed-btn-main select { flex: 1 1 140px; }
.ed-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 6px; }
@media (max-width: 760px) { .ed-layout { grid-template-columns: 1fr; } .ed-side { order: 0; } .ed-sticky { position: static; max-height: none; } .ed-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* biblioteca */
.lib-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lib-item { display: flex; flex-direction: column; gap: 8px; }
.lib-item-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lib-item-head button { margin-left: auto !important; }
.lib-pick { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 800px) { .lib-pick { grid-template-columns: 1fr; } }

/* prévia: formatos novos */
.wa-muted { color: var(--wa-muted); font-size: 12px; }
.wa-lto { display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: hsl(var(--muted) / 0.5); }
.wa-lto > span { font-size: 20px; }
.wa-permission { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: hsl(var(--muted) / 0.5); }
.wa-map { text-align: left; }
.wa-cards { display: flex; gap: 8px; overflow-x: auto; margin-top: 6px; padding-bottom: 4px; }
.wa-card { flex: 0 0 200px; background: var(--wa-bubble); border-radius: 10px; padding: 6px; font-size: 12px; box-shadow: 0 1px 1px rgba(11, 20, 26, .13); }
.wa-card .wa-media { max-height: 130px; }
.wa-card .wa-btn { box-shadow: none; border-top: 1px solid hsl(var(--border) / 0.6); border-radius: 0; }

/* ---------- telas no padrão do Stitch: cabeçalho da página, cards de números, barra de filtros, tabela de dados ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h2 { font-size: 30px; line-height: 38px; letter-spacing: -0.02em; margin: 4px 0; }
.page-head p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 14px; max-width: 780px; }
.page-head > div:first-child { flex: 1 1 420px; min-width: 0; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.eyebrow.brand { color: hsl(var(--primary-text)); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 22px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.kpi-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; color: hsl(var(--muted-foreground)); font-size: 13px; font-weight: 500; }
.kpi-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary-text)); }
.kpi-ico.ok { background: hsl(var(--success) / 0.12); color: hsl(var(--success-text)); }
.kpi-ico.warn { background: hsl(var(--warning) / 0.14); color: hsl(var(--warning-text)); }
.kpi-ico.bad { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive-text)); }
/* números das métricas em Inter SemiBold com algarismos de largura fixa (como no Stitch): não "pulam" ao vivo */
.kpi-val { font-family: var(--font-body); font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: hsl(var(--heading)); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.kpi-val small { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0; color: hsl(var(--muted-foreground)); }
.kpi-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: hsl(var(--muted-foreground)); }
.kchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); white-space: nowrap; }
.kchip.ok { background: hsl(var(--success) / 0.14); color: hsl(var(--success-text)); }
.kchip.warn { background: hsl(var(--warning) / 0.16); color: hsl(var(--warning-text)); }
.kchip.bad { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive-text)); }
.kchip.info { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary-text)); }

.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 16px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.filterbar .search { flex: 1 1 260px; position: relative; display: flex; }
.filterbar .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--subtle-foreground)); pointer-events: none; }
.filterbar .search input { padding-left: 38px; }
.filterbar select { width: auto; flex: 0 1 auto; }
.tabpills { display: flex; gap: 6px; flex-wrap: wrap; }
button.tabpill { height: 34px; padding: 0 12px; gap: 6px; border-radius: 999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border: 1px solid transparent; box-shadow: none; font-size: 13px; font-weight: 500; }
button.tabpill:hover { background: hsl(var(--border)); color: hsl(var(--heading)); }
button.tabpill .n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: hsl(var(--card)); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
button.tabpill.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
button.tabpill.on .n { background: hsl(0 0% 100% / 0.22); color: inherit; }

.dtable-wrap { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.dtable-scroll { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; }
.dtable th { padding: 12px 16px; background: hsl(var(--muted) / 0.7); border-bottom: 1px solid hsl(var(--border)); text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.dtable td { padding: 14px 16px; border-bottom: 1px solid hsl(var(--border-soft)); vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tr.click { cursor: pointer; transition: background-color .15s; }
.dtable tr.click:hover td { background: hsl(var(--muted) / 0.45); }
.dtable tr.open td { background: hsl(var(--primary) / 0.04); border-bottom-color: transparent; }
.dtable tr.detail td { padding: 4px 16px 18px; background: hsl(var(--primary) / 0.04); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable .acts { white-space: nowrap; text-align: right; }
.dtable .acts > * { vertical-align: middle; }
.dtable-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.45); color: hsl(var(--muted-foreground)); font-size: 13px; }
button.icon-btn.ghost { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }
button.icon-btn.ghost[aria-expanded='true'] svg { transform: rotate(180deg); }

.badge.bdot { gap: 5px; }
.badge.bdot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mini-bar { height: 6px; border-radius: 999px; background: hsl(var(--secondary)); overflow: hidden; }
.mini-bar i { display: block; height: 100%; border-radius: 999px; background: hsl(var(--success)); }
.mini-bar i.info { background: hsl(var(--primary)); }
.mini-bar i.warn { background: hsl(var(--warning)); }
.mini-bar i.bad { background: hsl(var(--destructive)); }
.mini-bar i.muted { background: hsl(var(--subtle-foreground)); }
.progress-cell { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.progress-cell .row { justify-content: space-between; gap: 8px; flex-wrap: nowrap; font-size: 12px; font-weight: 600; }
.phone-chip { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); background: hsl(var(--primary) / 0.08); color: hsl(var(--heading)); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.more-chip { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: hsl(var(--primary) / 0.12); color: hsl(var(--primary-text)); font-size: 11px; font-weight: 700; }
code.tag { display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm); background: hsl(var(--secondary)); font-size: 11.5px; }

.ctable td:first-child { min-width: 240px; }
/* os detalhes abertos não alargam a tabela: ocupam a largura que ela já tem */
.dtable tr.detail td > div { contain: inline-size; }
.cname-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cname-cell strong { font-size: 15px; color: hsl(var(--heading)); }
.cflags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.info-card h4 .badge, .info-card h4 .kchip { margin-left: auto; flex: none; }
.info-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.info-card { display: flex; flex-direction: column; gap: 12px; }
.info-card h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-family: var(--font-display); font-size: 16px; color: hsl(var(--heading)); }
.info-card h4 svg { color: hsl(var(--primary-text)); flex: none; }
.info-card p { margin: 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.info-card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.info-list { display: flex; flex-direction: column; gap: 10px; }
.info-list .it { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.info-list .it .row { justify-content: space-between; flex-wrap: nowrap; gap: 8px; }
a.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: hsl(var(--primary-text)); text-decoration: none; }
a.link-arrow:hover { text-decoration: underline; }

@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info-cards { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .kpis { gap: 10px; } .kpi { padding: 14px; gap: 6px; } .kpi-ico { width: 30px; height: 30px; } .kpi-val { font-size: 22px; } .page-head h2 { font-size: 24px; line-height: 32px; } }

/* ---------- Templates: dica, cards por família e histórico ---------- */
.tip-banner { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 20px; border-radius: var(--radius-card); background: hsl(var(--primary) / 0.06); border: 1px solid hsl(var(--primary) / 0.18); }
.tip-banner .tip-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: hsl(var(--primary) / 0.12); color: hsl(var(--primary-text)); }
.tip-banner strong { font-family: var(--font-display); font-size: 15px; color: hsl(var(--heading)); }
.tip-banner p { margin: 4px 0 0; font-size: 13px; color: hsl(var(--secondary-foreground)); }
.tip-banner .icon-btn { margin-left: auto; flex: none; }

.tpl-count { margin: 0 2px 10px; }
.tfam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.tfam { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; transition: border-color .15s, box-shadow .15s; }
.tfam:hover { border-color: hsl(var(--subtle-foreground) / 0.6); box-shadow: var(--shadow-md); }
.tfam.open { grid-column: 1 / -1; }
.tfam-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tfam-title { min-width: 0; }
.tfam-name { display: block; font-family: var(--font-mono); font-size: 14px; color: hsl(var(--heading)); word-break: break-all; }
.tfam-cats { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.tfam-status { display: flex; gap: 6px; flex-wrap: wrap; }
.tfam-body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.tfam.open .tfam-body { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); align-items: start; }
.tfam-preview .wa { padding: 12px; max-height: 380px; overflow: hidden; }
.tfam-preview .wa.clipped { -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent); mask-image: linear-gradient(#000 calc(100% - 48px), transparent); }
.filterbar .search { flex: 1 1 220px; }
.tfam-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tfam-side .scroll-box { max-height: 420px; margin: 0; }
.tfam-meta { display: flex; flex-direction: column; gap: 4px; }
.tfam-meta svg { vertical-align: -2px; }
.tfam-reject { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-md); background: hsl(var(--destructive) / 0.07); border: 1px solid hsl(var(--destructive) / 0.25); color: hsl(var(--destructive-text)); font-size: 13px; }
.tfam-reject > svg { flex: none; margin-top: 2px; }
.tfam-reject > div { flex: 1 1 180px; }
.tfam-reject .small { color: hsl(var(--secondary-foreground)); }
.tfam-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: auto -18px -18px; padding: 10px 14px; border-top: 1px solid hsl(var(--border-soft)); background: hsl(var(--muted) / 0.45); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.tfam-foot button.ghost.small-btn { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--primary-text)); }
.tfam-more { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.tfam-more button { margin: 0; }
@media (max-width: 900px) { .tfam.open .tfam-body { grid-template-columns: 1fr; } }

.tpl-events { margin-top: 20px; }
.tpl-events-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.tpl-events-head h3 { margin: 0 0 4px; }
.tpl-events-head p { margin: 0; max-width: 760px; }
.tpl-events-head .kchip { flex: none; }
.tpl-ev-filter { padding: 0; margin-bottom: 12px; background: none; border: 0; box-shadow: none; }
.tpl-ev-filter .search { flex: 1 1 100%; max-width: 520px; }

/* ---------- Conexões: BMs em cards e tabela única de números ---------- */
.section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 28px 0 12px; }
.section-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.section-head h3 svg { color: hsl(var(--primary-text)); }
.kpis + .section-head { margin-top: 8px; }
.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 16px; }
.bm-card { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.bm-head { display: flex; align-items: flex-start; gap: 12px; }
.bm-avatar { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary-text)); font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.bm-title { flex: 1; min-width: 0; }
.bm-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bm-name h3 { margin: 0; font-size: 17px; font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.bm-head > .kchip { flex: none; }
.bm-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: hsl(var(--muted) / 0.6); }
.bm-strip span { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); }
.bm-strip strong { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-actions { gap: 8px; }
.num-id { display: flex; align-items: center; gap: 10px; }
.num-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: hsl(var(--primary) / 0.08); color: hsl(var(--primary-text)); }
.ntable td:first-child { min-width: 200px; }
.num-id strong { white-space: nowrap; }
.ntable .limit { min-width: 150px; }
.conn-tip { margin-top: 20px; }
.sb-card { margin-top: 20px; }
.sb-card h4 .badge { white-space: normal; }
@media (max-width: 1100px) { .bm-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .bm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Disparo: controles em grupos e cartões dos números ---------- */
.card.controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-top: 4px; }
.ctl-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ctl-group button { display: inline-flex; align-items: center; gap: 6px; }
#metricsNote:not(:empty) { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
#tab-dispatch .numbers-grid { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); }
.numcard .num-head strong { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; font-size: 16px; }
.logs { margin-top: 20px; }
.logs h4 { display: flex; align-items: center; gap: 8px; }
.logs h4 svg { color: hsl(var(--primary-text)); }

/* ---------- Templates: pedidos de criação num card só, ações em ícones ---------- */
.tpl-jobs { margin-bottom: 20px; }
h3.h-ico { display: flex; align-items: center; gap: 8px; }
h3.h-ico svg { color: hsl(var(--primary-text)); flex: none; }
.tpl-events-head .tpl-jobs-sync { margin-left: 0; flex: none; }
.job-list { display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.job + .job { border-top: 1px solid hsl(var(--border)); }
.job-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background-color .15s; }
.job-bar:hover { background: hsl(var(--muted) / 0.45); }
.job.open .job-bar { background: hsl(var(--primary) / 0.04); }
.job-caret { flex: none; color: hsl(var(--muted-foreground)); transition: transform .15s; }
.job.open .job-caret { transform: rotate(90deg); }
.job-title { flex: 1; min-width: 0; }
.job-progress { flex: 0 0 200px; display: flex; flex-direction: column; gap: 6px; }
.job-progress .row { justify-content: space-between; flex-wrap: nowrap; }
.job-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 16px; background: hsl(var(--primary) / 0.04); }
.job-body .scroll-box { margin: 0; background: hsl(var(--card)); }
.acts-icons { display: inline-flex; gap: 2px; }
.tpl-table .acts-icons button.icon-btn.ghost { width: 30px; height: 30px; }
@media (max-width: 760px) { .job-bar { flex-wrap: wrap; } .job-progress { flex: 1 1 100%; } }

/* ---------- Biblioteca da Meta: mesmo card das famílias de templates ---------- */
dialog.tpl-dialog:has(.lib) { width: min(1180px, 96vw); background: hsl(var(--background)); }
.lib-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lib-head h3 { margin: 2px 0 0; font-size: 22px; }
.lib .tip-banner { margin-bottom: 0; }
.lib-filters { margin-bottom: 0; }
.lib-filters button { display: inline-flex; align-items: center; gap: 6px; }
.lib-card .tfam-foot button { display: inline-flex; align-items: center; gap: 6px; }
.lib-title { display: flex; flex-direction: column; gap: 2px; }
dialog.tpl-dialog.lib-dialog { height: 90vh; }
.lib-busy { display: flex; align-items: center; gap: 8px; color: hsl(var(--primary-text)); }
.spin { display: inline-block; width: 14px; height: 14px; flex: none; border: 2px solid hsl(var(--primary) / 0.25); border-top-color: hsl(var(--primary)); border-radius: 50%; animation: refresh-spin .7s linear infinite; }
.tfam-grid.lib-dim { opacity: .45; pointer-events: none; transition: opacity .15s; }
.lib-skel { min-height: 420px; border-color: transparent; background: linear-gradient(90deg, hsl(var(--secondary)) 0%, hsl(var(--secondary) / 0.45) 50%, hsl(var(--secondary)) 100%); background-size: 200% 100%; animation: lib-skel 1.3s ease-in-out infinite; }
@keyframes lib-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.lib-title strong { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: hsl(var(--heading)); }
.lib-title code { align-self: flex-start; margin-top: 2px; font-size: 12px; color: hsl(var(--muted-foreground)); word-break: break-all; }
.lib-pick { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.lib-pick .lib-card { margin: 0; }
.lib-form { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.lib-form .dialog-actions button { display: inline-flex; align-items: center; gap: 6px; }
.lib-pick > .lib-card { position: sticky; top: 0; }

/* paginação (histórico de aprovações) */
.pager { display: flex; align-items: center; gap: 4px; }
button.pg { min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-md); background: hsl(var(--card)); color: hsl(var(--secondary-foreground)); border: 1px solid hsl(var(--border)); box-shadow: none; font-size: 13px; font-weight: 600; }
button.pg:hover:not(:disabled) { background: hsl(var(--secondary)); color: hsl(var(--heading)); }
button.pg.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
button.pg:disabled { opacity: 0.4; cursor: default; }

/* ---------- Campanhas: linha aberta com o desempenho (valores, funil e cliques) ---------- */
:root { --fn-top: 243 75% 59% / 0.16; --fn-bar: 199 89% 74%; --fn-conn: 214 32% 91% / 0.45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --fn-top: 239 84% 67% / 0.25; --fn-bar: 199 70% 42%; --fn-conn: 222 40% 22% / 0.8; } }
:root[data-theme='dark'] { --fn-top: 239 84% 67% / 0.25; --fn-bar: 199 70% 42%; --fn-conn: 222 40% 22% / 0.8; }
.brand-text { color: hsl(var(--primary-text)) !important; }
.dot-sep { margin: 0 2px; color: hsl(var(--subtle-foreground)); }
.vol { font-size: 15px; color: hsl(var(--heading)); }
.progress-cell .row strong.vol { font-weight: 600; }
.phone-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: hsl(var(--primary) / 0.08); border: 1px solid hsl(var(--primary) / 0.15); color: hsl(var(--heading)); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.phone-pill svg { color: hsl(var(--primary-text)); }
.pill-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 11px; font-weight: 700; }
button.icon-btn.toggle-btn[aria-expanded='true'] { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary-text)); }
.dtable tr.detail td { padding: 0 16px 20px; }
.perf { padding: 22px 24px; border-radius: var(--radius-card); background: hsl(var(--muted) / 0.6); border: 1px solid hsl(var(--border-soft)); display: flex; flex-direction: column; gap: 18px; }
.perf-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid hsl(var(--border)); }
.perf-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; }
.perf-info { display: inline-flex; color: hsl(var(--muted-foreground)); cursor: help; }
.perf-src { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 8px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); font-size: 12px; color: hsl(var(--muted-foreground)); }
.perf-src b { padding: 2px 8px; border-radius: 6px; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary-text)); font-weight: 600; }
.perf-window { padding: 4px 12px; border-radius: 999px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); font-size: 12px; color: hsl(var(--secondary-foreground)); }
.perf-money-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.perf-money { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--radius-card); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-card); }
.perf-ico { display: inline-flex; color: hsl(var(--primary-text)); }
.perf-money-val { font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: hsl(var(--heading)); }
.perf-money-val.ok-text { color: hsl(var(--success-text)); }
.perf-funnel { display: flex; flex-direction: column; gap: 22px; padding: 22px; border-radius: var(--radius-card); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-card); }
.perf-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.perf-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--radius); background: hsl(var(--muted) / 0.55); border: 1px solid hsl(var(--border-soft)); }
.perf-tile-val { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; color: hsl(var(--heading)); white-space: nowrap; }
.perf-tile-val small { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.fn { display: grid; grid-template-columns: minmax(150px, 26%) minmax(0, 1fr); align-items: center; row-gap: 0; }
.fn-label { font-size: 16px; font-weight: 600; color: hsl(var(--heading)); }
.fn-track { height: 58px; display: flex; align-items: center; }
.fn-bar { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding: 0 18px; border-radius: 4px; background: hsl(var(--fn-bar)); color: hsl(var(--heading)); font-weight: 600; white-space: nowrap; transition: width .4s; }
.fn-bar.top { background: hsl(var(--fn-top)); color: hsl(var(--primary-text)); }
.fn-rate { display: flex; align-items: center; gap: 6px; padding: 8px 0; font-weight: 600; color: hsl(var(--secondary-foreground)); }
.fn-rate .muted { font-weight: 400; }
.fn-conn { height: 44px; }
.fn-conn svg { display: block; width: 100%; height: 100%; }
.fn-conn polygon { fill: hsl(var(--fn-conn)); }
.perf-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--radius); background: hsl(var(--muted) / 0.55); }
.perf-foot-ico { display: inline-flex; color: hsl(var(--primary-text)); }
.perf-btns { display: flex; flex-direction: column; gap: 6px; flex: 1 1 360px; }
.perf-btn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.perf-btn > svg { color: hsl(var(--muted-foreground)); flex: none; }
.perf-note { flex: 1 1 320px; text-align: right; }
.perf-note .res-split { margin: 0; }
.perf-last { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 4px 0; font-size: 14px; }
.perf-last > span:first-child { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perf-last > span:first-child svg { color: hsl(var(--success-text)); }
.perf-last .del-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
@media (max-width: 1100px) { .perf-money-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .perf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .perf { padding: 16px; } .perf-money-row, .perf-tiles { grid-template-columns: 1fr; } .fn { grid-template-columns: 1fr; } .fn-conn { display: none; } .perf-note { text-align: left; } }

/* rodapé com paginação + nota numa segunda linha */
.dtable-foot .foot-note { flex: 1 1 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; font-size: 12px; }

/* card "Qualidade dos números": barra da distribuição, totais e cada número com a pílula da qualidade */
.qbar { display: flex; gap: 3px; height: 8px; border-radius: 999px; overflow: hidden; background: hsl(var(--secondary)); }
.qbar i { display: block; height: 100%; }
.qbar i.ok { background: hsl(var(--success)); }
.qbar i.warn { background: hsl(var(--warning)); }
.qbar i.bad { background: hsl(var(--destructive)); }
.qlegend { display: flex; gap: 6px; flex-wrap: wrap; }

/* Capacidade e qualidade dos números: um bloco por BM com os números plugados nela */
.info-card.wide { grid-column: span 2; }
@media (max-width: 1100px) { .info-card.wide { grid-column: auto; } }
.cap-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cap-sum .qbar { flex: 1 1 160px; }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.cap-bm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid hsl(var(--border)); border-radius: 12px; min-width: 0; }
.cap-bm-head { display: flex; align-items: center; gap: 10px; }
.cap-bm-head .num-ico { width: 32px; height: 32px; border-radius: 9px; }
.cap-bm-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cap-bm-id strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-avail { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cap-avail .small { font-size: 11px; }
.cap-free { display: flex; align-items: baseline; gap: 4px; }
.cap-free strong { font-size: 18px; line-height: 1.1; }
.cap-nums { display: flex; flex-direction: column; gap: 6px; margin-left: 15px; padding-left: 16px; border-left: 2px solid hsl(var(--border-soft)); }
.cap-num { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.cap-num svg { flex: none; color: hsl(var(--primary-text)); }
.cap-num strong { flex: none; }
.cap-num .small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-num .badge { margin-left: auto; flex: none; }
@media (max-width: 480px) { .cap-bm { padding: 12px; } .cap-num .small { display: none; } }

/* ---------- login e conta (AOS) ---------- */

.auth-page { min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, hsl(var(--primary) / 0.12), transparent 60%), hsl(var(--background)); }
.auth-main { min-height: 100vh; max-width: none; padding: 48px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: hsl(var(--heading)); }
.auth-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-lg); }
.auth-card h2 { font-size: 22px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.auth-form button.big { width: 100%; }
.auth-link { align-self: center; margin-top: 10px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.auth-theme { position: fixed; top: 16px; right: 16px; color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }
.auth-theme:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }

.org-switch { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border-radius: var(--radius-md); border: 1px solid hsl(var(--header-border)); background: hsl(var(--header-accent)); color: hsl(var(--header-fg)); font-weight: 500; }
.org-switch.single { padding-right: 12px; color: hsl(var(--header-fg-strong)); font-size: 13px; }
.org-switch select { height: 32px; width: auto; max-width: 220px; padding: 0 28px 0 4px; border: 0; background-color: transparent; color: hsl(var(--header-fg-strong)); font-size: 13px; font-weight: 600; box-shadow: none; }
.org-switch select:focus { box-shadow: none; background-color: transparent; }
.org-switch select option { color: hsl(var(--foreground)); background: hsl(var(--popover)); }
.user-menu { position: relative; }
.user-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; background: linear-gradient(to top right, hsl(243 75% 59%), hsl(var(--brand-2))); color: #fff; font-size: 13px; font-weight: 700; box-shadow: none; }
.user-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 260px; padding: 8px; display: flex; flex-direction: column; gap: 2px; background: hsl(var(--popover)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.user-pop-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid hsl(var(--border-soft)); }
.user-pop-head strong { color: hsl(var(--heading)); word-break: break-all; }
.user-pop button.ghost { justify-content: flex-start; width: 100%; color: hsl(var(--foreground)); gap: 8px; }
#orgBanner { margin-bottom: 16px; }
#orgBanner .alert { display: flex; align-items: center; gap: 8px; margin: 0; }
.empty-org { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 560px; margin: 40px auto; }
.tm-invite-foot { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.role-help { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
select.tm-role { width: auto; min-width: 130px; }
.acc-block { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; margin-top: 16px; border-top: 1px solid hsl(var(--border-soft)); }
.acc-block h4 { margin: 0; }
@media (max-width: 760px) { .org-switch select { max-width: 120px; } .org-switch.single span { display: none; } }

/* ---------- perfil na empresa: o que cada um não pode fazer some da tela (a API também barra) ---------- */
/* Leitura: só vê */
body[data-role='leitura'] :is(#newCampaign, #heldAdd, #prepareBtn, #startBtn, #pauseBtn, #resumeBtn, #applyBtn, [data-cmd], select[data-swap],
  #tplNew, #tplLibrary, #tplJobsClear, #bulkDup, #bulkUnpause, #bulkDelete, #addBmBtn, [data-act='token'], [data-act='rename'],
  [data-act='remove'], [data-act='availability'], #testSend, [data-family], [data-add-tpl]) {
  display: none !important;
}
body[data-role='leitura'] :is(#stepAudience .aud-actions, #stepAudience .aud-sheet, #stepAudience .block-box button) {
  display: none !important;
}
/* Operador: tudo menos conexões (tokens) e excluir templates na Meta */
body[data-role='operador'] :is(#addBmBtn, [data-act='token'], [data-act='rename'], [data-act='remove'], #bulkDelete) {
  display: none !important;
}