/* ═══════════════════════════════════════════════════════════════════════
   FUNDO DO PAINEL — o seletor de papel de parede
   ═══════════════════════════════════════════════════════════════════════
   Ele nasceu como uma coluna estreita com cinco famílias empilhadas, e foi
   crescendo: 22 cores, 27 gradientes, 9 cenas animadas, a coleção de fotos e
   os vídeos em loop. Numa lista só, escolher um vídeo custava passar por tudo
   o que veio antes — e os dois controles do fim (imagem do computador,
   restaurar padrão) rolavam junto, longe do momento da escolha.

   O QUE MUDOU, e por quê:

     · ABAS. Uma família de cada vez, inteira, sem competir com as outras.
     · LADRILHO MAIOR. A cor sólida de 22px pedia mira; a 34px ela é um alvo.
       Os gradientes e as cenas ganharam proporção de tela (16:10), porque é
       assim que eles vão aparecer atrás do quadro.
     · RODAPÉ PRESO. Trocar por uma imagem sua e voltar ao padrão são as duas
       saídas, e saída não some rolando.
     · A ESCOLHIDA TEM ANEL, e não borda: borda muda o tamanho do ladrilho e
       faz a grade inteira dançar quando a seleção anda.

   Os dois temas moram aqui, pelo mesmo motivo do arquivo da barra: este
   painel foi desenhado nos dois ao mesmo tempo, e separá-los faria cada
   ajuste de espaçamento precisar ser lembrado duas vezes.
   ═══════════════════════════════════════════════════════════════════════ */

#wp-panel{
  position:fixed;z-index:1250;
  width:360px;max-width:calc(100vw - 24px);padding:0;
  border-radius:18px;background:#15171e;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 26px 64px rgba(0,0,0,.62);
  display:none;flex-direction:column;overflow:hidden;
  max-height:min(560px,calc(100dvh - var(--wp-teto,92px) - 24px));
  animation:bmPop .16s cubic-bezier(.16,1,.3,1) both;
}
#wp-panel.open{display:flex;}

/* ── Cabeçalho ───────────────────────────────────────────────────────── */
.wp-cab{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px 10px;flex-shrink:0;
}
#wp-panel .wp-title{
  font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;
  color:rgba(240,240,240,.94);margin:0;letter-spacing:-.2px;
}
.wp-fechar{
  width:28px;height:28px;border:0;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.06);color:rgba(240,240,240,.55);
  font-size:.8rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .14s,color .14s;
}
.wp-fechar:hover{background:rgba(255,255,255,.12);color:#fff;}

/* ── Abas ────────────────────────────────────────────────────────────── */
.wp-abas{
  display:flex;gap:4px;padding:0 12px 10px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.07);overflow-x:auto;scrollbar-width:none;
}
.wp-abas::-webkit-scrollbar{display:none;}
.wp-aba{
  flex:1 0 auto;padding:7px 10px;border:0;border-radius:9px;cursor:pointer;
  background:transparent;font-family:'Inter',sans-serif;font-size:.74rem;
  font-weight:600;color:rgba(240,240,240,.5);white-space:nowrap;
  transition:background .14s,color .14s;
}
.wp-aba:hover{color:rgba(240,240,240,.85);}
.wp-aba.ativa{background:rgba(99,102,241,.2);color:#c7d2fe;}

/* ── Corpo ───────────────────────────────────────────────────────────── */
.wp-corpo{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 16px;
}
.wp-painel[hidden]{display:none;}

/* Cores: alvo de 34px, e a grade se ajusta à largura em vez de contar
   colunas — o painel muda de tamanho no celular. */
#wp-panel .wp-colors{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:8px;margin:0;
}
#wp-panel .wp-swatch{
  width:100%;aspect-ratio:1;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.06);
  transition:transform .14s,box-shadow .14s;
}
#wp-panel .wp-swatch:hover{transform:scale(1.08);}

/* Gradientes, cenas, fotos e vídeos: proporção de tela, porque é assim que
   eles vão aparecer atrás do quadro. */
#wp-panel .wp-gradients,
#wp-panel .wp-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;}
#wp-panel .wp-pixels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;}
#wp-panel :is(.wp-grad,.wp-gallery-swatch,.wp-pixel-swatch){
  width:100%;height:auto;aspect-ratio:16/10;border-radius:12px;cursor:pointer;
  overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.08);
  background-size:cover;background-position:center;
  transition:transform .14s,box-shadow .14s;
}
#wp-panel :is(.wp-grad,.wp-gallery-swatch,.wp-pixel-swatch):hover{transform:translateY(-2px);}
#wp-panel .wp-pixel-swatch canvas{width:100%;height:100%;display:block;object-fit:cover;image-rendering:pixelated;}
#wp-panel .wp-pixel-swatch > div{
  position:absolute;left:0;right:0;bottom:0;padding:4px 7px;
  font-size:.62rem;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
}

/* A ESCOLHIDA. Anel por fora, e não borda: borda muda a medida do ladrilho e
   faz a grade dançar a cada troca. */
#wp-panel :is(.wp-swatch,.wp-grad,.wp-pixel-swatch,.wp-gallery-swatch).active{
  box-shadow:0 0 0 2px #15171e,0 0 0 4px #818cf8;
}

/* ── Rodapé ──────────────────────────────────────────────────────────── */
.wp-pe{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;flex-shrink:0;
  padding:12px 16px 14px;border-top:1px solid rgba(255,255,255,.07);
}
#wp-panel :is(.wp-upload-btn,.wp-reset){
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:0;padding:9px 10px;border-radius:10px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;text-align:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(240,240,240,.8);transition:background .14s,color .14s;
}
#wp-panel :is(.wp-upload-btn,.wp-reset):hover{background:rgba(255,255,255,.12);color:#fff;}
#wp-panel .wp-upload-btn input{display:none;}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA CLARO — mesma geometria, materiais claros
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #wp-panel{
  background:#fff;border-color:#e2ebf7;box-shadow:0 26px 64px rgba(16,58,110,.22);
}
html[data-theme="light"] #wp-panel .wp-title{color:#12263f;}
html[data-theme="light"] .wp-fechar{background:#f1f6fb;color:#4a6b86;}
html[data-theme="light"] .wp-fechar:hover{background:#e3edf7;color:#0f2744;}
html[data-theme="light"] .wp-abas{border-bottom-color:#edf3fa;}
html[data-theme="light"] .wp-aba{color:#6b8099;}
html[data-theme="light"] .wp-aba:hover{color:#28486a;}
html[data-theme="light"] .wp-aba.ativa{background:#e8f1fe;color:#1d5fd0;}
html[data-theme="light"] #wp-panel .wp-swatch{border-color:rgba(15,39,68,.12);box-shadow:none;}
html[data-theme="light"] #wp-panel :is(.wp-grad,.wp-gallery-swatch,.wp-pixel-swatch){border-color:rgba(15,39,68,.1);}
html[data-theme="light"] #wp-panel :is(.wp-swatch,.wp-grad,.wp-pixel-swatch,.wp-gallery-swatch).active{
  box-shadow:0 0 0 2px #fff,0 0 0 4px #2b6fe0;
}
html[data-theme="light"] .wp-pe{border-top-color:#edf3fa;}
html[data-theme="light"] #wp-panel :is(.wp-upload-btn,.wp-reset){
  background:#f2f7fc;border-color:#dbe7f7;color:#3f6079;
}
html[data-theme="light"] #wp-panel :is(.wp-upload-btn,.wp-reset):hover{background:#e5eefa;color:#12509f;}

/* ── Telas estreitas: o painel encosta embaixo e ocupa a largura ─────── */
@media (max-width:640px){
  #wp-panel{
    left:12px!important;right:12px!important;width:auto;
    top:auto!important;bottom:12px;
    max-height:min(70dvh,calc(100dvh - var(--wp-teto,92px) - 24px));
  }
}