@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&family=Mali:wght@500;600&display=swap");
/* ===== Kawaii layer — โหลดหลังสุด ให้ทุกหน้าเป็นสไตล์เดียวกับ Dashboard (Eluga คงโทนเขียวของตัวเอง) ===== */
:root{--k-grad:linear-gradient(135deg,#d93f79,#9b4de0);--k-ease:cubic-bezier(.2,.8,.2,1)}
body:not(.eluga){--bg:#fff3f9;--ink:#4a2a55;--mut:#7a5a88;--card:rgba(255,255,255,.78);--bd:rgba(192,132,252,.3);--glass-hi:rgba(255,255,255,.9);font-family:Nunito,"Noto Sans Thai",system-ui,sans-serif;color:var(--ink);background:none}
body:not(.eluga):before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(160deg,#ffd9ea 0%,#e9d8ff 52%,#d6edff 100%)}
h1,h2,h3,.logo{font-family:Mali,Nunito,"Noto Sans Thai",sans-serif}
body:not(.eluga) .logo{color:#d93f79}
body.hub .bg i{mix-blend-mode:normal;opacity:.5}body.hub .bg i:nth-child(3){background:var(--sky)}
body:not(.eluga) .nav.scrolled{background:rgba(255,255,255,.72)}
.btn{background:var(--k-grad)!important;color:#fff!important;border:0!important;box-shadow:0 8px 22px rgba(217,63,121,.4)!important;position:relative;overflow:hidden;transition:transform .15s var(--k-ease)}
.btn:active{transform:scale(.95)}
.btn:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:kshine 3.6s ease-in-out infinite}
@keyframes kshine{60%,100%{left:130%}}
.btn.ghost{background:rgba(255,255,255,.85)!important;color:var(--ink)!important;border:1px solid var(--bd)!important;box-shadow:none!important}.btn.ghost:after{display:none}
body.eluga .btn.ghost{background:rgba(16,28,20,.75)!important;color:var(--ink)!important;border:1px solid #3f9b5c!important}
body.hub .card,body.hub .pcard,body.hub article,body.hub .status-row,body.hub .stage{background:var(--card)!important;border-color:var(--bd)!important;box-shadow:0 14px 36px rgba(176,108,245,.16)!important;color:var(--ink)}
body.hub .pcard-anya{background:linear-gradient(160deg,#fff0f7,#ffe1f0)!important}
body.hub .pcard-eluga{background:linear-gradient(160deg,#e9fff2,#d2f6e1)!important}body.hub .pcard-eluga,body.hub .pcard-eluga h3,body.hub .pcard-eluga p,body.hub .pcard-eluga a{color:#1d5a37!important}
.pcard-anya .pic{font-size:0;width:68px;height:68px;border-radius:50%;background:url(anyaluga.jpg) center/cover;box-shadow:0 0 0 3px #fff,0 8px 20px rgba(217,63,121,.3)}
.orb-ring{border-color:rgba(217,63,121,.4)}
.cine-orb{background:rgba(255,255,255,.85)!important;color:var(--ink)!important;border-color:var(--bd)!important}
/* ---- แถบโหลด / ม่านเปลี่ยนหน้า / ของลอย ---- */
#kp{position:fixed;top:0;left:0;height:4px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--k-grad);z-index:90}
#kc{position:fixed;inset:0;z-index:99;pointer-events:none;background:linear-gradient(135deg,#ffb3d1,#d5b3ff,#bfe6ff);animation:kin .9s .05s var(--k-ease) both}
@keyframes kin{to{transform:translateY(-100%)}}
body.leaving #kc{animation:kout .3s ease forwards}@keyframes kout{from{transform:translateY(100%)}to{transform:none}}
#kf{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;translate:0 calc(var(--sy,0)*-.05px)}
#kf span{position:absolute;animation:kfl var(--d,7s) ease-in-out infinite alternate}
@keyframes kfl{to{transform:translateY(-26px) rotate(14deg)}}
.ksp{position:fixed;z-index:95;pointer-events:none;animation:ksp .8s ease-out forwards}
@keyframes ksp{to{transform:translate(var(--x),-46px) scale(.3) rotate(80deg);opacity:0}}
/* ---- แถบฟีเจอร์เลื่อน ---- */
.kmq{overflow:hidden;margin:8px -5vw 26px;padding:13px 0;background:rgba(255,255,255,.55);border-block:1px solid var(--bd)}
.kmq div{display:flex;width:max-content;animation:kmq 34s linear infinite}.kmq span{padding:0 22px;white-space:nowrap;font-weight:800;color:var(--mut)}
@keyframes kmq{to{transform:translateX(-50%)}}
/* ---- การ์ดเลื่อนมาประกบซ้อนกัน ---- */
.stk{position:relative;margin:0 0 30px;border-radius:34px;padding:clamp(20px,5vw,52px);background:var(--card);border:1px solid var(--bd);box-shadow:0 -14px 50px rgba(176,108,245,.2),0 24px 60px rgba(217,63,121,.1);transform-origin:50% 0;opacity:0;translate:0 70px;scale:.95}
body:not(.eluga) .stk:nth-of-type(3n+1){background:linear-gradient(170deg,rgba(255,255,255,.88),rgba(255,228,241,.82))}
body:not(.eluga) .stk:nth-of-type(3n+2){background:linear-gradient(170deg,rgba(255,255,255,.88),rgba(233,220,255,.85))}
body:not(.eluga) .stk:nth-of-type(3n){background:linear-gradient(170deg,rgba(255,255,255,.88),rgba(214,237,255,.85))}
.stk.in{opacity:var(--o,1);translate:0 0;scale:1;transition:translate .9s var(--k-ease),scale .9s var(--k-ease),opacity .6s}
.stk.in.st{transition:none}
.stk.sticky{position:sticky;top:calc(78px + var(--k,0)*14px)}
.stk>section{padding:0!important}
.tilt{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)!important;transition:transform .12s!important}
@media(prefers-reduced-motion:reduce){#kc,#kf span,.btn:after,.kmq div{animation:none!important}#kc{display:none}.stk{opacity:1;translate:none;scale:1}}

/* bot icons replace the emoji (scale with the surrounding font-size) */
.bi{width:1.15em;height:1.15em;border-radius:50%;object-fit:cover;vertical-align:-.2em;display:inline-block}
/* contact rows */
.ct-list{display:grid;gap:12px;max-width:520px;margin:0 auto}
.ct-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;background:var(--card);border:1px solid var(--bd);box-shadow:0 10px 28px rgba(176,108,245,.16);color:var(--ink);text-decoration:none;min-width:0;transition:transform .15s var(--k-ease)}
a.ct-row:hover{transform:translateY(-2px)}
.ct-ic{flex:none;width:1.6em;text-align:center;font-size:1.35rem}
.ct-k{flex:none;color:var(--mut);font-size:.9rem}
.ct-v{margin-left:auto;min-width:0;text-align:right;overflow-wrap:anywhere}