/* 38-profile-themes-extra.css
 * Temas Premium extras de perfil — fundos ricos com camadas animadas
 * e elementos "caindo/passando" (partículas, brasas, pétalas, estrelas...).
 *
 * Estrutura:
 *   .profile-page.theme-<key> .profile-theme-bg   -> fundo animado (camada base)
 *   .profile-page.theme-<key> .profile-theme-bg::after -> camada de partículas caindo
 *   body.body-theme-<key>                          -> pinta a página inteira
 *   body.body-theme-<key>::after                   -> partículas na página inteira
 */

/* Animações compartilhadas */
@keyframes wzShimmer   { 0%,100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.25) saturate(1.35); } }
@keyframes wzAurora    { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes wzScanline  { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 40px, 40px 0; } }
@keyframes wzFallSlow  { 0% { background-position: 0 -400px, 0 -200px, 0 0; } 100% { background-position: 0 800px, 0 900px, 0 700px; } }
@keyframes wzFallFast  { 0% { background-position: 0 -300px, 0 0; } 100% { background-position: 0 900px, 0 800px; } }
@keyframes wzRiseSlow  { 0% { background-position: 0 400px, 0 300px, 0 500px; } 100% { background-position: 0 -800px, 0 -900px, 0 -700px; } }
@keyframes wzDrift     { 0%,100% { background-position: 0 0, 100% 100%; } 50% { background-position: 100% 100%, 0 0; } }
@keyframes wzTwinkle   { 0%,100% { opacity:.55 } 50% { opacity:1 } }

/* Camada base de partículas em cima do fundo — comum a todos */
.profile-page[class*="theme-"] .profile-theme-bg,
body[class*="body-theme-"]::before { position: relative; }
.profile-page[class*="theme-"] .profile-theme-bg::after,
body[class*="body-theme-"]::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
}
body[class*="body-theme-"]::after {
    position: fixed;
    z-index: 0;
}

/* =====================================================================
   FOGO VERMELHO 🔥 — brasas subindo
   ===================================================================== */
.theme-fogo .profile-theme-bg,
body.body-theme-fogo::before {
    opacity: .82;
    background:
        radial-gradient(ellipse at 20% 100%, #fde047 0%, transparent 22%),
        radial-gradient(ellipse at 50% 110%, #f97316 0%, transparent 42%),
        radial-gradient(ellipse at 80% 100%, #ef4444 0%, transparent 40%),
        radial-gradient(circle at 30% 30%, rgba(220,38,38,.35), transparent 55%),
        linear-gradient(180deg, #180404 0%, #4c0519 45%, #7f1d1d 100%);
    background-size: 220% 220%, 220% 220%, 220% 220%, 100% 100%, 100% 100%;
    animation: themeDrift 6s ease-in-out infinite, wzShimmer 2.4s ease-in-out infinite;
}
.theme-fogo .profile-theme-bg::after,
body.body-theme-fogo::after {
    background:
        radial-gradient(2px 2px at 10% 10%, #fde047 100%, transparent 100%),
        radial-gradient(2px 2px at 30% 60%, #fb923c 100%, transparent 100%),
        radial-gradient(3px 3px at 70% 30%, #f97316 100%, transparent 100%),
        radial-gradient(1.5px 1.5px at 85% 80%, #fde68a 100%, transparent 100%),
        radial-gradient(2px 2px at 50% 90%, #f59e0b 100%, transparent 100%);
    background-size: 260px 400px, 320px 500px, 200px 350px;
    background-repeat: repeat;
    animation: wzRiseSlow 7s linear infinite;
    filter: drop-shadow(0 0 4px rgba(249,115,22,.8));
    mix-blend-mode: screen;
}

/* =====================================================================
   ROSA NEON 💗 — corações pulsantes flutuando
   ===================================================================== */
.theme-rosa-neon .profile-theme-bg,
body.body-theme-rosa-neon::before {
    opacity: .82;
    background:
        radial-gradient(circle at 20% 20%, #ec4899, transparent 55%),
        radial-gradient(circle at 80% 30%, #f472b6, transparent 55%),
        radial-gradient(circle at 50% 90%, #f0abfc, transparent 50%),
        linear-gradient(135deg, #2a0a24 0%, #4a0e3a 60%, #831843 100%);
    background-size: 220% 220%, 220% 220%, 220% 220%, 100% 100%;
    animation: themeDrift 8s ease-in-out infinite, neonPulse 2.6s ease-in-out infinite;
}
.theme-rosa-neon .profile-theme-bg::after,
body.body-theme-rosa-neon::after {
    background:
        radial-gradient(3px 3px at 15% 20%, #ffb6d5 100%, transparent 100%),
        radial-gradient(2px 2px at 65% 40%, #f472b6 100%, transparent 100%),
        radial-gradient(2.5px 2.5px at 40% 80%, #ec4899 100%, transparent 100%);
    background-size: 220px 380px, 300px 460px;
    background-repeat: repeat;
    animation: wzRiseSlow 9s linear infinite, wzTwinkle 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 6px #ec4899);
    mix-blend-mode: screen;
}

/* =====================================================================
   CYBERPUNK 🕶️ — grid + scanline + faíscas
   ===================================================================== */
.theme-cyberpunk .profile-theme-bg,
body.body-theme-cyberpunk::before {
    opacity: .85;
    background:
        repeating-linear-gradient(0deg,  rgba(34,211,238,.12) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(236,72,153,.12) 0 1px, transparent 1px 40px),
        radial-gradient(circle at 15% 20%, #22d3ee, transparent 55%),
        radial-gradient(circle at 85% 80%, #ec4899, transparent 55%),
        linear-gradient(135deg, #050418 0%, #1e1b4b 60%, #2e1065 100%);
    background-size: 40px 40px, 40px 40px, 220% 220%, 220% 220%, 100% 100%;
    animation: wzScanline 3.2s linear infinite, themeDrift 10s ease-in-out infinite;
}
.theme-cyberpunk .profile-theme-bg::after,
body.body-theme-cyberpunk::after {
    background:
        radial-gradient(2px 2px at 20% 30%, #22d3ee 100%, transparent 100%),
        radial-gradient(2px 2px at 70% 50%, #ec4899 100%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 80%, #a5f3fc 100%, transparent 100%);
    background-size: 240px 320px, 300px 400px;
    background-repeat: repeat;
    animation: wzFallFast 5s linear infinite, wzTwinkle 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px #22d3ee);
    mix-blend-mode: screen;
}

/* =====================================================================
   AURORA 🌠 — feixes de luz passando + estrelas
   ===================================================================== */
.theme-aurora .profile-theme-bg,
body.body-theme-aurora::before {
    opacity: .82;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(34,211,238,.55), transparent 55%),
        radial-gradient(ellipse at 80% 40%, rgba(168,85,247,.55), transparent 55%),
        radial-gradient(ellipse at 50% 80%, rgba(52,211,153,.55), transparent 55%),
        linear-gradient(120deg, #0b1120 0%, #1e1b4b 50%, #0b1120 100%);
    background-size: 250% 250%, 250% 250%, 250% 250%, 100% 100%;
    animation: wzAurora 9s ease-in-out infinite, themeDrift 12s ease-in-out infinite;
    filter: saturate(1.15);
}
.theme-aurora .profile-theme-bg::after,
body.body-theme-aurora::after {
    background:
        radial-gradient(1.5px 1.5px at 15% 10%, #fff 100%, transparent 100%),
        radial-gradient(1px 1px at 60% 30%, #a5f3fc 100%, transparent 100%),
        radial-gradient(1.5px 1.5px at 40% 70%, #ddd6fe 100%, transparent 100%),
        radial-gradient(1px 1px at 85% 55%, #fff 100%, transparent 100%);
    background-size: 200px 300px, 280px 420px, 240px 360px;
    background-repeat: repeat;
    animation: wzTwinkle 2.2s ease-in-out infinite, wzDrift 20s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* =====================================================================
   DIAMANTE 💎 — brilhos caindo
   ===================================================================== */
.theme-diamante .profile-theme-bg,
body.body-theme-diamante::before {
    opacity: .75;
    background:
        radial-gradient(circle at 25% 25%, rgba(224,242,254,.85), transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(165,243,252,.7), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 40%),
        linear-gradient(135deg, #082f49 0%, #0c4a6e 45%, #164e63 100%);
    background-size: 230% 230%, 230% 230%, 200% 200%, 100% 100%;
    animation: themeDrift 9s ease-in-out infinite, wzShimmer 3.2s ease-in-out infinite;
}
.theme-diamante .profile-theme-bg::after,
body.body-theme-diamante::after {
    background:
        radial-gradient(2px 2px at 10% 20%, #fff 100%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 40%, #e0f2fe 100%, transparent 100%),
        radial-gradient(2.5px 2.5px at 80% 70%, #bae6fd 100%, transparent 100%);
    background-size: 220px 380px, 280px 460px;
    background-repeat: repeat;
    animation: wzFallSlow 8s linear infinite, wzTwinkle 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px #fff);
    mix-blend-mode: screen;
}

/* =====================================================================
   LAVA 🌋 — brasas subindo intensas
   ===================================================================== */
.theme-lava .profile-theme-bg,
body.body-theme-lava::before {
    opacity: .85;
    background:
        radial-gradient(ellipse at 50% 105%, #fde047 0%, transparent 25%),
        radial-gradient(ellipse at 30% 95%, #f97316 0%, transparent 40%),
        radial-gradient(ellipse at 70% 100%, #dc2626 0%, transparent 45%),
        radial-gradient(circle at 20% 30%, rgba(251,146,60,.25), transparent 55%),
        linear-gradient(180deg, #0a0303 0%, #431407 50%, #7c2d12 100%);
    background-size: 260% 260%, 260% 260%, 260% 260%, 100% 100%, 100% 100%;
    animation: themeDrift 5s ease-in-out infinite, wzShimmer 2s ease-in-out infinite;
}
.theme-lava .profile-theme-bg::after,
body.body-theme-lava::after {
    background:
        radial-gradient(3px 3px at 20% 20%, #fde047 100%, transparent 100%),
        radial-gradient(2px 2px at 60% 50%, #f97316 100%, transparent 100%),
        radial-gradient(2.5px 2.5px at 40% 80%, #ef4444 100%, transparent 100%);
    background-size: 200px 340px, 260px 400px;
    background-repeat: repeat;
    animation: wzRiseSlow 5s linear infinite;
    filter: drop-shadow(0 0 5px #f97316);
    mix-blend-mode: screen;
}

/* =====================================================================
   SAKURA 🌸 — pétalas caindo
   ===================================================================== */
.theme-sakura .profile-theme-bg,
body.body-theme-sakura::before {
    opacity: .72;
    background:
        radial-gradient(circle at 20% 20%, #fbcfe8, transparent 40%),
        radial-gradient(circle at 80% 30%, #f9a8d4, transparent 45%),
        radial-gradient(circle at 30% 80%, #fce7f3, transparent 45%),
        radial-gradient(circle at 70% 90%, #f0abfc, transparent 45%),
        linear-gradient(135deg, #4a044e 0%, #831843 55%, #9d174d 100%);
    background-size: 230% 230%, 230% 230%, 230% 230%, 230% 230%, 100% 100%;
    animation: themeDrift 12s ease-in-out infinite;
}
.theme-sakura .profile-theme-bg::after,
body.body-theme-sakura::after {
    background:
        radial-gradient(4px 3px at 10% 10%, #fbcfe8 100%, transparent 100%),
        radial-gradient(3px 2px at 55% 40%, #f9a8d4 100%, transparent 100%),
        radial-gradient(5px 3px at 80% 70%, #fce7f3 100%, transparent 100%),
        radial-gradient(3px 2px at 30% 85%, #f0abfc 100%, transparent 100%);
    background-size: 200px 360px, 260px 440px, 300px 520px;
    background-repeat: repeat;
    animation: wzFallSlow 10s linear infinite;
    filter: drop-shadow(0 0 3px rgba(251,207,232,.9));
    mix-blend-mode: screen;
}

/* =====================================================================
   HEADER (topbar) + NAVBAR (bottom-nav) — sintonia com o tema do perfil
   Aplicado quando body.body-theme-<key> está presente (páginas de perfil).
   ===================================================================== */

/* Base translúcida para deixar o fundo animado do tema aparecer */
body[class*="body-theme-"] .topbar,
body[class*="body-theme-"] .bottom-nav,
body[class*="body-theme-"] .wz-drawer {
    background: var(--wz-theme-surface, rgba(10, 8, 18, .55)) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-color: var(--wz-theme-border, rgba(255,255,255,.10)) !important;
    box-shadow: 0 -6px 24px -12px var(--wz-theme-glow, transparent),
                0  6px 24px -12px var(--wz-theme-glow, transparent);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
body[class*="body-theme-"] .topbar { border-bottom: 1px solid var(--wz-theme-border, rgba(255,255,255,.10)) !important; }
body[class*="body-theme-"] .bottom-nav { border-top: 1px solid var(--wz-theme-border, rgba(255,255,255,.10)) !important; }

/* Logo com gradiente do tema — sobrescreve o premium-fix (que usa PNG + text-indent)
   pra voltar a mostrar a palavra "WoozChat" pintada com o gradiente do tema. */
body[class*="body-theme-"] .topbar .logo {
    background-image: var(--wz-theme-logo, linear-gradient(135deg,#fff, #c8b8ff 60%, #7c3aed)) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    /* Anula o "esconde-texto" do premium-fix.css */
    text-indent: 0 !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    /* Recupera a tipografia da logo textual */
    font-family: "Fraunces", "Plus Jakarta Sans", serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    letter-spacing: .2px !important;
    display: inline-block !important;
    filter: drop-shadow(0 0 6px var(--wz-theme-glow, transparent)) !important;
}
@media (max-width: 480px) {
    body[class*="body-theme-"] .topbar .logo { font-size: 22px !important; }
}

/* Logo no canto esquerdo no desktop (sem ficar presa no max-width central) */
@media (min-width: 900px) {
    .topbar-inner { max-width: none !important; padding-left: 22px; padding-right: 22px; }
}

/* Ícones do topbar e navbar — hover/ativo puxam a cor do tema */
body[class*="body-theme-"] .topbar-actions .icon-btn { color: var(--wz-theme-ink, #e8e6f2); }
body[class*="body-theme-"] .topbar-actions .icon-btn:hover {
    background: var(--wz-theme-hover, rgba(255,255,255,.08));
    color: var(--wz-theme-accent, #fff);
    box-shadow: 0 0 12px var(--wz-theme-glow, transparent);
}
body[class*="body-theme-"] .bottom-nav .nav-item { color: var(--wz-theme-ink, #cfcfe0); }
body[class*="body-theme-"] .bottom-nav .nav-item.active,
body[class*="body-theme-"] .bottom-nav .nav-item:hover {
    color: var(--wz-theme-accent, #fff);
    text-shadow: 0 0 10px var(--wz-theme-glow, transparent);
}
body[class*="body-theme-"] .bottom-nav .nav-item.active svg { filter: drop-shadow(0 0 6px var(--wz-theme-glow, transparent)); }

/* Botão flutuante de criar post — cor do tema */
body[class*="body-theme-"] .bottom-nav .nav-item-create .create-circle {
    background: var(--wz-theme-cta, linear-gradient(135deg, #7c3aed, #ec4899)) !important;
    box-shadow: 0 8px 24px -6px var(--wz-theme-glow, rgba(124,58,237,.5));
}

/* Badges de notificação com brilho do tema */
body[class*="body-theme-"] .nav-badge {
    background: var(--wz-theme-badge, #e11d48) !important;
    box-shadow: 0 0 8px var(--wz-theme-glow, transparent);
}

/* -------- Paletas por tema (variáveis) -------- */
body.body-theme-fogo {
    --wz-theme-surface: rgba(35, 7, 7, .55);
    --wz-theme-border: rgba(249, 115, 22, .35);
    --wz-theme-glow:   rgba(249, 115, 22, .55);
    --wz-theme-accent: #fdba74;
    --wz-theme-ink:    #fed7aa;
    --wz-theme-hover:  rgba(249, 115, 22, .15);
    --wz-theme-logo:   linear-gradient(135deg,#fde047,#f97316 55%,#ef4444);
    --wz-theme-cta:    linear-gradient(135deg,#f97316,#ef4444);
    --wz-theme-badge:  #f97316;
}
body.body-theme-rosa-neon {
    --wz-theme-surface: rgba(45, 8, 34, .55);
    --wz-theme-border: rgba(236, 72, 153, .40);
    --wz-theme-glow:   rgba(236, 72, 153, .55);
    --wz-theme-accent: #f9a8d4;
    --wz-theme-ink:    #fbcfe8;
    --wz-theme-hover:  rgba(236, 72, 153, .18);
    --wz-theme-logo:   linear-gradient(135deg,#fce7f3,#f472b6 55%,#ec4899);
    --wz-theme-cta:    linear-gradient(135deg,#ec4899,#f0abfc);
    --wz-theme-badge:  #ec4899;
}
body.body-theme-cyberpunk {
    --wz-theme-surface: rgba(6, 6, 24, .60);
    --wz-theme-border: rgba(34, 211, 238, .40);
    --wz-theme-glow:   rgba(34, 211, 238, .55);
    --wz-theme-accent: #67e8f9;
    --wz-theme-ink:    #a5f3fc;
    --wz-theme-hover:  rgba(34, 211, 238, .16);
    --wz-theme-logo:   linear-gradient(135deg,#22d3ee,#a855f7 60%,#ec4899);
    --wz-theme-cta:    linear-gradient(135deg,#22d3ee,#ec4899);
    --wz-theme-badge:  #ec4899;
}
body.body-theme-aurora {
    --wz-theme-surface: rgba(6, 20, 30, .55);
    --wz-theme-border: rgba(94, 234, 212, .40);
    --wz-theme-glow:   rgba(94, 234, 212, .50);
    --wz-theme-accent: #99f6e4;
    --wz-theme-ink:    #ccfbf1;
    --wz-theme-hover:  rgba(94, 234, 212, .14);
    --wz-theme-logo:   linear-gradient(135deg,#a5f3fc,#5eead4 50%,#a78bfa);
    --wz-theme-cta:    linear-gradient(135deg,#5eead4,#a78bfa);
    --wz-theme-badge:  #5eead4;
}
body.body-theme-diamante {
    --wz-theme-surface: rgba(12, 18, 32, .55);
    --wz-theme-border: rgba(191, 219, 254, .40);
    --wz-theme-glow:   rgba(191, 219, 254, .55);
    --wz-theme-accent: #dbeafe;
    --wz-theme-ink:    #e0e7ff;
    --wz-theme-hover:  rgba(191, 219, 254, .14);
    --wz-theme-logo:   linear-gradient(135deg,#ffffff,#bfdbfe 55%,#a5b4fc);
    --wz-theme-cta:    linear-gradient(135deg,#bfdbfe,#a5b4fc);
    --wz-theme-badge:  #60a5fa;
}
body.body-theme-lava {
    --wz-theme-surface: rgba(30, 4, 4, .60);
    --wz-theme-border: rgba(220, 38, 38, .45);
    --wz-theme-glow:   rgba(220, 38, 38, .60);
    --wz-theme-accent: #fca5a5;
    --wz-theme-ink:    #fecaca;
    --wz-theme-hover:  rgba(220, 38, 38, .18);
    --wz-theme-logo:   linear-gradient(135deg,#fde047,#dc2626 55%,#7f1d1d);
    --wz-theme-cta:    linear-gradient(135deg,#dc2626,#f59e0b);
    --wz-theme-badge:  #dc2626;
}
body.body-theme-sakura {
    --wz-theme-surface: rgba(38, 18, 30, .55);
    --wz-theme-border: rgba(251, 207, 232, .45);
    --wz-theme-glow:   rgba(251, 207, 232, .55);
    --wz-theme-accent: #fbcfe8;
    --wz-theme-ink:    #fce7f3;
    --wz-theme-hover:  rgba(251, 207, 232, .16);
    --wz-theme-logo:   linear-gradient(135deg,#fce7f3,#f9a8d4 60%,#f0abfc);
    --wz-theme-cta:    linear-gradient(135deg,#f9a8d4,#f0abfc);
    --wz-theme-badge:  #f472b6;
}

/* -------- Paletas para os temas "antigos" (aplicam se existirem) -------- */
body.body-theme-oceano {
    --wz-theme-surface: rgba(6, 20, 36, .55);
    --wz-theme-border: rgba(56, 189, 248, .40);
    --wz-theme-glow:   rgba(56, 189, 248, .55);
    --wz-theme-accent: #7dd3fc;
    --wz-theme-ink:    #bae6fd;
    --wz-theme-hover:  rgba(56, 189, 248, .16);
    --wz-theme-logo:   linear-gradient(135deg,#e0f2fe,#38bdf8 55%,#0284c7);
    --wz-theme-cta:    linear-gradient(135deg,#38bdf8,#0284c7);
    --wz-theme-badge:  #0ea5e9;
}
body.body-theme-sunset {
    --wz-theme-surface: rgba(40, 14, 8, .55);
    --wz-theme-border: rgba(251, 146, 60, .40);
    --wz-theme-glow:   rgba(251, 146, 60, .55);
    --wz-theme-accent: #fdba74;
    --wz-theme-ink:    #fed7aa;
    --wz-theme-hover:  rgba(251, 146, 60, .16);
    --wz-theme-logo:   linear-gradient(135deg,#fde68a,#fb923c 55%,#e11d48);
    --wz-theme-cta:    linear-gradient(135deg,#fb923c,#e11d48);
    --wz-theme-badge:  #fb923c;
}
body.body-theme-neon {
    --wz-theme-surface: rgba(10, 6, 26, .60);
    --wz-theme-border: rgba(168, 85, 247, .45);
    --wz-theme-glow:   rgba(168, 85, 247, .55);
    --wz-theme-accent: #d8b4fe;
    --wz-theme-ink:    #e9d5ff;
    --wz-theme-hover:  rgba(168, 85, 247, .18);
    --wz-theme-logo:   linear-gradient(135deg,#f0abfc,#a855f7 55%,#22d3ee);
    --wz-theme-cta:    linear-gradient(135deg,#a855f7,#22d3ee);
    --wz-theme-badge:  #a855f7;
}
body.body-theme-floresta {
    --wz-theme-surface: rgba(6, 24, 14, .58);
    --wz-theme-border: rgba(34, 197, 94, .40);
    --wz-theme-glow:   rgba(34, 197, 94, .50);
    --wz-theme-accent: #86efac;
    --wz-theme-ink:    #bbf7d0;
    --wz-theme-hover:  rgba(34, 197, 94, .16);
    --wz-theme-logo:   linear-gradient(135deg,#d9f99d,#22c55e 55%,#166534);
    --wz-theme-cta:    linear-gradient(135deg,#22c55e,#15803d);
    --wz-theme-badge:  #22c55e;
}
body.body-theme-galaxia {
    --wz-theme-surface: rgba(10, 6, 30, .60);
    --wz-theme-border: rgba(139, 92, 246, .45);
    --wz-theme-glow:   rgba(139, 92, 246, .55);
    --wz-theme-accent: #c4b5fd;
    --wz-theme-ink:    #ddd6fe;
    --wz-theme-hover:  rgba(139, 92, 246, .18);
    --wz-theme-logo:   linear-gradient(135deg,#e9d5ff,#8b5cf6 55%,#4c1d95);
    --wz-theme-cta:    linear-gradient(135deg,#8b5cf6,#ec4899);
    --wz-theme-badge:  #8b5cf6;
}
body.body-theme-dourado {
    --wz-theme-surface: rgba(34, 22, 4, .58);
    --wz-theme-border: rgba(250, 204, 21, .45);
    --wz-theme-glow:   rgba(250, 204, 21, .55);
    --wz-theme-accent: #fde68a;
    --wz-theme-ink:    #fef3c7;
    --wz-theme-hover:  rgba(250, 204, 21, .16);
    --wz-theme-logo:   linear-gradient(135deg,#fffbeb,#facc15 55%,#b45309);
    --wz-theme-cta:    linear-gradient(135deg,#facc15,#b45309);
    --wz-theme-badge:  #facc15;
}
body.body-theme-arcoiris {
    --wz-theme-surface: rgba(20, 10, 32, .55);
    --wz-theme-border: rgba(244, 114, 182, .40);
    --wz-theme-glow:   rgba(244, 114, 182, .50);
    --wz-theme-accent: #fda4af;
    --wz-theme-ink:    #fecdd3;
    --wz-theme-hover:  rgba(244, 114, 182, .16);
    --wz-theme-logo:   linear-gradient(135deg,#f87171,#facc15 25%,#4ade80 50%,#38bdf8 75%,#a855f7);
    --wz-theme-cta:    linear-gradient(135deg,#f472b6,#38bdf8);
    --wz-theme-badge:  #f472b6;
}

/* =====================================================================
   TEMAS ANTIGOS — fundo animado + partículas (re-adicionados)
   ===================================================================== */

/* OCEANO 🌊 — bolhas subindo */
.theme-oceano .profile-theme-bg,
body.body-theme-oceano::before {
    opacity: .85;
    background:
        radial-gradient(circle at 20% 80%, rgba(56,189,248,.55), transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(14,165,233,.45), transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(6,182,212,.35), transparent 55%),
        linear-gradient(180deg,#03192e 0%,#062c4a 55%,#0c4a6e 100%);
    background-size: 220% 220%,220% 220%,220% 220%,100% 100%;
    animation: themeDrift 9s ease-in-out infinite;
}
.theme-oceano .profile-theme-bg::after,
body.body-theme-oceano::after {
    background:
        radial-gradient(3px 3px at 10% 90%, #7dd3fc 100%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, #bae6fd 100%, transparent 100%),
        radial-gradient(4px 4px at 70% 60%, #38bdf8 100%, transparent 100%),
        radial-gradient(2px 2px at 85% 30%, #a5f3fc 100%, transparent 100%);
    background-size: 220px 400px, 300px 480px, 260px 420px, 320px 500px;
    background-repeat: repeat;
    animation: wzRiseSlow 9s linear infinite;
    filter: drop-shadow(0 0 4px rgba(125,211,252,.9));
    mix-blend-mode: screen;
}

/* SUNSET 🌇 — poeira dourada */
.theme-sunset .profile-theme-bg,
body.body-theme-sunset::before {
    opacity: .85;
    background:
        radial-gradient(ellipse at 30% 90%, #fbbf24 0%, transparent 45%),
        radial-gradient(ellipse at 70% 100%, #f97316 0%, transparent 45%),
        radial-gradient(circle at 50% 20%, #e11d48 0%, transparent 60%),
        linear-gradient(180deg,#1b0b18 0%,#4c0519 45%,#7c2d12 100%);
    background-size: 220% 220%,220% 220%,220% 220%,100% 100%;
    animation: themeDrift 8s ease-in-out infinite, wzShimmer 3s ease-in-out infinite;
}
.theme-sunset .profile-theme-bg::after,
body.body-theme-sunset::after {
    background:
        radial-gradient(2px 2px at 15% 20%, #fde68a 100%, transparent 100%),
        radial-gradient(3px 3px at 55% 55%, #fbbf24 100%, transparent 100%),
        radial-gradient(2px 2px at 80% 85%, #fb923c 100%, transparent 100%);
    background-size: 240px 420px, 300px 500px, 260px 440px;
    background-repeat: repeat;
    animation: wzDrift 12s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(251,191,36,.9));
    mix-blend-mode: screen;
}

/* NEON 💜 — pulsos coloridos */
.theme-neon .profile-theme-bg,
body.body-theme-neon::before {
    opacity: .88;
    background:
        radial-gradient(circle at 25% 30%, #a855f7 0%, transparent 45%),
        radial-gradient(circle at 75% 70%, #22d3ee 0%, transparent 45%),
        radial-gradient(circle at 50% 90%, #ec4899 0%, transparent 55%),
        linear-gradient(135deg,#0b0620 0%,#1a0640 60%,#2e1065 100%);
    background-size: 220% 220%,220% 220%,220% 220%,100% 100%;
    animation: themeDrift 7s ease-in-out infinite, wzShimmer 2.4s ease-in-out infinite;
}
.theme-neon .profile-theme-bg::after,
body.body-theme-neon::after {
    background:
        radial-gradient(3px 3px at 20% 30%, #d8b4fe 100%, transparent 100%),
        radial-gradient(2px 2px at 60% 60%, #22d3ee 100%, transparent 100%),
        radial-gradient(3px 3px at 85% 20%, #f0abfc 100%, transparent 100%);
    background-size: 240px 420px, 300px 480px, 280px 460px;
    background-repeat: repeat;
    animation: wzTwinkle 2.6s ease-in-out infinite, wzDrift 10s linear infinite;
    filter: drop-shadow(0 0 6px rgba(168,85,247,.9));
    mix-blend-mode: screen;
}

/* FLORESTA 🌿 — folhas caindo */
.theme-floresta .profile-theme-bg,
body.body-theme-floresta::before {
    opacity: .88;
    background:
        radial-gradient(circle at 30% 25%, #22c55e 0%, transparent 45%),
        radial-gradient(circle at 70% 75%, #15803d 0%, transparent 50%),
        radial-gradient(circle at 20% 90%, #a3e635 0%, transparent 50%),
        linear-gradient(160deg,#031a0c 0%,#052e1a 50%,#14532d 100%);
    background-size: 220% 220%,220% 220%,220% 220%,100% 100%;
    animation: themeDrift 10s ease-in-out infinite;
}
.theme-floresta .profile-theme-bg::after,
body.body-theme-floresta::after {
    background:
        radial-gradient(3px 5px at 15% 10%, #86efac 100%, transparent 100%),
        radial-gradient(4px 3px at 60% 30%, #bbf7d0 100%, transparent 100%),
        radial-gradient(3px 5px at 80% 65%, #22c55e 100%, transparent 100%),
        radial-gradient(4px 3px at 30% 80%, #4ade80 100%, transparent 100%);
    background-size: 220px 380px, 280px 460px, 320px 520px, 260px 420px;
    background-repeat: repeat;
    animation: wzFallSlow 12s linear infinite;
    filter: drop-shadow(0 0 3px rgba(134,239,172,.8));
    mix-blend-mode: screen;
}

/* GALÁXIA 🌌 — estrelas piscando */
.theme-galaxia .profile-theme-bg,
body.body-theme-galaxia::before {
    opacity: .90;
    background:
        radial-gradient(ellipse at 20% 30%, #8b5cf6 0%, transparent 45%),
        radial-gradient(ellipse at 80% 70%, #ec4899 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139,92,246,.4), transparent 60%),
        linear-gradient(180deg,#050317 0%,#0a0630 55%,#1e0a4d 100%);
    background-size: 220% 220%,220% 220%,100% 100%,100% 100%;
    animation: themeDrift 12s ease-in-out infinite;
}
.theme-galaxia .profile-theme-bg::after,
body.body-theme-galaxia::after {
    background:
        radial-gradient(1.5px 1.5px at 12% 18%, #ffffff 100%, transparent 100%),
        radial-gradient(1px 1px at 35% 62%, #e9d5ff 100%, transparent 100%),
        radial-gradient(2px 2px at 68% 30%, #c4b5fd 100%, transparent 100%),
        radial-gradient(1.5px 1.5px at 82% 78%, #ffffff 100%, transparent 100%),
        radial-gradient(1px 1px at 50% 88%, #f0abfc 100%, transparent 100%);
    background-size: 200px 320px, 260px 400px, 300px 460px, 240px 380px, 320px 500px;
    background-repeat: repeat;
    animation: wzTwinkle 3s ease-in-out infinite, wzDrift 20s linear infinite;
    filter: drop-shadow(0 0 4px rgba(196,181,253,.9));
    mix-blend-mode: screen;
}

/* DOURADO ✨ — brilhos dourados */
.theme-dourado .profile-theme-bg,
body.body-theme-dourado::before {
    opacity: .90;
    background:
        radial-gradient(ellipse at 25% 25%, #facc15 0%, transparent 45%),
        radial-gradient(ellipse at 75% 75%, #b45309 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(250,204,21,.35), transparent 60%),
        linear-gradient(135deg,#1a1204 0%,#3d2a08 50%,#78350f 100%);
    background-size: 220% 220%,220% 220%,100% 100%,100% 100%;
    animation: themeDrift 8s ease-in-out infinite, wzShimmer 2.8s ease-in-out infinite;
}
.theme-dourado .profile-theme-bg::after,
body.body-theme-dourado::after {
    background:
        radial-gradient(2px 2px at 15% 25%, #fde68a 100%, transparent 100%),
        radial-gradient(2.5px 2.5px at 55% 55%, #facc15 100%, transparent 100%),
        radial-gradient(3px 3px at 82% 20%, #fffbeb 100%, transparent 100%),
        radial-gradient(2px 2px at 35% 85%, #eab308 100%, transparent 100%);
    background-size: 220px 380px, 280px 460px, 300px 480px, 260px 420px;
    background-repeat: repeat;
    animation: wzTwinkle 2.4s ease-in-out infinite, wzDrift 14s linear infinite;
    filter: drop-shadow(0 0 5px rgba(250,204,21,.9));
    mix-blend-mode: screen;
}

/* ARCO-ÍRIS 🌈 — pontos coloridos */
.theme-arcoiris .profile-theme-bg,
body.body-theme-arcoiris::before {
    opacity: .85;
    background:
        radial-gradient(circle at 15% 20%, #f87171 0%, transparent 40%),
        radial-gradient(circle at 40% 30%, #facc15 0%, transparent 40%),
        radial-gradient(circle at 65% 60%, #4ade80 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, #38bdf8 0%, transparent 40%),
        radial-gradient(circle at 50% 95%, #a855f7 0%, transparent 45%),
        linear-gradient(135deg,#150822 0%,#2d0a3d 100%);
    background-size: 220% 220%,220% 220%,220% 220%,220% 220%,220% 220%,100% 100%;
    animation: themeDrift 9s ease-in-out infinite, wzShimmer 3s ease-in-out infinite;
}
.theme-arcoiris .profile-theme-bg::after,
body.body-theme-arcoiris::after {
    background:
        radial-gradient(3px 3px at 12% 15%, #f87171 100%, transparent 100%),
        radial-gradient(3px 3px at 32% 55%, #facc15 100%, transparent 100%),
        radial-gradient(3px 3px at 58% 30%, #4ade80 100%, transparent 100%),
        radial-gradient(3px 3px at 78% 68%, #38bdf8 100%, transparent 100%),
        radial-gradient(3px 3px at 45% 85%, #a855f7 100%, transparent 100%);
    background-size: 220px 380px, 260px 440px, 300px 480px, 280px 460px, 240px 400px;
    background-repeat: repeat;
    animation: wzDrift 12s linear infinite, wzTwinkle 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(244,114,182,.9));
    mix-blend-mode: screen;
}

/* Garante que a camada de fundo dos temas fique atrás de tudo */
body[class*="body-theme-"]::before {
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;
    content: "" !important;
}
body[class*="body-theme-"]::after {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* keyframe themeDrift caso não exista */
@keyframes themeDrift {
    0%,100% { background-position: 0% 50%, 100% 50%, 50% 0%, 0 0, 0 0, 0 0; }
    50%     { background-position: 100% 50%, 0% 50%, 50% 100%, 0 0, 0 0, 0 0; }
}
@keyframes neonPulse {
    0%,100% { filter: brightness(1) saturate(1.1); }
    50%     { filter: brightness(1.3) saturate(1.5); }
}