:root {
  --tinta: #16181d;
  --tinta-2: #565d6b;
  --tinta-3: #878e9c;
  --fundo: #f6f7f9;
  --papel: #ffffff;
  --borda: #dfe3e9;
  --acento: #1f5f8b;
  --acento-claro: #eaf2f8;
  --ok: #1a7f4b;
  --ok-fundo: #e7f5ed;
  --aviso: #9a6600;
  --aviso-fundo: #fdf3e0;
  --perigo: #b3261e;
  --perigo-fundo: #fdeceb;
  --raio: 8px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--acento); }
button { font: inherit; cursor: pointer; }

/* ---------- topo ---------- */

.topo { background: var(--papel); border-bottom: 1px solid var(--borda); }
.topo-in {
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 16px; min-height: 58px; flex-wrap: wrap;
}
.logo { font-weight: 700; color: var(--tinta); text-decoration: none; letter-spacing: .2px; }
.tag-plataforma, .tag-loja {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  padding: 3px 8px; border-radius: 999px;
}
.tag-plataforma { background: var(--acento); color: #fff; }
.tag-loja { background: var(--acento-claro); color: var(--acento); }
.topo nav { display: flex; gap: 4px; margin-left: 10px; }
.topo nav a {
  padding: 8px 12px; border-radius: var(--raio); text-decoration: none;
  color: var(--tinta-2); min-height: 40px; display: inline-flex; align-items: center;
}
.topo nav a:hover { background: var(--fundo); }
.topo nav a[aria-current="page"] { background: var(--acento-claro); color: var(--acento); font-weight: 600; }
.sair { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.quem { color: var(--tinta-3); font-size: 13.5px; }
.sair button {
  background: none; border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 7px 14px; color: var(--tinta-2); min-height: 38px;
}
.sair button:hover { background: var(--fundo); }

/* ---------- layout ---------- */

main.com-topo { max-width: 1120px; margin: 0 auto; padding: 26px 20px 60px; }
main.sem-topo { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.conteudo.estreito { max-width: 680px; }
.cabecalho { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
h1 { font-size: 24px; margin: 0; letter-spacing: -.2px; }
/* Título solto (sem .sub logo abaixo) precisa de respiro antes do formulário. */
.conteudo > h1 { margin-bottom: 20px; }
h2 { font-size: 16px; margin: 0 0 12px; }
.sub { color: var(--tinta-2); margin: 4px 0 22px; font-size: 14px; }
.volta { margin: 0 0 14px; font-size: 14px; }
.volta a { text-decoration: none; }
.vazio { color: var(--tinta-3); padding: 30px 0; }
.nota { color: var(--tinta-3); font-size: 13px; }
.de { color: var(--tinta-3); font-size: 13px; }

/* ---------- cartão de login ---------- */

.cartao-central {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 14px;
  padding: 34px; width: 100%; max-width: 400px;
}
.cartao-central h1 { margin-bottom: 2px; }
.cartao-central .sub { margin-bottom: 22px; }

/* ---------- formulários ---------- */

.form { display: flex; flex-direction: column; gap: 15px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--tinta-2); font-weight: 500; }
.form label.inline { flex-direction: row; align-items: center; gap: 8px; color: var(--tinta); }
.form input, .form select, .form textarea {
  font: inherit; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 12px; min-height: 42px; width: 100%;
}
.form input[type="checkbox"] { width: auto; min-height: 0; }
.form input:disabled { background: var(--fundo); color: var(--tinta-3); }
.form textarea { resize: vertical; min-height: 90px; }
.form small { color: var(--tinta-3); font-weight: 400; font-size: 12.5px; }
.form .prefixo { color: var(--tinta-3); font-size: 12.5px; font-weight: 400; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.tripla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.form.linha { flex-direction: row; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.form.linha label { flex: 1; min-width: 150px; }
fieldset.ajuste {
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px;
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
}
fieldset.ajuste legend { font-size: 13px; color: var(--tinta-2); padding: 0 6px; }
.acoes-form { display: flex; align-items: center; gap: 14px; margin-top: 4px; }

button.primario, .botao.primario {
  background: var(--acento); color: #fff; border: 1px solid var(--acento);
  border-radius: var(--raio); padding: 11px 20px; min-height: 44px; font-weight: 600;
}
button.primario:hover, .botao.primario:hover { filter: brightness(1.1); }
.form button:not(.primario):not(.perigo), .botao {
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 18px; min-height: 42px; color: var(--tinta); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
button.perigo {
  background: var(--perigo); color: #fff; border: 1px solid var(--perigo);
  border-radius: var(--raio); padding: 10px 18px; min-height: 42px; font-weight: 600;
}
.link-perigo { background: none; border: 0; color: var(--perigo); text-decoration: underline; padding: 4px; }

/* ---------- avisos ---------- */

.alerta { border-radius: var(--raio); padding: 11px 14px; margin: 0 0 18px; font-size: 14px; }
.alerta.erro { background: var(--perigo-fundo); color: var(--perigo); }
.alerta.ok { background: var(--ok-fundo); color: var(--ok); }
.erro-envio { background: var(--perigo-fundo); color: var(--perigo); padding: 10px 12px; border-radius: var(--raio); font-size: 14px; }

.pilula { font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.pilula.ok { background: var(--ok-fundo); color: var(--ok); }
.pilula.off { background: #eceef1; color: var(--tinta-2); }
.pilula.aviso { background: var(--aviso-fundo); color: var(--aviso); }

/* ---------- blocos ---------- */

.bloco {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px;
  padding: 20px 22px; margin-top: 20px;
}
.bloco.destaque { border-color: var(--acento); background: var(--acento-claro); }
.bloco.perigo { border-color: #f0cdcb; }
.bloco.perigo h2 { color: var(--perigo); }
.copiavel {
  width: 100%; font-family: ui-monospace, monospace; font-size: 13px;
  padding: 11px 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--papel);
}
.lista { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
.lista li { font-size: 14px; }

/* ---------- tabelas ---------- */

.tabela {
  width: 100%; border-collapse: collapse; background: var(--papel);
  border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; font-size: 14px;
}
.tabela th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tinta-3); padding: 11px 14px; border-bottom: 1px solid var(--borda); font-weight: 600;
}
.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .acoes { text-align: right; }
.tabela.mini { margin-top: 16px; }
.tabela .detalhe { color: var(--tinta-3); font-family: ui-monospace, monospace; font-size: 12px; max-width: 320px; overflow-wrap: anywhere; }
.endereco { display: block; font-size: 12.5px; color: var(--tinta-3); text-decoration: none; }
.endereco:hover { text-decoration: underline; }
code { font-family: ui-monospace, monospace; font-size: 12.5px; background: var(--fundo); padding: 2px 6px; border-radius: 4px; }

/* ---------- catálogo ---------- */

.filtros { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.filtros input, .filtros select {
  font: inherit; padding: 9px 12px; min-height: 42px;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--papel);
}
.filtros input { flex: 1; min-width: 200px; }
.filtros button, .filtros .botao {
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 9px 16px; min-height: 42px; text-decoration: none; color: var(--tinta);
  display: inline-flex; align-items: center;
}

.grade-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 18px 14px; }
.peca-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
  background: var(--papel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px; transition: border-color .12s, box-shadow .12s;
}
.peca-card:hover { border-color: var(--acento); box-shadow: 0 2px 10px rgba(31, 95, 139, .1); }
.peca-foto {
  position: relative; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden;
  background: var(--fundo); display: grid; place-items: center;
}
.peca-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sem-foto { color: var(--tinta-3); font-size: 12.5px; }
.n-fotos {
  position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.65); color: #fff;
  font-size: 11px; padding: 2px 7px; border-radius: 5px;
}
.peca-card strong { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.peca-meta { font-size: 12.5px; color: var(--tinta-3); }
.peca-card .pilula { align-self: flex-start; }

/* ---------- fotos da peça ---------- */

.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.fotos figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fotos img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--borda); display: block;
}
.fotos figcaption { text-align: center; }
.enviar-foto {
  aspect-ratio: 3/4; border: 2px dashed var(--borda); border-radius: 8px;
  display: grid; place-items: center; cursor: pointer; color: var(--acento);
  font-size: 13.5px; text-align: center; padding: 10px;
}
.enviar-foto:hover { border-color: var(--acento); background: var(--acento-claro); }
.enviar-foto.enviando { opacity: .5; pointer-events: none; }

/* ---------- etiquetas e categorias ---------- */

.filtros-adm { margin-bottom: 22px; }
.facetas-adm { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.faceta-adm {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--papel); padding: 8px 12px; min-width: 150px;
}
.faceta-adm summary { cursor: pointer; font-size: 13.5px; color: var(--tinta-2); font-weight: 500; }
.faceta-adm[open] summary { margin-bottom: 9px; }

.opcoes-adm { display: flex; flex-wrap: wrap; gap: 7px; }

.chip-check {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--borda); border-radius: 999px;
  padding: 0 12px; min-height: 38px; font-size: 13.5px;
  background: var(--papel); cursor: pointer; color: var(--tinta-2);
}
.chip-check:hover { border-color: var(--tinta-3); }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check:has(input:checked) {
  border-color: var(--acento); background: var(--acento-claro);
  color: var(--acento); font-weight: 600;
}
.chip-check:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.chip-check .amostra {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.2); flex: none;
}

.bloco-tags {
  border: 1px solid var(--borda); border-radius: 12px;
  padding: 18px 20px; background: var(--papel);
}
.cabecalho-tags { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cabecalho-tags h2 { margin: 0; }
.cabecalho-tags a { font-size: 13.5px; }

fieldset.tipo-tag { border: 0; padding: 0; margin: 0 0 16px; }
fieldset.tipo-tag:last-child { margin-bottom: 0; }
fieldset.tipo-tag legend {
  padding: 0; font-size: 12.5px; font-weight: 600; color: var(--tinta-2);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}
fieldset.tipo-tag .limite {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--tinta-3); margin-left: 8px; font-size: 12px;
}

.peca-tags {
  font-size: 11.5px; color: var(--tinta-3); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.lista-editavel { display: flex; flex-direction: column; gap: 8px; }
.linha-editavel, .tag-editavel {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 8px 12px;
}
.linha-editavel input[name=nome] { flex: 1; min-width: 140px; }
.linha-editavel input, .tag-editavel input, .cabecalho-grupo input {
  font: inherit; padding: 8px 10px; min-height: 38px;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--papel);
}
.linha-editavel .mini, .tag-editavel .mini, .cabecalho-grupo .mini { width: 78px; }
.linha-editavel button, .tag-editavel button, .cabecalho-grupo button {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 8px 14px; min-height: 38px;
}
.linha-editavel .link-perigo, .tag-editavel .link-perigo, .cabecalho-grupo .link-perigo { border: 0; background: none; }
.linha-editavel .inline, .cabecalho-grupo .inline {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-2);
}

.grupo-tag { padding-bottom: 16px; }
.cabecalho-grupo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--borda); margin-bottom: 14px;
}
.cabecalho-grupo input[name=nome] { flex: 1; min-width: 130px; font-weight: 600; }
.campo-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tinta-3); }
.tags-do-grupo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag-editavel { padding: 6px 10px; gap: 6px; }
.tag-editavel input[name=nome] { width: 130px; }
.tag-editavel input[type=color] { width: 34px; padding: 2px; min-height: 34px; }
.tag-editavel .de { min-width: 14px; text-align: center; }
.nova-tag { margin: 0; }

/* ---------- gestão de acesso ---------- */

.usuario {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--papel); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.usuario.inativo { background: var(--fundo); }
.usuario .linha-editavel { border: 0; padding: 0; background: none; }
.usuario .linha-editavel input { flex: 1; min-width: 140px; }
.usuario-acoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--borda);
}
.usuario-acoes button {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 7px 13px; min-height: 36px; font-size: 13.5px;
}
.usuario-acoes .link-perigo { border: 0; background: none; margin-left: auto; }
.usuario-acoes .de { margin-right: auto; }

/* ---------- logo e banner ---------- */

.marca-campo {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--borda);
}
.marca-campo:last-of-type { border-bottom: 0; padding-bottom: 0; }
.marca-previa {
  flex: none; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo); display: grid; place-items: center; overflow: hidden;
}
.marca-previa.logo { width: 96px; height: 96px; }
.marca-previa.capa { width: 200px; height: 96px; }
.marca-previa img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.marca-acoes { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.marca-acoes strong { font-size: 14px; }
.marca-acoes small { color: var(--tinta-3); font-size: 12.5px; }
.enviar-marca { cursor: pointer; margin-top: 4px; }
.enviar-marca.enviando { opacity: .5; pointer-events: none; }

/* ---------- avaliações ---------- */

.resumo-notas {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 12px; padding: 18px 22px; margin-bottom: 20px;
}
.nota-media { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nota-media strong { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.nota-media small { color: var(--tinta-3); font-size: 13px; }
.resumo-notas a.pilula { margin-left: auto; text-decoration: none; }

.estrelas { color: #d99a00; letter-spacing: 2px; font-size: 16px; white-space: nowrap; }
.estrelas .apagadas { color: var(--borda); }

.abas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; }
.abas a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  color: var(--tinta-2); border: 1px solid var(--borda); font-size: 13.5px;
  min-height: 40px; display: inline-flex; align-items: center; background: var(--papel);
}
.abas a[aria-current="page"] { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }

.lista-avaliacoes { display: flex; flex-direction: column; gap: 12px; }
.avaliacao {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: 12px; padding: 16px 18px;
}
.avaliacao.pendente { border-left: 3px solid var(--aviso); }
.avaliacao.recusada { opacity: .65; }
.avaliacao header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.avaliacao header strong { font-size: 14.5px; }
.avaliacao header time { color: var(--tinta-3); font-size: 12.5px; }
.avaliacao header .pilula { margin-left: auto; }
.avaliacao p { margin: 0 0 12px; font-size: 14px; color: var(--tinta-2); white-space: pre-line; }
.avaliacao footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.avaliacao footer button {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 8px 16px; min-height: 38px;
}
.avaliacao footer button.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.avaliacao footer .link-perigo { border: 0; background: none; margin-left: auto; }

@media (max-width: 720px) {
  .marca-campo { align-items: flex-start; }
  .marca-previa.capa { width: 140px; height: 78px; }
  .marca-previa.logo { width: 78px; height: 78px; }
  .resumo-notas a.pilula { margin-left: 0; }
  .avaliacao footer .link-perigo { margin-left: 0; }
}

@media (max-width: 720px) {
  .dupla, .tripla { grid-template-columns: 1fr; }
  /* O cadastro é feito no celular, na loja: duas colunas mostram o dobro
     de peças por tela e o card continua clicável com folga. */
  .grade-admin { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .fotos { grid-template-columns: repeat(2, 1fr); }
  fieldset.ajuste { grid-template-columns: 1fr; }
  .topo-in { min-height: 52px; padding: 8px 16px; }
  .topo nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .sair { margin-left: auto; }
  main.com-topo { padding: 18px 16px 50px; }
  .tabela .detalhe { display: none; }
}