/* ============================================================
   content hub - console de operacao
   ============================================================
   Isto nao e uma pagina de produto: e um painel que alguem abre
   pra responder "esta rodando, e se nao esta, o que travou?".
   Por isso densidade, dados em monoespacada e sinal de estado
   sempre acompanhado do motivo.

   Tipografia: Cascadia Code (fonte do Windows Terminal, ja
   instalada) nos dados - e o vernaculo de console da plataforma
   onde o app roda. Segoe UI Variable no texto corrido.
   ============================================================ */

:root,
html[data-theme="light"] {
  /* Design Tokens no Padrão de Qualidade Painel Master & Zuune Suite (Modo Claro) */
  color-scheme: light;
  --bg: #f8fafc;
  --bg-grid: #e2e8f0;
  --surface: #ffffff;
  --surface-hover: #f1f5f9;
  --surface-elevated: #ffffff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --hair: #e6ebf2;
  --hair-2: #d6dfea;

  --ink: #0f172a;
  --ink-secondary: #334155;
  --muted: #64748b;
  --muted-light: #94a3b8;

  --primary: #0055d4;
  --primary-hover: #0047bb;
  --primary-light: #eff6ff;
  --primary-border: #bfdbfe;

  --accent-blue: #0066ff;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --accent-emerald-light: #ecfdf5;
  --accent-amber: #f59e0b;
  --accent-amber-light: #fffbeb;
  --accent-rose: #ef4444;
  --accent-rose-light: #fef2f2;

  --font-display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", Consolas, monospace;

  /* Aliases para manter compatibilidade total com os componentes existentes */
  --breu: var(--bg);
  --placa: var(--surface);
  --placa-alta: var(--surface-hover);
  --placa-topo: #ffffff;
  --linha: var(--border);
  --tinta: var(--ink);
  --tinta-fraca: var(--ink-secondary);
  --tinta-apagada: var(--muted);
  --viva: var(--accent-emerald);
  --atencao: var(--accent-amber);
  --parada: var(--accent-rose);
  --acento: var(--primary);
  --acento-quente: #2563eb;
  --mono: var(--font-mono);
  --texto: var(--font-sans);
  --viva-veu: var(--accent-emerald-light);
  --atencao-veu: var(--accent-amber-light);
  --parada-veu: var(--accent-rose-light);
  --scrim: rgba(15, 23, 42, 0.4);
  --raio: 12px;
  --raio-g: 16px;
  --barra: 248px;
  --medida: 1360px;
  --medida-texto: 720px;
}

/* Modo Escuro (Padrão Preto Absoluto / Obsidian Dark - Cores Exatas do Print: #070709, #111114, #1f1f22) */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070709;
  --bg-grid: rgba(255, 255, 255, 0.025);
  --surface: #111114;
  --surface-hover: #18181c;
  --surface-elevated: #161619;
  --border: #1f1f22;
  --border-light: #161619;
  --hair: #1f1f22;
  --hair-2: #2a2a2f;

  --ink: #f4f4f5;
  --ink-secondary: #a1a1aa;
  --muted: #71717a;
  --muted-light: #52525b;

  --primary: #0066ff;
  --primary-hover: #2563eb;
  --primary-light: rgba(0, 102, 255, 0.15);
  --primary-border: rgba(0, 102, 255, 0.35);

  --accent-emerald: #10b981;
  --accent-emerald-light: rgba(16, 185, 129, 0.15);
  --accent-amber: #f59e0b;
  --accent-amber-light: rgba(245, 158, 11, 0.15);
  --accent-rose: #ef4444;
  --accent-rose-light: rgba(239, 68, 68, 0.15);
  --scrim: rgba(0, 0, 0, 0.85);

  /* Aliases para compatibilidade total com todos os componentes legados e novos */
  --breu: #070709;
  --placa: #111114;
  --placa-alta: #18181c;
  --placa-topo: #161619;
  --linha: #1f1f22;
  --tinta: #f4f4f5;
  --tinta-fraca: #a1a1aa;
  --tinta-apagada: #71717a;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]),
  html[data-theme="system"] {
    color-scheme: dark;
    --bg: #070709;
    --bg-grid: rgba(255, 255, 255, 0.025);
    --surface: #111114;
    --surface-hover: #18181c;
    --surface-elevated: #161619;
    --border: #1f1f22;
    --border-light: #161619;
    --hair: #1f1f22;
    --hair-2: #2a2a2f;

    --ink: #f4f4f5;
    --ink-secondary: #a1a1aa;
    --muted: #71717a;
    --muted-light: #52525b;

    --primary: #0066ff;
    --primary-hover: #2563eb;
    --primary-light: rgba(0, 102, 255, 0.15);
    --primary-border: rgba(0, 102, 255, 0.35);

    --accent-emerald: #10b981;
    --accent-emerald-light: rgba(16, 185, 129, 0.15);
    --accent-amber: #f59e0b;
    --accent-amber-light: rgba(245, 158, 11, 0.15);
    --accent-rose: #ef4444;
    --accent-rose-light: rgba(239, 68, 68, 0.15);
    --scrim: rgba(0, 0, 0, 0.85);

    --breu: #070709;
    --placa: #111114;
    --placa-alta: #18181c;
    --placa-topo: #161619;
    --linha: #1f1f22;
    --tinta: #f4f4f5;
    --tinta-fraca: #a1a1aa;
    --tinta-apagada: #71717a;
  }
}

* {
  box-sizing: border-box;
}

/* display explicito (.btn-icone, .acoes...) vence o display:none que o
   navegador da ao [hidden]: sem isto, botao escondido continua na tela */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-grid) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  display: grid;
  grid-template-columns: var(--barra) 1fr;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- barra lateral no padrão Painel Master ---------------- */

.lateral {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 100;
}

.lateral-scroll-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 16px 12px;
  gap: 16px;
}

.lateral-scroll-container::-webkit-scrollbar {
  width: 4px;
}
.lateral-scroll-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.marca-master {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 14px 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}

.marca-avatar-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0055d4 0%, #003e9c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(0, 85, 212, 0.3);
  flex-shrink: 0;
}

.marca-texto-box {
  display: flex;
  flex-direction: column;
}

.marca-titulo {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
  line-height: 1.2;
}

.marca-sub {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}

.lateral-grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lateral-categoria-titulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 6px 10px 4px 10px;
  text-transform: uppercase;
}

.lateral-item-master {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 10px;
  color: #475569;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  transition: all 0.15s ease;
  position: relative;
}

.lateral-item-master:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.lateral-item-master.ativo {
  background: var(--primary);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 85, 212, 0.25);
}

.lateral-item-ico-wrap {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lateral-ico {
  width: 17px;
  height: 17px;
}

.lateral-item-txt {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lateral-badge-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eff6ff;
  color: #0055d4;
  border: 1px solid #bfdbfe;
}

.lateral-item-master.ativo .lateral-badge-pill {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.lateral-rodape-master {
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}

.status-dot.anim-pulse {
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-green 1.8s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Fallback do item clássico para páginas legadas */
.lateral-item {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 8px;
  color: #475569;
  font-family: var(--texto);
  font-size: 13px;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.lateral-item:hover { color: var(--ink); background: var(--surface-hover); }
.lateral-item.ativo { color: #fff; background: var(--primary); }

.lateral-item:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}

/* A engrenagem fecha a barra: as outras paginas sao trabalho, esta e ajuste.
   E ela quem leva o `margin-top: auto` agora - o rodape vem logo abaixo. */
.lateral-item-config {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--linha);
  border-left-color: transparent;
}

.icone-engrenagem {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* contador de problemas: so aparece quando ha problema */
.aviso-contagem {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--parada);
  color: #fff;
  border-radius: 10px;
  padding: 0 7px;
  line-height: 17px;
}

.aviso-contagem:empty {
  display: none;
}

.lateral-rodape {
  padding: 14px 20px 0;
  border-top: 1px solid var(--linha);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-apagada);
}

/* ---------------- area de conteudo ---------------- */

.conteudo {
  padding: 28px 32px 48px;
  min-width: 0;
}

/* O conteudo ganha uma MEDIDA, como o .section-inner do site (1120px).
   Sem ela, num monitor largo o campo de uma senha ocupava 960px e uma frase
   de ajuda virava uma linha de 180 caracteres - nada no painel precisa disso.
   `margin-inline: auto` so entra acima da medida, entao em tela estreita o
   comportamento nao muda. */
.conteudo > section {
  max-width: var(--medida);
  margin-inline: auto;
}

.conteudo h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.subtitulo {
  color: var(--tinta-fraca);
  margin: 0 0 24px;
  /* o site limita o section-head em 640px pelo mesmo motivo: texto corrido
     numa coluna larga obriga o olho a varrer longe demais pra achar a linha
     seguinte */
  max-width: var(--medida-texto);
}

.painel {
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.painel > h3 {
  margin: 0 0 14px;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 600;
}

/* ---------------- controles ---------------- */

button {
  font-family: var(--texto);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: var(--placa-alta);
  color: var(--tinta);
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--tinta-apagada);
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

button.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 500;
}

button.perigo:hover:not(:disabled) {
  border-color: var(--parada);
  color: var(--parada);
}

/* a alca de redimensionar vinha em "both": arrastar pro lado fazia o campo
   crescer por cima da coluna vizinha e travar o layout da faixa */
textarea {
  resize: vertical;
  max-width: 100%;
}

input,
select,
textarea {
  font-family: var(--mono);
  font-size: 13px;
  padding: 6px 9px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: var(--breu);
  color: var(--tinta);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--acento);
}

label {
  color: var(--tinta-fraca);
  font-size: 13px;
}

fieldset {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 18px;
  margin: 0 0 18px;
}

legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  padding: 0 6px;
}

/* ---------------- estado de conta ----------------
   O elemento que define este painel: nenhuma luz vermelha sem o
   motivo colado nela. "Erro" sozinho fez perder tempo achando que
   contas tinham caido quando era so cookie velho - os dois casos
   parecem iguais e tem solucoes opostas. */

.usuario {
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
}

/* link pro perfil: o azul sublinhado do navegador destoa de tudo. Fica como
   texto normal com uma pista discreta de que e clicavel. */
a.link-perfil {
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px dotted var(--tinta-apagada);
}

a.link-perfil:hover {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

a.link-perfil:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.secundario {
  color: var(--tinta-apagada);
  font-size: 12px;
  font-family: var(--mono);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------------- saidas de processo ---------------- */

pre {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  background: var(--breu);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
  margin: 0;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--tinta-fraca);
}

pre:empty {
  display: none;
}

.aviso {
  color: var(--atencao);
}

.falha {
  color: var(--parada);
}

.sucesso {
  color: var(--viva);
}

@media (prefers-reduced-motion: no-preference) {
  .lateral-item,
  button {
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  }

  .foto-marca {
    transition: opacity 120ms ease;
  }

  input[type='checkbox']::before {
    transition: transform 110ms ease;
  }
}

/* A coluna de acoes e a mais usada e estava saindo da tela: os campos de
   formulario nao podem crescer a vontade. */
.input-bio {
  width: 190px;
}

.input-senha {
  width: 110px;
}

.foto-nome {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acoes button {
  padding: 5px 10px;
  font-size: 12px;
}

/* ---------------- faixa de execucao do ciclo ----------------
   O estado do ciclo e a primeira coisa da tela e fica sempre visivel: antes
   era um checkbox perdido no meio de dois paineis e so dava pra saber se algo
   estava rodando lendo o JSON que aparecia no fim. */

.faixa-execucao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 18px;
  margin-bottom: 18px;
}

.faixa-estado {
  display: flex;
  align-items: center;
  gap: 12px;
}

.faixa-titulo {
  font-size: 15px;
  font-weight: 600;
}

.faixa-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* lampada: parada (apagada), ligada (sem rodar agora), rodando (pulsa) */
.lampada {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tinta-apagada);
  flex: 0 0 auto;
}

.lampada.ligada {
  background: var(--atencao);
}

.lampada.rodando {
  background: var(--viva);
}

@media (prefers-reduced-motion: no-preference) {
  .lampada.rodando {
    animation: pulso 1.6s ease-in-out infinite;
  }
}

@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 169, 139, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(79, 169, 139, 0); }
}

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--placa-alta);
  color: var(--tinta);
  cursor: pointer;
  font-size: 13px;
}

.interruptor:hover {
  border-color: var(--tinta-apagada);
}

/* ============================================================
   ciclo - o painel de operacao
   ============================================================
   A pergunta e "o que vai sair, quando, e em quais contas". A
   configuracao nao e uma lista de seis campos: e tres perguntas
   (o que sai / em que ritmo / com que acesso), e os campos moram
   na pergunta que respondem. Os tres numeros do ritmo existem
   pelo mesmo motivo - nao postar em rajada - entao ficam juntos
   e a frase ao lado le os tres de uma vez. Antes eram quatro
   <label> inline numa linha, com a largura decidida por size="4".
   ============================================================ */

/* Linha 1: o que sai (largo, o link de story e uma URL) e o acesso
   (estreito, um campo). Linha 2: o ritmo, na faixa inteira - a frase
   que le os numeros precisa de espaco horizontal pra ficar ao lado
   deles, e nao embaixo. */
.grade-config {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(190px, 0.6fr);
  gap: 20px 22px;
}

/* Blocos de configuracao lado a lado, nao empilhados.
   Antes era uma coluna so: com tres servicos (Instagram, SMSBear, Telegram) de
   um campo cada, sobravam 550px vazios a direita e a pagina virava uma fita
   vertical. `auto-fit` com minimo de 260px e o mesmo recurso do .rates-grid do
   site - em tela estreita ele volta a empilhar sozinho. */
.grupos-lado-a-lado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* 1px de gap DENTRO de uma borda: as celulas sao divididas por fios, nao
     separadas por vazio. Faz o conjunto ler como uma chapa unica em vez de
     cartoes soltos - o device que o site usa nas tarifas. */
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}

.grupos-lado-a-lado > .grupo-config {
  background: var(--placa);
  padding: 16px 18px;
  margin: 0;
}

.grupo-config {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px 16px;
  align-content: start;
  min-width: 0;
}

.grupo-config > h4 {
  grid-column: 1 / -1;
  margin: 0;
}

/* o link e o numero lado a lado: um numero de dois digitos nao merece a
   mesma largura de uma URL.
   Preso ao PAI de proposito: como `:first-child` solto, ele passou a casar
   tambem com a primeira celula da chapa de credenciais e desalinhava ela. */
.placa > .grupo-config:first-of-type:not(.grupos-lado-a-lado > *) {
  grid-template-columns: minmax(0, 1fr) 132px;
}

/* o ritmo abre uma linha nova na faixa inteira, e o fio em cima separa as
   duas decisoes que se toma uma vez (o que sai, com que acesso) da que se
   ajusta sempre */
.grupo-ritmo {
  grid-column: 1 / -1;
  grid-template-columns: max-content minmax(240px, 1fr);
  gap: 10px 22px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}

.trinca-ritmo {
  display: flex;
  gap: 12px;
}

/* numero de dois digitos nao ocupa a largura de uma URL: sem o teto, na
   janela estreita o campo de "3 videos" esticava a faixa inteira */
.grupo-config .campo-unidade {
  max-width: 132px;
}

.trinca-ritmo .campo-unidade {
  width: 118px;
}

.grupo-ritmo > .ajuda {
  grid-column: 1;
}

/* A frase e o elemento da tela: os tres numeros ao lado dela nao querem
   dizer nada separados, e o que importa e o que eles combinam. Fica na
   coluna vizinha, atras de um fio - "estes numeros significam isto" - e
   se reescreve enquanto se digita. Sem espera entre postagens ela troca
   de cor: e a configuracao que faz o Instagram enxergar a rajada. */
.frase-ritmo {
  margin: 0;
  align-self: center;
  padding-left: 20px;
  border-left: 1px solid var(--linha);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tinta-fraca);
  max-width: 46ch;
}

/* o valor sai em monoespacada e na tinta cheia: na frase inteira, o que se
   le primeiro sao os tres numeros que estao ao lado */
.frase-ritmo .val {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--tinta);
}

.frase-ritmo.aviso,
.frase-ritmo.aviso .val {
  color: var(--atencao);
}

/* A unidade mora DENTRO da caixa do campo, igual ao @ do nome de usuario:
   "120" + "min" em dois elementos separados viravam duas coisas pra ler
   quando sao uma. O numero alinhado a direita encosta na unidade. */
.campo-unidade {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  background: var(--breu);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding-right: 9px;
}

.campo .campo-unidade input {
  width: auto;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.campo-unidade input:focus {
  outline: none;
}

.campo-unidade:focus-within {
  border-color: var(--acento);
}

/* as setinhas do input[type=number] passariam por cima da unidade; o valor
   se digita, e as flechas do teclado continuam funcionando */
.campo-unidade input::-webkit-inner-spin-button,
.campo-unidade input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.unidade {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--tinta-apagada);
  white-space: nowrap;
}

/* o painel de saida so existe com algo escrito, e o Fechar vai pro fim da
   propria linha do titulo */
#painel-saida-ciclo .placa-cabeca {
  margin-bottom: 10px;
}

#painel-saida-ciclo .placa-cabeca button {
  margin-left: auto;
  font-size: 12px;
  padding: 3px 9px;
}

/* ---------------- barra de filtro das contas do ciclo ----------------
   Filtro na esquerda, busca no meio, acao em lote na direita, tudo na
   mesma altura e separado da grade por um fio: a barra decide o recorte,
   a grade e o recorte. */

.barra-ciclo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}

.busca-conta {
  display: inline-flex;
  min-width: 0;
}

.busca-conta input {
  width: 180px;
  font-size: 12.5px;
}

/* o X do type=search vem do sistema e desaparece em fundo escuro; aqui ele
   e desenhado, igual a marca do checkbox */
.busca-conta input::-webkit-search-cancel-button {
  appearance: none;
  width: 11px;
  height: 11px;
  cursor: pointer;
  background: var(--tinta-apagada);
  clip-path: polygon(
    20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 100% 80%,
    80% 100%, 50% 70%, 20% 100%, 0% 80%, 30% 50%, 0% 20%
  );
}

.busca-conta input::-webkit-search-cancel-button:hover {
  background: var(--tinta);
}

/* O rotulo carrega a contagem do recorte ("Incluir 7 no ciclo"): sem ela a
   acao em lote nao diz onde cai, e com o filtro em "Fora" ela cai em sete
   contas que estao fora da tela. */
.acoes-filtradas {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* ---------------- a grade de contas do ciclo ----------------
   Cada cartao responde "essa conta posta no proximo ciclo?". A trilha da
   borda e a mesma da lista de contas - saude - e continua acesa na conta
   fora do ciclo, porque incluir uma conta quebrada nao a conserta. */

.grade-contas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.cartao-conta {
  display: grid;
  grid-template-columns: 3px 16px 32px minmax(0, 1fr);
  column-gap: 11px;
  align-items: start;
  padding-right: 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--breu);
  cursor: pointer;
  overflow: hidden;
}

.cartao-conta:hover {
  border-color: var(--tinta-apagada);
}

.cartao-conta > input[type='checkbox'] {
  margin-top: 13px;
}

.cartao-conta .avatar {
  margin-top: 11px;
}

.cartao-corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 11px 0 12px;
}

.cartao-nome {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-selo {
  display: flex;
  margin: 3px 0 4px;
}

/* uma linha so, com reticencias e o texto inteiro no title: o motivo nao
   pode mandar na altura do cartao, senao a grade fica serrilhada */
.cartao-motivo {
  font-size: 11.5px;
  color: var(--tinta-apagada);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* a que vai postar ganha um fio de cor na borda - nada mais: o selo ja diz */
.cartao-conta.r-vai-rodar {
  border-color: rgba(79, 169, 139, 0.3);
}

/* fora do ciclo fica recuada, e volta inteira quando o ponteiro chega: da
   pra varrer a lista sem perder o que esta escrito nas que estao de fora */
.cartao-conta.r-fora {
  opacity: 0.55;
}

.cartao-conta.r-fora:hover,
.cartao-conta.r-fora:focus-within {
  opacity: 1;
}

/* fora do ciclo o selo nao usa a cor da saude: a conta pode estar pronta e
   ainda assim nao postar, e verde ali dizia o contrario */
.cartao-conta.r-fora .selo {
  color: var(--tinta-apagada);
  background: rgba(227, 232, 239, 0.06);
  border-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .cartao-conta {
    transition: opacity 120ms ease, border-color 120ms ease;
  }
}

@media (max-width: 1100px) {
  .grade-config,
  .grupo-config:first-child,
  .grupo-ritmo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* sem coluna vizinha, a frase passa pra baixo dos numeros e o fio vira
     uma linha em cima dela */
  .frase-ritmo {
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--linha);
    max-width: none;
  }

  .trinca-ritmo {
    flex-wrap: wrap;
  }

  .acoes-filtradas {
    margin-left: 0;
  }
}

/* ---------------- avatar ----------------
   A foto que a conta usa no Instagram e o jeito mais rapido de reconhece-la.
   Sem foto, a inicial num circulo com cor derivada do nome - deterministica,
   entao a mesma conta tem a mesma cor em toda a aplicacao. */

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--placa-alta);
  border: 1px solid var(--linha);
}

.avatar-letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  border: 0;
}

.identidade {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------------- acervo de conteudos ----------------
   Quatro acervos (reel, descricao, thumb, story) no mesmo lugar. Aqui a
   miniatura nao e enfeite: e o que deixa reconhecer o material sem abrir
   arquivo. Por isso o card e quase todo imagem, com os dados em volta. */

.abas {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}

.aba {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 14px;
  color: var(--tinta-fraca);
  font-family: var(--texto);
  font-size: 14px;
}

.aba:hover:not(:disabled) {
  background: var(--placa);
  color: var(--tinta);
}

.aba.ativo {
  color: var(--tinta);
  border-bottom-color: var(--acento);
}

.contagem {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-apagada);
  margin-left: 4px;
}

.aba.ativo .contagem {
  color: var(--acento);
}

.grade-conteudo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

/* Legenda nao tem miniatura: em coluna estreita o texto fica ilegivel. */
.grade-conteudo.grade-texto {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.card-conteudo {
  position: relative;
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.card-conteudo:hover {
  border-color: var(--tinta-apagada);
}

.card-conteudo.marcada {
  border-color: var(--acento);
  background: rgba(110, 123, 255, 0.07);
}

/* o checkbox fica sobre a miniatura: a imagem e clara ou escura conforme o
   material, entao ele carrega o proprio fundo pra nao sumir */
.card-conteudo .marca-sel {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 3px;
  border-radius: 5px;
  background: var(--scrim);
}

.estado-acervo {
  margin: -2px 0 12px;
  min-height: 18px;
}

.miniatura {
  aspect-ratio: 9 / 16;
  max-height: 260px;
  background: var(--breu);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.miniatura img,
.miniatura canvas,
.miniatura video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.conteudo-carregar { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 24px 0 80px; }
.card-conteudo { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.dialogo-aviso { margin: 16px 0; padding: 12px; border-radius: 8px; color: var(--atencao); background: var(--atencao-veu); font-size: 13px; line-height: 1.5; }

.grade-texto .miniatura {
  aspect-ratio: auto;
  max-height: none;
  padding: 4px 0;
}

.mini-texto,
.mini-ausente {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-apagada);
}

.mini-ausente {
  color: var(--atencao);
}

.card-corpo {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-apagada);
  word-break: break-all;
}

.bloco-texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.texto-conteudo {
  width: 100%;
  resize: vertical;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}

/* o convite ocupa o lugar de uma caixa de tres linhas: discreto, mas e um
   botao - fundo e borda aparecem no ponteiro */
.btn-add-texto {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 4px 9px;
  background: transparent;
  border-color: transparent;
  color: var(--tinta-apagada);
  font-size: 12px;
}

.btn-add-texto:hover:not(:disabled) {
  background: var(--placa-alta);
  border-color: var(--linha);
  color: var(--tinta);
}

/* so aparece com o texto alterado: e o aviso de que tem coisa nao gravada */
.texto-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-salvar-texto {
  padding: 3px 12px;
  font-size: 12px;
}

.card-corpo .acoes {
  margin: 0;
}

.card-corpo .acoes button {
  font-size: 12px;
  padding: 4px 9px;
}


/* ============================================================
   contas - o painel de canais
   ============================================================
   A pergunta que a tela responde e "quais contas conseguem
   postar agora". Por isso cada linha carrega uma trilha de cor
   na borda esquerda: a saude da lista inteira se le descendo a
   coluna, de relance, sem gastar largura com uma coluna de
   status. Tudo que se EDITA ficou fora da linha - no painel de
   propagacao ou no menu da propria conta. Linha e leitura.
   ============================================================ */

.cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.cabeca h2 {
  margin-bottom: 4px;
}

.cabeca .subtitulo {
  max-width: 62ch;
  margin: 0;
}

.placar {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-apagada);
  white-space: nowrap;
}

/* rotulo de bloco: diz o que a faixa faz sem roubar o peso de um titulo */
/* O `.eyebrow` do site, adaptado: mono, versal, tracking largo, cor de acao, e
   um fio curto antes. No site ele marca o inicio de cada secao; aqui faz o
   mesmo trabalho e ancora o olho na coluna esquerda do cartao.

   Era cinza-apagado e se perdia no fundo - o rotulo some e a secao vira um
   bloco de campos sem titulo. */
.sobrescrito {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento-quente);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.sobrescrito::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--acento-quente);
  flex: none;
}

/* ---------------- botoes ---------------- */

.btn-forte {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 500;
}

.btn-forte:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn-fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--tinta-fraca);
}

.btn-fantasma:hover:not(:disabled) {
  background: var(--placa-alta);
  color: var(--tinta);
}

.btn-icone {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  color: var(--tinta-apagada);
}

.btn-icone:hover:not(:disabled) {
  background: var(--placa-alta);
  border-color: var(--linha);
  color: var(--tinta);
}

.btn-remover:hover:not(:disabled) {
  color: var(--parada);
  border-color: var(--parada);
}

/* ---------------- faixa de cima ----------------
   Duas colunas lado a lado: a estreita acrescenta uma conta, a larga mexe nas
   que ja existem. Empilhadas, as duas ocupavam meia tela de altura antes da
   lista - que e o que a pessoa veio ver. */

.topo-contas {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.topo-contas > .placa {
  margin-bottom: 0;
}

.placa-adicionar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.placa-adicionar p.ajuda {
  margin: -4px 0 2px;
}

.placa-adicionar .segmentado,
.placa-adicionar .campo-arroba {
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
}

.placa-adicionar .seg {
  flex: 1;
}

/* o botao desce pro pe do cartao: assim ele fica na mesma linha do "Aplicar
   bio e foto" do cartao vizinho */
.placa-adicionar .btn-forte {
  margin-top: auto;
}

/* escolha de duas opcoes nao merece um <select>: as duas cabem na tela */
.segmentado {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--breu);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.seg {
  border: 0;
  background: transparent;
  color: var(--tinta-fraca);
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 4px;
}

.seg:hover:not(.ativo) {
  color: var(--tinta);
}

.seg.ativo {
  background: var(--placa-alta);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha);
}

/* o @ faz parte do identificador, nao do placeholder */
.campo-arroba {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--breu);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding-left: 9px;
  flex: 1 1 200px;
  max-width: 320px;
}

.campo-arroba span {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta-apagada);
}

.campo-arroba input {
  border: 0;
  background: transparent;
  flex: 1;
  padding-left: 2px;
}

.campo-arroba:focus-within {
  border-color: var(--acento);
}

.campo-arroba input:focus {
  outline: none;
}

/* ---------------- propagacao ---------------- */

.placa {
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 14px 16px 16px;
  margin-bottom: 18px;
}

.placa-cabeca {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.placa-cabeca .subtitulo {
  margin: 0;
  font-size: 13px;
}

.campos-todas {
  display: grid;
  grid-template-columns: minmax(215px, 1.05fr) minmax(230px, 1.25fr) minmax(130px, 0.6fr);
  gap: 16px;
}

/* ---------------- criador de contas ---------------- */

/* O saldo e a precondicao da tela, entao vive no cabecalho e nao enterrado como
   texto de ajuda de um campo. Em centavos virados em "quantas contas": e a
   leitura que decide se vale começar agora. */
.medidor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.medidor-valor {
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1.1;
  color: var(--tinta);
}

.medidor-nota {
  font-size: 12px;
  color: var(--tinta-apagada);
}

.medidor.sem-token .medidor-valor {
  font-size: 15px;
  color: var(--atencao);
}

/* Barra de acao, nao cartao de formulario: "Pais, @, Criar conta" e uma frase
   curta e cabe numa linha.
   Flex com larguras fixas, NAO colunas em fr: com fr os dois campos esticavam
   por toda a largura da janela e o botao ia parar longe deles. Aqui a sobra
   fica depois da frase, que e onde sobra nao atrapalha. */
.barra-criar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding: 10px 14px 12px;
  margin-bottom: 18px;
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
}

.campo-quantidade {
  width: 92px;
}

.campo-usuario {
  width: 220px;
}

/* Pedir mais contas do que o saldo cobre fica vermelho e trava o botao. Travar,
   e nao so avisar: o lote iria ate o saldo acabar, e as contas seguintes
   morreriam com a conta ja criada e a pasta de perfil no disco. */
.campo-quantidade input.demais {
  border-color: var(--parada);
  background: var(--parada-veu);
  color: var(--tinta);
}

/* campo de barra: rotulo pequeno em cima do controle, sem ajuda embaixo - a
   explicacao de todos eles esta na nota, uma vez, em vez de tres */
.campo-compacto {
  gap: 3px;
  flex: 0 0 auto;
}

.campo-compacto .rotulo {
  font-size: 11px;
}

/* o seletor de pais carrega preco e estoque no proprio rotulo
   ("Brasil - R$ 0,22 (4626 em estoque)"), entao precisa de largura.
   O estoque do segundo provedor chega a sete digitos ("Brasil - 0,032
   (1896474 em estoque)"), entao o rotulo cresceu - mas a barra tem de caber
   numa linha SO, com o botao no fim. A largura que o seletor de provedor
   ocupa sai daqui e do campo do @, nao de uma segunda linha. */
.barra-criar .campo-pais {
  width: 318px;
}

/* largura fixa pra que trocar "Automático" por "GrizzlySMS" nao empurre o
   seletor de pais do lado */
.barra-criar .campo-provedor {
  width: 136px;
}

/* .campo-arroba nasce com `flex: 1 1 200px`, e dentro de .campo - que e flex
   COLUMN - esse 200px vira ALTURA, nao largura: o campo do @ virava uma caixa
   de 250px de alto e empurrava o resto da barra pro rodape. A aba Contas ja
   tinha a mesma correcao, pelo mesmo motivo. */
.barra-criar .campo-arroba {
  flex: 0 0 auto;
  width: 178px;
  max-width: none;
}

.barra-criar select {
  width: 100%;
}

/* a frase fica colada no fim da linha, do lado oposto aos controles */
.barra-criar-nota {
  margin: 0 0 0 auto;
  font-size: 12px;
  line-height: 1.4;
  color: var(--tinta-apagada);
  text-align: right;
}

/* linha inteira, abaixo de tudo. Sem texto, nao ocupa altura nenhuma. */
.barra-criar-estado {
  flex: 1 0 100%;
  margin: 0;
  min-width: 0;
}

.barra-criar-estado:empty,
.barra-criar-estado:has(> :empty) {
  display: none;
}

/* O QR ocupa o centro do passo: e a unica coisa que a pessoa precisa olhar. */
.qr-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 0 6px;
}

/* Fundo claro fixo, independente do tema: leitor de QR precisa de contraste
   entre modulo escuro e fundo claro, e o painel inteiro e escuro. */
.qr-imagem {
  background: #fff;
  padding: 10px;
  border-radius: var(--raio-g);
  line-height: 0;
  min-width: 260px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-imagem svg {
  width: 240px;
  height: 240px;
  display: block;
}

/* O passo-a-passo das credenciais: numerado, porque a ordem importa e a pessoa
   vai alternar entre o navegador e esta tela. */
.passo-a-passo {
  margin: 4px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-suave, var(--tinta));
}

.passo-a-passo b {
  color: var(--tinta);
}

.lista-cadastros {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Um cadastro em curso e uma leitura de estado, igual a linha de conta: a
   trilha na borda esquerda diz de relance se anda, parou ou terminou. */
.cadastro {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio);
  background: var(--placa-alta);
  padding: 12px 14px;
}

.cadastro.e-ok {
  border-left-color: var(--viva);
}

.cadastro.e-erro {
  border-left-color: var(--parada);
}

.cadastro-topo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cadastro-arroba {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--tinta);
}

/* nome e nascimento sorteados: quem opera precisa poder conferir o que foi pro
   perfil sem abrir o Instagram */
.cadastro-identidade {
  margin-left: auto;
  font-size: 12px;
  color: var(--tinta-apagada);
}

.cadastro-etapa {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--tinta-fraca);
}

.cadastro-dados {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
}

/* A espera entre contas ocupa o lugar do cartao: durante ela nao ha cadastro
   acontecendo, e um cartao parado ali pareceria travado. */
.espera-lote {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  color: var(--tinta-fraca);
  font-size: 13px;
}

/* ---------------- historico ---------------- */

.lista-historico {
  display: flex;
  flex-direction: column;
}

/* Uma linha por tentativa, colunas fixas: o olho desce pela coluna de estado e
   acha as falhas sem ler o resto. */
.historico-linha {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) 90px 72px 86px minmax(0, 2fr);
  align-items: baseline;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--linha);
  font-size: 13px;
}

.historico-linha:last-child {
  border-bottom: 0;
}

.historico-custo,
.historico-quando {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-apagada);
}

/* o motivo da falha e a unica coisa aqui que pode ser longa: corta com
   reticencias e mostra inteiro no hover, sem empurrar as outras colunas */
.historico-motivo {
  color: var(--tinta-apagada);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dado pra copiar, nao acao: parece campo, responde a clique. Monoespacada
   porque e numero conferido digito por digito. */
.sms-valor {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--tinta);
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 6px 9px;
  cursor: copy;
}

.sms-valor:disabled {
  color: var(--tinta-apagada);
  letter-spacing: normal;
  font-family: var(--texto);
  cursor: default;
}

/* o codigo e a unica coisa que alguem fica esperando: ele acende */
.sms-valor-destaque:not(:disabled) {
  font-size: 18px;
  color: var(--viva);
  border-color: var(--viva);
  background: var(--viva-veu);
}

.sms-valor.copiado {
  border-color: var(--acento);
}

/* a linha de acao empilha antes de apertar os campos */
@media (max-width: 860px) {
  /* em tela estreita a frase vai pra baixo, e os controles usam a largura toda */
  .barra-criar-nota {
    margin-left: 0;
    text-align: left;
    flex: 1 0 100%;
  }

  .cadastro-dados {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.rotulo {
  font-size: 12px;
  color: var(--tinta-fraca);
}

.campo-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.campo-linha input {
  flex: 1;
  min-width: 0;
}

.ajuda {
  font-size: 11.5px;
  color: var(--tinta-apagada);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.placa-rodape {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}

/* o aviso de que isso abre navegador fica colado na acao, nao no campo */
.placa-rodape .ajuda {
  margin-left: auto;
  text-align: right;
}

/* ---------------- a lista ---------------- */

/* A lista inteira e UM grid e cada linha herda as colunas dele (subgrid).
   Antes cada .conta era um grid proprio: as colunas eram recalculadas por
   linha, entao o @usuario de uma comecava num x e o da seguinte em outro, e
   qualquer texto comprido no estado esticava a linha pra 100px. Aqui a coluna
   e a mesma de cima a baixo e a linha tem altura fixa - linha e leitura. */
.lista-contas {
  display: grid;
  grid-template-columns:
    3px /* trilha de saude */
    26px /* marca de selecao */
    32px /* avatar */
    minmax(140px, max-content) /* quem e a conta */
    minmax(0, 1fr) /* estado + motivo */
    max-content; /* acoes */
  column-gap: 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  overflow: hidden;
  background: var(--placa);
}

.conta {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  height: 54px;
  padding-right: 14px;
  border-bottom: 1px solid var(--linha);
}

/* a area toda marca a conta, entao a area toda se comporta como alvo */
.conta,
.cartao {
  cursor: pointer;
}

.conta:last-child {
  border-bottom: 0;
}

.conta:hover {
  background: var(--placa-alta);
}

/* a trilha: a saude da lista lida de relance, descendo a coluna */
.trilha {
  align-self: stretch;
  background: var(--tinta-apagada);
}

.e-pronta .trilha {
  background: var(--viva);
}

.e-atencao .trilha {
  background: var(--atencao);
}

.e-parada .trilha {
  background: var(--parada);
}

.conta-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* o sublinhado pontilhado marca o link, entao tem que terminar no nome: esticado
   ate o fim da coluna ele vira cara de campo de formulario */
.conta-id .usuario {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-apagada);
}

.conta-estado {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* o selo nomeia o estado; o motivo ao lado diz o que fazer. Os dois sempre
   juntos - foi o que resolveu o "erro" sem explicacao. */
.selo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.e-pronta .selo {
  color: var(--viva);
  background: var(--viva-veu);
  border-color: var(--viva-veu);
}

.e-atencao .selo {
  color: var(--atencao);
  background: var(--atencao-veu);
  border-color: var(--atencao-veu);
}

.e-parada .selo {
  color: var(--parada);
  background: var(--parada-veu);
  border-color: var(--parada-veu);
}

/* uma linha so, com reticencias e o texto inteiro no title: o motivo nao pode
   mandar na altura da linha */
.motivo {
  font-size: 12px;
  color: var(--tinta-fraca);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conta-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}

.conta-acoes .status-login {
  max-width: 22ch;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vazio {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: var(--tinta-apagada);
  font-size: 13px;
  background: var(--placa);
}

@media (max-width: 1100px) {
  .topo-contas {
    grid-template-columns: 1fr;
  }

  .campos-todas {
    grid-template-columns: 1fr;
  }

  /* janela estreita aperta as colunas de texto, mas a linha continua de 54px e
     as colunas continuam alinhadas entre si */
  .lista-contas {
    grid-template-columns: 3px 26px 32px minmax(110px, max-content) minmax(0, 1fr) max-content;
  }
}

/* ---------------- a lista em cartoes ----------------
   A mesma leitura, outro recorte: a lista responde "o que travou nesta conta"
   com o motivo inteiro na linha; o cartao responde "quais estao de pe" com
   mais contas por tela. Quem escolhe e quem opera, e a escolha fica salva. */

.cartoes-contas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

/* sem cartao nenhum, a mensagem precisa da moldura que os cartoes dariam */
.cartoes-contas .vazio {
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
}

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 10px;
  background: var(--placa);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  overflow: hidden;
}

.cartao:hover {
  background: var(--placa-alta);
}

.cartao.marcada {
  background: rgba(110, 123, 255, 0.07);
  border-color: rgba(110, 123, 255, 0.4);
}

/* a trilha passa pro topo do cartao: mesma cor, mesma gramatica da lista */
.cartao .trilha {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
}

.cartao .marca-sel {
  position: absolute;
  top: 13px;
  right: 13px;
}

.cartao-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 26px;
  min-width: 0;
}

.cartao .conta-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cartao .conta-estado {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* no cartao sobra largura: o motivo pode respirar em duas linhas */
.cartao .motivo {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}

.cartao .conta-acoes {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
}

.cartao .status-login {
  margin-right: auto;
  text-align: left;
}

/* ---------------- o que aconteceu ----------------
   Uma linha por tentativa de postagem, com o motivo da falha colado nela - a
   mesma regra da lista de contas: sinal vermelho sem motivo nao serve. */

.lista-log {
  display: grid;
  grid-template-columns:
    max-content /* quando */
    max-content /* conta */
    max-content /* story ou reel */
    max-content /* selo */
    minmax(0, 1fr); /* motivo */
  column-gap: 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--breu);
}

.log-linha {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  /* altura fixa virou minima: a linha cresce quando o erro e aberto */
  min-height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--linha);
}

.log-linha:last-child {
  border-bottom: 0;
}

.log-quando,
.log-tipo {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-apagada);
}

.log-linha .usuario {
  font-size: 12px;
}

.log-linha .selo {
  font-size: 10px;
  padding: 2px 7px;
}

.log-linha .motivo {
  font-size: 12px;
}

/* O motivo do erro e um botao: a primeira linha fica na grade, igual ao texto
   que era antes, e o resto so aparece quando alguem pede. Sem isso, uma unica
   mensagem do Playwright (com call log inteiro) empurrava a lista pra fora. */
.motivo-dobra {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  height: 34px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.motivo-resumo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ver-mais {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 2px 7px;
}

.motivo-dobra:hover .ver-mais {
  color: var(--tinta);
  border-color: var(--tinta-apagada);
}

.motivo-inteiro {
  grid-column: 1 / -1;
  margin: 0 0 10px;
  padding: 10px 12px;
  max-height: 260px;
  overflow: auto;
  background: var(--placa-alta);
  border-radius: var(--raio);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--tinta-fraca);
  white-space: pre-wrap;
  word-break: break-word;
}

/* O link do story sem o story: campo que nao faz nada fica apagado e travado */
.campo-desligado {
  opacity: 0.45;
}

.interruptor-campo {
  align-self: start;
}

.lista-log .vazio {
  grid-column: 1 / -1;
  padding: 18px 12px;
  background: transparent;
}

/* ============================================================
   camadas flutuantes - dialogo e menu
   ============================================================ */

.menu-flutuante {
  position: fixed;
  z-index: 50;
  min-width: 232px;
  padding: 4px;
  background: var(--placa-topo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}

.menu-item {
  border: 0;
  background: transparent;
  color: var(--tinta-fraca);
  text-align: left;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 4px;
}

.menu-item:hover:not(:disabled) {
  background: var(--placa);
  color: var(--tinta);
}

.menu-item.perigo:hover:not(:disabled) {
  color: var(--parada);
}

.menu-separador {
  height: 1px;
  background: var(--linha);
  margin: 4px 2px;
}

.dialogo {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(480px, calc(100vw - 32px));
}

/* sem backdrop-filter de proposito: o compositor do Electron devolve o cartao
   lavado quando o scrim tem blur, e um desfoque de 2px sobre um veu ja escuro
   nao acrescenta nada que pague esse risco */
.dialogo::backdrop {
  background: var(--scrim);
}

.dialogo-caixa {
  position: relative;
  overflow: hidden;
  background: var(--placa-topo);
  border: 1px solid #333c4e;
  border-radius: var(--raio-g);
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* a trilha do topo repete a cor do risco: a mesma gramatica da lista */
.dialogo-trilha {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--acento);
}

.n-risco .dialogo-trilha {
  background: var(--parada);
}

/* acao destrutiva nao usa a cor de acao comum: o botao que apaga tem que
   parecer o que faz, e nao igualzinho ao que adiciona conta */
.n-risco .btn-forte {
  background: var(--parada);
  border-color: var(--parada);
}

.n-atencao .dialogo-trilha {
  background: var(--atencao);
}

.dialogo-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.dialogo-corpo {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinta-fraca);
}

.dialogo-dados {
  margin: 0;
  max-height: 180px;
  font-size: 12px;
  padding: 10px 12px;
}

.dialogo-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.dialogo-opcao { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; padding: 14px; border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; font-size: 13px; }
.dialogo-opcao input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--acento); }
.dialogo-opcao small { display: block; margin-top: 6px; color: var(--tinta-fraca); line-height: 1.5; }

.dialogo .campo input {
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .dialogo[open] {
    animation: dialogo-entra 140ms ease-out;
  }

  @keyframes dialogo-entra {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.98);
    }
  }
}

.seg:focus-visible,
.menu-item:focus-visible,
.btn-icone:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}


/* ---------------- selecao, filtros e campos ---------------- */

/* Campo tem TETO de largura, nao largura da janela.
   Um API ID de sete digitos ocupava 960px porque o cartao era largo. A medida
   e de FORMULARIO (~52 caracteres), nao de layout. Quem precisa de mais - a
   lista de proxy, a bio - pede explicitamente la embaixo. */
.campo textarea,
.campo input {
  width: 100%;
}

/* `:not(.campo-unidade input)` porque ali o input divide a caixa com a unidade
   e ja tem largura propria: aplicar o teto por cima espremia o numero ate
   sumir, sobrando so o "contas" / "min" na tela. */
.campo > input {
  max-width: 52ch;
}

.campo > textarea {
  max-width: 68ch;
}

/* O olho mora DENTRO do campo: o involucro desenha a borda e o input fica
   transparente por cima dele, igual ao campo com @. Com o olho do lado de fora
   eram duas caixas pra uma senha. */
.campo-senha {
  display: flex;
  align-items: center;
  min-width: 0;
  background: var(--breu);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding-right: 3px;
}

.campo-senha input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
}

.campo-senha input:focus {
  outline: none;
}

.campo-senha:focus-within {
  border-color: var(--acento);
}

.campo-linha .campo-senha {
  flex: 1;
}

.btn-olho {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.campo-foto {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* A propria foto e o botao: clicar nela escolhe outra. Antes eram miniatura +
   "Trocar foto" + "Nao mexer na foto" - tres elementos pra uma decisao, e o
   rotulo mais comprido era o que menos acontecia. */
.miniatura-foto {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--breu);
  color: var(--tinta-apagada);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* vazia: tracejada, com o + a mostra - e um lugar pra preencher */
.miniatura-foto.vazia {
  border-style: dashed;
}

.miniatura-foto:hover:not(:disabled) {
  border-color: var(--tinta-apagada);
  color: var(--tinta);
}

.miniatura-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.foto-marca {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* com foto escolhida a imagem e a informacao: o + so aparece quando o ponteiro
   (ou o foco) chega, dizendo que da pra trocar */
.miniatura-foto:not(.vazia) .foto-marca {
  opacity: 0;
  background: var(--scrim);
  color: #fff;
}

.miniatura-foto:not(.vazia):hover .foto-marca,
.miniatura-foto:not(.vazia):focus-visible .foto-marca {
  opacity: 1;
}

/* A barra fica rente a lista: filtro na esquerda, escopo na direita, os dois
   na mesma altura. "Selecionar todas" estava caindo solto embaixo. */
.barra-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Os filtros sao uma faixa unica, com a mesma gramatica do seletor de
   plataforma: quatro pilulas soltas eram quatro botoes competindo entre si,
   cada um com a contagem grudada no rotulo. */
.filtros {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--breu);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--tinta-fraca);
  font-size: 13px;
  padding: 4px 9px;
  border-radius: 4px;
}

.chip:hover:not(.ativo) {
  color: var(--tinta);
  background: var(--placa);
}

.chip.ativo {
  color: var(--tinta);
  background: var(--placa-alta);
  box-shadow: inset 0 0 0 1px var(--linha);
}

/* o ponto repete a cor da trilha da lista: filtrar e a mesma leitura de saude */
.ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--tinta-apagada);
}

.ponto.p-pronta {
  background: var(--viva);
}

.ponto.p-atencao {
  background: var(--atencao);
}

.ponto.p-parada {
  background: var(--parada);
}

/* a contagem e dado, nao parte do rotulo: mono, tabular e numa casa propria */
.chip .n {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-apagada);
  background: rgba(227, 232, 239, 0.06);
  border-radius: 3px;
  padding: 0 5px;
  min-width: 22px;
  text-align: center;
}

.chip.ativo .n {
  color: var(--tinta);
  background: rgba(110, 123, 255, 0.2);
}

.barra-lista-fim {
  display: flex;
  align-items: center;
  gap: 8px;
}

.seg-icone {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
}

/* nao e texto com um checkbox na frente: e o controle que define o escopo das
   acoes do painel de cima, entao tem a mesma caixa dos outros controles */
.selecionar-tudo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--placa);
  font-size: 12.5px;
  color: var(--tinta-fraca);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.selecionar-tudo:hover {
  border-color: var(--tinta-apagada);
  color: var(--tinta);
}

.selecionar-tudo:focus-within {
  border-color: var(--acento);
}

/* com contas marcadas o rotulo diz quantas, e a caixa assume a cor de acao */
.selecionar-tudo.tem-selecao {
  color: var(--tinta);
  border-color: var(--acento);
  background: rgba(110, 123, 255, 0.1);
}

.marca-sel {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  cursor: pointer;
}

/* Checkbox proprio: o nativo nao centraliza na linha nem aceita a paleta por
   accent-color sem ficar com a borda do sistema, que destoa de todo o resto. */
input[type='checkbox'] {
  appearance: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(227, 232, 239, 0.24);
  border-radius: 4px;
  background: var(--breu);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

/* a marca e desenhada, nao e fonte nem emoji: recorte num quadrado branco */
input[type='checkbox']::before {
  content: '';
  width: 10px;
  height: 10px;
  background: #fff;
  transform: scale(0);
  clip-path: polygon(13% 46%, 0 61%, 38% 100%, 100% 22%, 86% 8%, 37% 71%);
}

input[type='checkbox']:hover {
  border-color: var(--tinta-apagada);
}

input[type='checkbox']:checked,
input[type='checkbox']:indeterminate {
  background: var(--acento);
  border-color: var(--acento);
}

input[type='checkbox']:checked::before {
  transform: scale(1);
}

/* parte da lista marcada: barra, nao marca de confirmado */
input[type='checkbox']:indeterminate::before {
  transform: scale(1);
  clip-path: inset(43% 12%);
}

input[type='checkbox']:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* a marcada ganha um fundo de leve: olhando a lista inteira da pra ver o
   recorte que a acao vai pegar */
.conta.marcada {
  background: rgba(110, 123, 255, 0.07);
}

/* ============================================================
   telegram - a fonte do material
   ============================================================
   Conectar aqui e uma sequencia de verdade: credenciais, login,
   mapa dos grupos. A tela antiga mostrava um campo solto por vez
   e nao dizia em que ponto voce estava nem quanto faltava - por
   isso a trilha numerada, que aqui nao e enfeite: a ordem E a
   informacao. O cartao do passo nao muda de lugar entre uma
   etapa e a seguinte, e o recado fica sempre colado nele.
   ============================================================ */

/* a lampada da faixa tambem serve aqui; conectado nao pulsa, porque nao e
   trabalho em andamento - e um estado parado e bom */
.lampada.viva {
  background: var(--viva);
}

/* ---------------- a trilha dos passos ---------------- */

.trilha-passos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  /* sem teto os fios entre os passos esticavam por mil pixels e os quatro
     deixavam de parecer uma sequencia */
  max-width: 760px;
}

.passo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding-right: 14px;
  font-size: 13px;
  color: var(--tinta-apagada);
}

/* o ultimo nao puxa fio nenhum depois dele */
.passo:last-child {
  flex: 0 0 auto;
  padding-right: 0;
}

.passo:not(:last-child)::after {
  content: '';
  flex: 1;
  min-width: 16px;
  height: 1px;
  margin-left: 4px;
  background: var(--linha);
}

/* o fio entre dois passos cumpridos tambem fica cumprido */
.passo.feito:not(:last-child)::after {
  background: rgba(79, 169, 139, 0.38);
}

.passo-n {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: var(--placa);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-apagada);
}

.passo-nome {
  white-space: nowrap;
}

.passo.agora .passo-n {
  border-color: var(--acento);
  color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(110, 123, 255, 0.16);
}

.passo.agora .passo-nome {
  color: var(--tinta);
}

.passo.feito .passo-n {
  background: var(--viva-veu);
  border-color: rgba(79, 169, 139, 0.4);
  color: transparent;
}

/* a marca e recortada, igual a do checkbox - nao e fonte nem emoji */
.passo.feito .passo-n::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--viva);
  clip-path: polygon(13% 46%, 0 61%, 38% 100%, 100% 22%, 86% 8%, 37% 71%);
}

.passo.feito .passo-nome {
  color: var(--tinta-fraca);
}

/* A trilha do criador de contas reusa estes passos: a mesma ideia (sequencia de
   verdade, nao enfeite) merece o mesmo desenho. Mais apertada porque sao sete
   etapas, e varios cadastros podem estar abertos ao mesmo tempo.
   Mora DEPOIS de .trilha-passos de proposito: as duas tem a mesma forca, entao
   quem vem por ultimo vence - antes estes dois valores nao aplicavam. */
.trilha-cadastro {
  /* teto proprio, pelo mesmo motivo da trilha do Telegram: sem ele os fios
     entre os sete passos esticavam por mil pixels e a fila deixava de parecer
     uma sequencia. Mais largo que os 760px de la porque aqui sao sete etapas. */
  max-width: 880px;
  margin-bottom: 10px;
}

.trilha-cadastro .passo {
  font-size: 12px;
  padding-right: 10px;
}

.trilha-cadastro .passo-n {
  width: 19px;
  height: 19px;
  font-size: 10px;
}

/* ---------------- os campos de cada passo ---------------- */

/* um campo por passo e uma coluna estreita: telefone e codigo nao ficam
   melhores esticados ate a borda do cartao */
.grade-passo {
  display: grid;
  grid-template-columns: minmax(0, 300px);
  gap: 14px 18px;
}

.grade-credenciais {
  grid-template-columns: 150px minmax(0, 380px);
}

.grade-grupos {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.campo select {
  width: 100%;
}

/* .ajuda vem depois de .aviso na folha e tem a mesma forca, entao sozinho o
   .aviso nao pintava nada: a ajuda que diz o que falta precisa da cor */
.ajuda.aviso {
  color: var(--atencao);
}

/* "opcional" e a resposta pra "preciso preencher isto?", entao fica no rotulo
   e nao escondido no texto de ajuda */
.opcional {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(227, 232, 239, 0.06);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-apagada);
}

/* ---------------- o recado do passo ----------------
   Progresso, confirmacao e erro dividiam uma linha cinza so: "Erro: sessao
   invalida" tinha exatamente a mesma cara de "Enviando codigo...". Aqui o
   recado carrega a cor do que aconteceu, na mesma gramatica dos selos. */

.recado {
  margin: 16px 0 0;
  padding: 9px 12px;
  border-radius: var(--raio);
  border-left: 2px solid var(--tinta-apagada);
  background: var(--breu);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.recado.sucesso {
  border-left-color: var(--viva);
  background: var(--viva-veu);
  color: var(--viva);
}

.recado.aviso {
  border-left-color: var(--atencao);
  background: var(--atencao-veu);
  color: var(--atencao);
}

.recado.falha {
  border-left-color: var(--parada);
  background: var(--parada-veu);
  color: var(--parada);
}

/* o cartao da sincronizacao nao tem corpo: o rodape vem direto do cabecalho e
   nao precisa do fio que separa campos de acao */
.placa-rodape-topo {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 1100px) {
  .grade-credenciais {
    grid-template-columns: minmax(0, 300px);
  }
}

/* ---------------- configuracoes ---------------- */

/* A pagina NAO reusa .grade-config do Ciclo de proposito: la o grid de duas
   colunas serve a campos curtos de ritmo, e a regra .grupo-config:first-child
   abre uma segunda coluna que so faz sentido pro par link/numero. Aqui os
   valores sao chaves longas, que pedem largura cheia e uma embaixo da outra. */
#page-config .grupo-config,
#page-config .grade-credenciais {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

/* o fio separa um servico do outro: sem ele o titulo do proximo grupo cola no
   texto de ajuda do campo anterior e os dois viram um paragrafo so */
/* Fio entre blocos EMPILHADOS. Dentro da chapa lado a lado quem separa e o
   gap de 1px, entao esta regra ali e ruido: media a medicao, ela empurrava a
   segunda e a terceira celula 20px pra baixo e deixava a primeira esticada
   sozinha, com uma faixa clara no topo das outras duas. */
#page-config .grupos-lado-a-lado > .grupo-config + .grupo-config {
  margin-top: 0;
  padding-top: 16px;
  border-top: 0;
}

#page-config .grupo-config + .grupo-config {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}

#page-config .grupo-config > .ajuda {
  margin: 2px 0 0;
}

#page-config > .placa-rodape {
  margin-top: 18px;
}

/* ---------------- veu de abertura ----------------
   O painel so fica util depois da primeira volta de IPC, e essa volta espera o
   processo principal (node:sqlite e sincrono no mesmo fio). Mostrar a tela
   montada e sem resposta ensina que o app trava; mostrar que esta abrindo e a
   verdade. */
.carregando {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--breu);
}

.carregando-icone { width: 40px; height: 40px; border-radius: 10px; }

.carregando-texto {
  margin: 0;
  color: var(--tinta-fraca);
  font-size: 13px;
}

.carregando-trilha {
  width: 160px;
  height: 2px;
  background: var(--linha);
  border-radius: 2px;
  overflow: hidden;
}

/* Parada, a barra e um segmento de 40%: le-se "em andamento" sem animacao. */
.carregando-trilha span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--acento);
}

@media (prefers-reduced-motion: no-preference) {
  .carregando-trilha span { animation: carregando-desliza 1.1s ease-in-out infinite; }

  @keyframes carregando-desliza {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
  }
}

/* ============================================================
   PADRÃO VISUAL PAINEL MASTER (Refinamento SaaS Moderno)
   Fios finos, cartões com brilho suave, pílulas de estado e dropzone
   ============================================================ */

.dropzone-card {
  margin: 16px 0 20px;
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px dashed rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.dropzone-card:hover,
.dropzone-card.drag-over {
  background: rgba(0, 180, 216, 0.04);
  border-color: #00b4d8;
  box-shadow: 0 0 20px rgba(0, 180, 216, 0.12);
}

.dropzone-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dropzone-icone-circulo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00b4d8;
  flex-shrink: 0;
}

.dropzone-titulo {
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta);
  margin-bottom: 4px;
}

.dropzone-subtitulo {
  font-size: 12px;
  color: var(--tinta-fraca);
}

.btn-link {
  background: transparent;
  border: none;
  color: #00b4d8;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-link:hover {
  color: #90e0ef;
}

.dropzone-progresso {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--tinta-fraca);
}

/* Selos e Pílulas Modernas (Padrão Painel Master) */
.selo, .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.selo.ativa, .status-pill.ativo {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.selo.bloqueada, .status-pill.parada {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.selo.atencao, .status-pill.aviso {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* Brilho suave e bordas de precisão nos cartões */
.placa {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: var(--raio);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.placa:hover {
  border-color: #cbd5e1;
}

/* ============================================================
   PAINEL MASTER DESIGN SYSTEM (DASHBOARD, POSTS, LOTE, STUDIO)
   ============================================================ */

.conteudo {
  padding: 24px 32px;
  overflow-y: auto;
  min-height: 100vh;
}

.dashboard-master-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.dashboard-title-box h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
}

.dashboard-title-box p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

/* Floating Unicalize Toast (Identical to Painel Master) */
.floating-unicalize-toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  min-width: 250px;
  animation: floatIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.floating-toast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.floating-toast-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.floating-toast-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 6px;
}

.floating-progress-track {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

.floating-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0055d4, #0077ff);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* 4 KPI Hero Cards Grid */
.kpi-grid-master {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.kpi-card-master {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s ease;
}

.kpi-card-master:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kpi-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpi-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

.kpi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748b;
  text-transform: uppercase;
}

.kpi-info-btn {
  background: none;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-info-btn:hover {
  color: #475569;
}

.kpi-metric-number {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.kpi-footer-sub {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.kpi-link {
  color: #0055d4;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.kpi-link:hover { text-decoration: underline; }

/* Sub-Banner de Metas Mensais */
.monthly-banner-master {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 12px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.monthly-banner-master strong {
  font-weight: 700;
}

.highlight-green { color: #15803d; }
.highlight-blue { color: #0055d4; }
.highlight-purple { color: #7c3aed; }

/* Split Dashboard Grid */
.dashboard-split-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
}

.master-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.master-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.master-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.master-card-action {
  font-size: 12px;
  color: #0055d4;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.master-card-action:hover { text-decoration: underline; }

/* Table Próximas Publicações */
.proximas-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.proximas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.proximas-table th {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #94a3b8;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

.proximas-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border-light);
  color: #334155;
  vertical-align: middle;
}

.proximas-table tr:hover td {
  background: var(--surface-hover);
}

.conta-pill-cell {
  font-weight: 600;
  color: var(--ink);
}

/* Status Pills (Painel Master Standard) */
.status-pill-master {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.status-pill-master .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-pill-master.publicando {
  background: #fef3c7;
  color: #b45309;
}
.status-pill-master.publicando .pill-dot {
  background: #f59e0b;
  animation: pulse-dot 1.5s infinite;
}

.status-pill-master.agendado {
  background: #f1f5f9;
  color: #475569;
}
.status-pill-master.agendado .pill-dot {
  background: #94a3b8;
}

.status-pill-master.concluido {
  background: #ecfdf5;
  color: #047857;
}
.status-pill-master.concluido .pill-dot {
  background: #10b981;
}

.status-pill-master.erro {
  background: #fef2f2;
  color: #b91c1c;
}
.status-pill-master.erro .pill-dot {
  background: #ef4444;
}

@keyframes pulse-dot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

/* Top Contas Ranked List */
.top-contas-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top-conta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface-hover);
  border: 1px solid #f1f5f9;
  transition: background 0.15s ease;
}

.top-conta-row:hover {
  background: #f1f5f9;
}

.top-conta-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-conta-rank {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  width: 18px;
  text-align: center;
}

.top-conta-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.top-conta-right {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   NOVA PUBLICAÇÃO: INSTAGRAM PHONE MOCKUP SIMULATOR
   ============================================================ */

.publicacao-split-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
  align-items: start;
}

.ig-phone-frame {
  width: 320px;
  height: 640px;
  background: #000000;
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
  margin: 0 auto;
  position: relative;
}

.ig-notch {
  width: 90px;
  height: 22px;
  background: #000000;
  border-radius: 20px;
  margin: 0 auto 8px auto;
  position: relative;
  z-index: 10;
}

.ig-phone-screen {
  width: 100%;
  height: calc(100% - 30px);
  background: var(--surface);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.ig-header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}

.ig-account-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ig-avatar-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  padding: 1.5px;
}

.ig-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
}

.ig-username {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.ig-preview-media {
  width: 100%;
  height: 340px;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  position: relative;
  overflow: hidden;
}

.ig-preview-media video,
.ig-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 4px 12px;
  color: var(--ink);
}

.ig-action-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ig-action-left svg, .ig-action-bar svg {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.ig-caption-box {
  padding: 4px 12px 10px 12px;
  font-size: 11px;
  color: var(--ink);
  line-height: 1.4;
  overflow-y: auto;
  max-height: 100px;
}

.ig-caption-username {
  font-weight: 700;
  margin-right: 4px;
}

/* ============================================================
   UNICALIZADOR STUDIO & LOTE DE VÍDEOS
   ============================================================ */

.unicalizador-studio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.unicalizador-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.unicalizador-version-card {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.version-badge-ready {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  align-self: flex-start;
}

.version-hash-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #64748b;
  word-break: break-all;
}

/* Responsividade Geral */
@media (max-width: 1200px) {
  .kpi-grid-master {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-split-grid {
    grid-template-columns: 1fr;
  }
  .publicacao-split-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body {
    grid-template-columns: 1fr;
  }
  .lateral {
    display: none;
  }
  .conteudo {
    padding: 16px;
  }
}



/* ============================================================
   SELETOR DE TEMA SEGMENTADO (CLARO / ESCURO / SISTEMA)
   ============================================================ */

.seletor-tema-box {
  display: flex;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin-top: auto;
}

.btn-tema-pill {
  flex: 1;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-tema-pill:hover {
  color: var(--ink);
}

.btn-tema-pill.ativo {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

html[data-theme="dark"] .btn-tema-pill.ativo {
  background: #1e293b;
  color: #ffffff;
}

/* Ajustes refinados de componentes no Dark Mode Obsidian (#070709, #111114, #1f1f22) */
html[data-theme="dark"] .btn-tema-pill.ativo {
  background: #1f1f22;
  color: #ffffff;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #111114;
  color: #f4f4f5;
  border-color: #1f1f22;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: #0066ff;
  background: #161619;
}

html[data-theme="dark"] .dropzone-card {
  background: #111114;
  border-color: #1f1f22;
}

html[data-theme="dark"] .dialogo {
  background: #111114;
  color: #f4f4f5;
  border: 1px solid #1f1f22;
}

html[data-theme="dark"] .master-card,
html[data-theme="dark"] .kpi-card-master,
html[data-theme="dark"] .placa,
html[data-theme="dark"] .monthly-banner-master {
  background: #111114;
  border-color: #1f1f22;
}

html[data-theme="dark"] .proximas-table tr:hover td {
  background: #18181c;
}

html[data-theme="dark"] .top-conta-row {
  background: #161619;
  border-color: #1f1f22;
}

html[data-theme="dark"] .top-conta-row:hover {
  background: #1c1c21;
}

html[data-theme="dark"] .unicalizador-version-card {
  background: #161619;
  border-color: #1f1f22;
}

html[data-theme="dark"] .account-stat {
  background: #111114;
  border: 1px solid #1f1f22;
}

html[data-theme="dark"] .account-stat.ativo {
  background: #18181c;
  border-color: #0066ff;
}

html[data-theme="dark"] .accounts-tools {
  background: #111114;
  border-color: #1f1f22;
}

html[data-theme="dark"] .ig-phone-frame {
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 0 1px #1f1f22;
  background: #000000;
}

html[data-theme="dark"] .ig-phone-screen {
  background: #111114;
}

html[data-theme="dark"] .status-pill-master.publicando {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

html[data-theme="dark"] .status-pill-master.agendado {
  background: #18181c;
  color: #a1a1aa;
}

html[data-theme="dark"] .status-pill-master.concluido {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

html[data-theme="dark"] .status-pill-master.erro {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ============================================================
   PWA & MOBILE RESPONSIVE ENGINE (IPHONE & ANDROID)
   ============================================================ */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Esconde barras mobile no desktop */
.mobile-top-bar,
.mobile-bottom-nav,
.menu-gaveta-backdrop,
.pwa-install-pill {
  display: none;
}

/* Oculta completamente botões e banners de instalação quando rodando em modo PWA Standalone */
@media all and (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  #btn-instalar-pwa,
  .btn-pwa-install-header,
  #pwa-install-banner,
  .pwa-install-pill {
    display: none !important;
  }
}

body.is-standalone #btn-instalar-pwa,
body.is-standalone .btn-pwa-install-header,
body.is-standalone #pwa-install-banner,
body.is-standalone .pwa-install-pill,
html.is-standalone #btn-instalar-pwa,
html.is-standalone .btn-pwa-install-header,
html.is-standalone #pwa-install-banner,
html.is-standalone .pwa-install-pill {
  display: none !important;
}

/* Ajustes Mobile e Tablets Pequenos */
@media (max-width: 820px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    margin: 0;
  }

  /* Barra Superior Mobile */
  .mobile-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(56px + var(--sat));
    padding: var(--sat) 14px 0 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 150;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .btn-menu-drawer,
  .btn-pwa-install-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--ink);
    cursor: pointer;
    touch-action: manipulation;
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .mobile-brand-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .mobile-brand-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  /* Gaveta Lateral (Slide-out Drawer) */
  .lateral {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -300px !important;
    width: 280px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 250 !important;
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.7) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: calc(14px + var(--sat)) 12px calc(24px + var(--sab)) 12px !important;
    box-sizing: border-box !important;
  }

  .lateral.drawer-aberto {
    transform: translateX(300px) !important;
  }

  /* Backdrop Escuro do Drawer */
  .menu-gaveta-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 240;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }

  .menu-gaveta-backdrop.ativo {
    opacity: 1;
    pointer-events: auto;
  }

  /* Conteúdo Principal com espaço para safe-areas */
  .conteudo {
    flex: 1;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 14px 14px calc(76px + var(--sab)) 14px !important;
    overflow-x: hidden;
  }

  /* Barra de Navegação Inferior (Bottom Bar) */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(58px + var(--sab));
    padding-bottom: var(--sab);
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 140;
    justify-content: space-around;
    align-items: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .bottom-nav-item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
    padding: 0;
    transition: color 0.15s ease;
  }

  .bottom-nav-item svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
  }

  .bottom-nav-item.ativo {
    color: var(--primary);
  }

  .bottom-nav-item.ativo svg {
    stroke-width: 2.3;
  }

  /* Grid e Cards no Mobile */
  .kpi-grid-master {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .kpi-card-master {
    padding: 12px 14px !important;
  }

  .kpi-value-master {
    font-size: 20px !important;
  }

  .dashboard-split-grid,
  .publicacao-split-grid,
  .espelho-grade,
  .grade-contas {
    grid-template-columns: 1fr !important;
  }

  /* Containers e Cards sem estourar a tela */
  .dashboard-master-container,
  .painel-master-card,
  .master-card,
  .card,
  .secao-card,
  .placa {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }

  /* Cabeçalho de Cards */
  .card-master-header,
  .master-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
  }

  .card-master-header > div:last-child,
  .master-card-header > div:last-child {
    width: 100%;
  }

  .card-master-header button,
  .btn-acao-tabela {
    width: 100%;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Tabelas Responsivas com Scroll Suave */
  .table-responsive,
  .proximas-table-wrap,
  .operacao-tabela,
  .tabela-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    margin-bottom: 12px;
    border-radius: 10px;
  }

  .tabela-master {
    width: 100%;
    min-width: 580px;
    border-collapse: collapse;
  }

  .proximas-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
  }

  /* Banner Mensal Flexível */
  .monthly-banner-master {
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    font-size: 11.5px !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Abas do Acervo Horizontais sem quebrar linha */
  .abas {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    scrollbar-width: none !important;
    padding-bottom: 4px;
    gap: 6px !important;
  }
  .abas::-webkit-scrollbar {
    display: none !important;
  }
  .aba {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 7px 11px !important;
    font-size: 13px !important;
  }

  /* Barra de Lista de Conteúdos */
  .barra-lista {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .barra-lista-fim {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .barra-lista-fim button {
    flex: 1 1 calc(50% - 6px) !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  /* Operação Android Filtros */
  .operacao-filtros {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .operacao-filtros label,
  .operacao-filtros input,
  .operacao-filtros select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Dropzone do Acervo */
  .acervo-dropzone {
    padding: 20px 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .acervo-dropzone div {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Banner de Instalação Flutuante */
.pwa-install-pill {
  display: flex;
  position: fixed;
  bottom: calc(70px + var(--sab));
  left: 14px;
  right: 14px;
  max-width: 440px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 160;
  animation: slideUpPwa 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpPwa {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.pwa-install-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pwa-pill-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.pwa-install-info strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.pwa-install-info span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.pwa-pill-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-pwa-action {
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

.btn-pwa-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  padding: 6px;
  cursor: pointer;
}

/* Modais Web/PWA Fallback */
.modal-backdrop-pwa {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: fadeInModal 0.2s ease;
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card-pwa {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  padding: 22px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
  animation: scaleModal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scaleModal {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-titulo-pwa {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 8px;
}

.modal-corpo-pwa {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

.modal-botoes-pwa {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}