/* =========================================================================
   Lampejo — sistema visual
   Um lampejo e um clarao breve: o que e uma foto, e o que e um flash.

   Regra que organiza tudo: a INTERFACE NAO TEM COR. Quem traz cor para a
   pagina sao as fotos, e o brasao do evento. Um unico azul marca o que e
   clicavel, selecionado ou focado - e so.
   ========================================================================= */

:root {
  color-scheme: light;               /* sem modo escuro, por decisao de projeto */

  --paper: #f1f1ef;                  /* cinza neutro, o cartao cinza do fotografo */
  --paper-2: #e7e7e4;                /* rebaixo: moldura vazia, campo desativado */
  --surface: #ffffff;                /* a copia, o papel branco */
  --ink: #000000;                    /* titulos e marca: preto de verdade */
  --text: #22252a;                   /* leitura: grafite */
  --muted: #63686e;                  /* apoio, ainda legivel (4,97:1 no papel) */
  --line: #dfdfdc;
  --line-2: #eeeeeb;
  --signal: #1b2bff;                 /* o unico acento */
  --signal-dark: #111fc4;
  --signal-wash: #edefff;
  --alert: #b3261e;

  --r-img: 2px;                      /* imagem quase sem canto, como impressa */
  --r-control: 10px;
  --r-panel: 16px;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(16px, 4vw, 32px);
  --measure: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100, "wght" 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* Uma familia so, em duas larguras: o Archivo variavel abre para os titulos
   e volta ao normal para o texto. Dispensa o par serifa + sans. */
h1, h2, .display {
  font-family: var(--font);
  font-variation-settings: "wdth" 118, "wght" 700;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 .4em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 6.5vw, 3.75rem); }
h2 { font-size: clamp(1.35rem, 3.2vw, 1.75rem); letter-spacing: -.03em; }
h3 {
  font-size: 1rem;
  font-variation-settings: "wdth" 100, "wght" 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 .35em;
}

p { margin: 0 0 1rem; max-width: 68ch; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--signal-dark); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--signal); color: #fff; }

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

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: 660px; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 26px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__name {
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: 1.12rem;
  letter-spacing: -.035em;
}

.section { margin: clamp(34px, 6vw, 56px) 0; }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.section__head h2 { margin: 0; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
.center { text-align: center; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------- superficies */

/* Formulario nao acompanha a largura da pagina: campo de mil pixels e ruim de
   preencher e de ler. */
.panel--form { max-width: 620px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: clamp(20px, 3.5vw, 30px);
}

/* ---------------------------------------------------------------- controles */

.btn {
  --bg: var(--surface);
  --fg: var(--ink);
  --bd: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: 46px;
  border: 1px solid var(--bd);
  border-radius: var(--r-control);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: .95rem;
  font-variation-settings: "wdth" 100, "wght" 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { --bd: #c9c9c5; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* A acao principal e preta: no unico lugar onde a cor apareceria, ela cede
   para as fotos. O azul fica reservado para foco e selecao. */
.btn--primary { --bg: var(--ink); --fg: #fff; --bd: var(--ink); }
.btn--primary:hover:not(:disabled) { --bg: #1d1f24; --bd: #1d1f24; }
.btn--quiet { --bg: transparent; --bd: transparent; --fg: var(--text); }
.btn--quiet:hover:not(:disabled) { --bg: var(--paper-2); --bd: transparent; }
.btn--alert { --fg: var(--alert); --bd: #e6c9c7; }
.btn--alert:hover:not(:disabled) { --bg: #fdf2f1; --bd: #d9a9a6; }
.btn--lg { min-height: 60px; padding: 18px 28px; font-size: 1.06rem; }
.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: 8px 13px; font-size: .84rem; }

label.field { display: block; }
.field__label {
  display: block;
  font-size: .9rem;
  font-variation-settings: "wdth" 100, "wght" 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.field__hint { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 8px; }

input[type="text"], input[type="search"], textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #9aa0a6; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-wash);
}
textarea { resize: vertical; min-height: 88px; }

.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: .94rem;
}
.switch input { width: 19px; height: 19px; accent-color: var(--signal); flex: none; margin: 0; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .78rem;
  font-variation-settings: "wdth" 100, "wght" 600;
  color: var(--muted);
}
.tag svg { width: 13px; height: 13px; }

.notice {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  font-size: .93rem;
}
.notice--error { border-color: #e6c9c7; background: #fdf2f1; color: var(--alert); }
.notice--ok { border-color: #c9d0e6; background: var(--signal-wash); color: var(--signal-dark); }

.empty {
  text-align: center;
  padding: clamp(40px, 8vw, 72px) 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r-panel);
  color: var(--muted);
}
.empty h3 { margin-bottom: 6px; }
.empty p { margin-inline: auto; }

.spinner {
  width: 17px; height: 17px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar .7s linear infinite;
  flex: none;
}
@keyframes girar { to { transform: rotate(360deg); } }

.toast-area {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(440px, calc(100vw - 32px));
}
.toast {
  padding: 13px 16px;
  border-radius: var(--r-control);
  background: var(--ink);
  color: #fff;
  font-size: .92rem;
  animation: subir .2s ease;
}
.toast--error { background: var(--alert); }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------- brasao do evento */

/* A arte do convite e circular sobre fundo branco: o corte redondo tira os
   cantos, que apareceriam como um retangulo sobre o papel. */
.seal {
  display: block;
  width: clamp(96px, 20vw, 132px);
  height: auto;              /* sem isto os atributos width/height do <img>
                                vencem o aspect-ratio e o selo fica oval */
  aspect-ratio: 1;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
}
.qr-card .seal, .seal--grande { width: clamp(120px, 26vw, 164px); }

/* ------------------------------------------------------ inicio: os albuns */

.hero { padding: clamp(10px, 3vw, 26px) 0 clamp(30px, 5vw, 48px); }
/* A medida curta e do titulo, nao do bloco: no bloco ela espremeria tambem o
   paragrafo numa coluna de 20 caracteres. */
.hero h1 { max-width: 15ch; margin-bottom: .3em; }
.hero p { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--muted); max-width: 44ch; }

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 20px;
}

.album-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.album-card__cover {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border-radius: var(--r-img);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.album-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-card__cover svg { width: 28px; height: 28px; color: #b6b6b1; }
.album-card__body { padding: 12px 2px 0; }
.album-card h3 { margin: 0 0 2px; transition: color .15s ease; }
.album-card:hover h3 { color: var(--signal); }

/* --------------------------------------------------------- album: as fotos */

.album-head {
  text-align: center;
  padding: clamp(6px, 2vw, 20px) 0 clamp(30px, 5vw, 52px);
}
.album-head h1 { margin-bottom: .2em; }
.album-head__sub { color: var(--muted); max-width: 46ch; margin: 0 auto 10px; }
.album-head__meta {
  margin: 0 auto;
  color: var(--muted);
  font-size: .9rem;
}

/* Sem papel falso, sem cantoneira, sem inclinacao: a foto encosta no branco
   da pagina e o espaco em volta faz o trabalho. */
.frames {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: clamp(14px, 2.4vw, 26px) clamp(10px, 1.8vw, 20px);
  /* Denso: a foto deitada ocupa duas colunas e deixaria buraco na linha. */
  grid-auto-flow: dense;
}
@media (min-width: 760px) {
  .frames { grid-template-columns: repeat(3, 1fr); }
}

.frame { margin: 0; }
/* Deitada ocupa duas colunas: o ritmo da pagina vem da forma das fotos. */
.frame--wide { grid-column: span 2; }

.frame__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--paper-2);
  border-radius: var(--r-img);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.frame__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.frame__btn img.is-loaded { opacity: 1; }

.frame__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 2px 0;
  font-size: .8rem;
  color: var(--muted);
}
/* O numero do quadro: as fotos sao uma sequencia cronologica, entao o indice
   informa a ordem em vez de enfeitar. */
.frame__no {
  font-variant-numeric: tabular-nums;
  color: #a3a8ad;
  flex: none;
}
.frame__by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------- visualizador

   A foto ocupa a tela inteira; a moldura flutua por cima em vez de tomar
   linhas do layout. Enquanto a imagem grande baixa, a miniatura que ja esta
   no cache aparece desfocada no lugar exato - a tela nunca fica branca.
   -------------------------------------------------------------------------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--surface);
  animation: aparecer .16s ease;
}
@keyframes aparecer { from { opacity: 0; } }

.viewer__stage {
  position: absolute;
  inset: 0;
  padding: 56px var(--gutter) 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;          /* o gesto e nosso: arrastar, deslizar, pinçar */
}

.viewer__box {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
  cursor: zoom-in;
  /* Profundidade para a virada de pagina: sem perspectiva o giro em Y sai
     achatado, parecendo um estreitamento e nao uma pagina. */
  perspective: 1500px;
}
.viewer__box.is-zoom { cursor: grab; }
.viewer__box.is-zoom:active { cursor: grabbing; }
.viewer__box.is-animando { transition: transform .26s cubic-bezier(.22, .7, .3, 1); }

/* As duas camadas tem a mesma proporcao e o mesmo object-fit, entao a imagem
   grande entra exatamente por cima da miniatura, sem salto. */
.viewer__box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.viewer__thumb { filter: blur(14px); transform: scale(1.03); }
.viewer__full { opacity: 0; transition: opacity .22s ease; }
.viewer__full.is-ready { opacity: 1; }

/* O desfoque se espalha para fora do retangulo da foto e deixaria um halo em
   volta dela. Assim que a imagem grande cobre tudo, a miniatura sai - com um
   atraso, para nao aparecer branco no meio da troca. */
.viewer__box.is-pronta .viewer__thumb {
  opacity: 0;
  transition: opacity .2s ease .18s;
}

/* A pagina que vira: uma copia da foto, do tamanho exato em que ela aparece na
   tela, girando em torno da propria borda - a lombada do album. Some no fim. */
.viewer__pagina {
  position: absolute;
  z-index: 3;
  backface-visibility: hidden;
  pointer-events: none;
  will-change: transform;
  box-shadow: 0 0 1px rgba(0, 0, 0, .18);
}
.viewer__pagina img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;      /* ja recortada na medida certa pelo JS */
  display: block;
}
/* Sombreado que escurece a folha conforme ela se inclina, como a luz saindo
   dela de raspao. */
.viewer__pagina__luz {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, .42), rgba(0, 0, 0, .06));
}

.viewer__carregando {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  display: none;
  color: var(--muted);
}
.viewer__stage.is-carregando /* A pagina que vira: uma copia da foto, do tamanho exato em que ela aparece na
   tela, girando em torno da propria borda - a lombada do album. Some no fim. */
.viewer__pagina {
  position: absolute;
  z-index: 3;
  backface-visibility: hidden;
  pointer-events: none;
  will-change: transform;
  box-shadow: 0 0 1px rgba(0, 0, 0, .18);
}
.viewer__pagina img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;      /* ja recortada na medida certa pelo JS */
  display: block;
}
/* Sombreado que escurece a folha conforme ela se inclina, como a luz saindo
   dela de raspao. */
.viewer__pagina__luz {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, .42), rgba(0, 0, 0, .06));
}

.viewer__carregando { display: block; }

.viewer__top, .viewer__foot {
  position: absolute;
  left: 0; right: 0;
  /* Acima da folha que vira: em 3D ela se projeta para fora do palco. O fundo
     solido - invisivel no repouso, porque a tela ja e branca - impede que a
     folha passando por tras deixe o texto ilegivel. */
  z-index: 6;
  isolation: isolate;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--gutter);
}
.viewer__top {
  top: 0;
  padding-top: max(12px, env(safe-area-inset-top));
  justify-content: space-between;
}
.viewer__foot {
  bottom: 0;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  justify-content: center;
}

.viewer__count {
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  flex: none;
}
.viewer__caption {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Setas grandes na lateral no computador; no celular o polegar usa a barra de
   baixo e o proprio deslize. */
.viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  isolation: isolate;
  display: none;
}
.viewer__nav--prev { left: 16px; }
.viewer__nav--next { right: 16px; }

@media (min-width: 760px) {
  .viewer__stage { padding: 62px 84px 76px; }
  .viewer__nav { display: grid; }
  .viewer__so-mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer__box.is-animando { transition: none; }
}

/* ------------------------------------------------------------ envio de fotos */

.dropzone {
  border: 1.5px dashed #cbcbc7;
  border-radius: var(--r-panel);
  background: var(--surface);
  padding: 28px 20px;
  text-align: center;
  /* Alvo do tamanho da tela: o navegador exige um toque para abrir a galeria,
     entao o toque vale em qualquer ponto, nao so no botao. */
  min-height: 52dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--signal); background: var(--signal-wash); }
.dropzone h3 { font-size: 1.15rem; margin-bottom: 4px; }
.dropzone__icon { width: 40px; height: 40px; color: var(--ink); margin: 0 auto 14px; }

/* Com fotos escolhidas a area cede o lugar para a lista e o botao de enviar. */
.dropzone.is-compact { min-height: auto; padding: 16px; }
.dropzone.is-compact h3, .dropzone.is-compact p, .dropzone.is-compact .dropzone__icon { display: none; }

.queue { display: grid; gap: 8px; }
.queue-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}
.queue-item__thumb {
  width: 52px; height: 52px;
  border-radius: var(--r-img);
  object-fit: cover;
  background: var(--paper-2);
  display: block;
}
.queue-item__name { font-size: .9rem; font-variation-settings: "wdth" 100, "wght" 600; }
.queue-item__status { font-size: .78rem; color: var(--muted); }
.queue-item[data-status="done"] .queue-item__status { color: var(--signal-dark); }
.queue-item[data-status="error"] .queue-item__status { color: var(--alert); }
.queue-item__remove {
  border: 0;
  background: none;
  color: #9aa0a6;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
}
.queue-item__remove:hover { color: var(--alert); background: var(--paper); }

.bar {
  height: 3px;
  border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
  margin-top: 6px;
}
.bar__fill {
  height: 100%;
  width: 0;
  background: var(--signal);
  transition: width .2s ease;
}
.queue-item[data-status="error"] .bar__fill { background: var(--alert); }

.sticky-actions {
  position: sticky;
  bottom: 0;
  padding: 16px 0 max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 70%, transparent);
}

/* O unico momento de movimento do produto: ao terminar o envio a tela dá um
   lampejo - o nome do produto acontecendo. */
.lampejo {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  pointer-events: none;
  animation: lampejo .5s ease-out forwards;
}
@keyframes lampejo {
  0% { opacity: 0; }
  12% { opacity: .92; }
  100% { opacity: 0; }
}

/* ------------------------------------------------------------------ scanner */

.scanner {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: #111;
  aspect-ratio: 3 / 4;
  max-height: 66dvh;
  margin-inline: auto;
}
@media (min-width: 720px) { .scanner { aspect-ratio: 4 / 3; max-width: 560px; } }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner__frame { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.scanner__frame::after {
  content: "";
  width: min(62%, 260px);
  aspect-ratio: 1;
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(17, 17, 17, .58);
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.scanner__hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(17, 17, 17, .78);
  color: #fff;
  font-size: .85rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ QR Code */

.qr-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: clamp(24px, 5vw, 38px);
  text-align: center;
}
.qr-card img.qr { width: min(300px, 72vw); height: auto; display: block; margin: 0 auto 18px; }
.qr-card__title { font-size: 1.4rem; margin: 0 0 6px; }
.qr-card__url {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--muted);
  word-break: break-all;
}

/* ------------------------------------------------------------- area privada */

.gate { max-width: 400px; margin: 14vh auto 0; text-align: center; }
.gate__mark { width: 30px; height: 30px; color: var(--ink); margin-bottom: 14px; }
.gate p { margin-inline: auto; }

.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.admin-head h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 6px 0 8px; }

.resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--muted);
  font-size: .92rem;
}
.resumo b { color: var(--ink); font-variation-settings: "wdth" 100, "wght" 600; }

.quem { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 12px 0 0; list-style: none; }
.quem li {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .79rem;
  color: var(--muted);
}
.quem b { color: var(--ink); }

.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
}
.toolbar__count { font-size: .9rem; font-variation-settings: "wdth" 100, "wght" 600; color: var(--ink); }

.manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
@media (min-width: 720px) {
  .manage-grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 10px; }
}

/* O ladrilho e uma <div>: um <button> dentro de outro e HTML invalido - o
   parser tira os de dentro e eles viram itens soltos da grade. A selecao fica
   num <label> com checkbox, que ja traz clique e teclado. */
.manage-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--paper-2);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color .12s ease;
}
.manage-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.manage-tile.is-selected { outline-color: var(--signal); }
.manage-tile.is-selected img { opacity: .62; }

.manage-tile__hit { position: absolute; inset: 0; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.manage-tile__check { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.manage-tile__check:focus-visible ~ .manage-tile__mark { outline: 2px solid var(--signal); outline-offset: 2px; }

.manage-tile__mark {
  position: absolute;
  z-index: 2;
  top: 6px; left: 6px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: rgba(17, 17, 17, .3);
  color: transparent;
  pointer-events: none;
}
.manage-tile.is-selected .manage-tile__mark { background: var(--signal); border-color: var(--signal); color: #fff; }
.manage-tile__mark svg { width: 13px; height: 13px; }

.manage-tile__capa {
  position: absolute;
  z-index: 2;
  top: 6px; right: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .67rem;
  font-variation-settings: "wdth" 100, "wght" 600;
}

.manage-tile__pe {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  padding: 18px 6px 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
  opacity: 0;
  transition: opacity .15s ease;
}
.manage-tile:hover .manage-tile__pe, .manage-tile:focus-within .manage-tile__pe { opacity: 1; }
.manage-tile__pe a, .manage-tile__pe button {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  cursor: pointer;
}
.manage-tile__pe svg { width: 13px; height: 13px; }
.manage-tile__pe button:hover { background: var(--alert); color: #fff; }
.manage-tile__pe a:hover { background: var(--signal); color: #fff; }

.zona-perigo {
  margin-top: 48px;
  padding: 22px;
  border: 1px solid #e6c9c7;
  border-radius: var(--r-panel);
  background: #fdf7f6;
}
.zona-perigo h3 { color: var(--alert); }

.campo-link { display: flex; gap: 8px; align-items: center; }
.campo-link input { font-family: var(--mono); font-size: .78rem; }

/* -------------------------------------------------------------- impressao */

@media print {
  .site-header, .no-print { display: none !important; }
  body { background: #fff; }
  .qr-card { border: 0; padding: 0; }
}

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