.contact-widget{
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1040;
    font-family: sans-serif;
}

/* ปุ่มแท็บ */
.contact-tab{
    background: linear-gradient(130deg, var(--main) 0%, var(--sub) 40%, var(--sub) 60%, var(--main) 100%);
    color: #fff;

    padding: 14px 6px;

    writing-mode: vertical-lr;
    text-orientation: mixed;

    cursor: pointer;

    border-radius: 8px 0 0 8px;

    font-weight: 600;
    font-size: 14px;

    box-shadow: 0 0 8px rgba(0,0,0,.12);
    transition: .25s;
}

.contact-tab:hover{
    background: #e83e8c;
}

.contact-tab i{
    transform: rotate(90deg);
    margin-bottom: 8px;
}

/* กล่อง */
.contact-box{

    width: 68px;

    background-color: rgba(
        255,255,255,1    ) !important;

    backdrop-filter: blur(10px);

    border-radius: 10px 0 0 10px;

    padding: 8px 6px;

    box-shadow: 0 0 14px rgba(0,0,0,.12);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    animation: slideIn .25s ease;
}

/* item */
.contact-item{

    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-decoration: none;

    padding: 6px 3px;

    border-radius: 8px;

    transition: .2s;
}

/* hover */
.contact-item:hover{
    background: #e83e8c;
    transform: translateY(-1px);
}

/* icon */
.contact-item img{
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

/* text */
.contact-item span{
    font-size: 9px;
    color: #525252;
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
}

/* animation เปิด */
@keyframes slideIn{
    from{
        transform: translateX(20px);
        opacity: 0;
    }
    to{
        transform: translateX(0);
        opacity: 1;
    }
}

/* animation ปิด */
@keyframes slideOut{
    from{
        transform: translateX(0);
        opacity: 1;
    }
    to{
        transform: translateX(20px);
        opacity: 0;
    }
}

/* ตอนเปิด */
.contact-box.show{
    display: flex !important;
    animation: slideIn .25s ease forwards;
}

/* ตอนปิด */
.contact-box.hide{
    animation: slideOut .25s ease forwards;
}

/* mobile */
@media(max-width:768px){

    .contact-box{
        width: 62px;
    }

    .contact-item img{
        width: 22px;
        height: 22px;
    }

    .contact-item span{
        font-size: 8px;
    }

    .contact-tab{
        font-size: 12px;
        padding: 12px 5px;
    }

}

/* contact slide */
.contact-widget{
    transition: transform .25s ease, opacity .25s ease;
}

/* ซ่อน */
.contact-widget.hide-scroll{
    transform: translateY(-50%) translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* แสดง */
.contact-widget.show-scroll{
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}

/* รูปแบบปุ่มวงกลม: รายการช่องทางติดต่อเปิดขึ้นด้านบน */
.contact-widget:is(.contact-style-circle,.contact-style-scroll-top){
    right:18px;
    top:auto;
    bottom:20px;
    width:60px;
    transform:none;
}
.contact-widget.contact-style-circle .contact-tab{
    display:flex;
    position:relative;
    isolation:isolate;
    width:60px;
    height:60px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:5px solid color-mix(in srgb,var(--bg_main) 88%,transparent);
    border-radius:50%;
    background:linear-gradient(145deg,color-mix(in srgb,var(--main) 88%,#fff),color-mix(in srgb,var(--sub) 78%,#111));
    color:#fff;
    font-size:0;
    writing-mode:horizontal-tb;
    box-shadow:0 12px 30px color-mix(in srgb,var(--main) 32%,rgba(0,0,0,.28)),inset 0 1px rgba(255,255,255,.3);
    transition:transform .2s ease,box-shadow .2s ease;
}
.contact-widget.contact-style-circle .contact-tab::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-8px;
    border:1px solid color-mix(in srgb,var(--main) 42%,transparent);
    border-radius:inherit;
    opacity:.75;
}
.contact-widget.contact-style-circle .contact-tab::after{
    content:"";
    position:absolute;
    right:-1px;
    bottom:1px;
    width:12px;
    height:12px;
    border:3px solid var(--bg_main);
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 9px rgba(34,197,94,.7);
}
.contact-widget.contact-style-circle .contact-tab:hover{
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 17px 34px color-mix(in srgb,var(--main) 40%,rgba(0,0,0,.3)),inset 0 1px rgba(255,255,255,.35);
}
.contact-widget.contact-style-circle .contact-tab i{
    display:block;
    margin:0!important;
    line-height:1!important;
    transform:none;
    font-size:21px;
}
.contact-widget.contact-style-circle .contact-box{
    position:absolute;
    right:0;
    bottom:64px;
    width:72px;
    border:1px solid color-mix(in srgb,var(--main) 22%,var(--bg_border));
    border-radius:18px;
    transform-origin:bottom center;
}
.contact-widget.contact-style-circle .contact-box.show{animation:contactRise .24s ease-out forwards}
.contact-widget.contact-style-circle .contact-box.hide{animation:contactDrop .2s ease-in forwards}
.contact-widget:is(.contact-style-circle,.contact-style-scroll-top).hide-scroll,
.contact-widget:is(.contact-style-circle,.contact-style-scroll-top).show-scroll{transform:none;opacity:1;pointer-events:auto}
.contact-scroll-top{
    display:none;
    width:44px;
    height:44px;
    margin:0 auto 9px;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--main) 38%,var(--bg_border));
    border-radius:50%;
    background:color-mix(in srgb,var(--bg_main) 92%,transparent);
    color:var(--main);
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:.2s ease;
}
.contact-style-scroll-top .contact-scroll-top{display:grid;margin:0}
.contact-style-scroll-top .contact-scroll-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
@keyframes contactRise{from{transform:translateY(14px) scale(.94);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes contactDrop{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(12px) scale(.95);opacity:0}}
@media(max-width:768px){
    body:not([data-wallet-style="0"]) .contact-widget:is(.contact-style-circle,.contact-style-scroll-top){right:12px;bottom:calc(88px + env(safe-area-inset-bottom))}
    body[data-wallet-style="0"] .contact-widget:is(.contact-style-circle,.contact-style-scroll-top){right:12px;bottom:18px}
    .contact-widget:is(.contact-style-circle,.contact-style-scroll-top){width:50px}
    .contact-widget.contact-style-circle .contact-tab{width:50px;height:50px;border-width:4px}
    .contact-widget.contact-style-circle .contact-tab i{font-size:18px!important}
    .contact-widget.contact-style-circle .contact-box{right:0;bottom:60px;width:64px;padding:7px 5px}
    .contact-widget.contact-style-circle .contact-item img{width:19px;height:19px}
    .contact-widget.contact-style-circle .contact-item span{font-size:7px}
    .contact-style-scroll-top .contact-scroll-top{width:38px;height:38px;font-size:12px}
}

/* Contact panel V2: shared card for both side-tab and circular launcher. */
.contact-widget .contact-box{position:relative;width:248px;padding:14px;align-items:stretch;gap:7px;overflow:hidden;border:1px solid color-mix(in srgb,var(--main) 22%,var(--bg_border));border-radius:18px 0 0 18px;background:color-mix(in srgb,var(--bg_main) 91%,transparent)!important;box-shadow:0 18px 45px rgba(0,0,0,.24);backdrop-filter:blur(18px) saturate(1.15)}
.contact-box-head{display:flex;align-items:center;gap:10px;padding:2px 34px 10px 2px;border-bottom:1px solid color-mix(in srgb,var(--main) 16%,var(--bg_border));text-align:left}
.contact-box-head>span{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:12px;background:linear-gradient(145deg,var(--main),var(--sub));color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--main) 24%,transparent)}
.contact-box-head strong,.contact-box-head small{display:block}.contact-box-head strong{color:var(--font_main);font-size:12px;font-weight:700}.contact-box-head small{margin-top:2px;color:var(--font_sub);font-size:9px}
.contact-widget .contact-item{min-height:48px;flex-direction:row;justify-content:flex-start;gap:10px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--main) 9%,var(--bg_border));border-radius:12px;background:color-mix(in srgb,var(--bg_sub) 72%,transparent)}
.contact-widget .contact-item:hover{border-color:color-mix(in srgb,var(--main) 45%,var(--bg_border));background:color-mix(in srgb,var(--main) 13%,var(--bg_sub));transform:translateX(-3px)}
.contact-widget .contact-item img{width:32px;height:32px;flex:0 0 32px;margin:0;border-radius:9px;object-fit:cover}
.contact-widget .contact-item span{color:var(--font_main);font-size:11px;font-weight:700;text-align:left}
.contact-close{position:absolute;z-index:2;top:13px;right:13px;display:grid;width:28px;height:28px;padding:0;border:1px solid color-mix(in srgb,var(--font_main) 10%,var(--bg_border));border-radius:9px;background:color-mix(in srgb,var(--bg_sub) 76%,transparent);color:var(--font_sub);place-items:center;transition:.18s ease}
.contact-close:hover{border-color:color-mix(in srgb,var(--main) 45%,var(--bg_border));color:var(--main);transform:rotate(6deg)}
.contact-widget.contact-style-side .contact-tab{display:flex;width:38px;min-height:105px;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:8px 4px;border:1px solid color-mix(in srgb,var(--main) 38%,transparent);border-right:0;border-radius:13px 0 0 13px;background:linear-gradient(165deg,color-mix(in srgb,var(--main) 92%,#fff),color-mix(in srgb,var(--sub) 88%,#111));box-shadow:0 9px 23px rgba(0,0,0,.18);writing-mode:horizontal-tb}
.contact-widget.contact-style-side .contact-tab i{margin:0!important;transform:none;font-size:15px}
.contact-widget.contact-style-side .contact-tab-label{display:block;font-size:8px;font-weight:700;line-height:1;letter-spacing:.08em;writing-mode:vertical-rl;text-orientation:upright;transform:none}
.contact-widget.contact-style-side .contact-box{width:220px;padding:11px;gap:6px}
.contact-widget.contact-style-side .contact-box-head{gap:8px;padding:1px 31px 8px 1px}.contact-widget.contact-style-side .contact-box-head>span{width:34px;height:34px;flex-basis:34px;border-radius:10px}.contact-widget.contact-style-side .contact-box-head strong{font-size:11px}.contact-widget.contact-style-side .contact-box-head small{font-size:8px}
.contact-widget.contact-style-side .contact-item{min-height:43px;padding:6px 8px}.contact-widget.contact-style-side .contact-item img{width:28px;height:28px;flex-basis:28px}.contact-widget.contact-style-side .contact-item span{font-size:10px}
.contact-widget.contact-style-circle .contact-box{right:0;bottom:74px;width:248px;padding:14px;border-radius:18px}
@media(max-width:768px){
    .contact-widget .contact-box,.contact-widget.contact-style-circle .contact-box{width:min(260px,calc(100vw - 20px));padding:12px}
    .contact-widget.contact-style-side .contact-tab{width:34px;min-height:94px;padding:7px 3px;border-radius:11px 0 0 11px}
    .contact-widget.contact-style-side .contact-tab i{font-size:13px}
    .contact-widget.contact-style-side .contact-tab-label{font-size:7px}
    .contact-widget.contact-style-side .contact-box{width:min(210px,calc(100vw - 16px));padding:10px}
    .contact-widget .contact-item img{width:30px;height:30px}
    .contact-widget .contact-item span{font-size:10px}
    .contact-widget.contact-style-circle .contact-box{right:0;bottom:62px}
}
#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}}