/* Painel da loja — complementa style.css */
.link-btn { border: 0; background: none; padding: 0; color: var(--pedra); cursor: pointer; font-size: 15px; }
.link-btn:hover { color: var(--grafite); }
.adm__nav { align-items: center; }
@media (max-width: 640px) { .adm .topo__nav { display: flex; gap: 20px; } }

.btn--perigo { background: var(--alerta); color: #fff; }
.btn--perigo:hover { background: #912018; }

/* Login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login__card { width: min(400px, 100%); background: var(--papel); border-radius: var(--r-grande); padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; }
.login__card h1 { font-size: 32px; margin-top: 8px; }
.login__sub { margin: -10px 0 4px; color: var(--pedra); }
.login__voltar { text-align: center; font-size: 14px; color: var(--pedra); }

/* Painel */
.adm__main { max-width: 980px; margin: 0 auto; padding: 32px var(--gutter) 80px; }
.adm__cab { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.adm__cab h1 { font-size: clamp(32px, 4vw, 44px); }
.adm__cab p { margin: 6px 0 0; color: var(--pedra); }

.demo { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #FFF6E5; border: 1px solid #F1DDB4; border-radius: var(--r-medio); padding: 14px 18px; margin-bottom: 28px; font-size: 15px; }
.demo p { margin: 0; max-width: 62ch; }
.demo code { background: rgba(0, 0, 0, .06); padding: 1px 6px; border-radius: 6px; font-size: 14px; }

.importar { background: var(--papel); border-radius: var(--r-grande); padding: 40px; text-align: center; }
.importar p { color: var(--pedra); margin: 0 0 16px; }

.lista { list-style: none; margin: 0; padding: 0; background: var(--papel); border-radius: var(--r-grande); overflow: hidden; }
.lista:empty { display: none; }
.linha {
  display: grid; grid-template-columns: auto 64px minmax(0, 1fr) 150px 160px auto; gap: 16px; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--linha);
}
.linha:last-child { border-bottom: 0; }
.linha__ordem { display: flex; flex-direction: column; }
.linha__ordem button { border: 0; background: none; width: 28px; height: 22px; cursor: pointer; color: var(--pedra); border-radius: 6px; display: grid; place-items: center; }
.linha__ordem button:hover:not(:disabled) { background: var(--aluminio); color: var(--grafite); }
.linha__ordem button:disabled { opacity: .25; cursor: default; }
.linha__ordem svg { width: 16px; height: 16px; }
.linha img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--aluminio); }
.linha h3 { font-size: 16px; letter-spacing: -0.01em; line-height: 1.25; }
.linha p { margin: 2px 0 0; font-size: 14px; color: var(--pedra); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha .estrela { color: #B7791F; }

.preco-rapido { position: relative; }
.preco-rapido span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pedra); font-size: 14px; pointer-events: none; }
.preco-rapido input { width: 100%; padding: 10px 10px 10px 36px; border: 1px solid var(--linha); border-radius: 12px; background: var(--aluminio); font-size: 15px; font-variant-numeric: tabular-nums; }
.preco-rapido input:focus { outline: 2px solid var(--grafite); outline-offset: 0; background: var(--papel); }
.preco-rapido input.salvo { border-color: var(--whats); }

.linha select { width: 100%; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; background: var(--aluminio); font-size: 14px; }
.linha select[data-valor="esgotado"] { color: var(--alerta); }
.linha__acoes { display: flex; gap: 4px; }
.linha__acoes button { border: 0; background: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--pedra); }
.linha__acoes button:hover { background: var(--aluminio); color: var(--grafite); }
.linha__acoes button[data-excluir]:hover { color: var(--alerta); }
.linha__acoes svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
  .linha { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "foto info acoes" "preco preco status"; row-gap: 12px; }
  .linha__ordem { display: none; }
  .linha img { grid-area: foto; }
  .linha > div:nth-child(3) { grid-area: info; }
  .linha .preco-rapido { grid-area: preco; }
  .linha select { grid-area: status; width: 150px; }
  .linha__acoes { grid-area: acoes; }
}

/* Editor */
.editor { margin: auto; width: min(560px, calc(100vw - 32px)); max-height: 92dvh; background: var(--papel); border-radius: var(--r-grande); }
.editor form { display: flex; flex-direction: column; max-height: 92dvh; }
.editor__corpo { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.editor__duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .editor__duas { grid-template-columns: 1fr; } }
.editor__acoes { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--linha); }

.foto-campo { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.foto-campo img { width: 160px; height: 160px; object-fit: cover; border-radius: var(--r-medio); }
.foto-campo small { color: var(--pedra); font-size: 13px; }
.foto-campo__btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.foto-campo__btn span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px dashed #B9B9B5; border-radius: var(--r-pilula); cursor: pointer; font-size: 15px; }
.foto-campo__btn:hover span { background: var(--aluminio); }
.foto-campo__btn input:focus-visible + span { outline: 2px solid var(--grafite); outline-offset: 2px; }

.check { display: flex; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--grafite); }

.confirma { margin: auto; width: min(400px, calc(100vw - 32px)); background: var(--papel); border-radius: var(--r-grande); padding: 28px 0 0; }
.confirma h2 { font-size: 24px; padding: 0 24px; }
.confirma p { padding: 0 24px; color: var(--pedra); margin: 10px 0 20px; }
.logo--login { height: 64px; align-self: flex-start; }