/* photo.css — TOMI Photo & Video (chrome do módulo público).
   ---------------------------------------------------------------------------
   A COMPOSIÇÃO das molduras vive em css/photo-frames.css (`.pfr`). Aqui está só
   o chrome: câmara, doca, folha de galeria, cartões, resultado e entrega.

   Geometria de referência: área de módulo ~946 × ~1683 (após rail, topbar e
   barra de alerta) num kiosk 1080×1920, usado em pé.

   MODELO: a câmara está sempre montada; a folha de molduras abre POR CIMA dela.
   Abrir/fechar é uma troca de classe (`is-sheet`) — não há re-render nem
   navegação, por isso a transição é imediata. */

.pm { --pm-gap: 10px; --pm-pad: 20px; --pm-radius: 16px;
  --pm-capture-ratio: 3 / 4;
  --pm-ink: var(--ds-ink, #202E33); --pm-accent: var(--ds-accent, #FAC200);
  --pm-accent-ink: var(--ds-accent-ink, #211a00); --pm-line: #DEE2E5;
  --pm-muted: #66717A; --pm-soft: #F1F6F9;
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: #10161b; overflow: hidden; }
.pm * { box-sizing: border-box; }
.pm button { font: inherit; color: inherit; }

/* ---------- Câmara: permanente, nunca substituída ---------- */
.pm-cam { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 14px var(--pm-pad); transition: padding 300ms cubic-bezier(.2,.8,.2,1); }
/* O contentor da câmara usa o master fixado na visita. Assim, preview e
   resultado não recaem no antigo 3:4 quando o estudo ativo é 4:3. */
.pm[data-photo-ratio="43"] { --pm-capture-ratio: 4 / 3; }
.pm[data-photo-ratio="34"] { --pm-capture-ratio: 3 / 4; }
.pm-cam__stage { position: relative; width: 100%; height: auto; max-width: 900px;
  max-height: 100%; aspect-ratio: var(--pm-capture-ratio); border-radius: 18px;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.pm[data-photo-ratio="34"] .pm-cam__stage { max-width: 700px; }
.pm-cam__stage > [data-comp] { display: block; width: 100%; height: 100%; }
.pm-cam__stage .pfr { width: 100%; height: 100%; }
/* Defesa geométrica: o mesmo atributo de sessão governa também miniaturas e
   resultado, mesmo que uma classe de renderer antiga permaneça em cache. */
.pm[data-photo-ratio="43"] .pfr { aspect-ratio: 4 / 3; }
.pm[data-photo-ratio="34"] .pfr { aspect-ratio: 3 / 4; }
.pm-cam__miniMeta { display: none; }
/* troca de moldura no sítio — sem re-render, sem piscar */
[data-comp].is-swap .pfr { animation: pm-swap 240ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes pm-swap { from { opacity: .35; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* guia de posicionamento — discreto, nunca sobre o rosto */
.pm-cam__guide { position: absolute; z-index: 3; left: 50%; bottom: 4.5%; transform: translateX(-50%);
  width: 44%; height: 2px; background: rgba(255,255,255,.5); border-radius: 2px; }
.pm-cam__guide::before, .pm-cam__guide::after { content: ''; position: absolute; bottom: 0;
  width: 2px; height: 13px; background: rgba(255,255,255,.5); }
.pm-cam__guide::before { left: 0; } .pm-cam__guide::after { right: 0; }
.pm-coach { position: absolute; z-index: 4; left: 50%; top: 4%; transform: translateX(-50%);
  padding: 11px 22px; border-radius: 999px; background: rgba(14,19,23,.84); color: #fff;
  font-size: 21px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity 220ms ease; }
.pm-coach.is-on { opacity: 1; }

/* ---------- Doca ---------- */
.pm-dock { flex: 0 0 auto; position: relative; z-index: 5; background: #fff;
  border-radius: 22px 22px 0 0; box-shadow: 0 -14px 44px rgba(0,0,0,.34); }

/* ---------- Ações de captura ----------
   Linguagem do produto real (context-files/UI-DONE-Other-AI/photo-s2.html):
   DOIS pills amarelos iguais, lado a lado, ícone à esquerda e label em caixa
   alta. Não é um obturador redondo — isso não pertence ao vocabulário TOMI. */
.pm-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 18px var(--pm-pad) 14px; }
.pm-act { display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 92px; padding: 0 20px; border: 0; border-radius: 18px;
  background: var(--pm-accent); color: var(--pm-accent-ink);
  font-family: var(--ds-font-display), sans-serif; font-size: 26px; font-weight: 800;
  letter-spacing: .01em; cursor: pointer; transition: transform 140ms ease; }
.pm-act .tomi-icon { font-size: 38px; }
.pm-act:active { transform: scale(.985); }
.pm-act[disabled] { opacity: .5; }

/* cabeçalho da folha: é sempre visível e é ele o interruptor da galeria */
.pm-swap { position: relative; width: 100%; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  min-height: 82px; padding: 0 var(--pm-pad) 14px; border: 0; border-top: 1px solid var(--pm-line);
  background: #fff; color: var(--pm-ink); cursor: pointer; text-align: left; }
.pm-swap > span { font-family: var(--ds-font-display), sans-serif; font-size: 27px; font-weight: 700; }
.pm-swap > b { min-width: 0; color: var(--pm-muted); font-size: 18px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-swap__chev { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--pm-soft); font-size: 22px; font-style: normal;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1); transform: rotate(180deg); }
.pm.is-sheet .pm-swap__chev { transform: none; }
/* com a folha aberta o cabeçalho encosta ao conteúdo, sem folga extra */
.pm.is-sheet .pm-swap { padding-bottom: 0; }

/* folha da galeria — abre por cima da câmara */
.pm-sheet { max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 320ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease; }
/* aberta, a folha ocupa TODO o espaço que a câmara larga — sem vazios no fundo */
.pm.is-sheet .pm-dock { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pm.is-sheet .pm-sheet { flex: 1 1 auto; max-height: none; opacity: 1;
  display: flex; flex-direction: column; }
.pm.is-sheet .pm-grid { align-content: start; }
/* MODO GALERIA: com a folha aberta, escolher é a única tarefa. O obturador sai
   de cena e a câmara reduz-se a uma tira de confirmação — a pessoa continua a
   ver-se, mas a decisão é mesmo dela e tem o ecrã todo para a tomar. */
.pm.is-sheet .pm-bar { display: none; }
.pm.is-sheet .pm-cam { flex: 0 0 258px; padding: 10px var(--pm-pad) 6px; }
.pm-sheet__sub { padding: 12px var(--pm-pad) 14px; color: var(--pm-muted);
  font-size: 17px; font-weight: 600; }

/* "Alterar moldura": o contexto nunca desaparece. O preview deixa de tentar
   ocupar a largura do ecrã e passa a miniatura contida, com proporção intacta,
   antes da galeria — sem overlay nem corte. */
.pm.is-sheet:not(.is-pure) .pm-cam {
  position: relative; z-index: 1; flex: 0 0 300px; min-height: 300px;
  padding: 54px var(--pm-pad) 12px; overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(250,194,0,.18), transparent 28%),
    linear-gradient(145deg, #26343a, #11191d);
}
.pm.is-sheet:not(.is-pure) .pm-cam__stage {
  flex: 0 0 auto; width: auto; height: 224px; max-width: calc(100% - 40px);
  max-height: none; aspect-ratio: var(--pm-capture-ratio);
  border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.pm.is-sheet:not(.is-pure) .pm-cam__miniMeta {
  position: absolute; left: var(--pm-pad); right: var(--pm-pad); top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: #fff;
}
.pm-cam__miniMeta span { color: #aebbc0; font-size: 12px; font-weight: 850;
  letter-spacing: .14em; }
.pm-cam__miniMeta b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--ds-font-display), sans-serif; font-size: 18px; font-weight: 800; }
.pm.is-sheet:not(.is-pure) .pm-coach { display: none; }
.pm.is-sheet:not(.is-pure) .pm-dock {
  z-index: 2; border-radius: 18px 18px 0 0; box-shadow: 0 -5px 20px rgba(0,0,0,.16);
}
.pm.is-sheet:not(.is-pure) .pm-sheet { overflow-y: auto; overscroll-behavior: contain; }

/* ---------- Grelhas de galeria (é aqui que os estudos divergem) ---------- */
.pm-grid { display: grid; gap: var(--pm-gap); padding: 0 var(--pm-pad) 22px; }
/* PV002 / PV005 — 4×2, todas visíveis, sem scroll */
.pm-grid--42 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* PV003 — grelha viva: a selecionada expande para 2×2 */
.pm-grid--dyn { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
.pm-grid--dyn .pm-card.is-active { grid-column: span 2; grid-row: span 2; }
/* PV004 — cartões horizontais com contexto legível */
.pm-grid--ctx { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Cartão ---------- */
.pm-card { position: relative; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; gap: 8px; align-content: start; text-align: left;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1); }
.pm-card__thumb { position: relative; display: block; border-radius: 12px; overflow: hidden;
  background: #1a2229; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.pm-card__thumb .pfr { border-radius: inherit; }
.pm-card__check { position: absolute; z-index: 4; right: 8px; top: 8px; width: 28px; height: 28px;
  display: none; place-items: center; border-radius: 50%; background: var(--pm-accent);
  color: var(--pm-accent-ink); font-size: 15px; font-weight: 900; }
.pm-card.is-active .pm-card__thumb { box-shadow: 0 0 0 4px var(--pm-accent), 0 8px 22px rgba(0,0,0,.22); }
.pm-card.is-active .pm-card__check { display: grid; }
.pm-card:active { transform: scale(.985); }

/* estrutura A — label e descrição por baixo da miniatura */
.pm-card__meta { display: grid; gap: 1px; min-width: 0; }
.pm-card__label { font-family: var(--ds-font-display), sans-serif; font-size: 21px; font-weight: 700;
  line-height: 1.05; color: var(--pm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-card__desc { color: var(--pm-muted); font-size: 14px; font-weight: 550; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* o badge é um ESTADO — nunca substitui o label */
.pm-card__badge { justify-self: start; padding: 3px 8px; border-radius: 6px; background: var(--pm-accent);
  color: var(--pm-accent-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pm-card__badge.is-tag { background: var(--pm-ink); color: #fff; }
.pm-card__origin { position: absolute; left: 8px; top: 8px; z-index: 4; padding: 3px 7px; border-radius: 6px;
  background: rgba(12,17,21,.72); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; }

/* estrutura B — label em faixa discreta na base da miniatura */
.pm-card__band { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px;
  display: flex; align-items: center; gap: 6px; color: #fff; font-size: 16px; font-weight: 700;
  line-height: 1.05; background: linear-gradient(0deg, rgba(10,14,18,.88) 30%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-card__band i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pm-accent); }
.pm-grid--dyn .pm-card.is-active .pm-card__band { font-size: 24px; padding: 30px 14px 12px; }

/* PV004 — cartão horizontal: miniatura à esquerda, contexto legível à direita */
.pm-grid--ctx .pm-card { grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px; border-radius: 14px; background: var(--pm-soft); }
.pm-grid--ctx .pm-card.is-active { background: #fff5d1; box-shadow: inset 0 0 0 3px var(--pm-accent); }
.pm-grid--ctx .pm-card.is-active .pm-card__thumb { box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.pm-grid--ctx .pm-card__label { font-size: 22px; white-space: normal; }
.pm-grid--ctx .pm-card__desc { -webkit-line-clamp: 3; }

/* banda de contexto ao vivo (PV004) */
.pm-ctxbar { position: relative; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 4px var(--pm-pad) 12px; padding: 14px 18px; border-radius: 14px; background: var(--pm-ink); color: #fff; }
.pm-ctxbar__live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px;
  background: rgba(255,255,255,.14); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.pm-ctxbar__live i { width: 8px; height: 8px; border-radius: 50%; background: #35e08a;
  animation: pm-pulse 1.8s ease-in-out infinite; }
@keyframes pm-pulse { 50% { opacity: .4; } }
.pm-ctxbar__place { font-family: var(--ds-font-display), sans-serif; font-size: 30px; font-weight: 800; }
.pm-ctxbar__meta { color: #b6c2ca; font-size: 16px; font-weight: 600; }
.pm-ctxbar .pm-sheet__close { top: 50%; transform: translateY(-50%); right: 12px;
  background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Resultado + entrega (um só passo) ---------- */
.pm-head { flex: 0 0 auto; padding: 22px var(--pm-pad) 10px; }
.pm-head__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
  color: var(--pm-muted); font-size: 15px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.pm-head__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--pm-accent); font-style: normal; }
.pm-head h1 { margin: 0; font-family: var(--ds-font-display), sans-serif; font-size: 54px; font-weight: 800;
  line-height: .95; color: var(--pm-ink); }
.pm:has(.pm-final) { background: var(--ds-surface-soft, #F1F6F9); }

/* Share: versão contemporânea do cinza-rato do produto original. O gradiente
   é deliberadamente mínimo para os cartões brancos/amarelos terem contraste. */
.pm--share {
  background:
    radial-gradient(circle at 76% 12%, rgba(255,255,255,.52), transparent 31%),
    linear-gradient(145deg, #d4d5d3 0%, #bec1c0 52%, #aeb2b1 100%) !important;
}
.pm--share::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 62%, rgba(255,255,255,.17) 62% 63%, transparent 63%);
  opacity: .72; }
.pm--share .pm-head, .pm--share .pm-final { position: relative; z-index: 1; }
.pm-head__ready { display: inline-flex; align-items: center; margin-top: 13px; padding: 7px 11px;
  border-radius: 999px; background: rgba(32,46,51,.1); color: #263438;
  font-size: 12px; font-weight: 850; letter-spacing: .13em; }

.pm-final { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 26px; padding: 6px var(--pm-pad) 24px; }
/* a fotografia aparece MAIS PEQUENA no interface — princípio da baseline */
.pm-result__card { width: 100%; max-width: 540px; padding: 16px; border-radius: 22px; background: #fff;
  box-shadow: 0 18px 46px rgba(25,31,32,.24), inset 0 0 0 1px rgba(255,255,255,.82); }
.pm-result__card .pfr { border-radius: 10px; }
.pm-deliver { width: 100%; max-width: 640px; display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: center; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.pm-share__qr { width: 168px; height: 168px; border-radius: 14px; background: var(--pm-soft); padding: 10px; }
.pm-share__qr i { display: block; width: 100%; height: 100%; border-radius: 4px;
  background: repeating-conic-gradient(#202e33 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.pm-deliver__side { min-width: 0; display: grid; gap: 8px; }
.pm-deliver__side h2 { margin: 0; font-family: var(--ds-font-display), sans-serif; font-size: 30px;
  font-weight: 800; line-height: 1; color: var(--pm-ink); }
.pm-deliver__side p { margin: 0 0 4px; color: var(--pm-muted); font-size: 17px; }
.pm-btn { width: 100%; min-height: 60px; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; border: 0; border-radius: 14px; background: var(--pm-accent); color: var(--pm-accent-ink);
  font-family: var(--ds-font-display), sans-serif; font-size: 22px; font-weight: 800; cursor: pointer; }
.pm-btn--ghost { background: #fff; color: var(--pm-ink); box-shadow: inset 0 0 0 2px var(--pm-line); }
.pm-btn .tomi-icon { font-size: 26px; }
.pm-actions { width: 100%; max-width: 640px; display: grid; gap: 10px; }
.pm-actions__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-actions .pm-btn { min-height: 74px; font-size: 22px; }

/* contagem + flash */
.pm-count { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center;
  background: rgba(12,16,19,.42); color: #fff; font-family: var(--ds-font-display), sans-serif;
  font-size: 220px; font-weight: 900; line-height: 1; }
.pm-count span { animation: pm-count 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pm-count { from { opacity: 0; transform: scale(1.5); } 40% { opacity: 1; transform: scale(1); } to { opacity: .15; transform: scale(.86); } }
.pm-flash { position: absolute; z-index: 7; inset: 0; background: #fff; animation: pm-flash 420ms ease-out both; }
@keyframes pm-flash { from { opacity: .95; } to { opacity: 0; } }

/* ---------- QA interno (nunca visível ao público) ---------- */
.pm-qa { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px var(--pm-pad) 14px; border-top: 1px dashed #c8d2d8; background: #e9eff3; }
.pm-qa > span { color: #7c8892; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.pm-qa button { min-height: 42px; padding: 0 14px; border: 1px solid #c2ccd3; border-radius: 999px;
  background: #fff; color: #46525a; font-size: 14px; font-weight: 700; cursor: pointer; }
.pm-qa button.is-active { background: var(--pm-ink); color: #fff; border-color: var(--pm-ink); }

/* Continuidade entre os dois painéis (câmara e resultado) — a pessoa sente que
   nunca mudou de página. */
.pm.is-swapping { opacity: 0; transition: opacity 110ms ease; }
.pm.is-entering { animation: pm-step-in 260ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes pm-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pm *, .pm *::before, .pm *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* segundo formato de captura (GIF) — presente como no produto real, mas
   claramente secundário face à fotografia */
.pm-bar__gif { justify-self: end; max-width: 300px; display: inline-flex; align-items: center;
  gap: 10px; min-height: 68px; padding: 0 20px; border: 0; border-radius: 14px;
  background: var(--pm-soft); box-shadow: inset 0 0 0 2px var(--pm-line); color: var(--pm-ink);
  font-size: 19px; font-weight: 700; cursor: pointer; }

/* ---------- Grelhas por FORMATO (a única variável entre os dois estudos) ----------
   4:3 lê melhor em 3 colunas (miniatura larga); 3:4 em 4 colunas (miniatura alta).
   Em ambos os casos as 8 molduras ficam visíveis sem scroll. */
.pm-grid--43 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-grid--34 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-sheet__fmt { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 6px;
  background: var(--pm-ink); color: #fff; font-size: 12px; font-weight: 800; font-style: normal;
  letter-spacing: .1em; vertical-align: 2px; }

/* ---------- Entrega: tiles com chip redondo (photo-s3.html) ---------- */
.pm-tiles { width: 100%; max-width: 660px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pm-tile { position: relative; display: grid; align-content: center; justify-items: start; gap: 10px;
  min-height: 124px; padding: 20px; border: 0; border-radius: 20px; background: #fff;
  color: var(--pm-ink); font-family: var(--ds-font-display), sans-serif; font-size: 22px;
  font-weight: 700; text-align: left; cursor: pointer;
  box-shadow: 0 12px 30px rgba(31,40,42,.16), inset 0 0 0 1px rgba(32,46,51,.08);
  transition: transform 150ms ease, box-shadow 150ms ease; }
.pm-tile:active { transform: translateY(2px); box-shadow: 0 6px 18px rgba(31,40,42,.16); }
.pm-tile i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--pm-ink); color: #fff; font-size: 26px; font-style: normal; }
.pm-tile i.is-accent { background: var(--pm-accent); color: var(--pm-accent-ink);
  box-shadow: inset 0 0 0 1px rgba(33,26,0,.08); }
.pm-tile--lg { min-height: 216px; align-content: space-between; }
.pm-tile--lg i { background: var(--pm-ink); color: #fff; width: 62px; height: 62px; font-size: 31px; }
.pm-tile--lg b { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: .02em; }
.pm-tile small { color: #5f6b6e; font-family: var(--ds-font-sans), sans-serif;
  font-size: 14px; font-weight: 650; }
.pm-tile--accent { background: var(--pm-accent); color: var(--pm-accent-ink); }
.pm-tile--accent i { background: #fff; color: var(--pm-accent-ink); }
.pm-tile--accent small { color: #514100; }
.pm-tile.is-exporting { cursor: wait; filter: saturate(.72); }
.pm-tile.is-exporting i { animation: pm-export-pulse .8s ease-in-out infinite alternate; }
.pm-tile.is-exported { background: #9ce7cb; color: #12372d; }
.pm-tile.is-exported small { color: #285a4c; }
.pm-tile.is-export-error { background: #9d2d35; color: #fff; }
.pm-tile.is-export-error small { color: rgba(255,255,255,.84); }
@keyframes pm-export-pulse { to { transform: scale(.88); opacity: .68; } }
/* miniatura de QR dentro do tile de download, como na referência */
.pm-tile__qr { position: absolute; right: 16px; bottom: 16px; width: 58px; height: 78px;
  border-radius: 8px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.pm-tile__qr::after { content: ''; position: absolute; inset: 8px 8px 14px;
  background: repeating-conic-gradient(#202e33 0 25%, #fff 0 50%) 0 0 / 7px 7px; }

/* ---------- ECRÃ 1: GALERIA PURA ----------
   Entrada no módulo. Só as molduras: nada pré-selecionado e sem preview da
   câmara. A tarefa é escolher, e o ecrã inteiro serve essa tarefa. Reabrir a
   galeria mais tarde já é outro estado — aí sobrepõe-se ao preview. */
.pm.is-pure { background: #fff; }
.pm.is-pure .pm-cam { display: none; }
.pm.is-pure .pm-dock { border-radius: 0; box-shadow: none; }
.pm.is-pure .pm-swap { border-top: 0; padding-top: 22px; pointer-events: none; }
.pm.is-pure .pm-swap > span { font-size: 44px; font-weight: 800; }
.pm.is-pure .pm-swap__chev { display: none; }
/* Com o ecrã todo para a galeria, 3 colunas em vez de 4: as miniaturas ficam
   ~35% maiores e as três filas preenchem a altura, em vez de deixarem meio ecrã
   vazio como acontecia com 4 colunas em 2 filas. */
.pm.is-pure .pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; padding: 0 var(--pm-pad) 26px; }
.pm.is-pure .pm-card__label { font-size: 23px; }