/* ---------------------------------------------------------
   Tokens de design -- identidade visual da Agencia FG
   (vinho quase-preto + gradiente coral-rosa, IBM Plex Sans)
--------------------------------------------------------- */
:root {
  --ink: #2A1113;
  --ink-soft: #3D1B1E;
  --paper: #FCF5F3;
  --paper-raised: #FFFFFF;
  --accent: #FA3B5F;
  --accent-soft: #FDE3E8;
  --accent-dark: #7A1220;
  --accent-gradient: linear-gradient(90deg, #FF6B4A, #FA3B5F);
  --success: #2F8F5B;
  --success-soft: #E4F3EA;
  --border: #F1E4E1;
  --text: #241013;
  --text-muted: #8C7874;
  --shadow: 0 1px 2px rgba(42, 17, 19, 0.05), 0 8px 24px rgba(42, 17, 19, 0.08);
  --radius: 10px;
  --radius-pill: 999px;
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Modo escuro -- so troca o "papel" (fundo de paginas/cards) e o texto; a
   barra lateral ja e escura nos dois modos, entao fica igual nos dois. */
:root[data-theme="dark"] {
  --paper: #1C1214;
  --paper-raised: #271A1C;
  --accent-soft: rgba(250, 59, 95, 0.16);
  --accent-dark: #FF8CA0;
  --success: #4ADE80;
  --success-soft: rgba(74, 222, 128, 0.14);
  --border: #3A2729;
  --text: #F3E9E7;
  --text-muted: #B9A19E;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .format-badge.carrossel {
  background: rgba(123, 148, 255, 0.16);
  color: #AEBBFF;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Select nativo -- por padrao o navegador ignora tema escuro e desenha com
   fundo branco/seta cinza do sistema. Aplicamos as cores do tema e uma seta
   customizada (SVG) que troca de cor junto com o tema. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--paper);
  color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238C7874' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  padding-right: 30px;
}

:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23B9A19E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
}

/* ---------------- Login ---------------- */

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 15%, rgba(194, 48, 107, 0.10), transparent 45%),
    var(--ink);
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--paper-raised);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 32px;
}

.login-mark {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  padding: 5px;
}

.login-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-card h1 {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.login-card p.sub {
  color: var(--text-muted);
  font-size: 13.5px;
  margin: 0 0 28px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14.5px;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);
  transition: border-color 0.15s ease;
}

.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper-raised);
}

.btn-primary {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  color: white;
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-msg {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.error-msg.visible {
  display: block;
}

/* ---------------- Dashboard shell ---------------- */

.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--ink);
  color: #EDEBE8;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 4px 8px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}

.sidebar-brand img {
  height: 22px;
  width: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #C7C4C1;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.15s ease, color 0.15s ease;
  border: none;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-body);
}

.account-picker {
  position: relative;
  margin-bottom: 16px;
}

.account-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: white;
  font-size: 13.5px;
  font-family: var(--font-body);
}

.account-search-input::placeholder {
  color: #8B8985;
}

.account-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.account-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  padding: 4px;
}

.account-options.visible {
  display: block;
}

.account-option {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: #EDEBE8;
  text-align: left;
  font-size: 13.5px;
  font-family: var(--font-body);
  border-radius: 6px;
  cursor: pointer;
}

.account-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.account-option.selected {
  background: var(--accent);
  color: white;
}

.account-option-empty {
  padding: 8px 10px;
  font-size: 13px;
  color: #8B8985;
}

/* O seletor de marca normalmente mora na sidebar (sempre escura nos dois
   temas, por isso o branco fixo acima funciona la). Quando ele aparece
   dentro do conteudo principal (ex: tela "Conta e campanha" do Criar
   Anuncios), o fundo muda com o tema -- sem isso, o texto branco fica
   ilegivel em cima do papel claro do modo claro. */
.account-picker-inline .account-search-input {
  background: var(--paper-raised);
  border: 1px solid var(--border);
  color: var(--text);
}

.account-picker-inline .account-search-input::placeholder {
  color: var(--text-muted);
}

.account-picker-inline .account-options {
  background: var(--paper-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.account-picker-inline .account-option {
  color: var(--text);
}

.account-picker-inline .account-option:hover {
  background: var(--accent-soft);
}

.account-picker-inline .account-option-empty {
  color: var(--text-muted);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: white;
}

.nav-item.active {
  background: var(--accent);
  color: white;
}

/* Agrupa os itens da sidebar em secoes (ex: filtros de formato vs. paginas
   de verdade) -- sem isso tudo parece um unico tipo de link, mesmo sendo
   coisas diferentes (mudar um filtro na mesma tela x navegar pra outra). */
.sidebar-nav-label {
  padding: 2px 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8B8985;
}

.sidebar-nav-group {
  margin-bottom: 6px;
}

.sidebar-nav-group .nav-item {
  font-size: 13.5px;
}

.sidebar-nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 12px 4px 14px;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 8px;
}

.theme-toggle-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #C7C4C1;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.theme-toggle-btn:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

.theme-toggle-btn.theme-toggle-floating {
  position: fixed;
  top: 20px;
  right: 20px;
}

.logout-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #C7C4C1;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-body);
}

.logout-btn:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

.main {
  padding: 28px 36px 48px;
  width: 100%;
  box-sizing: border-box;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}

.topbar h2 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.01em;
}

.date-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
}

.date-controls input[type="date"] {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text);
  padding: 4px;
  color-scheme: light;
}

:root[data-theme="dark"] .date-controls input[type="date"] {
  color-scheme: dark;
}

.date-controls span {
  color: var(--text-muted);
  font-size: 13px;
}

/* Busca por campanha/conjunto/anuncio -- barra propria, cheia de largura,
   separada dos controles de data pra nao ficar apertada. */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
}

.search-icon {
  font-size: 14px;
  opacity: 0.6;
  flex-shrink: 0;
}

.filtro-texto-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
}

.filtro-texto-input:focus {
  outline: none;
}

.filtro-texto-input::placeholder {
  color: var(--text-muted);
}

.btn-refresh {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--ink);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}

.btn-refresh:hover {
  background: var(--ink-soft);
}

/* Cards de resumo */

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.summary-card {
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.summary-card .label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.summary-card .value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

/* Tabs de formato */

.format-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.format-tab {
  padding: 9px 4px;
  margin-right: 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
}

.format-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Tabela */

.table-wrap {
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Sem overflow:hidden aqui -- isso quebraria o cabecalho "sticky" ao rolar
     a pagina (o cantos arredondados sao feitos direto nas celulas de ponta). */
}

.table-wrap thead th:first-child {
  border-top-left-radius: var(--radius);
}

.table-wrap thead th:last-child {
  border-top-right-radius: var(--radius);
}

.table-wrap tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius);
}

.table-wrap tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius);
}

.ver-mais-wrap {
  display: none;
  justify-content: center;
  padding: 16px;
  border-top: 1px solid var(--border);
}

.btn-ver-mais {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-ver-mais:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-raised);
  text-align: left;
  padding: 12px 14px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* So a tabela do dashboard e ordenavel por coluna -- as tabelas de
   Configuracoes nao sao, entao nao devem parecer clicaveis. */
.sortable-table thead th {
  cursor: pointer;
}

.sortable-table thead th:hover {
  color: var(--accent);
}

tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody td:first-child {
  vertical-align: top;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--accent-soft);
}

.ad-name-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 240px;
  padding: 6px 0;
}

.thumb {
  width: 220px;
  height: 220px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--border);
  flex-shrink: 0;
}

.thumb-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}

.thumb-wrap .thumb {
  width: 100%;
  height: 100%;
}

/* Anuncio de Catalogo Dinamico (DPA) sem imagem real (a Meta escolhe a foto
   do produto pessoa por pessoa -- nao existe "a foto" desse anuncio) --
   placeholder proprio em vez do icone generico "sem foto" da propria Meta
   (que so' aparece pequeno/quebrado). Funciona dentro de qualquer container
   ja dimensionado (.thumb, .presentation-grid-card-thumb-vazio, etc.) --
   so' preenche 100% do espaco e centraliza o conteudo. */
.catalogo-placeholder-conteudo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-muted);
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
}

.catalogo-placeholder-conteudo .catalogo-placeholder-icone {
  font-size: 28px;
  opacity: 0.7;
}

.catalogo-placeholder-conteudo .catalogo-placeholder-texto {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.play-overlay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 22, 26, 0.55);
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.play-overlay:hover {
  background: var(--accent);
  transform: scale(1.06);
}

.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(23, 22, 26, 0.7);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.video-modal.visible {
  display: flex;
}

.video-modal-content {
  position: relative;
  background: var(--paper-raised);
  border-radius: var(--radius);
  padding: 40px 16px 16px;
  max-width: 97vw;
  max-height: 94vh;
  overflow: auto;
}

.video-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}

.video-modal-close:hover {
  color: var(--text);
}

.video-modal-body {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.preview-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.preview-column-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.video-modal-body iframe {
  display: block;
  border: none;
  /* NAO forcar width/height fixo aqui -- cada posicionamento (Feed,
     Stories, Reels) vem da Meta com um tamanho natural DIFERENTE, e forcar
     um tamanho unico pros dois faz um deles sobrar espaco em branco
     (bug real, visto em 2026-07-27). So max-width/max-height, que apenas
     limitam sem esticar. */
  max-width: min(92vw, 480px);
  max-height: 82vh;
}

.present-overlay {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 22, 26, 0.55);
  color: white;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.present-overlay:hover {
  background: var(--accent);
  transform: scale(1.06);
}

.presentation-modal-content {
  max-width: 1160px;
  width: 92vw;
}

.presentation-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.presentation-kpi-config {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* `.presentation-kpi-config` (classe do autor) tem mais prioridade que o
   estilo padrao do navegador pro atributo `hidden` ([hidden] {display:none},
   estilo de user-agent -- perde pra qualquer regra do autor, mesmo com
   especificidade menor). Sem isso, `.hidden = true` nesses paineis (botao
   "Configurar KPIs"/"Configurar colunas" OU o "X" de minimizar) nao tinha
   efeito visual nenhum -- mesma causa raiz ja corrigida antes pra
   `.wizard-form .form-row`. */
.presentation-kpi-config[hidden] {
  display: none;
}

/* Aviso de "essa metrica ainda da pra ser deduzida" na tela de Pessoas
   (ex: esconder Receita mas deixar ROAS + Investimento a vista). */
.metricas-aviso {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.metric-config-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.metric-config-topo-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.metric-config-fechar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.metric-config-fechar:hover {
  background: var(--border);
  color: var(--text);
}

.metric-config-secao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.metric-config-secao:first-child {
  margin-top: 0;
}

.metric-config-secao-titulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.metric-config-secao-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.metric-config-lista-selecionadas {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}

.metric-config-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text);
  background: var(--paper-raised);
  border: 1px solid transparent;
  cursor: grab;
  transition: border-color 0.12s, background 0.12s;
}

.metric-config-item:hover {
  border-color: var(--border);
}

.metric-config-item.dragging {
  opacity: 0.4;
}

.metric-config-handle {
  color: var(--text-muted);
  user-select: none;
  font-size: 13px;
  line-height: 1;
}

.metric-config-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: white;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.metric-config-label {
  flex: 1;
  min-width: 0;
}

.metric-config-remove {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.metric-config-item:hover .metric-config-remove {
  opacity: 1;
}

.metric-config-remove:hover {
  background: var(--border);
  color: var(--text);
}

.metric-config-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.metric-config-pill {
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.metric-config-pill:hover {
  border-color: var(--accent);
  border-style: solid;
  color: var(--accent);
  background: var(--paper-raised);
}

/* ---------- Tamanho dos cards no modo apresentacao em grade ---------- */

.grid-size-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.grid-size-btn {
  padding: 6px 12px;
  border: none;
  background: var(--paper);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.grid-size-btn + .grid-size-btn {
  border-left: 1px solid var(--border);
}

.grid-size-btn.active {
  background: var(--accent-gradient);
  color: white;
}

.presentation-grid-cards.tamanho-sm {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.presentation-grid-cards.tamanho-md {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.presentation-grid-cards.tamanho-lg {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.presentation-slide {
  display: flex;
  gap: 32px;
  align-items: stretch;
  width: 1120px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--paper-raised);
  border-radius: var(--radius);
  padding: 32px;
  box-sizing: border-box;
  overflow: hidden;
}

.presentation-slide-image {
  flex: 1.1;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.presentation-slide-image img,
.presentation-slide-image #presentationImgPlaceholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presentation-slide-kpis {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content;
  gap: 16px;
  align-content: center;
}

.presentation-kpi-item {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.presentation-kpi-item .label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.presentation-kpi-item .value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

.presentation-kpi-item .value.roas-positive {
  color: var(--success);
}

@media (max-width: 900px) {
  .presentation-slide {
    flex-direction: column;
    aspect-ratio: auto;
    width: 100%;
  }
}

.presentation-grid-slide {
  width: 1100px;
  max-width: 100%;
  background: var(--paper-raised);
  border-radius: var(--radius);
  padding: 28px;
  box-sizing: border-box;
}

.presentation-grid-titulo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 18px;
}

.presentation-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.presentation-grid-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.presentation-grid-card img,
.presentation-grid-card-thumb-vazio {
  width: 100%;
  /* Proporcao do Feed (4:5, retrato) -- bem maior que a faixa curta de
     antes (130px fixo), da pra ver o criativo de verdade em vez de so uma
     tira cortada no meio da imagem. */
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  background: var(--border);
  display: block;
}

.presentation-grid-card-nome {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* Reserva altura de 2 linhas mesmo quando o nome cabe em 1 -- sem isso,
     cards com nome curto ficavam mais baixos que os vizinhos com nome
     longo, e as linhas de KPI abaixo saiam desalinhadas entre colunas. */
  min-height: 2.6em;
  line-height: 1.3;
}

.presentation-grid-kpis {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.presentation-grid-kpi {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
}

.presentation-grid-kpi .label {
  color: var(--text-muted);
}

.presentation-grid-kpi .value {
  font-weight: 700;
}

.presentation-grid-kpi .value.roas-positive {
  color: var(--success);
}

.ad-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  max-width: 220px;
  line-height: 1.3;
}

.format-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
}

.format-badge.estatico {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.format-badge.carrossel {
  background: #E7EAF6;
  color: #3B4E9E;
}

.format-badge.video {
  background: var(--success-soft);
  color: var(--success);
}

.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
}

.status-badge.status-ativo {
  background: var(--success-soft);
  color: var(--success);
}

.status-badge.status-inativo {
  background: var(--border);
  color: var(--text-muted);
}

.roas-positive {
  color: var(--success);
  font-weight: 600;
}

.state-msg {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.state-msg.error {
  color: var(--accent-dark);
}

/* Configuracoes (pessoas + marcas) */

.settings-section {
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.settings-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.settings-section-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.settings-section h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
}

.settings-hint {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.settings-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-items: end;
  gap: 16px 18px;
  margin-bottom: 22px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.settings-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.settings-form .form-row-wide {
  grid-column: 1 / -1;
}

.settings-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.settings-form input[type="text"],
.settings-form input[type="password"] {
  padding: 9px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--paper-raised);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  width: 100%;
}

/* Select dentro do form: declarado por inteiro aqui (sem usar o atalho
   "background", que reseta background-image pra "none" e brigava com a seta
   custom da regra generica "select", causando duplicacao/flicker da setinha
   no Chromium/Windows). */
.settings-form select {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 30px 9px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background-color: var(--paper-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238C7874' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  width: 100%;
}

:root[data-theme="dark"] .settings-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23B9A19E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
}

.settings-form input[type="text"]:focus,
.settings-form input[type="password"]:focus,
.settings-form select:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-btn {
  grid-column: 1 / -1;
  width: auto;
  justify-self: end;
  padding: 10px 22px;
}

.checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 12px 6px 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.checkbox-item:hover {
  border-color: var(--accent);
}

.checkbox-item:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.checkbox-item input {
  accent-color: var(--accent);
  margin: 0;
}

/* ---- Celula de identidade (avatar + nome + subtitulo) nas tabelas de Configuracoes ---- */

.entity-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.entity-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.entity-name {
  font-weight: 600;
}

.entity-subtext {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: "SFMono-Regular", Consolas, monospace;
}

.entity-subtext.error {
  color: var(--accent-dark);
  font-weight: 600;
}

/* ---- Badges (papel da pessoa, tipo de cliente) ---- */

.badge-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.badge-pill.role-admin {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.badge-pill.role-equipe {
  background: var(--success-soft);
  color: var(--success);
}

.badge-pill.role-user {
  background: var(--border);
  color: var(--text-muted);
}

.tipo-negocio-select {
  padding: 6px 26px 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background-color: var(--paper);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  background-position: right 8px center;
  background-size: 11px;
}

.tipo-negocio-select.tipo-leads {
  border-color: var(--accent);
  color: var(--accent-dark);
  background-color: var(--accent-soft);
}

.user-edit-row.hidden {
  display: none;
}

.user-edit-row td {
  background: var(--paper);
}

.user-edit-row .settings-form {
  margin-bottom: 0;
}

.entity-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-remover {
  border: 1px solid transparent;
  background: none;
  color: var(--accent-dark);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-remover:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.btn-ghost-sm {
  border: 1px solid var(--border);
  background: var(--paper-raised);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-ghost-sm:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.claude-key-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.claude-key-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  white-space: nowrap;
}

.claude-key-status.ok {
  background: var(--success-soft);
  color: var(--success);
}

.claude-key-status.missing {
  background: var(--border);
  color: var(--text-muted);
}

.claude-key-form {
  display: flex;
  gap: 6px;
}

.claude-key-form.hidden {
  display: none;
}

.claude-key-form input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--paper-raised);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
  width: 150px;
}

.claude-key-form button[type="submit"] {
  border: none;
  background: var(--ink);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.claude-key-form .claude-key-cancel-btn {
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* Assistente IA (chat) */

.chat-wrap {
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: calc(100vh - 220px);
  min-height: 400px;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-bubble-usuario {
  align-self: flex-end;
  background: var(--accent-gradient);
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-bubble-assistente {
  align-self: flex-start;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
}

.chat-suggestion-chip {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.chat-suggestion-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chat-input-row {
  display: flex;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--border);
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--paper);
  color: var(--text);
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---------- Criar Anuncios por chat ---------- */

.ad-chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .ad-chat-layout {
    grid-template-columns: 1fr;
  }
}

.ad-chat-wrap {
  height: calc(100vh - 340px);
}

.ad-chat-anexos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
}

.ad-chat-anexo-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--paper);
  font-size: 12px;
}

.ad-chat-anexo-chip img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.ad-chat-anexo-chip .badge-pill {
  font-size: 10px;
}

.ad-chat-anexo-chip-carregando {
  opacity: 0.6;
}

.ad-chat-coluna-estado {
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  top: 20px;
}

.ad-chat-item-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}

.ad-chat-item-card img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border);
}

.ad-chat-item-card-info {
  min-width: 0;
  flex: 1;
}

.ad-chat-item-card-titulo {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}

.ad-chat-item-card-texto {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ad-chat-item-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.ad-chat-item-card-cartoes {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.ad-chat-item-card-cartoes img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.chat-send-btn {
  width: auto;
  padding: 10px 22px;
}

/* Criar Anuncios em Lote */

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--paper-raised);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.wizard-step .wizard-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.wizard-step.active {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.wizard-step.active .wizard-step-num {
  background: var(--accent-gradient);
  color: white;
}

/* Formulario de 1 campo por linha, largura cheia -- usado na tela "Conta e
   campanha" do Criar Anuncios, onde nomes de campanha/conjunto/pagina da
   Meta costumam ser longos (varias tags entre colchetes) e nao cabem numa
   grade de colunas estreitas como o .settings-form usa em Configuracoes. */
.wizard-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.wizard-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* `.wizard-form .form-row` (2 classes) tem mais especificidade que o estilo
   padrao do navegador pro atributo `hidden` ([hidden] { display: none },
   1 seletor de atributo) -- sem esta regra, JS setando `.hidden = true`
   num form-row dentro de wizard-form nao tinha efeito visual nenhum (linha
   continuava aparecendo). Confirmado contra o wizard de Criar Campanha:
   linhas de orcamento/data de termino ficavam visiveis mesmo escondidas. */
.wizard-form .form-row[hidden] {
  display: none;
}

.wizard-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.wizard-form select {
  width: 100%;
  padding: 11px 34px 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--paper-raised);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  /* Selects nativos nao suportam text-overflow: ellipsis no valor
     selecionado em todo navegador -- dar largura de sobra (form de 1
     coluna, ate 640px) e um title com o texto completo (via JS) e o que
     realmente evita o corte no meio da palavra. */
}

.wizard-form select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wizard-form select:focus {
  outline: none;
  border-color: var(--accent);
}

.wizard-form-actions {
  display: flex;
  justify-content: flex-end;
}

.wizard-step.done .wizard-step-num {
  background: var(--success-soft);
  color: var(--success);
}

.warning-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 20px;
}

.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  margin-bottom: 16px;
}

.dropzone:hover,
.dropzone.dropzone-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.dropzone-hint {
  font-size: 12.5px;
  margin-top: 6px;
  color: var(--text-muted);
}

.library-modal-body {
  width: 720px;
  max-width: 80vw;
}

.creative-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
}

.creative-library-item {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--paper);
  transition: border-color 0.15s ease;
}

.creative-library-item:hover {
  border-color: var(--accent);
}

.creative-library-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.creative-library-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

.creative-library-item-label {
  padding: 6px 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 12px;
}

/* Duas colunas lado a lado (Feed | Stories e Reels) -- mesmo espirito do
   customizador de posicionamento do Gerenciador de Anuncios da Meta: um
   anuncio so, com um asset diferente por posicionamento. */
.item-card-assets {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.item-card-asset-slot {
  flex: 1 1 220px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.item-card-asset-slot-vazio {
  opacity: 0.9;
}

.item-card-asset-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.item-card-asset-thumb {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  object-fit: cover;
  background: var(--border);
}

.item-card-asset-thumb-stories {
  max-width: 100px;
  aspect-ratio: 9 / 16;
}

.item-card-asset-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.item-card-asset-hint {
  font-size: 11px;
  margin: 0;
}

.item-card-asset-hint-fixo {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 6px;
  padding: 6px 8px;
  max-width: 260px;
}

/* Alternador Único/Carrossel acima do dropzone (tela de Criativos). */
.formato-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.formato-toggle-label {
  font-size: 12.5px;
  color: var(--text-muted);
}

.formato-toggle-btn {
  border: 1px solid var(--border);
  background: var(--paper-raised);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.formato-toggle-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.formato-toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.catalogo-form {
  margin-bottom: 16px;
}

.item-card-catalogo-badge {
  padding: 14px 16px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  max-width: 420px;
}

/* Area de revisao pos-upload (Unico): mostra a versao Feed + a versao
   Stories gerada automaticamente antes de confirmar o envio. */
.upload-review {
  margin-top: 16px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.upload-review-titulo {
  font-weight: 600;
  margin-bottom: 12px;
}

.upload-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.upload-review-card {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

.upload-review-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(23, 22, 26, 0.55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.upload-review-nome {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-review-previews {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.upload-review-preview {
  position: relative;
  flex: 1;
  min-width: 0;
}

.upload-review-preview img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--border);
}

.upload-review-preview-label {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(23, 22, 26, 0.6);
  border-radius: 4px;
  padding: 1px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-review-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
}

.upload-review-aviso {
  margin-top: 4px;
  color: var(--accent-dark);
}

.upload-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* Carrossel: faixa horizontal de cartoes dentro do item-card. */
.item-card-carousel-slot {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carousel-cards-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.carousel-card {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper-raised);
}

.carousel-card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  object-fit: cover;
  background: var(--border);
}

.carousel-card-titulo,
.carousel-card-link {
  width: 100%;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 11.5px;
}

.carousel-card-stories-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.carousel-card-stories-thumb {
  width: 20px;
  height: 34px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--border);
  flex-shrink: 0;
}

.carousel-card-stories-thumb-vazio {
  border: 1px dashed var(--border);
}

.carousel-card-stories-row .carousel-card-stories-btn {
  font-size: 10.5px;
  padding: 3px 6px;
  flex: 1;
  min-width: 0;
}

.carousel-card-stories-row .carousel-card-stories-remove {
  font-size: 11px;
  padding: 3px 6px;
  flex-shrink: 0;
}

.carousel-card-actions {
  display: flex;
  gap: 4px;
}

.carousel-card-actions .carousel-card-mover {
  padding: 4px 8px;
  font-size: 11px;
}

.carousel-card-actions .carousel-card-remove {
  font-size: 11px;
  padding: 4px 8px;
}

.carousel-view-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.item-card-carousel-stories-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.carousel-stories-big-thumb {
  width: 160px;
  height: 284px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--border);
  display: block;
}

.carousel-card-add {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: center;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.item-card-side-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.item-card-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Campos agrupados por finalidade (Identificação, Conteúdo, Destino, Botão)
   em vez de uma grade unica espremendo tudo na mesma largura -- cada grupo
   tem um rotulo pequeno e os campos ficam largos o suficiente pra nao
   truncar o placeholder (ver historico: "Nome no Gerenciador de..." cortado
   quando era so 1 grade de minmax(160px,1fr) com 7 campos). */
.item-card-fields-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-card-fields-group-titulo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  opacity: 0.8;
}

.item-card-fields-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.item-card-fields .form-row label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.item-card-fields input {
  width: 100%;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--paper-raised);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
}

/* Select declarado por inteiro (sem o atalho "background", que reseta
   background-image pra "none" e briga com a seta custom da regra generica
   "select", duplicando a setinha no Chromium/Windows -- mesmo problema ja
   corrigido em .settings-form select). */
.item-card-fields select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 26px 7px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background-color: var(--paper-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238C7874' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 11px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
}

:root[data-theme="dark"] .item-card-fields select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23B9A19E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
}

.item-card-remove {
  align-self: flex-start;
}

.badge-pill.status-pending {
  background: var(--border);
  color: var(--text-muted);
}

.badge-pill.status-uploading {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.badge-pill.status-created {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.badge-pill.status-published {
  background: var(--success-soft);
  color: var(--success);
}

.badge-pill.status-error {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
}

@media (max-width: 640px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    position: static;
    height: auto;
  }
  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* No mobile a sidebar vira uma faixa horizontal -- os grupos ficam lado a
     lado (nao empilhados), o rotulo de secao some (nao cabe/nao ajuda numa
     faixa estreita) e o divisor vira uma linha vertical entre os grupos. */
  .sidebar-nav-group {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
  }
  .sidebar-nav-label {
    display: none;
  }
  .sidebar-nav-divider {
    width: 1px;
    height: 28px;
    margin: 0 6px;
  }
}

/* ---------- Pessoas: filtro e separacao por papel ---------- */

.people-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.people-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.people-filter:hover {
  border-color: var(--accent);
  color: var(--text);
}

.people-filter.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.people-filter-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.people-filter.active .people-filter-count {
  background: var(--accent);
  color: #fff;
}

.people-group-row td {
  padding-top: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.people-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.people-group-count {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.badge-pill.badge-provisoria {
  margin-left: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Senha provisoria ---------- */

.senha-provisoria-campo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.senha-provisoria-campo input {
  flex: 0 1 260px;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.senha-provisoria-campo .btn-ghost-sm {
  flex-shrink: 0;
}

/* A dica divide a linha com o campo em vez de ficar embaixo dele. */
.senha-provisoria-campo .settings-hint {
  flex: 1 1 240px;
  margin: 0;
}

.credenciais-novas {
  margin: 16px 0 4px;
  padding: 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.credenciais-novas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.credenciais-novas-head strong {
  color: var(--accent-dark);
}

.credenciais-novas-valores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 12px 0 14px;
}

.credenciais-novas-valores span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.credenciais-novas-valores code {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--paper-raised);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: var(--text);
  user-select: all;
}

.senha-provisoria-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 600;
}

.senha-provisoria-aviso[hidden] {
  display: none;
}

.senha-provisoria-aviso .btn-primary {
  width: auto;
  padding: 8px 16px;
  font-size: 13px;
}

/* ---------- Modal "Minha conta" (todos os papeis) ---------- */

.minha-conta-modal-content {
  max-width: 420px;
  padding: 28px;
  background: var(--paper-raised);
  text-align: left;
}

.minha-conta-modal-content h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  color: var(--text);
}

.minha-conta-modal-content .btn-primary {
  width: 100%;
  margin-top: 6px;
}

.minha-conta-ok {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 13px;
  font-weight: 600;
}

.minha-conta-ok[hidden] {
  display: none;
}