:root {
  --bg: #f7f8fa;
  --cartao-bg: #ffffff;
  --texto: #14161a;
  --texto-fraco: #6b7280;
  --borda: #e7e9ec;
  --preto: #14161a;
  --verde: #16a34a;
  --verde-bg: #e8f7ee;
  --roxo: #8b5cf6;
  --roxo-bg: #f2edfe;
  --vermelho: #e0333f;
  --amarelo: #d9a017;
  --sombra: 0 2px 10px rgba(20, 22, 26, 0.06);
  --raio: 16px;
  --raio-peq: 10px;

  /* Acento por raridade da carta (usa o dado real que já vem da API) */
  --acento-comum: #9a9a92;
  --acento-incomum: #4f9e4a;
  --acento-rara: #2f8fe0;
  --acento-ultra: #f0b429;
  --acento-secreta: #8a5cf6;

  /* Paleta de cor por pessoa (avatar), escolhida deterministicamente por id/nome */
  --avatar-1: #ef6a45; /* coral */
  --avatar-2: #2f8fe0; /* azul */
  --avatar-3: #4f9e4a; /* verde */
  --avatar-4: #f0b429; /* amarelo */
  --avatar-5: #8a5cf6; /* roxo */
  --avatar-6: #d9558f; /* rosa */

  /* Tema de cor escolhido pela pessoa (Perfil → Personalizar cor). Padrão = laranja/amarelo. */
  --tema-a: #ef6a45;
  --tema-b: #f0b429;
  --tema-c: #8a5cf6;
}

:root[data-tema="2"] { --tema-a: #2f8fe0; --tema-b: #6fd0e8; --tema-c: #8a5cf6; }
:root[data-tema="3"] { --tema-a: #4f9e4a; --tema-b: #b8e05a; --tema-c: #2f8fe0; }
:root[data-tema="4"] { --tema-a: #8a5cf6; --tema-b: #d9558f; --tema-c: #f0b429; }
:root[data-tema="5"] { --tema-a: #f0b429; --tema-b: #d9558f; --tema-c: #8a5cf6; }
:root[data-tema="6"] { --tema-a: #d9558f; --tema-b: #2f8fe0; --tema-c: #f0b429; }
:root[data-tema="7"] { --tema-a: #ffd23f; --tema-b: #f0b429; --tema-c: #ef6a45; }
:root[data-tema="8"] { --tema-a: #e0333f; --tema-b: #ef6a45; --tema-c: #f0b429; }
:root[data-tema="9"] { --tema-a: #2dd4bf; --tema-b: #2f8fe0; --tema-c: #8a5cf6; }

* { box-sizing: border-box; }

/* Garante que o atributo `hidden` sempre esconda o elemento, mesmo quando a classe
   dele define `display` diretamente (ex: .camera-tela usa display:flex, que sem isso
   vencia o [hidden] do navegador e deixava a etapa "escondida" visível por cima). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(480px 320px at 8% -6%, rgba(240, 180, 41, 0.32), transparent 60%),
    radial-gradient(420px 320px at 100% 8%, rgba(47, 143, 224, 0.28), transparent 60%),
    radial-gradient(460px 360px at 96% 55%, rgba(138, 92, 246, 0.16), transparent 65%),
    radial-gradient(500px 380px at 50% 30%, rgba(239, 106, 69, 0.18), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

/* Avatares coloridos por pessoa (ver corAvatar() em icones.js) */
.avatar-cor-1 { background: var(--avatar-1) !important; }
.avatar-cor-2 { background: var(--avatar-2) !important; }
.avatar-cor-3 { background: var(--avatar-3) !important; }
.avatar-cor-4 { background: var(--avatar-4) !important; }
.avatar-cor-5 { background: var(--avatar-5) !important; }
.avatar-cor-6 { background: var(--avatar-6) !important; }

/* Acento de raridade nos posts de carta do feed (mesmo padrão do carta-tile) */
.post { position: relative; }
.post.raridade-comum::before,
.post.raridade-incomum::before,
.post.raridade-rara::before,
.post.raridade-ultra::before,
.post.raridade-secreta::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 1;
}
.post.raridade-comum::before { background: var(--acento-comum); }
.post.raridade-incomum::before { background: var(--acento-incomum); }
.post.raridade-rara::before { background: var(--acento-rara); }
.post.raridade-ultra::before { background: var(--acento-ultra); }
.post.raridade-secreta::before { background: var(--acento-secreta); }

.tela {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  background: transparent;
  display: flex;
  flex-direction: column;
}

@keyframes entra-cima {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes entra-baixo {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes brilho-banner {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes respirar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 106, 69, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(239, 106, 69, 0); }
}

/* Barra superior */
.topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg);
}

.topo h1 {
  font-size: 1.15rem;
  margin: 0;
  flex: 1;
}

.topo .voltar {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cartao-bg);
  border: 1px solid var(--borda);
  color: var(--texto);
  text-decoration: none;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Botão de ícone redondo (busca, filtro, etc. no topo) */
.icone-botao {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--cartao-bg); border: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--texto); box-shadow: var(--sombra); text-decoration: none;
  transition: transform 0.12s ease;
}
.icone-botao:active { transform: scale(0.92); }
.icone-svg { width: 18px; height: 18px; }

main.conteudo {
  flex: 1;
  padding: 8px 20px 100px;
  overflow-y: auto;
}

/* Cartões / seções */
.cartao {
  background: var(--cartao-bg);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}

/* Botões */
button, .botao {
  font-family: inherit;
  cursor: pointer;
}

.botao-primario {
  width: 100%;
  background: var(--preto);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

.botao-primario:disabled { background: #a8adb5; }
.botao-primario:hover:not(:disabled) { background: #000; }

.botao-secundario {
  width: 100%;
  background: var(--cartao-bg);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

.botao-secundario:hover { background: var(--bg); }

.link-central {
  text-align: center;
  display: block;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--texto-fraco);
}

.link-central a { color: var(--texto); font-weight: 600; }

/* Formulários */
label { display: block; font-size: 0.8rem; font-weight: 600; margin: 12px 0 6px; color: var(--texto-fraco); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select {
  width: 100%; padding: 13px 14px; border: 1px solid var(--borda); border-radius: var(--raio-peq);
  font-size: 1rem; background: var(--cartao-bg); color: var(--texto); font-family: inherit;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--preto); outline-offset: -1px; }

/* Avatar com foto de perfil (fallback pra iniciais já era só background) */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-mini { overflow: hidden; }
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Mensagens de resultado */
.resultado { margin-top: 14px; padding: 14px 16px; border-radius: var(--raio-peq); font-size: 0.9rem; }
.resultado.sucesso { background: var(--verde-bg); color: #0c5c2a; }
.resultado.aviso { background: #fff8e6; color: #7a5400; }
.resultado.erro { background: #fdecec; color: #8a1f26; }

/* Barra de progresso */
.progresso-barra {
  height: 8px; background: #e9ebee; border-radius: 4px; overflow: hidden;
}
.progresso-preenchimento { height: 100%; background: var(--preto); border-radius: 4px; }

/* Badges de status */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
}
.badge-tenho { background: var(--verde-bg); color: #0c5c2a; }
.badge-troca { background: var(--roxo-bg); color: #5b21b6; }
.badge-nao-tenho { background: #f1f2f4; color: var(--texto-fraco); }

/* Página "Minha coleção" — permite mais largura em telas grandes só nesta tela */
.tela-larga { max-width: 1080px; }

/* Painel de progresso geral no topo do álbum — banner "herói" com brilho animado,
   mesma linguagem visual do login/feed (ver .hero-login / .banner-promo) */
.painel-progresso-geral {
  position: relative; overflow: hidden; border-radius: 22px; margin-bottom: 16px;
  padding: 20px 22px 22px; color: #fff;
  background: linear-gradient(120deg, var(--tema-a), var(--tema-b) 45%, var(--tema-c) 100%);
  background-size: 220% 220%; animation: brilho-banner 8s ease-in-out infinite;
  box-shadow: 0 10px 26px rgba(138, 92, 246, 0.22);
}
.painel-progresso-geral::after {
  content: ""; position: absolute; right: -34px; top: -34px; width: 170px; height: 170px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); pointer-events: none;
}
.painel-progresso-geral::before {
  content: ""; position: absolute; left: -20px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); pointer-events: none;
}
.progresso-geral-topo { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.progresso-geral-frase { margin: 0; font-size: 1.02rem; text-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.progresso-geral-frase strong { font-size: 1.3rem; }
.progresso-geral-sub { margin: 4px 0 0; font-size: 0.8rem; color: rgba(255,255,255,0.85); }
.progresso-geral-percentual { font-size: 1.5rem; font-weight: 800; flex-shrink: 0; text-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.barra-progresso-geral { position: relative; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.28); margin-top: 14px; overflow: hidden; }
.barra-progresso-geral-fill { height: 100%; border-radius: 999px; background: #fff; transition: width 0.4s ease; }
.proxima-conquista-bloco {
  position: relative; margin-top: 14px; padding: 11px 13px; border-radius: var(--raio-peq);
  background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; gap: 2px;
}
.proxima-conquista-rotulo { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; opacity: 0.85; }
.proxima-conquista-texto { font-size: 0.84rem; color: #fff; }
.proxima-conquista-texto strong { font-weight: 800; }

/* Chips de filtro */
.chips-filtro { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.chips-filtro::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; background: var(--cartao-bg); border: 1px solid var(--borda); color: var(--texto-fraco);
  padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.chip.ativo { background: linear-gradient(135deg, var(--tema-a), var(--tema-b)); color: #fff; border-color: transparent; }

/* Grade de álbuns (sets) — capas de álbum gameficadas, não linhas de catálogo */
.grade-albuns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 640px) { .grade-albuns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .grade-albuns { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grade-albuns { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.album-item {
  display: flex; flex-direction: column; text-decoration: none; color: var(--texto);
  background: var(--cartao-bg); border-radius: 22px; overflow: hidden;
  box-shadow: 0 10px 20px var(--brilho-capa, rgba(20,22,26,0.08)), var(--sombra);
  position: relative; transition: transform 0.15s ease;
  opacity: 0; animation: entra-baixo 0.4s ease forwards;
}
.album-item:active { transform: scale(0.97); }
.album-item.completo { box-shadow: 0 0 0 2px var(--acento-ultra), 0 10px 20px var(--brilho-capa, rgba(20,22,26,0.08)), var(--sombra); }
.album-item.quase-completo { box-shadow: 0 0 0 1px rgba(240, 180, 41, 0.5), 0 10px 20px var(--brilho-capa, rgba(20,22,26,0.08)), var(--sombra); }
.album-item.vazio-item { opacity: 0.82; }
.album-item.vazio-item .capa { filter: saturate(0.3) brightness(1.1); }
.album-item .capa {
  position: relative; height: 132px; display: flex; align-items: center; justify-content: center; color: #fff;
  overflow: hidden;
}
.album-item .capa .icone-fundo {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.album-item .capa-imagem {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
/* Textura "foil" original em CSS — sem arte ou personagem de terceiros (mais discreta quando há foto real da carta) */
.album-item .capa::after {
  content: ""; position: absolute; inset: 0; opacity: 0.55; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.18) 0 2px, transparent 2px 10px),
    radial-gradient(65% 90% at 15% 0%, rgba(255,255,255,0.4), transparent 62%),
    radial-gradient(50px 50px at 88% 90%, rgba(255,255,255,0.25), transparent 70%);
}
.album-item .capa.tem-imagem::after { opacity: 0.22; }
.album-item .capa.tem-imagem { background: #14161a; }
.album-item .capa::before {
  content: ""; position: absolute; inset: 5px; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 15px;
  pointer-events: none; z-index: 1;
}
.album-item .capa .icone-svg { width: 26px; height: 26px; opacity: 0.95; position: relative; z-index: 1; }
.capa-set-1 { background: linear-gradient(140deg, #ef6a45, #f0b429); --brilho-capa: rgba(239, 106, 69, 0.32); }
.capa-set-2 { background: linear-gradient(140deg, #2f8fe0, #6fd0e8); --brilho-capa: rgba(47, 143, 224, 0.32); }
.capa-set-3 { background: linear-gradient(140deg, #4f9e4a, #b8e05a); --brilho-capa: rgba(79, 158, 74, 0.32); }
.capa-set-4 { background: linear-gradient(140deg, #8a5cf6, #d9558f); --brilho-capa: rgba(138, 92, 246, 0.32); }
.capa-set-5 { background: linear-gradient(140deg, #f0b429, #d9558f); --brilho-capa: rgba(240, 180, 41, 0.32); }
.capa-set-6 { background: linear-gradient(140deg, #d9558f, #2f8fe0); --brilho-capa: rgba(217, 85, 143, 0.32); }
.album-item .selo-completo {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--acento-ultra); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(20,22,26,0.25); z-index: 1;
}
.album-item .selo-completo .icone-svg { width: 15px; height: 15px; }
.album-item .badge-percentual {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  background: rgba(20,22,26,0.55); color: #fff; font-size: 0.66rem; font-weight: 800;
  padding: 3px 7px; border-radius: 999px;
}
.album-item .anel-progresso { position: absolute; bottom: -20px; right: 10px; width: 46px; height: 46px; color: var(--acento-ultra); z-index: 1; }
.album-item .anel-progresso text { fill: var(--texto); font-family: inherit; }
.album-item .info { padding: 22px 12px 12px; min-width: 0; }
.album-item .nome { font-weight: 700; font-size: 0.86rem; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-item .contagem-linha { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.album-item .contagem { font-size: 0.72rem; color: var(--texto-fraco); }
.album-item .badge-andamento {
  font-size: 0.6rem; font-weight: 800; color: var(--roxo); background: var(--roxo-bg);
  padding: 2px 6px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.album-item .barra-linear { height: 4px; border-radius: 999px; background: #eef0f2; margin-top: 7px; overflow: hidden; }
.album-item .barra-linear-fill { height: 100%; border-radius: 999px; background: var(--acento-ultra); }

/* Skeletons de carregamento (mesma proporção dos cards finais) */
@keyframes brilho-skeleton { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.album-item-skeleton {
  background: var(--cartao-bg); border-radius: 22px; overflow: hidden; box-shadow: var(--sombra); padding-bottom: 12px;
}
.capa-skeleton, .linha-skeleton {
  background: linear-gradient(90deg, #eef0f2 0%, #f7f8fa 50%, #eef0f2 100%);
  background-size: 200px 100%; animation: brilho-skeleton 1.2s ease-in-out infinite;
}
.capa-skeleton { height: 132px; }
.linha-skeleton { height: 10px; border-radius: 999px; margin: 10px 12px 0; }
.linha-skeleton.curta { width: 60%; }

/* Grade de cartas */
.grade-cartas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px;
}
.carta-tile {
  background: var(--cartao-bg); border: 1px solid var(--borda); border-radius: 12px;
  overflow: hidden; text-align: center; position: relative;
}
.carta-tile img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: #eef0f2; display: block; }
.carta-tile.nao-possuida img { filter: grayscale(1); opacity: 0.45; }
.carta-tile .rodape { display: flex; align-items: center; justify-content: space-between; padding: 5px 7px; font-size: 0.72rem; font-weight: 700; gap: 4px; }
.carta-tile .status-icone { font-size: 0.9rem; }
.carta-tile .status-icone .icone-svg { width: 14px; height: 14px; color: var(--verde); display: block; }
.carta-tile .set-mini { font-weight: 600; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vazio { color: var(--texto-fraco); text-align: center; padding: 40px 10px; font-size: 0.9rem; }

/* Navegação inferior — pílula flutuante, compacta e com rótulos visíveis */
.nav-inferior {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 440px;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--borda); border-radius: 999px;
  display: flex; align-items: center; justify-content: space-around;
  padding: 6px calc(6px + env(safe-area-inset-bottom)) 6px 6px;
  box-shadow: 0 8px 20px rgba(20, 22, 26, 0.12);
  z-index: 10;
}
.nav-inferior a {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-decoration: none; color: var(--texto-fraco); font-size: 0.58rem; font-weight: 700;
  flex: 1; padding: 5px 0; border-radius: 999px; transition: transform 0.12s ease;
  min-width: 0;
}
.nav-inferior a:active { transform: scale(0.92); }
.nav-inferior a.ativo { color: var(--preto); }
.nav-inferior .icone-svg { width: 18px; height: 18px; }
.nav-inferior a .icone {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; transition: background 0.15s ease;
}
.nav-inferior a.ativo .icone { background: linear-gradient(135deg, var(--tema-a), var(--tema-b)); }
.nav-inferior a.ativo .icone-svg { color: #fff; }
.nav-inferior a span:last-child { white-space: nowrap; }
.nav-inferior .central-wrap { flex: 0 0 auto; }
.nav-inferior .central {
  width: 38px; height: 38px; border-radius: 50%; color: white;
  background: linear-gradient(135deg, var(--tema-a), var(--tema-b));
  display: flex; align-items: center; justify-content: center;
  animation: respirar 2.4s ease-in-out infinite;
}
.nav-inferior .central .icone-svg { width: 18px; height: 18px; }
.nav-inferior .central-wrap span:last-child { font-size: 0.58rem; font-weight: 700; color: var(--texto-fraco); }

/* Cartão de carta: acento de cor pela raridade real (dado que já vem da API) */
.carta-tile { --acento: var(--acento-comum); position: relative; }
.carta-tile.raridade-comum { --acento: var(--acento-comum); }
.carta-tile.raridade-incomum { --acento: var(--acento-incomum); }
.carta-tile.raridade-rara { --acento: var(--acento-rara); }
.carta-tile.raridade-ultra { --acento: var(--acento-ultra); }
.carta-tile.raridade-secreta { --acento: var(--acento-secreta); }
.carta-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--acento); z-index: 1;
}
.carta-tile { opacity: 0; animation: entra-baixo 0.45s ease forwards; transition: transform 0.15s ease; }
.carta-tile:active { transform: scale(0.96); }

/* Busca (usada na tela de busca global e nos álbuns) */
.busca-topo {
  display: flex; align-items: center; gap: 10px;
  background: var(--cartao-bg); border: 1px solid var(--borda); border-radius: 14px;
  padding: 12px 16px; color: var(--texto-fraco); font-size: 0.92rem; box-shadow: var(--sombra);
  margin-bottom: 16px;
}
.busca-topo input {
  border: none; background: none; padding: 0; box-shadow: none; font-size: 0.92rem; flex: 1;
}
.busca-topo input:focus { outline: none; }

/* Banner promocional animado (topo de coleção/comunidade) */
.banner-promo {
  border-radius: 20px; overflow: hidden; margin-bottom: 18px; position: relative;
  background: linear-gradient(120deg, #ef6a45, #f0b429 45%, #2f8fe0 100%);
  background-size: 220% 220%; animation: brilho-banner 7s ease-in-out infinite;
  padding: 18px 20px; color: #fff; min-height: 84px; display: flex; flex-direction: column; justify-content: center;
}
.banner-promo::after {
  content: ""; position: absolute; right: -24px; top: -30px; width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.banner-promo .rotulo { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; opacity: 0.9; margin-bottom: 4px; text-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.banner-promo .titulo { font-size: 1.08rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.2); }

.album-item, .post, .opcao-adicionar {
  opacity: 0; animation: entra-cima 0.4s ease forwards;
}
.grade-cartas .carta-tile:nth-child(n+1) { animation-delay: calc(0.04s * var(--i, 0)); }

/* Cabeçalho de usuário (topo, em vez de nav) */
#info-usuario { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
#info-usuario a { color: var(--texto); text-decoration: underline; font-weight: 600; }

#sino-notificacoes { position: relative; }
.sino-link { position: relative; display: inline-block; font-size: 1.3rem; text-decoration: none; line-height: 1; }
.badge-sino {
  position: absolute; top: -6px; right: -8px;
  background: var(--vermelho); color: white; font-size: 0.62rem; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.notificacao-item { display: flex; gap: 10px; align-items: flex-start; padding: 14px; text-decoration: none; color: var(--texto);
  background: var(--cartao-bg); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 10px; box-shadow: var(--sombra); }
.notificacao-item.nao-lida { border-left: 3px solid var(--preto); }
.notificacao-item .icone-tipo { font-size: 1.2rem; flex-shrink: 0; display: flex; color: var(--texto-fraco); }
.notificacao-item .icone-tipo .icone-svg { width: 19px; height: 19px; }
.notificacao-item.nao-lida .icone-tipo { color: var(--preto); }
.notificacao-item .msg { font-size: 0.88rem; }
.notificacao-item .quando { font-size: 0.75rem; color: var(--texto-fraco); margin-top: 2px; }

/* Estatísticas de perfil (seguidores/seguindo/cartas) */
.stats-perfil { display: flex; justify-content: center; gap: 28px; margin: 14px 0 18px; }
.stats-perfil .stat { text-align: center; }
.stats-perfil a.stat { text-decoration: none; color: inherit; }
.stats-perfil .stat strong { display: block; font-size: 1.05rem; }
.stats-perfil .stat span { font-size: 0.72rem; color: var(--texto-fraco); }

/* Seletor de tema de cor (Perfil → Personalizar cor) */
.temas-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.tema-swatch {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent;
  box-shadow: var(--sombra); transition: transform 0.12s ease;
  padding: 0; position: relative;
}
.tema-swatch:active { transform: scale(0.9); }
.tema-swatch.ativo { border-color: var(--preto); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--preto); }

/* Abas de perfil (Posts / Coleção / Trocas) */
.abas-perfil { display: flex; border-bottom: 1px solid var(--borda); margin: 4px 0 14px; }
.abas-perfil button { flex: 1; background: none; border: none; padding: 10px; font-size: 0.85rem; font-weight: 700; color: var(--texto-fraco); border-bottom: 2px solid transparent; }
.abas-perfil button.ativa { color: var(--preto); border-bottom-color: var(--preto); }

.grade-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.grade-posts a { display: block; aspect-ratio: 1; overflow: hidden; background: #eef0f2; }
.grade-posts img { width: 100%; height: 100%; object-fit: cover; display: block; }

.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: white; border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Splash — ocupa a largura toda (foge do "quadro de celular" das outras telas de propósito) */
.tela.splash { max-width: none; }
.splash {
  min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 50% at 50% 35%, rgba(138, 92, 246, 0.35), transparent 70%),
    linear-gradient(180deg, #1a1c22 0%, #0e0f13 100%);
  color: white; padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
}
.splash-conteudo { max-width: 380px; display: flex; flex-direction: column; align-items: center; }
.splash-logo-moldura {
  width: 140px; height: 140px; margin-bottom: 24px; border-radius: 30px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(138, 92, 246, 0.45);
  opacity: 0; animation: entra-cima 0.6s ease forwards;
}
.splash-logo { width: 100%; height: 100%; display: block; transform: scale(1.4); }
.splash h1 { font-size: 2rem; margin: 0 0 10px; }
.splash p { color: #c7cad1; font-size: 0.95rem; line-height: 1.5; margin: 0 0 28px; }
.splash .botao-primario { background: linear-gradient(135deg, var(--tema-a), var(--tema-b)); color: white; }

/* Opções de adicionar carta */
.opcao-adicionar {
  display: flex; align-items: center; gap: 14px;
  background: var(--cartao-bg); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px; margin-bottom: 12px; cursor: pointer; text-align: left; width: 100%;
  box-shadow: var(--sombra);
}
.opcao-adicionar:disabled { opacity: 0.45; cursor: not-allowed; }
.opcao-adicionar .icone-circulo {
  width: 42px; height: 42px; border-radius: 50%; background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.opcao-adicionar .texto strong { display: block; font-size: 0.95rem; }
.opcao-adicionar .texto span { font-size: 0.78rem; color: var(--texto-fraco); }

/* Câmera */
.camera-tela { background: #0e0f13; color: white; min-height: 100vh; display: flex; flex-direction: column; }
.camera-tela .topo { background: transparent; color: white; }
.camera-tela .topo .voltar { background: rgba(255,255,255,0.15); border-color: transparent; color: white; }
.camera-visor { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.camera-visor video, .camera-visor img.preview-camera { width: 100%; height: 100%; object-fit: cover; }
.camera-moldura {
  position: absolute; inset: 12% 8%; border: 2px solid rgba(255,255,255,0.85); border-radius: 20px;
  box-shadow: 0 0 0 999px rgba(0,0,0,0.35);
}
.camera-controles { padding: 24px; display: flex; align-items: center; justify-content: center; gap: 24px; }
.camera-disparo {
  width: 66px; height: 66px; border-radius: 50%; background: white; border: 4px solid rgba(255,255,255,0.4);
}