/* Premium live theme backgrounds — pointer-events:none, behind #app */

.theme-fx{
    position:fixed;inset:0;z-index:0;overflow:hidden;
    pointer-events:none;contain:strict;
}

.theme-fx--sakura .fx-bloom{
    position:absolute;border-radius:50%;filter:blur(48px);opacity:.35;
    animation:fxBloom 8s ease-in-out infinite alternate;
}
.theme-fx--sakura .fx-bloom-1{width:180px;height:180px;background:#f9a8d4;top:8%;left:-40px}
.theme-fx--sakura .fx-bloom-2{width:140px;height:140px;background:#fbcfe8;bottom:18%;right:-30px;animation-delay:-3s}
.theme-fx--sakura .fx-petal{
    position:absolute;top:-5vh;width:11px;height:7px;border-radius:50% 2px 50% 2px;
    background:linear-gradient(135deg,#fce7f3 0%,#f9a8d4 45%,#f472b6 100%);
    box-shadow:0 0 6px rgba(244,114,182,.35);
    opacity:0;animation:fxPetalFall linear infinite;
    will-change:transform,opacity;
}
@keyframes fxPetalFall{
    0%{transform:translateY(-8vh) rotate(0deg) translateX(0) scale(.8);opacity:0}
    8%{opacity:.85}
    100%{transform:translateY(108vh) rotate(720deg) translateX(var(--drift)) scale(1.05);opacity:0}
}
@keyframes fxBloom{
    0%{transform:scale(1) translate(0,0);opacity:.28}
    100%{transform:scale(1.15) translate(12px,-8px);opacity:.42}
}

.theme-fx--neon .fx-neon-grid{
    position:absolute;inset:-20%;
    background:
        linear-gradient(90deg,rgba(163,230,53,.04) 1px,transparent 1px),
        linear-gradient(rgba(163,230,53,.04) 1px,transparent 1px);
    background-size:42px 42px;
    animation:fxGridDrift 24s linear infinite;
    mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 75%);
}
.theme-fx--neon .fx-neon-scan{
    position:absolute;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,rgba(163,230,53,.9),rgba(56,189,248,.6),transparent);
    box-shadow:0 0 18px rgba(163,230,53,.55);
    animation:fxNeonScan 5s ease-in-out infinite;
}
.theme-fx--neon .fx-spark{
    position:absolute;width:3px;height:3px;border-radius:50%;
    background:#d9f99d;box-shadow:0 0 10px #a3e635,0 0 20px rgba(163,230,53,.5);
    animation:fxSparkPop ease-out infinite;
}
@keyframes fxGridDrift{
    0%{transform:perspective(400px) rotateX(58deg) translateY(0)}
    100%{transform:perspective(400px) rotateX(58deg) translateY(42px)}
}
@keyframes fxNeonScan{
    0%,100%{top:-2%;opacity:0}
    10%{opacity:1}
    50%{top:52%;opacity:.9}
    90%{opacity:0}
}
@keyframes fxSparkPop{
    0%{transform:scale(0);opacity:0}
    15%{transform:scale(1.4);opacity:1}
    100%{transform:scale(0);opacity:0}
}

.theme-fx--lava .fx-heat{
    position:absolute;inset:0;
    background:radial-gradient(ellipse 90% 55% at 50% 100%,rgba(249,115,22,.22) 0%,transparent 65%);
    animation:fxHeatPulse 4s ease-in-out infinite;
}
.theme-fx--lava .fx-ember{
    position:absolute;bottom:-4px;width:var(--sz);height:var(--sz);border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#fef3c7,#f97316 55%,#dc2626);
    box-shadow:0 0 12px rgba(249,115,22,.65);
    animation:fxEmberRise linear infinite;
    will-change:transform,opacity;
}
@keyframes fxHeatPulse{
    0%,100%{opacity:.55;transform:scaleY(1)}
    50%{opacity:.85;transform:scaleY(1.06)}
}
@keyframes fxEmberRise{
    0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
    10%{opacity:.95}
    100%{transform:translateY(-105vh) translateX(var(--drift)) scale(.2);opacity:0}
}

.theme-fx--candy .fx-bubble{
    position:absolute;bottom:-30px;border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
    background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.45),rgba(236,72,153,.15) 50%,rgba(244,114,182,.08));
    animation:fxBubbleFloat linear infinite;
    will-change:transform,opacity;
}
.theme-fx--candy .fx-sparkle{
    position:absolute;font-size:var(--fs);opacity:0;
    animation:fxSparkleTwinkle ease-in-out infinite;
    filter:drop-shadow(0 0 4px rgba(249,168,212,.8));
}
@keyframes fxBubbleFloat{
    0%{transform:translateY(0) scale(.7);opacity:0}
    12%{opacity:.75}
    100%{transform:translateY(-110vh) scale(1.1);opacity:0}
}
@keyframes fxSparkleTwinkle{
    0%,100%{opacity:0;transform:scale(.5) rotate(0deg)}
    50%{opacity:.9;transform:scale(1) rotate(180deg)}
}

/* Premium polish on cards */
[data-theme="sakura"] .glass-card,
[data-theme="neon"] .glass-card,
[data-theme="lava"] .glass-card,
[data-theme="candy"] .glass-card{
    box-shadow:0 4px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="sakura"] .btn-primary{box-shadow:0 4px 20px rgba(244,114,182,.25)}
[data-theme="neon"] .btn-primary{box-shadow:0 4px 20px rgba(163,230,53,.22)}
[data-theme="lava"] .btn-primary{box-shadow:0 4px 20px rgba(249,115,22,.28)}
[data-theme="candy"] .btn-primary{box-shadow:0 4px 20px rgba(236,72,153,.25)}

[data-theme="sakura"] .hub-sub-btn.active,
[data-theme="sakura"] .planner-view-btn.active,
[data-theme="sakura"] .planner-filter.active,
[data-theme="sakura"] .planner-day-btn.active,
[data-theme="sakura"] .planner-chip.active,
[data-theme="sakura"] .social-tab-btn.active{box-shadow:0 2px 14px rgba(244,114,182,.35)}
[data-theme="neon"] .hub-sub-btn.active,
[data-theme="neon"] .planner-view-btn.active,
[data-theme="neon"] .planner-filter.active,
[data-theme="neon"] .planner-day-btn.active,
[data-theme="neon"] .planner-chip.active,
[data-theme="neon"] .social-tab-btn.active{box-shadow:0 2px 14px rgba(163,230,53,.32)}
[data-theme="lava"] .hub-sub-btn.active,
[data-theme="lava"] .planner-view-btn.active,
[data-theme="lava"] .planner-filter.active,
[data-theme="lava"] .planner-day-btn.active,
[data-theme="lava"] .planner-chip.active,
[data-theme="lava"] .social-tab-btn.active{box-shadow:0 2px 14px rgba(249,115,22,.35)}
[data-theme="candy"] .hub-sub-btn.active,
[data-theme="candy"] .planner-view-btn.active,
[data-theme="candy"] .planner-filter.active,
[data-theme="candy"] .planner-day-btn.active,
[data-theme="candy"] .planner-chip.active,
[data-theme="candy"] .social-tab-btn.active{box-shadow:0 2px 14px rgba(236,72,153,.32)}

.theme-live-badge{
    display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;
    padding:2px 7px;border-radius:20px;margin-left:6px;vertical-align:middle;
    background:linear-gradient(135deg,rgba(251,191,36,.25),rgba(244,114,182,.2));
    border:1px solid rgba(251,191,36,.35);color:#fde68a;
}

@media (prefers-reduced-motion:reduce){
    .theme-fx *{animation:none!important}
    .theme-fx .fx-bloom{opacity:.2}
}

/* ── Live profile header backgrounds ── */
.profile-bg-fx{
    position:absolute;inset:0;z-index:0;overflow:hidden;
    pointer-events:none;
}
.profile-header--live{min-height:210px}
.profile-header--live .profile-bg-overlay{
    background:linear-gradient(to bottom,transparent 25%,rgba(var(--bg-rgb,13,13,20),.88) 100%);
}
.profile-bg-fx--sakura_live .pbg-bloom{
    position:absolute;border-radius:50%;filter:blur(36px);opacity:.45;
    animation:pbgBloom 7s ease-in-out infinite alternate;
}
.profile-bg-fx--sakura_live .pbg-bloom-1{width:120px;height:120px;background:#f9a8d4;top:10%;right:8%}
.profile-bg-fx--sakura_live .pbg-petal{
    position:absolute;top:-4px;width:9px;height:6px;border-radius:50% 2px 50% 2px;
    background:linear-gradient(135deg,#fce7f3,#f9a8d4,#f472b6);
    opacity:0;animation:pbgPetalFall linear infinite;
}
@keyframes pbgPetalFall{
    0%{transform:translateY(-10px) rotate(0deg) translateX(0);opacity:0}
    10%{opacity:.9}
    100%{transform:translateY(220px) rotate(540deg) translateX(var(--drift));opacity:0}
}
@keyframes pbgBloom{
    0%{transform:scale(1);opacity:.35}
    100%{transform:scale(1.12);opacity:.55}
}

.profile-bg-fx--neon_live .pbg-neon-grid{
    position:absolute;inset:-30%;
    background:
        linear-gradient(90deg,rgba(163,230,53,.07) 1px,transparent 1px),
        linear-gradient(rgba(163,230,53,.07) 1px,transparent 1px);
    background-size:28px 28px;
    animation:pbgGridDrift 18s linear infinite;
}
.profile-bg-fx--neon_live .pbg-neon-scan{
    position:absolute;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,rgba(163,230,53,.85),transparent);
    box-shadow:0 0 12px rgba(163,230,53,.5);
    animation:pbgNeonScan 4s ease-in-out infinite;
}
.profile-bg-fx--neon_live .pbg-spark{
    position:absolute;width:3px;height:3px;border-radius:50%;
    background:#d9f99d;box-shadow:0 0 8px #a3e635;
    animation:pbgSparkPop ease-out infinite;
}
@keyframes pbgGridDrift{
    0%{transform:perspective(300px) rotateX(52deg) translateY(0)}
    100%{transform:perspective(300px) rotateX(52deg) translateY(28px)}
}
@keyframes pbgNeonScan{
    0%,100%{top:-2%;opacity:0}
    15%{opacity:1}
    55%{top:55%;opacity:.85}
}
@keyframes pbgSparkPop{
    0%{transform:scale(0);opacity:0}
    20%{transform:scale(1.3);opacity:1}
    100%{transform:scale(0);opacity:0}
}

.profile-bg-fx--lava_live .pbg-heat{
    position:absolute;inset:0;
    background:radial-gradient(ellipse 90% 60% at 50% 100%,rgba(249,115,22,.28),transparent 68%);
    animation:pbgHeatPulse 3.5s ease-in-out infinite;
}
.profile-bg-fx--lava_live .pbg-ember{
    position:absolute;bottom:0;width:var(--sz);height:var(--sz);border-radius:50%;
    background:radial-gradient(circle,#fef3c7,#f97316 55%,#dc2626);
    box-shadow:0 0 10px rgba(249,115,22,.6);
    animation:pbgEmberRise linear infinite;
}
@keyframes pbgHeatPulse{
    0%,100%{opacity:.5;transform:scaleY(1)}
    50%{opacity:.8;transform:scaleY(1.05)}
}
@keyframes pbgEmberRise{
    0%{transform:translateY(0) translateX(0);opacity:0}
    12%{opacity:.95}
    100%{transform:translateY(-200px) translateX(var(--drift)) scale(.25);opacity:0}
}

.profile-bg-fx--stars_live .pbg-star{
    position:absolute;border-radius:50%;
    background:#fff;box-shadow:0 0 6px #fff,0 0 12px rgba(147,197,253,.8);
    animation:pbgStarTwinkle ease-in-out infinite;
}
@keyframes pbgStarTwinkle{
    0%,100%{opacity:.25;transform:scale(.8)}
    50%{opacity:1;transform:scale(1.2)}
}

.profile-bg-fx--snow_live .pbg-snowflake{
    position:absolute;top:-12px;color:rgba(255,255,255,.85);
    text-shadow:0 0 6px rgba(186,230,253,.6);
    opacity:0;animation:pbgSnowFall linear infinite;
    pointer-events:none;line-height:1;
}
@keyframes pbgSnowFall{
    0%{transform:translateY(-8px) rotate(0deg) translateX(0);opacity:0}
    8%{opacity:.85}
    100%{transform:translateY(220px) rotate(360deg) translateX(var(--drift));opacity:0}
}

.shop-bg-live-thumb{
    position:relative;overflow:hidden;
    width:36px;height:36px;border-radius:8px;flex-shrink:0;
}
.shop-bg-thumb.bg-thumb-live,
.shop-bg-live-thumb{
    position:relative;overflow:hidden;
}
.shop-bg-live-preview{
    position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;
}
.shop-bg-live-thumb .profile-bg-fx{position:absolute;inset:0;border-radius:8px}
.shop-bg-live-badge{
    position:absolute;bottom:2px;right:2px;font-size:8px;
    background:rgba(0,0,0,.55);padding:1px 4px;border-radius:6px;color:#fde68a;
}

@media (prefers-reduced-motion:reduce){
    .profile-bg-fx *{animation:none!important}
}