/* Wadee design system v3 — "ขาวสด" ธงไตรรงค์สด (เลือกโดยเจ้าของ 6 ส.ค. 2026)
 * ขาว #FAFBFF · น้ำเงิน PANTONE Blue 072 C #10069F · แดงสดเงา #E60012
 * คงชื่อตัวแปร/คลาสเดิมทั้งหมด (28 หน้าอ้างอิงอยู่) — เปลี่ยนเฉพาะค่า */
:root{
  --bg-0:#e9ebff; --bg-1:#f7f8ff; --bg-2:#ffffff;
  --ink:#12124a; --ink-dim:#5a5a92; --ink-faint:#8a8ab5;
  --accent:#10069f; --accent-2:#e60012; --green:#1db15f; --amber:#e8a80c; --red:#e60012;
  --grad-cta:linear-gradient(165deg,#ff5560 0%,#ff1f30 30%,#e60012 55%,#b3000e 100%);
  --grad-logo:linear-gradient(150deg,#2013c9,#10069f);
  --glass:rgba(16,6,159,.05); --glass-2:rgba(16,6,159,.09);
  --glass-brd:rgba(16,6,159,.14); --glass-brd-hi:rgba(16,6,159,.35);
  --glow:0 0 18px rgba(16,6,159,.22);
  /* depth tokens — เงาหลายชั้นโทนน้ำเงิน + ไฮไลต์ขอบบน */
  --elev-1:0 1px 2px rgba(16,6,159,.06), 0 5px 16px rgba(16,6,159,.09);
  --elev-2:0 2px 6px rgba(16,6,159,.08), 0 12px 32px rgba(16,6,159,.14);
  --elev-3:0 4px 12px rgba(16,6,159,.1), 0 24px 60px rgba(16,6,159,.2);
  --edge-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --r-lg:22px; --r-md:16px; --r-sm:12px; --r-pill:999px;
  --nav-h:66px;
  --ease-spring:cubic-bezier(.34,1.4,.44,1);
  /* โทเคนการ์ดกระจกต่อธีม (หน้า messages/chat ฯลฯ อ่านผ่านตัวแปรชุดนี้) */
  --card-glass:rgba(255,255,255,.88); --card-brd:rgba(140,110,230,.22);
  --card-ink:#1c1c54; --card-ink-dim:#7a7aa8;
  --neon:0 8px 24px rgba(140,110,230,.16);
  /* light theme surface (หน้า messages/chat/community/voice) — โทนเดียวกับหลัก */
  --lt-bg-0:#e9ebff; --lt-bg-1:#ffffff; --lt-card:rgba(255,255,255,.92);
  --lt-card-brd:rgba(16,6,159,.12); --lt-ink:#12124a; --lt-ink-dim:#5a5a92;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Anuphan','Segoe UI','Leelawadee UI','Noto Sans Thai','Microsoft YaHei',system-ui,sans-serif;
  background:
    radial-gradient(52% 38% at 88% -4%,rgba(255,110,170,.14) 0%,transparent 60%),
    radial-gradient(50% 36% at 4% 2%,rgba(100,120,255,.16) 0%,transparent 58%),
    radial-gradient(60% 44% at 50% 110%,rgba(200,120,255,.12) 0%,transparent 62%),
    linear-gradient(175deg,#ffffff 0%,#f4f1ff 55%,#e9e3fb 100%) fixed;
  background-color:#f4f1ff;
  color:var(--ink); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button,input,textarea{font:inherit;color:inherit;border:none;background:none;outline:none}
button{cursor:pointer}
a{color:var(--accent);text-decoration:none}
::-webkit-scrollbar{width:0;height:0}
::selection{background:rgba(16,6,159,.18)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.app-frame{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;
  box-shadow:0 0 60px rgba(16,6,159,.15)}
#page-root{min-height:100dvh;display:flex;flex-direction:column}
#page-root.has-nav{padding-bottom:calc(var(--nav-h) + 14px)}
.page{flex:1;display:flex;flex-direction:column;animation:pageIn .32s cubic-bezier(.22,.9,.3,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:none}}

/* light surface pages — โทนเดียวกับธีมหลักแล้ว (ขาวสด) */
#page-root.theme-light{
  background:
    radial-gradient(52% 38% at 88% -2%,rgba(255,110,170,.12) 0%,transparent 60%),
    radial-gradient(48% 36% at 6% 4%,rgba(100,120,255,.14) 0%,transparent 58%),
    linear-gradient(175deg,#ffffff 0%,#f4f1ff 60%,#e9e3fb 100%);
  color:var(--lt-ink);
}
.theme-light .glass-card{background:var(--lt-card);border-color:var(--lt-card-brd);
  box-shadow:var(--elev-1), var(--edge-hi)}
.theme-light .dim{color:var(--lt-ink-dim)}

/* components */
.glass-card{background:rgba(255,255,255,.85);
  border:1px solid rgba(16,6,159,.1);border-radius:var(--r-lg);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--elev-1), var(--edge-hi)}
.glass-hi{border-color:var(--glass-brd-hi);box-shadow:var(--glow), var(--elev-1), var(--edge-hi)}
.dim{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}

/* ปุ่มหลัก = แดงสดเงา (glossy) */
.btn-cta{display:block;width:100%;padding:15px;border-radius:var(--r-pill);position:relative;overflow:hidden;
  background:var(--grad-cta);color:#fff;font-weight:700;font-size:16px;text-align:center;
  box-shadow:0 8px 24px rgba(230,0,18,.4), inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 8px rgba(120,0,10,.3);
  transition:transform .16s var(--ease-spring), box-shadow .2s, filter .2s}
.btn-cta::after{content:'';position:absolute;left:8%;right:38%;top:3px;height:42%;
  border-radius:var(--r-pill);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0))}
.btn-cta:hover{filter:brightness(1.06);box-shadow:0 10px 30px rgba(230,0,18,.5),
  inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(120,0,10,.3)}
.btn-cta:active{transform:scale(.97)}
/* [hidden] ต้องชนะ display:block ด้านบน ไม่งั้นซ่อนปุ่มไม่ได้ */
.btn-cta[hidden],.btn-outline-green[hidden]{display:none}
/* ปุ่มรอง = ขอบน้ำเงิน 072C (ชื่อคลาสเดิมคงไว้ ทุกหน้าเรียกใช้อยู่) */
.btn-outline-green{display:block;width:100%;padding:13px;border-radius:var(--r-pill);
  border:1.5px solid var(--accent);color:var(--accent);text-align:center;font-weight:600;
  box-shadow:0 4px 14px rgba(16,6,159,.12), inset 0 0 14px rgba(16,6,159,.04);
  transition:background .2s, box-shadow .2s, transform .16s var(--ease-spring)}
.btn-outline-green:hover{background:rgba(16,6,159,.06);
  box-shadow:0 6px 18px rgba(16,6,159,.2), inset 0 0 14px rgba(16,6,159,.06)}
.btn-outline-green:active{transform:scale(.97)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid rgba(16,6,159,.14);font-size:13.5px;white-space:nowrap;color:var(--ink-dim);
  box-shadow:0 2px 8px rgba(16,6,159,.06);transition:background .2s, border-color .2s, color .2s,
    transform .16s var(--ease-spring)}
.chip:active{transform:scale(.95)}
.chip.active{background:linear-gradient(160deg,#ff4552,#e60012 60%,#b3000e);border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(230,0,18,.4), inset 0 1px 0 rgba(255,255,255,.4)}
.badge{min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:linear-gradient(160deg,#ff4552,#c3000f);border:1px solid rgba(255,255,255,.4);
  color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(230,0,18,.45)}

.input-glass{display:block;width:100%;padding:14px 18px;border-radius:var(--r-pill);
  background:#fff;border:1.5px solid rgba(16,6,159,.14);color:inherit;font-size:15px;
  box-shadow:0 3px 12px rgba(16,6,159,.06);
  transition:border-color .18s, box-shadow .18s, background .18s}
.input-glass::placeholder{color:var(--ink-faint)}
.theme-light .input-glass{background:#fff;border-color:var(--lt-card-brd)}
.theme-light .input-glass::placeholder{color:var(--lt-ink-dim)}
.input-glass:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(16,6,159,.14), 0 3px 12px rgba(16,6,159,.1)}
.theme-light .input-glass:focus{background:#fff;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(16,6,159,.12)}

.avatar{position:relative;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;background:var(--grad-logo);overflow:hidden;
  border:2px solid #fff;
  box-shadow:0 3px 12px rgba(16,6,159,.25), inset 0 1px 2px rgba(255,255,255,.35)}
.avatar img{width:100%;height:100%;object-fit:cover}
.status-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  border:2px solid #fff;background:var(--ink-faint)}
.status-dot.online{background:var(--green);box-shadow:0 0 6px rgba(29,177,95,.6)}
.status-dot.away{background:var(--amber)}
.status-dot.busy{background:var(--red)}

.top-bar{display:flex;align-items:center;gap:12px;padding:16px 18px 10px;
  padding-top:calc(16px + env(safe-area-inset-top))}
.top-bar .title{font-size:20px;font-weight:700;flex:1;letter-spacing:.1px;color:var(--accent)}
.icon-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(16,6,159,.14);box-shadow:0 2px 8px rgba(16,6,159,.08);
  transition:background .2s, border-color .2s, transform .16s var(--ease-spring)}
.icon-btn:hover{background:#f4f5ff;border-color:var(--glass-brd-hi)}
.icon-btn:active{transform:scale(.9)}
.icon-btn svg{width:19px;height:19px}

/* แถบนำทางล่าง = กระจกฝ้าตามธีม + ไอคอน active แดงเงาเรืองแสง (ตามภาพอ้างอิงนีออน) */
.bottom-nav[hidden]{display:none}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;z-index:50;
  width:min(456px,calc(100% - 24px));height:var(--nav-h);display:flex;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(140,110,230,.25);border-radius:var(--r-pill);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 12px 32px rgba(120,90,230,.2), inset 0 1px 0 rgba(255,255,255,.9)}
.bottom-nav .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:#8a8ab5;font-size:11.5px;font-weight:500;position:relative;
  transition:color .2s}
.bottom-nav .nav-item svg{width:22px;height:22px}
.bottom-nav .nav-item:active .nav-ico{transform:scale(.88)}
.bottom-nav .nav-item.active{color:#e60012;font-weight:600}
.bottom-nav .nav-item.active .nav-ico{background:linear-gradient(160deg,#ff4552,#e60012 60%,#b3000e);
  color:#fff;box-shadow:0 0 16px rgba(255,40,55,.65), inset 0 1px 0 rgba(255,255,255,.4);
  transform:translateY(-1px)}
.bottom-nav .nav-ico{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  transition:background .22s, box-shadow .22s, transform .22s var(--ease-spring)}
.bottom-nav .nav-item .badge{position:absolute;top:8px;right:22%}

.list-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md)}
.row{display:flex;align-items:center;gap:10px}
.col{display:flex;flex-direction:column}
.grow{flex:1;min-width:0}
.center{display:flex;align-items:center;justify-content:center}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#toast-root{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 26px);
  z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{padding:11px 20px;border-radius:var(--r-pill);
  background:linear-gradient(165deg,#1a0fbd,#0a0468);color:#fff;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 8px 24px rgba(16,6,159,.4), inset 0 1px 0 rgba(255,255,255,.25);
  font-size:14px;max-width:86vw;animation:toastIn .3s var(--ease-spring)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

/* แถบแจ้งเตือนเมื่อต่อเซิร์ฟเวอร์ไม่ได้ (api.js สร้างให้อัตโนมัติ) */
#zax-offline-bar{position:fixed;left:50%;transform:translateX(-50%);z-index:300;
  top:calc(8px + env(safe-area-inset-top));width:min(456px,calc(100% - 20px));
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);
  background:linear-gradient(160deg,#f21426,#b3000e);border:1px solid rgba(255,255,255,.35);color:#fff;
  font-size:13px;line-height:1.35;box-shadow:0 8px 24px rgba(230,0,18,.4);
  animation:toastIn .25s ease}
#zax-offline-bar span{flex:1;min-width:0}
#zax-offline-bar button{flex:none;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);
  color:#fff;font-size:12.5px;font-weight:600}
#zax-offline-bar button:active{transform:scale(.95)}

.skeleton{background:linear-gradient(90deg,rgba(16,6,159,.06) 25%,rgba(16,6,159,.12) 50%,rgba(16,6,159,.06) 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r-sm)}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* ============================================================
 * ธีมสลับได้ 4 แบบ — html[data-wtheme=...] (ค่าเริ่มต้น "fresh" = ขาวสด ด้านบน)
 * ============================================================ */

/* ---- 1. night: รอยัลบลูราตรี — น้ำเงิน 072C เข้มเรืองแสง + กระจกใส + แดงเงา ---- */
html[data-wtheme="night"]{
  --ink:#fafbff; --ink-dim:#b8b8ec; --ink-faint:#8f8fd8;
  --glass:rgba(255,255,255,.1); --glass-2:rgba(255,255,255,.16);
  --glass-brd:rgba(150,150,255,.3); --glass-brd-hi:rgba(185,185,255,.55);
  --glow:0 0 18px rgba(130,120,255,.45);
  --elev-1:0 1px 2px rgba(0,0,30,.3), 0 5px 16px rgba(0,0,30,.25);
  --elev-2:0 2px 6px rgba(0,0,30,.35), 0 12px 32px rgba(0,0,30,.3);
  --edge-hi:inset 0 1px 0 rgba(255,255,255,.2);
  --lt-ink:#fafbff; --lt-ink-dim:#b8b8ec;
}
html[data-wtheme="night"] body,
html[data-wtheme="night"] #page-root.theme-light{
  background:
    radial-gradient(72% 48% at 86% -6%,rgba(230,0,18,.35) 0%,transparent 58%),
    radial-gradient(60% 42% at 6% 2%,rgba(90,70,255,.5) 0%,transparent 58%),
    linear-gradient(168deg,#2013c9 0%,#10069f 40%,#070344 100%) fixed;
  background-color:#070344;color:var(--ink);box-shadow:none}
html[data-wtheme="night"] .app-frame{box-shadow:0 0 80px rgba(0,0,20,.6)}
html[data-wtheme="night"] .glass-card{background:var(--card-glass);
  border-color:var(--card-brd);box-shadow:var(--neon), inset 0 1px 0 rgba(255,255,255,.14)}
/* หน้ากลุ่ม theme-light (messages/chat/community/voice) เขียนตัวหนังสือเข้มไว้
 * → ในธีมมืดคงการ์ดขาวเพื่อให้อ่านได้ (ลุคทวิโทนบนพื้นน้ำเงินเข้ม) */
html[data-wtheme="night"] .theme-light .glass-card{background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.65);box-shadow:0 8px 24px rgba(0,0,25,.4)}
html[data-wtheme="night"] .top-bar .title{color:#fff}
html[data-wtheme="night"] .chip{background:rgba(255,255,255,.12);color:#d5d5ff;
  border-color:rgba(150,150,255,.3);box-shadow:none}
html[data-wtheme="night"] .chip.active{background:linear-gradient(160deg,#ff4552,#e60012);
  border-color:transparent;color:#fff;
  box-shadow:0 0 14px rgba(255,40,55,.55), inset 0 1px 0 rgba(255,255,255,.45)}
html[data-wtheme="night"] .icon-btn{background:rgba(255,255,255,.12);
  border-color:rgba(150,150,255,.3);box-shadow:none}
html[data-wtheme="night"] .icon-btn:hover{background:rgba(255,255,255,.2)}
html[data-wtheme="night"] .input-glass,
html[data-wtheme="night"] .theme-light .input-glass{background:rgba(255,255,255,.12);
  border-color:rgba(150,150,255,.35);color:#fff;box-shadow:none}
html[data-wtheme="night"] .input-glass:focus{border-color:#b9b9ff;
  box-shadow:0 0 0 3px rgba(130,120,255,.25)}
html[data-wtheme="night"] .bottom-nav{background:rgba(8,4,60,.85);
  border-color:rgba(150,150,255,.3);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 32px rgba(0,0,25,.55), inset 0 1px 0 rgba(255,255,255,.15)}
html[data-wtheme="night"] .bottom-nav .nav-item{color:#9a9ae0}
html[data-wtheme="night"] .bottom-nav .nav-item.active{color:#ff8f97}
html[data-wtheme="night"] .bottom-nav .nav-item.active .nav-ico{
  background:rgba(230,0,18,.3);box-shadow:0 0 14px rgba(255,40,55,.6)}

/* ---- 2. power: แดงเงาพลัง — ขาว + nav แดงเงา + ปุ่มหลักน้ำเงิน ---- */
html[data-wtheme="power"] body{
  background:
    radial-gradient(56% 40% at 90% -4%,rgba(230,0,18,.1) 0%,transparent 60%),
    linear-gradient(175deg,#ffffff 0%,#fff7f7 55%,#ffe9eb 100%) fixed;
  background-color:#fff}
html[data-wtheme="power"] .top-bar .title{color:#c3000f}
html[data-wtheme="power"] .btn-cta{
  background:linear-gradient(165deg,#3423e0 0%,#10069f 60%,#0a0468 100%);
  box-shadow:0 8px 24px rgba(16,6,159,.45), inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 8px rgba(4,2,60,.35)}
html[data-wtheme="power"] .badge{background:linear-gradient(160deg,#2013c9,#10069f);
  box-shadow:0 2px 8px rgba(16,6,159,.4)}
html[data-wtheme="power"] .bottom-nav{
  background:linear-gradient(150deg,#f21426 0%,#d20010 55%,#a3000c 100%);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 12px 32px rgba(230,0,18,.4), inset 0 1px 0 rgba(255,255,255,.35)}
html[data-wtheme="power"] .bottom-nav .nav-item{color:#ffb3b9}
html[data-wtheme="power"] .bottom-nav .nav-item.active{color:#fff}
html[data-wtheme="power"] .bottom-nav .nav-item.active .nav-ico{
  background:rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}

/* ---- 3. duo: ไฟฟ้าทวิโทน — แถบน้ำเงิน 072C ด้านบน (fixed) ล่างขาว nav ขาว active แดง ---- */
html[data-wtheme="duo"] body{
  background:linear-gradient(175deg,#f7f8ff 0%,#eef0ff 60%,#e7eaff 100%) fixed;
  background-color:#f2f4ff}
html[data-wtheme="duo"] body::before{content:'';position:fixed;left:0;right:0;top:0;height:238px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#2013c9 0%,#10069f 78%,rgba(16,6,159,0) 100%)}
html[data-wtheme="duo"] #page-root,
html[data-wtheme="duo"] #page-root.theme-light{background:transparent;box-shadow:none}
html[data-wtheme="duo"] .top-bar .title{color:#fff}
html[data-wtheme="duo"] .top-bar .icon-btn{background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.4);color:#fff}
html[data-wtheme="duo"] .chip.active{background:linear-gradient(160deg,#ff4552,#e60012);
  border-color:transparent;color:#fff;
  box-shadow:0 4px 12px rgba(230,0,18,.4), inset 0 1px 0 rgba(255,255,255,.4)}
html[data-wtheme="duo"] .bottom-nav{background:#fff;border-color:#e9ebff;
  box-shadow:0 10px 26px rgba(16,6,159,.18)}
html[data-wtheme="duo"] .bottom-nav .nav-item{color:#8a8ab5}
html[data-wtheme="duo"] .bottom-nav .nav-item.active{color:#e60012}
html[data-wtheme="duo"] .bottom-nav .nav-item.active .nav-ico{
  background:rgba(230,0,18,.12);box-shadow:none}

/* ============================================================
 * v3.1 — Neon reskin ตามภาพอ้างอิงของเจ้าของ (บล็อกนี้มาทีหลัง = ชนะบล็อกธีมด้านบน)
 * ============================================================ */

/* ---- night: น้ำเงินเข้ม-ดำ + นีออนฟ้าเทอร์ควอยซ์ (Cyberpunk) ---- */
html[data-wtheme="night"]{
  --accent:#49a8ff;
  --card-glass:rgba(16,20,140,.5); --card-brd:rgba(90,215,255,.42);
  --card-ink:#f2fbff; --card-ink-dim:rgba(200,232,255,.7);
  --neon:0 0 22px rgba(60,200,255,.28);
  --glass-brd:rgba(0,190,255,.3); --glass-brd-hi:rgba(90,230,255,.6);
  --glow:0 0 18px rgba(0,190,255,.4);
}
html[data-wtheme="night"] body,
html[data-wtheme="night"] #page-root.theme-light{
  background:
    radial-gradient(58% 40% at 86% -4%,rgba(0,200,255,.34) 0%,transparent 58%),
    radial-gradient(54% 38% at 0% 8%,rgba(40,90,255,.42) 0%,transparent 58%),
    linear-gradient(168deg,#2036e8 0%,#1410b5 42%,#0a0a5e 100%) fixed;
  background-color:#12108f}
html[data-wtheme="night"] .theme-light .glass-card{background:var(--card-glass);
  border-color:var(--card-brd);box-shadow:var(--neon), inset 0 1px 0 rgba(255,255,255,.12)}
html[data-wtheme="night"] .chip{border-color:rgba(0,190,255,.35);color:#cfeeff;background:rgba(255,255,255,.1)}
html[data-wtheme="night"] .icon-btn{border-color:rgba(0,190,255,.35)}
html[data-wtheme="night"] .input-glass,
html[data-wtheme="night"] .theme-light .input-glass{border-color:rgba(0,190,255,.4)}
html[data-wtheme="night"] .bottom-nav{background:rgba(6,10,34,.82);border-color:rgba(0,190,255,.3);
  box-shadow:0 12px 32px rgba(0,0,20,.6), 0 0 24px rgba(0,190,255,.15), inset 0 1px 0 rgba(255,255,255,.12)}

/* ---- power: แดงเข้ม-ดำ + นีออนแดง (High-energy — เปลี่ยนจากพื้นขาวเป็นธีมมืดตามภาพ) ---- */
html[data-wtheme="power"]{
  --accent:#ff96a0;
  --ink:#fff2f2; --ink-dim:#f0b9be; --ink-faint:#c98a92;
  --glass:rgba(255,255,255,.09); --glass-2:rgba(255,255,255,.15);
  --glass-brd:rgba(255,90,110,.35); --glass-brd-hi:rgba(255,140,155,.6);
  --glow:0 0 18px rgba(255,60,80,.45);
  --edge-hi:inset 0 1px 0 rgba(255,255,255,.18);
  --elev-1:0 1px 2px rgba(20,0,4,.35), 0 5px 16px rgba(20,0,4,.3);
  --lt-ink:#fff2f2; --lt-ink-dim:#f0b9be;
  --card-glass:rgba(120,4,20,.48); --card-brd:rgba(255,140,150,.45);
  --card-ink:#fff6f6; --card-ink-dim:rgba(255,214,218,.72);
  --neon:0 0 22px rgba(255,70,90,.3);
}
html[data-wtheme="power"] body,
html[data-wtheme="power"] #page-root.theme-light{
  background:
    radial-gradient(58% 40% at 86% -5%,rgba(255,120,90,.4) 0%,transparent 58%),
    radial-gradient(54% 38% at 0% 10%,rgba(255,20,60,.42) 0%,transparent 58%),
    linear-gradient(168deg,#f01829 0%,#b3000e 44%,#4d0208 100%) fixed;
  background-color:#c1000f;color:var(--ink);box-shadow:none}
html[data-wtheme="power"] .glass-card{background:var(--card-glass);border-color:var(--card-brd);
  box-shadow:var(--neon), inset 0 1px 0 rgba(255,255,255,.14)}
html[data-wtheme="power"] .theme-light .glass-card{background:var(--card-glass);
  border-color:var(--card-brd);box-shadow:var(--neon), inset 0 1px 0 rgba(255,255,255,.12)}
html[data-wtheme="power"] .top-bar .title{color:#fff}
html[data-wtheme="power"] .chip{background:rgba(255,255,255,.1);color:#ffd6da;
  border-color:rgba(255,90,110,.35);box-shadow:none}
html[data-wtheme="power"] .icon-btn{background:rgba(255,255,255,.1);
  border-color:rgba(255,90,110,.35);box-shadow:none}
html[data-wtheme="power"] .input-glass,
html[data-wtheme="power"] .theme-light .input-glass{background:rgba(255,255,255,.1);
  border-color:rgba(255,90,110,.4);color:#fff;box-shadow:none}
html[data-wtheme="power"] .input-glass:focus{border-color:#ff8f9b;box-shadow:0 0 0 3px rgba(255,60,80,.25)}
html[data-wtheme="power"] .btn-cta{background:var(--grad-cta);
  box-shadow:0 8px 24px rgba(230,0,18,.5), inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 8px rgba(120,0,10,.3)}
html[data-wtheme="power"] .badge{background:linear-gradient(160deg,#ff4552,#c3000f);
  box-shadow:0 0 10px rgba(255,40,55,.6)}
html[data-wtheme="power"] .bottom-nav{background:rgba(38,3,10,.85);border-color:rgba(255,90,110,.35);
  box-shadow:0 12px 32px rgba(20,0,5,.6), 0 0 24px rgba(255,40,60,.18), inset 0 1px 0 rgba(255,255,255,.12)}
html[data-wtheme="power"] .bottom-nav .nav-item{color:#e79aa2}
html[data-wtheme="power"] .bottom-nav .nav-item.active{color:#fff}
html[data-wtheme="power"] .bottom-nav .nav-item.active .nav-ico{
  background:linear-gradient(160deg,#ff4552,#e60012);color:#fff;
  box-shadow:0 0 16px rgba(255,40,55,.7), inset 0 1px 0 rgba(255,255,255,.4)}
html[data-wtheme="power"] .toast{background:linear-gradient(165deg,#7a0a1a,#3a0410);
  border-color:rgba(255,120,135,.4)}

/* ---- duo: ไล่เฉดฟ้า-ม่วง-แดง + กระจกไล่สี (Vibrant Electric) ---- */
html[data-wtheme="duo"]{
  --accent:#dcd0ff;
  --ink:#f8f6ff; --ink-dim:#d4c8f5; --ink-faint:#a894d8;
  --glass:rgba(255,255,255,.12); --glass-2:rgba(255,255,255,.18);
  --glass-brd:rgba(200,150,255,.4); --glass-brd-hi:rgba(230,190,255,.65);
  --glow:0 0 18px rgba(170,90,255,.45);
  --edge-hi:inset 0 1px 0 rgba(255,255,255,.25);
  --lt-ink:#f8f6ff; --lt-ink-dim:#d4c8f5;
  --card-glass:linear-gradient(160deg,rgba(70,60,220,.5),rgba(150,40,200,.42));
  --card-brd:rgba(215,160,255,.5);
  --card-ink:#ffffff; --card-ink-dim:rgba(235,220,255,.72);
  --neon:0 0 22px rgba(170,80,255,.3);
}
html[data-wtheme="duo"] body::before{content:none}
html[data-wtheme="duo"] body,
html[data-wtheme="duo"] #page-root,
html[data-wtheme="duo"] #page-root.theme-light{
  background:
    radial-gradient(56% 40% at 90% -4%,rgba(255,60,110,.3) 0%,transparent 58%),
    radial-gradient(52% 38% at 0% 8%,rgba(0,160,255,.3) 0%,transparent 55%),
    linear-gradient(160deg,#1626d8 0%,#5a1ed0 46%,#a4127a 78%,#c81444 100%) fixed;
  background-color:#3a1cb0;color:var(--ink);box-shadow:none}
html[data-wtheme="duo"] .glass-card{background:var(--card-glass);border-color:var(--card-brd);
  box-shadow:var(--neon), inset 0 1px 0 rgba(255,255,255,.18)}
html[data-wtheme="duo"] .theme-light .glass-card{background:var(--card-glass);
  border-color:var(--card-brd);box-shadow:var(--neon), inset 0 1px 0 rgba(255,255,255,.2)}
html[data-wtheme="duo"] .top-bar .title{color:#fff}
html[data-wtheme="duo"] .chip{background:rgba(255,255,255,.14);color:#eee4ff;
  border-color:rgba(200,150,255,.4);box-shadow:none}
html[data-wtheme="duo"] .icon-btn{background:rgba(255,255,255,.14);
  border-color:rgba(200,150,255,.4);box-shadow:none}
html[data-wtheme="duo"] .input-glass,
html[data-wtheme="duo"] .theme-light .input-glass{background:rgba(255,255,255,.14);
  border-color:rgba(200,150,255,.45);color:#fff;box-shadow:none}
html[data-wtheme="duo"] .input-glass:focus{border-color:#e2c8ff;box-shadow:0 0 0 3px rgba(170,90,255,.3)}
html[data-wtheme="duo"] .bottom-nav{background:rgba(30,14,80,.72);border-color:rgba(200,150,255,.4);
  box-shadow:0 12px 32px rgba(10,0,40,.55), 0 0 24px rgba(170,80,255,.2), inset 0 1px 0 rgba(255,255,255,.18)}
html[data-wtheme="duo"] .bottom-nav .nav-item{color:#c9b4ef}
html[data-wtheme="duo"] .bottom-nav .nav-item.active{color:#fff}
html[data-wtheme="duo"] .bottom-nav .nav-item.active .nav-ico{
  background:linear-gradient(160deg,#ff4552,#e60012);color:#fff;
  box-shadow:0 0 16px rgba(255,40,55,.7), inset 0 1px 0 rgba(255,255,255,.4)}
html[data-wtheme="duo"] .toast{background:linear-gradient(165deg,#3a2bb5,#1e0f66)}

/* เคารพผู้ใช้ที่ปิดแอนิเมชัน */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ชิป active ต้องชนะกฎ .chip ต่อธีม (สเปซิฟิกซิตีเท่ากัน → ประกาศทีหลังชนะ) */
html[data-wtheme="power"] .chip.active,
html[data-wtheme="night"] .chip.active,
html[data-wtheme="duo"] .chip.active{
  background:linear-gradient(160deg,#ff4552,#e60012 60%,#b3000e);
  border-color:transparent;color:#fff;
  box-shadow:0 0 14px rgba(255,40,55,.55), inset 0 1px 0 rgba(255,255,255,.4)}