* { margin: 0; padding: 0; box-sizing: border-box; }
/* Desativa o "font boosting" do Chrome mobile — sem isto, abas com muito conteúdo
   (ex.: Template, cheia de thumbnails) faziam o navegador auto-inflar o texto e a
   barra de baixo aumentava/cortava o "Config". Não aparece no emulador desktop. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; }
:root {
  --fundo: #f4f4f5; --card: #ffffff; --texto: #18181b; --suave: #71717a;
  --borda: #e4e4e7; --marca: #7c3aed; --marca-escuro: #6d28d9; --perigo: #dc2626;
}
body { font-family: 'Inter', system-ui, sans-serif; background: var(--fundo); color: var(--texto); min-height: 100vh; }

h1 { font-size: 26px; font-weight: 800; }
h1 span { color: var(--marca); }
.tagline { color: var(--suave); margin-top: 4px; font-size: 14px; }

body.pagina-auth {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  background:
    radial-gradient(circle at 15% 10%, #ede9fe 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, #fce7f3 0%, transparent 45%),
    var(--fundo);
}
/* "Voltar para o site" + card agrupados e centralizados: o link fica logo acima
   do card, alinhado à esquerda dele — bom no desktop e no mobile. */
.auth-centro { width: 100%; max-width: 432px; padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.auth-topo { padding: 0; }
.auth-topo a { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.auth-topo a:hover { color: var(--marca); }
.auth-card { width: 100%; background: var(--card); border: 1px solid var(--borda); border-radius: 18px; padding: 32px; box-shadow: 0 12px 40px -14px rgba(24,24,27,.16); }
.auth-card .tagline { margin-bottom: 20px; }
.auth-rodape { text-align: center; padding: 16px; font-size: 12px; color: var(--suave); }
@media (max-width: 420px) { .auth-card { padding: 26px 20px; } }

/* Botão do Google + divisor "ou" — se o Google não renderizar (sem client id,
   script bloqueado por extensão, etc.), o container fica :empty e some, junto
   com o "ou", pra nunca sobrar um "ou" solto sem nada em cima. */
#g-botao-google { display: flex; justify-content: center; }
#g-botao-google:empty { display: none; }
#g-botao-google:empty + .divisor { display: none; }
.divisor { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--suave); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.troca-conta { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--suave); }
.troca-conta a { color: var(--marca); font-weight: 700; text-decoration: none; }
.troca-conta a:hover { text-decoration: underline; }
.link-mini { font-size: 13px; color: var(--marca); text-decoration: none; }
.link-mini:hover { text-decoration: underline; }

form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.campo-aceite { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 12.5px; color: var(--suave); line-height: 1.5; }
.campo-aceite input[type=checkbox] { width: 20px; height: 20px; margin: 1px 2px 0 0; flex-shrink: 0; cursor: pointer; accent-color: var(--marca); }
.campo-aceite a { color: var(--marca); font-weight: 600; }
/* Verificação por código de 6 dígitos */
.codigo-info { color: var(--suave); font-size: 13.5px; margin: 2px 0 10px; line-height: 1.5; }
.codigo-spam { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin: 0 0 18px; }
.codigo-spam b { font-weight: 700; }
.codigo-campo { width: 100%; text-align: center; font-size: 30px; font-weight: 800; letter-spacing: .3em; padding: 14px 0; text-indent: .3em; font-family: inherit; }
.codigo-dev { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: #f5f3ff; color: #6d28d9; border: 1px dashed #c4b5fd; border-radius: 8px; padding: 8px 10px; text-align: center; margin: 0 0 12px; }
.campo-composto { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
input, textarea, select { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 15px; font-family: inherit; width: 100%; }
.slug-campo { display: flex; align-items: center; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.slug-campo span { padding: 10px 0 10px 12px; color: var(--marca); font-weight: 700; font-size: 15px; }
.slug-campo input { border: none; padding-left: 2px; outline: none; }
.senha-campo { position: relative; }
.senha-campo input { width: 100%; padding-right: 46px; }
.ver-senha { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: auto; background: none; border: 0; padding: 8px; margin: 0; cursor: pointer; color: var(--suave); display: inline-flex; align-items: center; }
.ver-senha:hover { color: var(--texto); }

.whatsapp-campo { display: flex; gap: 8px; }
.whatsapp-campo select { flex: 0 0 44%; min-width: 0; }
.whatsapp-campo input:last-child { flex: 1; }

.foto-campo { display: flex; align-items: center; gap: 12px; }
.foto-preview { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borda); flex-shrink: 0; }
.foto-vazia { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--borda); background: var(--fundo); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.foto-vazia img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.foto-opcoes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.foto-opcoes input[type="file"] { font-size: 12.5px; }
.foto-escolha { display: flex; gap: 6px; }
.foto-escolha button { flex: 1; border: 1px solid var(--borda); background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: var(--texto); }
.foto-escolha button.ativa { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 700; }
.foto-url-linha { display: flex; gap: 6px; }
.foto-url-linha input { flex: 1; }
.foto-url-linha button { width: auto; padding: 10px 16px; white-space: nowrap; }

button.principal { padding: 12px; background: var(--marca); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
button.principal:hover { background: var(--marca-escuro); }
button.perigo { padding: 12px; background: var(--perigo); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
button.perigo:hover { background: #b91c1c; }
button.secundario { padding: 12px; background: transparent; color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
button.secundario:hover { background: var(--fundo); }
.veu .modal .acoes-confirmar { display: flex; gap: 8px; margin-top: 4px; }
.veu .modal .acoes-confirmar button { flex: 1; width: auto; }
.veu .modal label.confirmar-opcao { display: flex; flex-direction: row; align-items: center; gap: 9px; margin: 4px 0 16px; padding: 11px 13px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; font-size: 13.5px; color: var(--texto); cursor: pointer; text-align: left; line-height: 1.35; }
.veu .modal label.confirmar-opcao input[type=checkbox] { width: 17px; height: 17px; flex-shrink: 0; margin: 0; cursor: pointer; accent-color: var(--perigo); }
.erro { margin-top: 14px; color: var(--perigo); background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; }

/* Editor */
.editor { max-width: 720px; margin: 0 auto; padding: 24px 16px 120px; }

/* Planos */
.aviso-pendente { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin-top: 10px; }
.aviso-pendente-msg { margin: 0; }
.aviso-pendente-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ap-btn { font-size: 13px; font-weight: 700; border-radius: 8px; padding: 8px 14px; cursor: pointer; text-decoration: none; border: 1px solid transparent; line-height: 1; display: inline-flex; align-items: center; }
.ap-btn-concluir { background: #b45309; color: #fff; }
.ap-btn-concluir:hover { background: #92400e; }
.ap-btn-cancelar { background: transparent; color: #b45309; border-color: #fcd34d; }
.ap-btn-cancelar:hover { background: #fef3c7; }
.ap-btn:disabled { opacity: .6; cursor: default; }
.ciclo-toggle { display: flex; gap: 4px; margin: 14px 0 20px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 4px; }
.ciclo-toggle button { flex: 1; padding: 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 14px; font-family: inherit; color: var(--suave); font-weight: 600; transition: background .15s, color .15s, box-shadow .15s; }
.ciclo-toggle button.ativa { background: var(--card); color: var(--texto); box-shadow: 0 1px 3px rgba(24,24,27,.14); }
.badge-economia { font-size: 11px; color: #15803d; font-weight: 700; }
.plano-atual-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 16px; margin: 4px 0 2px; }
.pab-texto { font-size: 14px; color: var(--suave); }
.pab-plano { font-size: 14px; font-weight: 800; color: var(--texto); background: var(--card); border: 1px solid var(--borda); border-radius: 999px; padding: 3px 12px; }
.pab-link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--marca); text-decoration: none; }
.pab-link:hover { text-decoration: underline; }

.plano-nome-modal { font-size: 16px; margin: 4px 0 14px; }
.plano-nome-modal strong { color: var(--marca-escuro); font-size: 18px; }
.opcoes-pagamento { display: flex; flex-direction: column; gap: 8px; }
.opcao-pagamento { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 10px; background: var(--card); cursor: pointer; font-family: inherit; text-align: left; color: var(--texto); }
.opcao-pagamento:hover { border-color: var(--marca); }
.opcao-pagamento span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.plano-card .preco sup { font-size: 13px; color: var(--suave); margin-left: 1px; }
.rodape-nota { margin-top: 14px; }
.opcao-pagamento strong { font-size: 13px; font-weight: 600; color: var(--marca-escuro); text-align: right; }
.grade-planos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 20px; }
.plano-card { position: relative; border: 1px solid var(--borda); border-radius: 14px; padding: 20px; background: var(--card); display: flex; flex-direction: column; }
.plano-card.plano-atual { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4, var(--card) 62%); box-shadow: 0 8px 24px rgba(21,128,61,.10); }
.plano-card .selo-plano { position: absolute; top: -10px; left: 16px; background: #ede9fe; color: var(--marca-escuro); border: 1px solid #ddd6fe; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
.plano-card .selo-atual { position: absolute; top: -10px; right: 16px; background: #15803d; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
.plano-card h3 { font-size: 18px; margin-top: 6px; }
.plano-card .publico { font-size: 12.5px; color: var(--suave); margin-top: 2px; }
.plano-card .preco-linha { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.plano-card .preco { font-size: 26px; font-weight: 800; }
.plano-card .preco small { font-size: 13px; font-weight: 500; color: var(--suave); }
.badge-desconto { background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.badge-desconto-grande { font-size: 13px; padding: 4px 10px; }
.plano-card ul { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.plano-card li { font-size: 13px; color: var(--texto); padding-left: 18px; position: relative; }
.plano-card li::before { content: '✓'; position: absolute; left: 0; color: #16a34a; font-weight: 700; }
.plano-card button { margin-top: 18px; }
.plano-card button:disabled { background: var(--fundo); color: var(--suave); border: 1px solid var(--borda); font-weight: 600; cursor: default; opacity: 1; }
.plano-card .economia { font-size: 12px; color: #15803d; font-weight: 600; margin-top: 4px; }

.plano-skeleton { border: 1px solid var(--borda); border-radius: 14px; padding: 20px; background: var(--card); }
.plano-skeleton .linha { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--fundo) 25%, var(--borda) 50%, var(--fundo) 75%); background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite; margin-top: 12px; }
.plano-skeleton .linha:first-child { width: 50%; margin-top: 0; }
.plano-skeleton .linha.preco { height: 26px; width: 70%; margin-top: 18px; }
@keyframes brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Conta */
.botoes-conta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.botoes-conta button { width: auto; }

.lista-pagamentos { display: flex; flex-direction: column; gap: 8px; }
.item-pagamento { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 10px; }
.item-pagamento strong { font-size: 14px; display: block; }
.item-pagamento .dica { margin-top: 2px; }
.item-pagamento-valor { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.badge-status { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.badge-status-ok { background: #dcfce7; color: #15803d; }
.badge-status-pendente { background: #fffbeb; color: #b45309; }
.badge-status-erro { background: #fef2f2; color: #b91c1c; }

/* Configurações (dentro do editor) */
.lista-config { display: flex; flex-direction: column; gap: 8px; }
.item-config { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 10px; background: var(--card); color: var(--texto); text-decoration: none; font-size: 15px; font-family: inherit; cursor: pointer; width: 100%; text-align: left; }
.item-config:hover { background: var(--fundo); }
.item-config .seta { color: var(--suave); font-size: 18px; }

/* Bottom menu */
/* transform: translateZ(0) promove a barra a uma camada própria do compositor — sem isso,
   em telas pesadas (aba Template, cheia de thumbnails com imagem de fundo) o Safari/Chrome
   mobile "arrasta" a barra fixa durante o scroll. Inerte onde o bug não ocorre. */
.abas-rodape { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; gap: 4px; background: var(--card); border-top: 1px solid var(--borda); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); transform: translateZ(0); backface-visibility: hidden; }
.aba-botao { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-family: inherit; color: var(--suave); padding: 6px 14px; border-radius: 12px; }
.aba-botao .ico { font-size: 20px; }
.aba-botao.ativa { color: var(--marca-escuro); background: #f5f3ff; font-weight: 700; }

@media (max-width: 480px) {
  .abas-rodape { justify-content: space-between; gap: 2px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .aba-botao { flex: 1 1 0; min-width: 0; padding: 6px 8px; }
}

/* Upsell contextual */
.upsell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: linear-gradient(120deg, #f5f3ff, #fdf2f8); border: 1px solid #ddd6fe; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: #4c1d95; margin: 12px 0; }
.upsell a { margin-left: auto; background: var(--marca); color: #fff; text-decoration: none; font-weight: 700; font-size: 12.5px; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.upsell a:hover { background: var(--marca-escuro); }
.topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.topo .acoes { display: flex; gap: 10px; align-items: center; }
.topo a { color: var(--marca); text-decoration: none; font-weight: 600; font-size: 14px; }
.topo button { background: none; border: none; color: var(--suave); cursor: pointer; font-size: 14px; }

section.bloco { background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
section.bloco h2 { font-size: 16px; margin-bottom: 14px; }

.meu-arroba { display: flex; align-items: center; gap: 8px; margin: -14px 0 14px; }
.meu-arroba span { font-size: 14px; font-weight: 700; color: var(--marca); }
.meu-arroba button { border: 1px solid var(--borda); background: var(--card); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--suave); transition: border-color .12s, color .12s; }
.meu-arroba button:hover { border-color: var(--marca); color: var(--marca); }

.stats { display: flex; gap: 24px; }
.stats-por-link { margin-top: 18px; }
.barra-link { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13.5px; }
.barra-titulo { flex: 0 0 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilho { flex: 1; height: 8px; background: var(--fundo); border-radius: 99px; overflow: hidden; }
.barra-preenchida { display: block; height: 100%; background: linear-gradient(90deg, var(--marca), #ec4899); border-radius: 99px; }
.barra-link b { flex: 0 0 34px; text-align: right; }
.stats div { text-align: center; }
.stats strong { font-size: 24px; display: block; }
.stats span { font-size: 13px; color: var(--suave); }

.categoria-titulo { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; color: var(--texto); margin: 24px 0 10px; }
.categoria-titulo::before { content: ''; width: 16px; height: 3px; border-radius: 2px; background: var(--marca); flex-shrink: 0; }
.grupo-titulo { color: var(--texto); font-weight: 700; }

/* Analytics: filtro + cards por área */
.filtro-stats { display: inline-flex; gap: 3px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 999px; padding: 3px; margin: 16px 0 2px; }
.filtro-stats button { border: none; background: none; padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--suave); cursor: pointer; font-family: inherit; }
.filtro-stats button.ativa { background: var(--marca); color: #fff; }
.stat-card { background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px; margin-top: 12px; }
.stat-card .grupo-titulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto); margin: 0 0 6px; }
.stat-card .barra-link:first-of-type { margin-top: 4px; }
.barra-link.inativa { opacity: .6; }
.tag-stat { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); background: var(--borda); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.tag-stat.rm { color: var(--perigo); background: #fef2f2; border: 1px solid #fecaca; }
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.tema { border: 2px solid var(--borda); border-radius: 10px; padding: 8px 6px; text-align: center; cursor: pointer; font-size: 12px; position: relative; }
.tema .amostra { height: 64px; border-radius: 6px; margin-bottom: 6px; border: 1px solid rgba(0,0,0,.08); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.tema .mini-botao { width: 70%; height: 10px; display: block; }
.tema.selecionado { border-color: var(--marca); }
.tema .cadeado {
  position: absolute; top: 6px; right: 6px; font-size: 14px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: rgba(24, 24, 27, .72); color: #fff; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.cadeado-dica {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #18181b; color: #fff; font-size: 11px; font-weight: 600; text-align: center;
  padding: 6px 10px; border-radius: 6px; white-space: normal; width: 130px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
  z-index: 20;
}
.cadeado-dica::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #18181b;
}
.tema.premium:hover .cadeado-dica { opacity: 1; }

.lista-links { display: flex; flex-direction: column; gap: 10px; }

/* aba Links: separa "Seus links" (conteúdo) do painel "Adicionar" (ferramentas) */
.painel-topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.painel-topo h3 { font-size: 14px; font-weight: 700; }
.lista-vazia { color: var(--suave); font-size: 13.5px; padding: 6px 2px; border: 1px dashed var(--borda); border-radius: 10px; text-align: center; }
.painel-add { margin-top: 24px; padding: 16px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 14px; }
.seg-add { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 4px; margin-bottom: 14px; overflow-x: auto; }
.seg-add-op { flex: 1 0 auto; border: none; background: transparent; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; color: var(--suave); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.seg-add-op.ativa { background: var(--marca); color: #fff; }
.seg-add-op:not(.ativa):hover { color: var(--texto); background: var(--fundo); }
.painel-add .add-form { margin: 0; }
.item-link { display: flex; gap: 10px; align-items: center; border: 1px solid var(--borda); border-left-width: 4px; border-radius: 12px; padding: 12px; background: var(--card); transition: border-color .15s, box-shadow .15s; }
.item-link:hover { border-color: #d4d4d8; box-shadow: 0 1px 3px rgba(24,24,27,.05); }
/* cor por tipo (barra lateral) — depois do :hover pra vencer o reset de border-color */
.item-link.tipo-url    { border-left-color: #7c3aed; }
.item-link.tipo-titulo { border-left-color: #d97706; }
.item-link.tipo-video  { border-left-color: #dc2626; }
.item-link.tipo-pdf    { border-left-color: #0891b2; }
.item-link.tipo-url    .tag-tipo { color: #6d28d9; border-color: #d6c8f5; background: #f5f3ff; }
.item-link.tipo-titulo .tag-tipo { color: #b45309; border-color: #fdba74; background: #fff7ed; }
.item-link.tipo-video  .tag-tipo { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.item-link.tipo-pdf    .tag-tipo { color: #0e7490; border-color: #a5e8f2; background: #ecfeff; }
.item-link .campos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.item-link input { font-size: 14px; padding: 8px 10px; }
.item-link .botoes { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-shrink: 0; }
.item-link .botoes button { border: 1px solid var(--borda); background: var(--card); border-radius: 8px; cursor: pointer; color: var(--texto); display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .12s, border-color .12s, color .12s; }
.item-link .botoes button:hover:not(:disabled) { background: var(--fundo); border-color: #c9c9d0; }
.item-link .botoes button:disabled { opacity: .3; cursor: default; }
.item-link .botoes button svg { display: block; }
.item-link .reordenar { display: flex; flex-direction: column; gap: 3px; }
.item-link .reordenar button { width: 30px; height: 17px; color: var(--suave); }
.item-link .reordenar button svg { width: 13px; height: 13px; }
.item-link .acao-icone { width: 36px; height: 36px; }
.item-link .acao-icone svg { width: 17px; height: 17px; }
.item-link .acao-icone.remover { color: var(--perigo); }
.item-link .acao-icone.remover:hover { background: #fef2f2; border-color: #fecaca; }
.item-link.inativo { opacity: .6; }
.item-link.inativo .acao-icone[data-acao="ativo"] { color: var(--marca); border-color: color-mix(in srgb, var(--marca) 40%, var(--borda)); }
@media (max-width: 560px) {
  /* Corta overflow horizontal fantasma no mobile: o tooltip .cadeado-dica dos templates
     premium (width:130px, absolute, opacity:0/só-hover) NUNCA aparece no mobile, mas
     ainda ocupa layout e vaza ~25px além da borda nos cards da coluna direita. Esse
     scroll-x invisível fazia a barra fixa (.abas-rodape) "crescer"/deslocar e cortar o
     Config na aba Template. `clip` não transforma o eixo Y em scroll container (ao
     contrário de `hidden`) e não cria containing block, então a barra fixa segue intacta.
     Mobile-only: o tooltip do desktop continua funcionando no hover. */
  .editor { overflow-x: hidden; overflow-x: clip; }
  /* No mobile, cada seção vira uma FAIXA BRANCA full-width: sem margem lateral externa
     e sem cantos arredondados. Vale pra todas as abas (perfil, template, links,
     catálogos, analytics, config). No desktop (>560px) continua igual. O -16px cancela
     exatamente o padding lateral do .editor, então a faixa vai de borda a borda sem overflow. */
  section.bloco { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; }
  /* "+" do emoji menor na horizontal (a base força 64px via !important) */
  .item-link .campo-emoji { flex: 0 0 44px !important; min-width: 44px !important; width: 44px; padding: 8px 3px; }
  /* cards de link empilham as ações no mobile (comportamento base, sem edge-to-edge) */
  .item-link { flex-wrap: wrap; }
  .item-link .botoes { width: 100%; justify-content: flex-end; border-top: 1px solid var(--borda); padding-top: 10px; }
  /* Painel "Adicionar" (aba Links) / "Criar catálogo": no mobile encosta nas bordas e
     desce até o menu inferior — sem cantos, sem bordas laterais/inferior e sem o strip
     branco embaixo (margin-bottom -20px come o padding-bottom do .bloco). Como o cinza do
     painel (--fundo) é idêntico ao do body, o fundo flui contínuo até a barra fixa. */
  .painel-add { margin-left: -20px; margin-right: -20px; margin-bottom: -20px; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
  /* remove a linha (border-bottom do .bloco) que sobraria como seam entre o painel e o
     cinza do body nas abas que têm painel "Adicionar" no rodapé */
  section.bloco[data-aba="links"], section.bloco[data-aba="catalogos"] { border-bottom: 0; margin-bottom: 0; }
}

.form-novo-link { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.form-novo-link input { flex: 1; min-width: 140px; }
.form-novo-link button { white-space: nowrap; }

.aviso-upgrade { background: #f5f3ff; border: 1px solid #ddd6fe; color: var(--marca-escuro); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-top: 10px; }

.aviso-bloqueado { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin: 10px 0; }
.aviso-bloqueado a { color: #92400e; font-weight: 700; }

.dica { font-size: 12px; color: var(--suave); font-weight: 400; }
.plano-resumo { font-size: 14.5px; }
.plano-nome-destaque { color: var(--marca-escuro); font-size: 17px; }
.dica-topo { margin: -12px 0 18px; }

.status-pill { position: fixed; bottom: 86px; right: 14px; z-index: 50; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,.08); transition: all .2s ease; }
.status-pill.salvando { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.status-pill.erro { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
/* Pill transitório (só no editor): oculto quando ocioso, aparece ao salvar e some sozinho.
   Escopado nesta classe pra NÃO afetar o toast de erro do /planos, que usa o atributo hidden. */
.status-pill-auto { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); }
.status-pill-auto.mostrar { opacity: 1; visibility: visible; transform: translateY(0); }

/* Cropper de foto de perfil (arrastar + zoom, recorte circular) */
.cropper-veu { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cropper-card { background: var(--card); border-radius: 16px; padding: 20px; width: 340px; max-width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.cropper-card h3 { font-size: 17px; margin-bottom: 4px; }
.cropper-dica { font-size: 12.5px; color: var(--suave); margin-bottom: 14px; }
.cropper-palco { position: relative; width: 280px; max-width: 100%; height: 280px; margin: 0 auto; overflow: hidden; border-radius: 12px; background: #111; touch-action: none; cursor: grab; user-select: none; }
.cropper-palco:active { cursor: grabbing; }
.cropper-palco img { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; -webkit-user-drag: none; user-select: none; max-width: none; }
.cropper-mascara { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0,0,0,.5); pointer-events: none; }
.cropper-zoom-linha { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; color: var(--suave); font-size: 18px; }
.cropper-zoom-linha input[type=range] { flex: 1; accent-color: var(--marca); }
.cropper-acoes { display: flex; gap: 10px; margin-top: 16px; }
.cropper-acoes button { flex: 1; }
/* Planos: toast fica centralizado no topo em vez de canto inferior direito (não tem barra de abas embaixo) */
.pagina-planos .status-pill { top: 18%; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); max-width: min(420px, calc(100vw - 32px)); text-align: center; }

.campo-erro { border-color: var(--perigo) !important; background: #fef2f2; }
.dica a { color: var(--marca); }
.catalogo-bloco { border: 1px solid var(--borda); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.catalogo-bloco.inativo { opacity: .5; }
.item-catalogo.inativo { opacity: .5; }
.catalogo-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.catalogo-topo a { color: var(--marca); font-size: 13px; text-decoration: none; margin-right: 10px; }
.catalogo-topo button.remover, .item-catalogo button.remover { border: 1px solid var(--borda); background: var(--card); border-radius: 6px; cursor: pointer; padding: 4px 8px; font-size: 12px; color: var(--perigo); }
.catalogo-itens { display: flex; flex-direction: column; gap: 6px; }
.item-catalogo { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; font-size: 14px; gap: 10px; }
.item-descricao { font-size: 12px; color: var(--suave); font-weight: 400; }
.item-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.item-catalogo button.secundario, .catalogo-topo button.secundario { border: 1px solid var(--borda); background: var(--card); border-radius: 6px; cursor: pointer; padding: 4px 8px; font-size: 12px; width: auto; }
.form-item { margin-top: 10px; }
.pill-cat { font-size: 11px; background: #f5f3ff; color: var(--marca-escuro); border: 1px solid #ddd6fe; border-radius: 999px; padding: 2px 8px; }

.campos-fieldset { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--borda); border-radius: 12px; padding: 14px; }
.campos-fieldset legend { font-size: 13.5px; font-weight: 600; padding: 0 6px; }
.redes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 8px; }
.rede-campo { display: flex; flex-direction: row; align-items: center; gap: 0; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; font-weight: 400; background: #fff; transition: border-color .15s ease; }
.rede-campo:focus-within { border-color: var(--marca); }
.rede-logo { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; background: var(--fundo); border-right: 1px solid var(--borda); }
.rede-prefixo { padding-left: 10px; color: var(--suave); font-size: 13px; white-space: nowrap; }
.rede-campo input { border: none; outline: none; padding: 9px 10px 9px 2px; font-size: 14px; min-width: 40px; flex: 1; }

.config-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.config-rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); flex: 0 0 76px; }
.seletor-layout { display: flex; gap: 6px; flex-wrap: wrap; }
.seletor-layout button { border: 1px solid var(--borda); background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: var(--texto); }
.seletor-layout button.ativa { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 700; }
.cats-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; background: #f5f3ff; color: var(--marca-escuro); border: 1px solid #ddd6fe; border-radius: 999px; padding: 4px 6px 4px 10px; }
.cat-chip button { border: none; background: transparent; cursor: pointer; color: var(--marca-escuro); font-size: 11px; padding: 1px 4px; }

/* Catálogos: cards colapsáveis (acordeão) */
.catalogo-card { border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--card); }
.catalogo-card.inativo { opacity: .6; }
.cat-cabecalho { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: transparent; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--texto); }
.cat-cabecalho:hover { background: var(--fundo); }
.cat-chevron { display: inline-flex; color: var(--suave); transition: transform .18s; flex-shrink: 0; }
.cat-chevron svg { width: 15px; height: 15px; }
.catalogo-card.aberto .cat-chevron { transform: rotate(90deg); }
.cat-titulo { font-weight: 700; font-size: 15px; }
.cat-resumo { margin-left: auto; font-size: 12.5px; color: var(--suave); white-space: nowrap; }
.cat-corpo { padding: 4px 16px 16px; border-top: 1px solid var(--borda); }
.cat-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 0; }
.cat-ver { color: var(--marca); font-size: 13px; text-decoration: none; font-weight: 600; }
.cat-acoes-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-acoes-btns button { width: auto; }
.perigo-txt { color: var(--perigo); }
.cat-itens-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.cat-itens-topo h4 { font-size: 14px; font-weight: 700; }
.cat-conta { font-size: 12px; color: var(--suave); font-weight: 600; margin-left: 2px; }
.cat-itens-topo button { width: auto; }
.catalogo-itens { gap: 8px; }
.form-item { margin-top: 12px; padding: 14px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; }
.cat-config { margin-top: 14px; border-top: 1px solid var(--borda); padding-top: 6px; }
.cat-config summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--suave); padding: 8px 0; list-style: none; }
.cat-config summary::-webkit-details-marker { display: none; }
.cat-config[open] summary { color: var(--texto); margin-bottom: 6px; }

/* itens do catálogo — mesma linguagem de ícones das linhas de link */
.item-cat-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.item-cat-row.inativo { opacity: .6; }
.item-cat-info { flex: 1; min-width: 0; }
.item-cat-badges { display: flex; gap: 5px; margin-bottom: 4px; flex-wrap: wrap; }
.item-cat-nome { font-size: 14px; font-weight: 600; }
.item-cat-nome b { color: var(--marca-escuro); }
.item-cat-row .botoes { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.item-cat-row .botoes button { border: 1px solid var(--borda); background: var(--card); border-radius: 8px; cursor: pointer; color: var(--texto); display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .12s, border-color .12s; }
.item-cat-row .botoes button:hover:not(:disabled) { background: var(--fundo); border-color: #c9c9d0; }
.item-cat-row .botoes button:disabled { opacity: .3; cursor: default; }
.item-cat-row .reordenar { display: flex; flex-direction: column; gap: 3px; }
.item-cat-row .reordenar button { width: 30px; height: 17px; color: var(--suave); }
.item-cat-row .reordenar button svg { width: 13px; height: 13px; }
.item-cat-row .acao-icone { width: 34px; height: 34px; }
.item-cat-row .acao-icone svg { width: 16px; height: 16px; }
.item-cat-row .acao-icone.remover { color: var(--perigo); }
.item-cat-row .acao-icone.remover:hover { background: #fef2f2; border-color: #fecaca; }
.form-nova-cat { display: inline-flex; gap: 4px; }
.form-nova-cat input { border: 1px dashed var(--borda); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; width: 130px; }
.form-nova-cat button { border: 1px solid var(--borda); background: var(--card); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.form-item select { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; }
.campo-linha-inteira { flex: 1 1 100%; min-width: 100%; resize: vertical; }

.item-foto-escolha { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex: 1 1 100%; min-width: 100%; }
.item-foto-escolha:has(button.principal) { justify-content: space-between; }
.pdf-escolha-grupo { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.item-foto-escolha button.principal { flex-shrink: 0; width: auto; margin-left: auto; }
.item-foto-botao { flex-shrink: 0; width: auto; border: 1px solid var(--borda); background: var(--card); border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--texto); }
.item-foto-botao:hover { border-color: var(--marca); color: var(--marca); }
.item-foto-nome { font-size: 12.5px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-foto-nome.selecionado { color: #15803d; font-weight: 600; }

.destaque-novo-catalogo {
  margin-bottom: 16px;
}

.form-nova-cat { flex-direction: row; gap: 4px; }
.form-novo-link select { width: auto; flex: 0 0 auto; }
.form-novo-link { align-items: center; }

.campo-emoji { flex: 0 0 64px !important; min-width: 64px !important; width: 64px; text-align: center; font-size: 16px; }
.form-novo-link input { width: auto; }
.form-novo-link { flex-direction: row; flex-wrap: wrap; gap: 8px; }

.emoji-popover { position: absolute; z-index: 110; width: 320px; max-height: 250px; overflow-y: auto; background: #fff; border: 1px solid var(--borda); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.16); padding: 10px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-popover .emoji-opcao { border: none; background: transparent; font-size: 21px; padding: 5px; cursor: pointer; border-radius: 8px; }
.emoji-popover .emoji-opcao:hover { background: #f5f3ff; }
.emoji-popover .emoji-limpar { grid-column: 1 / -1; border: 1px dashed var(--borda); background: transparent; border-radius: 8px; padding: 6px; font-size: 12px; color: var(--suave); cursor: pointer; margin-bottom: 4px; }
.campo-emoji { cursor: pointer; background: #fff; }

.linha-titulo { display: flex; gap: 6px; }
.linha-titulo input[data-campo="titulo"] { flex: 1; }
.item-link .campo-emoji { flex: 0 0 46px; min-width: 46px; width: 46px; padding: 8px 4px; }

.tag-tipo { align-self: center; font-size: 11px; color: var(--suave); border: 1px solid var(--borda); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }

/* seletor de ação do item (WhatsApp | Link) */
.seg-acao { display: inline-flex; align-self: flex-start; border: 1px solid var(--borda); border-radius: 999px; padding: 3px; gap: 2px; background: var(--fundo); }
.seg-op { border: none; background: transparent; border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--suave); cursor: pointer; transition: color .12s; }
.seg-op.ativa { background: var(--card); color: var(--marca); box-shadow: 0 1px 3px rgba(24,24,27,.12); }
.campo-acao { gap: 8px; }

.rotulo-linha { display: flex; align-items: center; gap: 6px; }
.botao-ajuda { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; border: 1px solid var(--borda); background: var(--fundo); color: var(--suave); font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.botao-ajuda:hover { border-color: var(--marca); color: var(--marca); }
.badge-plano {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; background: #fef3c7; color: #92400e;
  border: 1px solid #fde68a; border-radius: 999px; padding: 2px 8px; cursor: help;
}
.badge-plano:hover .cadeado-dica, .badge-plano:focus .cadeado-dica { opacity: 1; }
.badge-plano .cadeado-dica { bottom: calc(100% + 8px); left: 0; transform: none; width: 170px; }
.badge-plano .cadeado-dica::after { left: 16px; transform: none; }

.veu { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.veu .modal { background: var(--card); border-radius: 16px; padding: 24px; max-width: 440px; width: 100%; max-height: 80vh; overflow-y: auto; }
.veu .modal h3 { font-size: 17px; margin-bottom: 8px; }
.veu .modal h4 { font-size: 14px; margin-bottom: 14px; }
.veu .modal p { font-size: 14px; line-height: 1.5; margin-bottom: 12px; color: var(--texto); }
.veu .modal ol { padding-left: 20px; font-size: 14px; line-height: 1.6; margin-bottom: 16px; color: var(--texto); }
.veu .modal code { background: var(--fundo); border: 1px solid var(--borda); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.veu .modal .principal { width: 100%; }
.modal-imagem { max-width: 640px; }
.modal-imagem img { width: 100%; border-radius: 8px; margin-bottom: 14px; display: block; }

/* Cupom de cortesia (página de planos) */
.cupom-box { margin-top: 18px; }
.cupom-box details { border: 1px dashed var(--borda); border-radius: 10px; background: var(--card); }
.cupom-box summary { list-style: none; cursor: pointer; padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: var(--marca-escuro); user-select: none; }
.cupom-box summary::-webkit-details-marker { display: none; }
.cupom-box summary::after { content: '＋'; float: right; color: var(--suave); font-weight: 400; }
.cupom-box details[open] summary::after { content: '－'; }
.cupom-box details[open] summary { border-bottom: 1px solid var(--borda); }
.cupom-box form { display: flex; gap: 8px; padding: 12px 14px 6px; }
.cupom-box input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; text-transform: uppercase; }
.cupom-box input:focus { outline: none; border-color: var(--marca); }
.cupom-box form button { width: auto; padding: 10px 16px; font-size: 14px; }
.cupom-msg { padding: 2px 14px 14px; font-size: 13px; font-weight: 600; }
.cupom-msg.ok { color: #15803d; }
.cupom-msg.erro { color: var(--perigo); }