:root {
  --fundo: #f4f5f2;
  --superficie: #ffffff;
  --superficie-2: #eef0ec;
  --texto: #1c211d;
  --texto-suave: #5d665f;
  --borda: #dde1db;
  --primaria: #12805c;
  --primaria-texto: #ffffff;
  --primaria-suave: #e1f2ea;
  --alerta: #a35c00;
  --alerta-suave: #fff3e0;
  --perigo: #c0392b;
  --perigo-suave: #fdecea;
  --bolha: #d9fdd3;
  --bolha-texto: #111b21;
  --raio: 12px;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.05), 0 2px 8px rgb(0 0 0 / 0.04);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #111412;
    --superficie: #1a1e1b;
    --superficie-2: #232825;
    --texto: #e8ece9;
    --texto-suave: #9aa59d;
    --borda: #2e3530;
    --primaria: #2fb383;
    --primaria-texto: #08130e;
    --primaria-suave: #173328;
    --alerta: #f0a945;
    --alerta-suave: #2e2414;
    --perigo: #ef6f61;
    --perigo-suave: #3a1f1c;
    --bolha: #005c4b;
    --bolha-texto: #e9edef;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[hidden] { display: none !important; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
code { background: var(--superficie-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
a { color: var(--primaria); }

/* ---------- Botões e campos ---------- */
.btn {
  font: inherit; font-weight: 600;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
  padding: .6rem 1rem; border-radius: 10px; cursor: pointer; min-height: 42px;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover { border-color: var(--texto-suave); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); }
.btn-primario:hover { filter: brightness(1.07); border-color: var(--primaria); }
.btn-perigo { color: var(--perigo); }
.btn-perigo:hover { background: var(--perigo-suave); border-color: var(--perigo); }
.btn-fantasma { background: transparent; border-color: transparent; }
.btn-fantasma:hover { background: var(--superficie-2); border-color: transparent; }
.btn-pequeno { padding: .3rem .7rem; min-height: 34px; font-size: .9rem; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .abas button:focus-visible {
  outline: 2px solid var(--primaria); outline-offset: 2px;
}

label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; color: var(--texto-suave); }
input, select, textarea {
  font: inherit; font-weight: 400; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px;
  padding: .55rem .7rem; min-height: 42px; width: 100%;
}
textarea { resize: vertical; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9rem; }

.erro { color: var(--perigo); margin: 0; min-height: 1.2em; font-size: .9rem; }
.ajuda { color: var(--texto-suave); font-size: .88rem; margin: 0 0 .75rem; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-caixa {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 1rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.5rem; box-shadow: var(--sombra);
}
.marca { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.marca-icone { font-size: 1.3rem; }

/* ---------- Estrutura ---------- */
.topo {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 16px; background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.abas {
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none;
  padding: .5rem 16px; background: var(--superficie); border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 5;
}
.abas::-webkit-scrollbar { display: none; }
.abas button {
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer;
  background: none; border: 0; color: var(--texto-suave); padding: .5rem .85rem; border-radius: 999px;
}
.abas button[aria-selected="true"] { background: var(--primaria-suave); color: var(--primaria); }
.conteudo { max-width: 960px; margin: 0 auto; padding: 16px 16px 96px; }
.aba { display: flex; flex-direction: column; gap: 16px; }

.painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; box-shadow: var(--sombra); }
.painel-topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.painel-topo h2 { margin: 0; }

/* ---------- Cards de status ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .85rem 1rem;
  display: flex; flex-direction: column; gap: .15rem; min-width: 0; box-shadow: var(--sombra);
}
.card-rotulo { font-size: .8rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.card-valor { font-size: 1.25rem; overflow-wrap: anywhere; }
.card-detalhe { font-size: .85rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.ok { color: var(--primaria); }
.atencao { color: var(--alerta); }
.ruim { color: var(--perigo); }

.acoes { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; align-items: center; }
.acoes .btn { flex: 1 1 200px; }
@media (min-width: 720px) { .acoes .btn { flex: 0 0 auto; } }
.acoes-fixas {
  position: sticky; bottom: 0; background: var(--fundo); padding: .75rem 0; margin-bottom: -16px;
  border-top: 1px solid var(--borda);
}
.acoes-fixas .erro { flex: 1 1 100%; text-align: right; }

/* ---------- Pendências ---------- */
.pendencias { display: flex; flex-direction: column; gap: .5rem; }
.pendencia {
  display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--alerta-suave); border: 1px solid color-mix(in srgb, var(--alerta) 30%, transparent);
  border-radius: 10px; padding: .65rem .85rem; font-size: .92rem;
}

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; gap: .75rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--borda); }
.lista > li:first-child { border-top: 0; }
.lista-vazia { color: var(--texto-suave); justify-content: center; padding: 1.25rem 0 !important; }
.item-corpo { flex: 1; min-width: 0; }
.item-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item-meta { font-size: .85rem; color: var(--texto-suave); display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.item-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--superficie-2); flex: none; }
.selo { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.selo-fila { background: var(--primaria-suave); color: var(--primaria); }
.selo-postada { background: var(--superficie-2); color: var(--texto-suave); }
.selo:empty { display: none; }
.selo-ok { background: var(--primaria-suave); color: var(--primaria); }
.selo-erro { background: var(--perigo-suave); color: var(--perigo); }
#painel-links .atalho { margin: .25rem 0 .85rem; }
.lista-check label { flex-direction: row; align-items: center; gap: .75rem; color: var(--texto); font-weight: 400; cursor: pointer; width: 100%; }
.lista-check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--primaria); flex: none; }

/* ---------- Formulários ---------- */
.grade-form { display: grid; grid-template-columns: 1fr; gap: .85rem; }
@media (min-width: 620px) { .grade-form { grid-template-columns: 1fr 1fr; } .grade-form .largo { grid-column: 1 / -1; } }
.form-rodape { display: flex; gap: .75rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.form-rodape .erro { flex: 1; }

/* ---------- Modelos de mensagem ---------- */
.campos { display: flex; flex-wrap: wrap; gap: .4rem; }
.campo-chip {
  font: inherit; font-size: .82rem; font-family: ui-monospace, Consolas, monospace;
  background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto); border-radius: 6px; padding: .25rem .5rem; cursor: pointer;
}
.campo-chip:hover { border-color: var(--primaria); color: var(--primaria); }
.modelo { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .modelo { grid-template-columns: 1fr 1fr; } }
.modelo-topo { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.modelo textarea { min-height: 260px; }
.previa { background: var(--superficie-2); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; }
.previa-rotulo { font-size: .75rem; color: var(--texto-suave); font-weight: 600; margin-bottom: 6px; }
.bolha {
  background: var(--bolha); color: var(--bolha-texto); border-radius: 0 10px 10px 10px; padding: 8px 10px;
  font-size: .92rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.bolha a { color: #53bdeb; }

/* ---------- WhatsApp ---------- */
.conexao { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; padding: .5rem 0; }
.qr { width: 260px; max-width: 100%; aspect-ratio: 1; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--borda); }
.passos { text-align: left; margin: 0; padding-left: 1.2rem; color: var(--texto-suave); font-size: .92rem; }

/* ---------- Atalho do Mercado Livre ---------- */
.atalho summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.atalho summary::-webkit-details-marker { display: none; }
.atalho summary::after { content: "▾"; color: var(--texto-suave); }
.atalho[open] summary::after { content: "▴"; }
.atalho summary h2 { margin: 0; }
.atalho .passos { margin-top: .85rem; display: flex; flex-direction: column; gap: .5rem; }
.atalho-botao { margin: .5rem 0; }
.atalho-botao .btn { display: inline-flex; align-items: center; text-decoration: none; cursor: grab; }
#painel-nova-oferta .pendencia { margin: 0 0 .85rem; }

/* ---------- Gerar postagem ---------- */
.linha-link { display: flex; gap: .6rem; margin-bottom: .85rem; }
.linha-link input { flex: 1; min-width: 0; }
.linha-link .btn { flex: none; }
.avisos-link {
  list-style: none; margin: 0 0 .85rem; padding: .65rem .85rem; display: flex; flex-direction: column; gap: .35rem;
  background: var(--primaria-suave); border-radius: 10px; font-size: .9rem;
}
.previa .btn { align-self: flex-start; margin-top: 8px; }
.item-acoes { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; flex: none; }

/* ---------- Ganchos ---------- */
#ganchos-texto { width: 100%; min-height: 220px; margin: .25rem 0 .85rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#painel-ganchos .grade-form { margin-bottom: .85rem; }
#painel-ganchos .previa { margin-bottom: .85rem; }

/* ---------- Mercado Livre ---------- */
.linha-check { flex-direction: row; align-items: center; gap: .6rem; color: var(--texto); font-weight: 400; cursor: pointer; }
.linha-check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--primaria); flex: none; }
.categorias-campo { border: 1px solid var(--borda); border-radius: 10px; padding: .75rem 1rem 1rem; margin: 0; min-width: 0; }
.categorias-campo legend { font-size: .88rem; font-weight: 600; color: var(--texto-suave); padding: 0 .35rem; }
.categorias { display: grid; grid-template-columns: 1fr; gap: .55rem; max-height: 320px; overflow-y: auto; }
@media (min-width: 620px) { .categorias { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.categoria-linha { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.categoria-linha .linha-check { flex: 1; min-width: 0; }
.taxa { flex-direction: row; align-items: center; gap: .25rem; color: var(--texto-suave); font-weight: 400; }
.taxa input { width: 4.2rem; min-height: 34px; padding: .25rem .4rem; text-align: right; }
.comissao { color: var(--primaria); font-weight: 600; }

/* ---------- Aviso flutuante ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 150%);
  background: var(--texto); color: var(--fundo); padding: .7rem 1.1rem; border-radius: 10px; font-weight: 600;
  max-width: calc(100% - 32px); transition: transform .25s; z-index: 20; box-shadow: 0 4px 16px rgb(0 0 0 / .2);
}
.aviso.visivel { transform: translate(-50%, 0); }
.aviso.aviso-erro { background: var(--perigo); color: #fff; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }