/* ---------------------------------------------------------------------------
   Gricki Ofertas — sistema visual
   Escuro (padrão das outras ferramentas do Gabriel) com os acentos da marca
   Gricki: verde da campanha, e azul/vermelho/amarelo das faixas de preço, que
   aqui servem pra dar leitura imediata do que é preço cheio, preço em destaque
   e condição — os mesmos códigos de cor do vídeo final.

   Revisão 22/08: o Gabriel achou a plataforma feia. O que estava errado era
   estrutural, não cosmético — tudo era a MESMA caixa cinza sem hierarquia, o
   conteúdo esticava a tela inteira deixando vãos enormes no meio das linhas,
   os campos eram os nativos do navegador (destoando do resto), e havia
   MAIÚSCULA em todo rótulo, o que vira ruído em vez de organizar.
--------------------------------------------------------------------------- */
:root {
  --bg: #0a0c0d;
  --bg-glow: #10161a;
  --surface: #14191c;
  --surface-2: #1a2125;
  --surface-3: #222b30;
  --border: #262f34;
  --border-soft: #1c2429;
  --border-strong: #33403f;

  --text: #eaf0f2;
  --text-2: #b6c2c7;
  --muted: #869399;
  --muted-2: #5f6b71;

  --green: #63c00a;
  --green-bright: #86e01f;
  --green-deep: #3c7a05;
  --blue: #5b78ff;
  --red: #ef4444;
  --yellow: #fbbf24;

  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow: 0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(99,192,10,.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  /* brilho sutil no topo: dá profundidade e ancora o cabeçalho, em vez de
     uma chapa cinza uniforme da borda até o rodapé */
  background:
    radial-gradient(1200px 380px at 50% -160px, var(--bg-glow), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* largura máxima: sem isso, numa tela larga a linha de oferta espalhava os
     controles a 700px de distância dos dados, e a leitura se perdia */
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 26px 80px;
}

a { color: var(--green-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(99,192,10,.3); }

/* ---------- cabeçalho ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.brand {
  font-size: 21px; font-weight: 750; letter-spacing: -.4px;
  display: flex; align-items: center;
}
.brand span { color: var(--green-bright); }
.sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.sub b { color: var(--text-2); font-weight: 600; }
.back {
  color: var(--muted); font-size: 19px; line-height: 1;
  margin-right: 10px; text-decoration: none;
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: .15s;
}
.back:hover { color: var(--text); background: var(--surface-3); text-decoration: none; }

/* ---------- superfícies ---------- */
.card {
  background: linear-gradient(180deg, var(--surface), #12171a);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.card-flush { padding: 0; overflow: hidden; }
/* Título de seção: minúsculo e discreto. Antes era CAIXA ALTA com
   letter-spacing em toda seção, o que competia com o conteúdo. */
.card-title {
  font-size: 13px; font-weight: 700; letter-spacing: -.1px;
  color: var(--text); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.card-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: var(--green); flex-shrink: 0;
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(180deg, var(--green-bright), var(--green));
  color: #0a1a02;
  border: 1px solid var(--green-deep); border-radius: var(--radius-sm);
  padding: 10px 17px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: .15s;
  white-space: nowrap; box-shadow: var(--shadow-sm);
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }
.btn-ghost {
  background: var(--surface-2); color: var(--text-2);
  border-color: var(--border); box-shadow: none;
}
.btn-ghost:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; }

/* ---------- campos ---------- */
input[type=text], input[type=password], input[type=number], select, textarea {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  color: var(--text); font-size: 13.5px; font-family: inherit;
  transition: .15s;
  /* sem isto o <select> assume a largura da opção mais longa e estoura o
     container — no celular isso empurrava a página inteira pro lado */
  max-width: 100%;
}
label.field > select { width: 100%; }
input::placeholder { color: var(--muted-2); }
input:hover, select:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green); box-shadow: var(--ring);
}

/* select nativo destoava (seta e fundo do sistema, claro no tema escuro) */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23869399' d='M6 8.5 1.8 4.3l.9-.9L6 6.7l3.3-3.3.9.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px;
  padding-right: 32px; cursor: pointer;
}

/* input[type=file] nativo mostrava um botão claro "Choose File" */
input[type=file] {
  color: var(--muted); font-size: 13px;
  background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px; width: 100%;
  cursor: pointer; transition: .15s;
}
input[type=file]:hover { border-color: var(--green); color: var(--text-2); }
input[type=file]::file-selector-button {
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 12px; margin-right: 12px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: .15s;
}
input[type=file]::file-selector-button:hover { background: var(--green); color: #0a1a02; border-color: transparent; }

label.field { display: block; }
label.field .lbl {
  font-size: 12px; color: var(--muted); margin-bottom: 6px;
  display: block; font-weight: 500;
}

/* campo que parece texto até receber foco — edição sem poluir a leitura */
.inline-edit {
  background: transparent; border: 1px solid transparent;
  border-radius: 7px; padding: 3px 7px; color: inherit;
  font: inherit; font-weight: 700; width: 78px;
  transition: .14s;
}
.inline-edit:hover { background: var(--surface-2); border-color: var(--border); }
.inline-edit:focus { background: var(--surface-2); border-color: var(--green); outline: none; box-shadow: var(--ring); }
.inline-edit.wide { width: 100%; font-weight: 500; }
.saved { animation: flash .8s ease; }
@keyframes flash { 0% { background: rgba(99,192,10,.35); } 100% { background: transparent; } }

/* ---------- selos ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .1px;
  white-space: nowrap; border: 1px solid transparent;
}
/* pontinho: dá leitura de status mesmo de relance, sem depender só da cor */
.pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.pill-plain::before { display: none; }
.pill-green { background: rgba(99,192,10,.13); color: #9be34d; border-color: rgba(99,192,10,.25); }
.pill-yellow { background: rgba(251,191,36,.12); color: #fbbf24; border-color: rgba(251,191,36,.24); }
.pill-red { background: rgba(239,68,68,.13); color: #ff9494; border-color: rgba(239,68,68,.26); }
.pill-gray { background: var(--surface-3); color: var(--muted); border-color: var(--border); }

/* ---------- progresso ---------- */
.progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
.progress-num { font-size: 26px; font-weight: 750; letter-spacing: -.6px; }
.progress-num small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.bar { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--green-deep), var(--green-bright));
  border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ---------- lista de ofertas ---------- */
/* recolhida por padrão quando o doc não tem pendência (30/08) — ver
   toggle "ver todas"/"ver só as pendentes" no topo da lista, em batch.html */
#lista-ofertas.recolhido .offer:not(.pending) { display: none; }
.offer {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  transition: background .15s;
}
.offer:last-child { border-bottom: none; }
.offer:hover { background: rgba(255,255,255,.02); }
.offer.pending { border-left-color: var(--red); background: rgba(239,68,68,.045); }

.thumb {
  width: 66px; height: 66px; flex-shrink: 0; object-fit: contain;
  background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
  padding: 4px;
}
.thumb-empty {
  width: 66px; height: 66px; flex-shrink: 0;
  background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2); font-size: 22px;
}
.offer-main { flex: 1; min-width: 0; }
.offer-name { font-weight: 650; font-size: 14.5px; margin-bottom: 6px; letter-spacing: -.1px; }
.offer-file { font-size: 11.5px; color: var(--muted-2); margin-top: 6px; }

.prices { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.price-tag { display: inline-flex; align-items: center; gap: 4px; }
.price-tag .cur { color: var(--muted-2); font-size: 11px; font-weight: 600; }
.price-blue { color: #9fb0ff; }
.price-red { color: #ff9b9b; }
.cond { color: var(--yellow); font-size: 12.5px; }

/* Controles agrupados num bloco só, encostados à direita: antes ficavam
   soltos, e numa tela larga abriam um vão enorme no meio da linha. */
.controls {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 8px 10px;
}
.ctl { display: flex; align-items: center; gap: 7px; }
.ctl .lbl {
  font-size: 11px; color: var(--muted-2); font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
.ctl select { padding: 6px 26px 6px 9px; font-size: 12.5px; background-position: right 8px center; }
.seg { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg button {
  background: transparent; border: none; color: var(--muted);
  padding: 6px 11px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: .14s;
}
.seg button:hover { color: var(--text); background: rgba(255,255,255,.04); }
.seg button.on { background: var(--green); color: #0a1a02; }

/* arquivo capturado de grupo de WhatsApp monitorado (03/09) — alternativa
   ao upload manual em Spots/index; ".on" marca a captura escolhida */
.capturas-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.captura-btn { text-align: left; }
.captura-btn.on { border-color: var(--green); color: var(--green); }

/* seletor de produtos por emissora do comercial de locutor (28/08) — chip
   clicável, com a ordem de fala escolhida virando um numerozinho */
.locutor-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.locutor-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: .14s;
}
.locutor-chip:hover { color: var(--text); border-color: var(--green); }
.locutor-chip.on { background: var(--green); color: #0a1a02; border-color: var(--green); }
.locutor-chip-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.25);
  font-size: 10.5px; font-weight: 800;
}
.locutor-chip:not(.on) .locutor-chip-badge { display: none; }

/* checkbox "o que mais gerar deste doc" (30/08) — revela o corpo do formato
   (picker/upload/gerar) só quando marcado, em vez de tudo sempre visível */
.extra-format-block {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 10px; background: rgba(255,255,255,.015);
}
.extra-format-block:last-child { margin-bottom: 0; }
.extra-format-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 600; font-size: 14px;
}
.extra-format-toggle input[type=checkbox] { margin: 0; }
.extra-format-body { margin-top: 12px; padding-left: 26px; }
/* rótulo do formato bem colado no vídeo dele — pedido do Gabriel (30/08):
   "um layout bonitinho pra eu ver qual vídeo é qual" depois de gerar vários
   formatos de uma vez */
.video-caption {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); margin-bottom: 6px;
}

/* caixa de seleção e controle deslizante ainda vinham no visual do sistema
   (azul claro), destoando do tema escuro */
input[type=checkbox], input[type=radio] {
  accent-color: var(--green);
  width: 16px; height: 16px; cursor: pointer;
}
input[type=range] {
  accent-color: var(--green);
  height: 4px; cursor: pointer; background: transparent;
}

/* botão de abrir/fechar os controles da oferta — só aparece no celular
   (a regra que o liga está na media query lá embaixo; esta precisa vir ANTES
   dela, senão sobrescreve e o botão some no telefone também) */
.offer-toggle { display: none; }

/* ---------- lista de documentos (home) ----------
   Era uma <table> de 4 colunas fixas — no celular, "situação" e "ações"
   brigavam pelo pouco espaço que sobrava depois de esconder a coluna de
   data, e o texto do status saía cortado na borda da tela (achado com
   screenshot de verdade a 390px). `flex-wrap` deixa cada linha quebrar em
   2-3 níveis sozinha conforme a largura disponível, sem cortar nada nunca. */
.doc-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
  transition: background .14s;
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: rgba(255,255,255,.022); }
.doc-row-principal { flex: 1 1 220px; min-width: 0; }
.doc-row-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.doc-row-acoes { display: flex; gap: 8px; margin-left: auto; }

/* ---------- grade de fotos ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.grid-item {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px; text-align: center;
  cursor: pointer; transition: .16s;
}
.grid-item:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow); }
.grid-item.current { border-color: var(--green); box-shadow: var(--ring); }
.grid-item img { width: 100%; height: 92px; object-fit: contain; background: #fff; border-radius: 7px; margin-bottom: 8px; padding: 4px; }
.grid-item .fname { font-size: 10.5px; color: var(--muted); word-break: break-word; line-height: 1.4; }

/* ---------- diversos ---------- */
.empty { color: var(--muted-2); text-align: center; padding: 40px 20px; font-size: 13.5px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.note { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
video { width: 100%; max-width: 820px; background: #000; border-radius: var(--radius); border: 1px solid var(--border); display: block; box-shadow: var(--shadow); }
pre {
  white-space: pre-wrap; color: var(--muted); font-size: 12px; line-height: 1.65;
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 14px; max-height: 340px; overflow: auto;
}

.spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--surface-3); border-top-color: var(--green);
  border-radius: 50%; animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 11px 22px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow); opacity: 0;
  transition: .28s cubic-bezier(.4,0,.2,1); pointer-events: none; z-index: 50;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- painel de diagramação ---------- */
.layout-panel {
  padding: 14px 18px 18px 84px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, .02);
}
.layout-panel .lbl {
  font-size: 11.5px; color: var(--muted); font-weight: 500;
  text-transform: none; letter-spacing: 0; display: block; margin-bottom: 9px;
}
.bars { display: flex; flex-direction: column; gap: 7px; max-width: 320px; margin-bottom: 10px; }
.bar-chip {
  padding: 9px 13px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 700; color: #fff;
  cursor: grab; user-select: none; border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-sm); transition: .14s;
}
.bar-chip:hover { filter: brightness(1.12); }
.bar-chip:active { cursor: grabbing; }
.bar-blue { background: linear-gradient(180deg, #3540c4, #262d92); }
.bar-yellow { background: linear-gradient(180deg, #c69d0c, #9c7c08); }
.bar-red { background: linear-gradient(180deg, #c62828, #921c1c); }
input.offer-name { font-weight: 650; font-size: 14.5px; margin-bottom: 6px; }

/* ---------- conferência ---------- */
.check-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.check-row:last-of-type { border-bottom: none; }
.check-name { font-weight: 600; font-size: 13px; min-width: 190px; }

/* ---------------------------------------------------------------------------
   Celular. A lista de ofertas é uma linha larga (foto + dados + controles) que
   no telefone se espremia e sobrepunha o texto; aqui ela vira coluna.
--------------------------------------------------------------------------- */
@media (max-width: 720px) {
  body { padding: 14px 12px 48px; font-size: 13.5px; }

  /* "Sair" ocupava a largura inteira e virava o elemento mais chamativo da
     tela; agora fica pequeno, à direita do título, como no computador. */
  .topbar {
    flex-direction: row; align-items: flex-start;
    gap: 10px; margin-bottom: 16px; padding-bottom: 14px;
  }
  .topbar { flex-wrap: wrap; }
  .topbar > div:first-child { min-width: 0; flex: 1; }
  /* telas com mais de um botão de ação (ex: diagramação, com "Voltar ao
     automático" + "Salvar") empilhavam por cima do título; agora as ações
     descem pra uma linha própria, largura cheia */
  .topbar > .row { flex: 1 1 100%; }
  .topbar > .row > .btn { flex: 1; }
  .brand { font-size: 16px; }
  .brand > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sub { font-size: 11.5px; }
  .topbar .btn { flex-shrink: 0; }

  .card { padding: 14px; border-radius: var(--radius); margin-bottom: 12px; }
  .card-title { font-size: 12.5px; margin-bottom: 10px; }

  /* Antes a foto ficava numa linha só dela e cada oferta passava de 370px de
     altura — 10 ofertas viravam uma página de 4700px. Agora foto e dados
     dividem a primeira linha, e os controles vêm embaixo. */
  .offer {
    display: grid; grid-template-columns: auto 1fr;
    gap: 10px 12px; padding: 12px; align-items: start;
  }
  .thumb, .thumb-empty { width: 54px; height: 54px; grid-row: 1; grid-column: 1; }
  .offer-main { grid-row: 1; grid-column: 2; min-width: 0; }
  /* recolhidos por padrão: a lista fica scaneável e você abre só a oferta
     que precisa corrigir (era isso que deixava o celular ruim de usar —
     6 controles abertos em toda oferta, sempre) */
  .controls {
    grid-column: 1 / -1;
    display: none; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 10px; align-items: center;
  }
  .offer.aberto .controls { display: grid; }
  .offer-toggle {
    display: block; grid-column: 1 / -1;
    background: var(--surface-2); color: var(--text-2);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 9px 12px; font-family: inherit; font-size: 12.5px; font-weight: 650;
    cursor: pointer; min-height: 40px;
  }
  .offer.aberto .offer-toggle { background: var(--surface-3); color: var(--text); }
  .offer-name { font-size: 13.5px; margin-bottom: 4px; }
  .offer-file { font-size: 10.5px; margin-top: 4px; word-break: break-word; }
  .prices { gap: 6px 12px; font-size: 12.5px; }

  /* alvo de toque confortável (mínimo recomendado ~44px) */
  .controls .btn, .controls select { min-height: 42px; }
  .ctl { justify-content: space-between; }
  .ctl select { flex: 1; min-width: 0; }
  .seg { flex: 1; }
  .seg button { flex: 1; padding: 11px 0; font-size: 13px; }
  .controls .pill { justify-self: start; }
  /* "trocar" e "diagramação" ficam lado a lado, ocupando a linha */
  .controls > .btn { grid-column: span 1; }

  /* preços numa linha só: com 84px cada campo + os rótulos, a linha
     quebrava e cada oferta ficava bem mais alta do que precisava */
  /* campos editáveis também precisam ser tocáveis: com 28px o dedo errava */
  .inline-edit { width: 66px; padding: 8px 7px; min-height: 38px; }
  .inline-edit.wide { width: 100%; }
  select { min-height: 44px; }
  input[type=text], input[type=password] { min-height: 44px; }
  /* caixa de seleção e deslizante nativos ficam minúsculos no telefone */
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  input[type=range] { height: 26px; }
  .prices .cur { font-size: 10px; }
  .cond { font-size: 11.5px; line-height: 1.35; }

  /* formulários e ações ocupam a largura toda */
  .row { gap: 8px; }
  .row > form, .row > input[type=text] { flex: 1 1 100%; }
  .row > input[type=text] { width: 100% !important; min-width: 0 !important; }
  .btn { justify-content: center; min-height: 42px; }
  .btn-sm { min-height: 38px; }

  /* conferência: nome e selo na MESMA linha (antes cada um numa) */
  .check-row { gap: 8px; padding: 8px 0; }
  .check-name { min-width: 0; flex: 1; font-size: 12.5px; }

  .progress-num { font-size: 21px; }
  .stats-bar { flex-wrap: wrap; gap: 12px 18px; padding: 14px; }
  .stats-bar .spacer { display: none; }
  .stats-bar form, .stats-bar > a { flex: 1; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .grid-item img { height: 74px; }
  .grid-item .fname { font-size: 9.5px; }

  .layout-panel { padding: 12px 12px 14px; }

  .doc-row { padding: 12px 14px; }
  .doc-row-acoes { flex: 1 1 100%; margin-left: 0; }
  .doc-row-acoes .btn { flex: 1; }
  video { max-width: 100%; }
}

/* ---------- barra de estatísticas (home) ----------
   O banco de fotos estava espremido na mesma linha do texto de ajuda do
   upload; virou uma faixa própria, com os números legíveis de relance. */
.stats-bar { display: flex; align-items: center; gap: 26px; padding: 14px 22px; }
.stat { display: flex; align-items: baseline; gap: 7px; }
.stat b { font-size: 19px; font-weight: 750; letter-spacing: -.3px; color: var(--text); }
.stat span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 720px) {
  .stats-bar { flex-wrap: wrap; gap: 14px 20px; }
  .stats-bar .spacer { display: none; }
}

/* ---------- seletor de arquivo ----------
   O input[type=file] nativo traz o rótulo do navegador ("Choose File", em
   inglês) e o visual do sistema. Escondemos ele e desenhamos o nosso, que
   ainda funciona como label: clicar em qualquer parte abre o seletor. */
.filepick {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); padding: 7px 12px 7px 7px;
  cursor: pointer; transition: .15s; min-height: 42px;
}
.filepick:hover { border-color: var(--green); }
.filepick input[type=file] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; padding: 0; border: none;
}
.filepick-btn {
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 13px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; transition: .15s; flex-shrink: 0;
}
.filepick:hover .filepick-btn { background: var(--green); color: #0a1a02; border-color: transparent; }
.filepick-name {
  font-size: 12.5px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.filepick-name.has { color: var(--text); font-weight: 600; }

/* nota de semelhança no picker (candidatos ranqueados) */
.score {
  font-size: 10.5px; font-weight: 700; margin-top: 5px;
  color: var(--muted-2);
}
.score-mid { color: var(--yellow); }
.score-hi { color: var(--green-bright); }



/* dica que só faz sentido no telefone (no computador o card cabe inteiro) */
.so-celular { display: none; }
@media (max-width: 720px) { .so-celular { display: block; margin-top: 6px; color: var(--yellow); } }

/* Folha de contato do vídeo: todas as telas numa imagem, gerada junto da
   conferência automática. Existe pra conferir um comercial em segundos, sem
   assistir — o gargalo real do dia do Gabriel é tempo de revisão. */
.folha-contato {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
}