/* =============================================================================
   Studio Temperare — camada visual v2
   -----------------------------------------------------------------------------
   Carregada DEPOIS de studio.css. Nao renomeia nada: so redefine tokens e
   restiliza classes existentes, para que os 107 IDs e os onclick que o JS usa
   continuem intactos. Reverter = remover o <link> desta folha.

   Direcao: estudio de fotografia de equipamento profissional.
   - Neutros frios de inox no lugar de gradientes.
   - A cor da marca so aparece na acao principal e no estado "voce esta aqui".
   - A galeria e uma folha de contato sobre cartao cinza: cada imagem em
     moldura branca com numero de quadro, como numa prova fotografica.
   ========================================================================== */

:root {
  --v2-bg: #ECEEF0;
  --v2-surface: #FFFFFF;
  --v2-stage: #E1E4E7;
  --v2-line: #D8DCE0;
  --v2-line-strong: #BFC5CB;
  --v2-ink: #15191D;
  --v2-muted: #5E6771;
  --v2-brand: #E2432D;
  --v2-brand-hover: #C93520;
  --v2-ok: #2B7A4E;
  --v2-focus: #E2432D;

  --v2-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --v2-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --v2-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Redefine os tokens antigos: tudo que ja usa var() herda sem tocar regra. */
  --primary: var(--v2-brand);
  --primary-dark: var(--v2-brand-hover);
  --primary-light: #FCE6E2;
  --secondary: var(--v2-muted);
  --secondary-light: var(--v2-stage);
  --accent: var(--v2-muted);
  --grad-brand: var(--v2-brand);
  --bg: var(--v2-bg);
  --card: var(--v2-surface);
  --text: var(--v2-ink);
  --muted: var(--v2-muted);
  --border: var(--v2-line);
  --input-bg: var(--v2-surface);
  --radius: 10px;
  --action-bg: var(--v2-surface);
  --action-text: var(--v2-ink);
  --action-border: var(--v2-line);
  --status-bg: var(--v2-stage);
  --status-text: var(--v2-ink);
  --shadow: 0 1px 2px rgba(21, 25, 29, .06);
  --shadow-lg: 0 8px 24px rgba(21, 25, 29, .10);
  --blur: none;
}

[data-theme="dark"] {
  --v2-bg: #111417;
  --v2-surface: #191D21;
  --v2-stage: #22272C;
  --v2-line: #2B3137;
  --v2-line-strong: #3A4148;
  --v2-ink: #E7EAED;
  --v2-muted: #929BA4;
  --v2-brand: #EE5A44;
  --v2-brand-hover: #F27461;
  --v2-ok: #4FAF7B;
  --primary-light: #3A1F1B;
}

/* --- base ----------------------------------------------------------------- */

body {
  background: var(--v2-bg) !important;
  color: var(--v2-ink);
  font-family: var(--v2-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .panel-title {
  font-family: var(--v2-display);
  font-variation-settings: "wdth" 88;
  letter-spacing: -.01em;
}

.glass {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 12px !important;
}

:focus-visible {
  outline: 2px solid var(--v2-focus) !important;
  outline-offset: 2px;
}

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

/* --- cabecalho ------------------------------------------------------------ */

header,
[data-theme="dark"] header {
  background: var(--v2-surface) !important;
  border-bottom: 1px solid var(--v2-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.logo-box {
  background: var(--v2-brand) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  width: 32px !important;
  height: 32px !important;
}

.logo h1 {
  font-size: 17px !important;
  font-weight: 700;
  font-variation-settings: "wdth" 80;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.logo h1 span { color: var(--v2-muted) !important; -webkit-text-fill-color: var(--v2-muted) !important; background: none !important; }

.nav-tab {
  background: transparent !important;
  color: var(--v2-muted) !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: none !important;
  font-weight: 500;
  padding: 18px 4px 16px !important;
  margin: 0 10px;
}
.nav-tab:hover { color: var(--v2-ink) !important; }
.nav-tab.active {
  color: var(--v2-ink) !important;
  border-bottom-color: var(--v2-brand) !important;
  background: transparent !important;
}
.nav-tab i { opacity: .7; }

/* --- botoes --------------------------------------------------------------- */

.btn-sm {
  background: var(--v2-surface) !important;
  color: var(--v2-ink) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 500;
  font-size: 13px !important;
}
.btn-sm:hover { border-color: var(--v2-line-strong) !important; background: var(--v2-bg) !important; }
.btn-sm i { color: var(--v2-muted); }

.btn-ghost-danger:hover { color: var(--v2-brand) !important; }

/* Preencher com IA: importante, mas nao e a acao principal da tela. */
.btn-smart {
  background: var(--v2-surface) !important;
  color: var(--v2-ink) !important;
  border: 1px dashed var(--v2-line-strong) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.btn-smart i { color: var(--v2-brand) !important; }
.btn-smart:hover { border-style: solid !important; }

/* --- coluna de configuracao ----------------------------------------------- */

aside { gap: 12px !important; padding-bottom: 0 !important; }

.panel { padding: 18px 18px 16px !important; }

.panel-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

/* As secoes sao uma sequencia real (fotos -> produto -> cenarios -> conversao),
   entao o numero fica — mas como indicacao discreta, nao como selo colorido. */
.step-num {
  background: transparent !important;
  color: var(--v2-muted) !important;
  border: 1px solid var(--v2-line-strong) !important;
  font-family: var(--v2-mono);
  font-size: 11px !important;
  font-weight: 500 !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.title-note {
  font-family: var(--v2-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--v2-muted);
  margin-left: 4px;
}

.field-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--v2-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

input[type="text"], input[type="number"], textarea, select,
[data-theme="dark"] select {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-line) !important;
  color: var(--v2-ink) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-family: var(--v2-body);
}
input[type="text"]:focus, textarea:focus, select:focus {
  border-color: var(--v2-ink) !important;
  box-shadow: none !important;
}
#sku, .qty-input, #savedScenarioQty { font-family: var(--v2-mono) !important; }

/* Selecao segmentada: o estado escolhido e escuro e neutro. A cor da marca
   fica reservada para a acao principal. */
.toggle-group, .seg-filter,
[data-theme="dark"] .toggle-group {
  background: var(--v2-bg) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important;
  padding: 3px !important;
}
.toggle-btn, .seg-btn {
  background: transparent !important;
  color: var(--v2-muted) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.toggle-btn.active, .seg-btn.active {
  background: var(--v2-ink) !important;
  color: var(--v2-surface) !important;
}

input[type="range"] { accent-color: var(--v2-ink); }
.prominence-value {
  font-family: var(--v2-mono);
  color: var(--v2-ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--v2-ink) !important;
}

.power-row {
  background: var(--v2-bg) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important;
}

.dropzone {
  background: var(--v2-bg) !important;
  border: 1.5px dashed var(--v2-line-strong) !important;
  border-radius: 10px !important;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--v2-ink) !important; }
.drop-icon { font-size: 20px; color: var(--v2-muted); }
.drop-title { font-size: 13px; font-weight: 600; color: var(--v2-ink); margin-top: 8px; }
.drop-hint { font-size: 12px; color: var(--v2-muted); margin-top: 2px; }

.cat-row {
  border-bottom: 1px solid var(--v2-line) !important;
  padding: 9px 0 !important;
  background: transparent !important;
}
.cat-row:last-child { border-bottom: none !important; }
.cat-info .emoji { filter: grayscale(1); opacity: .6; }
.cat-info .count { font-family: var(--v2-mono); color: var(--v2-muted) !important; }
.qty-btn {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-line) !important;
  color: var(--v2-ink) !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}

.total-bar {
  background: transparent !important;
  border-top: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  padding: 12px 0 0 !important;
}
.total-badge, .total-badge.total-warn {
  background: transparent !important;
  color: var(--v2-ink) !important;
  font-family: var(--v2-mono);
  font-size: 13px !important;
  border: none !important;
}

.autopilot-badge {
  background: var(--v2-bg) !important;
  border: 1px solid var(--v2-line) !important;
  color: var(--v2-ink) !important;
}

/* --- barra de acao: sempre visivel no rodape da coluna -------------------- */

.action-dock {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: 12px 12px 0 0;
  padding: 14px 14px 12px;
  margin-top: 4px;
  box-shadow: 0 -10px 24px -14px rgba(21, 25, 29, .35);
}

.btn-generate {
  background: var(--v2-brand) !important;
  color: #fff !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-family: var(--v2-display);
  font-variation-settings: "wdth" 88;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  padding: 14px !important;
}
.btn-generate:hover:not(:disabled) {
  background: var(--v2-brand-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-generate:disabled {
  background: var(--v2-stage) !important;
  color: var(--v2-muted) !important;
  opacity: 1 !important;
}

.dock-secondary {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.btn-quiet {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  background: transparent;
  color: var(--v2-muted);
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  font: 500 13px var(--v2-body);
  cursor: pointer;
}
.btn-quiet:hover { color: var(--v2-ink); border-color: var(--v2-line-strong); }
.btn-quiet-danger { color: var(--v2-brand); border-color: currentColor; }

.progress-wrap { margin-top: 10px; }
.progress-bar-bg { background: var(--v2-stage) !important; height: 4px !important; border-radius: 2px !important; }
.progress-bar-fill { background: var(--v2-ink) !important; border-radius: 2px !important; }
#progress-label, #progress-text { font-family: var(--v2-mono); }

/* --- galeria: folha de contato sobre cartao cinza ------------------------- */

.gallery { padding: 22px 24px !important; }

.gallery-header h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
}

.status-pill {
  background: transparent !important;
  color: var(--v2-muted) !important;
  border: 1px solid var(--v2-line) !important;
  font-family: var(--v2-mono);
  font-size: 12px !important;
  border-radius: 6px !important;
}

.sku-dashboard {
  background: var(--v2-bg) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.metric {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.metric:first-child { border-left: none !important; }
.metric strong {
  font-family: var(--v2-mono);
  font-weight: 500 !important;
  color: var(--v2-ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--v2-ink) !important;
}
.metric span { color: var(--v2-muted) !important; text-transform: none !important; letter-spacing: 0 !important; }

.gallery-grid {
  background: var(--v2-stage);
  border-radius: 10px;
  padding: 18px;
  gap: 18px !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  counter-reset: quadro;
}

/* Cada imagem vira uma prova em moldura branca, com legenda embaixo. */
.img-card {
  counter-increment: quadro;
  aspect-ratio: auto !important;
  background: var(--v2-surface) !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 8px 8px 30px !important;
  box-shadow: 0 1px 2px rgba(21, 25, 29, .10) !important;
  overflow: visible !important;
  transition: box-shadow .15s ease !important;
}
.img-card:hover {
  transform: none !important;
  box-shadow: 0 6px 18px rgba(21, 25, 29, .16) !important;
}
.img-card img {
  aspect-ratio: 1;
  height: auto !important;
  border-radius: 1px;
  display: block;
}
.img-card:hover img { transform: none !important; }

/* Numero do quadro, como numa folha de contato. Encoda a ordem de geracao. */
.img-card::before {
  content: counter(quadro, decimal-leading-zero);
  position: absolute;
  left: 9px;
  bottom: 8px;
  font: 500 11px var(--v2-mono);
  color: var(--v2-muted);
}

.img-card .overlay {
  opacity: 1 !important;
  background: none !important;
  inset: auto 8px 7px 34px !important;
  padding: 0 !important;
  display: block !important;
}
.img-card .overlay span {
  display: block;
  font: 500 12px var(--v2-body);
  color: var(--v2-ink) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none !important;
}

.img-card.skeleton {
  background: var(--v2-surface) !important;
  aspect-ratio: 1 !important;
}

.score-badge {
  top: 14px !important;
  right: 14px !important;
  font-family: var(--v2-mono);
  font-weight: 500 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.error-card { color: var(--v2-brand) !important; }

/* --- estado vazio e guia -------------------------------------------------- */

.system-manual,
[data-theme="dark"] .system-manual {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.empty-stage {
  background: var(--v2-stage);
  border-radius: 10px;
  padding: 56px 24px 48px;
  text-align: center;
}
.empty-frames {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 26px;
}
.empty-frames span {
  width: 76px;
  aspect-ratio: 1;
  background: var(--v2-surface);
  padding: 5px 5px 16px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(21, 25, 29, .10);
  position: relative;
}
.empty-frames span::after {
  content: "";
  position: absolute;
  inset: 5px 5px 16px;
  background: repeating-linear-gradient(135deg, var(--v2-stage) 0 6px, transparent 6px 12px);
  opacity: .7;
}
.empty-frames span:nth-child(2) { transform: translateY(-6px); }
.empty-stage h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.empty-stage p {
  color: var(--v2-muted);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.55;
}

.how-to {
  margin-top: 14px;
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  padding: 0 16px;
}
.how-to summary {
  cursor: pointer;
  padding: 13px 0;
  font-weight: 600;
  color: var(--v2-ink);
  list-style: none;
}
.how-to summary::-webkit-details-marker { display: none; }
.how-to summary::after { content: "+"; float: right; font-family: var(--v2-mono); color: var(--v2-muted); }
.how-to[open] summary::after { content: "−"; }
.how-to ol {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--v2-muted);
  line-height: 1.6;
}
.how-to li { margin-bottom: 6px; }
.how-to li strong { color: var(--v2-ink); }

/* --- modal: imagem a esquerda, decisao a direita -------------------------- */

.modal-bg { background: rgba(14, 17, 20, .62) !important; backdrop-filter: none !important; }

.modal-content {
  max-width: 1180px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px;
  position: relative;
  border-radius: 12px !important;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--v2-line);
  background: var(--v2-surface);
  color: var(--v2-ink);
  cursor: pointer;
}
.modal-close:hover { background: var(--v2-bg); }

.modal-img {
  background: var(--v2-stage) !important;
  max-height: calc(100vh - 40px) !important;
  padding: 24px !important;
}
.modal-img img { box-shadow: 0 2px 10px rgba(21, 25, 29, .15) !important; border-radius: 2px !important; }

.modal-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  padding: 58px 22px 22px !important;
  border-top: none !important;
  border-left: 1px solid var(--v2-line);
  overflow-y: auto;
  max-height: calc(100vh - 40px);
}

.quality-box { font-size: 13px !important; line-height: 1.5 !important; flex: 0 0 auto !important; }
.quality-box strong {
  display: block;
  font-family: var(--v2-display);
  font-variation-settings: "wdth" 88;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 6px;
}
#modal-quality { color: var(--v2-muted); }

.modal-decision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.btn-decide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 9px;
  font: 600 14px var(--v2-body);
  cursor: pointer;
  border: 1px solid var(--v2-line-strong);
  background: var(--v2-surface);
  color: var(--v2-ink);
}
.btn-approve { background: var(--v2-ok); border-color: var(--v2-ok); color: #fff; }
.btn-approve:hover { filter: brightness(1.08); }
.btn-reject:hover { border-color: var(--v2-brand); color: var(--v2-brand); }
.btn-decide:disabled { opacity: .55; cursor: not-allowed; }

/* Estados aplicados pelo JS depois de aprovar ou reprovar. */
.btn-decide.btn-approved-active { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--v2-ok); }
.btn-decide.btn-rejected-active { background: var(--v2-brand); border-color: var(--v2-brand); color: #fff; }

.modal-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px !important;
  flex: 0 0 auto !important;
  padding-top: 14px;
  border-top: 1px solid var(--v2-line);
}
.modal-actions .btn-sm { justify-content: center; white-space: nowrap; }
.like-btn.active, .like-btn.liked { color: var(--v2-brand) !important; }

#edit-panel {
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  padding: 12px;
  background: var(--v2-bg);
}
#edit-panel textarea { width: 100%; resize: vertical; margin-top: 4px; }
.edit-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
#btn-edit-send { background: var(--v2-ink); border-color: var(--v2-ink); color: var(--v2-surface); padding: 0 16px; }
#edit-status { font-size: 12px; color: var(--v2-muted); }
.edit-note { font-size: 12px; color: var(--v2-muted); margin-top: 8px; line-height: 1.45; }

.tech-details { margin-top: auto; font-size: 12px; color: var(--v2-muted); }
.tech-details summary { cursor: pointer; padding: 4px 0; }
.tech-details .prompt-text {
  display: block;
  max-height: 220px;
  overflow: auto;
  max-width: none !important;
  margin-top: 6px;
  padding: 10px;
  background: var(--v2-bg);
  border-radius: 6px;
  font: 11px/1.5 var(--v2-mono) !important;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Diretor de Cena: presente, mas sem disputar atencao ------------------ */

#ai-director-bubble {
  background: var(--v2-ink) !important;
  box-shadow: 0 4px 14px rgba(21, 25, 29, .25) !important;
  width: 50px !important;
  height: 50px !important;
}
#ai-director-bubble i { color: var(--v2-surface) !important; }
.bubble-pulse { display: none !important; }

/* --- responsivo ----------------------------------------------------------- */

@media (max-width: 900px) {
  .modal-content { grid-template-columns: 1fr; overflow-y: auto; }
  .modal-footer { border-left: none; border-top: 1px solid var(--v2-line); padding-top: 20px !important; max-height: none; }
  .modal-img { max-height: 60vh !important; }
}

@media (max-width: 760px) {
  aside { width: 100% !important; max-height: none !important; }
  .action-dock { border-radius: 12px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; padding: 10px; gap: 10px !important; }
  .modal-decision, .modal-actions { grid-template-columns: 1fr 1fr; }
}

/* --- ajustes da primeira revisao visual ----------------------------------- */

/* O CSS critico embutido reservava 220px para o titulo e empurrava o status
   para uma segunda linha sozinho. Seletor mais especifico vence o !important
   dele sem precisar editar o bloco inline. */
.gallery .gallery-header {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
}
.gallery .gallery-header .gallery-actions { flex-wrap: nowrap !important; }
@media (max-width: 1280px) {
  .gallery .gallery-header { grid-template-columns: 1fr !important; }
  .gallery .gallery-header .gallery-actions { flex-wrap: wrap !important; }
}

/* Tracejado lia como area de soltar arquivo, nao como botao. */
.btn-smart { border-style: solid !important; }

aside { overflow-x: hidden !important; }

/* Interruptores ligados ficam neutros: a cor da marca e da acao principal. */
input:checked + .switch,
.topic-toggle input:checked + span { background: var(--v2-ink) !important; }

/* =============================================================================
   v2.1 — estrutura, nao so estilo
   A primeira versao trocou cor e fonte mas manteve quatro caixas empilhadas,
   cada uma com caixas dentro. Aqui a coluna vira uma superficie unica e so o
   essencial fica a mostra.
   ========================================================================== */

/* --- coluna como uma superficie so ---------------------------------------- */

aside {
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  gap: 0 !important;
  padding: 0 !important;
}

aside > .glass.panel {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  padding: 18px 20px !important;
}

/* Interruptor e area de soltar perdem a caixa extra: menos molduras. */
.power-row {
  background: transparent !important;
  border: none !important;
  padding: 2px 0 10px !important;
}

/* --- produto -------------------------------------------------------------- */

.field-pair {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
}
.field-pair .autocomplete-field { margin-bottom: 0 !important; }

.product-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.product-actions .btn-smart { flex: 1 1 auto; justify-content: center; min-height: 38px; }
.btn-icon {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0 !important;
  justify-content: center;
}

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

.fine-tune {
  margin-top: 12px;
  border-top: 1px solid var(--v2-line);
}
.fine-tune summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 0 1px;
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fine-tune summary::-webkit-details-marker { display: none; }
.fine-tune summary::after {
  content: "+";
  font-family: var(--v2-mono);
  font-size: 14px;
  color: var(--v2-muted);
}
.fine-tune[open] summary::after { content: "−"; }
.fine-tune summary:hover { color: var(--v2-ink); }
.fine-tune-body { padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.fine-tune-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fine-tune-actions .btn-sm { justify-content: center; }
.field-row .field-label { display: block; margin-bottom: 5px; }

/* --- cenarios ------------------------------------------------------------- */

.btn-text {
  border: none !important;
  background: transparent !important;
  color: var(--v2-muted) !important;
  padding: 4px 6px !important;
  min-height: 0 !important;
}
.btn-text:hover { color: var(--v2-ink) !important; background: transparent !important; }

.cat-info .count {
  font-size: 11px !important;
  margin-left: 2px;
}
.cat-info .count::before { content: "· "; }

/* --- barra de acao integrada a coluna ------------------------------------- */

.action-dock {
  border: none;
  border-top: 1px solid var(--v2-line);
  border-radius: 0 0 12px 12px;
  margin-top: 0;
  padding: 14px 20px 16px;
}

/* --- menu "Mais" da galeria ----------------------------------------------- */

.tools-menu { position: relative; }
.tools-menu > summary { list-style: none; cursor: pointer; gap: 6px; }
.tools-menu > summary::-webkit-details-marker { display: none; }
.tools-menu > summary i { font-size: 10px; }
.tools-menu .menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 250px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 9px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--v2-ink);
  font: 500 13px var(--v2-body);
  cursor: pointer;
}
.menu-item i { width: 16px; color: var(--v2-muted); }
.menu-item:hover { background: var(--v2-bg); }
.menu-item-danger, .menu-item-danger i { color: var(--v2-brand); }

/* --- galeria: cabecalho mais leve ----------------------------------------- */

.gallery .gallery-header { margin-bottom: 16px !important; }
.gallery .gallery-header .gallery-actions { gap: 8px !important; }

/* A nota vai para a margem branca da prova, ao lado da legenda, em vez de uma
   faixa colorida sobre a foto. O CSS antigo prendia left:10px; sem soltar o
   left, o right adicionado acima esticava o selo pela largura inteira. */
.img-card .score-badge {
  top: auto !important;
  left: auto !important;
  right: 9px !important;
  bottom: 7px !important;
  padding: 0 !important;
  background: none !important;
  font: 500 11px var(--v2-mono) !important;
  color: var(--v2-muted) !important;
  box-shadow: none !important;
}
.img-card .score-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
  background: var(--v2-muted);
}
.img-card .score-good::before { background: var(--v2-ok); }
.img-card .score-mid::before { background: #C98A1B; }
.img-card .score-bad::before { background: var(--v2-brand); }

/* Legenda nao pode passar por baixo da nota. */
.img-card .overlay { right: 44px !important; }

/* =============================================================================
   v2.2 — status na prova, estado "gerando", cabecalho e upload mais leves
   ========================================================================== */

/* Aprovada: contorno verde em volta da prova, como o circulo de lapis que o
   fotografo faz na folha de contato para marcar a escolhida. */
.img-card.card-approved {
  border: none !important;
  outline: 2px solid var(--v2-ok) !important;
  outline-offset: 3px;
}
/* Reprovada: a prova fica apagada, mas continua legivel para comparar. */
.img-card.card-rejected { border: none !important; opacity: .55; }
.img-card.card-rejected img { filter: grayscale(.85) !important; }
.img-card.card-rejected:hover { opacity: .9; }

.card-status-badge {
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
  border: 2px solid var(--v2-surface) !important;
  box-shadow: none !important;
}
.status-badge-approved { background: var(--v2-ok) !important; color: #fff !important; }
.status-badge-rejected { background: var(--v2-brand) !important; color: #fff !important; }
.card-favorite-badge {
  top: 14px !important;
  left: 14px !important;
  background: var(--v2-surface) !important;
  color: var(--v2-brand) !important;
  box-shadow: none !important;
  border: 1px solid var(--v2-line) !important;
}

/* Gerando: moldura vazia com a mesma trama do estado vazio e um rotulo. */
.img-card.skeleton {
  animation: none !important;
  background: var(--v2-surface) !important;
  padding: 8px 8px 30px !important;
}
.img-card.skeleton::after {
  content: "gerando…";
  position: absolute;
  inset: 8px 8px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 12px var(--v2-mono);
  color: var(--v2-muted);
  background: repeating-linear-gradient(135deg, var(--v2-stage) 0 8px, transparent 8px 16px);
  background-size: 200% 200%;
  animation: v2-trama 2.4s linear infinite;
}
@keyframes v2-trama { to { background-position: 100% 100%; } }

.img-card.error-card {
  background: var(--v2-surface) !important;
  border: 1px dashed var(--v2-brand) !important;
  color: var(--v2-brand) !important;
}

/* Cabecalho: Tema e Sair sao utilitarios, nao merecem botao com moldura. */
.hdr-actions .btn-sm {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--v2-muted) !important;
}
.hdr-actions .btn-sm:hover { color: var(--v2-ink) !important; background: var(--v2-bg) !important; }

/* Upload: horizontal e mais baixo. Ocupava altura de tela sem informar mais. */
.dropzone {
  padding: 16px 14px !important;
  min-height: 0 !important;
}
#drop-placeholder {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  text-align: left;
}
#drop-placeholder .drop-icon { grid-row: span 2; font-size: 18px; }
#drop-placeholder .drop-title { margin-top: 0; }

/* --- Esmaga Concorrencia no mesmo padrao ----------------------------------- */

.crush-container { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

.crush-hero {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 6px !important;
}
.crush-hero-icon { display: none !important; }
.crush-hero-text h2 {
  font-family: var(--v2-display);
  font-variation-settings: "wdth" 88;
  font-size: 26px !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-text-fill-color: var(--v2-ink) !important;
  color: var(--v2-ink) !important;
}
.crush-hero-text p { color: var(--v2-muted) !important; max-width: 640px; }
.crush-hero-text p strong { color: var(--v2-ink) !important; font-weight: 600; }

.crush-step, .crush-success, .crush-images, .crush-data-card { padding: 18px 20px !important; }
.crush-step-header h3, .crush-success h3 { font-family: var(--v2-display); font-size: 15px !important; font-weight: 700 !important; }
.crush-hint { color: var(--v2-muted) !important; }

.crush-url-input-wrap {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.crush-url-input { font-family: var(--v2-mono) !important; font-size: 13px !important; }
.crush-url-icon { color: var(--v2-muted) !important; }

/* Buscar o anuncio e a acao principal desta tela: recebe a cor da marca. */
.crush-btn-scrape, .crush-btn-generate {
  background: var(--v2-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-family: var(--v2-display);
  font-variation-settings: "wdth" 88;
  font-weight: 700 !important;
  transform: none !important;
}
.crush-btn-scrape:hover, .crush-btn-generate:hover { background: var(--v2-brand-hover) !important; }
.crush-btn-glow, .crush-btn-glow * { display: none !important; }

.crush-success-icon {
  background: var(--v2-ok) !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}
.crush-img-main { background: var(--v2-stage) !important; border-radius: 8px !important; }
.crush-img-badge {
  background: var(--v2-surface) !important;
  color: var(--v2-ink) !important;
  border: 1px solid var(--v2-line) !important;
  box-shadow: none !important;
  font-family: var(--v2-mono);
  font-size: 11px !important;
}
.crush-textarea, .crush-textarea-title { background: var(--v2-bg) !important; }

/* =============================================================================
   Esmaga Concorrencia — ajuste com a tela vista de verdade
   A primeira passada foi feita sem uma captura limpa da aba; estes ajustes
   corrigem o que so apareceu depois.
   ========================================================================== */

.crush-container { max-width: 1080px; padding: 8px 0 40px; }

.crush-hero h2 {
  font-family: var(--v2-display);
  font-variation-settings: "wdth" 88;
  font-size: 28px;
  font-weight: 700;
  color: var(--v2-ink);
  margin-bottom: 6px;
}
.crush-hero p { color: var(--v2-muted); max-width: 660px; line-height: 1.55; }

.crush-step { padding: 18px 20px 14px !important; }
.crush-step .field-label { display: block; margin-bottom: 6px; }
.crush-step .crush-hint { font-size: 12px; margin-top: 8px; }

/* O input type=url ficava com a largura padrao do navegador (~200px) e com
   borda propria, desenhando uma caixa dentro da outra. A borda passa a ser so
   da caixa externa, e o campo ocupa toda ela. */
.crush-url-input-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}
.crush-url-input-wrap:focus-within { border-color: var(--v2-ink) !important; }
.crush-url-input {
  width: 100%;
  min-width: 0;
  height: 46px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  padding: 0 14px 0 40px !important;
  color: var(--v2-ink);
}
.crush-btn-scrape { min-width: 170px; height: 48px; padding: 0 20px !important; gap: 9px; }

/* Como funciona — so antes da busca. */
.crush-flow {
  list-style: none;
  counter-reset: passo;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 6px 0 0;
  padding: 0;
  border-top: 1px solid var(--v2-line);
}
.crush-flow li {
  counter-increment: passo;
  padding: 16px 20px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crush-flow li + li { padding-left: 20px; border-left: 1px solid var(--v2-line); }
.crush-flow li::before {
  content: counter(passo, decimal-leading-zero);
  font: 500 11px var(--v2-mono);
  color: var(--v2-muted);
  margin-bottom: 4px;
}
.crush-flow strong { font-weight: 600; color: var(--v2-ink); }
.crush-flow span { font-size: 13px; color: var(--v2-muted); line-height: 1.5; }
.crush-container:has(#scrapeResultTab[style*="flex"]) .crush-flow,
.crush-container:has(#scrapeResultTab[style*="block"]) .crush-flow { display: none; }

/* Resultado: confirmacao e acao no topo, dados embaixo. */
.crush-result { gap: 14px !important; animation: none !important; }
.crush-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px !important;
}
.crush-result-title { display: flex; align-items: center; gap: 12px; }
.crush-result-title h3 { font-family: var(--v2-display); font-size: 16px; font-weight: 700; color: var(--v2-ink); }
.crush-result-title .crush-hint { font-size: 13px; }
.crush-ok {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--v2-ok);
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.crush-btn-generate {
  width: auto !important;
  min-width: 220px;
  height: 46px;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px !important;
}

.crush-grid {
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start;
}
.crush-images { padding: 14px !important; gap: 10px !important; }
.crush-img-main {
  aspect-ratio: 1;
  padding: 14px;
  border-radius: 8px !important;
}
.crush-img-badge { top: 10px !important; left: 10px !important; padding: 3px 8px !important; border-radius: 4px !important; }
.crush-thumbs { gap: 8px !important; }
.crush-thumbs img {
  width: 58px !important;
  height: 58px !important;
  border-radius: 4px !important;
  border: 2px solid transparent !important;
  background: var(--v2-stage);
  transform: none !important;
}
.crush-thumbs img:hover, .crush-thumbs img.active { border-color: var(--v2-ink) !important; }

.crush-data { padding: 16px 18px !important; display: flex; flex-direction: column; gap: 14px; }
.crush-data-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.crush-data-card .field-label { display: block; margin-bottom: 5px; }
.crush-textarea, .crush-textarea-title {
  width: 100%;
  border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important;
  color: var(--v2-ink) !important;
  font: 13px/1.55 var(--v2-body) !important;
  padding: 10px 12px !important;
  resize: vertical;
}
.crush-textarea-title { font-weight: 600 !important; }

@media (max-width: 900px) {
  .crush-grid { grid-template-columns: 1fr !important; }
  .crush-flow { grid-template-columns: 1fr; }
  .crush-flow li + li { padding-left: 0; border-left: none; border-top: 1px solid var(--v2-line); }
  .crush-result-head { flex-direction: column; align-items: stretch; }
  .crush-btn-generate { width: 100% !important; }
  .crush-url-row { flex-direction: column; }
  .crush-btn-scrape { width: 100%; }
}

/* O topo era flex para acomodar um icone ao lado do texto; sem o icone,
   titulo e paragrafo ficavam lado a lado. */
.crush-hero { display: block !important; }
.crush-hero { margin-bottom: 6px; }
.crush-hero p { margin: 0; }