:root {
  --fundo: #f4efe6;
  --papel: #fffdf8;
  --tinta: #2b2620;
  --suave: #73685b;
  --borda: #e3d9c8;
  --linha: #dbe3ee;
  --destaque: #a94b24;
  --destaque-texto: #ffffff;
  --ok: #2f7d4f;
  --erro: #b3261e;
  --sombra: rgb(60 40 20 / .18);
  --titulo: #8b3a1f;

  /* Envelope */
  --env: #f0e4cc;
  --env-aba: #f6ecd8;
  --env-dobra: #e5d4b4;
  --env-dentro: #c9b08a;
  --env-tinta: #4a3b2a;
  --env-papel: #fffdf8;
  --env-linha: #dbe3ee;
  --selo-claro: #d14b3d;
  --selo-escuro: #8c1d15;

  /* Mural de cortiça */
  --cortica: #c39465;
  --cortica-sombra: transparent;
  --madeira-clara: #8a5a33;
  --madeira-escura: #6a4223;
  --placa: #fbf6ea;
  --placa-tinta: #8b3a1f;
  --placa-sub: #6b5a44;
  --postit: #fde98a;
  --postit-claro: #fff3a8;
  --postit-tinta: #4a3b12;

  --mao: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --letreiro: "Pacifico", "Brush Script MT", cursive;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1d1a17;
    --papel: #2a2622;
    --tinta: #eee6da;
    --suave: #a99d8e;
    --borda: #3d3731;
    --linha: #3a3f47;
    --destaque: #e07a4f;
    --destaque-texto: #1d1a17;
    --ok: #6fcf97;
    --erro: #f2867c;
    --sombra: rgb(0 0 0 / .45);
    --titulo: #e8a17c;

    /* Papel continua papel no escuro: só fica com menos brilho. */
    --env: #d6c4a2;
    --env-aba: #e0d0b2;
    --env-dobra: #c9b590;
    --env-dentro: #a48c66;
    --env-tinta: #3d3022;
    --env-papel: #ece3d2;
    --env-linha: #cdd3db;
    --selo-claro: #c4473a;
    --selo-escuro: #7a1a13;

    --cortica-sombra: rgb(0 0 0 / .45);
    --madeira-clara: #5e3d22;
    --madeira-escura: #432a16;
    --placa: #e4d9c2;
    --placa-tinta: #7a2e18;
    --placa-sub: #5b4a36;
    --postit: #d9c76a;
    --postit-claro: #e3d27c;
    --postit-tinta: #3d300e;
  }
}

* { box-sizing: border-box; }

/* O atributo hidden precisa vencer qualquer display definido por classe (ex.: .linha-form é flex). */
[hidden] { display: none !important; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  /* parede, com uma luz suave vinda de cima */
  background: radial-gradient(ellipse 90% 60% at 50% -10%, rgb(255 255 255 / .07), transparent 70%) no-repeat, var(--fundo);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.topo, main {
  max-width: 960px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

main { padding-bottom: 56px; }

.topo { padding-top: 28px; }

h1 {
  font-family: var(--letreiro);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.35;
  color: var(--titulo);
  margin: 0 0 4px;
}

.subtitulo { margin: 0; color: var(--suave); min-height: 1.5em; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Navegação entre as páginas ---------- */

.topo-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 28px; }
.abas { display: flex; flex-wrap: wrap; gap: 8px; }

.abas a {
  padding: 6px 14px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--suave);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}

.abas a:hover { color: var(--tinta); }

.abas a[aria-current="page"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--fundo);
}

/* ---------- Botões ---------- */

.botao {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--destaque);
  border-radius: 8px;
  background: var(--destaque);
  color: var(--destaque-texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao.secundario { background: transparent; color: var(--destaque); }
.botao:disabled { opacity: .6; cursor: progress; }

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

/* Recebem foco só para o leitor de tela anunciar o conteúdo; não são clicáveis. */
[tabindex="-1"]:focus { outline: none; }

/* ---------- Envelope (mural, leitura e envio) ----------
   Camadas, de trás para frente: fundo (parte de dentro), papel, bolso (frente),
   aba, selo e rótulo. Medidas em cqi (% da largura do envelope) para o mesmo
   desenho funcionar pequeno no mural e grande na leitura. */

.envelope {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  padding: 0;
  border: 0;
  background: none;
  color: var(--env-tinta);
  font: inherit;
  text-align: left;
  container-type: inline-size;
  perspective: 1200px;
  filter: drop-shadow(0 6px 10px var(--sombra));
}

.envelope > span { position: absolute; }

.env-fundo {
  inset: 0;
  z-index: 0;
  background: var(--env-dentro);
  border-radius: 2cqi;
}

.env-papel {
  z-index: 1;
  left: 6%;
  right: 6%;
  top: 5%;
  height: 88%;
  background:
    repeating-linear-gradient(to bottom, transparent 0 7cqi, var(--env-linha) 7cqi calc(7cqi + 1px))
      50% 9cqi / 84% calc(100% - 14cqi) no-repeat,
    var(--env-papel);
  border-radius: 1cqi;
  box-shadow: 0 1px 3px rgb(0 0 0 / .15);
  overflow: hidden;
  /* fechando: o papel desce primeiro */
  transition: transform .45s ease-in;
}

/* Começo da carta escrito no papel: aparece quando o papel sai do envelope. */
.env-trecho {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 9cqi;
  color: var(--env-tinta);
  font-family: var(--mao);
  font-size: 5.6cqi;
  line-height: 7cqi;
  overflow-wrap: anywhere;
}

.env-bolso {
  inset: 0;
  z-index: 2;
  background: var(--env);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}

.env-bolso::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--env-dobra);
  clip-path: polygon(0 100%, 50% 46%, 100% 100%);
}

.env-aba {
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  z-index: 3;
  background-color: var(--env-aba);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  /* fechando: a aba desce depois do papel; volta para a frente ao passar de 90° */
  transition: transform .45s ease-in-out .4s, background-color .45s .4s, z-index 0s .62s;
}

.env-selo {
  z-index: 4;
  left: 50%;
  top: 60%;
  width: 13cqi;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--selo-claro), var(--selo-escuro) 75%);
  box-shadow: 0 1px 2px rgb(0 0 0 / .35), inset 0 0 0 1.4cqi rgb(0 0 0 / .14);
  /* fechando: o selo é aplicado por último */
  transition: transform .3s cubic-bezier(.3, 1.6, .6, 1) .85s, opacity .2s .85s;
}

.env-rotulo {
  z-index: 4;
  left: 8%;
  right: 8%;
  bottom: 7%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4cqi;
  pointer-events: none;
}

.env-de {
  overflow: hidden;
  padding-right: .2em; /* a letra cursiva passa da caixa; sem isso o final do nome é cortado */
  font-family: var(--mao);
  font-size: 7.5cqi;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.env-data { font-size: 3.6cqi; opacity: .75; white-space: nowrap; }

/* Abrindo: o selo some, a aba gira para cima (e passa para trás do papel), o papel sobe. */
.envelope.aberto .env-selo {
  transform: scale(0);
  opacity: 0;
  transition: transform .2s ease-in, opacity .2s;
}

.envelope.aberto .env-aba,
.envelope.lida .env-aba {
  transform: rotateX(180deg);
  background-color: var(--env-dentro);
  z-index: 0;
  transition: transform .5s ease-in-out .15s, background-color .5s .15s, z-index 0s .4s;
}

.envelope.aberto .env-papel {
  transform: translateY(-50%);
  transition: transform .6s cubic-bezier(.2, .8, .3, 1) .55s;
}

/* Já lida neste navegador: o envelope fica aberto no mural, com a aba para cima
   (regra da aba junto com .aberto, acima), a carta aparecendo e só a metade de
   baixo do lacre, quebrado. */
.envelope.lida .env-papel {
  transform: translateY(-34%);
  transition: transform .6s cubic-bezier(.2, .8, .3, 1) .55s;
}

.envelope.lida .env-selo {
  clip-path: polygon(0 56%, 14% 47%, 27% 58%, 41% 46%, 55% 57%, 69% 45%, 83% 55%, 100% 48%, 100% 100%, 0 100%);
}

/* Carta que já tinha sido aberta, sendo lida de novo: o papel só é puxado para fora
   (o lacre já está quebrado e a aba já está para cima). */
.envelope.lida.puxando .env-papel {
  transform: translateY(-50%);
  transition: transform .6s cubic-bezier(.2, .8, .3, 1) .1s;
}

.sem-transicao, .sem-transicao * { transition: none !important; animation: none !important; }

/* ---------- Página "Abrir cartas": quadro de cortiça ---------- */

.quadro {
  padding: clamp(10px, 1.8vw, 16px);
  border-radius: 10px;
  /* moldura de madeira: veios finos sobre um degradê */
  background:
    repeating-linear-gradient(91deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 9px, rgb(0 0 0 / .07) 9px 11px, transparent 11px 19px),
    linear-gradient(180deg, var(--madeira-clara), var(--madeira-escura));
  box-shadow:
    0 26px 50px -22px rgb(0 0 0 / .6),
    inset 0 1px 0 rgb(255 255 255 / .18),
    inset 0 -2px 0 rgb(0 0 0 / .3);
}

.cortica {
  position: relative;
  min-height: 460px;
  padding: 36px clamp(16px, 4vw, 44px) 52px;
  border-radius: 3px;
  /* textura de cortiça: ruído do SVG (grãos escuros e claros) sobre a cor base */
  background-color: var(--cortica);
  background-image:
    linear-gradient(var(--cortica-sombra), var(--cortica-sombra)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .19 0 0 0 0 .08 2.6 0 0 0 -1.15'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .82 0 0 0 0 .64 2.8 0 0 0 -1.55'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23a)'/%3E%3Crect width='260' height='260' filter='url(%23b)'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25), inset 0 8px 22px rgb(0 0 0 / .35);
}

.cabecalho-quadro {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 48px;
}

/* Cartão com o título, preso por um pedaço de fita */
.placa {
  position: relative;
  padding: 18px 36px 16px;
  background: var(--placa);
  text-align: center;
  rotate: -1.5deg;
  box-shadow: 0 12px 18px -10px rgb(0 0 0 / .55), 0 1px 2px rgb(0 0 0 / .2);
}

.placa::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 120px;
  height: 28px;
  translate: -50% 0;
  rotate: 3deg;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .3) 0 6px, transparent 6px 12px),
    rgb(150 205 194 / .82);
  box-shadow: 0 1px 2px rgb(0 0 0 / .18);
}

.placa h1 {
  margin: 0;
  color: var(--placa-tinta);
  font-size: clamp(2.1rem, 6.5vw, 3.4rem);
  line-height: 1.25;
}

.placa-sub {
  margin: 2px 0 0;
  color: var(--placa-sub);
  font-family: var(--mao);
  font-size: 1.35rem;
  line-height: 1.2;
}

/* Post-it com a contagem (ou o aviso de mural vazio) */
.lembrete {
  max-width: 230px;
  margin: 0;
  padding: 16px 18px 22px;
  background: linear-gradient(170deg, var(--postit-claro), var(--postit) 60%);
  color: var(--postit-tinta);
  font-family: var(--mao);
  font-size: 1.4rem;
  line-height: 1.15;
  rotate: 2.5deg;
  box-shadow: 0 14px 16px -10px rgb(0 0 0 / .5);
}

.lembrete a { color: var(--placa-tinta); font-weight: 600; }

.envelopes {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 44px 32px;
  align-items: end;
}

/* Envelope aberto precisa de espaço acima para a aba levantada
   (60% da altura do envelope, que é 62,5% da largura: 37,5% da largura). */
.envelopes > li { transition: padding-top .5s ease; }
.envelopes > li.aberta { padding-top: 38%; }

.envelopes .envelope {
  cursor: pointer;
  rotate: var(--giro, 0deg);
  transition: translate .2s, rotate .2s, filter .2s;
}

.envelopes .envelope:hover {
  translate: 0 -3px;
  rotate: 0deg;
  filter: drop-shadow(0 14px 16px rgb(0 0 0 / .35));
}

.envelopes .envelope:focus-visible { outline-offset: 8px; border-radius: 4px; }

/* O que prende cada envelope no mural: tachinha ou fita */
.tachinha {
  z-index: 6;
  left: 50%;
  top: 4%;
  width: 7.5cqi;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, var(--pino) 35%, white) 0 12%,
    var(--pino) 45%,
    color-mix(in srgb, var(--pino) 65%, black));
  box-shadow: 1.2cqi 1.8cqi 1.6cqi rgb(0 0 0 / .4);
}

.tachinha.vermelha { --pino: #d64541; }
.tachinha.amarela { --pino: #f0b429; }
.tachinha.azul { --pino: #3d7dd8; }
.tachinha.verde { --pino: #3a9d68; }

.fita {
  z-index: 6;
  left: 50%;
  top: -4%;
  width: 32cqi;
  height: 10cqi;
  translate: -50% 0;
  rotate: -5deg;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .28) 0 2cqi, transparent 2cqi 4cqi),
    var(--cor-fita);
  box-shadow: 0 1px 2px rgb(0 0 0 / .2);
}

.fita.rosa { --cor-fita: rgb(240 160 180 / .85); }
.fita.menta { --cor-fita: rgb(150 205 194 / .85); }

/* Depois de aberta, a carta volta para o mural presa pela lateral do envelope,
   abaixo da linha da dobra, para não tapar a carta que aparece em cima. */
.envelope.lida .tachinha { left: 9%; top: 40%; }
.envelope.lida .fita { left: 97%; top: 42%; width: 22cqi; translate: -50% -50%; rotate: 80deg; }

.leitura {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinta);
  overflow: auto;
}

.leitura::backdrop {
  background: rgb(18 14 10 / .62);
  backdrop-filter: blur(3px);
  transition: opacity .55s ease;
}

.leitura[open]::backdrop { animation: escurecer .35s ease-out; }
/* O envelope está voltando para o mural: o fundo clareia junto. */
.leitura.voltando::backdrop { opacity: 0; }

.cena {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 48px 16px;
}

.cena > * { grid-area: 1 / 1; }

/* Desce um pouco para sobrar espaço para a aba e o papel subirem. A ida do mural até
   aqui (e a volta) é feita pelo cartas.js, que sabe onde está o envelope no mural. */
.envelope-grande {
  width: min(440px, 100%);
  translate: 0 18%;
  transition: translate .6s cubic-bezier(.3, .7, .3, 1), rotate .6s cubic-bezier(.3, .7, .3, 1), scale .6s cubic-bezier(.3, .7, .3, 1);
}

/* Lendo: a carta sobe um pouco e o envelope, vazio e aberto, fica pousado atrás dela,
   aparecendo por baixo. --sobe e --desce vêm do cartas.js (dependem da altura da carta). */
.leitura.lendo .envelope-grande { translate: 0 var(--desce, 60%); rotate: -3deg; scale: .9; }
.leitura.lendo .envelope-grande .env-papel { opacity: 0; transition: opacity .35s ease; }

.carta-aberta { display: none; width: min(560px, 100%); }
.leitura.lendo .carta-aberta { display: block; animation: desdobrar .65s cubic-bezier(.2, .75, .25, 1) both; }
.leitura.lendo .carta-aberta,
.leitura.guardando .carta-aberta { translate: 0 calc(-1 * var(--sobe, 0px)); }

/* Guardando: o inverso da abertura. O envelope volta para o centro, a carta se dobra
   para dentro dele, o papel desce e o lacre quebrado aparece. */
.leitura.guardando .carta-aberta { display: block; animation: dobrar-carta .45s cubic-bezier(.55, 0, .75, .2) forwards; }
.leitura.guardando .envelope-grande .env-papel { transition: transform .5s ease-in-out, opacity .3s ease; }
.leitura.guardando .envelope-grande .env-selo { transition: transform .3s cubic-bezier(.3, 1.6, .6, 1) .3s, opacity .2s .3s; }

/* A carta lida é o mesmo papel que estava no envelope: claro e com tinta escura,
   também no modo escuro. */
.papel.carta-aberta {
  --linha: var(--env-linha);
  background: var(--env-papel);
  color: var(--env-tinta);
  border-color: color-mix(in srgb, var(--env-tinta) 15%, transparent);
}

.carta-aberta .papel-data { color: color-mix(in srgb, var(--env-tinta) 65%, transparent); }

@keyframes escurecer {
  from { opacity: 0; }
}

@keyframes dobrar-carta {
  to { opacity: 0; transform: perspective(1200px) translateY(80px) rotateX(-60deg) scale(.75); }
}

@keyframes chegar {
  from { opacity: 0; transform: translateY(60px) scale(.9); }
}

@keyframes desdobrar {
  from { opacity: 0; transform: perspective(1200px) translateY(80px) rotateX(-60deg) scale(.75); }
  40% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

/* ---------- Papel de carta (leitura e escrita) ---------- */

.papel {
  padding: 28px 32px 24px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 6px;
  box-shadow: 0 18px 40px -18px var(--sombra), 0 2px 6px var(--sombra);
}

.papel-data { margin: 0 0 12px; text-align: right; font-size: .85rem; color: var(--suave); }

.papel-texto,
.papel-form textarea {
  font-family: var(--mao);
  font-size: 1.6rem;
  line-height: 2rem;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1px), var(--linha) calc(2rem - 1px) 2rem);
}

.papel-texto {
  margin: 0 0 16px;
  min-height: 6rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.papel-assinatura {
  margin: 0;
  text-align: right;
  font-family: var(--mao);
  font-size: 1.75rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* ---------- Página "Escrever" ---------- */

.mesa { display: grid; margin-top: 28px; }
.mesa > * { grid-area: 1 / 1; }

.papel-form { display: grid; gap: 4px; max-width: 640px; width: 100%; justify-self: center; }
.papel-form:focus-within { border-color: var(--destaque); }

.papel-cabecalho {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  font-size: .9rem;
  color: var(--suave);
}

.papel-form textarea {
  width: 100%;
  padding: 0;
  border: 0;
  resize: none;
  color: inherit;
  background-color: transparent;
  background-attachment: local;
}

.papel-form textarea:focus-visible { outline: none; }
.papel-form textarea::placeholder { color: var(--suave); opacity: .7; }

.campo-assinatura {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 12px 0 0;
}

.campo-assinatura label { font-family: var(--mao); font-size: 1.5rem; }

.campo-assinatura input {
  width: min(240px, 100%);
  padding: 0 4px;
  border: 0;
  border-bottom: 1px dashed var(--suave);
  background: transparent;
  color: inherit;
  font-family: var(--mao);
  font-size: 1.75rem;
  font-weight: 600;
}

.campo-assinatura input:focus-visible { outline: none; border-bottom: 2px solid var(--destaque); }

.rodape-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

#contador { font-size: .85rem; color: var(--suave); font-variant-numeric: tabular-nums; }

.status { margin: 4px 0 0; min-height: 1.5em; font-size: .9rem; }
.status.ok { color: var(--ok); }
.status.erro { color: var(--erro); }

/* Envio: o papel se dobra, entra no envelope, a aba fecha, o selo é aplicado e o envelope sai voando. */
.envio { display: none; place-items: center; align-self: center; }
.envio .envelope { width: min(400px, 85vw); translate: 0 15%; }

.sucesso {
  display: none;
  align-self: center;
  justify-self: center;
  max-width: 420px;
  text-align: center;
}

.sucesso-titulo { margin: 0 0 4px; font-family: var(--mao); font-size: 2.6rem; font-weight: 600; line-height: 1.1; }
.sucesso p { margin: 0; color: var(--suave); }
.sucesso .sucesso-titulo { color: var(--tinta); }

.mesa[data-etapa="dobrando"] .papel-form { animation: dobrar .5s ease-in forwards; }
.mesa[data-etapa="voando"] .papel-form,
.mesa[data-etapa="enviada"] .papel-form { visibility: hidden; }

.mesa[data-etapa="dobrando"] .envio,
.mesa[data-etapa="voando"] .envio { display: grid; }

.mesa[data-etapa="dobrando"] .envio .envelope { animation: chegar .4s ease-out .25s both; }
.mesa[data-etapa="voando"] .envio .envelope { animation: voar .7s cubic-bezier(.5, 0, .75, 0) forwards; }

.mesa[data-etapa="enviada"] .sucesso { display: block; animation: aparecer .4s ease-out; }

@keyframes dobrar {
  60% { opacity: .8; transform: perspective(1000px) rotateX(70deg) scale(.7); }
  to { opacity: 0; transform: perspective(1000px) rotateX(85deg) translateY(30%) scale(.5); }
}

@keyframes voar {
  to { opacity: 0; transform: translate(110vw, -30vh) rotate(18deg) scale(.6); }
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 480px) {
  h1 { font-size: 2.1rem; }
  .papel { padding: 22px 18px 18px; }
  .cortica { padding-top: 28px; }
  .placa { padding: 16px 20px 14px; }
}

/* ---------- Página "Configurações" ---------- */

.ficha {
  /* mesma largura do quadro do mural (o main já limita a 960px); só a de entrar é estreita */
  max-width: none;
  margin-top: 24px;
  padding: 20px 24px 22px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px var(--sombra), 0 2px 6px var(--sombra);
}

.ficha h2 {
  margin: 0 0 14px;
  font-family: var(--letreiro);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--titulo);
}

.info {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 24px;
  align-items: baseline;
  font-size: .95rem;
}

.info > div { display: contents; }
.info dt { color: var(--suave); }
.info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.info code { font-size: .95em; }

.versao-num {
  font-family: var(--mao);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.ficha + .ficha { margin-top: 20px; }
.ficha-texto { margin: -6px 0 14px; color: var(--suave); font-size: .95rem; }

.linha-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.linha-form input {
  flex: 1 1 160px;
  min-width: 0;
  width: auto;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
}
.linha-form input::placeholder { color: var(--suave); opacity: .8; }
.botao.pequeno { padding: 6px 12px; font-size: .85rem; }

.inscritos { list-style: none; margin: 0 0 14px; padding: 0; }
.inscritos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.inscrito-email { flex: 1 1 180px; font-weight: 600; overflow-wrap: anywhere; }
.vazio-lista { color: var(--suave); font-style: italic; }

.badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.badge.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge.pendente { background: color-mix(in srgb, var(--destaque) 16%, transparent); color: var(--destaque); }

#area-avisos > .botao { margin-top: 14px; }

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

/* ---------- Sessão (2.0): quem está logado, página de entrar, assinatura e cadastro de usuários ---------- */
.quem { margin: 0; font-size: .9rem; color: var(--suave); display: flex; align-items: center; gap: 0 .35em; }
.quem .quem-nome { font-weight: 600; }
.quem-versao { margin-left: 10px; padding: 2px 9px; border: 1px solid var(--borda); border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.link { background: none; border: 0; padding: 0; color: var(--destaque); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ficha-entrar { max-width: 420px; margin: 24px auto 0; }
.papel-nota { margin: 2px 0 0; font-size: .85rem; color: var(--suave); text-align: right; }
.usuarios li { flex-wrap: wrap; }
.usuario-nome { font-weight: 600; }
.usuario-nome code { font-weight: 400; font-size: .85em; opacity: .8; }
.badge.desligado { opacity: .7; }
.form-usuario { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
.form-usuario input[name="email"], .form-usuario .opcao, .form-usuario button { grid-column: 1 / -1; }
.form-usuario .opcao { display: flex; gap: 8px; align-items: center; font-size: .95rem; color: var(--suave); }

/* ---------- Cor do envelope por usuário (2.4): paletas suaves; "papel" é a original ---------- */
[data-cor="verde"]   { --env: #e2ecdc; --env-aba: #ebf2e6; --env-dobra: #cfdfc6; --env-dentro: #a7c09a; }
[data-cor="lilas"]   { --env: #e9e2f1; --env-aba: #f1ecf6; --env-dobra: #d8cce6; --env-dentro: #b4a3c9; }
[data-cor="azul"]    { --env: #dfe8f0; --env-aba: #e9f0f6; --env-dobra: #cad8e5; --env-dentro: #9fb6ca; }
[data-cor="rosa"]    { --env: #f3e3e7; --env-aba: #f8edf0; --env-dobra: #e5ccd4; --env-dentro: #c9a3b0; }
[data-cor="amarelo"] { --env: #f3ecd2; --env-aba: #f8f3de; --env-dobra: #e7dcb4; --env-dentro: #c6b67f; }

@media (prefers-color-scheme: dark) {
  [data-cor="verde"]   { --env: #b7c7ad; --env-aba: #c4d2bb; --env-dobra: #a3b598; --env-dentro: #7f9472; }
  [data-cor="lilas"]   { --env: #c3b7d1; --env-aba: #cec3da; --env-dobra: #b0a2c2; --env-dentro: #8a7a9f; }
  [data-cor="azul"]    { --env: #b5c4d1; --env-aba: #c1cfdb; --env-dobra: #a1b3c3; --env-dentro: #7c91a5; }
  [data-cor="rosa"]    { --env: #d0b9c1; --env-aba: #dac6cd; --env-dobra: #bfa4ae; --env-dentro: #9a7f8a; }
  [data-cor="amarelo"] { --env: #cfc5a2; --env-aba: #d9d0b0; --env-dobra: #bdb18b; --env-dentro: #978b5e; }
}

/* Configurações: amostra da cor e a seleção ao lado de cada usuário e no cadastro */
.cor-escolha { display: inline-flex; align-items: center; gap: 8px; }
.amostra { width: 18px; height: 18px; border-radius: 4px; background: var(--env); border: 1px solid var(--env-dobra); box-shadow: inset 0 -6px 0 var(--env-aba); }
.cor-sel { padding: 4px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--papel); color: var(--tinta); font: inherit; font-size: .9rem; }

/* ---------- Temas (2.5): "padrao" é o visual original; "listras" vem do papel de parede rosa e creme ---------- */
/* O tema listras é claro por natureza: redefine a paleta clara inteira, então vale mesmo com o sistema no escuro. */
:root[data-tema="listras"] {
  --fundo: #fbf6dc;
  --papel: #fffdf8;
  --tinta: #2b2620;
  --suave: #73685b;
  --borda: #e9d6d0;
  --linha: #dbe3ee;
  --destaque: #a94b24;
  --destaque-texto: #ffffff;
  --ok: #2f7d4f;
  --erro: #b3261e;
  --sombra: rgb(90 50 60 / .16);
  --titulo: #8b3a1f;
  --env: #f0e4cc;
  --env-aba: #f6ecd8;
  --env-dobra: #e5d4b4;
  --env-dentro: #c9b08a;
  --env-tinta: #4a3b2a;
  --env-papel: #fffdf8;
  --env-linha: #dbe3ee;
  --selo-claro: #d14b3d;
  --selo-escuro: #8c1d15;
  --cortica: #d8ad73;
  --cortica-sombra: transparent;
  --madeira-clara: #dcb57c;
  --madeira-escura: #b98a4e;
  --placa: #fbf6ea;
  --placa-tinta: #8b3a1f;
  --placa-sub: #6b5a44;
  --postit: #fde98a;
  --postit-claro: #fff3a8;
  --postit-tinta: #4a3b12;
  --mao: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --letreiro: "Pacifico", "Brush Script MT", cursive;
  color-scheme: light;
}
:root[data-tema="listras"] body {
  /* listras verticais rosa e creme, com a borda levemente difusa, como papel de parede pintado */
  background:
    repeating-linear-gradient(90deg, #f5cbdf 0 33px, #f8dbe5 33px 37px, #fbf6dc 37px 70px, #f9ebdf 70px 74px);
}
:root[data-tema="listras"] .quadro {
  box-shadow: 0 22px 44px -22px rgb(120 70 60 / .5), inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .18);
}
:root[data-tema="listras"] .abas a:not([aria-current="page"]),
:root[data-tema="listras"] .quem-versao { background: rgb(255 253 248 / .78); }

/* Configurações (2.6): o cadastro termina no Cadastrar; o Fechar administração fica afastado */
.fechar-admin { margin-top: 22px; }