* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background:#12100e; color:#efe9df; }
main { max-width:820px; margin:0 auto; padding:20px 16px 40px; }
h1 { font-size:19px; letter-spacing:.06em; margin:0 0 4px; }
.phase { color:#b08b52; font-size:12px; letter-spacing:.1em; margin:0 0 20px; }
.card { background:#1c1917; border:1px solid #2f2a25; border-radius:10px; padding:14px 16px; margin-bottom:14px; }
h2 { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#b08b52; margin:0 0 10px; }
ul { margin:0; padding-left:18px; }
li, .mono, p { font-size:13px; }
.mono { font-family:ui-monospace, "SF Mono", Menlo, monospace; color:#cbb894; }
.small { color:#8c8377; font-size:12px; }
input { width:100%; padding:9px 10px; margin:8px 0; background:#141210; border:1px solid #3a342c;
  border-radius:7px; color:#efe9df; font:inherit; }
button { padding:9px 14px; background:#b08b52; color:#1a1512; border:0; border-radius:7px;
  font:inherit; font-weight:600; cursor:pointer; }
button:disabled { background:#3a342c; color:#7d756a; cursor:not-allowed; }
button.ghost { background:#241f1b; color:#cbb894; border:1px solid #3a342c; font-weight:500; }

.album { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; margin:10px 0; }
.album:empty::after { content:"Nenhuma foto no álbum ainda."; color:#7d756a; font-size:12px; }
.thumb { position:relative; border:1px solid #3a342c; border-radius:8px; overflow:hidden; background:#141210; }
.thumb.sel { border-color:#b08b52; box-shadow:0 0 0 1px #b08b52; }
.thumb .no { position:absolute; top:4px; left:5px; font:11px ui-monospace,monospace; color:#cbb894; }
.thumb .ph { width:100%; height:84px; background:linear-gradient(135deg,#221e1a,#2c2722); }
.thumb .cap { display:flex; align-items:center; gap:6px; padding:6px 7px; font-size:11px; color:#a89e91; }
.thumb .cap input { width:auto; margin:0; accent-color:#b08b52; }
.thumb .cap .role { margin-left:auto; color:#7d756a; text-transform:uppercase; letter-spacing:.06em; }
.bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0; }
.plan { font:12px ui-monospace,monospace; color:#8c8377; background:#141210; border:1px solid #2f2a25;
  border-radius:7px; padding:9px 11px; margin:10px 0; }
.plan:empty { display:none; }
.cand { border-left:2px solid #b08b52; padding:6px 0 6px 10px; margin:8px 0; }
.cand .f { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#b08b52; }
.cand .v { font-size:13px; }
.cand .e { font-size:11px; color:#7d756a; font-family:ui-monospace,monospace; }
.warn { color:#c88a5a; }

/* ---------------- central de producao ---------------- */
.top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0; }
.bar input[type=search] { flex:1; min-width:150px; margin:0; }
select { padding:8px 9px; background:#141210; border:1px solid #3a342c; border-radius:7px;
  color:#efe9df; font:inherit; font-size:13px; }
input[type=file] { padding:7px; font-size:12px; color:#a89e91; }

.rows { list-style:none; margin:0; padding:0; }
.row { display:grid; grid-template-columns:34px 46px 1fr auto; gap:10px; align-items:center;
  background:#1c1917; border:1px solid #2f2a25; border-radius:9px; padding:9px 11px; margin-bottom:8px; }
.row .n { font:13px ui-monospace,monospace; color:#7d756a; text-align:right; }
.row .cov { width:46px; height:46px; border-radius:6px; background:#221e1a;
  border:1px solid #3a342c; }
.row .t { font-size:14px; }
.row .meta { font-size:11px; color:#8c8377; font-family:ui-monospace,monospace; }
.row .acts { display:flex; gap:5px; }
.row .acts button { padding:6px 9px; font-size:11px; }
.pill { font-size:11px; padding:3px 9px; border-radius:20px; background:#241f1b;
  border:1px solid #3a342c; color:#cbb894; white-space:nowrap; }
.pill[data-s=analyzing], .pill[data-s=generating] { border-color:#b08b52; color:#e8c68a; }
.pill[data-s=error] { border-color:#a8543a; color:#e09a7f; }
.pill[data-s=ready] { border-color:#4a7a52; color:#9ed0a6; }
.warn { color:#c88a5a; }
textarea { width:100%; padding:9px 10px; background:#141210; border:1px solid #3a342c;
  border-radius:7px; color:#efe9df; font:inherit; font-size:13px; margin:8px 0; resize:vertical; }
.trashBox { margin-top:16px; }
.trashBox summary { cursor:pointer; font-size:12px; color:#8c8377; text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:8px; }
#queue { font:11px ui-monospace,monospace; color:#8c8377; }


/* ---------- CELULAR: a barra de ferramentas precisa respirar ----------
   Sem isto, a busca e os dois filtros disputam ~100px numa linha e o campo
   fica ilegível. No celular a busca ocupa a linha inteira e os filtros ficam
   lado a lado abaixo, em partes iguais. */
@media (max-width: 560px) {
  /* precisa vencer `.bar input[type=search] { width:150px }`, que e mais
     especifica que um seletor de id sozinho quando os dois valem igual */
  .bar input[type=search], #search {
    width: 100%; min-width: 0; flex: 1 0 100%; order: -1; font-size: 16px;
  }
  #search::-webkit-search-cancel-button { cursor: pointer; }
  .bar > select { flex: 1 1 0; min-width: 0; }
  .bar { gap: 8px; }
  #filterState, #orderBy { width: auto; }
  button { min-height: 40px; }
  #btnNew { width: 100%; min-height: 44px; }
  .row { flex-wrap: wrap; }
  .row .acts { width: 100%; }
  .row .acts button { flex: 1 1 0; min-height: 38px; font-size: 12px; }
  .row .cov { width: 40px; height: 40px; }
}

/* O formulario de token local so aparece quando o acesso e mesmo local.
   O backend segue recusando IP publico com 403; isso aqui e so para nao
   oferecer um caminho morto a quem abriu pelo tunel. */
#acessoLocal[hidden] { display: none !important; }

/* --- Validacao contra o Mercado Livre ------------------------------------- */
.ml-veredito{font-weight:700;margin:.3rem 0;font-size:1.05rem}
.ml-veredito.ok{color:#0a6b3d}
.ml-veredito.ruim{color:#a3341c}
.ml-stale{color:#8a6100;background:#fdfaf0;padding:.45rem .55rem;border-radius:8px;border-left:3px solid #d69a12}
.ml-resumo{display:grid;grid-template-columns:auto 1fr;gap:.1rem .55rem;margin:.5rem 0;font-size:.82rem}
.ml-resumo dt{color:#6b6b6b}
.ml-resumo dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ml-lista{list-style:none;margin:.35rem 0 0;padding:0;display:grid;gap:.4rem}
.ml-item{display:grid;gap:.12rem;padding:.5rem .55rem;border-radius:8px;background:#f6f6f4;border-left:3px solid #bbb}
.ml-item.bloqueante{border-left-color:#c0392b;background:#fdf4f2}
.ml-item.aviso{border-left-color:#d69a12;background:#fdfaf0}
.ml-item strong{font-size:.9rem}
.ml-campo{font-size:.7rem;color:#6b6b6b}
.ml-sugestao{font-size:.8rem;color:#444}
.ml-item .ghost{justify-self:start;margin-top:.15rem}
#mlBlocking h3{font-size:.84rem;margin:.6rem 0 .1rem;color:#a3341c}
#mlWarnings h3{font-size:.84rem;margin:.6rem 0 .1rem;color:#8a6100}
#mlPublish{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed #d5d5d0}
#mlPublish .btn[disabled]{opacity:.55}
/* Tela estreita: o resumo em uma coluna, sem cortar texto */
@media (max-width:420px){
  .ml-resumo{grid-template-columns:1fr;gap:0}
  .ml-resumo dt{margin-top:.35rem;font-weight:600}
  .ml-resumo dd{margin-left:0}
}


/* Botoes do topo: o de tela cheia e o de novo anuncio dividem a mesma linha.
   Nenhum dos dois e o modo "principal": sao opcoes lado a lado. */
.topActions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#btnFullscreen { background: transparent; border: 1px solid currentColor; }
#btnFullscreen[aria-pressed="true"] { font-weight: 700; }