#app-loader{z-index:999990;background:color-mix(in srgb,var(--bg_main) 94%,#05060a);backdrop-filter:blur(12px);overflow:hidden;isolation:isolate}
#app-loader:not(.loading-style-3)::before,#app-loader:not(.loading-style-3)::after{content:none!important;display:none!important}
#app-loader:not(.loading-style-3)>.orbit3,#app-loader:not(.loading-style-3)>.loader-glow,#app-loader:not(.loading-style-3)>.loader-logo{display:none!important}
#app-loader .loading-copy{position:absolute;left:50%;top:calc(50% + 112px);transform:translateX(-50%);width:min(320px,78vw);text-align:center;z-index:8}
#app-loader .loading-copy strong{display:block;color:var(--main)!important;font-size:15px;font-weight:700;letter-spacing:.02em}
#app-loader .loading-copy small{display:block;margin-top:5px;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
#app-loader.loading-style-1{flex-direction:column}
#app-loader.loading-style-1::before{content:""!important;display:block!important;position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--sub) 11%,transparent),transparent 25%),radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--main) 5%,transparent),transparent 42%);animation:basicAmbient 5s ease-in-out infinite}
#app-loader .basic-shell{position:relative;width:108px;height:108px;display:grid;place-items:center}
#app-loader .basic-halo{position:absolute;inset:2px;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 26%,color-mix(in srgb,var(--sub) 82%,transparent) 42%,var(--main) 55%,color-mix(in srgb,var(--sub) 72%,transparent) 67%,transparent 80%);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--sub) 38%,transparent));animation:basicSpin 1.9s linear infinite;-webkit-mask:radial-gradient(circle,transparent 67%,#000 69%,#000 71%,transparent 73%);mask:radial-gradient(circle,transparent 67%,#000 69%,#000 71%,transparent 73%)}
#app-loader .basic-halo::after{content:"";position:absolute;inset:12px;border-radius:50%;border:1px solid color-mix(in srgb,var(--sub) 17%,transparent)}
#app-loader .basic-logo-wrap{position:relative;width:58px;height:58px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;box-shadow:none;animation:basicFloat 2.8s ease-in-out infinite}
#app-loader .spa-basic-logo{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--main) 26%,transparent))}
#app-loader .spa-basic-track{position:absolute;left:50%;top:calc(50% + 104px);transform:translateX(-50%);width:min(168px,52vw);height:2px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--sub) 12%,transparent)}
#app-loader .spa-basic-bar{width:38%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--sub),var(--main),transparent);box-shadow:0 0 14px var(--sub);transform:translateX(-120%)}
#app-loader.active .spa-basic-bar{animation:spaBasicProgress 1.35s cubic-bezier(.65,0,.35,1) infinite}
#app-loader .basic-status{top:calc(50% + 67px)}
#app-loader .basic-status strong{font-size:11px;font-weight:600}
#app-loader .basic-status small{margin-top:3px;font-size:8px;letter-spacing:.16em}

#app-loader.loading-style-4{background:color-mix(in srgb,var(--bg_main) 96%,#000)}
#app-loader .loading-basic-logo{display:block;width:min(230px,54vw);height:min(130px,24vh);object-fit:contain;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--main) 34%,transparent));animation:loadingBasicLogo 1.8s ease-in-out infinite;will-change:transform,filter}

#app-loader.loading-style-2{background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--sub) 14%,#05070c),#030409 66%)}
#app-loader .cyber-core{position:relative;width:164px;height:164px}
#app-loader .cyber-glow{position:absolute;inset:-36px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sub) 30%,transparent),transparent 67%);filter:blur(13px);animation:techPulse 2s ease-in-out infinite}
#app-loader .cyber-ring,#app-loader .cyber-ring-glitch,#app-loader .cyber-scan{position:absolute;border-radius:50%}
#app-loader .cyber-ring{inset:0;border:2px solid rgba(255,255,255,.08);border-top-color:var(--main);border-right-color:var(--sub);box-shadow:0 0 18px color-mix(in srgb,var(--sub) 55%,transparent);animation:techSpin 1.3s linear infinite}
#app-loader .cyber-ring-glitch{inset:16px;border:1px dashed color-mix(in srgb,var(--main) 70%,transparent);animation:techSpin 2.2s linear infinite reverse}
#app-loader .cyber-scan{inset:-8px;background:conic-gradient(transparent 0 72%,color-mix(in srgb,var(--sub) 52%,transparent),transparent 84%);animation:techSpin 1.7s linear infinite;mix-blend-mode:screen}
#app-loader .cyber-logo{position:absolute;inset:40px;border-radius:24px;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--bg_sub) 88%,#000);border:1px solid color-mix(in srgb,var(--main) 45%,transparent);box-shadow:inset 0 0 22px rgba(0,0,0,.55),0 0 20px color-mix(in srgb,var(--main) 32%,transparent)}
#app-loader .cyber-logo img{width:66%;height:66%;object-fit:contain}
#app-loader .tech-ticks{position:absolute;inset:-17px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--sub) 65%,transparent) 0 1deg,transparent 1deg 12deg);-webkit-mask:radial-gradient(circle,transparent 72%,#000 73%);animation:techSpin 8s linear infinite reverse}

#app-loader .event-scene{position:relative;width:min(360px,88vw);height:310px;display:flex;align-items:center;justify-content:center;z-index:2}
#app-loader .event-logo{position:absolute;left:50%;top:50%;width:88px;height:88px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:26px;background:rgba(5,7,12,.72);border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 45px rgba(0,0,0,.3);z-index:5}
#app-loader .event-logo img{width:62px;height:62px;object-fit:contain}
#app-loader .event-title{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);white-space:nowrap;text-align:center;color:var(--main)!important;font-size:18px;font-weight:700;letter-spacing:.03em;text-shadow:0 3px 18px rgba(0,0,0,.4)}
#app-loader .event-title small{display:block;margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.18em;color:rgba(255,255,255,.6);text-transform:uppercase}

/* Christmas: snow globe and garland lights */
#app-loader.loading-style-11{background:radial-gradient(circle at 50% 42%,#17452f 0,#08261d 38%,#03120e 100%)}
#app-loader .xmas-globe{position:absolute;width:192px;height:192px;border-radius:50%;border:2px solid rgba(255,255,255,.38);background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.2),transparent 28%),rgba(7,40,29,.5);box-shadow:inset 0 0 35px rgba(255,255,255,.08),0 0 45px rgba(235,53,68,.18)}
#app-loader .xmas-globe::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:repeating-conic-gradient(#e63946 0 8deg,#fff 8deg 14deg,#1ca35b 14deg 24deg);-webkit-mask:radial-gradient(circle,transparent 69%,#000 70%);animation:xmasTurn 8s linear infinite}
#app-loader .xmas-globe::after{content:"❄  ·  ❄  ·  ❄";position:absolute;inset:26px;color:rgba(255,255,255,.86);font-size:20px;letter-spacing:10px;line-height:115px;text-align:center;animation:xmasSnow 2.4s ease-in-out infinite}
#app-loader .xmas-lights{position:absolute;top:18px;width:310px;height:58px;border-top:2px solid rgba(255,255,255,.22);border-radius:50%}
#app-loader .xmas-lights i{position:absolute;top:-5px;width:10px;height:10px;border-radius:50%;background:#ffd166;box-shadow:0 0 15px currentColor;animation:xmasLight 1.4s ease-in-out infinite}
#app-loader .xmas-lights i:nth-child(1){left:12%;color:#ef476f}.xmas-lights i:nth-child(2){left:36%;color:#ffd166;animation-delay:.3s}.xmas-lights i:nth-child(3){left:62%;color:#06d6a0;animation-delay:.6s}.xmas-lights i:nth-child(4){left:86%;color:#4cc9f0;animation-delay:.9s}

/* New year: clock and fireworks */
#app-loader.loading-style-12{background:radial-gradient(circle at 50% 55%,#17234a,#070916 58%,#02030a)}
#app-loader .ny-clock{position:absolute;width:190px;height:190px;border-radius:50%;border:1px solid rgba(255,220,127,.4);box-shadow:0 0 45px rgba(255,196,74,.16),inset 0 0 30px rgba(255,255,255,.04)}
#app-loader .ny-clock::before{content:"";position:absolute;inset:13px;border-radius:50%;background:repeating-conic-gradient(#ffd166 0 1deg,transparent 1deg 30deg);-webkit-mask:radial-gradient(circle,transparent 83%,#000 84%)}
#app-loader .ny-clock::after{content:"";position:absolute;left:50%;top:25px;width:2px;height:70px;background:linear-gradient(#fff,#ffd166);transform-origin:bottom;animation:nyTick 2s cubic-bezier(.4,0,.2,1) infinite;box-shadow:0 0 10px #ffd166}
#app-loader .ny-year{position:absolute;top:28px;font-size:34px;font-weight:700;letter-spacing:.12em;color:#ffd166;text-shadow:0 0 22px rgba(255,209,102,.65)}
#app-loader .firework{position:absolute;width:7px;height:7px;border-radius:50%;color:#64dfdf;box-shadow:0 -34px currentColor,24px -24px currentColor,34px 0 currentColor,24px 24px currentColor,0 34px currentColor,-24px 24px currentColor,-34px 0 currentColor,-24px -24px currentColor;animation:nyBurst 1.8s ease-out infinite}
#app-loader .firework.f1{left:38px;top:62px}.firework.f2{right:38px;top:88px;color:#ff70a6;animation-delay:.65s;transform:scale(.75)}

/* Valentine: heartbeat ribbons */
#app-loader.loading-style-13{background:radial-gradient(circle at 50% 45%,#50162e,#210817 56%,#0c0409)}
#app-loader .heart-orbit{position:absolute;width:205px;height:175px;filter:drop-shadow(0 0 18px rgba(255,74,128,.5));animation:heartBeat 1.35s ease-in-out infinite}
#app-loader .heart-orbit::before,#app-loader .heart-orbit::after{content:"";position:absolute;top:15px;width:104px;height:160px;border:3px solid #ff4d88;border-bottom:0}
#app-loader .heart-orbit::before{left:31px;border-radius:90px 90px 0 0;transform:rotate(-45deg);transform-origin:0 100%}
#app-loader .heart-orbit::after{right:31px;border-radius:90px 90px 0 0;transform:rotate(45deg);transform-origin:100% 100%}
#app-loader .heart-pulse{position:absolute;width:270px;height:2px;background:linear-gradient(90deg,transparent,#ff4d88 25%,#fff 48%,#ff4d88 72%,transparent);box-shadow:0 0 12px #ff4d88;clip-path:polygon(0 45%,35% 45%,40% 0,45% 100%,51% 30%,56% 45%,100% 45%,100% 60%,57% 60%,51% 45%,45% 100%,39% 18%,36% 60%,0 60%);animation:heartLine 1.35s linear infinite}

/* Songkran: water ripple and droplets */
#app-loader.loading-style-14{background:radial-gradient(circle at 50% 45%,#074f72,#032a44 52%,#011522)}
#app-loader .water-ring,#app-loader .water-ring::before,#app-loader .water-ring::after{position:absolute;border:2px solid rgba(88,221,255,.65);border-radius:50%;content:""}
#app-loader .water-ring{width:184px;height:184px;box-shadow:0 0 30px rgba(54,207,255,.28);animation:waterTilt 3s ease-in-out infinite}
#app-loader .water-ring::before{inset:14px;border-style:dashed;animation:waterSpin 5s linear infinite}
#app-loader .water-ring::after{inset:-22px;animation:waterRipple 1.8s ease-out infinite}
#app-loader .droplet{position:absolute;width:11px;height:17px;border-radius:60% 40% 60% 40%;background:linear-gradient(145deg,#fff,#32d8ff);box-shadow:0 0 15px #32d8ff;animation:waterDrop 1.8s ease-in-out infinite}
#app-loader .droplet.d1{left:42px;top:60px}.droplet.d2{right:48px;top:45px;animation-delay:.5s}.droplet.d3{right:32px;bottom:75px;animation-delay:1s}

/* Chinese new year: lanterns and golden seal */
#app-loader.loading-style-15{background:radial-gradient(circle at 50% 46%,#8f1d20,#43090d 54%,#180305)}
#app-loader .cn-seal{position:absolute;width:188px;height:188px;border-radius:50%;border:2px solid #ffd166;box-shadow:0 0 35px rgba(255,190,60,.32),inset 0 0 25px rgba(255,190,60,.08);animation:cnGlow 2s ease-in-out infinite}
#app-loader .cn-seal::before{content:"◆";position:absolute;inset:17px;display:grid;place-items:center;border:1px dashed rgba(255,209,102,.55);color:rgba(255,209,102,.2);font-size:120px;line-height:1;animation:cnTurn 12s linear infinite}
#app-loader .lantern{position:absolute;top:32px;width:42px;height:54px;border-radius:45%;background:linear-gradient(90deg,#b9151f,#ff4a38,#b9151f);border-top:4px solid #ffd166;border-bottom:4px solid #ffd166;box-shadow:0 0 20px rgba(255,55,45,.5);transform-origin:50% -35px;animation:lanternSwing 2.4s ease-in-out infinite}
#app-loader .lantern::after{content:"";position:absolute;left:19px;top:54px;width:3px;height:28px;background:#ffd166;box-shadow:-5px 16px #ffd166,5px 16px #ffd166}
#app-loader .lantern.l1{left:18px}.lantern.l2{right:18px;animation-delay:-1.2s}

/* Loy Krathong: moonlit water and floating krathong */
#app-loader.loading-style-16{background:linear-gradient(#070b27 0,#121850 57%,#081a31 58%,#03111f 100%)}
#app-loader .loy-moon{position:absolute;top:26px;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff,#fff0b3 58%,#ffc857);box-shadow:0 0 30px rgba(255,231,148,.5),0 0 80px rgba(255,206,84,.2)}
#app-loader .loy-water{position:absolute;left:0;right:0;bottom:45px;height:100px;background:repeating-radial-gradient(ellipse at 50% 0,rgba(255,220,120,.26) 0 2px,transparent 3px 13px);transform:perspective(180px) rotateX(58deg);animation:loyWater 2.6s ease-in-out infinite}
#app-loader .krathong{position:absolute;left:50%;bottom:78px;width:116px;height:30px;transform:translateX(-50%);border-radius:10% 10% 55% 55%;background:linear-gradient(#58a44b,#245c33);box-shadow:0 12px 22px rgba(255,176,50,.2);animation:loyFloat 2.4s ease-in-out infinite;z-index:4}
#app-loader .krathong::before{content:"";position:absolute;left:52px;bottom:22px;width:12px;height:40px;border-radius:60% 40% 60% 40%;background:linear-gradient(#fff8bc,#ffb000 45%,#ff5a00);box-shadow:0 0 18px #ffb000;animation:flameDance .8s ease-in-out infinite}
#app-loader .krathong::after{content:"◆  ◆  ◆";position:absolute;left:13px;top:-19px;color:#ff8fab;font-size:25px;letter-spacing:5px}

#app-loader.loading-style-3 .loader-logo{border-radius:10px}
@keyframes loadingBasicLogo{0%,100%{transform:translateY(0) scale(.97);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--main) 22%,transparent))}50%{transform:translateY(-7px) scale(1.035);filter:drop-shadow(0 0 28px color-mix(in srgb,var(--main) 58%,transparent))}}
@keyframes spaBasicProgress{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
@keyframes basicSpin{to{transform:rotate(360deg)}} @keyframes basicFloat{50%{transform:translateY(-7px)}} @keyframes basicAmbient{50%{opacity:.65;transform:scale(1.08)}}
@keyframes techSpin{to{transform:rotate(360deg)}} @keyframes techPulse{50%{opacity:.45;transform:scale(1.12)}}
@keyframes xmasTurn{to{transform:rotate(360deg)}} @keyframes xmasSnow{50%{transform:translateY(18px);opacity:.55}} @keyframes xmasLight{50%{opacity:.3;transform:scale(.7)}}
@keyframes nyTick{0%{transform:rotate(-50deg)}70%,100%{transform:rotate(0)}} @keyframes nyBurst{0%{opacity:0;transform:scale(.15)}35%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes heartBeat{0%,100%{transform:scale(.94)}20%{transform:scale(1.03)}35%{transform:scale(.98)}50%{transform:scale(1.06)}} @keyframes heartLine{0%{transform:scaleX(.55);opacity:.3}50%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.55);opacity:.3}}
@keyframes waterTilt{50%{transform:rotate(12deg) scale(1.04)}} @keyframes waterSpin{to{transform:rotate(-360deg)}} @keyframes waterRipple{0%{transform:scale(.72);opacity:.9}100%{transform:scale(1.38);opacity:0}} @keyframes waterDrop{0%,100%{transform:translateY(12px);opacity:.25}50%{transform:translateY(-18px) rotate(20deg);opacity:1}}
@keyframes cnGlow{50%{box-shadow:0 0 55px rgba(255,190,60,.55),inset 0 0 35px rgba(255,190,60,.15)}} @keyframes cnTurn{to{transform:rotate(360deg)}} @keyframes lanternSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes loyWater{50%{background-position:24px 8px;opacity:.68}} @keyframes loyFloat{50%{transform:translate(-50%,-8px) rotate(2deg)}} @keyframes flameDance{50%{transform:scale(.82) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){#app-loader *,#app-loader *::before,#app-loader *::after{animation-duration:4s!important;animation-iteration-count:infinite!important}}