* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #f3f5f8;
  color: #1f2933;
  text-align: center;
}

[hidden] {
  display: none !important;
}

.topo {
  background: linear-gradient(135deg, #063970, #0b6bcb);
  color: white;
  padding: 28px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.topo > div {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.topo h1 {
  margin: 0;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.topo p {
  margin: 6px 0 0;
  opacity: 0.92;
}

.aviso-salvamento,
.status-album {
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
}

.status-album {
  background: rgba(255, 223, 77, 0.22);
}

.barra,
.barra-mini {
  width: 100%;
  height: 10px;
  background: rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

#barraProgresso,
.barra-mini div {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.25s ease;
}

#barraProgresso {
  background: #0b6bcb;
}

.barra-mini div {
  background: #0b6bcb;
}

main {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 16px 40px;
}

.acoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px auto 20px;
  width: 100%;
  text-align: center;
}

.acoes input[type="search"],
.nome-dono-input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid #cfd8e3;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.nome-dono-input {
  background: #ffffff;
}

.nome-dono-input:disabled {
  background: #eef2f7;
  color: #667085;
}

.progresso-principal {
  width: 100%;
  background: white;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 16px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.progresso-principal-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.progresso-principal-topo span {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #667085;
  margin-bottom: 4px;
}

.progresso-principal-topo strong {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #063970;
  line-height: 1;
}

.progresso-principal-topo strong span {
  margin: 0;
  font-size: 34px;
  color: #063970;
}

.progresso-principal-topo strong small {
  font-size: 13px;
  color: #667085;
}

.progresso-percentual {
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  color: #063970;
  white-space: nowrap;
}

.barra-principal {
  background: #e5e7eb;
  margin: 10px 0 8px;
}

.progresso-rodape {
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  color: #667085;
}

.progresso-rodape strong {
  color: #111827;
}

.repetidas-resumo {
  width: 100%;
  background: #f0fdf4;
  border: 1px solid #16a34a;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.repetidas-resumo span {
  font-size: 13px;
  font-weight: 800;
  color: #166534;
}

.repetidas-resumo strong {
  min-width: 42px;
  height: 34px;
  border-radius: 999px;
  background: #16a34a;
  color: white;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.acoes-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.acoes-botoes button {
  flex: 1 1 calc(50% - 10px);
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
}

.acoes button,
.grupo button,
.importador-botoes button,
.painel-faltantes-botoes button,
.painel-troca-botoes button,
.painel-comparacao-botoes button,
.backup-botoes button,
#recuperarBackup {
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  padding: 12px 10px;
  font-weight: 700;
  background: #063970;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.acoes button:hover,
.grupo button:hover,
.importador-botoes button:hover,
.painel-faltantes-botoes button:hover,
.painel-troca-botoes button:hover,
.painel-comparacao-botoes button:hover,
.backup-botoes button:hover,
#recuperarBackup:hover {
  background: #0b6bcb;
}

.acoes button:disabled,
.grupo button:disabled,
.quantidade-controle button:disabled,
.backup-botoes button:disabled,
#recuperarBackup:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#compartilharWhatsapp,
#whatsappFaltantes,
#whatsappTroca,
#whatsappComparacao,
#copiarLinkBackup {
  background: #128c7e;
}

#compartilharWhatsapp:hover,
#whatsappFaltantes:hover,
#whatsappTroca:hover,
#whatsappComparacao:hover,
#copiarLinkBackup:hover {
  background: #075e54;
}

#gerarFaltantes {
  background: #7c3aed;
}

#gerarFaltantes:hover {
  background: #6d28d9;
}

#gerarTroca,
#copiarCodigoBackup {
  background: #2563eb;
}

#gerarTroca:hover,
#copiarCodigoBackup:hover {
  background: #1d4ed8;
}

#baixarPdf,
#salvarBackup {
  background: #0f766e;
}

#baixarPdf:hover,
#salvarBackup:hover {
  background: #115e59;
}

#verMeuAlbum {
  background: #f59e0b;
}

#verMeuAlbum:hover {
  background: #d97706;
}

#assumirAlbumCompartilhado {
  background: #16a34a;
}

#assumirAlbumCompartilhado:hover {
  background: #15803d;
}

#compararAlbum {
  background: #9333ea;
}

#compararAlbum:hover {
  background: #7e22ce;
}

#limparTudo {
  background: #9f1239;
}

#limparTudo:hover {
  background: #be123c;
}

.importador,
.painel-faltantes,
.painel-troca,
.painel-comparacao,
.backup-album,
.painel-estatisticas {
  background: white;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 16px;
  margin: 0 auto 22px;
  width: 100%;
  text-align: center;
}

.importador h2,
.painel-faltantes h2,
.painel-troca h2,
.painel-comparacao h2,
.backup-album h2,
.painel-estatisticas-topo h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.importador p,
.painel-faltantes p,
.painel-troca p,
.painel-comparacao p,
.backup-album p,
.painel-estatisticas-topo p {
  margin: 0 0 12px;
  color: #667085;
  font-size: 14px;
  line-height: 1.45;
}

.importador textarea,
#listaFaltantes,
#listaTroca,
#listaComparacao {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #cfd8e3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin-bottom: 12px;
  text-align: left;
}

#listaFaltantes,
#listaTroca,
#listaComparacao {
  min-height: 220px;
}

.importador input[type="file"] {
  width: 100%;
  margin-bottom: 12px;
}

.importador-botoes,
.painel-faltantes-botoes,
.painel-troca-botoes,
.painel-comparacao-botoes,
.backup-botoes {
  display: flex;
  gap: 12px;
}

.importador-botoes button,
.painel-faltantes-botoes button,
.painel-troca-botoes button,
.painel-comparacao-botoes button,
.backup-botoes button {
  flex: 1;
}

#importarFaltantes {
  background: #854d0e;
}

#importarFaltantes:hover {
  background: #a16207;
}

.backup-album label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  text-align: center;
}

.backup-album input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid #cfd8e3;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 12px;
  text-align: center;
}

.backup-album input[readonly] {
  background: #f8fafc;
  color: #063970;
  font-weight: 800;
}

.resultado-backup,
.recuperar-backup {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}

#recuperarBackup {
  width: 100%;
  background: #4338ca;
}

#recuperarBackup:hover {
  background: #3730a3;
}

.painel-estatisticas {
  padding-bottom: 12px;
}

.painel-estatisticas-topo p {
  margin-bottom: 10px;
}

.menu-estatisticas {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
  overflow: hidden;
  margin-top: 10px;
  text-align: left;
}

.menu-estatisticas summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.menu-estatisticas summary::-webkit-details-marker {
  display: none;
}

.menu-estatisticas summary::after {
  content: "+";
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #063970;
  color: white;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}

.menu-estatisticas[open] summary::after {
  content: "-";
}

.menu-estatisticas-conteudo {
  padding: 0 12px 12px;
}

.destaques-grid {
  display: grid;
  gap: 10px;
}

.destaque-card {
  background: #eef2ff;
  border: 1px solid #dbe4ff;
  border-radius: 14px;
  padding: 12px;
}

.destaque-card span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #4b5563;
  margin-bottom: 4px;
}

.destaque-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  color: #111827;
}

.conquistas-grid {
  display: grid;
  gap: 8px;
}

.conquista-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  opacity: 0.62;
}

.conquista-item.ativa {
  background: #f0fdf4;
  border-color: #16a34a;
  opacity: 1;
}

.conquista-icone {
  font-size: 22px;
}

.conquista-texto strong {
  display: block;
  font-size: 14px;
  color: #111827;
  margin-bottom: 2px;
}

.conquista-texto span {
  display: block;
  font-size: 12px;
  color: #667085;
  line-height: 1.35;
}

.qr-area {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.qr-area img {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  border: 1px solid #d8e0ea;
  padding: 8px;
  background: white;
}

.modo-visualizacao .check,
.modo-visualizacao .quantidade-controle button {
  pointer-events: none;
  opacity: 0.65;
}

.album {
  display: grid;
  gap: 22px;
  width: 100%;
}

.grupo {
  background: white;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  width: 100%;
  text-align: left;
}

.grupo-cabecalho {
  background: #111827;
  color: white;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.grupo-cabecalho h2 {
  margin: 0;
  font-size: 20px;
}

.grupo-info {
  display: grid;
  gap: 6px;
  min-width: 160px;
}

.grupo-info span {
  font-size: 14px;
  opacity: 0.95;
  text-align: right;
}

.grupo button {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
}

.paises-grid {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.pais-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
}

.pais-card-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.pais-card-nome {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  line-height: 1.25;
}

.pais-card-contador {
  background: #eef2ff;
  color: #063970;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pais-progresso {
  margin-bottom: 12px;
}

.grade-figurinhas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.figurinha-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  background: white;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 800;
  color: #1f2933;
  min-width: 0;
}

.figurinha-item.figurinha-repetida {
  background: #f0fdf4;
  border-color: #16a34a;
}

.figurinha-numero {
  text-align: center;
  overflow: hidden;
}

.check {
  width: 20px;
  height: 20px;
  accent-color: #0b6bcb;
  cursor: pointer;
  flex: 0 0 auto;
}

.quantidade-controle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.quantidade-controle button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: #e5e7eb;
  color: #111827;
  cursor: pointer;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}

.quantidade-controle button:hover {
  background: #cfd8e3;
}

.quantidade-controle span {
  min-width: 20px;
  text-align: center;
  font-size: 12px;
  color: #111827;
}

.grupo-especial {
  border: 2px solid #facc15;
}

.grupo-especial .grupo-cabecalho {
  background: linear-gradient(135deg, #854d0e, #ca8a04);
}

.grupo-coca-cola {
  border: 2px solid #dc2626;
}

.grupo-coca-cola .grupo-cabecalho {
  background: linear-gradient(135deg, #7f1d1d, #dc2626);
}

.oculto {
  display: none;
}

footer {
  text-align: center;
  padding: 22px;
  color: #667085;
  font-size: 14px;
}

@media (orientation: landscape) and (min-width: 900px) {
  main {
    max-width: 33.333vw;
    min-width: 430px;
  }

  .topo > div,
  .acoes,
  .painel-estatisticas,
  .backup-album,
  .importador,
  .painel-faltantes,
  .painel-troca,
  .painel-comparacao {
    max-width: 33.333vw;
    min-width: 430px;
  }
}

@media (max-width: 720px) {
  .topo {
    padding: 24px 14px;
  }

  .topo h1 {
    font-size: 24px;
  }

  main {
    padding-inline: 8px;
  }

  .progresso-principal-topo strong span {
    font-size: 30px;
  }

  .progresso-percentual {
    font-size: 26px;
  }

  .acoes-botoes,
  .importador-botoes,
  .painel-faltantes-botoes,
  .painel-troca-botoes,
  .painel-comparacao-botoes,
  .backup-botoes {
    flex-direction: column;
  }

  .acoes button,
  .importador-botoes button,
  .painel-faltantes-botoes button,
  .painel-troca-botoes button,
  .painel-comparacao-botoes button,
  .backup-botoes button {
    width: 100%;
    font-size: 14px;
  }

  .grupo {
    border-radius: 14px;
  }

  .grupo-cabecalho {
    grid-template-columns: 1fr;
  }

  .grupo-info span {
    text-align: left;
  }

  .grupo button {
    width: 100%;
  }

  .paises-grid {
    padding: 10px;
  }

  .pais-card {
    padding: 12px;
  }

  .pais-card-nome {
    font-size: 15px;
  }

  .grade-figurinhas {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }

  .figurinha-item {
    padding: 7px 3px;
    font-size: 11px;
  }

  .check {
    width: 20px;
    height: 20px;
  }

  .quantidade-controle button {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }
}

@media print {
  body {
    background: white;
  }

  .acoes,
  .painel-estatisticas,
  .backup-album,
  .importador,
  .painel-faltantes,
  .painel-troca,
  .painel-comparacao,
  footer,
  .grupo button {
    display: none !important;
  }

  .topo {
    background: white !important;
    color: black !important;
    border-bottom: 2px solid #111827;
  }

  .aviso-salvamento,
  .status-album {
    color: black;
    background: white;
    border: 1px solid #ddd;
  }

  main {
    max-width: 100%;
    padding: 10px;
  }

  .grupo {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .grupo-cabecalho {
    background: #222 !important;
    color: white !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}