@charset "UTF-8";
/* PLATOO · CSS หน้าลูกค้า (แยกจาก my-license.html · 5 พ.ย. 2026 · กฎข้อ 122 ข้อ 1) — เดิมคือ <style> บรรทัด 375–6550 เรียงตามลำดับเดิม · แก้หน้าตาหน้าลูกค้าที่นี่ */
.brand-word{font-weight:600;letter-spacing:-0.015em}.brand-word-img{display:block;width:auto;object-fit:contain}
/* [NEW — 21 ก.ย. คุยกับ user] เมนูบนหัวหน้า Dashboard ลูกค้า เดิมโชว์ปุ่มทั้งหมดเรียงเต็มบนมือถือ (flex-wrap)
   กินพื้นที่หลายบรรทัด — ย่อเหลือปุ่มแฮมเบอร์เกอร์เดียว กดถึงจะกางเป็นเมนูดรอปดาวน์ (จอกว้าง md ขึ้นไปยังโชว์เต็มแถวเหมือนเดิม) */
/* [NEW — 21 ก.ย. คุยกับ user] ปุ่มดูรหัสผ่าน (ตา) ในทุกช่องกรอกรหัสผ่าน — กดค้าง/กดสลับดูตัวอักษรที่พิมพ์ได้ กันพิมพ์ผิด */
.pw-field-wrap{ position: relative; }
.pw-field-wrap input{ padding-right: 2.6rem !important; width: 100%; }
.pw-toggle-btn{
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px; line-height: 0; color: var(--ink-muted);
}
.pw-toggle-btn:hover{ color: var(--ink); }
/* [NEW — 24 ก.ย. คุยกับ user "ป๊อปอัพสมัครสมาชิก/login ให้ดูเหมือนกระจกใส่ๆสวยๆมืออาชีพ"] glassmorphism เฉพาะ
   #authModal เท่านั้น (scope ด้วย #authModal นำหน้าทุกเซเล็กเตอร์) — ไม่แตะ .auth-card/.auth-modal-overlay แบบ
   กว้างๆ เพราะป๊อปอัพอื่น (rank/token-history/profit-breakdown/license-picker) ใช้คลาสเดียวกันอยู่ ถ้าแก้ตรงนั้น
   จะกระทบหมด — ไม่แก้ id/onclick/ฟังก์ชัน JS ใดๆ ในฟอร์มเดิมเลย แค่ชั้นภาพ (visual) ล้วนๆ */
#authModal.auth-modal-overlay{
  background: radial-gradient(120% 120% at 50% 0%, rgba(94,234,212,.08), rgba(4,10,7,.82) 55%, rgba(2,6,4,.93));
  backdrop-filter: blur(9px) saturate(115%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
}
#authModal .auth-card.auth-modal-card{
  position: relative;
  /* [แก้ 24 ก.ย. — คุยกับ user เจอปัญหาจริง "สีจางไปเพราะพื้นหลัง hero สว่าง"] เดิม color-mix() 74-80% โปร่งใสไป
     หน่อย พออยู่หน้าที่พื้นหลังสว่าง (รูปมาสคอต/hero) กระจกเลยดูจางเป็นเทาอมเขียวแทนที่จะเป็นเขียวเข้ม/ทองแบบ
     พรีเมียม — ใส่ fallback ทึบเกือบเต็ม (rgba ตรงๆ ไม่พึ่ง color-mix) ไว้ก่อน 1 ชั้น เผื่อเบราว์เซอร์ไม่รองรับ
     color-mix() ด้วย (ถ้าไม่รองรับ ทั้งบรรทัด color-mix จะถูกเบราว์เซอร์เมินไปเงียบๆ เหลือแค่ fallback อยู่ดี)
     แล้วเพิ่มเปอร์เซ็นต์ทึบของ color-mix จาก 74/80% เป็น 90/94% ให้เข้มขึ้นชัดเจน ไม่โดนพื้นหลังกลืน */
  background: linear-gradient(165deg, rgba(18,36,28,.94) 0%, rgba(9,19,13,.97) 100%);
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--paper-raised, #12241c) 90%, transparent) 0%,
    color-mix(in srgb, var(--paper, #0b1710) 94%, transparent) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 70px -22px color-mix(in srgb, var(--accent, #f0b84d) 50%, transparent);
  /* [แก้ 24 ก.ย. รอบ 2 — user แจ้งบั๊กจริง "ป๊อปอัพล็อกอินล้นจอ มองไม่เห็น"] ตอนใส่กระจก (รอบก่อนหน้า) ใส่
     overflow:hidden ไว้เพื่อคลิปมุมโค้ง/แสงฟุ้งของ ::before/::after — แต่ #authModal specificity สูงกว่า
     .auth-modal-card{overflow-y:auto} เดิมใน brand.css (แก้ไว้ตั้งแต่ 21 ก.ย. กันฟอร์มสมัครสมาชิกสูงเกินจอ) เลย
     ไปทับพฤติกรรม scroll ทิ้ง พอฟอร์มสูงกว่าจอ (โดยเฉพาะสมัครสมาชิกช่องเยอะ) เนื้อหาโดนตัด เลื่อนดูไม่ได้ — เปลี่ยนมา
     ปิด scroll แนวนอนอย่างเดียว (พอคลิปมุมโค้ง/แสงฟุ้งซ้าย-ขวาได้เหมือนเดิม) แล้วคืน scroll แนวตั้งให้ */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* [แก้ 5 ต.ค. รอบ 2 — user แจ้งบั๊ก "ทับกัน"] พอดึงปุ่มปิดกลับไป absolute มุมขวาบนแล้ว มันดันไปทับแท็บ
   เข้าสู่ระบบ/สมัครสมาชิก (ชิ้นแรกในคอลัมน์) เพราะ padding บนของการ์ด (p-6/sm:p-8) ไม่พอเว้นให้ปุ่มกลม 30px —
   เพิ่ม padding-top เฉพาะการ์ดนี้ให้มีที่ว่างพอ ไม่กระทบ padding ด้านอื่น/การ์ดอื่น */
#authModal .auth-card.auth-modal-card{ padding-top: 3.5rem; }
/* เส้นไฮไลต์บางๆ บนขอบบนสุด — จำลองแสงสะท้อนขอบกระจก */
#authModal .auth-card.auth-modal-card::before{
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  pointer-events: none;
}
/* แสงฟุ้งมุมบนซ้าย — ให้ความรู้สึกมีมิติ/ความลึกแบบแผ่นกระจก */
#authModal .auth-card.auth-modal-card::after{
  content: ''; position: absolute; top: -35%; left: -15%; width: 65%; height: 65%;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal, #5eead4) 18%, transparent), transparent 70%);
  pointer-events: none; filter: blur(14px);
}
#authModal .auth-card.auth-modal-card > *{ position: relative; z-index: 1; }
/* [แก้ 5 ต.ค. — user แจ้งบั๊ก "ปุ่ม x ไปอยู่ซ้าย"] กฎด้านบนทับ position ของปุ่มปิดจาก absolute (brand.css)
   เป็น relative ไปด้วย (เพราะเป็น direct child ของการ์ด) ปุ่มเลยหลุดไปอยู่ชิ้นแรกในคอลัมน์ (บนซ้าย)
   ดึง position: absolute กลับมาเฉพาะปุ่มปิด ให้มุมขวาบนเหมือนเดิม */
#authModal .auth-card.auth-modal-card > .auth-modal-close{ position: absolute; top: .85rem; right: .85rem; }
#authModal .auth-modal-close{
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(4px); border-radius: 999px;
  transition: background .15s ease, transform .2s ease;
}
#authModal .auth-modal-close:hover{ background: rgba(255,255,255,.14); transform: rotate(90deg); }
/* ถาดแท็บสลับ เข้าสู่ระบบ/สมัครสมาชิก แบบกระจกฝ้า (สีปุ่ม active/inactive ยังคุมโดย JS switchTab() เหมือนเดิม) */
#authModal .grid.grid-cols-2{
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(6px);
}
#authModal #tabLoginBtn, #authModal #tabSignupBtn{ transition: background .18s ease, box-shadow .18s ease, color .18s ease; }
/* ช่องกรอกข้อมูลทุกช่อง — กระจกฝ้าบางๆ พร้อม focus glow สีเขียวมิ้นต์ */
#authModal input[type="text"], #authModal input[type="email"],
#authModal input[type="password"], #authModal input[type="tel"]{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(4px);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#authModal input:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--teal, #5eead4) 55%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal, #5eead4) 18%, transparent);
  background: rgba(255,255,255,.075) !important;
}
/* ปุ่มหลัก/ปุ่ม outline ในป๊อปอัพนี้ — เพิ่มเงา/ประกายให้ดูพรีเมียมขึ้น */
#authModal .btn-primary{
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent, #f0b84d) 55%, transparent), 0 0 0 1px rgba(255,255,255,.07) inset;
  transition: transform .15s ease, box-shadow .15s ease;
}
#authModal .btn-primary:hover{ transform: translateY(-1px); }
#authModal .btn-primary:active{ transform: translateY(0); }
#authModal .btn-outline{ background: rgba(255,255,255,.035) !important; backdrop-filter: blur(4px); }
@media (max-width: 480px){
  #authModal .auth-card.auth-modal-card{ border-radius: 18px; }
}
/* [NEW — 21 ก.ย. คุยกับ user] เมนูกลางหัวเว็บหน้าแรก (แพ็กเกจ/ผลงาน/ทำงานยังไง/...) เดิมพอจอแคบ overflow-x-auto
   ทำให้เมนูถูกบีบ/ต้องเลื่อนซ้าย-ขวาดู ไม่ชัดเจนว่าเลื่อนได้ — ต่ำกว่า 860px ซ่อนเมนูเดิม เปลี่ยนเป็นปุ่มแฮมเบอร์เกอร์
   กดถึงจะกางเป็นดรอปดาวน์แนวตั้งแทน (จอกว้างกว่า 860px ยังเห็นเมนูเต็มแถวเหมือนเดิม ไม่มีปุ่มนี้) */
.landing-nav-toggle{ display: none; background: none; border: none; cursor: pointer; color: #fff; padding: 6px; flex: none; }
@media (max-width: 860px){
  .auth-topnav{ display: none; }
  /* [แก้ 22 ก.ย. — คุยกับ user เจอปัญหาจริง "ปุ่มเข้าสู่ระบบ/ปุ่มเมนูไม่อยู่มุมขวาแล้ว"] เดิมปุ่มแฮมเบอร์เกอร์กับกลุ่ม
     ปุ่มขวา (TH/EN, เข้าสู่ระบบ) ถูกดันไปอยู่มุมขวาโดยอาศัย <nav> (flex-1) ที่อยู่ตรงกลางเป็นตัวถ่างพื้นที่ให้ — พอ
     จอแคบ ≤860px แล้ว <nav> ถูกซ่อน (display:none) ตัวถ่างพื้นที่หายไปด้วย ทำให้ปุ่มแฮมเบอร์เกอร์+กลุ่มปุ่มขวาลอยไป
     ติดกับโลโก้แทน (ดูเหมือนอยู่กลางจอ) — ใส่ margin-left:auto ให้ปุ่มแฮมเบอร์เกอร์ดันตัวเองไปชิดขวาแทน */
  .landing-nav-toggle{ display: inline-flex; margin-left: auto; }
}
/* [แก้ 22 ก.ย. — คุยกับ user เจอปัญหาจริง "ปุ่มสมัครสมาชิกล้นจอมือถือ"] บนจอแคบมากๆ (มือถือทั่วไป ≤480px) แถวขวาสุด
   ของ header (โลโก้ที่เพิ่งขยายใหญ่ขึ้น + ปุ่มแฮมเบอร์เกอร์ + สลับภาษา TH/EN + ปุ่ม "เข้าสู่ระบบ" + ปุ่ม "สมัครสมาชิก")
   รวมกันกว้างเกินความกว้างจอจริง (แถวนี้ตั้ง flex ไม่ wrap มาตั้งแต่แรก) ทำให้ปุ่ม "สมัครสมาชิก" ที่อยู่ขวาสุดถูกดันล้น
   ออกนอกจอไปเลย — แก้โดย (1) ลดขนาดโลโก้กลับลงเฉพาะจอแคบมาก กันไปชนกับตอนที่เพิ่งขยายให้ใหญ่ขึ้นสำหรับจอปกติ
   (2) ซ่อนปุ่มสลับภาษา TH/EN ชั่วคราวเฉพาะจอแคบมากนี้ (เลือกไว้ครั้งเดียวก็จำใน localStorage อยู่แล้ว ไม่ใช่ปุ่มที่ต้อง
   กดบ่อย — ยังกดสลับได้ตามปกติถ้าหมุนจอ/ขยายจอกว้างขึ้น) (3) ลด gap/padding ปุ่มลงอีกนิด ให้พอดีจอ */
@media (max-width: 480px){
  header .max-w-6xl.w-full.mx-auto.flex.items-center.gap-3{ gap: .4rem; }
  header img.brand-word-img{ height: 1.7rem !important; }
  header .lang-switch{ display: none; }
  header .btn-sm{ padding: .38rem .6rem; font-size: .72rem; }
}
.auth-topnav.is-open{
  display: flex !important; flex-direction: column; align-items: stretch; gap: .25rem !important;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 25;
  background: rgba(20,42,37,0.98); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: .75rem 1.25rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08);
  overflow-x: visible !important;
}
.auth-topnav.is-open .auth-nav-link{ padding: .6rem .25rem; }
/* [NEW — 22 ก.ย. คุยกับ user] สำเนาปุ่มสลับภาษาในเมนูแฮมเบอร์เกอร์ (สำหรับจอแคบ ≤480px ที่ซ่อนปุ่มเดิมที่หัวเว็บไป)
   ปกติซ่อนไว้เสมอ (กันไปโชว์ซ้ำกับปุ่มที่หัวเว็บตอนจอกว้าง/ตอนเมนูยังไม่กาง) โชว์เฉพาะตอนกางเมนูมือถือเท่านั้น */
.lang-switch.nav-lang-switch{ display: none; }
/* [NEW — 6 ต.ค.] ไอคอนลูกโลกเปลี่ยนภาษาที่หัวเว็บหน้าแรก (พื้นเข้ม) — คู่กับ .dash-profile-menu-dropdown (เมนูพื้นสว่างเดิม) */
.land-lang-btn{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  cursor:pointer; background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); color: var(--sidebar-ink); flex: none; }
.land-lang-btn:hover{ background: rgba(255,255,255,.14); }
/* เมนูแฮมเบอร์เกอร์มีปุ่มภาษาซ้ำไว้สำหรับจอแคบ — ตอนนี้ไอคอนหัวเว็บโชว์ทุกจอแล้ว ไม่ต้องโชว์ซ้ำในเมนูอีก */
.auth-topnav.is-open .lang-switch.nav-lang-switch{ display: none !important; }
.auth-topnav.is-open .lang-switch.nav-lang-switch{ display: inline-flex; margin-top: .5rem; align-self: center; }
#dashNavActions{ display: none; }
/* [แก้ 21 ก.ย. — คุยกับ user เจอปัญหาจริง] "กดเมนูสามขีดแล้วมองไม่เห็นเพิ่มคีย์ใหม่/สลับคีย์/หมายเลขคีย์" — เดิมใช้
   position:absolute; top:100% โดยอิงว่า <header> (position:sticky) เป็น containing block ให้ลูกเสมอ แต่เบราว์เซอร์
   ในแอป (เช่น LINE/Facebook in-app browser หรือ WebView เก่าบนมือถือบางรุ่น) มีบั๊กที่ sticky ไม่ทำหน้าที่นี้ให้
   ดรอปดาวน์เลยหลุดไปวางผิดตำแหน่ง/นอกจอ — เปลี่ยนเป็น position:fixed (อิงตำแหน่งกับหน้าจอตรงๆ เสมอ ไม่พึ่ง
   containing block ของ header เลย) แล้วให้ JS (toggleDashNav) คำนวณ top ให้พอดีใต้ header จริงทุกครั้งที่เปิด */
#dashNavActions.is-open{
  display: flex; flex-direction: column; align-items: stretch; gap: .6rem;
  position: fixed; left: 0; right: 0; z-index: 30;
  max-height: calc(100vh - 4rem); overflow-y: auto;
  /* [30 ต.ค. user "มือถือ กดสามขีดแล้วเลื่อนหาปุ่มออกจากระบบไม่ได้"] เดิมสูงสุด 100vh-4rem ตายตัว แต่หัวเว็บจริงสูง ~108px และ 100vh
     บนมือถือนับรวมแถบที่อยู่เว็บ → ก้นเมนูล้นใต้จอ ปุ่มท้ายสุด (ออกจากระบบ) เลื่อนไม่ถึง · ตอนนี้ JS (dashNavFit) ตั้งความสูง = จอที่เห็นจริง − ขอบล่างหัวเว็บ */
  max-height: calc(100dvh - var(--nav-top, 4rem));
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 16px 28px -14px rgba(0,0,0,.3);
}
@media (min-width: 768px){
  /* [แก้ 5 ต.ค. — คุยกับ user "เมนูบนให้ไปอยู่ซ้ายแบบ Exness ตอนเปิดที่คอม"] เดิม forced display:flex ให้แถวปุ่มเดิม
     โชว์ตลอดบนจอคอม — ตอนนี้ย้ายปุ่มทั้งหมดไปเมนูซ้าย (.dash-sidebar) แทนแล้ว ซ่อนแถวเดิมบนจอคอมไปเลย (มือถือยังเห็น
     เหมือนเดิมทุกอย่าง ไม่กระทบ ดู #dashNavActions.is-open ด้านบนที่ยังใช้งานปกติ <768px) */
  #dashNavActions{ display: none !important; }
  #dashNavHamburger{ display: none !important; }
}
/* [NEW — 5 ต.ค. คุยกับ user "อยากได้เมนูซ้ายแบบ Exness ตอนเปิดที่คอม แบ่งเป็นหมวด ยอด Token เพิ่มมาอีกจุดในหัวเว็บ
   ไม่ต้องเอาอันเก่าออก"] โครงสร้างใหม่ — เฉพาะจอคอม (md ขึ้นไป) เท่านั้นตามที่ user ยืนยัน มือถือไม่กระทบเลย (ยังใช้
   #dashNavActions/#dashNavHamburger เดิมทุกอย่างตามปกติ ดูบล็อกด้านบน) */
.dash-shell{ display: flex; align-items: flex-start; width: 100%; }
.dash-sidebar{ display: none; }
.dash-header-desktop-extra{ display: none; }
.dash-main-area{ flex: 1; min-width: 0; }
@media (min-width: 768px){
  .dash-sidebar{
    display: flex; flex-direction: column; gap: .2rem;
    width: 230px; flex: none; align-self: stretch;
    border-right: 1px solid var(--line); background: var(--paper);
    padding: 1.1rem .85rem; position: sticky; top: 65px;
    height: calc(100vh - 65px); overflow-y: auto;
    /* [แก้ 7 ต.ค. คุยกับ user "หมุนเมาส์แล้วเมนูซ้ายหมุนตาม"] แยกการเลื่อน — เลื่อนเมนูสุดแล้วไม่ส่งต่อไปเลื่อนทั้งหน้า */
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent;
    transition: width .18s ease, padding .18s ease;
  }
  /* [แก้ 7 ต.ค. คุยกับ user "เลื่อนลงสุดแล้วเมนูซ้ายโดนดันขึ้นไปหลังแถบหัว"] sticky หยุดได้แค่ขอบล่างของ .dash-shell
     แต่ footer อยู่นอก shell — พอเลื่อนถึงท้ายหน้า เมนูถูกดันขึ้นไปซ่อนหลังแถบหัว ดูเหมือนเลื่อนตาม — เปลี่ยนเป็น fixed
     ยึดกับจอเลย แล้วเว้นที่ด้านซ้ายให้เนื้อหาแทน (ย่อเมนู = 64px) */
  .dash-sidebar{ position: fixed; left: 0; top: 65px; z-index: 5; }
  .dash-main-area{ margin-left: 230px; transition: margin-left .18s ease; }
  .dash-shell:has(.dash-sidebar.is-collapsed) .dash-main-area{ margin-left: 64px; }
  .dash-sidebar:hover{ scrollbar-color: color-mix(in srgb, var(--ink-muted) 45%, transparent) transparent; }
  .dash-sidebar::-webkit-scrollbar{ width: 6px; }
  .dash-sidebar::-webkit-scrollbar-thumb{ background: transparent; border-radius: 999px; }
  .dash-sidebar:hover::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--ink-muted) 45%, transparent); }
  .dash-sidebar.is-collapsed{ width: 64px; padding: 1.1rem .5rem; }
  .dash-sidebar.is-collapsed .dash-sidebar-label,
  .dash-sidebar.is-collapsed .dash-sidebar-group-title,
  .dash-sidebar.is-collapsed .dash-sidebar-chevron{ display: none; }
  .dash-sidebar.is-collapsed .dash-sidebar-item{ justify-content: center; }
  .dash-sidebar.is-collapsed .dash-sidebar-group-head{ justify-content: center; }
  /* [แก้ 5 ต.ค.] ตอนย่อเมนู ซ่อนรายการย่อยไปเลย (ไม่มีไอคอนต่อแถว ถ้าไม่ซ่อนจะเห็นเป็นแถวว่างๆ) เหลือแค่ไอคอน
     หมวดหลักให้กดเปิด/ปิดได้เหมือนเดิม */
  .dash-sidebar.is-collapsed .dash-sidebar-group-items{ display: none !important; }
  .dash-sidebar-group{ display: flex; flex-direction: column; }
  .dash-sidebar-group-head{
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .55rem .55rem; border-radius: 8px; cursor: pointer; background: none; border: none;
    width: 100%; text-align: left; font-size: .8rem; font-weight: 600; color: var(--ink-muted);
  }
  .dash-sidebar-group-head:hover{ background: var(--paper-raised); }
  .dash-sidebar-chevron{ transition: transform .15s ease; flex: none; color: var(--ink-muted); }
  .dash-sidebar-group.is-open .dash-sidebar-chevron{ transform: rotate(180deg); }
  .dash-sidebar-group-items{ display: flex; flex-direction: column; overflow: hidden; max-height: 0; transition: max-height .18s ease; }
  .dash-sidebar-group.is-open .dash-sidebar-group-items{ max-height: 320px; }
  .dash-sidebar-item{
    display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem .55rem 2.4rem;
    border-radius: 8px; font-size: .85rem; color: var(--ink); text-decoration: none;
    border: none; background: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  }
  .dash-sidebar-item:hover{ background: var(--paper-raised); }
  .dash-sidebar-collapse-btn{
    margin-top: auto; display: flex; align-items: center; justify-content: center;
    gap: .4rem; padding: .6rem; border-radius: 8px; border: none; background: none;
    color: var(--ink-muted); cursor: pointer; font-size: .8rem; font-family: inherit;
  }
  .dash-sidebar-collapse-btn:hover{ background: var(--paper-raised); }
  /* [17 ต.ค. user "ย่อเมนูกับเมนูร้านค้ามันทับกัน"] จอคอม: ปุ่มร้านค้าลอยขยับไปขวาพ้นเมนูซ้าย (ตามความกว้างเมนูตอนเปิด/ย่อ) */
  body:has(#dashboardView:not([hidden]) .dash-sidebar) #pkgFloatBtn{ left: calc(230px + 1rem); transition: left .18s ease, transform .15s ease; }
  body:has(#dashboardView:not([hidden]) .dash-sidebar.is-collapsed) #pkgFloatBtn{ left: calc(64px + 1rem); }
  body:has(#dashboardView:not([hidden]) .dash-sidebar) #bagFab{ left: calc(230px + 1rem); transition: left .18s ease, transform .15s ease; }
  body:has(#dashboardView:not([hidden]) .dash-sidebar.is-collapsed) #bagFab{ left: calc(64px + 1rem); }
  body:has(#dashboardView:not([hidden]) .dash-sidebar) #msnFab{ left: calc(230px + 1rem); transition: left .18s ease, transform .15s ease; }
  body:has(#dashboardView:not([hidden]) .dash-sidebar.is-collapsed) #msnFab{ left: calc(64px + 1rem); }
  .dash-sidebar-collapse-btn svg{ transition: transform .18s ease; flex: none; }
  .dash-sidebar.is-collapsed .dash-sidebar-collapse-btn svg{ transform: rotate(180deg); }
  /* หัวเว็บจอคอม — เหลือแค่โลโก้ (เดิม) + ยอด Token + สลับภาษา ตามที่ user ขอให้ดูง่าย */
  .dash-header-desktop-extra{ display: flex; align-items: center; gap: 1rem; margin-left: auto; }
  .dash-topbar-token{
    display: flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px;
    background: var(--paper-raised); border: 1px solid var(--line); font-size: .82rem; font-weight: 600;
    color: var(--ink); white-space: nowrap;
  }
  .dash-topbar-token svg{ color: var(--accent); flex: none; }
}
/* [NEW — 5 ต.ค. คุยกับ user "โปรไฟล์เอาไปไว้มุมขวาบน ทำเป็นไอคอนคลิกเอา"] ไอคอนโปรไฟล์มุมขวาบนของหัวเว็บจอคอม +
   เมนูย่อยที่กางลงมา (โปรไฟล์ของฉัน/ออกจากระบบ) — ไม่ใส่ในบล็อก @media (min-width:768px) ด้านบนเพราะ
   .dash-profile-menu เป็นลูกของ .dash-header-desktop-extra ซึ่ง display:none อยู่แล้วบนมือถือโดยอัตโนมัติ */
.dash-profile-menu{ position: relative; }
.dash-profile-icon-btn{
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink-muted);
}
.dash-profile-icon-btn:hover{ color: var(--ink); background: var(--line); }
/* [17 ต.ค.] ปุ่มกระดิ่ง/โทรโข่ง + กล่องแจ้งเตือน */
.ibx-grp{display:flex;align-items:center;gap:.5rem}
.ibx-m{margin-left:auto}
@media (min-width:768px){.ibx-m{display:none!important}}
.ibx-btn{position:relative}
.ibx-btn svg{width:19px;height:19px}
.ibx-btn.on{color:var(--ink);background:var(--line)}
.ibx-dot{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font:700 .62rem/17px 'IBM Plex Mono',monospace;text-align:center;font-style:normal;box-shadow:0 0 0 2px var(--paper),0 0 10px rgba(239,68,68,.6);animation:ibxPop .35s cubic-bezier(.2,1.6,.4,1)}
.ibx-dot[hidden]{display:none}
@keyframes ibxPop{0%{transform:scale(.3)}100%{transform:scale(1)}}
.ibx-btn.ring svg{animation:ibxRing 1.1s ease-in-out 2;transform-origin:50% 15%}
@keyframes ibxRing{0%,100%{rotate:0deg}15%{rotate:16deg}30%{rotate:-14deg}45%{rotate:10deg}60%{rotate:-6deg}75%{rotate:3deg}}
#ibxPanel{position:fixed;z-index:70;width:min(380px,calc(100vw - 24px));max-height:min(72vh,560px);display:flex;flex-direction:column;background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 48px -18px rgba(0,0,0,.4);overflow:hidden;animation:ibxIn .18s ease-out}
#ibxPanel[hidden]{display:none}
@keyframes ibxIn{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
#ibxPanel .ibx-hd{display:flex;align-items:center;gap:.5rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-weight:700;font-size:.92rem}
#ibxPanel .ibx-hd svg{width:18px;height:18px;color:#e09a2c}
#ibxPanel .ibx-hd small{margin-left:auto;font-weight:500;color:var(--ink-muted);font-size:.72rem}
#ibxPanel .ibx-bd{overflow:auto;padding:.4rem;overscroll-behavior:contain}
#ibxPanel .ibx-sec{padding:.45rem .6rem .25rem;font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--ink-muted);text-transform:uppercase}
.ibx-it{display:flex;gap:.65rem;padding:.65rem .7rem;border-radius:12px;position:relative;cursor:default}
.ibx-it.lk{cursor:pointer}
.ibx-it.lk:hover{background:color-mix(in srgb,var(--line) 70%,transparent)}
.ibx-it .ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(240,184,77,.14);color:#c88a1f}
.ibx-it .ic svg{width:16px;height:16px}
.ibx-it.live .ic{background:rgba(16,185,129,.12);color:#059669}
.ibx-it.live .ic i{width:9px;height:9px;border-radius:50%;background:#10b981;animation:ptPulse 2.2s ease-out infinite}
.ibx-it.warn .ic{background:rgba(239,68,68,.12);color:#dc2626}
.ibx-it.promo .ic{background:rgba(168,85,247,.13);color:#9333ea}
.ibx-it .tx{min-width:0;flex:1}
.ibx-it b{display:block;font-size:.83rem;line-height:1.35;word-break:break-word}
.ibx-it p{margin:.15rem 0 0;font-size:.75rem;line-height:1.45;color:var(--ink-muted);white-space:pre-line;word-break:break-word}
.ibx-it time{display:block;margin-top:.2rem;font-size:.66rem;color:var(--ink-muted);opacity:.8}
.ibx-it.new::after{content:"";position:absolute;top:.9rem;right:.7rem;width:8px;height:8px;border-radius:50%;background:#ef4444}
.ibx-it.new{background:color-mix(in srgb,#f0b84d 8%,transparent)}
.ibx-empty{padding:1.6rem 1rem;text-align:center;color:var(--ink-muted);font-size:.8rem}
/* ข้อความสถานะบอท/ตลาดปิด ย้ายไปอยู่ในกระดิ่งแล้ว (ยังทำงานเบื้องหลังเพื่อส่งข้อความให้กระดิ่ง) */
#posToast{display:none!important}
#marketClosedBanner{display:none!important}
/* [18 ต.ค. user "แจ้งเตือนทำไมยังอยู่ตรงนี้ เอาไปไว้ที่ใหม่"] แถบ "บอทหยุดเพราะคุณปิดไม้เอง? ปลดล็อกบอท" + กล่องบอทหยุดชั่วคราว → ย้ายเข้ากระดิ่ง (ปุ่มปลดล็อกกดได้ในกระดิ่ง) */
#mcQuickRow,#manualCloseLockSection{display:none!important}
.ibx-act{margin-top:.45rem;padding:.32rem .75rem;border-radius:8px;border:1px solid #c9a64a;background:linear-gradient(#f6dc8f,#e9bf55);color:#3d2b05;font-size:.74rem;font-weight:800;cursor:pointer}
.ibx-act:disabled{opacity:.6;cursor:default}
.ibx-it .ok{display:block;margin-top:.35rem;font-size:.72rem;color:#059669;font-weight:700}
@media (max-width:640px){#ibxPanel{left:12px!important;right:12px!important;width:auto}}
html[data-fxq="0"] .ibx-btn.ring svg,html[data-fxq="0"] .ibx-dot{animation:none}
.dash-profile-menu-dropdown{
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 25;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 24px -12px rgba(0,0,0,.28); padding: .4rem; min-width: 11rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.dash-profile-menu-item{
  display: block; padding: .55rem .7rem; border-radius: 6px; font-size: .82rem;
  color: var(--ink); text-decoration: none; white-space: nowrap; text-align: left;
  background: none; border: none; cursor: pointer; width: 100%; font-family: inherit;
}
/* [แก้ 5 ต.ค. — เจอบั๊กจริงตรวจโค้ด] attribute hidden ของ HTML ปกติ specificity เท่ากับ class ธรรมดา แต่อยู่ใน
   UA stylesheet (origin ต่ำกว่า author stylesheet) เลยแพ้ .dash-profile-menu-item{display:block} ด้านบนเสมอ —
   ปุ่มที่ตั้งใจซ่อนด้วย attribute hidden (เช่น #dashProfileMenuProfileItem) เลยโชว์ค้างอยู่ตลอดทั้งที่ไม่ควรเห็น
   บังคับ !important ทับให้ hidden ทำงานจริงตามที่ตั้งใจ */
.dash-profile-menu-item[hidden]{ display: none !important; }
.dash-profile-menu-item:hover{ background: var(--paper); }
/* [NEW — 5 ต.ค.] สถานะ "ภาษาที่เลือกอยู่" ในเมนูเปลี่ยนภาษาแบบไอคอน (ใช้ class .lang-btn.is-active เดิมที่ setLang()
   toggle อยู่แล้ว แค่เพิ่มสไตล์ตอนอยู่ในเมนูย่อยนี้) */
.dash-profile-menu-item.is-active{ background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.dash-profile-menu-item.is-active:hover{ background: var(--accent); }
/* [NEW — 21 ก.ย. คุยกับ user] เมนู "เพิ่มเติม" (ไอคอน 3 ขีด) เก็บลิงก์ที่ใช้ไม่บ่อย (คู่มือการใช้งาน) ไว้ในนี้
   แทนที่จะโชว์เป็นปุ่มลอยอยู่บนแถบเมนูตลอด ลดความรกของแถบเมนู — ใช้ได้ทั้งมือถือและเดสก์ท็อป */
.nav-more-wrap{ position: relative; }
.nav-more-menu{
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 25;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 24px -12px rgba(0,0,0,.28); padding: .4rem; min-width: 11rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.nav-more-item{
  display: block; padding: .55rem .7rem; border-radius: 6px; font-size: .82rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav-more-item:hover{ background: var(--paper); }
/* [NEW — 2 ต.ค. คุยกับ user เจอปัญหาจริง "กดสามขีดเข้าไปแล้ว ยังมีสามขีดให้กดอีกรอบ ลูกค้างง"] บนมือถือ เมนู
   #dashNavActions ที่กางออกมาจากปุ่มแฮมเบอร์เกอร์หลัก (#dashNavHamburger) ก็เป็นรายการแนวตั้งอยู่แล้ว ไม่จำเป็น
   ต้องซ้อนไอคอน ☰ "เพิ่มเติม" (#navMoreBtn) ไว้ข้างในอีกชั้น — ซ่อนไอคอนนั้นแล้วบังคับโชว์ "โปรไฟล์ของฉัน"/
   "คู่มือการใช้งาน" เป็นรายการแบนราบไปเลยในหน้าจอแคบ กดครั้งเดียวจบ (เดสก์ท็อป/แท็บเล็ตขึ้นไปยังใช้ไอคอน ☰ ย่อ
   เหมือนเดิม เพราะที่ว่างบนแถบเมนูมีจำกัดจริง) */
@media (max-width: 767px){
  #navMoreBtn{ display: none; }
  .nav-more-wrap{ width: 100%; }
  .nav-more-menu{
    position: static; display: flex !important; flex-direction: column;
    border: none; box-shadow: none; padding: 0; background: transparent; min-width: 0; gap: .6rem;
  }
  .nav-more-item{
    padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
    text-align: center; /* [แก้ 2 ต.ค. — คุยกับ user "ไม่อยู่กลางแบบปุ่มอื่น"] ปุ่มอื่นในเมนูนี้เป็น <button> จัดกลาง
    เองอยู่แล้ว แต่ 2 รายการนี้เป็น <a> ซึ่งเดิม text-align ชิดซ้ายตามปกติของลิงก์ */
  }
  /* [แก้ 2 ต.ค. — คุยกับ user "ตรงชื่อด้วย ยังไม่กลาง"] #navKey (ข้อความทักทายชื่อลูกค้า) เป็น <span> ธรรมดา ไม่ใช่
     <button> เลยไม่ได้จัดกลางข้อความเองเหมือนปุ่มอื่นในเมนูที่กางแนวตั้งนี้ — บังคับให้เป็น block + จัดกลางด้วย */
  #dashNavActions #navKey{ display: block; text-align: center; width: 100%; }
}
/* ===== [NEW — 19 ก.ย.] บล็อก "ทำงานยังไง" เวอร์ชันละเอียด (ยกเนื้อหามาจากหน้า V143)
   ใช้คลาส auth-* เดิมเป็นหลัก ส่วนที่เดิมไม่มี (stat strip / score bar / pill / table) ประกาศเพิ่มตรงนี้
   สีทองอ้างอิงจาก logoGrad เดิม (#e6b567) เพื่อไม่ให้หลุดธีม ===== */
.pl-detail{display:flex;flex-direction:column;gap:2.75rem}
.pl-sub{display:flex;flex-direction:column;gap:1.15rem}
.pl-sub-head{display:flex;flex-direction:column;gap:.45rem}
.pl-kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;color:#e6b567}
.pl-sub-head h3{font-size:1.2rem;font-weight:600;color:var(--sidebar-ink);line-height:1.35}
.pl-sub-head p{font-size:.875rem;color:var(--sidebar-ink-muted);line-height:1.75;max-width:56ch}
.pl-stat-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden}
@media(min-width:640px){.pl-stat-strip{grid-template-columns:repeat(4,1fr)}}
.pl-stat{background:rgba(255,255,255,.03);padding:1.05rem .9rem;text-align:center}
.pl-stat .n{display:block;font-family:'IBM Plex Mono',monospace;font-size:1.6rem;font-weight:600;color:#e6b567;line-height:1.1}
.pl-stat .l{display:block;font-size:.72rem;color:var(--sidebar-ink-muted);margin-top:.35rem}
.pl-pill-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.pl-pill{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sidebar-ink-muted);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.15rem .6rem;white-space:nowrap}
.pl-score{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.4rem 1.25rem;display:flex;flex-direction:column;gap:.7rem}
.pl-score-row{display:flex;align-items:center;gap:.8rem}
.pl-score-row .lbl{font-size:.82rem;color:var(--sidebar-ink-muted);flex:0 0 auto;width:10.5rem}
@media(max-width:520px){.pl-score-row .lbl{width:7.5rem;font-size:.74rem}}
.pl-score-bar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.pl-score-bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#e6b567,#2dd4bf)}
.pl-score-row .val{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:#e6b567;width:2.7rem;text-align:right;flex:none}
.pl-table-wrap{overflow-x:auto;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px}
.pl-table{width:100%;border-collapse:collapse;font-size:.83rem;min-width:520px}
.pl-table th{text-align:left;padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.1);color:var(--sidebar-ink-muted);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;font-weight:500;white-space:nowrap}
.pl-table td{padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);color:var(--sidebar-ink);vertical-align:top}
.pl-table tr:last-child td{border-bottom:none}
.pl-mono{font-family:'IBM Plex Mono',monospace}
.pl-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#e6b567;margin-right:.5rem;vertical-align:middle}
.pl-check{color:var(--good);font-size:1rem}
.auth-feature-card.is-danger{border-color:rgba(239,68,68,.28)!important;background:rgba(239,68,68,.05)!important}
/* ===== [แก้ 20 ก.ย. — คุยกับ user] เดิมเป็นแถบบางๆ ตอนนี้ทำเป็นการ์ดสวยขึ้น มีไอคอน + บล็อกเทียบภาพ
   "เปิดร้านส้มตำ" vs "บอทเทรด" — สีทองไล่เฉด (#e6b567 → #9c6a1f เหมือน logoGrad เดิม) ไม่ใช่ popup/modal
   ยังอยู่ในเนื้อหาปกติ ไม่บล็อกการอ่านอย่างอื่น (ดู dismissRiskBanner()/init() ท้ายไฟล์ — โผล่ทุกครั้งที่เปิดหน้าใหม่) ===== */
.risk-card{position:relative;display:flex;flex-direction:column;gap:1rem;background:linear-gradient(145deg,rgba(230,181,103,.1),rgba(230,181,103,.03));border:1px solid rgba(230,181,103,.3);border-radius:16px;padding:1.35rem 1.5rem;animation:riskBannerIn .4s ease;box-shadow:0 8px 24px -12px rgba(0,0,0,.35)}
.risk-card-head{display:flex;align-items:center;gap:.7rem}
.risk-card-icon{flex:none;width:2.4rem;height:2.4rem;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:linear-gradient(135deg,#e6b567,#9c6a1f);box-shadow:0 4px 14px -4px rgba(230,181,103,.6)}
.risk-card-head h3{margin:0;font-size:1.02rem;font-weight:600;color:var(--sidebar-ink);line-height:1.35}
.risk-card-text{margin:0;font-size:.86rem;line-height:1.75;color:var(--sidebar-ink-muted);max-width:68ch}
.risk-card-text b{color:var(--sidebar-ink);font-weight:600}
/* [แก้ 20 ก.ย. — คุยกับ user] เดิม flex-wrap ทำให้ 2 การ์ดตกบรรทัดกันบนมือถือจอแคบ (min-width 9.5rem x2 + gap
   เกินความกว้างจอ) — เปลี่ยนเป็น nowrap บังคับอยู่แถวเดียวกันเสมอ + ให้การ์ดหดได้ (min-width:0, flex:1) แล้วลด
   padding/font-size ลงเฉพาะจอแคบผ่าน media query แทน เพื่อให้พอดีไม่ล้น ไม่ใช่ปล่อยให้มันตกบรรทัดไปเอง */
.risk-card-compare{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.15rem;flex-wrap:nowrap}
.risk-compare-item{display:flex;flex:1;flex-direction:column;align-items:center;gap:.2rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.9rem 1.4rem;min-width:0;max-width:11rem}
.risk-compare-item.is-highlight{background:rgba(230,181,103,.1);border-color:rgba(230,181,103,.4)}
.risk-compare-emoji{font-size:1.6rem;line-height:1}
.risk-compare-label{font-size:.82rem;font-weight:600;color:var(--sidebar-ink);margin-top:.25rem;white-space:nowrap}
.risk-compare-sub{font-size:.7rem;color:var(--sidebar-ink-muted);text-align:center}
.risk-compare-vs{flex:none;font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:#e6b567;font-weight:600;letter-spacing:.05em}
@media(max-width:420px){
  .risk-compare-item{padding:.6rem .5rem}
  .risk-compare-emoji{font-size:1.2rem}
  .risk-compare-label{font-size:.7rem}
  .risk-compare-sub{font-size:.6rem}
  .risk-card-compare{gap:.4rem}
}
.risk-card-close{position:absolute;top:.85rem;right:.9rem;background:transparent;border:none;color:var(--sidebar-ink-muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 .2rem}
.risk-card-close:hover{color:var(--sidebar-ink)}
/* [แก้ 20 ก.ย. — คุยกับ user] เปลี่ยนจากปุ่มข้อความ "ข้อความถัดไป →" เป็น dot-indicator + ปุ่มลูกศรวงกลม
   ให้ดูเป็นตัวควบคุม carousel มืออาชีพ แทนคำสั่งเป็นข้อความล้วน */
.risk-card-nav{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;margin-top:-.3rem}
.risk-card-dots{display:flex;align-items:center;gap:.32rem}
.risk-card-dot{width:6px;height:6px;border-radius:999px;background:rgba(230,181,103,.28);transition:width .25s ease,background .25s ease;padding:0}
.risk-card-dot.is-active{width:16px;background:#e6b567}
.risk-card-next{flex:none;width:1.9rem;height:1.9rem;border-radius:999px;border:1px solid rgba(230,181,103,.35);background:rgba(230,181,103,.08);color:#c9924a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .15s ease}
.risk-card-next:hover{background:rgba(230,181,103,.2);border-color:rgba(230,181,103,.6)}
.risk-card-next:active{transform:scale(.92)}
.risk-card-next svg{width:13px;height:13px;display:block}
@keyframes riskBannerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.risk-card{padding:1.15rem 1.1rem}.risk-card-head h3{font-size:.94rem}}
/* [NEW — 25 ก.ย.] สิทธิ์พิเศษ (perks) ในบันได Rank */
.rank-modal-row-extra{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.rank-modal-row-extra span{font-size:.66rem;padding:.12rem .5rem;border-radius:999px;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
/* [NEW — 25 ก.ย.] ป๊อปอัพสไลด์โปรโมชั่นหน้าแรก (ก่อนล็อกอิน) */
.promo-overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:radial-gradient(ellipse at center,rgba(6,26,20,.72),rgba(0,0,0,.82));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s ease}
.promo-overlay.is-show{opacity:1}
.promo-wrap{width:min(960px,100%);display:flex;flex-direction:column;align-items:center;gap:.75rem;transform:translateY(14px) scale(.97);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.promo-overlay.is-show .promo-wrap{transform:none}
.promo-box{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#0b1f19;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(230,181,103,.35),0 0 40px -8px rgba(230,181,103,.35)}
.promo-viewport{overflow:hidden;width:100%;aspect-ratio:3/1;touch-action:pan-y}
.promo-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.promo-slide{flex:0 0 100%;height:100%;cursor:pointer;display:block;border:0;padding:0;background:none}
.promo-slide img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.promo-close{position:absolute;top:.6rem;right:.6rem;z-index:3;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.55);color:#fff;font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease}
.promo-close:hover{background:rgba(0,0,0,.8);transform:rotate(90deg)}
.promo-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.4);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.75;transition:opacity .15s ease,background .15s ease}
.promo-arrow:hover{opacity:1;background:rgba(0,0,0,.7)}
.promo-arrow.prev{left:.6rem}.promo-arrow.next{right:.6rem}
.promo-dots{position:absolute;left:0;right:0;bottom:.55rem;z-index:2;display:flex;justify-content:center;gap:.4rem}
.promo-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:all .25s ease}
.promo-dots button.is-active{width:22px;background:#e6b567}
.promo-snooze{font-size:.8rem;color:rgba(255,255,255,.8);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.promo-snooze:hover{color:#fff}
@media (max-width:640px){.promo-arrow{display:none}.promo-box{border-radius:12px}.promo-close{width:30px;height:30px;top:.4rem;right:.4rem;font-size:.85rem}.promo-dots{bottom:.35rem}}
@media (prefers-reduced-motion:reduce){.promo-track,.promo-overlay,.promo-wrap{transition:none}}
/* [NEW — 25 ก.ย.] ตารางผลงานสด: มือถือเป็นการ์ดต่อบัญชี */
.live-cards{display:none}
@media (max-width:639px){
  .live-table-wrap{display:none}
  .live-cards{display:flex;flex-direction:column;gap:.6rem}
}
.live-card{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.035);padding:.7rem .8rem;display:flex;flex-direction:column;gap:.55rem}
.live-card-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.82rem;color:var(--sidebar-ink)}
.live-card-head .lot{font-size:.72rem;color:var(--sidebar-ink-muted)}
.live-card-days{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.live-card-days > div{display:flex;flex-direction:column;align-items:center;gap:.05rem;padding:.35rem .2rem;border-radius:8px;background:rgba(255,255,255,.04)}
.live-card-days .d{font-size:.64rem;color:var(--sidebar-ink-muted)}
.live-card-days .v{font-size:.78rem;font-weight:600;font-family:'IBM Plex Mono',monospace;white-space:nowrap}
/* [NEW — 5 ต.ค. คุยกับ user "อยากเพิ่มแท็บสลับไปดูยอดรวมทั้งหมด"] แท็บสลับ "รายวัน" / "ยอดรวม" ในกล่อง
   "ข้อมูลสดจากบัญชีที่รันจริง" — ใช้โทนสีเดียวกับ auth-badge/accent ของ section นี้ (ไม่ใช่ .eaTabBtn ที่ออกแบบ
   ไว้สำหรับหน้า Dashboard หลังล็อกอิน ซึ่งใช้ตัวแปรสี --ink-muted/--line คนละชุดกับหน้านี้ที่เป็น --sidebar-ink) */
.live-tabs{display:flex;gap:.4rem}
.live-tab-btn{font-size:.78rem;font-weight:600;padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--sidebar-ink-muted);cursor:pointer;transition:background .15s ease,color .15s ease}
.live-tab-btn.is-active{background:var(--accent,#e6b567);border-color:transparent;color:#241a08}
/* [NEW] การ์ด "ยอดรวมทั้งหมด" ต่อบัญชี — เป็นกริดเดียวทุกขนาดจอ (ไม่ต้องสลับตาราง/การ์ดแบบแท็บรายวัน เพราะมีแค่
   2 ตัวเลขต่อบัญชี ไม่กว้างพอจะมีปัญหาล้นจอมือถือ) */
.live-total-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}
.live-total-card{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.035);padding:.75rem .85rem;display:flex;flex-direction:column;gap:.3rem}
.live-total-card .acc{font-size:.72rem;color:var(--sidebar-ink-muted);font-family:'IBM Plex Mono',monospace}
.live-total-card .lot{font-size:.7rem;color:var(--sidebar-ink-muted)}
.live-total-card .tot{font-size:1.1rem;font-weight:700;font-family:'IBM Plex Mono',monospace}
/* [NEW — 25 ก.ย.] ปุ่มลอยเปิดโปรโมชั่นซ้ำ (มุมล่างซ้าย ตรงข้ามปุ่มแชท) */
.promo-fab{position:fixed;left:1.1rem;bottom:calc(max(.6rem, env(safe-area-inset-bottom, 0px)) + var(--vv-shift, 0px));z-index:15;display:flex;align-items:center;gap:.55rem;
  padding:.4rem 1rem .4rem .4rem;border-radius:999px;border:1px solid rgba(230,181,103,.45);cursor:pointer;
  background:rgba(20,42,37,.94);box-shadow:0 14px 32px -12px rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .15s ease,box-shadow .15s ease;
  /* [แก้ 3 ต.ค. คุยกับ user เจอปัญหาจริง "ปุ่มลอยมุมล่างซ้าย/ขวา ไม่อยู่มุมตลอดเวลาเลื่อนในมือถือ"] position:fixed
     ร่วมกับ backdrop-filter บนมือถือ (เฉพาะ iOS/Android บางรุ่น) ทำให้เบราว์เซอร์ไม่ promote เป็น compositing layer
     แยกของตัวเอง เลยวาดช้ากว่าเนื้อหาระหว่างเลื่อนเร็วๆ ดูเหมือน "หลุดจากมุม" ไปชั่วขณะ — บังคับ promote ด้วย
     translateZ(0) ให้ GPU จัดการเป็นเลเยอร์แยกแยกต่างหาก เกาะมุมจอแน่นระหว่างสกอลล์ */
  transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}
.promo-fab[hidden]{display:none!important}
.promo-fab:hover{transform:translateY(-2px) translateZ(0);box-shadow:0 18px 38px -10px rgba(0,0,0,.6)}
.promo-fab-icon{position:relative;width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#e6b567,#d99a3c);color:#1a1208;animation:promo-fab-wiggle 4s ease-in-out infinite}
.promo-fab-dot{position:absolute;top:0;right:0;width:11px;height:11px;border-radius:50%;background:#ef4444;border:2px solid #142a25}
.promo-fab-dot::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid #ef4444;animation:promo-fab-ping 1.8s ease-out infinite}
.promo-fab-label{color:#edefe7;font-size:.82rem;font-weight:600;white-space:nowrap}
@keyframes promo-fab-wiggle{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-12deg)}92%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
@keyframes promo-fab-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@media (max-width:480px){.promo-fab-label{display:none}.promo-fab{padding:.35rem}}
@media (prefers-reduced-motion:reduce){.promo-fab-icon,.promo-fab-dot::after{animation:none}}
body:has(#dashboardView:not([hidden])) .promo-fab{display:none!important}
/* [NEW 13 ต.ค.] ฝาก/ถอนพอร์ต MT5 */
.cf-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.cf-eq{margin-top:.5rem;font-size:.75rem;opacity:.8;line-height:1.5}
.cf-sum>div{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.55rem .65rem;min-width:0}
.cf-sum small{display:block;font-size:.7rem;opacity:.7}
.cf-sum b{display:block;font-family:'IBM Plex Mono',monospace;font-size:.95rem;overflow-wrap:anywhere;line-height:1.25} /* [13 ต.ค.] ตัวเลขยาวขึ้นบรรทัดใหม่ ไม่ล้น/ไม่ตัด */
.cf-sum .pos,.cf-it .pos{color:#7ee6b4}.cf-sum .neg,.cf-it .neg{color:#ff9a8a}
.cf-list{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;margin-top:.6rem;max-height:52vh;overflow-y:auto}
.cf-it{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.15rem .6rem;padding:.55rem .75rem;border-top:1px solid rgba(255,255,255,.08)}
.cf-it>div{min-width:0}.cf-it span{white-space:nowrap}.cf-it em{margin-left:auto}
.cf-it:first-child{border-top:0}
.cf-it b{display:block;font-size:.85rem}.cf-it span{font-size:.72rem;opacity:.65}
.cf-it em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-weight:600;white-space:nowrap}
.cf-empty{text-align:center;padding:1.2rem .5rem;font-size:2rem}.cf-empty p{font-size:.85rem;opacity:.8;margin-top:.5rem}
/* [NEW — 25 ก.ย.] ประวัติ Token แบบเลือกช่วงวันที่ */
.th-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.th-chips button{font-size:.78rem;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:all .15s ease}
.th-chips button.is-active{background:var(--accent);border-color:var(--accent);color:#1a1208;font-weight:600}
.th-range{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem}
input[type=date].th-date{font-size:.85rem;padding:.45rem .6rem;width:100%;min-width:0}
.th-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.th-summary > div{display:flex;flex-direction:column;gap:.1rem;padding:.55rem .7rem;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.th-summary .l{font-size:.68rem;color:var(--ink-muted,var(--muted))}
.th-summary .n{font-size:1rem;font-weight:700}
.th-day{display:flex;justify-content:space-between;align-items:baseline;font-size:.72rem;font-weight:600;color:var(--ink-muted,var(--muted));padding:.5rem .2rem .15rem;position:sticky;top:0;background:var(--paper-raised,var(--paper));z-index:1}
/* [NEW — 25 ก.ย.] เปลี่ยนบัญชีเทรด (Demo → จริง) + หน้าโปรไฟล์ */
.acct-switch-note{font-size:.78rem;line-height:1.55;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--line)}
.acct-switch-note-wait{background:color-mix(in srgb,var(--teal,#2f9e8f) 10%,var(--paper));border-color:color-mix(in srgb,var(--teal,#2f9e8f) 35%,var(--line))}
.acct-switch-note-demo{background:color-mix(in srgb,var(--accent) 10%,var(--paper));border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
/* [NEW — 26 ก.ย. คุยกับ user "แจ้งเตือนลูกค้าใหม่ยอดต่ำ"] โทนเหลือง/ส้มเตือน (--warn) แยกจาก teal/gold ที่ใช้อยู่แล้ว */
.acct-switch-note-warn{background:color-mix(in srgb,var(--warn,#f0b84d) 12%,var(--paper));border-color:color-mix(in srgb,var(--warn,#f0b84d) 40%,var(--line))}
.acct-switch-info{font-size:.78rem;border:1px dashed var(--line);border-radius:10px;padding:.55rem .85rem;background:var(--paper)}
.acct-switch-info > summary{cursor:pointer;font-weight:600;color:var(--teal,inherit);list-style:none}
.acct-switch-info > summary::-webkit-details-marker{display:none}
.acct-switch-info > summary::before{content:'▸ ';}
.acct-switch-info[open] > summary::before{content:'▾ ';}
.acct-switch-info-body{display:flex;flex-direction:column;gap:.45rem;padding-top:.6rem;line-height:1.55}
.acct-switch-compare{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.acct-switch-compare > div{border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;background:var(--paper-raised,var(--paper))}
@media (max-width:480px){.acct-switch-compare{grid-template-columns:1fr}}
.acct-switch-list{display:flex;flex-direction:column;gap:.25rem;padding-left:.2rem;margin:0;list-style:none}
.acct-sw-dialog{text-align:left;font-size:.85rem;line-height:1.6;display:flex;flex-direction:column;gap:.55rem}
.acct-sw-dialog .box{border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem}
.acct-sw-dialog .warn{background:color-mix(in srgb,var(--bad,#9c3232) 8%,transparent);border-color:color-mix(in srgb,var(--bad,#9c3232) 35%,var(--line))}
.acct-sw-dialog label{display:flex;gap:.5rem;align-items:flex-start;font-size:.8rem;cursor:pointer}
.profile-row{display:flex;flex-direction:column;gap:.35rem}
.profile-row label{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted,var(--muted))}
.profile-ro{font-size:.9rem;padding:.55rem .8rem;border-radius:8px;background:var(--paper);border:1px dashed var(--line)}
/* ===== [แก้ 19 ก.ย.] การ์ดแพ็กเกจธีมมืด (.promo-card) — เดิม override แบบ global เลยไปทับการ์ด
   แพ็กเกจใน Dashboard (พื้นสว่าง) ด้วย ทำให้ตัวหนังสือ/กรอบจางเกือบขาวบนพื้นขาว มองไม่เห็น
   scope ให้ใช้เฉพาะ #packagesGridFront (การ์ดบนหน้าแรกพื้นเข้ม) เท่านั้น
   ส่วน #packagesGrid ใน Dashboard จะกลับไปใช้สไตล์ default จาก brand.css (พื้นสว่าง) ซึ่งเข้าธีมอยู่แล้ว ===== */
#packagesGridFront .promo-card{
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  padding: 1.5rem 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.1rem !important;
  position: relative;
  color: var(--sidebar-ink) !important;
  box-shadow: none !important;
  transition: border-color .15s, background .15s;
}
#packagesGridFront .promo-card:hover{ border-color: rgba(255,255,255,.2) !important; }
#packagesGridFront .promo-card.featured{
  border-color: rgba(230,181,103,.55) !important;
  background: rgba(230,181,103,.07) !important;
}
#packagesGridFront .promo-ribbon{
  position: absolute; top: -.65rem; left: 1.35rem;
  background: linear-gradient(135deg,#f0c988,#c9973f) !important;
  color: #241a08 !important;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  padding: .28rem .7rem; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
#packagesGridFront .promo-card .text-sm.font-medium.text-muted{ color: var(--sidebar-ink-muted) !important; }
#packagesGridFront .promo-card .display.text-3xl.tabular{ color: var(--sidebar-ink) !important; }
#packagesGridFront .promo-card.featured .display.text-3xl.tabular{ color: #f0c988 !important; }
#packagesGridFront .promo-card .text-xs.text-muted.tabular{ color: var(--sidebar-ink-muted) !important; opacity: .65; }
#packagesGridFront .promo-feature{ display: flex !important; align-items: center; gap: .55rem; font-size: .82rem; color: var(--sidebar-ink-muted) !important; }
#packagesGridFront .promo-feature svg{ color: var(--good); flex: none; }
#packagesGridFront .promo-card .btn-outline{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: var(--sidebar-ink) !important;
}
#packagesGridFront .promo-card .btn-outline:hover{ border-color: rgba(255,255,255,.35) !important; background: rgba(255,255,255,.045) !important; }
#packagesGridFront .promo-card .btn-primary{
  background: linear-gradient(135deg,#f0c988,#c9973f) !important;
  color: #241a08 !important;
  border: none !important;
  font-weight: 600 !important;
}
/* ===== [NEW — 19 ก.ย. คุยกับ user] เมนูกลางหัวเว็บ (หน้าลูกค้า) เลื่อนไปหาหมวดหมู่ที่มีในหน้า =====
   ใช้ href="#sectionXxx" ธรรมดา + scroll-behavior:smooth (สโคปเฉพาะไฟล์นี้ ไม่กระทบ brand.css)
   scroll-margin-top กันหัวข้อโดน sticky header ทับตอนเลื่อนไปถึง */
html{ scroll-behavior: smooth; }
#sectionPackages, #sectionProof, #sectionHowItWorks, #sectionGridBasics, #sectionContact{ scroll-margin-top: 92px; }
.auth-topnav{ scrollbar-width: none; -ms-overflow-style: none; }
.auth-topnav::-webkit-scrollbar{ display: none; }
.auth-nav-link{
  position: relative; display: inline-flex; align-items: center; white-space: nowrap;
  font-size: .82rem; font-weight: 500; letter-spacing: .01em;
  color: var(--sidebar-ink-muted);
  padding: .35rem .1rem;
  transition: color .18s ease;
}
@media (min-width: 640px) { .auth-nav-link { font-size: .875rem; } }
.auth-nav-link::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: linear-gradient(90deg,#f3cf95,#e6b567); border-radius: 2px;
  transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
}
.auth-nav-link:hover{ color: var(--sidebar-ink); }
.auth-nav-link:hover::after{ transform: scaleX(1); }
/* [NEW — 21 ก.ย. คุยกับ user เจอปัญหาจริง] แบนเนอร์นับถอยหลังวันหมดอายุ License — โชว์เด่นบนสุดของ Dashboard
   สีพื้นเข้ม (โทนเดียวกับการ์ดกำไรรวม/แพ็กเกจธีมมืด) ให้ตัวเลขเวลาคงเหลือเด่นสุดในหน้า ไม่ปนกับข้อความอื่น
   .is-urgent (≤7 วัน/หมดแล้ว) เปลี่ยนสีตัวเลขเป็นแดง + กะพริบเบาๆ ให้รู้สึกเร่งด่วนทันที */
.expiry-countdown-card{
  display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap;
  background: linear-gradient(135deg,#123028 0%,#0f251f 55%,#0a1a16 100%);
  border: 1px solid rgba(110,231,183,.16);
  border-radius: 18px; padding: 1.15rem 1.5rem; position: relative; overflow: hidden;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .25s ease;
}
.expiry-countdown-card::before{
  content: ''; position: absolute; top: -45%; right: -8%; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(110,231,183,.14), transparent 70%);
  pointer-events: none;
}
.expiry-countdown-icon-badge{
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(110,231,183,.2), rgba(110,231,183,.05));
  border: 1px solid rgba(110,231,183,.28);
  color: var(--good); position: relative; transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.expiry-countdown-icon-badge svg{ width: 23px; height: 23px; }
/* [NEW — 23 ก.ย. รอบ 14 — คุยกับ user "เอารูปโทเค่นไปโชว์แทนไอคอน + คิดระบบ rank"] แบดจ์รูปเหรียญ rank แทนไอคอน
   SVG เดิม — เกล็ดมีกรอบโลหะ/สีของตัวเองอยู่แล้ว เลยเอาพื้นหลัง/กรอบเดิมออกตอนมีรูปโชว์ (ดู .has-rank-badge)
   [แก้ 23 ก.ย. รอบ 20 — คุยกับ user "ปรับเกล็ดให้ใหญ่ขึ้นอีกนิด มีแสงออกตามแรงค์"] ขยายกรอบจาก 46px → 58px
   เฉพาะตอนมีรูป rank badge จริง (ไม่กระทบไอคอน SVG fallback ตอนยังไม่รู้ rank) + ใส่แสง glow เรืองรอบตัวเหรียญด้วย
   filter: drop-shadow (เกาะตามรูปทรงเหรียญจริง ไม่ใช่กรอบสี่เหลี่ยม) สีของแสงเปลี่ยนตาม rank ผ่าน CSS variable
   --rank-glow-color ที่ตั้งจาก class rank-* (เพิ่ม/ลบใน renderTokenBalanceCard()) มี pulse เบาๆ ให้ดูมีชีวิตชีวา
   [แก้ 24 ก.ย. รอบ 23 — คุยกับ user "แสงเยอะไป ลดลงนิดหนึ่ง แล้วทำให้ระยิบระยับดูมือโปรขึ้น"] ลด blur/opacity ของ
   glow ลงประมาณครึ่งหนึ่ง (ดูนวลตาขึ้น ไม่ล้นออกนอกเหรียญเยอะเหมือนเดิม) + เพิ่มจุดประกายระยิบระยับ (sparkle) 4 จุด
   รอบเหรียญผ่าน ::before/::after 2 ชั้น กระพริบสลับจังหวะกันคนละช่วงเวลา (คนละ keyframe/delay) ให้ดูมีชีวิตชีวา
   แบบแบดจ์รางวัลเกม/แอปพรีเมียม ไม่ใช่แค่เรืองแสงเฉยๆ */
.expiry-countdown-icon-badge.has-rank-badge{
  background: transparent; border-color: transparent; padding: 0; overflow: visible;
  width: 58px; height: 58px;
}
.expiry-countdown-icon-badge.has-rank-badge img{
  width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1;
  /* [แก้ 6 ต.ค. — คุยกับ user "เอฟเฟกต์โทเค่นไม่เป็นวงกลมเหมือนรูป เป็นสี่เหลี่ยม"] บังคับรูปเป็นวงกลม → แสง glow
     (drop-shadow) เกาะขอบวงกลมเสมอ แม้ไฟล์รูปจะมีพื้นหลังทึบไม่โปร่งใสก็ตาม */
  border-radius: 50%;
  animation: rank-badge-glow 3.2s ease-in-out infinite;
}
.expiry-countdown-icon-badge.has-rank-badge::before,
.expiry-countdown-icon-badge.has-rank-badge::after{
  content: ''; position: absolute; inset: -7px; z-index: 2; pointer-events: none; background-repeat: no-repeat;
}
.expiry-countdown-icon-badge.has-rank-badge::before{
  background-image:
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 72%),
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 72%);
  background-size: 6px 6px, 3px 3px;
  background-position: 14% 20%, 84% 66%;
  animation: rank-sparkle-a 3.1s ease-in-out infinite;
}
.expiry-countdown-icon-badge.has-rank-badge::after{
  background-image:
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 72%),
    radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 72%);
  background-size: 3px 3px, 5px 5px;
  background-position: 80% 16%, 20% 82%;
  animation: rank-sparkle-b 3.7s ease-in-out infinite .95s;
}
.rank-bronze{ --rank-glow-color: rgba(205,127,50,.7); }
.rank-silver{ --rank-glow-color: rgba(198,198,205,.75); }
.rank-gold{ --rank-glow-color: rgba(255,209,66,.8); }
.rank-platinum{ --rank-glow-color: rgba(179,238,255,.8); }
.rank-diamond{ --rank-glow-color: rgba(103,232,249,.85); }
.rank-ruby{ --rank-glow-color: rgba(244,63,94,.75); }
.rank-rose{ --rank-glow-color: rgba(249,168,212,.85); }
@keyframes rank-badge-glow{
  0%, 100% { filter: drop-shadow(0 0 3px var(--rank-glow-color, rgba(255,255,255,.22))) drop-shadow(0 0 6px var(--rank-glow-color, rgba(255,255,255,.12))); }
  50% { filter: drop-shadow(0 0 5px var(--rank-glow-color, rgba(255,255,255,.32))) drop-shadow(0 0 10px var(--rank-glow-color, rgba(255,255,255,.16))); }
}
@keyframes rank-sparkle-a{
  0%, 12%, 100% { opacity: 0; transform: scale(.4); }
  6% { opacity: 1; transform: scale(1); }
}
@keyframes rank-sparkle-b{
  0%, 12%, 100% { opacity: 0; transform: scale(.4); }
  6% { opacity: .9; transform: scale(1); }
}
/* [NEW — 24 ก.ย. คุยกับ user "เกล็ดสวยมาก มีไอเดียสวยยิ่งขึ้นไปอีกไหม"] 2 เอฟเฟกต์เพิ่มเติมจาก glow/sparkle เดิม —
   เลือกโดย user จาก 2 ตัวเลือกที่เสนอไป (AskUserQuestion): "แสงกวาดผิวเหรียญ" + "ฟองอากาศลอยรอบเหรียญ" (ธีมปลา/ทะเล
   ของ Platoo เข้ากับ sparkle เดิม) — ทั้งคู่ผูกกับ .has-rank-badge เหมือนกัน ซ่อนไว้ตอนยังไม่รู้ rank (fallback SVG) */
.rank-badge-bubbles, .rank-badge-shine{ display: none; }
.expiry-countdown-icon-badge.has-rank-badge .rank-badge-bubbles,
.expiry-countdown-icon-badge.has-rank-badge .rank-badge-shine{ display: block; }
/* ฟองอากาศ 5 ฟอง ลอยขึ้นผ่านเกล็ดแล้วจางหาย ขนาด/ตำแหน่ง/จังหวะไม่เท่ากันต่อฟอง (nth-child) ให้ดูเป็นธรรมชาติ ไม่ใช่
   จังหวะเดียวกันหมด — วางไว้ z-index ต่ำกว่าตัวรูปเหรียญ (z-index:1) ให้ดูเหมือนฟองผุดมาจากหลังเหรียญลอยผ่านขึ้นไป */
.rank-badge-bubbles{ position: absolute; inset: -6px -4px -12px -4px; z-index: 0; pointer-events: none; overflow: visible; }
.rank-badge-bubbles i{
  position: absolute; bottom: 4px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.15) 60%, transparent 75%);
  animation: rank-bubble-rise 4.8s ease-in infinite;
}
.rank-badge-bubbles i:nth-child(1){ left: 8%;  width: 5px; height: 5px; animation-delay: .2s;  animation-duration: 4.2s; }
.rank-badge-bubbles i:nth-child(2){ left: 28%; width: 3px; height: 3px; animation-delay: 1.6s; animation-duration: 5.4s; }
.rank-badge-bubbles i:nth-child(3){ left: 50%; width: 4px; height: 4px; animation-delay: .9s;  animation-duration: 4.8s; }
.rank-badge-bubbles i:nth-child(4){ left: 70%; width: 3px; height: 3px; animation-delay: 2.4s; animation-duration: 5.1s; }
.rank-badge-bubbles i:nth-child(5){ left: 88%; width: 5px; height: 5px; animation-delay: 3.1s; animation-duration: 4.5s; }
@keyframes rank-bubble-rise{
  0%   { transform: translateY(0) translateX(0) scale(.6); opacity: 0; }
  10%  { opacity: .85; }
  55%  { transform: translateY(-34px) translateX(3px) scale(1); opacity: .6; }
  90%  { opacity: 0; }
  100% { transform: translateY(-52px) translateX(-2px) scale(.5); opacity: 0; }
}
/* แสงกวาดผิวเหรียญ — คลิปเป็นวงกลม (border-radius:50% + overflow:hidden บนตัวคอนเทนเนอร์) กันแสงล้นออกไปนอกทรง
   เกล็ด แล้วให้แถบไฮไลต์เฉียงกวาดผ่านเป็นจังหวะ (ไม่ใช่ไล่ตลอดเวลา) mix-blend-mode:screen ให้ผสานกับสีเหรียญจริง
   แทนที่จะทับเป็นสีขาวทึบ — วางไว้บนสุด (z-index:4) ให้เห็นชัดกว่า sparkle เดิม (z-index:2) */
.rank-badge-shine{ position: absolute; inset: 0; z-index: 4; border-radius: 50%; overflow: hidden; pointer-events: none;
  /* [แก้ 6 ต.ค.] Safari/iPhone ไม่ตัดลูกที่กำลัง animate transform ด้วย overflow:hidden+border-radius → แสงกวาดเป็นแถบ
     สี่เหลี่ยมเต็มกรอบ — ตัดด้วย clip-path วงกลม + mask (ได้ผลทุกเบราว์เซอร์) */
  clip-path: circle(48% at 50% 50%); -webkit-clip-path: circle(48% at 50% 50%);
  -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate; }
.rank-badge-shine::before{
  content: ''; position: absolute; top: -70%; left: 0; width: 55%; height: 240%;
  background: linear-gradient(75deg, transparent 15%, rgba(255,255,255,.5) 45%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.5) 55%, transparent 85%);
  transform: translateX(-220%) rotate(18deg);
  mix-blend-mode: screen;
  animation: rank-shine-sweep 5s ease-in-out infinite;
}
@keyframes rank-shine-sweep{
  0%   { transform: translateX(-220%) rotate(18deg); opacity: 0; }
  6%   { opacity: .9; }
  26%  { transform: translateX(260%) rotate(18deg); opacity: 0; }
  100% { transform: translateX(260%) rotate(18deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .expiry-countdown-icon-badge.has-rank-badge img{ animation: none; filter: drop-shadow(0 0 4px var(--rank-glow-color, rgba(255,255,255,.25))); }
  .expiry-countdown-icon-badge.has-rank-badge::before,
  .expiry-countdown-icon-badge.has-rank-badge::after{ animation: none; opacity: 0; }
  .rank-badge-bubbles i{ animation: none; opacity: 0; }
  .rank-badge-shine::before{ animation: none; opacity: 0; }
}
/* [NEW — 24 ก.ย. คุยกับ user "กดรูปโทเค่นแล้วดูเป็น Rank ให้ดูลำดับ สวยงาม ตามพารามิเตอร์ที่แอดมินปรับ"] กดที่ตัว
   ไอคอนเหรียญ (ไม่ใช่ทั้งการ์ด — ทั้งการ์ดยังกดเปิดประวัติ Token เหมือนเดิม) เพื่อเปิดป๊อปอัพบันได Rank แยกต่างหาก
   เลย stopPropagation ไว้ที่ onclick ของไอคอน (ดู #tokenRankIconBadge ในหน้า HTML) — ใส่ hover/active ให้รู้สึกว่า
   กดได้จริง */
.expiry-countdown-icon-badge{ cursor: pointer; transition: transform .15s ease; }
.expiry-countdown-icon-badge:hover{ transform: scale(1.08); }
.expiry-countdown-icon-badge:active{ transform: scale(.94); }
/* ป๊อปอัพบันได Rank เต็ม 7 ระดับ — ใช้โครง .auth-modal-overlay/.auth-card เดิมของเว็บ (เหมือน tokenHistoryModal)
   ให้ตรงธีมเว็บเป๊ะ ไม่ใช่ MiniSwal เพราะเนื้อหาเป็นตารางบันไดซับซ้อนกว่า popup ทั่วไป — สีของการ์ด/แถวแต่ละ rank ดึง
   จาก --rank-glow-color ของ class rank-{key} เดิม (ผูก class นี้ไว้ที่ตัวการ์ด/แถวตรงๆ ตอน render จาก JS) ให้สีเปลี่ยน
   ไปตาม rank จริงโดยไม่ต้องประกาศสีซ้ำอีกชุด */
.rank-modal-card{ max-height: 85vh; overflow-y: auto; overflow-x: hidden; }
.rank-modal-current{
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rank-glow-color, var(--accent)) 16%, var(--paper-raised)), var(--paper-raised));
  border: 1px solid color-mix(in srgb, var(--rank-glow-color, var(--accent)) 45%, var(--line));
}
.rank-modal-current-badge{
  width: 52px; height: 52px; object-fit: contain; flex: none;
  filter: drop-shadow(0 0 8px var(--rank-glow-color, rgba(255,255,255,.3)));
}
.rank-modal-current-info{ min-width: 0; }
.rank-modal-current-label{ font-size: 1.05rem; font-weight: 700; }
.rank-modal-current-sub{ font-size: .72rem; color: var(--ink-muted, var(--sidebar-ink-muted)); margin-top: .1rem; }
.rank-modal-current-perks{ display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .35rem; font-size: .74rem; }
.rank-modal-current-perks span{
  color: var(--good); background: rgba(110,231,183,.12); border: 1px solid rgba(110,231,183,.28);
  padding: .1rem .5rem; border-radius: 999px; max-width: 100%;
}
.rank-modal-list{ display: flex; flex-direction: column; gap: .5rem; max-height: 44vh; overflow-y: auto; padding-right: .15rem; margin-top: .2rem; }
.rank-modal-row{
  display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper); transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.rank-modal-row-badge{ width: 32px; height: 32px; object-fit: contain; flex: none; opacity: .5; filter: grayscale(.35); transition: opacity .15s ease, filter .15s ease; }
.rank-modal-row.is-achieved .rank-modal-row-badge,
.rank-modal-row.is-current .rank-modal-row-badge{ opacity: 1; filter: none; }
.rank-modal-row.is-current{
  border-color: color-mix(in srgb, var(--rank-glow-color, var(--accent)) 55%, var(--line));
  background: color-mix(in srgb, var(--rank-glow-color, var(--accent)) 12%, var(--paper));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rank-glow-color, var(--accent)) 25%, transparent);
}
.rank-modal-row.is-locked{ opacity: .55; }
.rank-modal-row-body{ flex: 1; min-width: 0; }
.rank-modal-row-top{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rank-modal-row-label{ font-size: .86rem; font-weight: 600; }
.rank-modal-row-tag{
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; flex: none;
  padding: .15rem .5rem; border-radius: 999px; background: var(--accent); color: #1a1208; white-space: nowrap;
}
.rank-modal-row-check{ color: var(--good); font-weight: 700; flex: none; }
.rank-modal-row-req{ font-size: .68rem; color: var(--ink-muted, var(--sidebar-ink-muted)); margin-top: .1rem; }
.rank-modal-row-perks{ font-size: .7rem; color: var(--teal); margin-top: .1rem; }
.token-rank-pill{
  display: inline-flex; align-items: center; margin-left: .5rem; padding: .12rem .55rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: none;
  background: rgba(110,231,183,.14); color: var(--good); border: 1px solid rgba(110,231,183,.3);
}
.token-rank-progress-wrap{ display: flex; align-items: center; gap: .5rem; margin-top: .15rem; }
.token-rank-progress-track{
  flex: 1; min-width: 60px; max-width: 160px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.token-rank-progress-bar{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--good), var(--teal)); transition: width .3s ease; }
.token-rank-progress-text{ font-size: .68rem; color: var(--sidebar-ink-muted); white-space: nowrap; }
.expiry-countdown-main{ display: flex; flex-direction: column; gap: .4rem; min-width: 0; position: relative; }
.expiry-countdown-label{ font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sidebar-ink-muted); }
.expiry-countdown-units{ display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.expiry-unit{ display: flex; align-items: baseline; gap: .3rem; }
/* [แก้ 24 ก.ย. คุยกับ user "สีตัวเลขยอดโทเค่นหลืนไปกับพื้นหลัง"] เดิมสีตัวเลข = var(--good) สีเขียวมิ้นต์เดียวกับ
   พื้นการ์ด (โทนเขียวเข้มไล่ระดับ) โทนสีใกล้กันเกินไปทำให้ดูจมแม้ contrast ตัวเลขจะผ่านเกณฑ์ก็ตาม — เปลี่ยนเป็นสีขาว
   อมมิ้นต์อ่อนมาก (เกือบขาว) ให้ตัวเลขเด่นชัดสุดในการ์ดจริงๆ (ตัวเลขคือข้อมูลสำคัญที่สุดที่ลูกค้าต้องเห็นก่อน) แล้ว
   ใส่ text-shadow สีเขียวเรืองแทน ให้ยังคงธีมสีเขียวของเว็บไว้แบบแสง glow รอบตัวเลขแทนที่จะเป็นสีตัวอักษรตรงๆ */
.expiry-unit-value{
  font-family: 'IBM Plex Mono', monospace; font-size: 1.7rem; font-weight: 700; color: #eafff6;
  text-shadow: 0 0 16px rgba(110,231,183,.5), 0 0 4px rgba(110,231,183,.35);
  line-height: 1; letter-spacing: -.01em; transition: color .25s ease, text-shadow .25s ease;
}
.expiry-unit-suffix{ font-size: .8rem; font-weight: 500; color: var(--sidebar-ink-muted); }
.expiry-countdown-date{
  margin-left: auto; font-size: .78rem; color: var(--sidebar-ink-muted); position: relative;
  background: rgba(255,255,255,.05); padding: .38rem .75rem; border-radius: 999px; white-space: nowrap;
  transition: opacity .25s ease; /* [NEW — 24 ก.ย. คุยกับ user "ให้ข้อความเปลี่ยนเรื่อยๆไม่น่าเบื่อ"] เฟดตอนสลับข้อความ */
}
.expiry-countdown-card.is-urgent{ border-color: rgba(248,113,113,.3); }
.expiry-countdown-card.is-urgent .expiry-unit-value{ color: var(--bad); text-shadow: 0 0 14px rgba(248,113,113,.45); animation: expiry-pulse 1.6s ease-in-out infinite; }
.expiry-countdown-card.is-urgent .expiry-countdown-icon-badge{
  background: linear-gradient(135deg, rgba(248,113,113,.2), rgba(248,113,113,.05)); border-color: rgba(248,113,113,.3); color: var(--bad);
}
@keyframes expiry-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .55; } }
@media (prefers-reduced-motion: reduce){ .expiry-countdown-card.is-urgent .expiry-unit-value{ animation: none; } }
@media (max-width: 640px){
  .expiry-countdown-date{ margin-left: 0; width: 100%; box-sizing: border-box; }
  .expiry-countdown-card{ padding: 1rem 1.2rem; }
  .expiry-unit-value{ font-size: 1.4rem; }
}
/* [NEW — 21 ก.ย. คุยกับ user] ปุ่มลอยมุมจอ เปิดป๊อปอัพแพ็กเกจ/เติมเงินได้ตลอดเวลาในหน้า Dashboard — จุดแดง
   (.pkg-float-badge) โผล่เฉพาะตอนใกล้/หมดอายุ (ดู maybeAutoOpenPackagePopup ใน script) วาง z-index ต่ำกว่า
   .auth-modal-overlay (30) เพื่อไม่ให้ลอยทับหน้าป๊อปอัพตอนเปิดอยู่
   [แก้ 21 ก.ย. — คุยกับ user เจอปัญหาจริง] เดิมวางมุมล่างขวา ไปทับปุ่มแชท (.fab-chat ก็อยู่มุมล่างขวาเหมือนกัน)
   ย้ายมาไว้มุมล่างซ้ายแทน ฝั่งตรงข้ามกับแชท ไม่ชนกันแน่นอนไม่ว่าจอขนาดไหน */
.pkg-float-btn{
  position: fixed; left: 1.1rem; bottom: calc(max(.6rem, env(safe-area-inset-bottom, 0px)) + var(--vv-shift, 0px)); z-index: 20;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #d99a3c); color: #1a1208;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.45);
  transition: transform .15s ease;
}
.pkg-float-btn:hover{ transform: translateY(-2px) scale(1.04); }
.ic.bnd{display:flex;align-items:center;justify-content:center;gap:.2rem;position:relative;background:radial-gradient(circle at 50% 40%,rgba(125,211,252,.25),rgba(15,23,42,.9));border-radius:12px;overflow:hidden}
.ic.bnd .b-av{width:44%;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #f6d27a}
.ic.bnd .b-bot{height:92%;max-width:46%;object-fit:contain}
.ic.bnd .b-plus{color:#f6d27a;font-weight:900;font-size:1.1rem}
.ic.bnd .b-save{position:absolute;left:4px;bottom:4px;padding:.1rem .4rem;border-radius:999px;background:#dc2626;color:#fff;font-size:.62rem;font-weight:800}
.vnote.paid{color:#0e7490!important;font-weight:600}
/* [16 ต.ค.] ซีซันพาส — ไม่มีแอนิเมชันวนลูป / ไม่มี backdrop-filter (มือถือลื่น) */
.ic.ssn-tk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;border-radius:12px;background:linear-gradient(135deg,#0f2a3d,#4c1d95 55%,#a16207);color:#fde68a;border:1px dashed rgba(253,230,138,.7)}
.ic.ssn-tk span{font-size:1.9rem;line-height:1}.ic.ssn-tk b,.ic.ssn-tk i{font-size:.6rem;letter-spacing:.25em;font-style:normal;font-weight:800}
.ssn-banner{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;border:1px solid rgba(201,154,62,.55);border-radius:16px;padding:.7rem .9rem;cursor:pointer;font:inherit;
  background:linear-gradient(120deg,#0f2a3d 0%,#123b47 45%,#3a2a0c 100%);color:#fdf3d6;box-shadow:0 10px 26px -16px rgba(0,0,0,.7)}
.ssn-banner[hidden]{display:none!important}
/* ===== [17 ต.ค.] แถวการ์ดกิจกรรม (#evRow) ===== */
.ev-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:0 0 .9rem}
.ev-row:not(:has(>:not([hidden]))){display:none}
.ev-row>[hidden]{display:none!important}
.ev-row>.ev-card{min-width:0}
.ev-row .ev-card{box-sizing:border-box;position:relative;overflow:hidden;margin:0;min-height:138px;border-radius:18px;padding:14px 14px 14px 16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
  text-decoration:none;color:#fff6ea;border:1px solid rgba(246,210,122,.45);box-shadow:0 14px 28px -18px rgba(0,0,0,.75);transition:transform .18s ease,box-shadow .18s ease}
.ev-row .ev-card:hover{transform:translateY(-2px);box-shadow:0 18px 32px -16px rgba(0,0,0,.8)}
.ev-row .ev-card .ev-art{position:absolute;right:-6px;bottom:-6px;width:46%;max-width:170px;height:auto;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));transition:transform .3s ease}
.ev-row .ev-card:hover .ev-art{transform:scale(1.05) rotate(-2deg)}
/* การ์ดโปรเทศกาล */
.ev-row .xm-banner{padding-right:44%}
.ev-row .xm-banner .ic{position:absolute;right:4px;bottom:4px;width:44%;font-size:3rem;text-align:center;animation:evBob 2.6s ease-in-out infinite}
.ev-row .xm-banner .ic .ev-art{position:static;width:100%;max-width:170px}
.ev-row .xm-banner .tx{font-size:.8rem}
.ev-row .xm-banner .tx b:first-child{display:block;font-size:1.05rem;margin-bottom:2px}
.ev-row .xm-banner .xm-cd{display:flex;width:max-content;margin:.3rem 0 .1rem}
.ev-row .xm-banner .go{margin-top:6px;padding:.42rem .8rem}
/* การ์ดศึกล่ามังกร */
.ev-row .dg-card{padding-right:42%;background:radial-gradient(70% 90% at 85% 70%,rgba(255,120,40,.28),transparent 70%),linear-gradient(135deg,#1b0d0b,#3a1210 55%,#120a08)}
.ev-row .dg-card.el-shadow{background:radial-gradient(70% 90% at 85% 70%,rgba(170,90,255,.3),transparent 70%),linear-gradient(135deg,#120b1c,#24123a 55%,#0b0812)}
.ev-row .dg-card.el-ice{background:radial-gradient(70% 90% at 85% 70%,rgba(120,200,255,.28),transparent 70%),linear-gradient(135deg,#0a1622,#12304a 55%,#071019)}
.ev-row .dg-card.el-thunder{background:radial-gradient(70% 90% at 85% 70%,rgba(110,243,255,.25),transparent 70%),linear-gradient(135deg,#120c24,#22164a 55%,#0a0816)}
.ev-row .dg-card .ev-art{width:52%;max-width:190px;right:-10px;bottom:-12px;animation:evBob 3.2s ease-in-out infinite}
.ev-row .dg-card .ev-vid{animation:none;width:56%;max-width:210px;right:-12px;bottom:-14px;filter:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,rgba(0,0,0,.55) 78%,transparent 100%)}
.ev-tx{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.ev-tx .ev-k{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#f6d27a;opacity:.9}
.ev-tx b{font-size:1.08rem;line-height:1.25}
.ev-tx .ev-sub{font-size:.76rem;opacity:.85}
.ev-tx small{font-size:.72rem;opacity:.8;line-height:1.45}
.dgc-bars{display:block;width:150px;max-width:100%;height:5px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:3px}
.dgc-bars i{display:block;height:100%;border-radius:9px}.dgc-bars i.b{background:linear-gradient(90deg,#c9861f,#f7d27e)}.dgc-bars i.r{background:linear-gradient(90deg,#2f6fd6,#9fd4ff)}
.ev-go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:.78rem;font-weight:800;color:#3a1600;background:linear-gradient(135deg,#fff1b8,#f2c14e 50%,#d29a2e);border-radius:12px;padding:.42rem .5rem .42rem .8rem}
.ev-chip{font-weight:700;font-size:.66rem;color:#fff6ea;background:rgba(0,0,0,.35);border-radius:999px;padding:.12rem .5rem}
/* การ์ดซีซันพาส */
.ev-row .ssn-banner{flex-direction:row;align-items:center}
.ev-row .ssn-banner .spb-t b{font-size:1.02rem;white-space:normal}
.ev-row .ssn-banner.ssn-card{flex-direction:column;align-items:flex-start;padding-right:44%;text-align:left;
  background:radial-gradient(70% 90% at 85% 75%,rgba(246,210,122,.28),transparent 70%),linear-gradient(135deg,#052a33,#0b4650 55%,#2f240b)}
.ev-row .ssn-card .ev-art{width:50%;max-width:185px;right:-8px;bottom:-10px;animation:evBob 3.6s ease-in-out infinite}
.dgc-bars.ssn i{background:linear-gradient(90deg,#4fd69c,#f6d27a)}
/* มือถือ: ปัดซ้าย-ขวา ทีละการ์ด */
@media (max-width:640px){
  .ev-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:2px 2px 6px;margin:0 -2px .8rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ev-row::-webkit-scrollbar{display:none}
  .ev-row>.ev-card{flex:0 0 84%;width:84%;min-width:0;max-width:84%;scroll-snap-align:start;min-height:142px}
  .ev-row>.ev-card .tx,.ev-row>.ev-card .ev-tx{min-width:0;overflow-wrap:anywhere}
  .ev-row .dg-card,.ev-row .ssn-banner.ssn-card{padding-right:34%}
  .ev-row .dg-card .ev-art,.ev-row .ssn-card .ev-art{width:46%}
  .ev-go{white-space:nowrap;font-size:.74rem;gap:6px}
  .ev-chip{font-size:.62rem}
  .dgc-bars{width:120px}
  .ev-row>.ev-card:only-child{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.ev-row .dg-card .ev-art,.ev-row .xm-banner .ic,.ev-row .ssn-card .ev-art{animation:none}}
.ssn-banner:hover{border-color:#f6d27a}
.spb-ic{font-size:1.6rem;flex:none}
.spb-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.spb-t b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spb-t small{font-size:.74rem;opacity:.85}
.spb-bar{display:block;height:5px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:.15rem}
.spb-bar>i{display:block;height:100%;background:linear-gradient(90deg,#4fd69c,#f6d27a)}
.spb-n{flex:none;font-weight:800;font-size:.8rem;color:#3a2604;background:linear-gradient(135deg,#fde68a,#f59e0b);border-radius:999px;padding:.25rem .6rem}
.spb-go{flex:none;font-size:1.4rem;opacity:.7}
.learn-box.ssn-box{max-width:860px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;padding:0!important}
.ssn-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;padding:1rem 1.1rem .8rem;background:linear-gradient(120deg,#0f2a3d,#123b47 50%,#3a2a0c);color:#fdf3d6}
.ssn-hd h3{margin:0;font-size:1.1rem;font-weight:800}
.ssn-hd small{font-size:.76rem;opacity:.9}
.ssn-pm{color:#fde68a}
.ssn-body{overflow-y:auto;padding:.9rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.8rem;overscroll-behavior:contain}
.ssn-hero{display:flex;gap:.9rem;align-items:center}
.ssn-lv{flex:none;width:76px;height:76px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#fff3c4,#f6d27a 55%,#c99a3e);color:#3a2604;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.ssn-lv b{font-size:1.9rem;line-height:1;font-family:'IBM Plex Mono',monospace}
.ssn-lv small{font-size:.62rem;font-weight:700;opacity:.8}
.ssn-prog{flex:1;min-width:0}
.ssn-pl{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;font-weight:700;color:var(--ink)}
.ssn-pl span:last-child{font-weight:600;opacity:.7}
.ssn-bar{display:block;height:10px;border-radius:9px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;margin:.35rem 0}
.ssn-bar>i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#4fd69c,#f6d27a)}
.ssn-today{font-size:.74rem;color:var(--ink-muted)}
.ssn-act{display:flex;gap:.5rem;flex-wrap:wrap}
.ssn-btn{border:0;cursor:pointer;font:inherit;font-weight:800;font-size:.84rem;border-radius:12px;padding:.6rem .9rem;background:color-mix(in srgb,var(--ink) 8%,var(--paper));color:var(--ink);display:inline-flex;align-items:center;gap:.35rem;flex-direction:column;line-height:1.15}
.ssn-btn small{font-size:.66rem;font-weight:600;opacity:.75}
.ssn-act .ssn-btn{flex:1;flex-direction:row;justify-content:center;min-width:150px}
.ssn-btn.gold{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#3a2604}
.ssn-btn:disabled{opacity:.75;cursor:default}
.ssn-btn.done{background:rgba(79,214,156,.15);color:#0f766e;opacity:1}
.ssn-promo{display:flex;align-items:center;gap:.8rem;justify-content:space-between;border-radius:14px;padding:.75rem .9rem;background:linear-gradient(120deg,#2b1046,#4c1d95 45%,#7c4a03);color:#fdf3d6;border:1px solid rgba(246,210,122,.5)}
.ssn-promo>div{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ssn-promo b{font-size:.95rem}
.ssn-promo small{font-size:.74rem;opacity:.9;line-height:1.45}
.ssn-promo small b{font-size:inherit;color:#fde68a}
.ssn-promo .ssn-paid{color:#a5f3fc;opacity:1}
.ssn-promo .ssn-btn{flex:none}
.ssn-track-w{display:flex;gap:.4rem;align-items:stretch}
.ssn-rl{flex:none;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;padding-bottom:10px}
.ssn-rl span{height:104px;display:flex;align-items:center;font-size:.68rem;font-weight:800;color:var(--ink-muted);writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;justify-content:center}
.ssn-rl span:last-child{color:#a16207}
.ssn-track{flex:1;display:flex;gap:.4rem;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.ssn-track::-webkit-scrollbar{display:none}
.ssn-tbox{position:relative;flex:1;min-width:0;display:flex}
.ssn-arr{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid rgba(201,154,62,.6);background:var(--paper-raised,#fff);color:#7c4a03;font-size:1.4rem;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 6px 16px -6px rgba(0,0,0,.35)}
.ssn-arr.l{left:-6px}.ssn-arr.r{right:-6px}.ssn-arr:disabled{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){.ssn-arr{display:block}.ssn-track{cursor:grab;scroll-snap-type:none}.ssn-track.drag{cursor:grabbing;user-select:none}.ssn-track.drag .spc{pointer-events:none}}
.spcol{flex:none;width:94px;display:flex;flex-direction:column;gap:.4rem;scroll-snap-align:center}
.spt{text-align:center;font-size:.72rem;font-weight:800;color:var(--ink-muted);border-radius:999px;padding:.08rem 0;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.spcol.on .spt{background:linear-gradient(90deg,#4fd69c,#f6d27a);color:#0f251f}
.spcol.next .spt{outline:2px dashed #f6d27a;outline-offset:-2px;color:var(--ink)}
.spc{position:relative;height:104px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.35rem;text-align:center;
  background:var(--paper-raised,#fff);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.spc.empty{background:color-mix(in srgb,var(--ink) 4%,transparent);border-style:dashed;opacity:.6;color:var(--ink-muted);font-weight:700}
.spcol .spc:last-child:not(.empty){background:linear-gradient(170deg,#fff8e1,#fdeec2);border-color:rgba(201,154,62,.5)}
.spc .spi{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.spc .spi img{width:44px;height:44px;object-fit:contain}
.spc .em{font-size:1.7rem;line-height:1}
.spc .spf{display:block;width:34px;height:34px;border-radius:50%;--s:34px}
.spn{font-size:.74rem;font-weight:700;line-height:1.25;color:#2a1f0c;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spcol .spc:first-of-type .spn{color:var(--ink)}
#spOv{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#spOv .ssn-pl,#spOv .ssn-today,#spOv .ssn-btn{font-size:.9rem}
#spOv .ssn-today{color:var(--ink);opacity:.85}
#spOv .ssn-promo small{font-size:.82rem}
#spOv .ssn-how ul{font-size:.86rem}
#spOv .spt{font-size:.8rem}
.spx{position:absolute;top:-6px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:.52rem;font-weight:800;color:#fff;background:#7c3aed;border-radius:6px;padding:0 .3rem}
.spk{position:absolute;top:3px;right:5px;font-size:.78rem}
.spc.lock .spi,.spc.plock .spi{opacity:.55}
.spc.got .spi,.spc.got .spn{opacity:.55}
.spc.got .spk{color:#0f766e}
.spc.ready{box-shadow:0 0 0 2px #f59e0b,0 6px 16px -8px rgba(245,158,11,.8)}
.ssn-how ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.8rem;line-height:1.6}
.pav[data-fr=s1],.spf[data-fr=s1]{background:conic-gradient(from var(--fra,0deg),#22d3ee,#f6d27a,#0e7490,#fde68a,#22d3ee);box-shadow:0 0 calc(var(--s) * .24) rgba(34,211,238,.55)}
.pav[data-fr=s1]::after{content:'🌊';bottom:calc(var(--s) * -.08);right:calc(var(--s) * -.14)}
.pav[data-fr=s1]{--frg:rgba(34,211,238,.85);--frd:#e0fbff}
@media (max-width:640px){.learn-box.ssn-box{max-height:94vh}.ssn-hero{gap:.7rem}.ssn-lv{width:64px;height:64px}.ssn-lv b{font-size:1.6rem}.spcol{width:78px}.ssn-promo{flex-direction:column;align-items:stretch}.ssn-promo .ssn-btn{flex-direction:row;justify-content:center}}
.ssn-leg{display:none;font-size:.74rem;font-weight:600;color:var(--ink-muted)}
/* [3 พ.ย.] เครื่องคิดโทเคน → กำไร (หน้าเติมโทเคน) */
.tkc{border-radius:16px;padding:1rem 1.1rem;background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#d8b46a) 10%,transparent),color-mix(in srgb,var(--accent,#d8b46a) 3%,transparent));border:1px solid color-mix(in srgb,var(--accent,#d8b46a) 40%,transparent);display:flex;flex-direction:column;gap:.7rem}
.tkc-hd{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.tkc-help{font:inherit;font-size:.74rem;font-weight:500;padding:.22rem .7rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent,#d8b46a) 55%,transparent);background:transparent;color:var(--accent,#c99a3e);cursor:pointer;margin-left:auto}.tkc-hd small{flex-basis:100%}.tkc-hd b{font-size:1rem}.tkc-hd small{font-size:.74rem;color:var(--ink-muted)}
.tkc-row{display:flex;align-items:center;gap:.8rem}
.tkc-in{flex:1;display:flex;flex-direction:column;gap:.3rem;font-size:.74rem;color:var(--ink-muted)}
.tkc-in input{font:inherit;font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums;padding:.55rem .75rem;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
.tkc-eq{font-size:1.4rem;color:var(--ink-muted);padding-top:1.2rem}
.tkc-out{flex:1.2;display:flex;flex-direction:column;gap:.15rem;font-size:.74rem;color:var(--ink-muted);min-width:0}
.tkc-out b{font-size:1.7rem;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--accent,#c99a3e)}
.tkc-out small{font-size:.74rem}
.tkc-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.tkc-chips button{font:inherit;font-size:.78rem;padding:.3rem .75rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.tkc-chips button.on{border-color:var(--accent,#d8b46a);background:color-mix(in srgb,var(--accent,#d8b46a) 18%,var(--paper))}
.tkc-note{font-size:.72rem;color:var(--ink-muted);line-height:1.55;margin:0}.tkc-note b{color:var(--ink);font-weight:600}
@media (max-width:560px){.tkc-row{flex-direction:column;align-items:stretch;gap:.5rem}.tkc-eq{display:none}.tkc-out b{font-size:1.5rem}}
/* [3 พ.ย. user "ซีซันพาส 2 หน้าลูกค้าสวยๆ ไม่เอาไอคอนไม่สวย"] หน้าพาสธีมเข้มทอง (sp3) — ไม่มีอิโมจิ · รูปรางวัลชุดเดียวกับกระเป๋า */
#spOv .sp3{background:radial-gradient(120% 70% at 50% 0%,#14352d,#0b1f1a 55%,#081512);color:#f3ead2;border:1px solid rgba(216,180,106,.35);--ink:#f3ead2;--ink-muted:rgba(243,234,210,.62);--paper:#0f2621;--paper-raised:#12302a}
#spOv .sp3 .ssn-hd{background:linear-gradient(120deg,#0c2621,#173a31 55%,#3b2b0c);border-bottom:1px solid rgba(216,180,106,.3)}
#spOv .sp3 .ssn-hd h3{font-family:Kanit,Prompt,inherit;font-size:1.25rem;font-weight:600;letter-spacing:.01em;background:linear-gradient(135deg,#f8ecc6,#e3c27a 45%,#b98d45 75%,#f1dca2);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp3-k{display:block;font-size:.6rem;font-weight:700;letter-spacing:.32em;color:#d8b46a;opacity:.9;margin-bottom:.15rem}
.sp3-pm{display:inline-block;margin-left:.35rem;font-size:.62rem;font-weight:800;letter-spacing:.12em;color:#2a1a04;background:linear-gradient(135deg,#fde68a,#d4a24c);border-radius:999px;padding:.08rem .5rem;vertical-align:.08em}
#spOv .sp3 .shop-x{color:#f3ead2}
#spOv .sp3 .ssn-lv{background:linear-gradient(160deg,#fff3c4,#e3c27a 55%,#a97a2e);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 24px -12px rgba(227,194,122,.8)}
#spOv .sp3 .ssn-bar{background:rgba(255,255,255,.08);height:9px}
#spOv .sp3 .ssn-bar>i{background:linear-gradient(90deg,#b98d45,#f6d27a,#fff3c4);box-shadow:0 0 12px rgba(246,210,122,.55)}
#spOv .sp3 .ssn-btn{background:rgba(255,255,255,.06);color:#f3ead2;border:1px solid rgba(216,180,106,.35);font-weight:700}
#spOv .sp3 .ssn-btn.gold{background:linear-gradient(135deg,#f8e2a0,#d8a94e 55%,#b07b2a);color:#2a1a04;border-color:transparent;box-shadow:0 8px 20px -10px rgba(216,169,78,.9)}
#spOv .sp3 .ssn-btn.done{background:rgba(16,185,129,.12);color:#6ee7b7;border-color:rgba(16,185,129,.35)}
#spOv .sp3 .ssn-btn:disabled.gold{opacity:.45;box-shadow:none}
#spOv .sp3 .ssn-promo{background:linear-gradient(120deg,#1b1206,#3a2709 45%,#5a3d0e);border:1px solid rgba(246,210,122,.55);box-shadow:0 14px 30px -18px rgba(246,210,122,.6)}
#spOv .sp3 .ssn-promo b{font-family:Kanit,Prompt,inherit;font-weight:600;font-size:1rem;color:#fbe7b0}
.sp3-prev{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.6rem .8rem;border-radius:12px;background:rgba(216,180,106,.1);border:1px dashed rgba(216,180,106,.55);font-size:.84rem}
.sp3-prev b{margin:0 .3rem;color:#f6d27a}
#spOv .sp3 .ssn-rl span{color:rgba(243,234,210,.55);letter-spacing:.12em}#spOv .sp3 .ssn-rl span:last-child{color:#e3c27a}
#spOv .sp3 .spt{background:rgba(255,255,255,.06);color:rgba(243,234,210,.6)}
#spOv .sp3 .spcol.on .spt{background:linear-gradient(90deg,#b98d45,#f6d27a);color:#2a1a04}
#spOv .sp3 .spcol.next .spt{outline:1.5px solid #f6d27a;outline-offset:-1.5px;color:#f6d27a}
#spOv .sp3 .spc{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);justify-content:flex-start;padding:.45rem .3rem .4rem;gap:.3rem}
#spOv .sp3 .spc.p{background:linear-gradient(180deg,rgba(216,180,106,.16),rgba(216,180,106,.04));border-color:rgba(216,180,106,.45)}
#spOv .sp3 .spc.empty{background:transparent;border:1px dashed rgba(255,255,255,.08);opacity:1}
#spOv .sp3 .spc .spn{color:#f3ead2;font-size:.7rem;font-weight:600}
#spOv .sp3 .spc.ready{box-shadow:0 0 0 1.5px #f6d27a,0 0 18px -4px rgba(246,210,122,.7)}
#spOv .sp3 .spc.plock .sp-art,#spOv .sp3 .spc.lock .sp-art{filter:saturate(.6) brightness(.75)}
#spOv .sp3 .spc.got .sp-art,#spOv .sp3 .spc.got .spn{opacity:.45}
#spOv .sp3 .spk{top:4px;right:4px;width:16px;height:16px}#spOv .sp3 .spk svg{width:16px;height:16px;display:block}
#spOv .sp3 .spx{background:linear-gradient(135deg,#a78bfa,#6d28d9)}
#spOv .sp-art,.sp3-got .sp-art{width:100%;height:54px;flex:none;overflow:hidden}#spOv .sp3 .spc{height:122px}@media (max-width:640px){#spOv .sp3 .spc{height:112px}}.sp-art>.ba{width:44px;height:44px}.sp-art>img{width:48px;height:48px;object-fit:contain}
.sp-art>.ic{transform:scale(.52)}.sp-art>.ic.th,.sp-art>.ic.sh{transform:scale(.5)}.sp-art>.ic.capsule{transform:scale(.5)}
#spOv .sp3 .ssn-how{color:#f3ead2}#spOv .sp3 .ssn-how summary{color:#e3c27a}
#spOv .sp3 .ssn-arr{background:#12302a;color:#f6d27a;border-color:rgba(216,180,106,.55)}
.sp3-gotl{display:flex;flex-direction:column;gap:.35rem;text-align:left;max-height:50vh;overflow:auto}
.sp3-got{display:flex;align-items:center;gap:.6rem;font-size:.86rem}.sp3-got .sp-art{width:52px;height:44px;border-radius:9px}.sp3-got .sp-art>.ba{width:34px;height:34px}.sp3-got .sp-art>img{width:38px;height:38px}
@media (max-width:640px){#spOv .sp-art{height:46px}.sp-art>.ba{width:38px;height:38px}.sp-art>img{width:42px;height:42px}.sp-art>.ic{transform:scale(.46)}}
@media (max-width:640px){
  #spOv.learn-ov{align-items:center;padding:.75rem}
  .learn-box.ssn-box{max-height:86vh;max-height:86dvh;border-radius:18px}
  .ssn-hd{padding:.8rem .9rem .65rem}.ssn-hd h3{font-size:1rem}.ssn-hd small{font-size:.72rem}
  .ssn-body{padding:.75rem .8rem 1rem;gap:.65rem}
  #spOv .ssn-pl,#spOv .ssn-today{font-size:.8rem}
  #spOv .ssn-btn{font-size:.82rem;padding:.55rem .6rem}
  .ssn-act .ssn-btn{min-width:0}
  #spOv .ssn-promo small{font-size:.76rem}
  .ssn-lv{width:58px;height:58px;border-radius:15px}.ssn-lv b{font-size:1.45rem}
  .ssn-rl{display:none}.ssn-leg{display:block}
  .spcol{width:80px}.spc{height:92px}.spc .spi,.spc .spi img{width:38px;height:38px}.spc .em{font-size:1.45rem}
  .spn{font-size:.68rem}#spOv .spt{font-size:.72rem}
  #spOv .ssn-how ul{font-size:.8rem}
}
.shop-it button.topup-need{background:linear-gradient(135deg,#e6b567,#d99a3c)!important;color:#1a1208!important}
.pkg-float-badge{
  position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bad); border: 2px solid var(--paper);
}
/* [NEW — 20 ก.ย. คุยกับ user] กล่องบัญชีธนาคารสำหรับโอนเงิน หน้าแจ้งโอนเงิน — ให้ดูน่าเชื่อถือขึ้น
   ยังไม่มีไฟล์โลโก้ธนาคารจริงในระบบ ใช้ไอคอนธนาคารสีทองแทนไปก่อน (ถ้าใส่ไฟล์ assets/bank-krungsri-logo.png
   เข้ามาทีหลัง ระบบจะเปลี่ยนไปโชว์โลโก้จริงให้เองอัตโนมัติ ไม่ต้องแก้โค้ด) */
/* [แก้ 2 ต.ค. คุยกับ user เจอปัญหาจริง "ตัวหนังสือตรงคัดลอกเลขบัญชีอ่านยากมาก"] การ์ดนี้ตั้งพื้นหลังสว่าง
   (--accent-soft สีครีม) เองตรงๆ เสมอไม่ว่าจะอยู่หน้าไหน แต่ป๊อปอัพ "แจ้งโอนเงิน" ใช้ .auth-card.auth-modal-card
   ห่ออยู่ (ดูคอมเมนต์ 26 ก.ย. ด้านบน) ซึ่งทับ --ink/--ink-muted/--line เป็นโทนสว่างเกือบขาวสำหรับพื้นหลังกระจกเข้ม
   ของโมดัล — พอ .bank-account-label/.bank-name/ปุ่ม .btn-outline ในการ์ดนี้อ้าง var() ชุดเดียวกัน (ไม่มีสโคปของ
   ตัวเอง) เลยได้สีเกือบขาวมาวางทับพื้นครีมพอดี กลายเป็นอ่านไม่ออก (ปุ่ม "คัดลอกเลขบัญชี" หนักสุดเพราะพึ่งทั้ง
   color/border-color จาก var() เหล่านี้) แก้ด้วยวิธีเดียวกับที่ .news-cal-card/.auth-card.auth-modal-card ทำไว้แล้ว
   ในไฟล์นี้ — ประกาศ --ink/--ink-muted/--line ทับใหม่เฉพาะสโคปนี้ด้วยค่าธีมสว่างตรงๆ (ตรงกับ :root เดิมใน brand.css
   ก่อนโดนโมดัลทับ) กันการ์ดนี้ไม่ให้ถูกธีมของกล่องที่ห่ออยู่ (ป๊อปอัพมืด หรือหน้าอื่นที่พื้นหลังมืด) กลืนสีอีก */
.bank-info-card{
  --ink: #1b2420;
  --ink-muted: #5c6659;
  --line: rgba(189,127,42,.3);
  background: var(--accent-soft); border: 1px solid rgba(189,127,42,.3); border-radius: 14px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .9rem;
}
.bank-info-head{ display: flex; align-items: center; gap: .75rem; }
.bank-logo-wrap{ width: 46px; height: 46px; border-radius: 10px; background: #fff; border: 1px solid rgba(189,127,42,.25); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.bank-logo-img{ width: 100%; height: 100%; object-fit: contain; }
.bank-logo-fallback{ color: var(--accent); display: flex; align-items: center; justify-content: center; }
.bank-name{ font-weight: 600; font-size: .95rem; color: var(--ink); margin: 0; }
.bank-name-sub{ font-size: .74rem; color: var(--ink-muted); margin: 0; }
.bank-account-row{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; background: rgba(255,255,255,.6); border-radius: 10px; padding: .7rem .95rem; }
.bank-account-label{ font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin: 0 0 .15rem; }
.bank-account-number{ font-size: 1.2rem; font-weight: 700; color: var(--accent-ink); margin: 0; }
/* [NEW — 20 ก.ย. คุยกับ user] การ์ดติดต่อ Line ในหน้าแรก (ก่อนล็อกอิน) — เดิมมีลิงก์ Line ซ่อนอยู่แค่ใน
   Auth Modal (ต้องกดเข้าสู่ระบบก่อนถึงจะเห็น) กับ footer ในหน้า Dashboard (ต้องล็อกอินก่อนเหมือนกัน) ผู้ใช้เลย
   หาไม่เจอตอนเลื่อนดูหน้าแรกเฉยๆ — ทำเป็น section แยกที่เห็นได้เลยไม่ต้องล็อกอิน แถมมีเมนูบนหัวเว็บกดเลื่อนมาหาได้ */
.contact-line-card{
  display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; border-radius: 16px;
  background: rgba(6,199,85,.12); border: 1px solid rgba(6,199,85,.35);
  text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.contact-line-card:hover{ background: rgba(6,199,85,.18); border-color: rgba(6,199,85,.55); transform: translateY(-1px); }
.contact-line-icon{
  width: 48px; height: 48px; border-radius: 12px; background: #06C755; color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.contact-line-text{ display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.contact-line-title{ font-weight: 600; color: var(--sidebar-ink); font-size: .95rem; }
.contact-line-id{ font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--sidebar-ink-muted); }
.contact-line-cta{ font-size: .85rem; font-weight: 600; color: #06C755; white-space: nowrap; flex: none; }
/* [NEW — 1 ต.ค. คุยกับ user] การ์ดลิงก์เพจ Facebook — ใช้คลาส/โครงสร้างเดียวกับการ์ด Line เป๊ะ
   แค่เปลี่ยนสีธีมเป็นสีแบรนด์ Facebook (#1877F2) ให้แยกออกจากกันชัดเจน */
.contact-fb-card{
  display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; border-radius: 16px;
  background: rgba(24,119,242,.12); border: 1px solid rgba(24,119,242,.35);
  text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.contact-fb-card:hover{ background: rgba(24,119,242,.18); border-color: rgba(24,119,242,.55); transform: translateY(-1px); }
.contact-fb-icon{
  width: 48px; height: 48px; border-radius: 12px; background: #1877F2; color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.contact-fb-cta{ font-size: .85rem; font-weight: 600; color: #1877F2; white-space: nowrap; flex: none; }
/* [NEW — 20 ก.ย. คุยกับ user] ปุ่มลอยมุมล่างขวา "คุยกับทีมงาน" — ใช้รูปปลาโรบอทเป็นไอคอน มีวงแหวนไล่สีหมุนรอบๆ
   เพื่อดึงความสนใจเบาๆ ไม่ทำ animation แรงเกินไปจนรำคาญ ซ่อน label ข้อความบนจอมือถือแคบๆ เหลือแค่ไอคอนกลม */
.fab-chat{
  position: fixed; right: 1.1rem; bottom: calc(max(.6rem, env(safe-area-inset-bottom, 0px)) + var(--vv-shift, 0px)); z-index: 15;
  display: flex; align-items: center; gap: .6rem;
  background: rgba(20,42,37,.94); border: 1px solid rgba(255,255,255,.14);
  padding: .3rem .8rem .3rem .3rem; border-radius: 999px;
  text-decoration: none; box-shadow: 0 14px 32px -12px rgba(0,0,0,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .15s ease, box-shadow .15s ease;
  /* [แก้ 3 ต.ค.] เหตุผลเดียวกับ .promo-fab ด้านบน — บังคับ promote เป็น compositing layer กันปุ่มหลุดมุมระหว่างเลื่อนบนมือถือ */
  transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform;
}
.fab-chat:hover{ transform: translateY(-2px) translateZ(0); box-shadow: 0 18px 38px -10px rgba(0,0,0,.6); }
.fab-chat-avatar{
  position: relative; width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.fab-chat-avatar::before{
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, #e6b567, #2dd4bf, #e6b567);
  animation: fab-glow-spin 5s linear infinite; opacity: .6;
}
.fab-chat-avatar img{
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; background: #0d211d; border: 2px solid #142a25;
}
.fab-chat-label{ color: var(--sidebar-ink, #edefe7); font-size: .76rem; font-weight: 600; white-space: nowrap; }
@keyframes fab-glow-spin{ to { transform: rotate(360deg); } }
@media (max-width: 480px){
  .fab-chat-label{ display: none; }
  .fab-chat{ padding: .26rem; }
}
@media (prefers-reduced-motion: reduce){ .fab-chat-avatar::before{ animation: none; } }
.fab-chat[data-open="1"] .fab-chat-label{ display: none; }
.fab-chat[data-open="1"] .fab-chat-avatar::before{ animation: none; opacity: .35; }
/* [แก้ 20 ก.ย. — คุยกับ user] เดิมเปิด/ปิดไวไป (.18s ease) ดูกระชากไม่นุ่มนวล — ยืดเวลาขึ้นเล็กน้อย + เปลี่ยนเป็น
   easing แบบ ease-out นุ่มๆ (ชะลอท้ายจังหวะ ไม่มีเด้ง overshoot) + ขยับระยะ/มุมตั้งต้นให้เห็นการเลื่อน+ขยายชัดขึ้น
   transform-origin ปักไว้มุมล่างขวา (ใกล้ปุ่ม FAB) ให้ความรู้สึกเหมือน "ผุดขึ้นจากปุ่ม" เป็นธรรมชาติ */
.chat-panel{
  position: fixed; right: 1.1rem; bottom: calc(max(.6rem, env(safe-area-inset-bottom, 0px)) + 4.3rem + var(--vv-shift, 0px)); z-index: 16; width: min(340px, calc(100vw - 2.2rem));
  height: min(480px, calc(100vh - 8rem)); display: flex; flex-direction: column;
  background: rgba(14,28,25,.98); border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow: hidden; opacity: 0; transform: translateY(20px) scale(.92); transform-origin: bottom right; pointer-events: none;
  transition: opacity .32s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1);
}
.chat-panel.is-open{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
@media (prefers-reduced-motion: reduce){ .chat-panel{ transition: opacity .15s linear; transform: none !important; } }
.chat-panel-head{
  display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; flex: none;
  background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08);
}
.chat-panel-head img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.chat-panel-title{ display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chat-panel-title b{ color: var(--sidebar-ink); font-size: .85rem; }
.chat-panel-title span{ color: var(--sidebar-ink-muted); font-size: .7rem; }
.chat-panel-close{
  background: none; border: none; color: var(--sidebar-ink-muted); cursor: pointer; padding: .3rem;
  border-radius: 8px; line-height: 0; transition: color .15s ease, background .15s ease;
}
.chat-panel-close:hover{ color: var(--sidebar-ink); background: rgba(255,255,255,.08); }
.chat-panel-body{ flex: 1; overflow-y: auto; padding: .8rem .7rem; display: flex; flex-direction: column; gap: .55rem; }
.chat-msg{ max-width: 86%; padding: .5rem .7rem; border-radius: 12px; font-size: .82rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.chat-msg.bot{ align-self: flex-start; background: rgba(255,255,255,.07); color: var(--sidebar-ink); border-bottom-left-radius: 4px; }
.chat-msg.user{ align-self: flex-end; background: linear-gradient(135deg,#f3cf95,#e6b567); color: #241a08; border-bottom-right-radius: 4px; font-weight: 500; }
.chat-msg .chat-link{color:#f3d08f;text-decoration:underline;word-break:break-all}
.chat-panel-body{position:relative}
.chat-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-self:flex-start;max-width:96%}
.chat-chip{font-family:inherit;font-size:.74rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;cursor:pointer;
  background:rgba(243,207,149,.1);border:1px solid rgba(243,207,149,.45);color:#f3d08f;transition:background .15s}
.chat-chip:hover{background:rgba(243,207,149,.22)}
.chat-msg.typing{ display: flex; gap: 4px; align-items: center; padding: .65rem .8rem; }
.chat-msg.typing span{ width: 6px; height: 6px; border-radius: 50%; background: var(--sidebar-ink-muted); animation: chat-typing-bounce 1.1s infinite ease-in-out; }
.chat-msg.typing span:nth-child(2){ animation-delay: .15s; }
.chat-msg.typing span:nth-child(3){ animation-delay: .3s; }
@keyframes chat-typing-bounce{ 0%,60%,100%{ transform: translateY(0); opacity: .5; } 30%{ transform: translateY(-3px); opacity: 1; } }
.chat-panel-foot{ flex: none; border-top: 1px solid rgba(255,255,255,.08); padding: .55rem .6rem; display: flex; flex-direction: column; gap: .4rem; }
.chat-input-row{ display: flex; gap: .4rem; }
.chat-input-row input{
  flex: 1; min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: .5rem .85rem; color: var(--sidebar-ink); font-size: .82rem; outline: none;
}
.chat-input-row input:focus{ border-color: rgba(230,181,103,.6); }
.chat-input-row button{
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg,#f3cf95,#e6b567); color: #241a08; display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease; font-size: 0;
}
.chat-input-row button:hover{ transform: scale(1.06); }
.chat-input-row button:disabled{ opacity: .5; cursor: default; transform: none; }
.chat-input-row .chat-img-btn{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #f3cf95; font-size: inherit; }
.chat-msg.has-img{ padding: .3rem; }
.chat-msg.user[data-rd]::after{ content: attr(data-rd); display: block; margin-top: 2px; font-size: .62rem; font-weight: 600; opacity: .65; text-align: right; white-space: nowrap; }
.chat-msg.has-img.user[data-rd]::after{ padding: 0 .35rem .1rem; }
.chat-msg .chat-img{ display: block; max-width: 100%; max-height: 240px; border-radius: 9px; cursor: zoom-in; background: rgba(0,0,0,.2); }
.chat-msg .chat-img-cap{ display: block; padding: .3rem .35rem .1rem; }
.chat-msg .chat-img-st{ display: block; font-size: .68rem; opacity: .75; padding: .2rem .35rem 0; }
.chat-note{ align-self: center; max-width: 92%; font-size: .72rem; line-height: 1.45; text-align: center; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: .3rem .8rem; }
.chat-img-zoom{ position: fixed; inset: 0; z-index: 2147483000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; }
.chat-img-zoom img{ max-width: 100%; max-height: 100%; border-radius: 10px; }
.chat-panel-line{ text-align: center; font-size: .7rem; color: var(--sidebar-ink-muted); }
.chat-panel-line a{ color: #06C755; font-weight: 600; text-decoration: none; }
.chat-panel-line a:hover{ text-decoration: underline; }
@media (max-width: 480px){
  .chat-panel{ right: .6rem; bottom: 4.6rem; }
}
/* [NEW — 19 ก.ย. คุยกับ user] ปุ่มสลับภาษา TH/EN */
.lang-switch{
  display: inline-flex; align-items: center; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 2px; gap: 2px;
}
.lang-btn{
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: .32rem .62rem; border-radius: 999px; color: var(--sidebar-ink-muted);
  background: transparent; border: none; cursor: pointer; transition: color .15s ease, background .15s ease;
}
.lang-btn.is-active{ background: linear-gradient(135deg,#f3cf95,#e6b567); color: #241a08; }
.lang-btn:not(.is-active):hover{ color: var(--sidebar-ink); }
/* [NEW — 21 ก.ย. คุยกับ user] การ์ดสรุปกำไร — โชว์เด่นเป็นอันดับแรกในหน้า Dashboard สไตล์ใกล้เคียงการ์ดแพ็กเกจ
   (โทนเข้ม + accent gradient) แต่แยกออกมาให้เด่นกว่า ให้รู้สึกเหมือน "การ์ดผลตอบแทน" ไม่ใช่การ์ดขายของ */
.profit-summary-card{
  position: relative; border-radius: 20px;
  /* [แก้ 22 ก.ย. — คุยกับ user] ลด padding บน/ล่างลง (เดิม 1.75rem) การ์ดสูงเกินจำเป็น เหลือ padding ข้างเท่าเดิม */
  /* [แก้ 26 ก.ย. รอบ 4 — คุยกับ user "ปุ่มปัดมองไม่เห็น"] เผื่อ padding ล่างเพิ่มอีกนิด (เดิม 1.15rem ทุกด้าน) ให้มีที่
     ว่างพอสำหรับ overlay จุดไข่ปลา/ปุ่มปัด (#acctSwipeNav) ที่ย้ายมาซ้อนในการ์ดเอง — เอา overflow:hidden ออกด้วย
     (เปลี่ยนไปใส่ border-radius ให้ ::after แทน) เพื่อให้ปุ่ม/แคปซูลบนจอกว้างที่ล้นออกไปวางใต้การ์ดได้ไม่โดนตัด */
  padding: 1.15rem 1.85rem 1.65rem;
  background: radial-gradient(130% 160% at 0% 0%, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 65%);
  color: var(--sidebar-ink); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.profit-summary-card::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(60% 80% at 100% 0%, rgba(230,181,103,0.18), transparent 70%);
  pointer-events: none;
}
.profit-summary-head{ position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.profit-summary-head .display{ color: var(--sidebar-ink); }
#profitSummaryAccount{ color: var(--sidebar-ink-muted); }
.profit-summary-head .btn-outline{
  border-color: rgba(255,255,255,.22) !important; color: var(--sidebar-ink) !important; background: transparent !important;
}
.profit-summary-head .btn-outline:hover{ border-color: rgba(255,255,255,.4) !important; background: rgba(255,255,255,.05) !important; }
.profit-summary-stats{ position: relative; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.profit-stat{ display: flex; flex-direction: column; gap: .3rem; min-width: 9rem; }
.profit-stat-label{ font-size: .78rem; color: var(--sidebar-ink-muted); text-transform: uppercase; letter-spacing: .03em; }
.profit-stat-value{ font-family: 'IBM Plex Mono', monospace; font-size: 2rem; font-weight: 600; line-height: 1.1; }
.profit-stat-value.is-good{ color: #6fe0a3; }
.profit-stat-value.is-bad{ color: #f28b82; }
.profit-stat-hint{ font-size: .75rem; color: var(--sidebar-ink-muted); opacity: .8; }
.profit-stat-divider{ width: 1px; align-self: stretch; background: rgba(255,255,255,.14); }
/* [แก้ 22 ก.ย. — คุยกับ user เจอปัญหาจริง "การ์ดกำไรตกบรรทัดในมือถือ"] เดิมใช้ flex-wrap ธรรมดา + .profit-stat มี
   min-width 9rem (144px) ต่อช่อง — พอมี 3 ช่อง (วันนี้/รวมทั้งหมด/บาลานซ์) รวมกันกว้างเกินจอมือถือ ตัวการ์ดเลยบีบให้แต่
   ละช่องตกไปอยู่คนละบรรทัด แถมเส้นคั่นแนวตั้ง (.profit-stat-divider ที่ตั้งใจไว้คั่นระหว่างช่องตอนเรียงแนวนอน) ก็ลอย
   ค้างอยู่ข้างๆ ช่องที่ตกบรรทัดไปแล้ว ดูเป็นเส้นแปลกๆ — เปลี่ยนเป็น grid 2 คอลัมน์แทนที่จอแคบ (เรียงเป็นตารางแทนบีบทีละ
   แถว) และซ่อนเส้นคั่นแนวตั้งไปเลยเพราะ grid มี gap ให้เองอยู่แล้ว ไม่ต้องใช้เส้นคั่นแบบ flex เดิม */
@media (max-width: 640px){
  .profit-summary-stats{
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; align-items: start;
  }
  .profit-stat{ min-width: 0; }
  .profit-stat-divider{ display: none; }
}
@media (max-width: 480px){
  .profit-stat-value{ font-size: 1.6rem; }
}
/* [NEW — 26 ก.ย. คุยกับ user "ปัดซ้ายขวาสลับบัญชีในมือถือ"] ปัดที่ตัวการ์ดสรุปกำไรเพื่อวนดูทีละบัญชี (หน้าแรก =
   ยอดรวมทุกบัญชีแบบเดิม) เฉพาะตอนบัญชีลูกค้ามีมากกว่า 1 License Key เท่านั้น — touch-action: pan-y กันเบราว์เซอร์เอา
   ท่าปัดไปตีความเป็นสกอลแนวตั้งของทั้งหน้าแทน จุดไข่ปลา + คำใบ้ด้านล่างการ์ดโชว์เฉพาะจอมือถือ (จอกว้างมีปุ่ม
   "สลับบัญชี/เติมเงิน" อยู่แล้วไม่ต้องซ้ำ)
   [แก้ 26 ก.ย. รอบ 3 — คุยกับ user "ปัดให้เหมือนเปิดหนังสือ นุ่มนวลๆ"] ครอบ section ด้วย perspective ให้การ์ดหมุน
   รอบแกน Y ได้มีมิติจริง (ดู goToSwipeIndex) — บานพับ (transform-origin) สลับข้างตามทิศที่ปัด/กดปุ่ม เหมือนพลิกหน้า
   กระดาษจริงๆ ไม่ใช่แค่เลื่อน/เฟดเฉยๆ */
#profitSummarySection{ perspective: 1400px; }
.profit-summary-card.is-swipeable{ touch-action: pan-y; }
.profit-summary-card.is-swipe-anim{ backface-visibility: hidden; will-change: transform, opacity; }
/* [แก้ 26 ก.ย. รอบ 7 — คุยกับ user "ให้ปุ่มอยู่มุมการ์ด ซ้าย-ขวา เหมือนป๊อปอัพโฆษณาหน้าแรก"] เลียนแบบแพทเทิร์นของ
   .promo-arrow (ปุ่มลูกศรในป๊อปอัพโปรโมชั่นหน้าแรก) ตรงๆ — ปุ่มวงกลมลอย (overlay) มุมซ้าย/ขวากึ่งกลางแนวตั้งของการ์ด
   + จุดไข่ปลาแยกอยู่ล่างกึ่งกลาง ทั้งหมด position:absolute เทียบกับตัวการ์ดโดยตรง (การ์ดมี position:relative อยู่แล้ว)
   ไม่มีทางหลุดออกนอกกล่องการ์ดหรือโดนบล็อกอื่นบัง — ใช้ display:contents ที่ wrapper #acctSwipeNav ตอน active
   (ไม่สร้างกล่องของตัวเอง ให้ลูกๆ อ้างอิงตำแหน่งจากการ์ดเลย ไม่ใช่จาก wrapper) */
.acct-swipe-nav{ display: none; }
.acct-swipe-nav.is-active-group{ display: contents; }
.acct-nav-btn{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 1.55rem; height: 1.55rem; border-radius: 999px; padding: 0;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35);
  color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; opacity: .8;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease, background .15s ease, transform .15s ease;
}
.acct-nav-btn:hover{ opacity: 1; background: rgba(0,0,0,.55); }
.acct-nav-btn:active{ transform: translateY(-50%) scale(.9); }
.acct-nav-btn-prev{ left: .5rem; }
.acct-nav-btn-next{ right: .5rem; }
.acct-swipe-dots{
  position: absolute; left: 0; right: 0; bottom: .45rem; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
}
.acct-swipe-dot{ width: .35rem; height: .35rem; border-radius: 999px; background: rgba(255,255,255,.28); transition: background .15s ease, width .15s ease; flex: none; }
.acct-swipe-dot.is-current{ background: var(--accent, #e6b567); width: .9rem; border-radius: 999px; }
/* [NEW — 26 ก.ย. คุยกับ user "หน้าคอมไม่มีปุ่มดูบัญชีถัดไป"] ปุ่มลูกศรไว้ใช้บนจอกว้าง (PC/แท็บเล็ต) เท่านั้น — มือถือ
   ปัดตรงๆ บนตัวการ์ดได้อยู่แล้ว (เหมือน .promo-arrow ที่ซ่อนบนมือถือเช่นกัน) เหลือแค่จุดไข่ปลาไว้บอกตำแหน่งทุกขนาดจอ */
@media (max-width: 768px){
  .acct-nav-btn{ display: none; }
}
/* [แก้ 26 ก.ย. รอบ 8 — คุยกับ user "ปุ่มทับตัวหนังสือ"] จอกว้างที่ปุ่มลอยอยู่มุมซ้าย-ขวาจริงๆ ต้องเว้นที่ว่างในการ์ด
   ให้ปุ่มก่อน ไม่งั้นไปทับหัวข้อ "กำไรวันนี้"/ปุ่ม "ดูรายละเอียด →" ที่ชิดขอบซ้าย-ขวาอยู่แล้ว (มือถือไม่ต้องเว้นเพราะ
   ปุ่มถูกซ่อนอยู่แล้ว — ดู @media (max-width:768px) ด้านบน) */
@media (min-width: 769px){
  .profit-summary-card.has-swipe-nav{ padding-left: 2.5rem; padding-right: 2.5rem; }
}
/* [NEW — 24 ก.ย. รอบ 2 คุยกับ user "ทำการ์ดลงมาสวยๆ ร่วมเป็นพาร์ทเนอร์"] การ์ดชวนสมัครพาสเนอร์ในแดชบอร์ดลูกค้า —
   โทนทอง/เขียวมิ้นต์แยกจากการ์ดกำไร (ไม่ใช่การ์ดข้อมูลบัญชี แต่เป็นการ์ดชวน/โฆษณา) วางแนวนอน (ไอคอน+ข้อความ+ปุ่ม)
   บนจอกว้าง พับเป็นแนวตั้งบนมือถือ */
.partner-promo-card{
  position: relative; overflow: hidden; border-radius: 18px;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent, #e6b567) 14%, var(--paper-raised)) 0%, var(--paper-raised) 55%);
  border: 1px solid color-mix(in srgb, var(--accent, #e6b567) 30%, var(--line));
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; gap: 1.1rem;
}
.partner-promo-icon{
  flex: none; width: 3rem; height: 3rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent, #e6b567) 20%, transparent);
  color: var(--accent, #e6b567);
}
.partner-promo-body{ flex: 1; min-width: 0; }
.partner-promo-cta{ flex: none; white-space: nowrap; }
@media (max-width: 640px){
  .partner-promo-card{ flex-direction: column; align-items: flex-start; text-align: left; gap: .85rem; }
  .partner-promo-cta{ width: 100%; text-align: center; }
}
/* [NEW — 21 ก.ย. คุยกับ user] การ์ดออเดอร์ที่เปิดอยู่ตอนนี้ — โชว์ทันทีหลังล็อกอิน (ใต้การ์ดสรุปกำไร) ว่า EA
   กำลังเปิด buy/sell กี่ไม้ บาดจ์แดงกลมมุมขวาบนโชว์จำนวนไม้ กดที่การ์ดดูรายละเอียดแต่ละไม้ในป๊อปอัพ
   เก็บ state แค่ snapshot ล่าสุด (overwrite) ไม่ใช่ log สะสม ขนาดข้อมูลจึงไม่โตตามเวลา */
.open-pos-card{
  position: relative; cursor: pointer; border-radius: 16px;
  /* [แก้ 22 ก.ย. — คุยกับ user] ลด padding บน/ล่างลง (เดิม 1.1rem) ให้การ์ดกระชับขึ้น ไม่กินพื้นที่แนวตั้งเกินจำเป็น */
  /* [แก้ 23 ก.ย. — คุยกับ user] เพิ่ม padding ล่างอีกนิด กันบาดจ์ Bot Online/Offline (ย้ายไปมุมขวาล่างแล้ว) ทับ hint text */
  padding: .7rem 1.35rem 1.3rem;
  border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: .3rem; transition: border-color .15s ease;
}
.open-pos-card:hover{ border-color: var(--teal); }
.open-pos-count-badge{
  position: absolute; top: -.55rem; right: -.55rem; min-width: 1.7rem; height: 1.7rem; padding: 0 .4rem;
  border-radius: 999px; background: var(--bad); color: #fff; font-family: 'IBM Plex Mono', monospace;
  font-size: .82rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); border: 2px solid var(--paper);
}
.open-pos-head{ display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.open-pos-dir-badge{
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .22rem .55rem; border-radius: 999px; text-transform: uppercase;
}
.open-pos-dir-badge.dir-buy{ background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.open-pos-dir-badge.dir-sell{ background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.open-pos-dir-badge.dir-mixed{ background: color-mix(in srgb, var(--teal) 18%, transparent); color: var(--teal); }
.open-pos-title{ font-size: .95rem; font-weight: 600; }
.open-pos-hint{ font-size: .72rem; color: var(--ink-muted); }
/* [NEW 13 ต.ค.] แถวปุ่มหยุด/เริ่มบอท ในการ์ดออเดอร์ (เว้นขวาให้บาดจ์ Bot Online มุมขวาล่าง) */
.bot-ctl{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.35rem;padding:.42rem .55rem .42rem .7rem;border-radius:11px;
  background:color-mix(in srgb,var(--teal,#1f8a6a) 7%,transparent);border:1px solid color-mix(in srgb,var(--teal,#1f8a6a) 22%,transparent);cursor:default;margin-right:7.5rem}
.bot-ctl[hidden]{display:none}
.bot-ctl.is-paused{background:color-mix(in srgb,#c98a2a 10%,transparent);border-color:color-mix(in srgb,#c98a2a 40%,transparent)}
.bot-ctl .bc-st{flex:1;min-width:0;font-size:.76rem;color:var(--ink-muted);line-height:1.4}
.bot-ctl .bc-st b{color:var(--ink);font-weight:600}
.bot-ctl .bc-sync{font-size:.7rem}
.bot-ctl .bc-btn{font-family:inherit;font-size:.78rem;font-weight:600;padding:.38rem .8rem;border-radius:9px;border:1px solid color-mix(in srgb,#c98a2a 55%,transparent);
  background:color-mix(in srgb,#c98a2a 10%,var(--paper));color:#8a5a12;cursor:pointer;white-space:nowrap}
.bot-ctl .bc-btn.go{border-color:color-mix(in srgb,var(--teal,#1f8a6a) 60%,transparent);background:color-mix(in srgb,var(--teal,#1f8a6a) 12%,var(--paper));color:var(--teal,#1f8a6a)}
.bot-ctl .bc-btn:disabled{opacity:.5;cursor:wait}
@media (max-width:640px){.bot-ctl{margin-right:0;margin-bottom:1.6rem}}
/* [22 ต.ค.] ป้องกันพอต — การ์ดตั้งค่าในแท็บตั้งค่า EA + แถบเตือนบนแดชบอร์ด */
.mya-ddg{margin:.2rem 0 1rem;padding:.8rem .95rem;border-radius:13px;border:1px solid color-mix(in srgb,var(--teal,#1f8a6a) 28%,transparent);background:color-mix(in srgb,var(--teal,#1f8a6a) 6%,var(--paper))}
.mya-ddg[hidden]{display:none}
/* [28 ต.ค.] ตรวจสุขภาพบอท (ฝั่งลูกค้า) */
.hl-card{margin:.2rem 0 1rem;padding:.9rem 1rem;border-radius:14px;border:1px solid var(--line,rgba(0,0,0,.1));background:var(--paper-raised,#fff)}
.hl-card[hidden]{display:none}
.hl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:1rem;align-items:start}
.hl-grid>.hl-card,.hl-grid>.pot-card{margin:0}
.hl-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hl-h b{font-size:.95rem;color:var(--ink)}
.hl-sum{font-size:.74rem;font-weight:700;padding:.18rem .6rem;border-radius:99px}
.hl-sum.ok{background:rgba(31,138,106,.13);color:#17795b}.hl-sum.warn{background:rgba(217,146,46,.16);color:#9a6210}.hl-sum.bad{background:rgba(192,57,43,.13);color:#b0302a}
.hl-rf{margin-left:auto;font-size:.74rem;padding:.25rem .7rem;border-radius:99px;border:1px solid var(--line,rgba(0,0,0,.15));background:transparent;color:var(--ink-muted);cursor:pointer}
.hl-now{display:flex;gap:.55rem;align-items:flex-start;margin:.7rem 0 .55rem;padding:.65rem .75rem;border-radius:11px;font-size:.84rem;line-height:1.45;color:var(--ink);background:rgba(31,138,106,.07)}
.hl-now.warn{background:rgba(217,146,46,.1)}.hl-now.bad{background:rgba(192,57,43,.09)}
.hl-dot{flex:none;width:.6rem;height:.6rem;border-radius:50%;margin-top:.38rem;background:#1f8a6a}
.warn>.hl-dot,.hl-dot.warn{background:#d9922e}.bad>.hl-dot,.hl-dot.bad{background:#c0392b}
.hl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.35rem .8rem}
.hl-row{display:flex;gap:.55rem;align-items:flex-start;padding:.35rem 0;font-size:.82rem;color:var(--ink)}
.hl-row small{display:block;font-size:.74rem;line-height:1.45;color:var(--ink-muted);margin-top:.1rem}
.hl-row.warn small{color:#9a6210}.hl-row.bad small{color:#b0302a}
.hl-tl-h{margin:.8rem 0 .3rem;font-size:.8rem;font-weight:700;color:var(--ink)}
.hl-ev{display:grid;grid-template-columns:74px 1fr;gap:.6rem;padding:.42rem 0;border-top:1px solid var(--line,rgba(0,0,0,.07));font-size:.8rem;line-height:1.45;color:var(--ink)}
.hl-ev time{color:var(--ink-muted);font-variant-numeric:tabular-nums;font-size:.74rem}
.hl-ev b.buy{color:#1f8a6a}.hl-ev b.sell{color:#c0392b}.hl-ev .pos{color:#1f8a6a;font-weight:700}.hl-ev .neg{color:#c0392b;font-weight:700}
.hl-ev small{display:block;color:var(--ink-muted);font-size:.74rem}
.hl-ev.warn{background:rgba(217,146,46,.06)}
.hl-more{margin-top:.4rem;font-size:.76rem;border:0;background:none;color:var(--teal,#1f8a6a);cursor:pointer;padding:0;font-weight:700}
.hl-up{display:block;margin-top:.6rem;font-size:.7rem;color:var(--ink-muted)}
.hl-note{font-size:.78rem;color:var(--ink-muted);margin-top:.5rem;line-height:1.5}
.mya-ddg.is-active{border-color:color-mix(in srgb,#c0392b 55%,transparent);background:color-mix(in srgb,#c0392b 8%,var(--paper))}
.mya-ddg .dg-h{display:flex;align-items:center;justify-content:space-between;gap:.7rem}
.mya-ddg .dg-t{font-weight:700;font-size:.92rem;color:var(--ink)}
.mya-ddg .dg-d{font-size:.78rem;line-height:1.5;color:var(--ink-muted);margin:.35rem 0 .6rem}
.mya-ddg .dg-sw{flex:none;position:relative;width:46px;height:26px;border-radius:99px;border:0;cursor:pointer;background:#9aa3a0;transition:background .2s}
.mya-ddg .dg-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
.mya-ddg .dg-sw.on{background:var(--teal,#1f8a6a)}.mya-ddg .dg-sw.on::after{transform:translateX(20px)}
.mya-ddg .dg-sw:disabled{opacity:.55;cursor:wait}
.mya-ddg .dg-row{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.mya-ddg .dg-row label{font-size:.78rem;color:var(--ink-muted)}
.mya-ddg .dg-in{width:4.4rem;font:inherit;font-size:.9rem;font-weight:600;padding:.34rem .5rem;border-radius:9px;border:1px solid var(--line,#cfd8d4);background:var(--paper);color:var(--ink);text-align:center}
.mya-ddg .dg-chip{font:inherit;font-size:.74rem;padding:.28rem .6rem;border-radius:99px;border:1px solid var(--line,#cfd8d4);background:transparent;color:var(--ink);cursor:pointer}
.mya-ddg .dg-chip.sel{background:var(--teal,#1f8a6a);border-color:var(--teal,#1f8a6a);color:#fff}
.mya-ddg .dg-save{font:inherit;font-size:.78rem;font-weight:600;padding:.36rem .8rem;border-radius:9px;border:1px solid var(--teal,#1f8a6a);background:var(--teal,#1f8a6a);color:#fff;cursor:pointer}
.mya-ddg .dg-save:disabled{opacity:.5;cursor:default}
.mya-ddg .dg-st{margin-top:.55rem;font-size:.78rem;color:var(--ink-muted)}
.mya-ddg .dg-st b{color:var(--ink)}
.mya-ddg.is-active .dg-st b{color:#c0392b}
/* [13 ต.ค.] ปุ่มหยุด/เริ่มบอท ที่หัวแท็บตั้งค่า EA */
.mya-botctl{margin-left:auto;display:flex;align-items:center;gap:.5rem;padding:.3rem .35rem .3rem .65rem;border-radius:11px;
  background:color-mix(in srgb,var(--teal,#1f8a6a) 8%,transparent);border:1px solid color-mix(in srgb,var(--teal,#1f8a6a) 25%,transparent)}
.mya-botctl[hidden]{display:none}
.mya-botctl.is-paused{background:color-mix(in srgb,#c98a2a 11%,transparent);border-color:color-mix(in srgb,#c98a2a 45%,transparent)}
.mya-botctl.old{opacity:.75}
.mya-botctl .bc-st{font-size:.76rem;color:var(--ink-muted);white-space:nowrap}
.mya-botctl .bc-st b{color:var(--ink);font-weight:600}
.mya-botctl .bc-sync{font-size:.7rem;margin-left:.3rem}
.mya-botctl .bc-btn{font-family:inherit;font-size:.78rem;font-weight:600;padding:.36rem .75rem;border-radius:9px;border:1px solid color-mix(in srgb,#c98a2a 55%,transparent);
  background:color-mix(in srgb,#c98a2a 10%,var(--paper));color:#8a5a12;cursor:pointer;white-space:nowrap}
.mya-botctl .bc-btn.go{border-color:color-mix(in srgb,var(--teal,#1f8a6a) 60%,transparent);background:color-mix(in srgb,var(--teal,#1f8a6a) 12%,var(--paper));color:var(--teal,#1f8a6a)}
.mya-botctl .bc-btn:disabled{opacity:.5;cursor:wait}
@media (max-width:700px){#myaPaneEa .mya-pane-h{flex-wrap:wrap}.mya-botctl{margin-left:0;width:100%;justify-content:space-between}.mya-botctl .bc-st{white-space:normal}}
/* [NEW — 23 ก.ย. คุยกับ user] badge "Bot Online/Offline" มุมขวาล่างของการ์ดนี้ (มุมขวาบนมีบาดจ์จำนวนไม้อยู่แล้ว
   ส่วนมุมซ้ายบนชนกับหัวข้อ/BUY-SELL badge เลยย้ายมาล่างขวาแทน) —
   อิงจาก last_heartbeat_at เกณฑ์เดียวกับหน้าแอดมิน (≤40 นาที = online) ถ้ายังไม่เคย checkin เลยถือว่า offline ด้วย */
.bot-status-badge{
  position: absolute; bottom: -.55rem; right: -.55rem; display: flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem .3rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
  letter-spacing: .02em; box-shadow: 0 2px 6px rgba(0,0,0,.2); border: 2px solid var(--paper);
  background: var(--paper); font-family: 'IBM Plex Mono', monospace;
}
.bot-status-dot{ width: .5rem; height: .5rem; border-radius: 999px; flex: none; }
.bot-status-badge.is-online{ color: var(--good); }
.bot-status-badge.is-online .bot-status-dot{ background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); }
.bot-status-badge.is-offline{ color: var(--bad); }
.bot-status-badge.is-offline .bot-status-dot{ background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); }
/* [NEW — 29 ก.ย. คุยกับ user "ดึงข่าวจากเว็บอื่นมาโชว์ในแดชบอร์ด แบบตารางของ Forex Factory"] การ์ดปฏิทินข่าว
   เศรษฐกิจวันนี้ — ดึงจาก GET /my/economic-calendar (server แคช feed สไตล์ Forex Factory รีเฟรชทุก 3 ชม.)
   ซ่อนเงียบๆ ถ้าวันนี้ไม่มีข่าว บาดจ์แดงมุมขวาบนโชว์จำนวนข่าวผลกระทบสูง กดที่การ์ดดูรายการทั้งหมดในป๊อปอัพ */
.news-cal-card{
  position: relative; cursor: pointer; border-radius: 16px; padding: .85rem 1.35rem 1rem;
  border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: .5rem; transition: border-color .15s ease;
}
.news-cal-card:hover{ border-color: var(--teal); }
.news-cal-high-badge{
  position: absolute; top: -.55rem; right: -.55rem; min-width: 1.7rem; height: 1.7rem; padding: 0 .4rem;
  border-radius: 999px; background: var(--bad); color: #fff; font-family: 'IBM Plex Mono', monospace;
  font-size: .82rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); border: 2px solid var(--paper);
}
.news-cal-head{ display: flex; align-items: center; gap: .5rem; }
.news-cal-icon{ font-size: 1.05rem; line-height: 1; }
.news-cal-title{ font-size: .95rem; font-weight: 600; }
.news-cal-tz{ font-size: .7rem; font-weight: 500; color: var(--ink-muted); }
.news-cal-preview{ display: flex; flex-direction: column; gap: .32rem; }
.news-cal-row{ display: flex; align-items: center; gap: .55rem; font-size: .78rem; }
.news-cal-time{ font-family: 'IBM Plex Mono', monospace; color: var(--ink-muted); min-width: 3.1rem; flex: none; }
.news-cal-dot{ width: .5rem; height: .5rem; border-radius: 999px; flex: none; }
.news-cal-dot.impact-high{ background: var(--bad); }
.news-cal-dot.impact-medium{ background: #f5a623; }
.news-cal-dot.impact-low{ background: var(--ink-muted); }
.news-cal-ccy{ font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: .72rem; color: var(--teal); min-width: 2.6rem; flex: none; }
.news-cal-evt{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-cal-hint{ font-size: .72rem; color: var(--ink-muted); }
.news-cal-list{ display: flex; flex-direction: column; gap: .55rem; max-height: 60vh; overflow-y: auto; }
.news-cal-item{ padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: .32rem; }
.news-cal-item-head{ display: flex; align-items: center; gap: .55rem; font-size: .8rem; }
.news-cal-item-title{ font-weight: 600; font-size: .85rem; }
.news-cal-item-stats{ display: flex; gap: 1rem; font-size: .72rem; color: var(--ink-muted); flex-wrap: wrap; }
.news-cal-item-stats b{ color: var(--ink); font-family: 'IBM Plex Mono', monospace; }
.news-cal-empty{ font-size: .8rem; color: var(--ink-muted); text-align: center; padding: 1.2rem 0; }
.news-cal-filter-row{ display: flex; gap: .5rem; flex-wrap: wrap; }
.news-cal-filter-chip{
  display: flex; align-items: center; gap: .4rem; font-size: .78rem; cursor: pointer; user-select: none;
  padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-raised);
}
.news-cal-filter-chip input{ accent-color: var(--teal); cursor: pointer; }
.news-cal-day-group{ display: flex; flex-direction: column; gap: .5rem; }
.news-cal-day-label{
  font-size: .78rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .03em;
  margin: .3rem 0 -.1rem;
}
.news-cal-more-btn{
  align-self: center; margin-top: .3rem; padding: .45rem 1.1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper-raised); color: var(--teal); font-size: .78rem; font-weight: 600; cursor: pointer;
}
/* [แก้ 30 ก.ย. — คุยกับ user เจอปัญหาจริง "การ์ดสีเพี้ยน" ในหน้าแรกก่อนล็อกอิน] .news-cal-card เดิมอ้างตัวแปรธีม
   สว่าง (--paper สีครีม, --ink-muted/--teal ของธีมสว่าง) ที่ใช้ได้ปกติในแดชบอร์ด (พื้นหลังสว่าง) แต่พอย้ายการ์ดเดียวกัน
   มาวางบนหน้าแรกที่พื้นหลังเข้ม (auth-scene) เลยกลายเป็นการ์ดครีมทึบโผล่มาแปลกๆ ไม่กลืนกับธีม — ใช้วิธีเดียวกับที่
   .auth-card.auth-modal-card ทำไว้แล้ว (ประกาศตัวแปร CSS ทับใหม่เฉพาะสโคปนี้) แทนที่จะไล่ตั้งสีทีละ element เพราะทุก
   component ลูก (.news-cal-time/.news-cal-hint/.news-cal-tz/.news-cal-dot.impact-low ฯลฯ) อ้าง var() ชุดนี้อยู่แล้ว */
#newsCalendarPublicSection .news-cal-card{
  --paper: rgba(255,255,255,.07);
  --paper-raised: rgba(255,255,255,.1);
  --line: rgba(255,255,255,.14);
  --ink-muted: var(--sidebar-ink-muted);
  --teal: #5eead4;
  color: var(--sidebar-ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.news-cal-more-btn:hover{ border-color: var(--teal); }
.open-pos-leg-row{
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid var(--line);
}
.open-pos-leg-row:last-child{ border-bottom: none; }
/* [NEW — 25 ก.ย.] กราฟสดแบบ MT5 ในป๊อปอัพออเดอร์ */
.lc-wrap{max-width:980px}
.lc-card{padding:1.1rem 1.25rem}
.lc-tabs{display:flex;gap:.35rem;border-bottom:1px solid var(--line);padding-bottom:.5rem}
.lc-tabs button{font-size:.82rem;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.lc-tabs button.is-active{background:var(--accent);border-color:var(--accent);color:#1a1208;font-weight:600}
.lc-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.lc-quote{display:flex;align-items:baseline;gap:.6rem}
.lc-sym{font-weight:700;font-size:.95rem}
.lc-bid{font-family:'IBM Plex Mono',monospace;font-size:1.25rem;font-weight:700;transition:color .35s}
.lc-bid.up{color:#34c781}.lc-bid.dn{color:#ef5350}
.lc-est{font-size:.62rem;font-weight:700;color:#0b1a16;background:#4fd69c;border-radius:6px;padding:2px 6px;margin-left:.35rem;vertical-align:middle;animation:lcEstBlink 1.6s ease-in-out infinite}
.lc-est[hidden]{display:none}
@keyframes lcEstBlink{50%{opacity:.55}}
.lc-tfs{display:flex;gap:.25rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.2rem}
.lc-tfs button{font-size:.75rem;font-weight:600;padding:.3rem .65rem;border-radius:7px;border:0;background:transparent;color:var(--ink-muted,var(--muted));cursor:pointer}
.lc-tfs button.is-active{background:#0d1f1a;color:#e6b567}
.lc-stats{display:flex;flex-wrap:wrap;gap:.4rem}
.lc-stats span{font-size:.74rem;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);white-space:nowrap}
.lc-stats b{font-family:'IBM Plex Mono',monospace}
.lc-chart-box{position:relative;border-radius:12px;overflow:hidden;background:#0b1a16;border:1px solid rgba(255,255,255,.08)}
.lc-chart{width:100%;height:min(460px,58vh);height:min(460px,58dvh)}
.lc-chart,.lc-chart *{touch-action:pan-y}
.lc-chart-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:1.5rem;color:#d7e2dc;font-size:.88rem;line-height:1.6;background:rgba(11,26,22,.92)}
.lc-chart-msg .btn{margin-top:.2rem}
.lc-foot{font-size:.7rem;color:var(--ink-muted,var(--muted))}
@media (max-width:640px){
  .lc-overlay{padding:.5rem}
  .lc-card{padding:.9rem .8rem}
  .lc-chart{height:min(420px,56vh);height:min(420px,56dvh)}
  .lc-bid{font-size:1.1rem}
}
.open-pos-leg-type{
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: .18rem .5rem; border-radius: 999px; text-transform: uppercase; flex: none;
}
.open-pos-leg-type.dir-buy{ background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.open-pos-leg-type.dir-sell{ background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.open-pos-leg-mid{ flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.open-pos-leg-lot{ font-family: 'IBM Plex Mono', monospace; font-size: .85rem; font-weight: 600; }
.open-pos-leg-price{ font-size: .72rem; color: var(--ink-muted); }
.open-pos-leg-profit{ font-family: 'IBM Plex Mono', monospace; font-size: .9rem; font-weight: 600; flex: none; text-align: right; }
.open-pos-leg-profit.is-good{ color: var(--good); }
.open-pos-leg-profit.is-bad{ color: var(--bad); }
/* [แก้ 22 ก.ย. — คุยกับ user เจอปัญหาจริง "อยากเห็นแบบตารางชัดๆ เหมือนทรานเซ็กชั่น"] เปลี่ยนจากการ์ดเรียงต่อกัน
   มาเป็นตาราง 1 แถว/บัญชี (มีเลขลำดับ "บัญชีที่ 1, 2, ...") + แถวรวมท้ายตาราง ให้เห็นชัดว่ายอดรวมมาจากบัญชีไหนเท่าไหร่ */
.profit-breakdown-table{ width: 100%; border-collapse: collapse; font-size: .82rem; }
.profit-breakdown-table th{ text-align: left; font-size: .65rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); padding: 0 .4rem .5rem; }
.profit-breakdown-table th.text-right, .profit-breakdown-table td.text-right{ text-align: right; }
/* [NEW — 30 ก.ย.] หัวตารางกดเรียงลำดับได้ */
.profit-breakdown-table th.pb-sortable{ cursor: pointer; user-select: none; white-space: nowrap; }
.profit-breakdown-table th.pb-sortable:hover{ color: var(--ink); }
.pb-sort-arrow{ display: inline-block; margin-left: .2rem; font-size: .6rem; opacity: .7; }
.pb-sort-arrow:empty{ margin-left: 0; }
/* [NEW — 30 ก.ย.] กดชื่อ/แถวบัญชีในตาราง "กำไรแยกรายบัญชี" เพื่อสลับ Dashboard ไปบัญชีนั้นเลย */
.profit-breakdown-table .pb-acct-cell{ cursor: pointer; }
.profit-breakdown-table .pb-acct-cell:hover .profit-breakdown-nick,
.profit-breakdown-table .pb-acct-cell:hover .profit-breakdown-acct > span.tabular{ text-decoration: underline; }
.pb-detail-link{ margin-left: .35rem; font-size: .75rem; opacity: .6; text-decoration: none; }
.pb-detail-link:hover{ opacity: 1; }
.profit-breakdown-table td{ padding: .65rem .4rem; border-top: 1px solid var(--line); vertical-align: top; }
.profit-breakdown-table tfoot td{ border-top: 2px solid var(--line); font-weight: 700; }
.profit-breakdown-num{ display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: var(--paper-raised); font-size: .68rem; font-weight: 700; margin-right: .4rem; flex: none; }
.profit-breakdown-acct{ display: flex; align-items: center; }
.profit-breakdown-broker{ font-size: .68rem; color: var(--ink-muted); margin-left: 1.75rem; margin-top: .1rem; }
.profit-breakdown-table .is-good{ color: var(--good); }
.profit-breakdown-table .is-bad{ color: var(--bad); }
/* [NEW — 21 ก.ย. คุยกับ user] ปุ่มเลือก License Key ในหน้าต่างสลับคีย์ — 1 บัญชีมีได้หลายคีย์ */
.license-picker-item{
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; padding: .85rem 1rem; border-radius: 10px; text-align: left;
  border: 1px solid var(--line); background: var(--paper); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.license-picker-item:hover{ border-color: var(--teal); background: var(--paper-raised); }
/* [NEW — 23 ก.ย. คุยกับ user รอบ 4] ไฮไลต์บัญชี/คีย์ที่กำลังดูอยู่ตอนนี้ ในหน้าต่างสลับคีย์ กันลูกค้าสับสนว่าอยู่บัญชีไหน */
.license-picker-item.is-active-acct{ border-color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); }
.active-acct-tag{
  font-size: .6rem; font-weight: 700; color: var(--teal); margin-left: .4rem; padding: .1rem .45rem;
  border-radius: 999px; background: color-mix(in srgb, var(--teal) 16%, transparent); vertical-align: middle; white-space: nowrap;
}
.license-picker-nick{ font-weight: 600; }
/* [NEW — 23 ก.ย. คุยกับ user รอบ 4] ไฮไลต์แถวของบัญชีที่กำลังดูอยู่ในป๊อปอัพ "กำไรแยกรายบัญชี" เหมือนกัน */
.profit-breakdown-table tr.is-active-acct td{ background: color-mix(in srgb, var(--teal) 8%, transparent); }
.profit-breakdown-table tr.is-active-acct .profit-breakdown-num{ background: var(--teal); color: #fff; }
.profit-breakdown-nick{ font-weight: 600; }
/* [NEW — 23 ก.ย. คุยกับ user รอบ 4] สวิตช์เล็กๆ เปิด/ปิด "รวมยอดในแดชบอร์ด" ต่อบัญชี ในป๊อปอัพกำไรแยกรายบัญชี —
   ใช้ /my/account/toggle-license-total ที่ฝั่ง server มีอยู่แล้ว (ดู include_in_dashboard_total ที่ db.js) */
.mini-switch{ position: relative; display: inline-block; width: 2.1rem; height: 1.15rem; flex: none; }
.mini-switch input{ position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mini-switch .mini-switch-track{ position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s ease; pointer-events: none; }
.mini-switch .mini-switch-track::before{
  content: ""; position: absolute; width: .9rem; height: .9rem; left: .125rem; top: .125rem;
  background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.mini-switch input:checked + .mini-switch-track{ background: var(--good); }
.mini-switch input:checked + .mini-switch-track::before{ transform: translateX(.95rem); }
.mini-switch input:disabled{ cursor: default; }
.mini-switch input:disabled + .mini-switch-track{ opacity: .5; }
/* [NEW — 26 ก.ย. คุยกับ user "ทำทุกๆป๊อบอัพเลย"] โมดัลอื่นๆ ที่ไม่ใช่ MiniSwal (สลับบัญชี/ระดับสมาชิก/ออเดอร์ที่
   เปิดอยู่/เข้าสู่ระบบ-สมัครสมาชิก/ผูกบัญชี/โปรไฟล์/ประวัติ Token/กำไรแยกรายบัญชี ฯลฯ) ใช้คลาส .auth-card ร่วมกับ
   .auth-modal-card (นิยามใน brand.css) ซึ่งเป็นธีมสว่างของเว็บหลัก — แก้ที่ตัว .auth-card เฉยๆ ไม่ได้เพราะ
   partner.html เอาคลาสเดียวกันนี้ไปใช้กับการ์ดหน้าเพจจริง (ไม่ใช่ป๊อบอัพ) ด้วย จะกระทบวงกว้างเกินไป — สังเกตว่า
   .auth-card กับ .auth-modal-card มาคู่กันเฉพาะตอนเป็นโมดัลในไฟล์นี้เท่านั้น (partner.html ไม่เคยใช้คู่กัน) เลย
   override เฉพาะตอนใช้ร่วมกัน (.auth-card.auth-modal-card) ปลอดภัย ไม่กระทบที่อื่น — ใช้วิธี "ประกาศตัวแปร CSS
   ทับใหม่ในสโคปนี้" (ไม่ใช่ไล่เซ็ตสีทีละ element) เพราะทุก component ข้างในโมดัล (badge/ปุ่ม/input/เส้นคั่น ฯลฯ)
   อ้าง var(--ink)/var(--line)/var(--paper) ฯลฯ อยู่แล้วทั่วทั้งไฟล์ — พอทับตัวแปรที่ต้นสโคป ลูกทุกตัวจะรับสีใหม่ไป
   เองอัตโนมัติทั้งหมด ไม่ต้องไล่แก้ทีละจุด (สีที่ใช้ตรงกับพาเลตของ MiniSwal เป๊ะ ให้ป๊อบอัพทุกแบบในเว็บเข้าธีม
   เดียวกันหมด) */
.auth-card.auth-modal-card{
  --paper: rgba(255,255,255,.04);
  --paper-raised: rgba(255,255,255,.07);
  --ink: #f4f1e6;
  --ink-muted: #b9c2ba;
  --line: rgba(214,175,110,.22);
  --teal: #5eead4;
  --good: #4ade80;
  --bad: #f87171;
  --warn: #f0b84d;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), linear-gradient(160deg, #16261f, #0d1712 78%);
  border: 1px solid rgba(214,175,110,.24);
  color: var(--ink);
  box-shadow: 0 30px 70px -18px rgba(0,0,0,.65), 0 0 60px -22px rgba(214,175,110,.25),
    0 0 0 1px rgba(214,175,110,.08) inset, 0 1px 0 rgba(255,255,255,.05) inset;
}
.auth-card.auth-modal-card::before{
  background: linear-gradient(90deg, transparent, #f3d9a4, #bd7f2a 55%, #f3d9a4, transparent);
}
.auth-modal-close{ background: rgba(255,255,255,.07); color: var(--ink-muted); }
.auth-modal-close:hover{ background: rgba(214,175,110,.18); color: var(--ink); }
/* ===== [NEW — 2 ต.ค. คุยกับ user "การ์ดต่างๆ ปรับให้มันดูเหมือนกระจกสวยๆ พรีเมี่ยมๆ"] กระจก/Glassmorphism
   เฉพาะหน้าแดชบอร์ดลูกค้า (#dashboardView) เท่านั้น — ไม่แตะ .card/.news-cal-card ฯลฯ ที่ใช้ร่วมกับหน้าแอดมิน/
   พาร์ทเนอร์ ผ่าน brand.css เพราะจะกระทบวงกว้างเกินไป ใช้วิธีเดียวกับที่เคยทำกับ .auth-card.auth-modal-card
   (override เฉพาะสโคป ไม่แก้ต้นฉบับ)
   พื้นหลังเดิมของแดชบอร์ดเป็นสีครีมล้วน (var(--paper)) เรียบเกินไปจนกระจกโปร่งแสงจะไม่เห็นเอฟเฟกต์อะไรเลย —
   เพิ่มแสง blob สีทอง/เขียวมิ้นต์เบลอจางๆ ไว้ด้านหลังเนื้อหา (fixed, ไม่ขยับตามสกอล) ให้การ์ดกระจกด้านหน้ามีอะไรให้
   "ส่องทะลุ" เห็นเป็นประกาย ===== */
#dashboardView{ position: relative; isolation: isolate; }
#dashboardView::before{
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 8% -6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(34rem 28rem at 96% 18%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 70%),
    radial-gradient(30rem 26rem at 50% 115%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
@media (prefers-reduced-motion: no-preference){
  #dashboardView::before{ transition: opacity .3s ease; }
}
/* ---- การ์ดหลัก (.card: สถานะบัญชี/ตั้งค่า EA/แบนเนอร์ตลาดปิด ฯลฯ) → กระจกฝ้าโทนสว่าง ---- */
#dashboardView .card{
  background: linear-gradient(165deg, color-mix(in srgb, #ffffff 70%, var(--paper-raised)), color-mix(in srgb, #ffffff 38%, var(--paper-raised)));
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 20px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 1px rgba(255,255,255,.6) inset, 0 20px 44px -22px rgba(27,36,32,.22);
  position: relative; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
#dashboardView .card::before{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, white), transparent);
  opacity: .8;
}
#dashboardView .card:hover{
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 1px 1px rgba(255,255,255,.7) inset, 0 26px 54px -22px rgba(27,36,32,.3);
}
/* ---- การ์ดพิเศษสีเข้ม/ทอง (ยอด Token / กำไร / พาร์ทเนอร์ / แจ้งเตือนความเสี่ยง / ออเดอร์เปิด / ข่าว) →
   คงโทนสีเดิมของแต่ละใบไว้ (ไม่งั้นแยกไม่ออกว่าใบไหนคือใบไหน) แค่เติม "ผิวกระจก" ร่วม (ฝ้าเบลอด้านหลัง + ขอบ
   ประกายบางๆ ด้านบน + เงานุ่มขึ้น) ให้เข้าชุดเดียวกับการ์ดหลักด้านบน ---- */
#dashboardView .expiry-countdown-card,
#dashboardView .profit-summary-card,
#dashboardView .partner-promo-card,
#dashboardView .risk-card,
#dashboardView .open-pos-card,
#dashboardView .news-cal-card{
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 22px 48px -22px rgba(0,0,0,.4);
  transition: box-shadow .2s ease, border-color .2s ease;
}
#dashboardView .open-pos-card,
#dashboardView .news-cal-card{
  background: linear-gradient(165deg, color-mix(in srgb, #ffffff 65%, var(--paper)), color-mix(in srgb, #ffffff 30%, var(--paper)));
  border: 1px solid rgba(255,255,255,.5);
}
#dashboardView .open-pos-card:hover,
#dashboardView .news-cal-card:hover{ border-color: rgba(255,255,255,.7); }
/* ---- [NEW — 2 ต.ค. คุยกับ user "แถบ header ด้านบน...กระจกเงาๆ พรีเมี่ยมๆ หรูหรา ดูแพง"] แถบเมนูบนสุด
   เดิมใช้ backdrop-blur ของ Tailwind อยู่แล้ว (blur เบาๆ) แต่สีพื้นเรียบแบนเดียว ไม่มีมิติ/ประกายเหมือนกระจกจริง —
   ทำเป็นกระจกฝ้าหรูแบบเดียวกับการ์ด: ไล่เฉดขาวโปร่งแสง + blur/saturate แรงขึ้น + เส้นประกายทองบางๆ ไล่สีที่ขอบล่าง
   (แทนเส้น border-b ทึบเดิม) + เงานุ่มลอยเหนือเนื้อหา ให้ดูเหมือนแผ่นกระจกวางลอยอยู่เหนือหน้าเว็บจริงๆ ---- */
#dashHeader{
  border-bottom: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, #ffffff 72%, var(--paper)), color-mix(in srgb, #ffffff 46%, var(--paper))) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -26px rgba(27,36,32,.35);
  position: sticky; /* [เผื่อ inline style ด้านบนถูกลบในอนาคต] */
}
#dashHeader::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 75%, white) 20%, color-mix(in srgb, var(--teal) 60%, white) 80%, transparent);
  opacity: .85;
}
#dashHeader .btn-outline{
  background: rgba(255,255,255,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,.6);
}
#dashHeader .btn-outline:hover{ background: rgba(255,255,255,.55); }
#dashHeader .btn-primary{ box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
/* [NEW — 2 ต.ค. คุยกับ user "ดึงหน้าจอค้างให้รีเฟรช"] Pull-to-Refresh เอง — ต้องทำเองเพราะ:
   1) เปิดจากไอคอนหน้าจอโฮม (standalone PWA — ดู manifest.json) ไม่มี browser chrome ให้ลากรีเฟรชแบบ native เลย
   2) หน้านี้มี element ที่เลื่อน/สไลด์แนวนอนได้เอง (การ์ดสลับบัญชี) เบราว์เซอร์บางตัวเลยปิด native pull-to-refresh ไปด้วย
   ตัวชี้วัดอยู่ fixed เหนือสุดจอ ซ่อนไว้ด้วย translateY ติดลบ ให้ JS (initPullToRefresh ท้ายไฟล์) เลื่อนโชว์ตามระยะที่ลาก */
#pullRefreshIndicator{
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -60px);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card-bg, #fff); box-shadow: 0 4px 14px -4px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; transition: transform .15s ease-out, opacity .15s ease-out;
  opacity: 0; pointer-events: none;
}
#pullRefreshIndicator svg{ width: 20px; height: 20px; transition: transform .1s linear; }
#pullRefreshIndicator.spinning svg{ animation: pullRefreshSpin .7s linear infinite; }
@keyframes pullRefreshSpin{ to{ transform: rotate(360deg); } }
/* [NEW — 5 ต.ค. คุยกับ user "ตัวใหญ่ไม่สวยกินพื้นที่ เอาไปไว้ข้างๆ รองรับ MT5 ทุกโบรกเกอร์ดีกว่า"] ชิป "ฟรี" เด่นกว่า
   ชิปอื่นเล็กน้อย (ขอบ/พื้นหลังโทนเขียว) แต่ยังอยู่ในขนาด/แถวเดียวกับชิปที่เหลือ ไม่กินพื้นที่เหมือนป้ายใหญ่รอบก่อน */
.auth-chip.is-free{
  background: rgba(111,217,160,.14); border-color: rgba(111,217,160,.5);
}
.auth-chip.is-free b{ color: var(--good, #6fd9a0); font-weight: 700; }
/* [NEW — 7 ต.ค.] B1 แถบปิดกำไรล่าสุด + B2 เครื่องคิดผลย้อนหลัง (หน้าแรกก่อนล็อกอิน พื้นหลังเข้ม) */
.live-ticker{display:flex;align-items:center;gap:.6rem;margin-top:.3rem;padding:.45rem .55rem .45rem .45rem;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);max-width:100%;overflow:hidden}
.live-ticker-badge{flex:none;display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  color:#7ee2a8;padding:.2rem .55rem;border-radius:999px;background:rgba(126,226,168,.12)}
.live-ticker-badge i{width:7px;height:7px;border-radius:50%;background:#7ee2a8;box-shadow:0 0 0 0 rgba(126,226,168,.6);animation:lt-pulse 1.6s infinite}
@keyframes lt-pulse{0%{box-shadow:0 0 0 0 rgba(126,226,168,.55)}100%{box-shadow:0 0 0 8px rgba(126,226,168,0)}}
.live-ticker-viewport{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.live-ticker-track{display:inline-flex;gap:1.6rem;white-space:nowrap;animation:lt-scroll var(--lt-dur,40s) linear infinite;will-change:transform}
.live-ticker:hover .live-ticker-track{animation-play-state:paused}
.live-ticker-item{font-size:.8rem;color:var(--sidebar-ink-muted)}
.live-ticker-item b{color:var(--sidebar-ink);font-family:'IBM Plex Mono',monospace;font-weight:600}
.live-ticker-item .p{color:#7ee2a8;font-family:'IBM Plex Mono',monospace;font-weight:700}
@keyframes lt-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.live-ticker-track{animation:none}}
/* [FIX 7 ต.ค.] แถบวิ่งยาวดันคอลัมน์ hero กว้างเกินจอ → มาสคอตปลาหลุดออกนอกจอ: ให้ track ลอย (absolute) ไม่นับความกว้าง */
.live-ticker{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.live-ticker-viewport{position:relative;height:1.35rem;contain:inline-size}
.live-ticker-track{position:absolute;left:0;top:50%;margin-top:-.65rem;line-height:1.3rem}
.return-calc{display:flex;flex-direction:column;gap:1rem;background:rgba(248,249,244,.06);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:1.5rem}
.rc-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem}
.rc-field{display:flex;flex-direction:column;gap:.3rem;font-size:.75rem;color:var(--sidebar-ink-muted)}
.rc-field input,.rc-field select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:var(--sidebar-ink);border-radius:10px;padding:.5rem .7rem;font-size:1rem;min-width:9rem;font-family:'IBM Plex Mono',monospace}
.rc-field select{font-family:inherit;font-size:.9rem;color-scheme:dark}
.rc-field select option{background:#16241e;color:#eef2ea}
.rc-presets{display:flex;flex-wrap:wrap;gap:.4rem}
.rc-presets button{font-size:.78rem;padding:.4rem .7rem;border-radius:999px;border:1px solid rgba(230,181,103,.4);background:rgba(230,181,103,.08);color:#f0d49e;cursor:pointer;font-family:'IBM Plex Mono',monospace}
.rc-presets button:hover{background:rgba(230,181,103,.18)}
.rc-result{padding:1rem 1.1rem;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)}
.rc-big{font-family:'Orbitron','Chakra Petch',sans-serif;font-size:2rem;font-weight:700;color:#efc677}
.rc-big.neg{color:#ff9a8a}
.rc-sub{font-size:.85rem;color:var(--sidebar-ink);margin-top:.25rem}
.rc-mini{font-size:.75rem;color:var(--sidebar-ink-muted);margin-top:.35rem}
.rc-disc{font-size:.72rem;color:var(--sidebar-ink-muted);opacity:.85;line-height:1.6}
/* [NEW — 7 ต.ค.] A5 ภาวะตลาดวันนี้ / A3 ความสำเร็จ / A2 การ์ดแชร์ผล */
.mkt-today{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem 1rem;border-radius:14px;background:var(--paper-raised);border:1px solid var(--line)}
.mkt-today-icon{font-size:1.15rem;line-height:1.4}
.mkt-today-title{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--ink-muted);text-transform:uppercase}
.mkt-today-lines{display:flex;flex-direction:column;gap:.15rem;margin-top:.15rem;font-size:.86rem;color:var(--ink);line-height:1.5}
.mkt-today-lines .now{font-weight:600}
.mkt-today-body{flex:1;min-width:0}
.mkt-today-x{flex:none;margin:-.3rem -.4rem 0 0;width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--ink-muted);font-size:1.15rem;line-height:1;cursor:pointer}
.mkt-today-x:hover{background:var(--line);color:var(--ink)}
.mkt-today-lines .note{font-size:.72rem;color:var(--ink-muted)}
/* ================== [NEW — 8 ต.ค. คุยกับ user "กล่องสุ่มอลังการ เด้งกลางจอ เขย่า ว้าวๆ"] เอฟเฟกต์เปิดกล่อง ==================
   [แก้ 8 ต.ค. รอบ 2] กล่องพรีเมียม (SVG ดำเขียวเคลือบเงา ขอบทอง ริบบิ้นทองเมทัลลิก) + ต้องแตะกล่องก่อนถึงเปิด + ปุ่ม ✕ */
.gbx-ov{position:fixed;inset:0;z-index:10050;/* [8 ต.ค.] เหนือป๊อปอัพแจ้งเตือน (mswal z 9999) — สมาชิกใหม่เห็นกล่องต้อนรับก่อน แล้วค่อยเห็นประกาศอื่น */display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;
  background:radial-gradient(circle at 50% 45%,rgba(43,92,83,.97),rgba(5,14,12,.99) 70%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s ease;overflow:hidden}
.gbx-ov.on{opacity:1}
.gbx-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#fff;font-size:1.1rem;cursor:pointer;z-index:3;transition:background .2s,opacity .2s}
.gbx-x:hover{background:rgba(255,255,255,.18)}
.gbx-ov.charging .gbx-x,.gbx-ov.shake .gbx-x{opacity:0;pointer-events:none}
.gbx-title{margin-bottom:2.6rem;color:#f3d08f;font-weight:700;font-size:1.1rem;letter-spacing:.04em;text-shadow:0 2px 12px rgba(0,0,0,.4);min-height:1.4em;text-align:center}
.gbx-sub{color:rgba(255,255,255,.85);font-size:.88rem;margin:-2.2rem 0 1.6rem;text-align:center;max-width:320px}
.gbx-hint{color:rgba(255,255,255,.8);font-size:.85rem;margin-top:-.4rem;animation:gbxBlink 1.4s ease-in-out infinite}
.gbx-ov.shake .gbx-hint,.gbx-ov.charging .gbx-hint,.gbx-ov.open .gbx-hint{visibility:hidden}
.gbx-stage{position:relative;width:260px;height:260px;display:flex;align-items:flex-end;justify-content:center}
.gbx-rays{position:absolute;left:50%;top:50%;width:680px;height:680px;margin:-340px 0 0 -340px;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,120,.3) 0 9deg,transparent 9deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 16%,transparent 62%);mask:radial-gradient(circle,#000 16%,transparent 62%);transition:opacity .4s ease}
.gbx-ov.open .gbx-rays{opacity:1;animation:gbxSpin 10s linear infinite}
.gbx-glow{position:absolute;left:50%;top:58%;width:280px;height:280px;margin:-140px 0 0 -140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,220,130,.7),rgba(255,180,60,0) 65%);opacity:.3;transition:opacity .3s ease,transform .3s ease}
.gbx-ov.idle .gbx-glow{animation:gbxPulse 1.6s ease-in-out infinite alternate}
.gbx-ov.charging .gbx-glow{opacity:.75;animation:gbxPulse .35s ease-in-out infinite alternate}
.gbx-ov.open .gbx-glow{opacity:1;transform:scale(1.6)}
.gbx-rays,.gbx-glow,.gbx-ring{pointer-events:none}
.gbx-ring{position:absolute;left:50%;bottom:6px;width:210px;height:44px;margin-left:-105px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,210,110,.45),rgba(255,210,110,0) 70%);filter:blur(2px)}
.gbx-box{position:relative;width:210px;height:230px;transform-origin:50% 100%;cursor:pointer;animation:gbxDrop .8s cubic-bezier(.2,1.4,.4,1) both;
  filter:drop-shadow(0 0 22px rgba(246,210,122,.45)) drop-shadow(0 22px 26px rgba(0,0,0,.55))}
.gbx-ov.idle .gbx-box{animation:gbxDrop .8s cubic-bezier(.2,1.4,.4,1) both,gbxFloat 2.4s .8s ease-in-out infinite}
.gbx-ov.idle .gbx-box:hover{filter:drop-shadow(0 0 30px rgba(246,210,122,.7)) drop-shadow(0 22px 26px rgba(0,0,0,.55)) brightness(1.1)}
.gbx-ov.shake .gbx-box{animation:gbxShake .3s ease-in-out infinite}
.gbx-ov.charging .gbx-box{animation:gbxShakeHard .14s linear infinite}
.gbx-ov.open .gbx-box{animation:gbxPop .5s ease-out both;cursor:default}
.gbx-box svg{width:100%;height:100%;overflow:visible}
.gbx-lidg{transform-box:fill-box;transform-origin:20% 100%}
.gbx-ov.open .gbx-lidg{animation:gbxLid .75s cubic-bezier(.3,1.2,.5,1) forwards}
.gbx-sheen{animation:gbxSheen 2.8s ease-in-out infinite}
.gbx-twk{transform-box:fill-box;transform-origin:center;animation:gbxTwinkle 1.8s ease-in-out infinite}
.gbx-twk:nth-of-type(2){animation-delay:.5s}.gbx-twk:nth-of-type(3){animation-delay:1s}.gbx-twk:nth-of-type(4){animation-delay:1.4s}
.gbx-result{position:absolute;left:50%;bottom:30px;transform:translateX(-50%) scale(.3);opacity:0;text-align:center;pointer-events:none;white-space:nowrap}
.gbx-ov.open .gbx-result{animation:gbxRise .7s .2s cubic-bezier(.2,1.5,.4,1) forwards}
.gbx-num{font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:4.4rem;line-height:1;color:#ffe08a;text-shadow:0 0 26px rgba(255,200,80,.95),0 4px 0 #b07a2a}
.gbx-unit{color:#fff;font-weight:700;font-size:.95rem;margin-top:.2rem}
.gbx-btn{position:relative;z-index:3;opacity:0;transform:translateY(10px);transition:all .3s ease;border:none;border-radius:999px;padding:.75rem 2.2rem;font-weight:800;font-size:1rem;
  font-family:inherit;cursor:pointer;background:linear-gradient(90deg,#f6d27a,#e2a93b);color:#241a08;box-shadow:0 10px 24px -8px rgba(226,169,59,.8);pointer-events:none}
.gbx-ov.done .gbx-btn{opacity:1;transform:none;pointer-events:auto}
.gbx-p{position:absolute;left:50%;top:52%;width:12px;height:12px;border-radius:50%;pointer-events:none;animation:gbxBurst var(--t,1.1s) cubic-bezier(.15,.8,.3,1) forwards}
.gbx-p.coin{width:18px;height:18px;background:radial-gradient(circle at 35% 35%,#fff3c4,#f2c14e 45%,#b8862b);box-shadow:0 0 6px rgba(255,210,100,.8)}
.gbx-p.star{width:10px;height:10px;background:#fff;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes gbxSpin{to{transform:rotate(360deg)}}
@keyframes gbxPulse{to{transform:scale(1.15)}}
@keyframes gbxBlink{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes gbxDrop{0%{transform:translateY(-120vh) rotate(-12deg)}70%{transform:translateY(0) scale(1.08,.9)}100%{transform:none}}
@keyframes gbxFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes gbxShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes gbxShakeHard{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-4px,-2px) rotate(-7deg)}50%{transform:translate(3px,1px) rotate(6deg)}75%{transform:translate(-2px,-3px) rotate(-4deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes gbxPop{0%{transform:scale(1.15,.85)}60%{transform:scale(.95,1.08)}100%{transform:none}}
@keyframes gbxLid{0%{transform:none}100%{transform:translate(-70px,-170px) rotate(-55deg);opacity:0}}
@keyframes gbxRise{to{transform:translateX(-50%) translateY(-170px) scale(1);opacity:1}}
@keyframes gbxSheen{0%,55%{transform:translateX(-160px)}100%{transform:translateX(220px)}}
@keyframes gbxTwinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}
@keyframes gbxBurst{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.gbx-ov.idle .gbx-box,.gbx-rays,.gbx-glow,.gbx-sheen,.gbx-twk{animation:none!important}}
/* ================== [NEW 14 ต.ค. คุยกับ user "กล่องของขวัญวันเกิด อลังการ หรูหรา"] ธีมวันเกิด (ต่อยอด .gbx-ov) ================== */
.gbx-ov.gbx-bday{gap:.7rem;background:radial-gradient(ellipse at 50% 32%,#1f5246 0%,#0b2420 42%,#030807 100%)}
.gbx-bday::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 120%,rgba(246,210,122,.22),transparent 55%),radial-gradient(circle at 50% -10%,rgba(246,210,122,.18),transparent 45%)}
.bd-beam{position:absolute;top:-20%;width:46vw;max-width:520px;height:140%;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,230,160,.38),rgba(255,230,160,0) 75%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);filter:blur(6px);animation:bdBeam 6s ease-in-out infinite alternate}
.bd-beam.l{left:-8%;transform-origin:50% 0;transform:rotate(-24deg)}
.bd-beam.r{right:-8%;transform-origin:50% 0;transform:rotate(24deg);animation-delay:-3s}
.bd-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff6d6;box-shadow:0 0 6px #ffe7a3;pointer-events:none;animation:gbxTwinkle var(--d,2.4s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.bd-bal{position:absolute;bottom:-160px;width:54px;height:66px;border-radius:50% 50% 48% 48%/55% 55% 45% 45%;pointer-events:none;opacity:.9;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 22%),var(--c);box-shadow:inset -8px -10px 18px rgba(0,0,0,.28),0 0 18px rgba(246,210,122,.25);animation:bdRise var(--t,14s) linear infinite;animation-delay:var(--dl,0s)}
.bd-bal::after{content:'';position:absolute;left:50%;top:100%;width:1px;height:70px;background:linear-gradient(rgba(255,240,200,.7),rgba(255,240,200,0))}
.bd-bal::before{content:'';position:absolute;left:50%;top:97%;margin-left:-4px;border:4px solid transparent;border-bottom-color:var(--c)}
.gbx-bday .gbx-title{font-size:2rem;line-height:1.25;margin-bottom:.4rem;font-weight:800;letter-spacing:.02em;
  background:linear-gradient(100deg,#b8862b 0%,#fff3c4 22%,#f6d27a 40%,#fffbe8 50%,#e2a93b 62%,#fff3c4 80%,#b8862b 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 14px rgba(246,190,90,.45));animation:bdShimmer 3.2s linear infinite}
.gbx-bday .gbx-sub{margin:0 0 1.4rem;font-size:.95rem;color:rgba(255,246,220,.92);letter-spacing:.02em}
.gbx-bday .gbx-sub b{color:#f6d27a}
.gbx-bday .gbx-title,.gbx-bday .gbx-sub,.gbx-bday .bd-crest,.gbx-bday .gbx-stage,.gbx-bday .gbx-hint{position:relative;z-index:2}
.bd-crest{display:block;margin:0 auto .2rem;font-size:.7rem;letter-spacing:.42em;color:#f6d27a;opacity:.85;text-align:center}
.bd-crest::before,.bd-crest::after{content:'';display:inline-block;width:38px;height:1px;margin:0 .6rem;vertical-align:middle;background:linear-gradient(90deg,transparent,#f6d27a)}
.bd-crest::after{background:linear-gradient(90deg,#f6d27a,transparent)}
.gbx-bday .gbx-num{font-size:4.8rem}
.gbx-bday .gbx-unit{color:#fff3c4;letter-spacing:.06em}
.bd-card{position:relative;z-index:3;max-width:330px;margin:-.4rem 1rem 0;padding:.75rem 1.1rem;border-radius:16px;text-align:center;font-size:.88rem;line-height:1.55;color:#fff6dc;
  background:linear-gradient(160deg,rgba(28,70,60,.94),rgba(10,32,28,.94));border:1px solid rgba(246,210,122,.5);box-shadow:0 10px 30px -12px rgba(0,0,0,.6);opacity:0;transform:translateY(8px);transition:all .5s ease}
.bd-card small{display:block;margin-top:.35rem;color:#f6d27a;font-size:.75rem;letter-spacing:.08em}
.gbx-ov.done .bd-card{opacity:1;transform:none}
.bd-fw{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;background:var(--c);box-shadow:0 0 10px var(--c);animation:bdFw var(--t,1.3s) cubic-bezier(.12,.75,.3,1) forwards}
@keyframes bdRise{0%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-60vh) rotate(4deg)}100%{transform:translateY(-125vh) rotate(-3deg)}}
@keyframes bdBeam{0%{opacity:.25}100%{opacity:.6}}
@keyframes bdShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes bdFw{0%{transform:translate(0,0) scale(1);opacity:1}80%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 40px)) scale(.4);opacity:0}}
@media (max-width:480px){.gbx-bday .gbx-title{font-size:1.6rem}.bd-bal{width:42px;height:52px}.gbx-bday .gbx-num{font-size:4rem}}
@media (max-height:760px){.gbx-bday .gbx-stage{height:220px}.gbx-bday .gbx-sub{margin-bottom:.8rem}.bd-card{font-size:.82rem;padding:.6rem .9rem}}
@media (prefers-reduced-motion:reduce){.bd-bal,.bd-beam,.bd-star,.gbx-bday .gbx-title{animation:none!important}}
/* [15 ต.ค. คุยกับ user "กิจกรรมคริสต์มาส"] หิมะตก + แบนเนอร์โปรคริสต์มาส (เปิด/ปิด+ช่วงวันจากแอดมิน) */
#festFx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
/* [15 ต.ค. user "เปิดหน้าภารกิจทิ้งไว้ มือถือร้อน"] หน้าภารกิจเปิดทับเต็มจอ → หยุดแอนิเมชันของแดชบอร์ดข้างหลัง (มองไม่เห็นอยู่แล้ว)
   วัดจริง: งานวาดจอลดจาก ~390 → ~5 ครั้ง/5 วิ · หน้าภารกิจ/เกม/กล่องสุ่ม (อยู่นอก #dashboardView หรืออยู่ใน #missionsSection) ยังเล่นปกติ */
body.msn-open #dashboardView *:not(#missionsSection):not(#missionsSection *),body.msn-open #dashboardView *:not(#missionsSection):not(#missionsSection *)::before,body.msn-open #dashboardView *:not(#missionsSection):not(#missionsSection *)::after,body.msn-open #promoFab,body.msn-open #promoFab *,body.msn-open #promoFab *::before,body.msn-open #promoFab *::after,body.msn-open #fabChatBtn *,body.msn-open #fabChatBtn *::before,body.msn-open #fabChatBtn *::after,body.msn-open #festRibbon{animation-play-state:paused!important}
body.msn-open #festFx{visibility:hidden}
/* [15 ต.ค.] ไม่ได้แตะจอ 20 วิ (เปิดทิ้งไว้) → หยุดแอนิเมชันตกแต่งทั้งหน้า + หิมะเทศกาล · แตะ/เลื่อนจอ = กลับมาเคลื่อนไหวทันที
   การ์ดภารกิจที่เลื่อนพ้นจอ → หยุดเฉพาะการ์ดนั้น */
body.ui-idle #dashboardView *,body.ui-idle #dashboardView *::before,body.ui-idle #dashboardView *::after,body.ui-idle #festRibbon,
#missionsBody .msn-off,#missionsBody .msn-off *,#missionsBody .msn-off::before,#missionsBody .msn-off::after,#missionsBody .msn-off *::before,#missionsBody .msn-off *::after{animation-play-state:paused!important}
body.ui-idle #festFx{visibility:hidden}
/* [31 ต.ค.] มือถือ: แอนิเมชันวนตลอดทั้งหน้า → เล่น 2 รอบแล้วหยุด แตะจอ = เล่นใหม่ (ดู motionBudget ใน JS · กฎข้อ 69) */
/* [30 ต.ค. user "หน้าแดชบอร์ดเครื่องร้อน ภาพสั่นๆ สโลๆ" · กฎข้อ 63] วัดจริงด้วยเครื่องทดสอบแล้วแก้ตามนี้:
   - การ์ดที่เลื่อนพ้นจอ (.dash-ofs) → หยุดแอนิเมชันในการ์ดนั้น (เดิมวงแหวนกรอบรูป/ไฟกระพริบ/แถบสแกนจอโฮโลแกรม วิ่งต่อแม้มองไม่เห็น)
   - หัวเว็บพื้นทึบอยู่แล้ว → เบลอฉากหลัง (backdrop-filter) ไม่มีผลกับภาพ แต่ทำให้เลื่อนจอหน่วง → ปิด
   - แชตตอนปิดอยู่ (โปร่งใส) ไม่ต้องเบลอฉากหลัง
   - มือถือ: เงา drop-shadow บนวิดีโอตัวละคร/สัตว์เลี้ยงในห้อง = กรองภาพใหม่ทุกเฟรมของวิดีโอ → ปิด (มีเงาพื้นใต้เท้าอยู่แล้ว) */
.dash-ofs,.dash-ofs *,.dash-ofs::before,.dash-ofs::after,.dash-ofs *::before,.dash-ofs *::after{animation-play-state:paused!important}
#dashHeader{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.chat-panel:not(.is-open){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (pointer:coarse){.rbr.hero-mode .rbr-bot.hero .rbr-fig img,.rbr.hero-mode .rbr-bot.hero .rbr-fig video,.rbr-bud>.bi{filter:none}}
#festRibbon{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;pointer-events:none;background-size:200% 100%!important;animation:festRib 6s linear infinite}
@keyframes festRib{to{background-position:-200% 0}}
.xm-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:.75rem;padding:.8rem .95rem;border-radius:16px;cursor:pointer;color:#fff6f0;margin:0 0 .9rem;
  border:1.5px solid rgba(246,210,122,.6);background:linear-gradient(120deg,#7d1020,#b3172b 45%,#0f4b37);box-shadow:0 14px 28px -16px rgba(80,0,10,.7)}
.xm-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.55) 0 1.4px,transparent 2px) 0 0/34px 34px;opacity:.35;animation:evStars 7s linear infinite;pointer-events:none}
.xm-banner .xm-cd{display:inline-flex;align-items:center;margin-left:.45rem;padding:.08rem .55rem;border-radius:999px;font-size:.72rem;font-weight:800;vertical-align:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.xm-banner .xm-cd.urgent{background:#e11d48;border-color:#fecdd3;animation:xmCdPulse 1.2s ease-in-out infinite}
@keyframes xmCdPulse{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.7)}50%{box-shadow:0 0 0 6px rgba(225,29,72,0)}}
@media (max-width:640px){.xm-banner .xm-cd{display:flex;width:max-content;margin:.25rem 0 0}}
@media (prefers-reduced-motion:reduce){.xm-banner .xm-cd.urgent{animation:none}}
.xm-banner .ic{font-size:1.9rem;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));animation:evBob 2.6s ease-in-out infinite}
.xm-banner .tx{flex:1;min-width:0;font-size:.86rem;line-height:1.5;position:relative}.xm-banner .tx b{color:#ffe08a}.xm-banner .tx small{display:block;opacity:.85;font-size:.74rem}
.xm-banner .go{position:relative;flex:none;border:none;border-radius:12px;padding:.5rem .85rem;font-family:inherit;font-weight:800;font-size:.8rem;color:#3a1600;background:linear-gradient(135deg,#fff1b8,#f2c14e 50%,#d29a2e);box-shadow:0 0 14px rgba(255,200,90,.5);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.xm-banner::before,.xm-banner .ic,#festRibbon{animation:none}}
/* [15 ต.ค. user "เปลี่ยน Theme หน้าแดชบอร์ดตามเทศกาลด้วย สวยงาม"] โทนสีทั้งหน้าตามเทศกาล (html[data-fest]) — เปลี่ยนแค่
   พื้นหลัง/แถบหัว/เมนูซ้าย/การ์ดเข้ม/ปุ่มลอย · ตัวหนังสือ-ตัวเลขยังสีเดิม อ่านง่ายเหมือนเดิม · CSS ล้วน ไม่เพิ่มภาระเครื่อง */
html[data-fest=christmas]{--fz-a:#c8102e;--fz-b:#1f8a52;--fz-c:#f6d27a;--fz-d1:#3d0c16;--fz-d2:#0d2a1d}
html[data-fest=newyear]{--fz-a:#7c4dff;--fz-b:#e7b84a;--fz-c:#5ad1e6;--fz-d1:#1a1446;--fz-d2:#0c0f2a}
html[data-fest=chinese]{--fz-a:#d4252b;--fz-b:#f2b632;--fz-c:#ffd86b;--fz-d1:#4d0a0d;--fz-d2:#2a0507}
html[data-fest=valentine]{--fz-a:#e0457b;--fz-b:#ff9ab8;--fz-c:#ffd1df;--fz-d1:#4a1030;--fz-d2:#26081a}
html[data-fest=songkran]{--fz-a:#0ea5e9;--fz-b:#2dd4bf;--fz-c:#a5f3fc;--fz-d1:#0b3a5c;--fz-d2:#062236}
html[data-fest=halloween]{--fz-a:#f97316;--fz-b:#8b5cf6;--fz-c:#fbbf24;--fz-d1:#2b1042;--fz-d2:#140a20}
html[data-fest=loykrathong]{--fz-a:#f5b942;--fz-b:#6d7bf0;--fz-c:#ffd98a;--fz-d1:#13205a;--fz-d2:#0a1233}
html[data-fest]:not([data-fest=""]) body{background:
  radial-gradient(1100px 620px at 105% -8%,color-mix(in srgb,var(--fz-a) 13%,transparent),transparent 62%),
  radial-gradient(950px 620px at -8% 108%,color-mix(in srgb,var(--fz-b) 13%,transparent),transparent 60%),
  var(--paper) fixed}
html[data-fest]:not([data-fest=""]) #dashHeader{background:linear-gradient(180deg,color-mix(in srgb,var(--fz-a) 7%,#fff),color-mix(in srgb,var(--fz-a) 4%,var(--paper)))!important}
html[data-fest]:not([data-fest=""]) #dashHeader::after{height:2px;opacity:1;background:linear-gradient(90deg,transparent,var(--fz-a) 18%,var(--fz-c) 50%,var(--fz-b) 82%,transparent)}
/* สายไฟประดับใต้แถบหัว (2 สีสลับ กะพริบช้าๆ) */
html[data-fest]:not([data-fest=""]) #dashHeader::before{content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;pointer-events:none;
  background:radial-gradient(circle at 50% 30%,var(--fz-a) 0 2.6px,transparent 3.2px) 0 0/34px 7px repeat-x,
             radial-gradient(circle at 50% 30%,var(--fz-c) 0 2.6px,transparent 3.2px) 17px 0/34px 7px repeat-x;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--fz-c) 70%,transparent));animation:fzTw 2.4s ease-in-out infinite alternate}
@keyframes fzTw{from{opacity:.55}to{opacity:1}}
html[data-fest]:not([data-fest=""]) .dash-sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--fz-a) 7%,var(--paper)),color-mix(in srgb,var(--fz-b) 6%,var(--paper)));
  border-right-color:color-mix(in srgb,var(--fz-a) 22%,var(--line))}
html[data-fest]:not([data-fest=""]) .dash-sidebar-item:hover{background:color-mix(in srgb,var(--fz-a) 10%,#fff)}
html[data-fest]:not([data-fest=""]) #tokenBalanceSection{background:
  radial-gradient(120% 140% at 6% 50%,rgba(246,210,122,.13) 0%,rgba(246,210,122,0) 38%),
  radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--fz-a) 30%,transparent) 0%,transparent 50%),
  radial-gradient(70% 110% at 85% 120%,color-mix(in srgb,var(--fz-b) 22%,transparent) 0%,transparent 55%),
  linear-gradient(135deg,var(--fz-d1) 0%,color-mix(in srgb,var(--fz-d1) 45%,var(--fz-d2)) 52%,var(--fz-d2) 100%)}
html[data-fest]:not([data-fest=""]) #tokenBalanceSection::after{background:linear-gradient(115deg,var(--fz-c) 0%,color-mix(in srgb,var(--fz-a) 30%,transparent) 30%,color-mix(in srgb,var(--fz-b) 25%,transparent) 60%,var(--fz-c) 100%)}
html[data-fest]:not([data-fest=""]) .profit-summary-card{background:
  radial-gradient(90% 130% at 100% 0%,color-mix(in srgb,var(--fz-a) 26%,transparent) 0%,transparent 55%),
  radial-gradient(130% 160% at 0% 0%,color-mix(in srgb,var(--fz-d1) 80%,#1f3a34) 0%,var(--fz-d2) 70%)}
html[data-fest]:not([data-fest=""]) .fab-chat{background:color-mix(in srgb,var(--fz-d1) 94%,transparent);border-color:color-mix(in srgb,var(--fz-c) 40%,transparent)}
html[data-fest]:not([data-fest=""]) .pkg-float-btn{box-shadow:0 0 0 3px color-mix(in srgb,var(--fz-a) 55%,transparent),0 0 18px color-mix(in srgb,var(--fz-a) 45%,transparent),0 14px 30px -10px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){html[data-fest] #dashHeader::before{animation:none}}
/* [15 ต.ค. user "ปรับการ์ดความสำเร็จ + ภารกิจรับโทเคน ให้เข้ากับเทศกาลที่เปิดใช้"] ใช้สีชุดเดียวกับธีมเทศกาล (--fz-*) */
html[data-fest]:not([data-fest=""]) .ach-card{--ach-g1:var(--fz-a);--ach-g2:color-mix(in srgb,var(--fz-a) 70%,#000);--ach-gold:var(--fz-c);
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--fz-a) 10%,transparent),transparent 55%),
    radial-gradient(90% 80% at 0% 100%,color-mix(in srgb,var(--fz-b) 9%,transparent),transparent 60%),var(--paper-raised);
  border-color:color-mix(in srgb,var(--fz-a) 35%,var(--line));box-shadow:0 10px 28px -18px color-mix(in srgb,var(--fz-a) 60%,transparent)}
html[data-fest]:not([data-fest=""]) .ach-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--fz-a),var(--fz-c) 50%,var(--fz-b))}
html[data-fest]:not([data-fest=""]) .ach-card::after{position:absolute;right:86px;top:6px;font-size:2.6rem;line-height:1;opacity:.14;pointer-events:none;transform:rotate(-12deg)}
html[data-fest=halloween] .ach-card::after{content:"";width:3.4rem;height:3.4rem;opacity:.3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='1'%3E%3Cpath d='M40 18 Q38 10 44 6' fill='none' stroke='%234e7d2f' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M44 10 Q54 8 56 16 Q48 16 44 10 Z' fill='%236aa84f'/%3E%3Cellipse cx='26' cy='44' rx='16' ry='24' fill='%23f57c00'/%3E%3Cellipse cx='54' cy='44' rx='16' ry='24' fill='%23f57c00'/%3E%3Cellipse cx='40' cy='44' rx='16' ry='26' fill='%23fb8c00' stroke='%23e65100' stroke-width='1.2'/%3E%3Cpath d='M26 22 Q20 44 26 66 M54 22 Q60 44 54 66' fill='none' stroke='%23e65100' stroke-width='1.2'/%3E%3Cpath d='M24 38 L32 32 L33 41 Z M56 38 L48 32 L47 41 Z' fill='%234a1a00'/%3E%3Cpath d='M37 46 L40 41 L43 46 Z' fill='%234a1a00'/%3E%3Cpath d='M22 52 Q40 66 58 52 L54 54 L51 51 L47 56 L43 52 L40 57 L37 52 L33 56 L29 51 L26 54 Z' fill='%234a1a00'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
html[data-fest=christmas] .ach-card::after{content:"";width:3.4rem;height:3.4rem;opacity:.3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='1'%3E%3Crect x='35' y='62' width='10' height='11' rx='1.5' fill='%237a4a24'/%3E%3Cpath d='M40 10 L56 32 H48 L62 48 H52 L66 64 H14 L28 48 H18 L32 32 H24 Z' fill='%232e8b4e' stroke='%231d6338' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M26 44 Q40 50 54 42 M22 58 Q40 64 58 56' fill='none' stroke='%23f6d27a' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='33' cy='37' r='2.6' fill='%23e53935'/%3E%3Ccircle cx='47' cy='51' r='2.6' fill='%23e53935'/%3E%3Ccircle cx='30' cy='54' r='2.4' fill='%2342a5f5'/%3E%3Ccircle cx='50' cy='36' r='2.2' fill='%2342a5f5'/%3E%3Ccircle cx='41' cy='45' r='2.2' fill='%23ffca28'/%3E%3Ccircle cx='56' cy='59' r='2.2' fill='%23ffca28'/%3E%3Ccircle cx='25' cy='61' r='2.2' fill='%23e53935'/%3E%3Cpath d='M40 3 L42.4 8.2 L48 8.6 L43.7 12.2 L45.1 17.6 L40 14.6 L34.9 17.6 L36.3 12.2 L32 8.6 L37.6 8.2 Z' fill='%23ffd54f' stroke='%23e0a800' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
html[data-fest=newyear] .ach-card::after{content:"";width:3.4rem;height:3.4rem;opacity:.3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='1'%3E%3Cg stroke-linecap='round' stroke-width='2.4'%3E%3Cg transform='translate%2830 28%29' stroke='%23f6d27a'%3E%3Cpath d='M0 -18V-9M0 18V9M-18 0H-9M18 0H9M-12.7 -12.7L-6.4 -6.4M12.7 12.7L6.4 6.4M-12.7 12.7L-6.4 6.4M12.7 -12.7L6.4 -6.4'/%3E%3C/g%3E%3Ccircle cx='30' cy='28' r='3' fill='%23fff3cf'/%3E%3Cg transform='translate%2856 46%29' stroke='%23ff6b9a'%3E%3Cpath d='M0 -14V-7M0 14V7M-14 0H-7M14 0H7M-10 -10L-5 -5M10 10L5 5M-10 10L-5 5M10 -10L5 -5'/%3E%3C/g%3E%3Ccircle cx='56' cy='46' r='2.4' fill='%23ffd1df'/%3E%3Cg transform='translate%2824 60%29' stroke='%237ee0ff' stroke-width='2'%3E%3Cpath d='M0 -10V-5M0 10V5M-10 0H-5M10 0H5M-7 -7L-3.5 -3.5M7 7L3.5 3.5M-7 7L-3.5 3.5M7 -7L3.5 -3.5'/%3E%3C/g%3E%3Ccircle cx='24' cy='60' r='2' fill='%23d6f7ff'/%3E%3Cpath d='M44 76 Q46 66 52 60' fill='none' stroke='%23c79bff' stroke-width='1.6' stroke-dasharray='2 3'/%3E%3C/g%3E%3Ccircle cx='62' cy='18' r='1.6' fill='%23fff3cf'/%3E%3Ccircle cx='12' cy='40' r='1.4' fill='%23fff3cf'/%3E%3Ccircle cx='68' cy='66' r='1.4' fill='%23fff3cf'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
html[data-fest=chinese] .ach-card::after{content:"";width:3.4rem;height:3.4rem;opacity:.3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='1'%3E%3Crect x='18' y='8' width='44' height='64' rx='5' fill='%23d32f2f' stroke='%239a1b1b' stroke-width='1.5'/%3E%3Cpath d='M18 13 Q40 34 62 13 V12 Q62 8 58 8 H22 Q18 8 18 12 Z' fill='%23b71c1c'/%3E%3Cpath d='M18 13 Q40 34 62 13' fill='none' stroke='%23f6c343' stroke-width='1.8'/%3E%3Ccircle cx='40' cy='26' r='7' fill='%23f6c343' stroke='%23c99a18' stroke-width='1.2'/%3E%3Crect x='37' y='23' width='6' height='6' fill='%23d32f2f'/%3E%3Ccircle cx='40' cy='50' r='11' fill='none' stroke='%23f6c343' stroke-width='2'/%3E%3Cpath d='M34 46 H46 M33 50 H47 M34 54 H46 M40 42 V58' stroke='%23f6c343' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M24 66 H56' stroke='%23f6c343' stroke-width='1.2' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
html[data-fest=valentine] .ach-card::after{content:"";width:3.4rem;height:3.4rem;opacity:.3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='1'%3E%3Cpath d='M40 70 C12 52 6 36 12 24 C18 12 34 12 40 24 C46 12 62 12 68 24 C74 36 68 52 40 70 Z' fill='%23e8335f' stroke='%23b81f45' stroke-width='1.5'/%3E%3Cpath d='M22 22 Q16 28 18 36' fill='none' stroke='%23ffc2d4' stroke-width='3' stroke-linecap='round' opacity='.8'/%3E%3Cpath d='M40 26 V68 M14 34 H66' stroke='%23ffd1df' stroke-width='4' opacity='.85'/%3E%3Cpath d='M40 26 Q30 14 26 20 Q24 26 40 26 Q50 14 54 20 Q56 26 40 26' fill='%23ff8fb1' stroke='%23d6336c' stroke-width='1.3'/%3E%3Ccircle cx='40' cy='26' r='2.6' fill='%23ffc2d4'/%3E%3Cpath d='M64 8 l1.6 3.4 3.6.4-2.7 2.4.8 3.6-3.3-1.9-3.3 1.9.8-3.6-2.7-2.4 3.6-.4z' fill='%23ffd1df'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
html[data-fest=songkran] .ach-card::after{content:"";width:3.4rem;height:3.4rem;opacity:.3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='1'%3E%3Cpath d='M14 40 H66 Q64 64 40 66 Q16 64 14 40 Z' fill='%23d9a441' stroke='%23a8731a' stroke-width='1.5'/%3E%3Cellipse cx='40' cy='40' rx='26' ry='6' fill='%23f6d27a' stroke='%23a8731a' stroke-width='1.5'/%3E%3Cellipse cx='40' cy='40' rx='21' ry='4' fill='%234fc3f7'/%3E%3Cpath d='M20 48 Q40 54 60 48' fill='none' stroke='%23fff1b8' stroke-width='1.5' opacity='.8'/%3E%3Cpath d='M30 34 Q28 22 20 16' fill='none' stroke='%2329b6f6' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M44 33 Q48 18 60 12' fill='none' stroke='%2329b6f6' stroke-width='3.2' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='13' r='3' fill='%234fc3f7'/%3E%3Ccircle cx='62' cy='9' r='3' fill='%234fc3f7'/%3E%3Ccircle cx='38' cy='14' r='2.4' fill='%2381d4fa'/%3E%3Ccircle cx='12' cy='24' r='2' fill='%2381d4fa'/%3E%3Ccircle cx='68' cy='22' r='2' fill='%2381d4fa'/%3E%3Cpath d='M28 66 Q40 74 52 66' fill='none' stroke='%23a8731a' stroke-width='2'/%3E%3Ccircle cx='22' cy='38' r='0' fill='none'/%3E%3Cg fill='%23ff8a65'%3E%3Ccircle cx='26' cy='38' r='2'/%3E%3Ccircle cx='54' cy='37' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
html[data-fest=loykrathong] .ach-card::after{content:"";width:3.4rem;height:3.4rem;opacity:.3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 8 72 70' width='80' height='80'%3E%3Cg opacity='1'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M8 70 Q20 66 32 70 T56 70 T76 70' fill='none' stroke='%235fb8e8' stroke-width='2'/%3E%3Cpath d='M14 75 Q26 72 38 75 T62 75' fill='none' stroke='%235fb8e8' stroke-width='1.6' opacity='.7'/%3E%3Cellipse cx='40' cy='62' rx='27' ry='7' fill='%232f7a3a'/%3E%3Cpath d='M13 60 L18 50 L23 60 L28 49 L33 60 L38 48 L43 60 L48 48 L53 60 L58 49 L63 60 L66 51 L67 61 Z' fill='%234caf50' stroke='%232f7a3a' stroke-width='1'/%3E%3Cpath d='M16 61 L21 53 L26 61 L31 52 L36 61 L41 51 L46 61 L51 52 L56 61 L61 53 L65 61' fill='none' stroke='%238fd694' stroke-width='1'/%3E%3Cellipse cx='40' cy='50' rx='20' ry='5' fill='%233d8f45'/%3E%3Cpath d='M24 50 Q27 38 32 46 Q34 36 40 44 Q46 36 48 46 Q53 38 56 50 Z' fill='%23f48fb1' stroke='%23d8648e' stroke-width='1'/%3E%3Ccircle cx='26' cy='48' r='4' fill='%23ffb300'/%3E%3Ccircle cx='26' cy='48' r='1.8' fill='%23f57c00'/%3E%3Ccircle cx='54' cy='48' r='4' fill='%23ffb300'/%3E%3Ccircle cx='54' cy='48' r='1.8' fill='%23f57c00'/%3E%3Ccircle cx='40' cy='47' r='3.5' fill='%23fff59d'/%3E%3Cpath d='M30 44 L28 22 M33 44 L33 20 M50 44 L52 22' stroke='%238d6e63' stroke-width='1.3'/%3E%3Ccircle cx='28' cy='22' r='1.3' fill='%23ff5722'/%3E%3Ccircle cx='33' cy='20' r='1.3' fill='%23ff5722'/%3E%3Ccircle cx='52' cy='22' r='1.3' fill='%23ff5722'/%3E%3Crect x='38' y='25' width='5' height='20' rx='1.5' fill='%23fff3cf' stroke='%23e0c48a' stroke-width='.8'/%3E%3Cpath d='M40.5 12 Q45 19 40.5 24 Q36 19 40.5 12 Z' fill='%23ffb300'/%3E%3Cpath d='M40.5 16 Q42.5 20 40.5 23 Q38.5 20 40.5 16 Z' fill='%23fff59d'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
html[data-fest]:not([data-fest=""]) .ach-item.done .ach-medal::before{background:color-mix(in srgb,var(--fz-a) 8%,#fff)}
html[data-fest]:not([data-fest=""]) .ach-item.done{background:color-mix(in srgb,var(--fz-a) 6%,var(--paper))}
/* แถบ "ภารกิจรับโทเคน" */
html[data-fest]:not([data-fest=""]) .msn-strip{
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--fz-b) 55%,var(--fz-d1)) 0%,var(--fz-d1) 48%,var(--fz-d2) 100%) padding-box,
    conic-gradient(from 200deg,var(--fz-c),var(--fz-a),#fff4c9,var(--fz-b),var(--fz-a),var(--fz-c)) border-box;
  box-shadow:0 8px 20px -12px color-mix(in srgb,var(--fz-a) 70%,transparent)}
html[data-fest]:not([data-fest=""]) .msn-strip:hover{box-shadow:0 10px 22px -12px color-mix(in srgb,var(--fz-a) 80%,transparent),0 0 18px -6px color-mix(in srgb,var(--fz-c) 60%,transparent)}
html[data-fest]:not([data-fest=""]) .msn-strip::before{background:radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--fz-c) 30%,transparent),transparent 40%),
  radial-gradient(circle at 88% 30%,color-mix(in srgb,var(--fz-a) 35%,transparent),transparent 42%)}
html[data-fest]:not([data-fest=""]) .msn-strip .s-kicker{color:var(--fz-c)}
html[data-fest]:not([data-fest=""]) .msn-strip .s-kicker::after{margin-left:.25rem;padding:.05rem .45rem;border-radius:999px;letter-spacing:.06em;font-size:.62rem;
  color:#fff;background:color-mix(in srgb,var(--fz-a) 75%,transparent);border:1px solid color-mix(in srgb,var(--fz-c) 50%,transparent)}
html[data-fest=halloween] .msn-strip .s-kicker::after{content:"🎃 Halloween"}
html[data-fest=christmas] .msn-strip .s-kicker::after{content:"🎄 Christmas"}
html[data-fest=newyear] .msn-strip .s-kicker::after{content:"🎆 New Year"}
html[data-fest=chinese] .msn-strip .s-kicker::after{content:"🧧 Lunar New Year"}
html[data-fest=valentine] .msn-strip .s-kicker::after{content:"💝 Valentine"}
html[data-fest=songkran] .msn-strip .s-kicker::after{content:"💦 Songkran"}
html[data-fest=loykrathong] .msn-strip .s-kicker::after{content:"🏮 Loy Krathong"}
html[data-fest]:not([data-fest=""]) .msn-strip .s-gift::before{background:radial-gradient(circle,color-mix(in srgb,var(--fz-a) 60%,transparent),color-mix(in srgb,var(--fz-c) 14%,transparent) 45%,transparent 70%)}
html[data-fest]:not([data-fest=""]) .msn-strip .s-step.hot{background:color-mix(in srgb,var(--fz-a) 26%,transparent);border-color:color-mix(in srgb,var(--fz-c) 60%,transparent)}
html[data-fest]:not([data-fest=""]) .msn-strip .s-go{background:linear-gradient(135deg,#fff4c9,var(--fz-c) 55%,color-mix(in srgb,var(--fz-a) 60%,var(--fz-c)))}
/* [15 ต.ค. user "ป๊อปอัพต่างๆ + หน้าอื่นของลูกค้า ให้ตามธีมเทศกาล — ลุยเลย"] แต่งแบบ accent เท่านั้น:
   ป๊อปอัพยังเป็นพื้นเข้ม อ่านง่ายเหมือนเดิม (แค่อมโทนเทศกาล) + เส้นบนไล่สี + ไอคอนเทศกาลจางๆ มุมล่างขวา + ปุ่มหลักไล่สีเทศกาล
   ไม่แตะ input / ตัวเลขเงิน / QR / สีเตือน-ผิดพลาด · ไม่มีเทศกาล = กลับเป็นแบบเดิมเอง */
html[data-fest=halloween]{--fz-emoji:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='.4' transform='rotate%28-8 40 40%29'%3E%3Cpath d='M40 18 Q38 10 44 6' fill='none' stroke='%234e7d2f' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M44 10 Q54 8 56 16 Q48 16 44 10 Z' fill='%236aa84f'/%3E%3Cellipse cx='26' cy='44' rx='16' ry='24' fill='%23f57c00'/%3E%3Cellipse cx='54' cy='44' rx='16' ry='24' fill='%23f57c00'/%3E%3Cellipse cx='40' cy='44' rx='16' ry='26' fill='%23fb8c00' stroke='%23e65100' stroke-width='1.2'/%3E%3Cpath d='M26 22 Q20 44 26 66 M54 22 Q60 44 54 66' fill='none' stroke='%23e65100' stroke-width='1.2'/%3E%3Cpath d='M24 38 L32 32 L33 41 Z M56 38 L48 32 L47 41 Z' fill='%234a1a00'/%3E%3Cpath d='M37 46 L40 41 L43 46 Z' fill='%234a1a00'/%3E%3Cpath d='M22 52 Q40 66 58 52 L54 54 L51 51 L47 56 L43 52 L40 57 L37 52 L33 56 L29 51 L26 54 Z' fill='%234a1a00'/%3E%3C/g%3E%3C/svg%3E")}
html[data-fest=christmas]{--fz-emoji:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='.4' transform='rotate%28-8 40 40%29'%3E%3Crect x='35' y='62' width='10' height='11' rx='1.5' fill='%237a4a24'/%3E%3Cpath d='M40 10 L56 32 H48 L62 48 H52 L66 64 H14 L28 48 H18 L32 32 H24 Z' fill='%232e8b4e' stroke='%231d6338' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M26 44 Q40 50 54 42 M22 58 Q40 64 58 56' fill='none' stroke='%23f6d27a' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='33' cy='37' r='2.6' fill='%23e53935'/%3E%3Ccircle cx='47' cy='51' r='2.6' fill='%23e53935'/%3E%3Ccircle cx='30' cy='54' r='2.4' fill='%2342a5f5'/%3E%3Ccircle cx='50' cy='36' r='2.2' fill='%2342a5f5'/%3E%3Ccircle cx='41' cy='45' r='2.2' fill='%23ffca28'/%3E%3Ccircle cx='56' cy='59' r='2.2' fill='%23ffca28'/%3E%3Ccircle cx='25' cy='61' r='2.2' fill='%23e53935'/%3E%3Cpath d='M40 3 L42.4 8.2 L48 8.6 L43.7 12.2 L45.1 17.6 L40 14.6 L34.9 17.6 L36.3 12.2 L32 8.6 L37.6 8.2 Z' fill='%23ffd54f' stroke='%23e0a800' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E")}
html[data-fest=newyear]{--fz-emoji:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='.4' transform='rotate%28-8 40 40%29'%3E%3Cg stroke-linecap='round' stroke-width='2.4'%3E%3Cg transform='translate%2830 28%29' stroke='%23f6d27a'%3E%3Cpath d='M0 -18V-9M0 18V9M-18 0H-9M18 0H9M-12.7 -12.7L-6.4 -6.4M12.7 12.7L6.4 6.4M-12.7 12.7L-6.4 6.4M12.7 -12.7L6.4 -6.4'/%3E%3C/g%3E%3Ccircle cx='30' cy='28' r='3' fill='%23fff3cf'/%3E%3Cg transform='translate%2856 46%29' stroke='%23ff6b9a'%3E%3Cpath d='M0 -14V-7M0 14V7M-14 0H-7M14 0H7M-10 -10L-5 -5M10 10L5 5M-10 10L-5 5M10 -10L5 -5'/%3E%3C/g%3E%3Ccircle cx='56' cy='46' r='2.4' fill='%23ffd1df'/%3E%3Cg transform='translate%2824 60%29' stroke='%237ee0ff' stroke-width='2'%3E%3Cpath d='M0 -10V-5M0 10V5M-10 0H-5M10 0H5M-7 -7L-3.5 -3.5M7 7L3.5 3.5M-7 7L-3.5 3.5M7 -7L3.5 -3.5'/%3E%3C/g%3E%3Ccircle cx='24' cy='60' r='2' fill='%23d6f7ff'/%3E%3Cpath d='M44 76 Q46 66 52 60' fill='none' stroke='%23c79bff' stroke-width='1.6' stroke-dasharray='2 3'/%3E%3C/g%3E%3Ccircle cx='62' cy='18' r='1.6' fill='%23fff3cf'/%3E%3Ccircle cx='12' cy='40' r='1.4' fill='%23fff3cf'/%3E%3Ccircle cx='68' cy='66' r='1.4' fill='%23fff3cf'/%3E%3C/g%3E%3C/svg%3E")}
html[data-fest=chinese]{--fz-emoji:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='.4' transform='rotate%28-8 40 40%29'%3E%3Crect x='18' y='8' width='44' height='64' rx='5' fill='%23d32f2f' stroke='%239a1b1b' stroke-width='1.5'/%3E%3Cpath d='M18 13 Q40 34 62 13 V12 Q62 8 58 8 H22 Q18 8 18 12 Z' fill='%23b71c1c'/%3E%3Cpath d='M18 13 Q40 34 62 13' fill='none' stroke='%23f6c343' stroke-width='1.8'/%3E%3Ccircle cx='40' cy='26' r='7' fill='%23f6c343' stroke='%23c99a18' stroke-width='1.2'/%3E%3Crect x='37' y='23' width='6' height='6' fill='%23d32f2f'/%3E%3Ccircle cx='40' cy='50' r='11' fill='none' stroke='%23f6c343' stroke-width='2'/%3E%3Cpath d='M34 46 H46 M33 50 H47 M34 54 H46 M40 42 V58' stroke='%23f6c343' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M24 66 H56' stroke='%23f6c343' stroke-width='1.2' opacity='.7'/%3E%3C/g%3E%3C/svg%3E")}
html[data-fest=valentine]{--fz-emoji:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='.4' transform='rotate%28-8 40 40%29'%3E%3Cpath d='M40 70 C12 52 6 36 12 24 C18 12 34 12 40 24 C46 12 62 12 68 24 C74 36 68 52 40 70 Z' fill='%23e8335f' stroke='%23b81f45' stroke-width='1.5'/%3E%3Cpath d='M22 22 Q16 28 18 36' fill='none' stroke='%23ffc2d4' stroke-width='3' stroke-linecap='round' opacity='.8'/%3E%3Cpath d='M40 26 V68 M14 34 H66' stroke='%23ffd1df' stroke-width='4' opacity='.85'/%3E%3Cpath d='M40 26 Q30 14 26 20 Q24 26 40 26 Q50 14 54 20 Q56 26 40 26' fill='%23ff8fb1' stroke='%23d6336c' stroke-width='1.3'/%3E%3Ccircle cx='40' cy='26' r='2.6' fill='%23ffc2d4'/%3E%3Cpath d='M64 8 l1.6 3.4 3.6.4-2.7 2.4.8 3.6-3.3-1.9-3.3 1.9.8-3.6-2.7-2.4 3.6-.4z' fill='%23ffd1df'/%3E%3C/g%3E%3C/svg%3E")}
html[data-fest=songkran]{--fz-emoji:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg opacity='.4' transform='rotate%28-8 40 40%29'%3E%3Cpath d='M14 40 H66 Q64 64 40 66 Q16 64 14 40 Z' fill='%23d9a441' stroke='%23a8731a' stroke-width='1.5'/%3E%3Cellipse cx='40' cy='40' rx='26' ry='6' fill='%23f6d27a' stroke='%23a8731a' stroke-width='1.5'/%3E%3Cellipse cx='40' cy='40' rx='21' ry='4' fill='%234fc3f7'/%3E%3Cpath d='M20 48 Q40 54 60 48' fill='none' stroke='%23fff1b8' stroke-width='1.5' opacity='.8'/%3E%3Cpath d='M30 34 Q28 22 20 16' fill='none' stroke='%2329b6f6' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M44 33 Q48 18 60 12' fill='none' stroke='%2329b6f6' stroke-width='3.2' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='13' r='3' fill='%234fc3f7'/%3E%3Ccircle cx='62' cy='9' r='3' fill='%234fc3f7'/%3E%3Ccircle cx='38' cy='14' r='2.4' fill='%2381d4fa'/%3E%3Ccircle cx='12' cy='24' r='2' fill='%2381d4fa'/%3E%3Ccircle cx='68' cy='22' r='2' fill='%2381d4fa'/%3E%3Cpath d='M28 66 Q40 74 52 66' fill='none' stroke='%23a8731a' stroke-width='2'/%3E%3Ccircle cx='22' cy='38' r='0' fill='none'/%3E%3Cg fill='%23ff8a65'%3E%3Ccircle cx='26' cy='38' r='2'/%3E%3Ccircle cx='54' cy='37' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
/* [31 ต.ค. user "ธีมลอยกระทงไม่มีกระทง → ทำไว้ทุกธีม"] รูปประจำเทศกาลมุมขวา (ป๊อปอัป/หน้าต่างภารกิจ/การ์ดความสำเร็จ) เปลี่ยนจากอิโมจิ (หน้าตาต่างกันแต่ละมือถือ · ไม่มีกระทง) เป็นรูป SVG วาดเองฝังในไฟล์ทุกธีม: ต้นคริสต์มาส พลุปีใหม่ อั่งเปา หัวใจของขวัญ ขันน้ำสงกรานต์ ฟักทอง กระทง · ไฟล์ต้นฉบับ tools/fest-svg/ */
html[data-fest=loykrathong]{--fz-emoji:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 8 72 70' width='80' height='80'%3E%3Cg opacity='.4' transform='rotate%28-8 40 40%29'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M8 70 Q20 66 32 70 T56 70 T76 70' fill='none' stroke='%235fb8e8' stroke-width='2'/%3E%3Cpath d='M14 75 Q26 72 38 75 T62 75' fill='none' stroke='%235fb8e8' stroke-width='1.6' opacity='.7'/%3E%3Cellipse cx='40' cy='62' rx='27' ry='7' fill='%232f7a3a'/%3E%3Cpath d='M13 60 L18 50 L23 60 L28 49 L33 60 L38 48 L43 60 L48 48 L53 60 L58 49 L63 60 L66 51 L67 61 Z' fill='%234caf50' stroke='%232f7a3a' stroke-width='1'/%3E%3Cpath d='M16 61 L21 53 L26 61 L31 52 L36 61 L41 51 L46 61 L51 52 L56 61 L61 53 L65 61' fill='none' stroke='%238fd694' stroke-width='1'/%3E%3Cellipse cx='40' cy='50' rx='20' ry='5' fill='%233d8f45'/%3E%3Cpath d='M24 50 Q27 38 32 46 Q34 36 40 44 Q46 36 48 46 Q53 38 56 50 Z' fill='%23f48fb1' stroke='%23d8648e' stroke-width='1'/%3E%3Ccircle cx='26' cy='48' r='4' fill='%23ffb300'/%3E%3Ccircle cx='26' cy='48' r='1.8' fill='%23f57c00'/%3E%3Ccircle cx='54' cy='48' r='4' fill='%23ffb300'/%3E%3Ccircle cx='54' cy='48' r='1.8' fill='%23f57c00'/%3E%3Ccircle cx='40' cy='47' r='3.5' fill='%23fff59d'/%3E%3Cpath d='M30 44 L28 22 M33 44 L33 20 M50 44 L52 22' stroke='%238d6e63' stroke-width='1.3'/%3E%3Ccircle cx='28' cy='22' r='1.3' fill='%23ff5722'/%3E%3Ccircle cx='33' cy='20' r='1.3' fill='%23ff5722'/%3E%3Ccircle cx='52' cy='22' r='1.3' fill='%23ff5722'/%3E%3Crect x='38' y='25' width='5' height='20' rx='1.5' fill='%23fff3cf' stroke='%23e0c48a' stroke-width='.8'/%3E%3Cpath d='M40.5 12 Q45 19 40.5 24 Q36 19 40.5 12 Z' fill='%23ffb300'/%3E%3Cpath d='M40.5 16 Q42.5 20 40.5 23 Q38.5 20 40.5 16 Z' fill='%23fff59d'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
html[data-fest]:not([data-fest=""]) .auth-modal-overlay,html[data-fest]:not([data-fest=""]) .mswal-backdrop{background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--fz-d1) 60%,transparent),color-mix(in srgb,var(--fz-d2) 82%,transparent))}
html[data-fest]:not([data-fest=""]) .auth-card.auth-modal-card,html[data-fest]:not([data-fest=""]) .mswal-popup{
  --line:color-mix(in srgb,var(--fz-c) 24%,transparent);
  background:var(--fz-emoji) no-repeat right 8px top 46px / 54px 54px,
    radial-gradient(90% 60% at 100% 0%,color-mix(in srgb,var(--fz-a) 16%,transparent),transparent 65%),
    linear-gradient(160deg,color-mix(in srgb,var(--fz-d1) 62%,#16261f),color-mix(in srgb,var(--fz-d2) 70%,#0d1712) 78%);
  border-color:color-mix(in srgb,var(--fz-a) 42%,transparent);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.65),0 0 60px -22px color-mix(in srgb,var(--fz-a) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--fz-c) 10%,transparent) inset}
html[data-fest]:not([data-fest=""]) .auth-card.auth-modal-card::before,html[data-fest]:not([data-fest=""]) .mswal-popup::before{background:linear-gradient(90deg,transparent,var(--fz-a) 18%,var(--fz-c) 50%,var(--fz-b) 82%,transparent)}
html[data-fest]:not([data-fest=""]) .auth-modal-close:hover{background:color-mix(in srgb,var(--fz-a) 28%,transparent)}
html[data-fest]:not([data-fest=""]) .mswal-btn-confirm,html[data-fest]:not([data-fest=""]) .auth-modal-card .btn-primary,html[data-fest]:not([data-fest=""]) #dashboardView .btn-primary{
  background:linear-gradient(135deg,#fff6d8,var(--fz-c) 45%,color-mix(in srgb,var(--fz-a) 55%,var(--fz-c)));color:#22160a;
  box-shadow:0 10px 22px -10px color-mix(in srgb,var(--fz-a) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.45)}
html[data-fest]:not([data-fest=""]) .mswal-btn:focus-visible{outline-color:var(--fz-c)}
/* ป๊อปอัพภารกิจ (พื้นสว่าง) */
html[data-fest]:not([data-fest=""]) .msn-modal{border-color:color-mix(in srgb,var(--fz-a) 35%,var(--line));border-top:3px solid var(--fz-a);
  background:var(--fz-emoji) no-repeat right 10px top 10px / 46px 46px,linear-gradient(180deg,color-mix(in srgb,var(--fz-a) 6%,var(--paper-raised)),var(--paper-raised) 40%)}
/* การ์ดในหน้าแดชบอร์ดทุกหน้า — เส้นบนไล่สีเทศกาล + ขอบอมสีจางๆ */
html[data-fest]:not([data-fest=""]) #dashboardView .card{border-color:color-mix(in srgb,var(--fz-a) 22%,rgba(255,255,255,.55))}
html[data-fest]:not([data-fest=""]) #dashboardView .card::before{height:2px;opacity:.9;background:linear-gradient(90deg,transparent,var(--fz-a) 20%,var(--fz-c) 50%,var(--fz-b) 80%,transparent)}
html[data-fest]:not([data-fest=""]) #dashboardView .card:hover{border-color:color-mix(in srgb,var(--fz-a) 40%,rgba(255,255,255,.6))}
html[data-fest]:not([data-fest=""]) .promo-card.featured{border-color:var(--fz-a)}
/* [15 ต.ค. user "ป๊อปอัพบัญชีของฉันยังไม่ตามธีม"] หน้า "บัญชีของฉัน" (#myAcct) — แถบซ้าย/หัว/แท็บ/การ์ด/ปุ่ม ตามสีเทศกาล */
html[data-fest]:not([data-fest=""]) #myAcct{background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--fz-d1) 55%,transparent),color-mix(in srgb,var(--fz-d2) 75%,transparent))}
html[data-fest]:not([data-fest=""]) .mya-side{background:var(--fz-emoji) no-repeat right 10px bottom 12px / 72px 72px,
  radial-gradient(120% 60% at 0% 0%,color-mix(in srgb,var(--fz-b) 45%,var(--fz-d1)) 0%,var(--fz-d1) 55%,var(--fz-d2) 100%);border-right-color:color-mix(in srgb,var(--fz-a) 35%,transparent)}
html[data-fest]:not([data-fest=""]) .mya-key{background:rgba(0,0,0,.28);border-color:color-mix(in srgb,var(--fz-c) 18%,transparent)}
html[data-fest]:not([data-fest=""]) .mya-key button{background:color-mix(in srgb,var(--fz-a) 28%,transparent);color:var(--fz-c)}
html[data-fest]:not([data-fest=""]) .mya-kpi{background:color-mix(in srgb,var(--fz-b) 10%,rgba(255,255,255,.04));border-color:color-mix(in srgb,var(--fz-c) 14%,transparent)}
html[data-fest]:not([data-fest=""]) .mya-kpi.click:hover,html[data-fest]:not([data-fest=""]) .mya-act:hover{background:color-mix(in srgb,var(--fz-a) 22%,transparent);border-color:color-mix(in srgb,var(--fz-a) 45%,transparent)}
html[data-fest]:not([data-fest=""]) .mya-act{border-color:color-mix(in srgb,var(--fz-c) 25%,transparent);background:color-mix(in srgb,var(--fz-a) 10%,transparent);color:#fff3e0}
html[data-fest]:not([data-fest=""]) .mya-act.pri{background:linear-gradient(90deg,#fff1c9,var(--fz-c) 45%,color-mix(in srgb,var(--fz-a) 60%,var(--fz-c)));color:#241a08}
html[data-fest]:not([data-fest=""]) .mya-top{background:linear-gradient(180deg,color-mix(in srgb,var(--fz-a) 7%,var(--paper-raised,#fff)),var(--paper-raised,#fff));position:relative}
html[data-fest]:not([data-fest=""]) .mya-top::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--fz-a),var(--fz-c) 50%,var(--fz-b))}
html[data-fest]:not([data-fest=""]) .mya-nav button.on::after{background:linear-gradient(90deg,var(--fz-a),var(--fz-c))}
html[data-fest]:not([data-fest=""]) .mya-body{background:radial-gradient(900px 500px at 100% 0%,color-mix(in srgb,var(--fz-a) 7%,transparent),transparent 60%),radial-gradient(800px 500px at 0% 100%,color-mix(in srgb,var(--fz-b) 7%,transparent),transparent 60%)}
html[data-fest]:not([data-fest=""]) .mya-pane{border-color:color-mix(in srgb,var(--fz-a) 22%,var(--line));border-top:2px solid color-mix(in srgb,var(--fz-a) 70%,var(--fz-c))}
html[data-fest]:not([data-fest=""]) .mya-pane-h .ic{background:color-mix(in srgb,var(--fz-a) 16%,transparent)}
html[data-fest]:not([data-fest=""]) #myAcct .btn-primary{background:linear-gradient(135deg,#fff6d8,var(--fz-c) 45%,color-mix(in srgb,var(--fz-a) 55%,var(--fz-c)));color:#22160a}
html[data-fest]:not([data-fest=""]) .pet-pick-wrap{border-color:color-mix(in srgb,var(--fz-a) 25%,var(--line));background:color-mix(in srgb,var(--fz-a) 4%,var(--paper))}
html[data-fest]:not([data-fest=""]) .pet-pick button.on{border-color:var(--fz-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--fz-a) 25%,transparent);background:color-mix(in srgb,var(--fz-a) 8%,var(--paper-raised))}
.bd-banner{display:flex;align-items:center;gap:.75rem;padding:.75rem .9rem;border-radius:14px;cursor:pointer;color:#fff6dc;
  background:linear-gradient(110deg,#0c3a31,#14544a 55%,#0c3a31);border:1px solid rgba(246,210,122,.55);box-shadow:0 10px 26px -14px rgba(12,58,49,.9)}
.bd-banner[hidden]{display:none}
/* [NEW 14 ต.ค.] โปรเกรสบาร์แรงค์ — [แก้ รอบ 2 user "ยังธรรมดา ขอพรีเมียม หรูหรา"] การ์ดดำเขียวขอบทองเมทัลลิก + ลายกิโยเช่ + แสงวาบ
   + เหรียญแรงค์มีวงแสงหมุน + แถบทองเมทัลลิกหัวเรืองแสง + ป้ายเปอร์เซ็นต์ลอย + ชิปสถิติแก้ว */
.rkp{--gold1:#fff3c4;--gold2:#f6d27a;--gold3:#c9922f;position:relative;overflow:hidden;isolation:isolate;border-radius:20px;padding:1.05rem 1.15rem 1rem;color:#eef5f0;
  border:1.5px solid transparent;background:
    radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--rk) 26%,transparent),transparent 55%) padding-box,
    radial-gradient(70% 90% at 100% 100%,color-mix(in srgb,var(--rk2) 14%,transparent),transparent 60%) padding-box,
    linear-gradient(160deg,#0f2a24,#06120f 70%) padding-box,
    linear-gradient(135deg,var(--gold1),var(--gold3) 30%,#5d4314 50%,var(--gold2) 70%,var(--gold3)) border-box;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,243,196,.12)}
.rkp::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none;
  background:repeating-radial-gradient(circle at 85% -20%,transparent 0 9px,#f6d27a 9px 10px),repeating-linear-gradient(115deg,transparent 0 14px,rgba(246,210,122,.5) 14px 15px)}
.rkp::after{content:'';position:absolute;top:-30%;bottom:-30%;width:28%;left:-40%;z-index:0;pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,243,196,.13),transparent);animation:rkpSweep 6s ease-in-out infinite}
.rkp > *{position:relative;z-index:1}
.rkp-kick{display:flex;align-items:center;gap:.6rem;font-size:.62rem;letter-spacing:.38em;color:var(--gold2);opacity:.9;margin-bottom:.55rem}
.rkp-kick::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(246,210,122,.6),transparent)}
.rkp-top{display:flex;align-items:center;gap:.75rem}
.rkp-medal{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center}
.rkp-medal::before{content:'';position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--rk),transparent 35%,var(--gold2),transparent 70%,var(--rk));
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);animation:gbxSpin 6s linear infinite;opacity:.9}
.rkp-medal::after{content:'';position:absolute;inset:6px;border-radius:50%;box-shadow:0 0 26px 4px color-mix(in srgb,var(--rk) 55%,transparent)}
.rkp-medal img{width:58px;height:58px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.rkp-name small{display:block;font-size:.62rem;letter-spacing:.14em;color:#a9c4b8;text-transform:uppercase}
.rkp-name b{display:block;font-size:1.35rem;line-height:1.15;font-weight:800;background:linear-gradient(100deg,#fff,var(--rk) 45%,#fff 60%,var(--rk));background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:bdShimmer 4s linear infinite}
.rkp-next{margin-left:auto;display:flex;align-items:center;gap:.55rem;padding:.35rem .5rem .35rem .75rem;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(246,210,122,.22)}
.rkp-next .t{text-align:right}.rkp-next small{display:block;font-size:.6rem;letter-spacing:.14em;color:#a9c4b8}
.rkp-next b{font-size:.92rem;color:var(--rk2)}
.rkp-next .m{position:relative;width:40px;height:40px}
.rkp-next .m img{width:40px;height:40px;object-fit:contain;filter:grayscale(.65) brightness(.75)}
.rkp-next .m i{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:.6rem;font-style:normal;background:#0b1f1a;border:1px solid rgba(246,210,122,.5)}
.rkp-track{position:relative;margin:1.55rem 0 .7rem}
.rkp-bar{position:relative;height:16px;border-radius:999px;padding:2px;background:linear-gradient(180deg,#03100c,#0b2420);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 0 0 1px rgba(246,210,122,.28)}
.rkp-bar .fill,.rkp-bar .xp{position:absolute;top:2px;bottom:2px;left:2px;width:0;border-radius:999px;transition:width 1.4s cubic-bezier(.2,.8,.25,1),left 1.4s cubic-bezier(.2,.8,.25,1)}
.rkp-bar .fill{z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),linear-gradient(90deg,var(--rk),var(--gold2) 70%,var(--gold1));box-shadow:0 0 14px color-mix(in srgb,var(--gold2) 70%,transparent)}
.rkp-bar .fill::after{content:'';position:absolute;inset:0;border-radius:999px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);background-size:240% 100%;animation:rkpShine 2.4s linear infinite}
.rkp-bar .xp{z-index:1;background:repeating-linear-gradient(45deg,rgba(126,230,180,.85) 0 6px,rgba(126,230,180,.45) 6px 12px);box-shadow:0 0 10px rgba(126,230,180,.45)}
.rkp-bar .tk{position:absolute;top:4px;bottom:4px;width:1px;z-index:3;background:rgba(255,255,255,.14)}
.rkp-tip{position:absolute;top:50%;left:0;z-index:4;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:none;transition:left 1.4s cubic-bezier(.2,.8,.25,1);
  background:radial-gradient(circle,#fff 0 22%,var(--gold1) 30%,rgba(246,210,122,.55) 50%,transparent 70%);animation:rkpPulse 1.6s ease-in-out infinite}
.rkp-pct{position:absolute;bottom:calc(100% + 7px);left:0;z-index:4;transform:translateX(-50%);transition:left 1.4s cubic-bezier(.2,.8,.25,1);
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:800;color:#1a1205;padding:.12rem .45rem;border-radius:7px;background:linear-gradient(180deg,var(--gold1),var(--gold2));box-shadow:0 4px 10px -3px rgba(0,0,0,.6);white-space:nowrap}
.rkp-pct::after{content:'';position:absolute;left:50%;top:100%;margin-left:-4px;border:4px solid transparent;border-top-color:var(--gold2)}
.rkp-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.7rem;flex-wrap:wrap}
.rkp-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.rkp-chips span{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#d8eadf}
.rkp-chips span b{color:#fff;font-weight:700}
.rkp-chips span.fee{border-color:rgba(246,210,122,.4);color:#f6e2a8}.rkp-chips span.msn{border-color:rgba(126,230,180,.4);color:#bdf3d8}
.rkp-left{text-align:right;line-height:1.15;margin-left:auto}
.rkp-left small{display:block;font-size:.66rem;color:#a9c4b8;letter-spacing:.06em}
.rkp-left b{font-size:1.25rem;font-weight:800;background:linear-gradient(180deg,var(--gold1),var(--gold2) 60%,var(--gold3));-webkit-background-clip:text;background-clip:text;color:transparent}
.rkp-left em{font-style:normal;font-size:.8rem;color:var(--rk2);font-weight:700;margin-left:.25rem}
.rkp.max .rkp-bar .fill{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),linear-gradient(90deg,var(--gold3),var(--gold1),var(--gold2),var(--gold1),var(--gold3))}
@keyframes rkpShine{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes rkpSweep{0%,60%{left:-40%}100%{left:130%}}
@keyframes rkpPulse{0%,100%{transform:scale(.85);opacity:.85}50%{transform:scale(1.15);opacity:1}}
@media (max-width:480px){.rkp-name b{font-size:1.15rem}.rkp-medal{width:54px;height:54px}.rkp-medal img{width:48px;height:48px}.rkp-next .t{display:none}}
/* ================== [NEW 14 ต.ค. คุยกับ user "เอฟเฟกต์หรูแบบวันเกิด ตรงอื่นด้วย — แต่ห้ามเหมือนวันเกิด"] ==================
   กล่อง: .gbx-ocean (ต้อนรับสมาชิกใหม่ = ใต้ทะเล ฟองอากาศ ปลาทอง) · .gbx-jackpot (กล่องภารกิจ = ไฟมาร์คี วงล้อตัวเลข)
   ฉลอง (.cx-ov): .cx-rank (ขึ้นแรงค์ = เหรียญหมุน คลื่นกระแทก ประกายลอยขึ้น) · .cx-topup (เติมเงิน = ฝนเหรียญ) · .cx-profit (กำไรถึงเป้า = ถ้วยรางวัล จรวดพลุ) */
.gbx-ov.gbx-ocean{background:radial-gradient(ellipse at 50% 0%,#2a8c84 0%,#0d4a4a 38%,#05201f 75%,#020c0c 100%)}
.oc-caustic{position:absolute;inset:-20%;pointer-events:none;opacity:.22;mix-blend-mode:screen;
  background:repeating-radial-gradient(circle at 30% 20%,rgba(160,255,240,.5) 0 2px,transparent 3px 46px),repeating-radial-gradient(circle at 70% 60%,rgba(160,255,240,.4) 0 2px,transparent 3px 58px);animation:ocDrift 14s ease-in-out infinite alternate}
.oc-bub{position:absolute;bottom:-30px;border-radius:50%;pointer-events:none;border:1px solid rgba(200,255,250,.55);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),rgba(255,255,255,.05) 45%,transparent 60%);animation:ocBub var(--t,8s) linear infinite;animation-delay:var(--dl,0s)}
.oc-fish{position:absolute;width:64px;height:30px;pointer-events:none;opacity:.55;animation:ocSwim var(--t,16s) linear infinite;animation-delay:var(--dl,0s)}
.oc-fish svg{width:100%;height:100%;animation:ocWiggle .9s ease-in-out infinite alternate}
.gbx-ocean .bd-crest,.gbx-jackpot .bd-crest{color:#bff3ea}
.gbx-ocean .bd-crest::before{background:linear-gradient(90deg,transparent,#bff3ea)}.gbx-ocean .bd-crest::after{background:linear-gradient(90deg,#bff3ea,transparent)}
.gbx-ocean .gbx-title{font-size:1.7rem;color:#fff;text-shadow:0 0 22px rgba(120,255,230,.55)}
.gbx-ocean .gbx-title,.gbx-ocean .gbx-sub,.gbx-ocean .bd-crest,.gbx-ocean .gbx-stage,.gbx-ocean .gbx-hint,
.gbx-jackpot .gbx-title,.gbx-jackpot .gbx-sub,.gbx-jackpot .bd-crest,.gbx-jackpot .gbx-stage,.gbx-jackpot .gbx-hint{position:relative;z-index:2}
.gbx-ocean .gbx-glow{background:radial-gradient(circle,rgba(150,255,235,.6),rgba(80,220,200,0) 65%)}
.gbx-ocean .bd-card,.gbx-jackpot .bd-card{background:linear-gradient(160deg,rgba(10,60,58,.94),rgba(4,26,26,.94));border-color:rgba(160,255,240,.45)}
.gbx-ov.gbx-jackpot{background:radial-gradient(circle at 50% 52%,#173a33 0%,#07130f 55%,#010403 100%)}
.gbx-jackpot .gbx-title{font-size:1.6rem;color:#ffe08a;text-shadow:0 0 18px rgba(255,200,80,.7)}
.jp-ring{position:absolute;left:50%;top:62%;width:340px;height:340px;margin:-170px 0 0 -170px;pointer-events:none;border-radius:50%;
  box-shadow:0 0 0 2px rgba(246,210,122,.35),inset 0 0 40px rgba(246,210,122,.12)}
.jp-ring i{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff3c4;box-shadow:0 0 10px #ffd46b,0 0 3px #fff;animation:jpBulb 1s steps(1) infinite;animation-delay:var(--dl)}
.gbx-jackpot.open .jp-ring i{animation-duration:.25s}
.gbx-jackpot .gbx-hint{margin-top:4.6rem}
.gbx-ov .gbx-box:focus{outline:none} /* [14 ต.ค.] กรอบขาวโฟกัสหลังแตะกล่อง */
.gbx-ov .gbx-box:focus-visible{outline:2px solid rgba(246,210,122,.6);outline-offset:6px;border-radius:12px}
/* [14 ต.ค. user "ตัวเลขวางในวงกลม"] กล่องภารกิจ: เปิดแล้วตัวเลขลอยมากลางวง + กล่องจางลงเป็นฉากหลัง */
.gbx-jackpot.open .gbx-result{animation:jpRise .7s .2s cubic-bezier(.2,1.5,.4,1) forwards}
.gbx-jackpot.open .gbx-box{animation:gbxPop .5s ease-out both,jpFade .6s .35s ease forwards}
.gbx-jackpot .gbx-num{font-size:4.8rem}
/* [แก้ 14 ต.ค. — user "ตัวเลขดูจืดจาง อ่านยาก"] ตัวเลขรางวัลจมไปกับลำแสงสว่างด้านหลัง → แผ่นรองเข้ม + ขอบเข้ม + Orbitron */
.gbx-result{isolation:isolate}
.gbx-result::before{content:'';position:absolute;inset:-50px -80px -40px;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(3,22,17,.95) 0%,rgba(3,22,17,.85) 40%,rgba(3,22,17,.5) 58%,rgba(3,22,17,0) 72%)}
.gbx-num{font-family:'Orbitron','IBM Plex Mono',monospace;font-weight:900;color:#ffe9a8;letter-spacing:.02em;
  -webkit-text-stroke:2px #6b4710;paint-order:stroke fill;
  text-shadow:0 4px 0 #7a5414,0 6px 14px rgba(0,0,0,.55),0 0 30px rgba(255,200,80,.55)}
.gbx-unit{display:inline-block;margin-top:.45rem;padding:.18rem .8rem;border-radius:999px;font-size:.9rem;font-weight:800;letter-spacing:.06em;
  color:#241a08;background:linear-gradient(135deg,#fff1b8,#f2c14e 50%,#d29a2e);box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}
@keyframes jpRise{to{transform:translateX(-50%) translateY(-30px) scale(1);opacity:1}}
@keyframes jpFade{to{opacity:.1;transform:scale(.8)}}
.gbx-jackpot .gbx-sub{margin-bottom:1.2rem}
.jp-spark{position:absolute;width:2px;height:60px;pointer-events:none;background:linear-gradient(rgba(255,230,150,0),rgba(255,230,150,.9),rgba(255,230,150,0));animation:jpSweep var(--t,3s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes ocDrift{to{transform:translate(4%,3%) rotate(3deg)}}
@keyframes ocBub{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(-55vh) translateX(14px)}100%{transform:translateY(-115vh) translateX(-10px);opacity:.2}}
@keyframes ocSwim{0%{transform:translateX(-120px) scaleX(1)}100%{transform:translateX(calc(100vw + 120px)) scaleX(1)}}
@keyframes ocWiggle{to{transform:rotate(4deg) translateY(2px)}}
@keyframes jpBulb{0%{opacity:1}50%{opacity:.18}}
@keyframes jpSweep{0%{transform:translateY(110vh)}100%{transform:translateY(-20vh)}}
/* ---- ฉลอง (ไม่ใช่กล่อง) ---- */
.cx-ov{position:fixed;inset:0;z-index:10050;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:1rem;overflow:hidden;
  opacity:0;transition:opacity .35s ease;color:#fff;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cx-ov.on{opacity:1}
.cx-ov > *{position:relative;z-index:2}
.cx-ov > .cx-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cx-kicker{font-size:.72rem;letter-spacing:.45em;opacity:0;transform:translateY(-8px);transition:all .5s .2s ease}
.cx-ov.on .cx-kicker{opacity:.9;transform:none}
.cx-stage{position:relative;width:240px;height:240px;display:flex;align-items:center;justify-content:center}
.cx-title{font-size:1.75rem;font-weight:800;line-height:1.25;opacity:0;transform:scale(.8);transition:all .5s cubic-bezier(.2,1.4,.4,1)}
.cx-ov.go .cx-title{opacity:1;transform:none}
.cx-big{opacity:0;transform:translateY(10px);transition:all .5s .15s ease}
.cx-ov.go .cx-big{opacity:1;transform:none}
.cx-num{display:block;font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:3.6rem;line-height:1.05;color:#ffe08a;text-shadow:0 0 24px rgba(255,200,80,.85),0 4px 0 #a8761f}
.cx-big small{display:block;font-size:.9rem;font-weight:700;color:#fff3c4;margin-top:.15rem;letter-spacing:.04em}
.cx-lines{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;max-width:360px;opacity:0;transform:translateY(8px);transition:all .5s ease}
.cx-lines span{font-size:.8rem;padding:.3rem .7rem;border-radius:999px;border:1px solid rgba(246,210,122,.45);background:rgba(246,210,122,.1);color:#fff3c4}
.cx-ov.done .cx-lines{opacity:1;transform:none}
.cx-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;opacity:0;transform:translateY(8px);transition:all .4s .1s ease;pointer-events:none}
.cx-ov.done .cx-actions{opacity:1;transform:none;pointer-events:auto}
.cx-btn{border:0;border-radius:999px;padding:.72rem 1.9rem;font-weight:800;font-size:.95rem;font-family:inherit;cursor:pointer;background:linear-gradient(90deg,#f6d27a,#e2a93b);color:#241a08;box-shadow:0 10px 24px -8px rgba(226,169,59,.8)}
.cx-btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none}
.cx-ov .gbx-x{position:absolute;z-index:3}
/* ขึ้นแรงค์ */
.cx-rank .cx-bg{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--rk) 55%,#0b2a24) 0%,#06140f 52%,#010605 100%)}
.cx-rank .cx-kicker{color:var(--rk)}
.cx-rank .cx-title{background:linear-gradient(100deg,#fff,var(--rk),#fff,var(--rk));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bdShimmer 3s linear infinite}
.cx-rays{position:absolute;left:50%;top:50%;width:700px;height:700px;margin:-350px 0 0 -350px;border-radius:50%;opacity:0;transition:opacity .6s ease;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rk) 40%,transparent) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 14%,transparent 62%);mask:radial-gradient(circle,#000 14%,transparent 62%);animation:gbxSpin 14s linear infinite}
.cx-ov.go .cx-rays{opacity:1}
.cx-badge{width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 0 26px var(--rk)) drop-shadow(0 18px 24px rgba(0,0,0,.6));transform:translateY(-70vh) rotateY(0) scale(.6)}
.cx-ov.go .cx-badge{animation:cxBadge 1.3s cubic-bezier(.2,1.1,.35,1) forwards}
.cx-wave{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px;border-radius:50%;border:3px solid var(--rk);opacity:0;pointer-events:none}
.cx-ov.go .cx-wave{animation:cxWave 1.4s ease-out forwards;animation-delay:var(--dl)}
.cx-ember{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:var(--rk);box-shadow:0 0 8px var(--rk);pointer-events:none;animation:cxEmber var(--t,6s) linear infinite;animation-delay:var(--dl,0s)}
/* เติมเงิน */
.cx-topup .cx-bg{background:radial-gradient(circle at 50% 46%,#1c5a4c 0%,#082a23 50%,#020a08 100%)}
.cx-topup .cx-kicker{color:#f6d27a}
.cx-topup .cx-title{color:#fff3c4;text-shadow:0 0 20px rgba(246,210,122,.5)}
.cx-vault{width:170px;height:170px;transform:scale(.4);opacity:0;transition:all .6s cubic-bezier(.2,1.5,.4,1)}
.cx-ov.go .cx-vault{transform:none;opacity:1}
.cx-ov.boom .cx-vault{animation:cxThump .35s ease-out}
.cx-coin{position:absolute;top:-40px;width:26px;height:26px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 30%,#fff6cf,#f2c14e 45%,#a8761f);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 0 8px rgba(255,210,100,.7);animation:cxFall var(--t,1.4s) cubic-bezier(.45,.05,.8,.6) forwards;animation-delay:var(--dl,0s)}
/* กำไรถึงเป้า */
.cx-profit .cx-bg{background:radial-gradient(ellipse at 50% -10%,rgba(255,226,150,.35),transparent 50%),radial-gradient(circle at 50% 55%,#173f35 0%,#07170f 55%,#010403 100%)}
.cx-profit .cx-kicker{color:#ffe08a}
.cx-profit .cx-title{color:#fff;text-shadow:0 0 22px rgba(255,210,100,.55)}
.cx-trophy{position:relative;z-index:2;width:190px;height:190px;transform:translateY(24px) scale(.88);opacity:0;transition:transform 1.1s cubic-bezier(.22,.8,.3,1),opacity .9s ease;filter:drop-shadow(0 0 28px rgba(255,200,80,.7)) drop-shadow(0 18px 22px rgba(0,0,0,.55))}
.cx-ov.go .cx-trophy{transform:none;opacity:1}
.cx-profit .cx-rays{--rk:#f6d27a;animation-duration:24s}
.cx-profit .cx-title{transition:opacity .7s ease,transform .7s ease;transform:translateY(8px)}
.cx-dust{position:absolute;z-index:1;top:-12px;width:var(--z,4px);height:var(--z,4px);border-radius:50%;pointer-events:none;background:#ffe9a8;box-shadow:0 0 6px rgba(255,220,130,.9);opacity:0;animation:cxDust var(--t,7s) linear infinite;animation-delay:var(--dl,0s)}
.cx-twk{position:absolute;pointer-events:none;color:#fff6d6;font-size:var(--z,14px);opacity:0;animation:gbxTwinkle var(--t,2.2s) ease-in-out infinite;animation-delay:var(--dl,0s);text-shadow:0 0 8px #ffd46b}
.cx-shine{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:20px}
.cx-shine::after{content:'';position:absolute;top:-20%;left:-60%;width:40%;height:140%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);opacity:0}
.cx-sheen{transform:skewX(-20deg) translateX(-60px)}
.cx-ov.done .cx-sheen{animation:cxSheen2 1.5s ease-in-out .1s 2}
@keyframes cxSheen2{0%{transform:skewX(-20deg) translateX(-60px)}100%{transform:skewX(-20deg) translateX(190px)}}
@keyframes cxDust{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}50%{transform:translate(var(--dx,12px),50vh)}90%{opacity:.7}100%{transform:translate(calc(var(--dx,12px) * -1),105vh);opacity:0}}
@keyframes cxShine{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
@keyframes cxBadge{0%{transform:translateY(-70vh) rotateY(0) scale(.6)}55%{transform:translateY(0) rotateY(900deg) scale(1.15)}75%{transform:translateY(0) rotateY(1080deg) scale(.95)}100%{transform:translateY(0) rotateY(1080deg) scale(1)}}
@keyframes cxWave{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes cxEmber{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}100%{transform:translateY(-110vh) translateX(var(--dx,20px));opacity:0}}
@keyframes cxFall{0%{transform:translate(0,0) rotateY(0);opacity:1}85%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotateY(720deg) scale(.5);opacity:0}}
@keyframes cxThump{50%{transform:scale(1.08)}}
@keyframes cxRocket{0%{transform:translateY(0);opacity:1}100%{transform:translateY(var(--y));opacity:0}}
@media (max-width:480px){.cx-title{font-size:1.45rem}.cx-num{font-size:3rem}.cx-stage{width:200px;height:200px}.cx-badge,.cx-trophy,.cx-vault{width:160px;height:160px}}
/* [NEW 14 ต.ค.] กล่องเริ่มเทรดบัญชีจริง — ธีม "ห้องนิรภัย" (ไฟสปอตไลต์ทองกวาด + แผ่นทองคำเปลวร่วงช้าๆ) ต่างจาก ocean/jackpot/bday */
.gbx-ov.gbx-vault{background:radial-gradient(ellipse at 50% 108%,#5a4210 0%,#1d1608 34%,#0a0906 70%,#030302 100%)}
.vt-beam{position:absolute;bottom:-8%;width:44vw;max-width:380px;height:135vh;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(to top,rgba(255,214,120,.30),rgba(255,214,120,.06) 55%,rgba(255,214,120,0) 80%);
  clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);transform-origin:50% 100%;animation:vtBeam var(--t,7s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.vt-floor{position:absolute;left:50%;bottom:0;width:140vw;height:38vh;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(246,210,122,.28),rgba(246,210,122,0) 62%)}
.vt-leaf{position:absolute;top:-30px;width:var(--w,9px);height:calc(var(--w,9px) * 1.35);border-radius:2px;pointer-events:none;opacity:.9;
  background:linear-gradient(135deg,#fff7d6,#f6d27a 45%,#b8862b);box-shadow:0 0 6px rgba(255,220,140,.45);animation:vtFall var(--t,10s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes vtBeam{from{transform:rotate(calc(var(--a,0deg) - 13deg))}to{transform:rotate(calc(var(--a,0deg) + 13deg))}}
@keyframes vtFall{0%{transform:translate3d(0,0,0) rotate(0) rotateY(0)}100%{transform:translate3d(var(--dx,40px),112vh,0) rotate(420deg) rotateY(900deg)}}
.gbx-vault .gbx-title,.gbx-vault .gbx-sub,.gbx-vault .bd-crest,.gbx-vault .gbx-stage,.gbx-vault .gbx-hint{position:relative;z-index:2}
.gbx-vault .bd-crest{color:#f6d27a;letter-spacing:.5em}
.gbx-vault .gbx-title{font-size:1.65rem;color:#fff3cf;text-shadow:0 0 20px rgba(255,205,110,.65)}
.gbx-vault .gbx-sub b{color:#f6d27a}
.gbx-vault .gbx-glow{background:radial-gradient(circle,rgba(255,226,150,.7),rgba(246,190,80,0) 65%)}
.gbx-vault .bd-card{background:linear-gradient(160deg,rgba(52,38,10,.95),rgba(16,12,4,.95));border-color:rgba(246,210,122,.55)}
.gbx-vault.open .vt-beam{animation-duration:1.1s}
.gbx-vault.open .vt-floor{animation:vtFlash 1.2s ease-out}
@keyframes vtFlash{0%{opacity:1}30%{opacity:2;filter:brightness(1.8)}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.oc-bub,.oc-fish,.oc-caustic,.jp-spark,.cx-ember,.cx-rays,.vt-beam,.vt-leaf{animation:none!important}}
.bd-banner .ic{font-size:1.5rem;animation:gbxFloat 2.4s ease-in-out infinite}
.bd-banner .tx{flex:1;min-width:0;font-size:.88rem;line-height:1.45}
.bd-banner .tx b{color:#f6d27a}
.bd-banner button{flex:none;border:0;border-radius:999px;padding:.45rem 1rem;font-weight:700;font-size:.82rem;cursor:pointer;background:linear-gradient(90deg,#f6d27a,#e2a93b);color:#241a08}
.msn-task.go,.msn-a.go{cursor:pointer;border-radius:10px;transition:background .15s}
.msn-task.go:hover,.msn-a.go:hover{background:color-mix(in srgb,#d9a441 10%,transparent)}
.msn-goarrow{font-size:.72rem;font-weight:700;color:#b07a2a;white-space:nowrap}
.msn-navdot{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:700;margin-left:auto}
#missionsSection{position:fixed;inset:0;z-index:65;background:var(--paper);overflow-y:auto;padding:0 16px 32px}
#missionsSection .msn-wrap{max-width:960px;margin:0 auto}
.msn-page-bar{position:sticky;top:0;z-index:2;max-width:960px;margin:0 auto 12px;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:12px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.msn-page-bar b{font-size:1rem}
.msn-page-bar{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}
.msn-page-bar .msn-home-logo{height:2.1rem;cursor:pointer;justify-self:start;transition:transform .15s}
/* [NEW 13 ต.ค.] ปุ่มย้อนกลับ + ปุ่มลอยกลับหน้าหลัก — โทนเดียวกับการ์ดโทเคน (เขียวเข้ม + ทอง) */
.msn-home-wrap{display:flex;align-items:center;gap:.65rem;justify-self:start;min-width:0}
.msn-back{display:inline-flex;align-items:center;gap:.45rem;height:2.3rem;padding:0 .95rem 0 .3rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(246,210,122,.38);background:linear-gradient(135deg,#17372e 0%,#0f251f 60%,#0a1a16 100%);color:#f6d27a;
  font-family:inherit;font-weight:600;font-size:.82rem;line-height:1;letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 16px -8px rgba(10,26,22,.7);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.msn-back i{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:linear-gradient(180deg,#fff3c4,#f6d27a 55%,#c99a3e);color:#0f251f;box-shadow:0 0 10px rgba(246,210,122,.35)}
.msn-back:hover{border-color:rgba(246,210,122,.7);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 20px -8px rgba(10,26,22,.8),0 0 0 3px rgba(246,210,122,.12)}
.msn-back:hover i{transform:translateX(-2px)}.msn-back i{transition:transform .18s ease}
.msn-back:active{transform:scale(.96)}
.msn-back:focus-visible,.msn-fab-home:focus-visible{outline:2px solid #f6d27a;outline-offset:3px}
.msn-fab-home{display:none}
@media (max-width:640px){
  .msn-back{padding:0 .3rem;width:2.3rem;justify-content:center}.msn-back span{display:none}
  .msn-fab-home{display:inline-flex;align-items:center;gap:.55rem;position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:5;
    padding:.38rem 1.1rem .38rem .38rem;border-radius:999px;cursor:pointer;overflow:hidden;
    border:1px solid rgba(246,210,122,.45);background:linear-gradient(135deg,rgba(23,55,46,.94),rgba(10,26,22,.94));color:#f6d27a;
    font-family:inherit;font-weight:600;font-size:.88rem;line-height:1;letter-spacing:.01em;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 14px 30px -10px rgba(0,0,0,.6),0 0 22px -6px rgba(246,210,122,.35);
    transform:translateX(-50%);animation:msnFabIn .4s cubic-bezier(.2,.8,.2,1) both}
  .msn-fab-home i{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:linear-gradient(180deg,#fff3c4,#f6d27a 55%,#c99a3e);color:#0f251f;box-shadow:0 0 12px rgba(246,210,122,.4)}
  .msn-fab-home::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,243,196,.22),transparent);animation:msnFabShine 4.5s ease-in-out 1.2s infinite;pointer-events:none}
  .msn-fab-home:active{transform:translateX(-50%) scale(.96)}
  #missionsSection{padding-bottom:92px}
}
@keyframes msnFabIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes msnFabShine{0%,70%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.msn-fab-home,.msn-fab-home::after{animation:none}.msn-fab-home{transform:translateX(-50%)}}
.msn-page-bar .msn-home-logo:hover{transform:scale(1.04)}
.msn-page-bar .msn-home-logo:active{transform:scale(.96)}
@media (max-width:640px){.msn-page-bar{grid-template-columns:auto 1fr}.msn-page-bar>span:last-child{display:none}.msn-page-bar .msn-home-logo{height:1.8rem}.msn-page-bar b{justify-self:end}}
/* [แก้ 8 ต.ค. คุยกับ user "การ์ดภารกิจยังไม่สะดุดตา ทำให้อลังการ"] แถบภารกิจแบบพรีเมียม — ขอบทองหมุน แสงวาบ กล่องลอย ตัวเลขเด้ง */
@property --msnA{syntax:'<angle>';inherits:false;initial-value:0deg}
.msn-strip{position:relative;isolation:isolate;overflow:hidden;cursor:pointer;color:#fff;border-radius:20px;border:2px solid transparent;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1rem 1.2rem;
  background:radial-gradient(120% 140% at 0% 0%,#2b6b5a 0%,#123f35 45%,#071f1a 100%) padding-box,
    conic-gradient(from 200deg,#f6d27a,#a8761f,#fff4c9,#e2a93b,#7a5414,#f6d27a) border-box;
  box-shadow:0 6px 14px -10px rgba(10,40,33,.6);margin-bottom:.35rem;
  transition:transform .2s ease,box-shadow .2s ease}
.msn-strip:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(10,40,33,.7),0 0 16px -6px rgba(246,210,122,.5)}
.msn-strip::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 12% 50%,rgba(246,210,122,.28),transparent 40%),
    radial-gradient(circle at 90% 20%,rgba(127,214,180,.14),transparent 35%)}
.msn-strip::after{content:'';position:absolute;top:0;bottom:0;width:38%;left:-45%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);animation:msnSweep 4.2s ease-in-out infinite}
.msn-strip .s-gift{position:relative;width:92px;height:96px;margin:-6px -4px -6px -6px;flex:none;animation:msnGiftFloat 2.6s ease-in-out infinite;will-change:transform}
.msn-strip.has-claim .s-gift{animation:msnGiftWiggle 2.2s ease-in-out infinite}
.msn-strip .s-gift svg{position:relative;width:100%;height:100%;overflow:visible}
.msn-strip .s-gift::before{content:'';position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,120,.55),rgba(255,190,80,.12) 45%,transparent 70%);animation:gbxPulse 1.8s ease-in-out infinite alternate}
.msn-strip .s-badge{position:absolute;top:14px;right:2px;z-index:2;min-width:24px;height:24px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff5a5a,#c81e1e);color:#fff;font-weight:800;font-size:.8rem;border:2px solid #0b2a24;box-shadow:0 0 0 0 rgba(255,80,80,.7);animation:msnPing 1.6s ease-out infinite}
.msn-strip .s-t{min-width:0}
.msn-strip .s-kicker{display:inline-flex;align-items:center;gap:.35rem;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7fd6b4}
.msn-strip .s-title{display:block;font-size:1.22rem;font-weight:800;line-height:1.25;margin:.1rem 0 .25rem;
  background:linear-gradient(90deg,#fff4c9,#f6d27a 40%,#fff 60%,#e2a93b);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:msnTitleShine 4s linear infinite}
.msn-strip .s-sub{font-size:.78rem;color:rgba(255,255,255,.82)}
.msn-strip .s-steps{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.55rem}
.msn-strip .s-step{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;padding:.28rem .65rem;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.msn-strip .s-step.ok{background:rgba(34,197,94,.22);border-color:rgba(74,222,128,.45);color:#bbf7d0}
.msn-strip .s-step.hot{background:rgba(246,210,122,.18);border-color:rgba(246,210,122,.55);color:#ffe7a3;animation:msnChipGlow 1.8s ease-in-out infinite}
.msn-strip .s-dots{display:inline-flex;gap:3px;margin-left:.15rem}
.msn-strip .s-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}
.msn-strip .s-dots i.on{background:#4ade80;box-shadow:0 0 6px #4ade80}
.msn-strip .s-go{position:relative;overflow:hidden;z-index:2;font-weight:800;font-size:.86rem;white-space:nowrap;color:#241a08;border-radius:12px;padding:.7rem 1.1rem;
  background:linear-gradient(135deg,#fff1b8,#f2c14e 45%,#d29a2e);box-shadow:0 8px 20px -6px rgba(242,193,78,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.msn-strip .s-go::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);animation:msnSweep 2.6s ease-in-out infinite}
@media (max-width:640px){.msn-strip{grid-template-columns:auto 1fr;gap:.8rem;padding:.9rem}.msn-strip .s-go{grid-column:1 / -1;text-align:center}.msn-strip .s-title{font-size:1.05rem}.msn-strip .s-gift{width:72px;height:76px}.msn-strip .s-step{font-size:.66rem;padding:.2rem .5rem}.msn-strip .s-steps{gap:.3rem}}
@keyframes msnBorder{to{--msnA:360deg}}
@keyframes msnSweep{0%,60%{transform:translateX(0)}100%{transform:translateX(480%)}}
/* [แก้ 8 ต.ค. คุยกับ user "เปิดภารกิจแล้วเว็บช้า"] ลดงานวาดซ้ำ: เลิกหมุนขอบ conic (repaint ทุกเฟรม), แสงวาบใช้ transform,
   ตัด filter drop-shadow บนกล่องที่ขยับ, หยุดแอนิเมชันภายใน SVG ของกล่อง, หยุดทั้งหมดตอนแถบไม่อยู่ในจอ/สลับแท็บ */
.msn-strip::after,.msn-box::after,.msn-strip .s-go::after,.msn-box .cta::after{will-change:transform}
.msn-strip .gbx-sheen,.msn-box .gbx-sheen{display:none}
.msn-strip .gbx-twk,.msn-box .gbx-twk{animation:none!important;opacity:.85}
.msn-strip .s-title,.msn-box .t b{animation:none!important;background-position:0 0}
.msn-idle,.msn-idle *,.msn-idle *::before,.msn-idle *::after,.msn-idle::before,.msn-idle::after{animation-play-state:paused!important}
@keyframes msnGiftFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes msnGiftWiggle{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(-10deg) scale(1.05)}72%{transform:rotate(9deg) scale(1.05)}79%{transform:rotate(-6deg)}86%{transform:rotate(4deg)}}
@keyframes msnPing{0%{box-shadow:0 0 0 0 rgba(255,80,80,.7)}100%{box-shadow:0 0 0 12px rgba(255,80,80,0)}}
@keyframes msnTitleShine{to{background-position:-200% 0}}
@keyframes msnChipGlow{0%,100%{box-shadow:0 0 0 0 rgba(246,210,122,0)}50%{box-shadow:0 0 12px 0 rgba(246,210,122,.45)}}
@media (prefers-reduced-motion:reduce){.msn-strip,.msn-strip::after,.msn-strip .s-gift,.msn-strip .s-badge,.msn-strip .s-title,.msn-strip .s-go::after{animation:none!important}}
#missionsSection.msn-flash .msn-card{animation:msnFlash 1.4s ease}
@keyframes msnFlash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px #d9a441}}
/* ================== [26 ต.ค.] ป๊อปอัปชวนเพื่อน (rfp) ================== */
.rfp-ov{position:fixed;inset:0;z-index:9300;background:rgba(6,12,10,.62);display:flex;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(3px)}
.rfp-card{position:relative;width:min(440px,100%);max-height:92vh;overflow-y:auto;border-radius:22px;background:var(--paper-raised,#fff);color:var(--ink);padding:1.3rem 1.2rem 1.1rem;border:1px solid color-mix(in srgb,#10b981 40%,var(--line));box-shadow:0 24px 60px -20px rgba(0,0,0,.55)}
.rfp-x{position:absolute;top:.6rem;right:.7rem;width:32px;height:32px;border-radius:50%;border:none;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);font-size:1rem;cursor:pointer}
.rfp-card h3{margin:0 2rem .25rem 0;font-size:1.15rem;font-family:'Kanit','Prompt',sans-serif;font-weight:600}
.rfp-sub{font-size:.82rem;color:var(--ink-muted);line-height:1.5;margin-bottom:.9rem}
.rfp-code{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .9rem;border-radius:14px;background:color-mix(in srgb,#10b981 10%,transparent);border:1.5px dashed #10b981}
.rfp-code small{display:block;font-size:.7rem;color:var(--ink-muted)}
.rfp-code b{font-family:ui-monospace,Menlo,monospace;font-size:1.35rem;letter-spacing:.08em;color:#047857}
.rfp-link{display:flex;gap:.4rem;margin:.6rem 0}
.rfp-link input{flex:1;min-width:0;font-size:.75rem;padding:.5rem .6rem;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.rfp-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin:.2rem 0 .9rem}
.rfp-btn{border:none;border-radius:12px;padding:.62rem .4rem;font-weight:600;font-size:.82rem;font-family:inherit;cursor:pointer;color:#fff}
.rfp-btn.cp{background:#047857}.rfp-btn.ln{background:#06c755}.rfp-btn.fb{background:#1877f2}
.rfp-btn.sh{grid-column:1/-1;background:#d9a441;color:#241a08}
.rfp-box{border:1px solid var(--line);border-radius:14px;padding:.7rem .85rem;margin-bottom:.6rem;font-size:.8rem;line-height:1.55}
.rfp-box b{font-weight:600}
.rfp-box .row{display:flex;justify-content:space-between;gap:.6rem;padding:.2rem 0}
.rfp-n{display:flex;align-items:baseline;gap:.4rem}.rfp-n b{font-size:1.5rem;color:#047857;font-family:'Kanit','Prompt',sans-serif}
.rfp-note{font-size:.7rem;color:var(--ink-muted);line-height:1.5;margin-top:.5rem}
.rfp-evb{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-radius:16px;cursor:pointer;color:#fff;background:linear-gradient(120deg,#064e3b,#0f766e);border:1px solid rgba(110,231,183,.5)}
.rfp-evb .tx{flex:1;min-width:0;font-size:.82rem;line-height:1.4}.rfp-evb .tx b{display:block;font-size:.95rem}
.rfp-evb .go{flex:none;font-weight:600;font-size:.8rem;padding:.4rem .8rem;border-radius:10px;background:#f6d27a;color:#241a08}
/* ================== [27 ต.ค.] เริ่มต้นใช้งาน 3 ขั้น (gs) ================== */
.tl-banner{position:relative;display:flex;align-items:center;gap:.9rem;padding:.95rem 1.1rem;border-radius:18px;margin-bottom:.9rem;color:#3a2200;background:linear-gradient(135deg,#ffe9a6,#ffc04d);border:2px solid #ffb21f;box-shadow:0 6px 22px rgba(255,170,30,.38)}
.tl-banner.out{color:#fff;background:linear-gradient(135deg,#ef4444,#b91c1c);border-color:#fecaca;box-shadow:0 6px 24px rgba(220,38,38,.45)}
.tl-banner .ic{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.5rem;background:rgba(255,255,255,.55);animation:tlPulse 1.6s ease-in-out infinite}
.tl-banner.out .ic{background:rgba(255,255,255,.25)}
.tl-banner .tx{flex:1;min-width:0}.tl-banner .tx b{display:block;font-size:1.02rem;line-height:1.25}.tl-banner .tx span{display:block;font-size:.8rem;opacity:.92;margin-top:.15rem}
.tl-banner .bar{height:6px;border-radius:99px;background:rgba(0,0,0,.14);margin-top:.5rem;overflow:hidden}.tl-banner .bar i{display:block;height:100%;border-radius:99px;background:currentColor;opacity:.75}
.tl-banner button{flex:none;border:0;font:inherit;font-weight:800;font-size:.9rem;padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#0e7490,#0f9f8f);box-shadow:0 3px 12px rgba(0,0,0,.25);animation:tlBtn 1.6s ease-in-out infinite}
.tl-banner.out button{color:#b91c1c;background:#fff}
@keyframes tlPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes tlBtn{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
#dashTopBarTokenBalance.tl-low{color:#ff9f1a!important}#dashTopBarTokenBalance.tl-out{color:#ff5a5a!important}
@keyframes tkGlowA{0%,100%{box-shadow:0 0 0 1px rgba(255,159,26,.85),0 0 6px rgba(255,159,26,.35)}50%{box-shadow:0 0 0 1px rgba(255,159,26,1),0 0 18px 3px rgba(255,159,26,.6)}}
@keyframes tkGlowR{0%,100%{box-shadow:0 0 0 1px rgba(255,90,90,.9),0 0 8px rgba(255,90,90,.4)}50%{box-shadow:0 0 0 1px rgba(255,90,90,1),0 0 22px 4px rgba(255,90,90,.7)}}
.dash-topbar-token.tk-low,.dash-topbar-token.tk-out{cursor:pointer;border-color:transparent}
.dash-topbar-token.tk-low{animation:tkGlowA 1.8s ease-in-out infinite}.dash-topbar-token.tk-out{animation:tkGlowR 1.3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.dash-topbar-token.tk-low,.dash-topbar-token.tk-out{animation:none}.dash-topbar-token.tk-low{box-shadow:0 0 0 1px #ff9f1a,0 0 12px rgba(255,159,26,.5)}.dash-topbar-token.tk-out{box-shadow:0 0 0 1px #ff5a5a,0 0 14px rgba(255,90,90,.55)}}
@media (max-width:560px){.tl-banner{flex-wrap:wrap}.tl-banner button{width:100%}}
@media (prefers-reduced-motion:reduce){.tl-banner .ic,.tl-banner button,#dashTopBarTokenBalance.tl-low,#dashTopBarTokenBalance.tl-out{animation:none}}
#heroCombo.hc-low{animation:hcRingA 2s ease-in-out infinite}#heroCombo.hc-out{animation:hcRingR 1.5s ease-in-out infinite}
@keyframes hcRingA{0%,100%{box-shadow:0 0 0 2px rgba(255,176,32,.55),0 0 18px 2px rgba(255,176,32,.35)}50%{box-shadow:0 0 0 3px rgba(255,176,32,.95),0 0 30px 6px rgba(255,176,32,.6)}}
@keyframes hcRingR{0%,100%{box-shadow:0 0 0 2px rgba(255,80,80,.6),0 0 20px 2px rgba(255,80,80,.4)}50%{box-shadow:0 0 0 3px rgba(255,80,80,1),0 0 34px 8px rgba(255,80,80,.65)}}
.hc-lowrib{position:relative;display:flex;align-items:center;gap:.55rem;width:calc(100% + 2.2rem);margin:-1rem -1.1rem .8rem;padding:.55rem 1.1rem;border:0;border-radius:22px 22px 0 0;font:inherit;text-align:left;cursor:pointer;color:#3a2200;background:linear-gradient(90deg,#ffd36b,#ffb21f);overflow:hidden}
.hc-out .hc-lowrib{color:#fff;background:linear-gradient(90deg,#ef4444,#b91c1c)}
.hc-lowrib::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:hcShine 2.6s ease-in-out infinite}
.hc-lowrib .i{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;background:rgba(255,255,255,.5)}
.hc-lowrib .t{flex:1;min-width:0;font-weight:800;font-size:.84rem;line-height:1.25}.hc-lowrib .t small{display:block;font-weight:600;font-size:.7rem;opacity:.9}
.hc-lowrib .acts{flex:none;display:flex;gap:.4rem;align-items:center}.hc-lowrib .ok{font:inherit;font-weight:800;font-size:.76rem;padding:.3rem .7rem;border-radius:999px;border:1px solid rgba(16,32,43,.35);background:rgba(255,255,255,.35);color:inherit;cursor:pointer}.hc-out .hc-lowrib .ok{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.15)}
@media (max-width:480px){.hc-lowrib{flex-wrap:wrap;row-gap:.45rem}.hc-lowrib .t{flex:1 1 calc(100% - 40px)}.hc-lowrib .acts{width:100%;justify-content:flex-end}}
.hc-lowrib .go{border:0;font-family:inherit;cursor:pointer;flex:none;font-weight:900;font-size:.8rem;padding:.3rem .75rem;border-radius:999px;background:#10202b;color:#ffe08a;box-shadow:0 2px 8px rgba(0,0,0,.3);animation:tlBtn 1.6s ease-in-out infinite}
.hc-out .hc-lowrib .go{background:#fff;color:#b91c1c}
@keyframes hcShine{0%{left:-40%}60%,100%{left:130%}}
#heroCombo.hc-low #tokenBalanceUnits .expiry-unit-value{color:#ffb020!important;text-shadow:0 0 14px rgba(255,176,32,.6)}
#heroCombo.hc-out #tokenBalanceUnits .expiry-unit-value{color:#ff6b6b!important;text-shadow:0 0 14px rgba(255,80,80,.6)}
#heroCombo.hc-low .hc-topup,#heroCombo.hc-out .hc-topup{animation:hcPing 1.4s ease-out infinite}
@keyframes hcPing{0%{box-shadow:0 0 0 0 rgba(255,200,60,.9)}80%,100%{box-shadow:0 0 0 12px rgba(255,200,60,0)}}
@media (prefers-reduced-motion:reduce){#heroCombo.hc-low,#heroCombo.hc-out,.hc-lowrib::after,.hc-lowrib .go,#heroCombo.hc-low .hc-topup,#heroCombo.hc-out .hc-topup{animation:none}}
.nosrv-note{padding:.7rem .85rem;border-radius:12px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--teal);color:var(--ink);font-size:.8rem;line-height:1.55}.nosrv-note b{display:block;font-size:.88rem;margin-bottom:.1rem}.nosrv-note span{display:block;color:var(--ink-muted)}.nosrv-note a{display:inline-block;margin-top:.35rem;font-weight:700;color:var(--teal);text-decoration:underline}
/* [2 พ.ย.] ปุ่ม LINE Login + แถว LINE/อีเมลในโปรไฟล์ */
.line-btn{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;max-width:320px;margin:0 auto;height:44px;border-radius:8px;background:#06C755;color:#fff!important;font-weight:700;font-size:.95rem;text-decoration:none!important;border:0;cursor:pointer;box-shadow:0 2px 8px rgba(6,199,85,.25)}.line-btn:hover{background:#05b34c}.line-btn:active{transform:translateY(1px)}
.lnk-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.lnk-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;background:rgba(6,199,85,.12);color:#05a046;font-size:.78rem;font-weight:700}
.lnk-mini{padding:.32rem .75rem;border-radius:8px;border:1px solid var(--line);background:var(--paper-raised);font-size:.78rem;font-weight:700;cursor:pointer;color:var(--ink)}.lnk-mini.g{background:#06C755;border-color:#06C755;color:#fff}
.line-consent{max-width:320px;margin:-.35rem auto 0;font-size:.7rem;line-height:1.5;color:var(--ink-muted);text-align:center}.line-consent b{color:var(--ink)}.line-consent a{text-decoration:underline;margin-left:.2rem}
/* [2 พ.ย.] แถบตัววิ่งโฮโลแกรมขอบล่างห้อง ตอนรอจังหวะ — ป้าย Bot Online (มุมซ้ายล่าง) อยู่ปลายซ้ายของแถบ */
.rbr-say{position:absolute;left:6px;right:6px;bottom:3px;height:22px;z-index:47;display:flex;align-items:center;gap:.45rem;padding-left:9px;border-radius:7px;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,47,73,.55),rgba(8,30,40,.38) 40%,rgba(8,47,73,.55));border:1px solid rgba(103,232,249,.28);box-shadow:0 0 12px rgba(34,211,238,.18),inset 0 0 10px rgba(34,211,238,.10);overflow:hidden;animation:rsIn .6s ease-out}
.rbr-say::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(165,243,252,.07) 0 1px,transparent 1px 3px);pointer-events:none}
.rbr-say::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(165,243,252,.14),transparent);animation:rsSweep 7s linear infinite;will-change:transform;pointer-events:none}
.rbr-say .rs-tag{flex:none;font-size:.56rem;font-weight:800;letter-spacing:.06em;color:#0b2530;background:#67e8f9;padding:.06rem .4rem;border-radius:4px;box-shadow:0 0 8px rgba(103,232,249,.6)}
.rbr-say .rs-vp{position:relative;flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rbr-say .rs-run{display:inline-flex;align-items:center;white-space:nowrap;animation:rsRun var(--rs-d,60s) linear infinite;will-change:transform}
.rbr-say .rs-run span{font-size:.7rem;color:#cffafe;text-shadow:0 0 6px rgba(34,211,238,.75),0 0 1px #fff;letter-spacing:.01em}
.rbr-say .rs-run i{font-style:normal;font-size:.5rem;color:#67e8f9;opacity:.75;margin:0 .9rem;text-shadow:0 0 6px rgba(103,232,249,.9)}
/* [2 พ.ย. user "เอาคำว่า Bot Online ออก เหลือแค่จุดเขียว"] ในห้องโรบอทเหลือแค่จุดสถานะ (เขียว=ออนไลน์ แดง=ออฟไลน์) */
/* [3 พ.ย. user "ย้ายจุดเขียวไปมุมบนซ้าย"] จุดสถานะอยู่หน้าปุ่มจัดห้อง (ปุ่มจัดห้องขยับขวา 16px · ปุ่มเสียง/สั่นวางต่อจากปุ่มจัดห้องเองใน place()) */
.rbr>.bot-status-badge{padding:0!important;background:none!important;top:18px!important;bottom:auto!important;left:12px!important;opacity:1!important}
.rbr.rbr-edit>.bot-status-badge{display:none!important} /* โหมดจัดห้อง แถบเครื่องมือทับมุมบนซ้าย */
.rbr>.bot-status-badge #botStatusText{display:none}
.rbr>.bot-status-badge .bot-status-dot{width:.5rem!important;height:.5rem!important}
.rbr>.bot-status-badge.is-online .bot-status-dot{background:#34d399;animation:rsDot 2.4s ease-out infinite}
.rbr.rbr-pause>.bot-status-badge .bot-status-dot{animation-play-state:paused}
.rbr.has-say>.bot-status-badge{display:none!important}
.rbr-say .rs-dot{flex:none;position:relative;z-index:1;width:.5rem;height:.5rem;border-radius:50%;background:#34d399;animation:rsDot 2.4s ease-out infinite}
.rbr.rbr-pause .rbr-say .rs-dot{animation-play-state:paused}
@keyframes rsDot{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}70%,100%{box-shadow:0 0 0 6px rgba(52,211,153,0)}}
@keyframes rsRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rsSweep{to{transform:translateX(340%)}}
.rbr.rbr-pause .rbr-say .rs-run,.rbr.rbr-pause .rbr-say::after{animation-play-state:paused}
.rbr-say .rs-vp{pointer-events:auto;cursor:default}.rbr-say:hover .rs-run,.rbr-say.rs-hold .rs-run{animation-play-state:paused} /* [2 พ.ย.] ชี้เมาส์/แตะ = หยุดให้อ่าน */ /* ห้องเลื่อนพ้นจอ/เปิดร้าน = หยุดวิ่ง ประหยัดเครื่อง */
@keyframes rsIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* [3 พ.ย. user "ย้ายไปไว้จอโฮโลแกรมล่างสุด ไม่รกห้อง"] แถบตัววิ่งแบบเล็ก อยู่ล่างสุดในจอสถานะ (rbrSayMount) */
/* [3 พ.ย. รอบ 2 user "เล็กไปอ่านไม่ออก"] ตัวใหญ่ขึ้น + พื้นเข้มขึ้นให้ตัดกับฉาก */
.rbr-say.mini{position:relative;left:auto;right:auto;bottom:auto;z-index:2;flex:none;height:26px;margin-top:auto;padding-left:0;gap:0;border-radius:7px;
  background:rgba(3,16,28,.78);border:1px solid rgba(103,232,249,.4);box-shadow:0 0 10px rgba(34,211,238,.18);pointer-events:auto}
.rbr-say.mini .rs-run span{font-size:.82rem;font-weight:600;color:#ecfeff;text-shadow:0 0 4px rgba(34,211,238,.6),0 1px 1px #000;letter-spacing:.01em}.rbr-say.mini .rs-run i{margin:0 .8rem}
@media (max-width:767px){.rbr-say.mini{height:22px}.rbr-say.mini .rs-run span{font-size:.72rem}}
.rbr-scr>.rbr-say.mini{margin-top:5px;width:0;min-width:100%}
@media (max-width:480px){.rbr-say{height:20px;padding-left:8px}.rbr-say .rs-tag{display:none}.rbr-say .rs-run span{font-size:.66rem}}
@media (prefers-reduced-motion:reduce){.rbr-say .rs-run{animation:none}.rbr-say::after{animation:none;display:none}}
.em-step{display:flex;flex-direction:column;gap:.6rem}.em-step input{width:100%;height:46px;padding:0 .9rem;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:1rem;outline:none}.em-step input:focus{border-color:var(--teal)}#emCode{letter-spacing:.3em;text-align:center;font-size:1.2rem}

.hero-nosrv{display:flex;align-items:center;gap:.8rem;max-width:34rem;box-sizing:border-box;padding:.85rem 1rem .85rem 1.3rem;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--sidebar-ink,#fff);text-align:left}.hero-nosrv .tx{flex:1;min-width:0}.hero-nosrv b{display:block;font-size:.86rem;line-height:1.3;font-weight:700}.hero-nosrv span{display:block;font-size:.76rem;line-height:1.45;color:var(--sidebar-ink-muted,rgba(255,255,255,.7));margin-top:.1rem}.hero-nosrv a{flex:none;font-weight:700;font-size:.8rem;padding:.45rem .95rem;border-radius:999px;color:var(--sidebar-ink,#fff);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);text-decoration:none;transition:background .2s,border-color .2s}.hero-nosrv a:hover{background:rgba(246,196,83,.2);border-color:rgba(246,196,83,.6)}@media (max-width:560px){.hero-nosrv{padding:.85rem 1rem 1rem 1.15rem}}
.hst-card{width:min(460px,100%)}.hst-card h3{margin:0 2rem .2rem 0;font-size:1.15rem}.hst-st{margin:.6rem 0 .2rem;padding:.5rem .75rem;border-radius:12px;background:color-mix(in srgb,#10b981 14%,transparent);font-size:.85rem}
.hst-l{display:flex;flex-direction:column;gap:.25rem;margin-top:.7rem;font-size:.78rem;font-weight:600;color:var(--ink-muted)}.hst-l input{font:inherit;font-weight:500;font-size:.92rem;padding:.6rem .75rem;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%;box-sizing:border-box}.hst-l small{font-weight:400;font-size:.72rem}
.hst-pw{display:flex;gap:.4rem}.hst-pw button{flex:none;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:12px;padding:0 .8rem;font:inherit;font-size:.8rem;cursor:pointer}
.hst-safe{margin-top:.6rem;padding:.6rem .75rem;border-radius:11px;border:1px solid color-mix(in srgb,var(--good,#1f8a6a) 35%,transparent);background:color-mix(in srgb,var(--good,#1f8a6a) 8%,transparent);font-size:.76rem;line-height:1.55;color:var(--ink-muted)}.hst-safe b{display:block;color:var(--ink);font-size:.82rem;margin-bottom:.15rem}
.hst-nob{margin-top:.45rem;font-size:.78rem;color:var(--ink-muted)}.hst-nob a{color:var(--accent,#d9a441);font-weight:600;text-decoration:underline}
.hst-ck{display:flex;gap:.55rem;align-items:flex-start;margin-top:.85rem;font-size:.76rem;line-height:1.5;color:var(--ink-muted)}.hst-ck input{margin-top:.2rem;flex:none}
.hst-demo{margin-top:.5rem;padding:.5rem .75rem;border-radius:12px;font-size:.8rem;line-height:1.5;background:color-mix(in srgb,var(--ink) 6%,transparent)}.hst-demo.end{background:color-mix(in srgb,#f59e0b 16%,transparent)}
.hst-fix{margin:.6rem 0 .1rem;padding:.6rem .8rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent);font-size:.84rem;line-height:1.5}.hst-fix b{display:block;color:var(--bad)}.hst-fix span{display:block;color:var(--ink-muted);font-size:.78rem}.hst-l.bad{color:var(--bad)}.hst-l.bad input{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 15%,transparent)}
.hst-err{margin-top:.6rem;font-size:.8rem;color:var(--bad)}.hst-act{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.9rem}.hst-go{flex:1;min-width:10rem;border:0;font:inherit;font-weight:800;padding:.7rem 1rem;border-radius:999px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#0e7490,#0f9f8f)}.hst-go:disabled{opacity:.6}.hst-del{border:0;background:none;color:var(--bad);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer}
.pkg-host{padding:.5rem .7rem;border-radius:12px;background:color-mix(in srgb,#10b981 13%,transparent);border:1px solid color-mix(in srgb,#10b981 45%,transparent);line-height:1.35}.pkg-host b{display:block;font-size:.82rem;color:#34d399}.pkg-host span{display:block;font-size:.72rem;opacity:.85}
/* [29 ต.ค. user "หน้านี้ทั้งหมดเอาไอคอนออก ดูเว็บไม่น่าเชื่อถือ"] หน้าแรก (ก่อนล็อกอิน) ซ่อนไอคอนตกแต่งทั้งหมด
   เก็บไว้เฉพาะที่ใช้งาน: ปุ่มเมนู/ภาษา ลูกศรเลื่อน โลโก้ LINE/Facebook · ✓ ในตารางเปรียบเทียบเป็นข้อมูล (มี/ไม่มี) ไม่ใช่ไอคอนตกแต่ง
   ตัวอย่างการ์ดแดชบอร์ดใน "ดูก่อนสมัคร" (.sx-card) เป็นภาพจำลองหน้าจริง ไม่แตะ */
#loginView .auth-chip > svg,#loginView .auth-feature-icon,#loginView .auth-proscons-card h3 svg,#loginView .auth-proscons-list svg,
#loginView .auth-warning-box h3 svg,#loginView .auth-warning-list svg,#loginView .auth-callout-key svg,#loginView li.flex.items-center.gap-2 > svg,
#loginView .flex.items-center.gap-2.text-xs > svg,#loginView .risk-card-icon,#loginView .risk-compare-emoji,#loginView .news-cal-icon{display:none!important}
#loginView .auth-chip{gap:.4rem}
/* [29 ต.ค.] กระเป๋า v2 — หน้าต่างแยกจากร้าน · กระชับ · ไม่มีไอคอนตกแต่ง (กฎข้อ 38)
   [29 ต.ค. user "ดูสวยพรีเมียม ลักซูรี่ หรูหรา" → "เอาสีเขียวเว็บเรา"] โทนเขียวมรกตเข้มของเว็บ + ทองแชมเปญ เส้นทองบาง · สีคงที่ไม่ขึ้นกับธีมการ์ด (ตั้งตัวแปรสีภายใน .bg2 ให้รูปของในร้านใช้ตามด้วย) · ไม่มีเอฟเฟกต์หนัก (ไม่มี blur/วิดีโอ) */
.bg2-ov{position:fixed;inset:0;z-index:61;display:flex;align-items:center;justify-content:center;padding:1rem;background:radial-gradient(120% 90% at 50% 0%,rgba(10,46,38,.8),rgba(2,10,8,.88));overscroll-behavior:none}
.bg2-ov[hidden]{display:none}
.bg2{--g1:#f6e7b8;--g2:#d8b46a;--g3:#a8823f;--gold:linear-gradient(135deg,#f8ecc6 0%,#e3c27a 38%,#b98d45 70%,#f1dca2 100%);
  --ink:#f2ead8;--ink-muted:rgba(232,236,222,.6);--line:rgba(216,180,106,.18);--paper:rgba(255,255,255,.03);--paper-raised:#0f2621;
  position:relative;width:min(780px,100%);height:min(86vh,840px);display:flex;flex-direction:column;border-radius:22px;color:var(--ink);overflow:hidden;
  background:radial-gradient(140% 60% at 50% -10%,rgba(216,180,106,.15),transparent 55%),radial-gradient(90% 50% at 100% 100%,rgba(16,120,95,.18),transparent 60%),linear-gradient(180deg,#123129 0%,#0b231d 55%,#081a16 100%);
  border:1px solid rgba(216,180,106,.38);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 40px 90px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,236,190,.12)}
.bg2::before{content:"";position:absolute;inset:6px;border-radius:17px;border:1px solid rgba(216,180,106,.12);pointer-events:none}
.bg2-hd{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;padding:1.15rem 1.3rem .7rem}
.bg2-hd h3{margin:0;font-family:'Kanit','Prompt',sans-serif;font-size:1.32rem;font-weight:600;letter-spacing:.01em;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.25}
.bg2-hd h3::before{content:"PLATOO  COLLECTION";display:block;font-family:'IBM Plex Sans',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.32em;color:var(--g2);-webkit-text-fill-color:var(--g2);opacity:.75;margin-bottom:.2rem}
.bg2-hd small{display:block;font-size:.76rem;color:var(--ink-muted);margin-top:.25rem}.bg2-hd small b{color:var(--g1);font-variant-numeric:tabular-nums;font-weight:600}
.bg2-hr{display:flex;align-items:center;gap:.45rem}
/* [3 พ.ย. user "ปุ่มเติมโทเคนตรงร้านค้าทำสวยๆเด่นๆ"] ปุ่มหลักทองโลหะ (กฎ 33.2) · วง + สีเข้ม · แสงวิ่งผ่าน 3 รอบตอนเปิดร้าน แล้วหยุด (กฎ 63) · ชี้เมาส์ = แสงวิ่งอีกรอบ */
.sh2 .bg2-lnk.sh2-top{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:.45rem;padding:.42rem 1.05rem .42rem .42rem;border-radius:999px;border:1px solid #ffe7a3;
  background:linear-gradient(180deg,#fff3bd 0%,#f6d470 30%,#e0a830 58%,#b77d1c 82%,#9a6512 100%);color:#2a1a02;font-weight:600;font-size:.8rem;letter-spacing:.02em;text-shadow:0 1px 0 rgba(255,244,200,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 0 rgba(110,68,8,.45),0 0 0 1px rgba(110,68,8,.55),0 8px 20px -8px rgba(224,168,48,.85),0 0 18px -4px rgba(246,210,112,.55);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.sh2 .bg2-lnk.sh2-top .pl{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a300a,#1f1302 75%);box-shadow:inset 0 0 0 1px rgba(255,226,140,.55),0 1px 2px rgba(0,0,0,.35)}
.sh2 .bg2-lnk.sh2-top .pl::before,.sh2 .bg2-lnk.sh2-top .pl::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;border-radius:2px;background:linear-gradient(90deg,#fff1b8,#f2c14e)}
.sh2 .bg2-lnk.sh2-top .pl::after{transform:rotate(90deg)}
.sh2 .bg2-lnk.sh2-top span{position:relative;z-index:1}
.sh2 .bg2-lnk.sh2-top::after{content:"";position:absolute;inset:-2px auto -2px 0;width:42%;z-index:0;pointer-events:none;background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.75) 50%,transparent 100%);transform:translateX(-160%) skewX(-18deg);animation:sh2TopShine 2.6s ease-in-out .6s 3}
.sh2 .bg2-lnk.sh2-top:hover{transform:translateY(-1px);filter:brightness(1.06) saturate(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(110,68,8,.45),0 0 0 1px rgba(110,68,8,.55),0 12px 26px -8px rgba(224,168,48,.95),0 0 26px -4px rgba(246,210,112,.7)}
.sh2 .bg2-lnk.sh2-top:hover::after{animation:sh2TopShine 1.1s ease-in-out 1}
.sh2 .bg2-lnk.sh2-top:active{transform:translateY(1px) scale(.98)}
.sh2 .bg2-lnk.sh2-top:focus-visible{outline:2px solid #fff3bd;outline-offset:2px}
@keyframes sh2TopShine{0%{transform:translateX(-160%) skewX(-18deg)}60%,100%{transform:translateX(320%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){.sh2 .bg2-lnk.sh2-top::after{animation:none;display:none}.sh2 .bg2-lnk.sh2-top{transition:none}}
.bg2-lnk{font:inherit;font-size:.76rem;font-weight:600;letter-spacing:.02em;padding:.42rem .95rem;border-radius:999px;border:1px solid rgba(216,180,106,.45);background:rgba(216,180,106,.06);color:var(--g1);cursor:pointer;transition:background .2s}
.bg2-lnk:hover{background:rgba(216,180,106,.14)}
.bg2-x{width:34px;height:34px;border-radius:50%;border:1px solid rgba(216,180,106,.25);background:transparent;color:var(--g1);cursor:pointer;font-size:.85rem}
.bg2-tabs{position:relative;display:flex;gap:.2rem;padding:0 1.3rem;border-bottom:1px solid var(--line)}
.bg2-tabs::after{content:"";position:absolute;left:1.3rem;right:1.3rem;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(216,180,106,.35),transparent)}
.bg2-tabs button{position:relative;font:inherit;font-size:.84rem;font-weight:500;letter-spacing:.02em;padding:.7rem .8rem;border:0;background:none;color:var(--ink-muted);cursor:pointer;white-space:nowrap;transition:color .2s}
.bg2-tabs button:hover{color:var(--ink)}
.bg2-tabs button.on{color:var(--g1);font-weight:600}
.bg2-tabs button.on::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:-1px;height:2px;border-radius:2px;background:var(--gold);box-shadow:0 0 12px rgba(216,180,106,.55);z-index:1}
.bg2-tabs .n{display:inline-block;min-width:18px;height:18px;line-height:18px;padding:0 5px;margin-left:.35rem;border-radius:999px;background:var(--gold);color:#241805;font-size:.62rem;font-weight:800;text-align:center;vertical-align:1px}
.bg2-bd{position:relative;flex:1;overflow-y:auto;padding:1rem 1.3rem 1.4rem;-webkit-overflow-scrolling:touch;contain:content;scrollbar-width:thin;scrollbar-color:rgba(216,180,106,.3) transparent}
.bg2-sec+.bg2-sec{margin-top:1.25rem}
.bg2-sh{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.55rem}
.bg2-sh b{display:flex;align-items:center;gap:.6rem;font-size:.76rem;color:var(--g2);font-weight:600;letter-spacing:.03em}
.bg2-sh b::after{content:"";width:2.2rem;height:1px;background:linear-gradient(90deg,rgba(216,180,106,.5),transparent)}
.bg2-claims{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:.5rem}
.bg2-cl{display:flex;align-items:center;gap:.65rem;padding:.55rem .65rem;border-radius:14px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,transform .2s}
.bg2-cl:hover{border-color:rgba(216,180,106,.55);transform:translateY(-1px)}.bg2-cl:disabled{opacity:.45}
.bg2-cla{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:1.4rem;border-radius:12px;background:radial-gradient(circle at 50% 35%,rgba(216,180,106,.18),transparent 70%)}
.bg2-cla .ic{transform:scale(.62);transform-origin:center}
.bg2-clt{flex:1;min-width:0}.bg2-clt b{display:block;font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bg2-clt small{display:block;font-size:.67rem;color:var(--ink-muted);margin-top:.1rem}
.bg2-go{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:.34rem .75rem;border-radius:999px;background:var(--gold);color:#241805;box-shadow:0 4px 14px -6px rgba(216,180,106,.7)}
.bg2-row{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;margin-bottom:.4rem;border-radius:14px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}
.bg2-rt{flex:1;min-width:0}.bg2-rt b{display:block;font-size:.85rem;font-weight:600}.bg2-rt small{display:block;font-size:.71rem;color:var(--ink-muted);margin-top:.15rem}
.bg2-bar{display:block;height:3px;border-radius:999px;background:rgba(216,180,106,.12);margin-top:.5rem;overflow:hidden;max-width:300px}.bg2-bar>i{display:block;height:100%;background:var(--gold);border-radius:999px;box-shadow:0 0 8px rgba(216,180,106,.6)}
.bg2-x2{font-weight:500;color:var(--g2);font-size:.78rem}
.bg2-on,.bg2-q{flex:none;font-size:.68rem;font-weight:600;letter-spacing:.02em;padding:.24rem .6rem;border-radius:999px;color:#e9d39a;border:1px solid rgba(216,180,106,.45);background:rgba(216,180,106,.08)}
.bg2-q{color:var(--ink-muted);border-color:var(--line);background:transparent}
.bg2-btn{flex:none;font:inherit;font-size:.76rem;font-weight:700;letter-spacing:.03em;padding:.48rem 1rem;border-radius:999px;border:0;cursor:pointer;background:var(--gold);color:#241805;box-shadow:0 6px 18px -8px rgba(216,180,106,.75),inset 0 1px 0 rgba(255,255,255,.5);transition:filter .2s}
.bg2-btn:hover{filter:brightness(1.06)}
.bg2-btn.sec{background:transparent;border:1px solid rgba(216,180,106,.45);color:var(--g1);font-weight:600;box-shadow:none}.bg2-btn:disabled{opacity:.45}
.bg2-empty{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;padding:3rem 1rem;color:var(--ink-muted);font-size:.8rem}
.bg2-empty b{font-family:'Kanit','Prompt',sans-serif;font-weight:500;font-size:1rem;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.bg2-chips{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none}.bg2-chips::-webkit-scrollbar{display:none}
.bg2-chips button{flex:none;font:inherit;font-size:.75rem;font-weight:500;padding:.38rem .85rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--ink-muted);cursor:pointer;white-space:nowrap;transition:all .2s}
.bg2-chips button:hover{color:var(--ink);border-color:rgba(216,180,106,.35)}
.bg2-chips button span{opacity:.6;margin-left:.2rem;font-variant-numeric:tabular-nums}
.bg2-chips button.on{background:var(--gold);color:#241805;border-color:transparent;font-weight:700}.bg2-chips button.on span{opacity:.7}
.bg2-tip{margin:.7rem 0 .6rem;font-size:.69rem;color:var(--ink-muted);letter-spacing:.01em}
.bg2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.55rem}
.bg2 .shop-it.bg2-it{padding:.45rem .45rem .55rem;gap:.15rem;border-radius:14px;font:inherit;color:var(--ink);text-align:center;cursor:pointer;align-items:stretch;
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid var(--line);box-shadow:none;transition:border-color .2s,transform .2s}
.bg2 .shop-it.bg2-it:hover{transform:translateY(-2px);border-color:rgba(216,180,106,.45);box-shadow:0 12px 26px -16px rgba(0,0,0,.9)}
.bg2 .shop-it.bg2-it.eq{border-color:rgba(232,200,128,.85);box-shadow:0 0 0 1px rgba(232,200,128,.35),0 0 22px -6px rgba(216,180,106,.55)}
.bg2 .shop-it.bg2-it.busy{opacity:.5}
/* [3 พ.ย. user "ไอเทมใหม่อยู่บนสุด + ป้ายแจ้งเตือนดูง่าย"] ของใหม่ในกระเป๋า: ขอบทอง + ป้ายแดง "ใหม่" มุมซ้ายบน · เรืองแสงเบาๆ 3 รอบแล้วหยุด (ไม่วนตลอด กฎ 63) */
.bg2 .shop-it.bg2-it{position:relative}
.bg2 .shop-it.bg2-it.bg2-new{border-color:#f2c14e;box-shadow:0 0 0 1px rgba(242,193,78,.55),0 10px 24px -14px rgba(210,154,46,.75);animation:bagNewGlow 2.4s ease-in-out 3}
.bg2-newb{position:absolute;left:6px;top:6px;z-index:3;font-size:.6rem;font-weight:700;letter-spacing:.04em;line-height:1;color:#fff;background:#dc2626;padding:.22rem .45rem;border-radius:999px;box-shadow:0 2px 6px rgba(220,38,38,.45);pointer-events:none}
.bg2-tabs .n.nw{background:#dc2626;color:#fff}
.bg2-chips button.nw{position:relative}.bg2-chips button.nw::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#dc2626;box-shadow:0 0 0 2px var(--paper-raised,#10201b)}
@media (prefers-reduced-motion:reduce){.bg2 .shop-it.bg2-it.bg2-new{animation:none}}
.bg2-art{height:78px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:radial-gradient(circle at 50% 40%,rgba(216,180,106,.12),rgba(0,0,0,.25) 75%);pointer-events:none}
.bg2-art>.ic{transform:scale(.7);transform-origin:center;flex:none}
.bg2-art>.ic.th,.bg2-art>.ic.sh{width:130%;transform:scale(.68)}
.bg2-nm{font-size:.72rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.3rem}
.bg2-sl{font-size:.62rem;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.bg2-sl em{font-style:normal;font-weight:700;letter-spacing:.03em;font-size:.62rem;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.bg2-more{display:block;margin:1rem auto 0;font:inherit;font-size:.76rem;font-weight:600;letter-spacing:.04em;padding:.5rem 1.3rem;border-radius:999px;border:1px solid rgba(216,180,106,.45);background:transparent;color:var(--g1);cursor:pointer}
.bg2-coin{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.2rem 1.3rem;border-radius:18px;overflow:hidden;
  border:1px solid rgba(216,180,106,.4);background:radial-gradient(120% 140% at 0% 0%,rgba(216,180,106,.2),transparent 55%),linear-gradient(160deg,#153a31,#0b221c)}
.bg2-coin small{display:block;font-size:.74rem;color:var(--g2);letter-spacing:.03em}
.bg2-coin b{display:block;font-family:'Kanit','Prompt',sans-serif;font-size:2.1rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.bg2-coin span{display:block;font-size:.72rem;color:var(--g1);font-weight:500}
.bg2-cbtns{display:flex;gap:.45rem;flex-wrap:wrap}
.bg2-hist{display:flex;flex-direction:column}
.bg2-hr2{display:grid;grid-template-columns:7.4rem 1fr auto;gap:.7rem;align-items:baseline;padding:.6rem .2rem;border-bottom:1px solid var(--line);font-size:.78rem}
.bg2-hr2 .d{color:var(--ink-muted);font-size:.69rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}.bg2-hr2 .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bg2-hr2 .t em{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.02em;color:#241805;background:var(--gold);padding:.08rem .45rem;border-radius:999px;margin-left:.3rem}
.bg2-hr2 .s{color:var(--g2);font-size:.68rem;white-space:nowrap;opacity:.8}
@media (max-width:640px){
  .bg2-ov{padding:0;align-items:stretch}
  .bg2{width:100%;height:100%;border-radius:0;border:0;padding-top:env(safe-area-inset-top,0px)}
  .bg2::before{display:none}
  .bg2-hd{padding:1rem 1rem .6rem}
  .bg2-tabs{padding:0 .4rem}.bg2-tabs::after{left:0;right:0}.bg2-tabs button{flex:1;padding:.7rem .2rem;font-size:.8rem}.bg2-tabs button.on::after{left:.5rem;right:.5rem}
  .bg2-bd{padding:.85rem .8rem calc(1.3rem + env(safe-area-inset-bottom,0px))}
  .bg2-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
  .bg2-claims{grid-template-columns:1fr}
  .bg2-hr2{grid-template-columns:5.8rem 1fr}.bg2-hr2 .s{display:none}
}
.bg2-pv{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(2,12,10,.74)}
.bg2-pvb{position:relative;width:min(520px,100%);max-height:100%;overflow-y:auto;border-radius:18px;padding:1.1rem;border:1px solid rgba(216,180,106,.4);background:radial-gradient(120% 70% at 50% -10%,rgba(216,180,106,.16),transparent 60%),linear-gradient(180deg,#14352c,#0a1f1a);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.bg2-pvx{position:absolute;top:.7rem;right:.7rem;z-index:3}
.bg2-pvs{display:flex;align-items:center;justify-content:center;min-height:170px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(216,180,106,.14),rgba(0,0,0,.35) 75%)}
.bg2-pvs.room{display:block;min-height:0;background:none}.bg2-pvs .sp-room{margin:0}.bg2-pvs .sp-room .rbr{height:230px;border-radius:14px}
.bg2-pvs .sp-card.bg2-pvc{width:100%;margin:1rem}
.bg2-pva{padding:1.4rem}.bg2-pvr img{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.bg2-pvi.shop-it{background:none;border:0;box-shadow:none;padding:1.4rem;align-items:center}.bg2-pvi .ic{transform:scale(1.35);transform-origin:center}
.bg2-pvplay{display:block;margin:.6rem auto 0}
.bg2-pvt{margin-top:.9rem;text-align:center}.bg2-pvt small{display:block;font-size:.72rem;color:var(--g2)}
.bg2-pvt b{display:block;font-family:'Kanit','Prompt',sans-serif;font-size:1.15rem;font-weight:600;margin-top:.15rem;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.bg2-pvt p{margin:.4rem auto 0;max-width:420px;font-size:.76rem;line-height:1.55;color:var(--ink-muted)}.bg2-pvt .bg2-on{display:inline-block;margin-top:.5rem}
.bg2-pvact{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem}
.bg2-pv2 .bg2-pvb{width:min(780px,100%);padding:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);overflow:hidden;max-height:min(100%,560px)}
.bg2-pv2 .bg2-pvx{top:.75rem;right:.75rem;width:32px;height:32px;background:rgba(4,16,13,.55);border-color:rgba(216,180,106,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bg2-pv2 .pv2-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px;background:radial-gradient(circle at 50% 42%,rgba(216,180,106,.13),rgba(0,0,0,.4) 78%);border-right:1px solid rgba(216,180,106,.14)}
.bg2-pv2 .bg2-pvs{width:100%;min-height:0;border-radius:0;background:none}
.bg2-pv2 .bg2-pvs.room .sp-room .rbr{height:300px;border-radius:0}
.bg2-pv2 .pv2-play{position:absolute;left:.8rem;bottom:.8rem;z-index:3;font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.03em;padding:.42rem .9rem;border-radius:999px;border:1px solid rgba(246,231,184,.35);background:rgba(4,16,13,.6);color:var(--g1);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.bg2-pv2 .pv2-play:hover{background:rgba(4,16,13,.8);border-color:var(--g2)}
.bg2-pv2 .pv2-info{display:flex;flex-direction:column;min-width:0;padding:1.5rem 1.4rem 1.2rem;overflow-y:auto}
.bg2-pv2 .pv2-meta{display:flex;align-items:center;gap:.5rem;padding-right:2.4rem;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g2)}
.bg2-pv2 .pv2-meta em{font-style:normal;letter-spacing:.04em;text-transform:none;font-size:.64rem;padding:.14rem .55rem;border-radius:999px;color:#9fe0bf;background:rgba(80,200,140,.12);border:1px solid rgba(110,210,160,.35)}
.bg2-pv2 h4{margin:.45rem 0 0;font-family:'Kanit','Prompt',sans-serif;font-size:1.3rem;font-weight:600;line-height:1.3;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.bg2-pv2 .pv2-info p{margin:.55rem 0 0;font-size:.76rem;line-height:1.65;color:var(--ink-muted)}
.bg2-pv2 .pv2-act{display:flex;flex-direction:column;gap:.5rem;margin-top:auto;padding-top:1.3rem}
.pv2-btn{width:100%;min-height:44px;font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.03em;padding:.6rem 1rem;border-radius:12px;border:0;cursor:pointer;background:var(--gold);color:#241805;box-shadow:0 10px 22px -12px rgba(216,180,106,.8),inset 0 1px 0 rgba(255,255,255,.5);transition:filter .2s,transform .15s,background .2s,border-color .2s}
.pv2-btn:hover{filter:brightness(1.06)}.pv2-btn:active{transform:translateY(1px)}
.pv2-btn.ghost{background:rgba(216,180,106,.06);color:var(--g1);font-weight:600;border:1px solid rgba(216,180,106,.38);box-shadow:none}
.pv2-btn.ghost:hover{background:rgba(216,180,106,.12);border-color:rgba(216,180,106,.6);filter:none}
.pv2-btn.busy,.pv2-btn:disabled{opacity:.5;cursor:default}
.bg2-pv2 .pv2-foot{margin-top:1rem;padding-top:.8rem;border-top:1px solid rgba(216,180,106,.12);text-align:center}
.pv2-del{font:inherit;font-size:.7rem;font-weight:500;letter-spacing:.02em;padding:.25rem .5rem;border:0;background:none;color:rgba(226,160,148,.75);cursor:pointer;transition:color .2s}
.pv2-del:hover{color:#f0a090}.pv2-del:disabled{opacity:.4}
@media (max-width:640px){
  .bg2-pv2 .bg2-pvb{grid-template-columns:1fr;max-height:92%;overflow-y:auto;border-radius:20px 20px 0 0;padding:0}
  .bg2-pv2 .pv2-media{min-height:220px;border-right:0;border-bottom:1px solid rgba(216,180,106,.14)}
  .bg2-pv2 .bg2-pvs.room .sp-room .rbr{height:210px}
  .bg2-pv2 .pv2-info{overflow:visible;padding:1.1rem 1rem calc(1rem + env(safe-area-inset-bottom,0px))}
  .bg2-pv2 .pv2-meta{padding-right:0}
  .bg2-pv2 h4{font-size:1.15rem}
  .bg2-pv2 .pv2-act{padding-top:1.1rem}
  .bg2-pv2 .pv2-foot{margin-top:.7rem;padding-top:.55rem}
}
@media (max-width:640px){.bg2-pv{align-items:flex-end;padding:0}.bg2-pvb{width:100%;border-radius:20px 20px 0 0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom,0px))}.bg2-pvs .sp-room .rbr{height:200px}}
.bg2-toast{position:absolute;left:50%;top:calc(.9rem + env(safe-area-inset-top,0px));z-index:9;transform:translateX(-50%);max-width:90%;padding:.55rem 1.1rem;border-radius:999px;font-size:.8rem;font-weight:600;color:#241805;background:linear-gradient(135deg,#f8ecc6,#e3c27a 45%,#c49a52);box-shadow:0 10px 30px -10px rgba(0,0,0,.8);animation:bg2T .25s ease-out;transition:opacity .35s,transform .35s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg2-toast.out{opacity:0;transform:translate(-50%,-8px)}@keyframes bg2T{from{opacity:0;transform:translate(-50%,-10px)}}
/* [29 ต.ค. user "ทำร้านค้า ออกแบบให้ไวแบบกระเป๋า"] ร้านค้า v2 — ใช้โครง/สีเดียวกับกระเป๋า (.bg2) · หมวดบน · การ์ดเล็ก · แผ่นพรีวิว · แถบตะกร้าลองล่าง */
.xc2.bg2{width:min(760px,100%);height:min(88vh,860px)}
.xc2.bg2 .bg2-hd h3::before{content:"PLATOO  EXCHANGE"}
.xc2 .bg2-sec{margin-top:1.1rem}
.xc2-n{margin:.45rem 0 0;font-size:.72rem;color:var(--ink-muted);line-height:1.5}
.xc2-tok{padding:.8rem .9rem;border-radius:14px;border:1px solid var(--line);background:rgba(216,180,106,.04)}
.xc2-tr{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.xc2-tr input{width:6.5rem;font:inherit;font-size:.9rem;font-weight:600;padding:.42rem .65rem;border-radius:10px;border:1px solid rgba(216,180,106,.35);background:rgba(0,0,0,.25);color:var(--g1);font-variant-numeric:tabular-nums}
.xc2-tr input:focus{outline:none;border-color:var(--g2)}
.xc2-tr span{font-size:.76rem;color:var(--ink-muted);margin-right:auto}
.xc2-rate{font-size:.68rem;color:var(--g2);letter-spacing:.02em;text-align:right}
.xc2-goal{margin-bottom:.6rem;padding:.5rem .8rem;border-radius:12px;border:1px dashed rgba(216,180,106,.3);font-size:.74rem;color:var(--ink-muted)}.xc2-goal b{color:var(--g1);font-weight:600}
.bg2 .shop-it.bg2-it.xc2-it{position:relative;cursor:default}
.bg2 .shop-it.bg2-it.xc2-it.dis{opacity:.62}.bg2 .shop-it.bg2-it.xc2-it.dis:hover{transform:none;box-shadow:none}
.bg2 .shop-it.bg2-it.xc2-it.arm{border-color:rgba(232,200,128,.85);box-shadow:0 0 0 1px rgba(232,200,128,.35)}
.xc2-b{width:100%;margin-top:.35rem;padding:.4rem .5rem;font-size:.7rem}.xc2-b:disabled{cursor:default}
.xc2-dt{margin-top:1rem;border-top:1px solid var(--line);padding-top:.7rem;font-size:.76rem}
.xc2-dt summary{cursor:pointer;color:var(--g2);font-weight:600;letter-spacing:.02em;list-style:none}.xc2-dt summary::-webkit-details-marker{display:none}
.xc2-dt summary::after{content:" +";opacity:.7}.xc2-dt[open] summary::after{content:" −"}
.xc2-dt ul{margin:.55rem 0 0;padding-left:1.1rem;color:var(--ink-muted);line-height:1.6}
@media (max-width:640px){.xc2.bg2{width:100%;height:100%}.xc2-tr input{flex:1;min-width:0}.xc2-tr span{margin-right:0}}
.sh2.bg2{width:min(940px,100%);height:min(90vh,900px)}
.sh2.bg2 .bg2-hd h3::before{content:"PLATOO  BOUTIQUE"}
.sh2-tabs{overflow-x:auto;scrollbar-width:none}.sh2-tabs::-webkit-scrollbar{display:none}
.sh2-tabs button{flex:none}
.sh2-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.15rem}
.sh2-bar .bg2-chips{flex:1;min-width:0}
.sh2-sort{flex:none;width:auto;max-width:9.5rem;margin-left:auto;font:inherit;font-size:.74rem;padding:.36rem .6rem;border-radius:999px;border:1px solid var(--line);background:#0c211c;color:var(--ink)}
/* [3 พ.ย. user "หน้าร้านค้าแท็บเมนูมันบั๊ก"] แถบหมวดย่อยเลื่อนข้างแล้วชิปโดนตัดใต้ช่องเรียง + เมาส์เลื่อนข้างไม่ได้
   คอม: ชิปขึ้นบรรทัดใหม่ให้เห็นครบทุกหมวด · มือถือ: ชิปเต็มแถว (ปัดข้างได้ + ขอบจางบอกว่ามีต่อ) ช่องเรียงลงไปบรรทัดล่างชิดขวา · sh2Fade() ใส่คลาส fl/fr */
.sh2-bar{align-items:flex-start}
.sh2-bar .bg2-chips{flex-wrap:wrap;overflow:visible;row-gap:.4rem}
.sh2-bar .sh2-sort{margin-top:.1rem}
.sh2-tabs.fr,.sh2-bar .bg2-chips.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent)}
.sh2-tabs.fl,.sh2-bar .bg2-chips.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.2rem);mask-image:linear-gradient(90deg,transparent,#000 2.2rem)}
.sh2-tabs.fl.fr,.sh2-bar .bg2-chips.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.2rem,#000 calc(100% - 2.2rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 2.2rem,#000 calc(100% - 2.2rem),transparent)}
@media (max-width:640px){
  .sh2-bar{flex-wrap:wrap;row-gap:.45rem}
  .sh2-bar .bg2-chips{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto}
  .sh2-bar .sh2-sort{margin-top:0}
}
.sh2 .bg2-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}
.sh2 .shop-it.bg2-it{position:relative;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.sh2 .shop-it.bg2-it.try{border-color:rgba(232,200,128,.95);box-shadow:0 0 0 1px rgba(232,200,128,.45),0 0 20px -6px rgba(216,180,106,.6)}
.sh2 .bg2-art{height:84px}
.bg2-art>.ic.bnd{width:100%;height:100%;transform:none;border-radius:10px;gap:.15rem;padding:0 .3rem}.bg2-art>.ic.bnd .b-av{width:38%;box-shadow:0 0 0 1.5px #f6d27a}.bg2-art>.ic.bnd .b-bot{height:86%;max-width:44%}.bg2-art>.ic.bnd .b-plus{font-size:.8rem}
.sh2 .bg2-art>.ic.vcard{width:150%;height:96px;transform:scale(.62)}.sh2 .bg2-art>.ic.capsule{width:130%}
.sh2-p{font-size:.68rem;font-weight:600;color:var(--g1);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh2-p s{color:var(--ink-muted);font-weight:500;margin-right:.2rem}.sh2-p.mute{color:var(--ink-muted);font-weight:500}
.sh2-p em{font-style:normal;font-weight:700;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh2-tag{position:absolute;top:.4rem;left:.4rem;z-index:2;font-size:.56rem;font-weight:700;letter-spacing:.03em;padding:.1rem .42rem;border-radius:999px;color:#241805;background:var(--gold)}
.sh2-tag.red{color:#fff;background:linear-gradient(90deg,#b4232f,#d9622b)}
.sh2-note{margin:1.1rem 0 0;font-size:.66rem;line-height:1.6;color:var(--ink-muted)}
.sh2-cart{position:relative;z-index:4;display:flex;align-items:center;gap:.5rem;padding:.65rem 1.3rem calc(.65rem + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(216,180,106,.35);background:linear-gradient(180deg,#123129,#0a1f1a);box-shadow:0 -14px 30px -18px rgba(0,0,0,.9)}
.sh2-cart[hidden]{display:none}
.sh2-ct{flex:1;min-width:0}.sh2-ct b{display:block;font-size:.84rem;font-weight:600;color:var(--g1)}.sh2-ct small{display:block;font-size:.7rem;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh2-pv .bg2-pvb{width:min(560px,100%)}
.sh2-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin-top:.45rem}
.sh2-meta span{font-size:.64rem;font-weight:600;letter-spacing:.02em;padding:.14rem .55rem;border-radius:999px;border:1px solid rgba(216,180,106,.4);color:var(--g1)}
.sh2-pr{margin-top:.6rem;text-align:center;font-size:.8rem;color:var(--ink-muted)} .sh2-cn{display:block;margin-top:.2rem;font-size:.78rem;color:#e0b45a;font-weight:600} .sh2-cn.off{color:var(--ink-muted);font-weight:400} .sh2-tot .sh2-cn{text-align:right} .sh2-pay{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.8rem} .sh2-pay .mswal-btn{flex:1 1 140px;max-width:220px} .sh2-paycoin{background:linear-gradient(135deg,#f3d48a,#b7791f)!important;color:#2a1a05!important} .sh2-pay .mswal-btn[disabled],.bg2-btn[disabled]{opacity:.45;cursor:not-allowed} .bg2-btn.sh2-bc{background:linear-gradient(135deg,#f3d48a,#b7791f);color:#2a1a05;border-color:transparent}
.sh2-pr b{font-family:'Kanit','Prompt',sans-serif;font-size:1.35rem;font-weight:600;color:var(--g1);font-variant-numeric:tabular-nums;margin-right:.25rem}
.sh2-pr s{margin-right:.4rem}
.sh2-warn{margin:.4rem 0 0;text-align:center;font-size:.72rem;color:#f3b27a}
.sh2-lg{margin-top:.2rem}.sh2-lg .shop-it{cursor:default;border-color:var(--line)}.sh2-lg .shop-it:hover{transform:none}
.sh2-lg .shop-it .pr{color:var(--g1)}.sh2-lg .shop-it .vnote,.sh2-lg .shop-it .cnt{color:var(--ink-muted)}
.sh2-pvs .sp-card.bg2-pvc{max-width:340px;margin:1.6rem auto}
.sh2-rows{margin-top:.9rem;display:flex;flex-direction:column;gap:.35rem}
.sh2-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:.78rem}
.sh2-row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sh2-row span small{color:var(--ink-muted);margin-left:.35rem;font-size:.66rem}
.sh2-row em{font-style:normal;font-size:.72rem;color:var(--g1);font-variant-numeric:tabular-nums;white-space:nowrap}
.sh2-row button{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink-muted);cursor:pointer;font-size:.7rem}
.sh2-tot{display:flex;align-items:baseline;justify-content:space-between;margin-top:.7rem;padding:0 .2rem;font-size:.78rem;color:var(--ink-muted)}.sh2-tot b{font-size:1.05rem;color:var(--g1);font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .sh2.bg2{width:100%;height:100%}  .sh2.bg2 .bg2-hd small{font-size:.7rem}.sh2 .bg2-lnk{padding:.38rem .7rem}.sh2-hm{display:none}
  .sh2 .bg2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sh2 .bg2-art{height:74px}
  .sh2-tabs button{flex:none;padding:.7rem .65rem}
  .sh2-cart{padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom,0px))}.sh2-cart .bg2-btn{padding:.48rem .8rem}
}
body.bag2-open #bagFab,body.bag2-open .bag-coach{display:none}
/* [29 ต.ค.] วงโหลดรูปภาพในเกม (assetDl) — ล่างกลางจอ เหนือปุ่มลอย · เสร็จแล้วจางหาย */
#assetDl{position:fixed;left:50%;bottom:calc(max(.7rem, env(safe-area-inset-bottom, 0px)) + var(--vv-shift, 0px) + 8px);z-index:25;display:flex;align-items:center;gap:.55rem;padding:.4rem .85rem .4rem .45rem;border-radius:999px;
  background:rgba(8,28,24,.9);border:1px solid rgba(216,180,106,.45);color:#f2ead8;box-shadow:0 10px 26px -12px rgba(0,0,0,.7);transform:translate(-50%,14px);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none;max-width:calc(100vw - 9rem)}
#assetDl.on{opacity:1;transform:translate(-50%,0)}
#assetDl svg{width:30px;height:30px;flex:none;transform:rotate(-90deg)}#assetDl circle{fill:none;stroke-width:3.4}#assetDl .t{stroke:rgba(216,180,106,.2)}#assetDl .p{stroke:#e3c27a;stroke-linecap:round;transition:stroke-dashoffset .4s ease}
#assetDl .tx{display:flex;flex-direction:column;line-height:1.15;min-width:0}#assetDl b{font-size:.8rem;font-variant-numeric:tabular-nums}#assetDl small{font-size:.64rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#assetDl.done .p{stroke:#34d399}
body.shop-open #assetDl,body.bag2-open #assetDl,body.ov-open #assetDl{display:none}
.fr-call{display:none}
/* [2 พ.ย. user "ทดลองรันเดโมฟรี 7 วันทำการ ทำสวยๆ พรีเมียม"] การ์ดชวนให้ทีมงานรันให้ — ใช้ในป๊อปอัปต้อนรับ + การ์ดเริ่มต้นบนแดชบอร์ด (สีของตัวเอง ใช้ได้ทั้งธีมสว่าง/มืด) */
.frp{position:relative;overflow:hidden;isolation:isolate;margin:.8rem 0 .35rem;padding:1.05rem 1.1rem 1rem;border-radius:20px;color:#f4ecd8;
  background:radial-gradient(120% 90% at 100% 0%,rgba(230,181,103,.28),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(16,185,129,.22),transparent 60%),linear-gradient(150deg,#0f3a2e 0%,#0b241d 55%,#07150f 100%);
  border:1px solid rgba(230,181,103,.55);box-shadow:0 14px 34px -14px rgba(7,21,15,.7),inset 0 1px 0 rgba(255,236,190,.18)}
.frp::before{content:"";position:absolute;inset:-40% -10% auto auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(245,211,138,.22),transparent 65%);z-index:-1;filter:blur(2px)}
.frp-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.frp-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .65rem;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.06em;color:#1f1404;background:linear-gradient(135deg,#ffe9a8,#e6b567 55%,#c98f2e);box-shadow:0 2px 10px rgba(230,181,103,.35)}
.frp-badge i{width:6px;height:6px;border-radius:50%;background:#1f7a55;box-shadow:0 0 0 3px rgba(31,122,85,.25)}
.frp-days{display:flex;align-items:baseline;gap:.3rem;font-size:.74rem;font-weight:600;color:#e9d9b0;white-space:nowrap}
.frp-days b{font-size:2.1rem;line-height:1;font-weight:800;background:linear-gradient(180deg,#fff3cf,#e6b567 60%,#b47a22);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(230,181,103,.35))}
.frp-h{margin-top:.45rem;font-size:1.12rem;font-weight:800;line-height:1.3;color:#fff7e2}
.frp-d{margin-top:.3rem;font-size:.8rem;line-height:1.6;color:#d6ccb2}
.frp-steps{list-style:none;margin:.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.frp-steps li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.55rem .6rem;border-radius:13px;font-size:.74rem;font-weight:600;line-height:1.35;color:#efe4c6;background:rgba(255,255,255,.05);border:1px solid rgba(230,181,103,.18)}
.frp-steps li i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:.72rem;font-weight:800;color:#1f1404;background:linear-gradient(135deg,#ffe9a8,#e6b567)}
.frp-go{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.85rem;padding:.8rem 1rem;border:0;border-radius:14px;cursor:pointer;font:inherit;font-size:.95rem;font-weight:800;color:#1f1404;
  background:linear-gradient(135deg,#fff0c2 0%,#f0c674 45%,#d79a35 100%);box-shadow:0 10px 22px -8px rgba(230,160,50,.65),inset 0 1px 0 rgba(255,255,255,.7);transition:transform .15s ease,box-shadow .15s ease}
.frp-go::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:frpShine 3.2s ease-in-out infinite}
.frp-go:hover{transform:translateY(-1px);box-shadow:0 14px 26px -8px rgba(230,160,50,.75),inset 0 1px 0 rgba(255,255,255,.7)}
.frp-go:active{transform:translateY(0) scale(.99)}
.frp-go svg{width:18px;height:18px;flex:none}
@keyframes frpShine{0%,55%{left:-60%}100%{left:130%}}
.frp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem .8rem;margin-top:.65rem;font-size:.72rem;color:#bfb497}
.frp-foot a{color:#f0c674;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.frp.wait .frp-badge{background:linear-gradient(135deg,#c8f3df,#5fd0a1)}
.frp.end .frp-badge{background:linear-gradient(135deg,#ffd9cf,#f28b6b)}
@media (max-width:420px){.frp{padding:.95rem .9rem}.frp-steps{gap:.35rem}.frp-steps li{padding:.5rem .45rem;font-size:.7rem}.frp-h{font-size:1.02rem}}
@media (prefers-reduced-motion:reduce){.frp-go::after{animation:none;display:none}}
/* [2 พ.ย.] ย้ายเป็นบัญชีจริง (ลูกค้าฝากรัน) — การ์ดบนแดชบอร์ด + หน้าต่าง 3 ขั้น */
.d2r-banner.gr-wrap{display:block;padding:0;background:none;border:0;box-shadow:none}
.d2r-banner.gr-wrap .frp{margin:0 0 .9rem}
.frp-foot a+a{color:#bfb497;font-weight:600}
.gr-q{display:inline-block;margin-left:.35rem;padding:1px 8px;border-radius:999px;font-size:.74rem;font-weight:800;color:#1f1404;background:linear-gradient(135deg,#ffe9a8,#e6b567)}
.gr-card{width:min(480px,100%)}
.gr-card h3{margin:.55rem 2rem .5rem 0;font-size:1.12rem}
.gr-hd{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-right:2.2rem}
.gr-dots{display:flex;gap:.3rem}.gr-dots i{width:22px;height:6px;border-radius:9px;background:color-mix(in srgb,var(--ink) 15%,transparent)}.gr-dots i.on{background:linear-gradient(90deg,#f0c674,#d79a35)}.gr-dots i.ok{background:#5fd0a1}
.gr-check{list-style:none;margin:.2rem 0 .5rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.gr-check li{position:relative;padding:.6rem .7rem .6rem 2.1rem;border-radius:12px;border:1px solid var(--line);background:var(--paper-raised)}
.gr-check li::before{content:"";position:absolute;left:.7rem;top:.75rem;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#ffe9a8,#d79a35);box-shadow:0 0 0 3px rgba(230,181,103,.2)}
.gr-check b{display:block;font-size:.86rem}.gr-check span{display:block;font-size:.76rem;color:var(--ink-muted);margin-top:.1rem}
.gr-nav{display:flex;gap:.5rem;align-items:center;margin-top:.7rem}.gr-nav .frp-go{margin-top:0;flex:1}
.gr-back{flex:none;padding:.75rem .9rem;border-radius:14px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.gr-opts{display:flex;flex-direction:column;gap:.45rem}
.gr-opt{text-align:left;padding:.7rem .85rem;border-radius:13px;border:1.5px solid var(--line);background:var(--paper-raised);color:var(--ink);font:inherit;cursor:pointer}
.gr-opt b{display:block;font-size:.9rem}.gr-opt span{display:block;font-size:.76rem;color:var(--ink-muted);margin-top:.1rem}
.gr-opt.on{border-color:#d79a35;background:color-mix(in srgb,#e6b567 14%,var(--paper-raised));box-shadow:0 0 0 3px rgba(230,181,103,.18)}
.gr-done{display:flex;align-items:baseline;justify-content:center;gap:.5rem;margin:.6rem 0 .4rem;font-weight:700;color:var(--ink-muted)}
.gr-done b{font-size:3.2rem;line-height:1;background:linear-gradient(180deg,#f5d38a,#c98f2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.gs-card{position:relative;padding:1rem 1.1rem;border-radius:18px;margin-bottom:.9rem;background:linear-gradient(160deg,color-mix(in srgb,#10b981 10%,var(--paper-raised)),var(--paper-raised) 60%);border:1px solid color-mix(in srgb,#10b981 42%,var(--line,#d5ddd9))}
.gs-card[hidden]{display:none}
/* [27 ต.ค. user "จุดขาย: ลูกค้าเห็นพอตรับได้ถึงราคาเท่าไหร่"] การ์ดสุขภาพพอต — ปรับหน้าตารอบ 2 (เกจ + ตัวเลขใหญ่ + ช่องสรุป) */
.pot-card{position:relative;overflow:hidden;padding:1.05rem 1.15rem 1rem;border-radius:20px;margin-bottom:.9rem;color:var(--ink,#141c18);
  background:linear-gradient(165deg,color-mix(in srgb,var(--pot-c,#10b981) 9%,var(--paper-raised)),var(--paper-raised) 62%);
  border:1px solid color-mix(in srgb,var(--pot-c,#10b981) 34%,var(--line,#d5ddd9));box-shadow:0 14px 30px -22px color-mix(in srgb,var(--pot-c,#10b981) 70%,transparent)}
.pot-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pot-c,#10b981)}
.pot-card[hidden]{display:none}
.pot-card.lv-ok,.pot-card.lv-safe{--pot-c:#10b981}.pot-card.lv-warn{--pot-c:#f59e0b}.pot-card.lv-danger{--pot-c:#f97316}.pot-card.lv-past{--pot-c:#ef4444}
.pot-top{display:flex;align-items:center;gap:.55rem}
.pot-ic{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:var(--pot-c);background:color-mix(in srgb,var(--pot-c) 14%,transparent)}
.pot-ic svg{width:17px;height:17px}
.pot-ttl{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.pot-ttl b{font-size:.95rem;font-weight:700;letter-spacing:.01em}
.pot-ttl small{font-size:.78rem;color:var(--ink-muted,#4a5448);font-weight:500}
.pot-pill{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .7rem;border-radius:999px;font-size:.82rem;font-weight:700;color:color-mix(in srgb,var(--pot-c) 82%,#000);background:color-mix(in srgb,var(--pot-c) 13%,transparent);border:1px solid color-mix(in srgb,var(--pot-c) 38%,transparent);white-space:nowrap}
.pot-pill i{width:7px;height:7px;border-radius:50%;background:var(--pot-c);box-shadow:0 0 0 3px color-mix(in srgb,var(--pot-c) 25%,transparent)}
.pot-hero{margin:.85rem 0 .15rem;display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .6rem}
.pot-big{font-family:'IBM Plex Mono','IBM Plex Sans Thai',ui-monospace,monospace;font-size:2rem;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.pot-cap{font-size:.92rem;color:var(--ink-muted,#4a5448);font-weight:600}
.pot-gauge{position:relative;margin:.95rem 0 .2rem;padding-top:1px}
.pot-track{height:10px;border-radius:99px;background:linear-gradient(90deg,#ef4444 0%,#f97316 22%,#f59e0b 42%,#84cc16 70%,#10b981 100%);opacity:.92}
.pot-gauge{margin-top:2.2rem}
.pot-track{height:12px;box-shadow:inset 0 1px 2px rgba(0,0,0,.18),inset 0 -1px 0 rgba(255,255,255,.25)}
.pot-mk{position:absolute;top:1px;width:0;height:12px;font-style:normal;transition:left .6s cubic-bezier(.3,.9,.3,1)}
.pot-mk::before{content:"";position:absolute;left:-12px;top:-5px;width:24px;height:24px;box-sizing:border-box;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--pot-c) 18%,#fff) 70%);border:4px solid var(--pot-c);box-shadow:0 0 0 4px color-mix(in srgb,var(--pot-c) 22%,transparent),0 6px 14px -4px color-mix(in srgb,var(--pot-c) 85%,#000)}
.pot-mk::after{content:"";position:absolute;left:-1px;top:-14px;width:2px;height:9px;border-radius:2px;background:color-mix(in srgb,var(--pot-c) 70%,transparent)}
.pot-mk b{font-style:normal;position:absolute;left:0;top:-32px;transform:translateX(-50%);padding:.14rem .5rem;border-radius:7px;font-size:.74rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;color:#fff;background:var(--pot-c);box-shadow:0 4px 10px -4px color-mix(in srgb,var(--pot-c) 80%,#000)}
.pot-ends{display:flex;justify-content:space-between;margin-top:.45rem;font-size:.78rem;font-weight:600;color:var(--ink-muted,#4a5448)}
.pot-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.8rem}
.pot-st{padding:.5rem .6rem;border-radius:12px;background:color-mix(in srgb,var(--ink,#141c18) 5%,transparent);min-width:0}
.pot-st small{display:block;font-size:.76rem;font-weight:500;color:var(--ink-muted,#4a5448);line-height:1.35}
.pot-st b{display:block;margin-top:.12rem;font-family:'IBM Plex Mono','IBM Plex Sans Thai',ui-monospace,monospace;font-size:.92rem;font-weight:700;white-space:nowrap}
.pot-hedge{margin-top:.8rem;padding:.65rem .8rem;border-radius:12px;font-size:.88rem;font-weight:600;line-height:1.5;background:color-mix(in srgb,var(--pot-c) 10%,transparent)}
.pot-more{margin-top:.7rem;font-size:.82rem;color:var(--ink-muted,#4a5448)}
.pot-more summary{cursor:pointer;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:.3rem}
.pot-more summary::-webkit-details-marker{display:none}
.pot-more summary::before{content:"i";display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1.5px solid currentColor;font:700 .62rem/1 'IBM Plex Sans',sans-serif}
.pot-more p{margin:.4rem 0 0;line-height:1.55}
.pot-card .nb{white-space:nowrap}
@media (max-width:420px){.pot-big{font-size:1.7rem}.pot-st b{font-size:.84rem}.pot-pill{font-size:.76rem;padding:.2rem .55rem}.pot-st{padding:.5rem .5rem}}
/* [27 ต.ค. user "เอาจุดเด่นไปไว้หน้าแรก"] ส่วน "เห็นทุกอย่างด้วยตัวเอง" บนหน้าแรก — การ์ดตัวอย่างพื้นสว่างบนพื้นเข้ม + ถามตอบ */
.sx-light{--paper-raised:#fff;--ink:#141c18;--ink-muted:#4a5448;--line:#d5ddd9}
.sx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;align-items:start;width:100%}
@media(min-width:860px){.sx-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
#sectionSeeIt{min-width:0;max-width:100%}
.sx-col{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.sx-tagrow{display:flex;align-items:center;gap:.5rem;color:var(--sidebar-ink)}
.sx-tag{font-size:.7rem;letter-spacing:.12em;padding:.2rem .6rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--sidebar-ink) 45%,transparent);white-space:nowrap}
.sx-cap{font-size:.92rem;line-height:1.65;color:var(--sidebar-ink-muted)}
.sx-card{border-radius:20px;overflow:hidden;box-shadow:0 22px 44px -26px rgba(0,0,0,.6)}
.sx-card .pot-card,.sx-card .ea-stmt{margin:0}
.sx-note{font-size:.78rem;line-height:1.6;color:var(--sidebar-ink-muted);text-align:center;max-width:640px;margin:0 auto}
.sx-faq{display:flex;flex-direction:column;gap:.55rem;max-width:760px;width:100%;margin:0 auto}
.sx-faq details{border-radius:14px;border:1px solid color-mix(in srgb,var(--sidebar-ink) 22%,transparent);background:color-mix(in srgb,var(--sidebar-ink) 6%,transparent);padding:.75rem 1rem;color:var(--sidebar-ink)}
.sx-faq summary{cursor:pointer;font-weight:600;font-size:.95rem;line-height:1.5}
.sx-faq p{margin:.5rem 0 0;font-size:.9rem;line-height:1.7;color:var(--sidebar-ink-muted)}
.ea-stmt{border:1px solid var(--line);border-radius:16px;background:var(--paper-raised);padding:1rem 1rem .9rem;color:var(--ink)}
.ea-stmt-h{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.7rem}
.ea-stmt-h b{font-size:1rem}.ea-stmt-h span{font-size:.78rem;color:var(--ink-muted)}
.ea-stmt-g{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
.ea-stmt-c{padding:.65rem .7rem;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent);min-width:0}
.ea-stmt-c small{display:block;font-size:.76rem;color:var(--ink-muted);line-height:1.35}
.ea-stmt-c b{display:block;margin-top:.15rem;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.02rem;font-weight:700;white-space:nowrap}
.ea-stmt-c em{display:block;font-style:normal;font-size:.74rem;color:var(--ink-muted);margin-top:.1rem}
.ea-stmt-c.net{background:color-mix(in srgb,#10b981 13%,transparent)}.ea-stmt-c.net b{color:#0f9a6b}
.ea-stmt-c.free{background:color-mix(in srgb,#f59e0b 11%,transparent)}
.ea-stmt-n{margin:.7rem 0 0;font-size:.8rem;line-height:1.55;color:var(--ink-muted)}
.gs-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.5rem}
.gs-head b{display:block;font-size:1rem;font-family:'Kanit','Prompt',sans-serif;font-weight:600}
.gs-head small{display:block;font-size:.76rem;color:var(--ink-muted,#5b6b63);line-height:1.45;margin-top:.1rem}
.gs-pct{flex:none;font-weight:700;font-size:.85rem;padding:.2rem .65rem;border-radius:99px;background:color-mix(in srgb,#10b981 16%,transparent);color:#047857}
.gs-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink,#1c2a24) 10%,transparent);overflow:hidden;margin:.1rem 0 .55rem}
.gs-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#10b981,#f6d27a);transition:width .5s}
.gs-row{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-top:1px dashed var(--line,#d5ddd9)}
.gs-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.82rem;background:var(--paper,#fff);border:1.5px solid var(--line,#d5ddd9);color:var(--ink-muted,#5b6b63)}
.gs-row.open .gs-n{border-color:#10b981;color:#047857}
.gs-row.done .gs-n{background:#10b981;border-color:#10b981;color:#fff}
.gs-t{flex:1;min-width:0}
.gs-t b{display:block;font-size:.88rem;font-weight:600;line-height:1.3}
.gs-t small{display:block;font-size:.74rem;color:var(--ink-muted,#5b6b63);line-height:1.4;margin-top:.1rem}
.gs-row.done .gs-t b{text-decoration:line-through;opacity:.6}
.gs-act{flex:none}
.gs-btn{border:none;border-radius:10px;padding:.42rem .85rem;font-size:.78rem;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;background:#047857;color:#fff;text-decoration:none;display:inline-block}
.gs-btn.ghost{background:transparent;color:#047857;border:1px solid #10b981}
.gs-btn.gold{background:#f6d27a;color:#241a08}
.gs-ok{font-size:.76rem;color:#047857;font-weight:600}
.gs-ov{z-index:9000}
.gs-modal h3{margin:0 2rem .2rem 0}
.gs-ins{margin:.1rem 0 .3rem 2.4rem;padding:.55rem .7rem;border-radius:12px;background:color-mix(in srgb,var(--ink,#1c2a24) 4%,transparent);border:1px solid var(--line,#d5ddd9)}
.gs-sub{display:flex;align-items:flex-start;gap:.55rem;font-size:.78rem;line-height:1.5;padding:.28rem 0}
.gs-sub>i{flex:none;width:18px;height:18px;margin-top:.1rem;border-radius:50%;border:1.5px solid var(--line,#d5ddd9);display:grid;place-items:center;font-style:normal;font-size:.68rem;color:#fff}
.gs-sub.ok>i{background:#10b981;border-color:#10b981}
.gs-sub.ok>i::after{content:"\2713"}
.gs-sub.now>i{border-color:#10b981;box-shadow:0 0 0 3px color-mix(in srgb,#10b981 22%,transparent);animation:gsPulse 1.6s ease-in-out infinite}
.gs-sub.ok .gs-s{opacity:.6}
.gs-s{flex:1;min-width:0}
.gs-s code{font-size:.72rem;padding:.05rem .35rem;border-radius:6px;background:var(--paper,#fff);border:1px solid var(--line,#d5ddd9);word-break:break-all}
.gs-note{margin:.35rem 0 .2rem;padding:.6rem .75rem;border-radius:12px;background:color-mix(in srgb,#f6d27a 16%,transparent);border:1px solid color-mix(in srgb,#d9a441 35%,transparent);font-size:.76rem;line-height:1.55}
.gs-note>b{display:block;margin-bottom:.2rem}
.gs-note ol{margin:0;padding-left:1.15rem}.gs-note li{margin:.12rem 0}
.gs-line{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.45rem;font-size:.74rem;color:var(--ink-muted,#5b6b63)}
.gs-line a{color:#06a54a;font-weight:600}
.gs-jny{display:flex;align-items:center;gap:.8rem;margin-top:.75rem;padding:.7rem .8rem;border-radius:14px;background:color-mix(in srgb,#f6d27a 16%,transparent);border:1px solid color-mix(in srgb,#d9a441 45%,transparent)}
.gs-jny .t{flex:1;min-width:0;font-size:.8rem;line-height:1.45}.gs-jny .t b{display:block;font-size:.88rem}
@keyframes gsPulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,#10b981 22%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,#10b981 6%,transparent)}}
/* ================== [26 ต.ค.] ภารกิจ 7 วันแรก (jny) ================== */
.jny-card{position:relative;padding:1.1rem 1.15rem;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,#10b981 9%,var(--paper-raised)),var(--paper-raised) 55%);border:1px solid color-mix(in srgb,#10b981 38%,var(--line))}
.jny-top{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem}
.jny-top h3{margin:0;font-size:1.02rem}
.jny-sub{font-size:.78rem;color:var(--ink-muted);margin-top:.15rem;line-height:1.45}
.jny-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;margin:.15rem 0 .7rem}
.jny-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#10b981,#f6d27a);transition:width .5s}
.jny-row{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-top:1px dashed var(--line)}
.jny-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.82rem;background:var(--paper);border:1.5px solid var(--line);color:var(--ink-muted)}
.jny-row.done .jny-n{background:#10b981;border-color:#10b981;color:#fff}
.jny-row.open .jny-n{border-color:#10b981;color:#047857}
.jny-t{flex:1;min-width:0}
.jny-t b{display:block;font-size:.88rem;font-weight:600;line-height:1.3}
.jny-t small{display:block;font-size:.74rem;color:var(--ink-muted);line-height:1.4;margin-top:.1rem}
.jny-row.lock .jny-t b{opacity:.55}
.jny-act{flex:none;font-size:.74rem;white-space:nowrap}
.jny-act .msn-btn{padding:.38rem .8rem;font-size:.78rem}
.jny-act .msn-btn.ghost{border-color:#10b981;color:#047857;background:color-mix(in srgb,#10b981 8%,transparent)}
.jny-lock{color:var(--ink-muted);font-size:.74rem}
.jny-fin{display:flex;align-items:center;gap:.8rem;margin-top:.6rem;padding:.7rem .8rem;border-radius:14px;background:color-mix(in srgb,#f6d27a 16%,transparent);border:1px solid color-mix(in srgb,#d9a441 45%,transparent)}
.jny-fin .t{flex:1;min-width:0;font-size:.82rem;line-height:1.4}
.jny-fin .t b{display:block;font-size:.9rem}
.jny-fin.ready{animation:jnyPulse 1.8s ease-in-out infinite}
@keyframes jnyPulse{0%,100%{box-shadow:0 0 0 0 rgba(246,210,122,.0)}50%{box-shadow:0 0 0 5px rgba(246,210,122,.28)}}
html[data-fxq="0"] .jny-fin.ready,html[data-reduced-motion] .jny-fin.ready{animation:none}
@media (prefers-reduced-motion:reduce){.jny-fin.ready{animation:none}}
/* ================== [NEW — 8 ต.ค. คุยกับ user] ระบบภารกิจ (Missions) — ดู loadMissions()/renderMissions() ================== */
.msn-wrap{display:flex;flex-direction:column;gap:.9rem}
.msn-card{padding:1.05rem 1.15rem;border-radius:18px;background:var(--paper-raised);border:1px solid var(--line)}
.msn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.msn-head h3{margin:0;font-size:1rem;font-weight:600}
.msn-sub{font-size:.75rem;color:var(--ink-muted);margin-top:.15rem}
.msn-pill{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:color-mix(in srgb,#d9a441 18%,transparent);color:#b07a2a;white-space:nowrap}
.msn-ladder{display:grid;grid-template-columns:repeat(7,1fr);gap:.45rem}
.msn-day{border:1px solid var(--line);border-radius:12px;padding:.55rem .2rem;text-align:center;font-size:.68rem;color:var(--ink-muted);position:relative}
.msn-day b{display:block;font-size:1rem;color:var(--ink);margin:.15rem 0}
.msn-day.done{background:color-mix(in srgb,#22c55e 13%,transparent);border-color:color-mix(in srgb,#22c55e 45%,transparent)}
.msn-day.done::after{content:'✓';position:absolute;top:3px;right:6px;color:#16a34a;font-weight:700;font-size:.7rem}
.msn-day.today{border:2px solid #d9a441;background:color-mix(in srgb,#d9a441 12%,transparent)}
.msn-day.big b{color:#c58a36}
.msn-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.msn-btn{border:none;border-radius:10px;padding:.5rem 1rem;font-weight:700;font-size:.85rem;font-family:inherit;cursor:pointer;background:#d9a441;color:#241a08}
.msn-btn:disabled{opacity:.5;cursor:default}
.msn-btn.sm{padding:.3rem .7rem;font-size:.75rem}
.msn-btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink-muted)}
/* [14 ต.ค. user "ปุ่มรับ เด่น พรีเมียม หรูหรา" → "เป็นรูปของขวัญ"] ปุ่มรับรางวัลทุกจุด (onclick=msnClaim…) — เขียวมรกต+ขอบทอง+กล่องของขวัญ */
.msn-btn:is([onclick^="msnClaim"],[onclick^="msnCheckin"]){position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem 1.1rem .45rem .5rem;border-radius:999px;font-size:.86rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;color:#ffe7a3;
  background:linear-gradient(180deg,#1f4a3c 0%,#123028 55%,#0b211b 100%);border:1.5px solid #e2b04f;
  box-shadow:inset 0 1px 0 rgba(255,231,163,.35),0 0 0 3px rgba(226,176,79,.14),0 8px 18px -8px rgba(6,30,25,.9);
  transition:transform .15s ease,box-shadow .2s ease;animation:msnClaimGlow 2.4s ease-in-out infinite}
.msn-btn:is([onclick^="msnClaim"],[onclick^="msnCheckin"])::before{content:'';flex:none;width:26px;height:26px;margin:-4px 0 -2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c4'/%3E%3Cstop offset='.55' stop-color='%23f2c14e'/%3E%3Cstop offset='1' stop-color='%23b8862b'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff6b6b'/%3E%3Cstop offset='1' stop-color='%23c0262d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M16 9c-2-4-7-5-7.6-2.2C7.9 9 12 9.6 16 9zm0 0c2-4 7-5 7.6-2.2C24.1 9 20 9.6 16 9z' fill='url%28%23r%29' stroke='%238c1a1f' stroke-width='.8'/%3E%3Crect x='5' y='13.5' width='22' height='15' rx='2' fill='url%28%23g%29' stroke='%239a6a1c' stroke-width='1'/%3E%3Crect x='3.5' y='9' width='25' height='5.5' rx='1.6' fill='url%28%23g%29' stroke='%239a6a1c' stroke-width='1'/%3E%3Crect x='13.8' y='9' width='4.4' height='19.5' fill='url%28%23r%29'/%3E%3Crect x='5.5' y='15' width='21' height='1.4' fill='%239a6a1c' opacity='.35'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));transform-origin:50% 90%;animation:msnGiftShake 2.4s ease-in-out infinite}
.msn-btn:is([onclick^="msnClaim"],[onclick^="msnCheckin"])::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,231,163,.35),transparent);transform:skewX(-18deg);animation:msnClaimSheen 3s ease-in-out infinite}
.msn-btn:is([onclick^="msnClaim"],[onclick^="msnCheckin"]):hover{transform:translateY(-1px);border-color:#ffd77a;box-shadow:inset 0 1px 0 rgba(255,231,163,.45),0 0 0 4px rgba(226,176,79,.25),0 0 18px rgba(242,193,78,.45),0 10px 22px -8px rgba(6,30,25,.9)}
.msn-btn:is([onclick^="msnClaim"],[onclick^="msnCheckin"]):active{transform:translateY(1px) scale(.98)}
.msn-btn.sm:is([onclick^="msnClaim"],[onclick^="msnCheckin"]){padding:.38rem .95rem .38rem .45rem;font-size:.82rem}
.msn-btn.sm:is([onclick^="msnClaim"],[onclick^="msnCheckin"])::before{width:23px;height:23px}
@keyframes msnClaimSheen{0%,60%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(475%) skewX(-18deg)}} /* [31 ต.ค.] เดิมขยับ left = คำนวณเลย์เอาต์ทุกเฟรม (วัดได้ ~28 ครั้ง/วิ) */
@keyframes msnClaimGlow{50%{box-shadow:inset 0 1px 0 rgba(255,231,163,.35),0 0 0 4px rgba(226,176,79,.24),0 0 16px rgba(242,193,78,.4),0 8px 18px -8px rgba(6,30,25,.9)}}
@keyframes msnGiftShake{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-12deg) scale(1.08)}82%{transform:rotate(10deg) scale(1.08)}88%{transform:rotate(-6deg)}94%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.msn-btn:is([onclick^="msnClaim"],[onclick^="msnCheckin"]),.msn-btn:is([onclick^="msnClaim"],[onclick^="msnCheckin"])::before,.msn-btn:is([onclick^="msnClaim"],[onclick^="msnCheckin"])::after{animation:none}}
.msn-task{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-bottom:1px dashed var(--line)}
.msn-task:last-of-type{border-bottom:none}
.msn-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--paper);font-size:1rem;flex:none}
.msn-t{flex:1;min-width:0}.msn-t .tt{font-weight:600;font-size:.86rem}.msn-t small{display:block;color:var(--ink-muted);font-size:.72rem;margin-top:.1rem}
.msn-chk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:.72rem}
.msn-chk.ok{background:#16a34a;border-color:#16a34a;color:#fff}
.msn-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:.35rem}.msn-bar i{display:block;height:100%;background:#16a34a;border-radius:99px}
.msn-quiz{margin-top:.5rem;display:flex;flex-direction:column;gap:.35rem}
.msn-opt{text-align:left;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:.45rem .7rem;font-size:.8rem;font-family:inherit;cursor:pointer}
.msn-opt:hover{border-color:#d9a441}
.msn-opt.wrong{border-color:#ef4444;color:#ef4444}
.msn-explain{font-size:.75rem;color:var(--ink-muted);background:var(--paper);border-radius:10px;padding:.5rem .7rem;margin-top:.35rem}
/* [แก้ 8 ต.ค. คุยกับ user "หน้าภารกิจตรงกล่องสุ่มยังไม่สวย"] กล่องสุ่มประจำวันแบบพรีเมียม — ชุดเดียวกับแถบภารกิจ */
.msn-box{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;margin-top:.9rem;
  padding:1rem 1.2rem;border-radius:18px;color:#fff;border:2px solid transparent;
  background:radial-gradient(120% 140% at 0% 0%,#2b6b5a 0%,#123f35 45%,#071f1a 100%) padding-box,
    conic-gradient(from 200deg,#f6d27a,#a8761f,#fff4c9,#e2a93b,#7a5414,#f6d27a) border-box;
  box-shadow:0 6px 14px -10px rgba(10,40,33,.6)}
.msn-box::after{content:'';position:absolute;top:0;bottom:0;width:38%;left:-45%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),transparent);animation:msnSweep 4.2s ease-in-out infinite}
.msn-box .g{position:relative;width:78px;height:82px;margin:-6px -4px -6px -6px;animation:msnGiftFloat 2.6s ease-in-out infinite;will-change:transform}
.msn-box .g::before{content:'';position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,120,.5),transparent 68%);animation:gbxPulse 1.8s ease-in-out infinite alternate}
.msn-box .g svg{position:relative;width:100%;height:100%;overflow:visible}
.msn-box.ready .g{animation:msnGiftWiggle 2s ease-in-out infinite}
.msn-box.opened .g{animation:none;opacity:.8}
.msn-box .t b{display:block;font-size:1.08rem;font-weight:800;background:linear-gradient(90deg,#fff4c9,#f6d27a 45%,#fff 60%,#e2a93b);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:msnTitleShine 4s linear infinite}
.msn-box .t small{display:block;margin-top:.2rem;font-size:.78rem;color:rgba(255,255,255,.82)}
.msn-box .t .pips{display:flex;gap:4px;margin-top:.45rem}.msn-box .t .pips i{width:22px;height:6px;border-radius:9px;background:rgba(255,255,255,.18)}.msn-box .t .pips i.on{background:#4ade80;box-shadow:0 0 6px #4ade80}
.msn-box .cta{position:relative;z-index:2;overflow:hidden;border:none;border-radius:12px;padding:.65rem 1.1rem;font-family:inherit;font-weight:800;font-size:.86rem;cursor:pointer;white-space:nowrap;
  color:#241a08;background:linear-gradient(135deg,#fff1b8,#f2c14e 45%,#d29a2e);box-shadow:0 8px 20px -6px rgba(242,193,78,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.msn-box .cta::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);animation:msnSweep 2.6s ease-in-out infinite}
.msn-box .cta:disabled{cursor:default;background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);box-shadow:none;border:1px solid rgba(255,255,255,.18)}
.msn-box .cta:disabled::after{display:none}
.msn-box .done{position:relative;z-index:2;font-weight:800;font-size:.82rem;color:#bbf7d0;background:rgba(34,197,94,.2);border:1px solid rgba(74,222,128,.45);border-radius:999px;padding:.35rem .8rem;white-space:nowrap}
@media (max-width:640px){.msn-box{grid-template-columns:auto 1fr;padding:.9rem}.msn-box .cta,.msn-box .done{grid-column:1 / -1;text-align:center}}
@keyframes msnShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.msn-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:760px){.msn-grid2{grid-template-columns:1fr}.msn-ladder{grid-template-columns:repeat(4,1fr)}}
.msn-tok{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:700;color:#b07a2a;white-space:nowrap}
.msn-done{color:#16a34a;font-size:.72rem;font-weight:700;white-space:nowrap}
.msn-ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}
/* [NEW 14 ต.ค.] บิงโกรายสัปดาห์ + ทายใจตลาด */
.bgo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.bgo-cell{position:relative;border:1px solid var(--line);border-radius:14px;padding:.55rem .4rem .5rem;text-align:center;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;background:var(--paper);transition:transform .2s}
.bgo-cell .ic{font-size:1.25rem;line-height:1}
.bgo-cell .tt{font-size:.68rem;line-height:1.25;color:var(--ink);font-weight:600}
.bgo-cell .pg{font-family:'IBM Plex Mono',monospace;font-size:.64rem;color:var(--ink-muted)}
.bgo-cell .mb{width:70%;height:4px;border-radius:9px;background:var(--line);overflow:hidden}.bgo-cell .mb i{display:block;height:100%;background:#d9a441;border-radius:9px}
.bgo-cell.done{border-color:#d9a441;background:linear-gradient(150deg,color-mix(in srgb,#f6d27a 30%,var(--paper)),color-mix(in srgb,#d9a441 14%,var(--paper)))}
.bgo-cell.done::after{content:'✓';position:absolute;top:5px;right:7px;width:18px;height:18px;border-radius:50%;background:#16a34a;color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center}
.bgo-cell.free{border:none;color:#fff3cf;background:radial-gradient(120% 120% at 30% 20%,#2b6b5a,#0c3a31 70%)}
.bgo-cell.free .tt{color:#f6d27a;letter-spacing:.2em;font-weight:800}
.bgo-cell.free::after{display:none}
.bgo-cell.line{box-shadow:0 0 0 2px #e2a93b,0 6px 16px -8px rgba(226,169,59,.7)}
.bgo-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.75rem;flex-wrap:wrap}
.bgo-lines{display:flex;gap:4px}.bgo-lines i{width:16px;height:6px;border-radius:9px;background:var(--line)}.bgo-lines i.on{background:#d9a441}.bgo-lines i.ok{background:#16a34a}
.prd-q{font-size:.86rem;font-weight:600;margin-bottom:.6rem}
.fsh2{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem 1.1rem;padding:1.15rem 1.3rem;border-radius:22px;color:#fff;cursor:pointer;border:2px solid transparent;
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,226,150,.22),transparent 45%) padding-box,linear-gradient(160deg,#145647 0%,#0b3a31 45%,#06231d 100%) padding-box,
    conic-gradient(from 210deg,#f6d27a,#a8761f,#fff4c9,#e2a93b,#7a5414,#f6d27a) border-box;
  box-shadow:0 14px 34px -18px rgba(6,35,29,.9),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .2s,box-shadow .2s}
.fsh2:hover{transform:translateY(-2px);box-shadow:0 20px 40px -18px rgba(6,35,29,.95),0 0 0 1px rgba(246,210,122,.35)}
.fsh2::before{content:'';position:absolute;inset:-60%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 10%,rgba(255,226,150,.10) 12% 16%,transparent 18% 40%,rgba(255,226,150,.08) 42% 45%,transparent 47% 70%,rgba(255,226,150,.10) 72% 76%,transparent 78%);animation:fshSpin 18s linear infinite}
.fsh2::after{content:'';position:absolute;top:0;bottom:0;width:30%;left:-40%;z-index:-1;background:linear-gradient(105deg,transparent,rgba(255,255,255,.10),transparent);animation:msnSweep 5s ease-in-out infinite}
.fsh2 .wv{position:absolute;left:0;right:0;bottom:-2px;height:34px;z-index:-1;opacity:.55;pointer-events:none}
.fsh2 .wv svg{width:200%;height:100%;animation:fshWave2 9s linear infinite}
.fsh2 .bb{position:absolute;bottom:-12px;width:8px;height:8px;border-radius:50%;z-index:-1;border:1px solid rgba(200,255,245,.6);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),transparent 60%);animation:ocBub var(--t,7s) linear infinite;animation-delay:var(--dl,0s)}
.fsh2-medal{position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 35% 30%,#2b7a66,#0b3a31 70%);box-shadow:0 0 0 2px #e2a93b,0 0 0 5px rgba(246,210,122,.18),0 10px 24px -8px rgba(0,0,0,.6),inset 0 0 18px rgba(255,214,120,.25)}
.fsh2-medal svg{width:58px;height:58px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));animation:msnGiftFloat 2.8s ease-in-out infinite}
/* [19 ต.ค.] ปลาประจำเทศกาล: ตัวใหญ่กว่าวง ว่ายโผล่ออกมาจากบ่อ (ลอยขึ้นลง + ส่ายตัว + หางสะบัดด้วย skew) · ระลอกน้ำใต้ตัวปลา */
.fsh2-medal .fsh2-fish{position:absolute;left:46%;top:50%;width:124%;height:auto;max-width:none;z-index:2;transform-origin:42% 55%;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,214,120,.25));animation:fshSwim 3.4s ease-in-out infinite;pointer-events:none}
@keyframes fshSwim{0%,100%{transform:translate(-50%,-50%) rotate(-7deg) skewY(0deg)}25%{transform:translate(-48%,-58%) rotate(-2deg) skewY(2deg)}50%{transform:translate(-50%,-62%) rotate(5deg) skewY(0deg)}75%{transform:translate(-52%,-56%) rotate(1deg) skewY(-2deg)}}
.fsh2-medal .rp{position:absolute;left:50%;top:64%;width:70%;height:22%;border-radius:50%;border:1.5px solid rgba(190,255,240,.55);transform:translate(-50%,-50%) scale(.4);opacity:0;z-index:1;animation:fshRip 3.4s ease-out infinite;pointer-events:none}
.fsh2-medal .rp.r2{animation-delay:1.7s}
@keyframes fshRip{0%{transform:translate(-50%,-50%) scale(.35);opacity:.85}100%{transform:translate(-50%,-50%) scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.fsh2-medal .fsh2-fish,.fsh2-medal .rp{animation:none}.fsh2-medal .fsh2-fish{transform:translate(-50%,-54%) rotate(-4deg)}}
.fsh2-medal::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px dashed rgba(246,210,122,.45);animation:fshSpin 24s linear infinite}
.fsh2-body{min-width:0}
.fsh2-kick{font-size:.66rem;letter-spacing:.32em;color:#f6d27a;opacity:.9;font-weight:700}
.fsh2-title{font-size:1.32rem;font-weight:800;line-height:1.2;margin:.1rem 0 .45rem;background:linear-gradient(90deg,#fff4c9,#f6d27a 45%,#fff 60%,#e2a93b);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:msnShine 4s linear infinite}
.fsh2-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.fsh2-chips span{font-size:.76rem;font-weight:600;padding:.22rem .6rem;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(246,210,122,.35);color:#fff6dc;white-space:nowrap}
.fsh2-chips span b{color:#ffe08a}
.fsh2-chips span.fsh2-sh.ok{background:rgba(34,197,94,.22);border-color:rgba(74,222,128,.5);color:#bbf7d0}
.fsh2-share{display:inline-flex;align-items:center;gap:.3rem;margin-top:.5rem;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;padding:.38rem .8rem;border-radius:999px;
  color:#fff6dc;background:rgba(124,108,240,.28);border:1px dashed rgba(200,190,255,.65);text-align:left;line-height:1.35}
.fsh2-share:hover{background:rgba(124,108,240,.42)}
.fsh2-buy{grid-column:1 / -1;justify-self:start;max-width:100%;position:relative;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .6rem;margin-top:.5rem;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;padding:.45rem .9rem;border-radius:12px;text-align:left;line-height:1.3;
  color:#2a1a04;background:linear-gradient(180deg,#ffe9a6,#f2c14e);border:1px solid #f7d774;box-shadow:0 8px 18px -10px rgba(242,193,78,.9)}
.fsh2-buy b{font-family:'IBM Plex Mono',monospace}.fsh2-buy small{font-weight:600;opacity:.75;font-size:.7rem}.fsh2-buy:hover{filter:brightness(1.05)}
.fsh2-cd{grid-column:1 / -1;margin-top:-.2rem}
.fsh2-cd .t{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:#fff6dc;margin-bottom:.35rem}
.fsh2-cd .t b{color:#ffe08a;font-variant-numeric:tabular-nums;font-family:'IBM Plex Mono',monospace}
.fsh2-cd .bar{height:9px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid rgba(246,210,122,.35);overflow:hidden}
.fsh2-cd .bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#a8761f,#f6d27a 60%,#fff1b8);box-shadow:0 0 12px rgba(246,210,122,.6);transition:width 1s linear}
.fsh2-cta{position:relative;overflow:hidden;border:none;border-radius:14px;padding:.75rem 1.2rem;font-family:inherit;font-weight:800;font-size:.92rem;cursor:pointer;white-space:nowrap;color:#241a08;
  background:linear-gradient(135deg,#fff1b8,#f2c14e 45%,#d29a2e);box-shadow:0 10px 22px -8px rgba(242,193,78,.75),inset 0 1px 0 rgba(255,255,255,.6)}
.fsh2-cta::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);animation:msnSweep 2.6s ease-in-out infinite}
.fsh2.wait .fsh2-cta,.fsh2.done .fsh2-cta{color:#fff6dc;background:rgba(0,0,0,.3);border:1px solid rgba(246,210,122,.4);box-shadow:none;font-variant-numeric:tabular-nums}
.fsh2.wait .fsh2-cta::after,.fsh2.done .fsh2-cta::after{display:none}
@keyframes fshSpin{to{transform:rotate(360deg)}}
@keyframes fshWave2{to{transform:translateX(-50%)}}
@keyframes msnShine{to{background-position:-200% 0}}
@media (max-width:640px){.fsh2{grid-template-columns:auto 1fr;padding:1rem}.fsh2-medal{width:62px;height:62px}.fsh2-medal svg{width:46px;height:46px}.fsh2-title{font-size:1.15rem}.fsh2-cta{grid-column:1 / -1;width:100%}}
@media (prefers-reduced-motion:reduce){.fsh2::before,.fsh2::after,.fsh2 .wv svg,.fsh2 .bb,.fsh2-medal svg,.fsh2-medal::after,.fsh2-title,.fsh2-cta::after{animation:none}}
/* [NEW 14 ต.ค. คุยกับ user "ทำทั้งหมด — ดึงลูกค้ากลับมาเล่น"] อีเวนต์ · แจ้งเตือน · ตู้ปลาสะสม · อันดับประจำสัปดาห์ */
/* ===== [20 ต.ค. user "หมุนวงล้อ"] วงล้อนำโชค ===== */
.whl-ov{position:fixed;inset:0;z-index:9400;background-color:#03060e!important;display:flex;align-items:center;justify-content:center;padding:14px;background:radial-gradient(110% 80% at 50% 25%,rgba(8,40,60,.9),rgba(3,6,14,0) 70%),repeating-linear-gradient(0deg,rgba(34,211,238,.05) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(34,211,238,.05) 0 1px,transparent 1px 22px);background-blend-mode:normal;overflow-y:auto;-webkit-overflow-scrolling:touch}
.whl-card{position:relative;width:min(440px,100%);margin:auto;color:#fff;text-align:center;padding:14px 4px 18px}
.whl-x{position:absolute;top:4px;right:4px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;font-size:1.1rem;cursor:pointer;z-index:3}
.whl-h{font-weight:900;font-size:1.4rem;letter-spacing:.08em;text-transform:uppercase;color:#e0fbff;text-shadow:0 0 6px #22d3ee,0 0 18px #22d3ee,0 0 32px #d946ef;margin:0 0 .15rem}
.whl-sub{font-size:.78rem;opacity:.8;margin-bottom:.7rem}
.whl-stage{position:relative;width:min(90vw,390px);aspect-ratio:1;margin:0 auto}
.whl-glow{position:absolute;inset:-9%;border-radius:50%;background:radial-gradient(closest-side,rgba(34,211,238,.35),rgba(217,70,239,.18) 60%,transparent 75%);animation:whlGlow 2.6s ease-in-out infinite}
@keyframes whlGlow{50%{opacity:.55;transform:scale(1.04)}}
.whl-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#0b1220,#1f2937 8%,#0b1220 16%,#1f2937 25%,#0b1220 33%,#1f2937 41%,#0b1220 50%,#1f2937 58%,#0b1220 66%,#1f2937 75%,#0b1220 83%,#1f2937 91%,#0b1220);box-shadow:0 0 0 2px #22d3ee,0 0 22px 2px rgba(34,211,238,.7),0 0 0 6px #0b1220,0 0 0 8px #d946ef,0 0 36px 6px rgba(217,70,239,.45),0 20px 50px -10px rgba(0,0,0,.9)}
.whl-ring::after{content:"";position:absolute;inset:6.6%;border-radius:50%;box-shadow:0 0 0 2px #22d3ee,0 0 16px 2px rgba(34,211,238,.8),inset 0 0 18px rgba(34,211,238,.45);animation:whlNeon 2.2s ease-in-out infinite}
@keyframes whlNeon{50%{box-shadow:0 0 0 2px #d946ef,0 0 18px 3px rgba(217,70,239,.85),inset 0 0 18px rgba(217,70,239,.4)}}
.whl-ring::before{content:"";position:absolute;inset:2.6%;border-radius:50%;border:1.5px dashed rgba(34,211,238,.45);animation:whlRot 18s linear infinite}
@keyframes whlRot{to{transform:rotate(360deg)}}
.whl-bulbs{position:absolute;inset:0;pointer-events:none}
.whl-bulbs i{position:absolute;left:50%;top:50%;width:2.6%;height:2.6%;margin:-1.3%;border-radius:2px;transform:rotate(45deg);background:#a5f3fc;box-shadow:0 0 8px 2px rgba(34,211,238,.95);animation:whlBulb 1s steps(1) infinite}
.whl-bulbs i:nth-child(odd){animation-delay:.5s}
@keyframes whlBulb{50%{background:#f0abfc;box-shadow:0 0 8px 2px rgba(217,70,239,.95)}}
.whl-disc{position:absolute;inset:7.6%;border-radius:50%;overflow:hidden;transform:rotate(0deg);will-change:transform;box-shadow:inset 0 0 30px rgba(0,0,0,.75),inset 0 0 0 2px rgba(34,211,238,.6)}
.whl-disc::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle,transparent 30%,rgba(34,211,238,.08) 31%,transparent 32%,transparent 62%,rgba(217,70,239,.1) 63%,transparent 64%)}
.whl-disc.on-ring{inset:13.6%;box-shadow:inset 0 0 26px rgba(0,0,0,.8),0 0 0 2px rgba(34,211,238,.85),0 0 14px rgba(34,211,238,.6)}
.whl-disc.go{transition:transform 5.2s cubic-bezier(.12,.68,.08,1)}
.whl-seg{position:absolute;left:50%;top:50%;width:0;height:0}
.whl-seg .in{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;width:72px}
.whl-seg .art{width:50px;height:50px;display:grid;place-items:center;overflow:hidden;border-radius:12px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.whl-seg .art>*{max-width:100%;max-height:100%}
.whl-seg .art .ic{width:46px!important;height:46px!important;padding:0!important;margin:0;border:0!important;background:none!important;transform:scale(.62);transform-origin:center;font-size:3rem!important;line-height:46px}
.whl-seg .art img{width:50px;height:50px;object-fit:contain;border-radius:50%}
.whl-seg .art .ic.rbx{transform:scale(.42)!important}
.whl-seg .art .ba{width:40px;height:40px}
.whl-seg .nm{font-family:Orbitron,'Kanit',system-ui,sans-serif;font-size:.95rem;font-weight:900;line-height:1;color:#fff;-webkit-text-stroke:3px #05070f;paint-order:stroke fill;text-shadow:0 0 8px rgba(34,211,238,.9);max-width:72px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.whl-none{font-weight:900;font-size:.85rem;color:#cbd5e1;-webkit-text-stroke:3px #05070f;paint-order:stroke fill}
.whl-ptr{position:absolute;left:50%;top:-2%;width:11%;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 0 6px #d946ef) drop-shadow(0 0 12px rgba(217,70,239,.7))}
.whl-ptr.tick{animation:whlTick .12s ease-out}
@keyframes whlTick{50%{transform:translateX(-50%) rotate(-14deg)}}
.whl-hub{position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:2;border:0;cursor:pointer;color:#e0fbff;font-weight:900;font-size:clamp(.8rem,3.4vw,1rem);letter-spacing:.12em;text-shadow:0 0 6px #22d3ee,0 0 12px #22d3ee;
  background:radial-gradient(circle at 50% 50%,#3b0a45 0,#120a24 45%,#05070f 75%);box-shadow:0 0 0 2px #22d3ee,0 0 16px 3px rgba(34,211,238,.8),0 0 0 5px #05070f,0 0 0 7px #d946ef,0 0 22px 4px rgba(217,70,239,.6),inset 0 0 14px rgba(217,70,239,.6)}
.whl-hub:disabled{filter:grayscale(.5) brightness(.8);cursor:default}
.whl-hub:not(:disabled){animation:whlHub 1.4s ease-in-out infinite}
@keyframes whlHub{50%{box-shadow:0 0 0 2px #d946ef,0 0 22px 6px rgba(217,70,239,.9),0 0 0 5px #05070f,0 0 0 7px #22d3ee,0 0 30px 8px rgba(34,211,238,.6),inset 0 0 18px rgba(34,211,238,.6)}}
.whl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.whl-btns{display:flex;flex-direction:column;gap:.5rem;margin:1.1rem auto 0;width:min(360px,100%)}
.whl-btn{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.75rem 1rem;border-radius:12px;border:1.5px solid rgba(34,211,238,.55);background:rgba(8,47,73,.35);box-shadow:inset 0 0 14px rgba(34,211,238,.12);color:#fff;font-weight:800;font-size:.92rem;cursor:pointer;text-align:left}
.whl-btn small{display:block;font-weight:500;font-size:.72rem;opacity:.8}
.whl-btn b{flex:none;padding:.3rem .7rem;border-radius:8px;color:#05070f;background:linear-gradient(135deg,#a5f3fc,#22d3ee);box-shadow:0 0 12px rgba(34,211,238,.7)}
.whl-btn.main{border-color:rgba(217,70,239,.7);background:linear-gradient(135deg,rgba(217,70,239,.25),rgba(34,211,238,.18));box-shadow:0 0 18px rgba(217,70,239,.35),inset 0 0 14px rgba(217,70,239,.2)}
.whl-btn.main b{background:linear-gradient(135deg,#f5d0fe,#d946ef);color:#fff;box-shadow:0 0 12px rgba(217,70,239,.8)}
.whl-btn:disabled{opacity:.45;cursor:default}
.whl-ea{margin:.8rem auto 0;width:min(360px,100%);font-size:.8rem;padding:.6rem .8rem;border-radius:12px;background:rgba(34,211,238,.08);border:1px dashed rgba(34,211,238,.5)}
.whl-odds{margin:1rem auto 0;width:min(360px,100%);text-align:left;font-size:.8rem;background:rgba(8,47,73,.3);border:1px solid rgba(34,211,238,.2);border-radius:12px;padding:.55rem .8rem}
.whl-odds summary{cursor:pointer;font-weight:700}
.whl-odds table{width:100%;margin-top:.4rem;border-collapse:collapse}.whl-odds td{padding:.22rem 0;border-top:1px solid rgba(255,255,255,.08)}.whl-odds td:last-child{text-align:right;font-weight:700}
.whl-t{display:inline-block;width:.6rem;height:.6rem;border-radius:3px;margin-right:.35rem;vertical-align:middle}
.whl-res{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,10,20,.72);animation:whlFade .25s ease-out}
@keyframes whlFade{from{opacity:0}}
.whl-res .bx{width:min(320px,100%);border-radius:18px;padding:1.2rem 1rem 1rem;background:linear-gradient(180deg,#0c1a2e,#120a24);border:2px solid #22d3ee;box-shadow:0 0 30px rgba(34,211,238,.55),0 0 60px rgba(217,70,239,.3);animation:whlPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes whlPop{from{transform:scale(.5);opacity:0}}
.whl-res .k{font-size:.75rem;letter-spacing:.18em;color:#67e8f9;font-weight:800;text-shadow:0 0 8px #22d3ee}
.whl-res .art{width:96px;height:96px;margin:.6rem auto;display:grid;place-items:center}
.whl-res .art .ic{transform:scale(1.1)}.whl-res .art img{width:96px;height:96px;object-fit:contain;border-radius:50%}.whl-res .art .ba{width:84px;height:84px}
.whl-res h4{font-size:1.1rem;font-weight:900;margin:.2rem 0}
.whl-res p{font-size:.8rem;opacity:.85;margin:.3rem 0 .8rem}
.whl-res button{padding:.6rem 1.4rem;border-radius:10px;border:0;font-weight:800;color:#05070f;background:linear-gradient(135deg,#a5f3fc,#22d3ee);box-shadow:0 0 14px rgba(34,211,238,.6);cursor:pointer}
.whl-hist{margin:.8rem auto 0;width:min(360px,100%);text-align:left;font-size:.75rem;opacity:.8}
@media (prefers-reduced-motion:reduce){.whl-disc.go{transition-duration:1.2s}.whl-glow,.whl-bulbs i,.whl-hub{animation:none!important}}
.dg-evb .dgi{width:58px;height:58px;flex:none;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(239,68,68,.6));animation:evBob 2.4s ease-in-out infinite}
.dg-evb .x2{white-space:nowrap}
.whl-evb .x2{white-space:nowrap}
/* [21 ต.ค.] การ์ดกล่องสุ่มไค (แถวกิจกรรมหน้าแรก) */
.ev-row .loot-card{padding-right:42%;text-align:left;cursor:pointer;font:inherit;border-color:rgba(248,113,113,.55);background:radial-gradient(70% 90% at 85% 70%,rgba(239,68,68,.34),transparent 70%),linear-gradient(135deg,#1a0508,#4c0519 55%,#12060f)}
.ev-row .loot-card .ev-art{width:40%;max-width:128px;right:6px;bottom:-4px;animation:evBob 3.2s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(239,68,68,.65))}
.ev-row .loot-card .ev-k{color:#fecaca}
.ev-row .loot-card .lc-lim{display:inline-block;font-size:.62rem;font-weight:900;letter-spacing:.12em;padding:.1rem .45rem;border-radius:999px;background:linear-gradient(135deg,#fbbf24,#ef4444);color:#1a0505;margin-left:.35rem;vertical-align:middle}
.ev-row .loot-card .dgc-bars{display:block;width:100%;max-width:150px;height:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin:.2rem 0}
.ev-row .loot-card .dgc-bars i{display:block;height:100%;background:linear-gradient(90deg,#ef4444,#fbbf24)}
@media (max-width:640px){.ev-row .loot-card{padding-right:36%}.ev-row .loot-card .ev-art{width:36%}}
/* [21 ต.ค.] การ์ดโปรเติมสะสม แจกสึกิโยะ เร็น (แถวกิจกรรมหน้าแรก · ภาพนิ่ง) */
.ev-row .tgr-card{padding-right:40%;text-align:left;cursor:pointer;font:inherit;border-color:rgba(203,213,225,.55);background:radial-gradient(70% 90% at 85% 70%,rgba(148,197,255,.3),transparent 70%),linear-gradient(135deg,#0b1220,#1e293b 55%,#0a0f1a)}
/* [4 พ.ย.] แบบประเมินความพึงพอใจ — การ์ดแถวกิจกรรม + หน้าต่าง (ไม่มีอิโมจิ/ไอคอน · ไม่มี backdrop-filter · มือถือเต็มจอ) */
.sv-card{padding-right:34%;text-align:left;cursor:pointer;font:inherit;border-color:rgba(243,201,105,.45);background:radial-gradient(70% 90% at 85% 65%,rgba(243,201,105,.22),transparent 70%),linear-gradient(135deg,#0d2a22,#123a2f 55%,#0a1f19)}
.sv-card .ev-k{color:#f3c969}.sv-card .sv-rw{display:block;color:#f3c969;font-weight:600;margin-top:2px}
.sv-art{position:absolute;right:12px;top:50%;translate:0 -50%;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;width:30%;max-width:130px;pointer-events:none}
.sv-art i{aspect-ratio:1;background:linear-gradient(135deg,#ffe7a3,#e0a93a);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.sv-art i:nth-child(5){background:linear-gradient(135deg,#ffe7a3 50%,rgba(255,231,163,.25) 50%)}
.sv-ov{position:fixed;inset:0;z-index:100050;background:rgba(6,16,13,.86);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 12px;overscroll-behavior:contain}
.sv-ov[hidden]{display:none}
.sv-box{position:relative;margin:auto;width:100%;max-width:560px;background:linear-gradient(180deg,#0f2b23,#0b211b);border:1px solid rgba(243,201,105,.35);border-radius:18px;padding:22px 20px 18px;color:#e9f3ee;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);outline:none}
.sv-box h3{margin:0 30px 6px 0;font-size:1.15rem;color:#f3c969;font-weight:700}
.sv-x{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#e9f3ee;font-size:1.3rem;line-height:1;cursor:pointer}
.sv-lead{margin:0 0 6px;font-size:.84rem;line-height:1.6;color:#cfe3da}.sv-lead b,.sv-got b{color:#f3c969}
.sv-sec{margin:16px 0 4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#f3c969;font-weight:700}
.sv-q{margin:10px 0 0}.sv-q>label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px;color:#f1f7f4}
.sv-opt{font-weight:400;font-size:.72rem;color:#93b3a6}
.sv-sc{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sv-sc button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#dcebe4;cursor:pointer;font:inherit;transition:background .15s,border-color .15s}
.sv-sc button b{font-size:1rem;line-height:1.1}.sv-sc button small{font-size:.62rem;opacity:.8;white-space:nowrap}
.sv-sc button:hover{border-color:rgba(243,201,105,.6)}
.sv-sc button.on{background:linear-gradient(135deg,#f3c969,#d8a23e);border-color:transparent;color:#1d1505}
.sv-ch{display:flex;flex-wrap:wrap;gap:6px}
.sv-ch button{padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#dcebe4;font:inherit;font-size:.8rem;cursor:pointer}
.sv-ch button:hover{border-color:rgba(243,201,105,.6)}
.sv-ch button.on{background:rgba(243,201,105,.18);border-color:#f3c969;color:#ffe7a3;font-weight:600}
.sv-q textarea{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:#f1f7f4;padding:9px 11px;font:inherit;font-size:.86rem;resize:vertical}
.sv-q textarea:focus{outline:none;border-color:#f3c969}
.sv-note{margin:12px 0 0;font-size:.72rem;color:#93b3a6;line-height:1.5}
.sv-err{margin:10px 0 0;padding:7px 10px;border-radius:9px;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#fecaca;font-size:.8rem}
.sv-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.sv-acts button{padding:9px 16px;border-radius:11px;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer}
.sv-later{border:1px solid rgba(255,255,255,.2);background:transparent;color:#dcebe4}
.sv-send{border:0;background:linear-gradient(135deg,#f3c969,#d8a23e);color:#1d1505}.sv-send:disabled{opacity:.55;cursor:default}
.sv-stars{display:flex;justify-content:center;gap:10px;margin:18px 0 6px}
.sv-stars button{width:52px;height:52px;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv-stars button i{display:block;width:100%;height:100%;background:rgba(255,255,255,.16);clip-path:polygon(50% 3%,61.8% 37%,97.5% 37.6%,69% 59.4%,79.4% 93.6%,50% 73%,20.6% 93.6%,31% 59.4%,2.5% 37.6%,38.2% 37%);transition:background .15s,transform .15s}
.sv-stars button:hover i{transform:scale(1.08)}
.sv-stars button.on i{background:linear-gradient(135deg,#ffe08a,#e0a63a)}
.sv-stars button:focus-visible{outline:2px solid #f3c969;outline-offset:3px;border-radius:8px}
.sv-starlb{text-align:center;min-height:1.4em;margin:0 0 4px;font-size:.95rem;font-weight:700;color:#f3c969}
.sv-box.sv-sm{max-width:440px}
@media (max-width:560px){.sv-stars{gap:6px}.sv-stars button{width:46px;height:46px}.sv-box.sv-sm{min-height:0;margin:auto 10px;border-radius:16px;width:auto}.sv-ov.sv-sm-ov{align-items:center;padding:12px 0}}
.sv-got{margin:10px 0 0;padding:9px 12px;border-radius:10px;background:rgba(243,201,105,.1);border:1px solid rgba(243,201,105,.35);font-size:.86rem}
@media (max-width:560px){.sv-ov{padding:0}.sv-box{border-radius:0;min-height:100%;max-width:none;padding:18px 14px 22px}.sv-sc button small{font-size:.56rem}.sv-acts{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,#0b211b 30%);padding-top:12px;margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}}

.ev-row .tgr-card .ev-art{width:44%;max-width:160px;right:2px;bottom:-2px;filter:drop-shadow(0 0 14px rgba(191,219,254,.5))}
.ev-row .tgr-card .ev-k{color:#dbeafe}
.ev-row .tgr-card .tgr-new{display:inline-block;font-size:.62rem;font-weight:900;letter-spacing:.1em;padding:.1rem .45rem;border-radius:999px;background:linear-gradient(135deg,#e0f2fe,#93c5fd);color:#0b1220;margin-left:.35rem;vertical-align:middle}
.ev-row .tgr-card .dgc-bars i{background:linear-gradient(90deg,#93c5fd,#f6d27a)}
.ev-row .tgr-card .tgr-ok{color:#bbf7d0}
@media (max-width:640px){.ev-row .tgr-card{padding-right:36%}.ev-row .tgr-card .ev-art{width:38%}}
.ev-row .tg-card{padding-right:38%;text-align:left;cursor:pointer;font:inherit;border-color:rgba(226,232,240,.5);
  background:radial-gradient(1.4px 1.4px at 14% 24%,#fff,transparent),radial-gradient(1px 1px at 32% 70%,rgba(255,255,255,.85),transparent),radial-gradient(1.2px 1.2px at 52% 18%,#fff,transparent),radial-gradient(1px 1px at 66% 62%,rgba(255,255,255,.7),transparent),radial-gradient(1.2px 1.2px at 90% 14%,#fff,transparent),
    radial-gradient(46% 72% at 80% 40%,rgba(241,245,249,.34),rgba(148,163,184,.12) 55%,transparent 72%),linear-gradient(135deg,#08122b,#1b2a5c 55%,#0b1a2d)}
.ev-row .tg-card .ev-art{width:34%;max-width:118px;right:8px;bottom:-4px;filter:drop-shadow(0 0 14px rgba(186,230,253,.55))}
.ev-row .tg-card .ev-k{color:#e0e7ff}
.ev-row .tg-card .tg-lim{display:inline-block;font-size:.62rem;font-weight:900;letter-spacing:.1em;padding:.1rem .45rem;border-radius:999px;background:linear-gradient(135deg,#fef3c7,#fbbf24);color:#2a1a02;margin-left:.35rem;vertical-align:middle}
.ev-row .tg-card b{color:#fff}
.ev-row .tg-card .tg-hi{color:#fde68a}
.ev-row .tg-card .tg-bar{display:block;width:100%;max-width:160px;height:6px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;margin:.25rem 0}
.ev-row .tg-card .tg-bar i{display:block;height:100%;background:linear-gradient(90deg,#7dd3fc,#fde68a)}
.ev-row .tg-card .tg-ok{color:#86efac;font-weight:800}
@media (max-width:640px){.ev-row .tg-card{padding-right:34%}.ev-row .tg-card .ev-art{width:32%}}
/* [21 ต.ค.] กล่องสุ่มไค */
.lbx-ov{position:fixed;inset:0;z-index:9400;overflow-y:auto;overscroll-behavior:contain;background-color:#07030a!important;display:flex;align-items:flex-start;justify-content:center;padding:14px;background:radial-gradient(110% 70% at 50% 18%,rgba(120,10,30,.75),rgba(7,3,10,0) 70%),repeating-linear-gradient(0deg,rgba(239,68,68,.05) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(239,68,68,.04) 0 1px,transparent 1px 22px)}
.lbx-card{position:relative;width:min(440px,100%);margin:auto;color:#fff;text-align:center;padding:14px 2px 22px}
.lbx-x{position:absolute;top:4px;right:4px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.4);color:#fff;font-size:1.1rem;cursor:pointer;z-index:3}
.lbx-h{font-weight:900;font-size:1.4rem;letter-spacing:.08em;color:#ffe4e6;text-shadow:0 0 6px #ef4444,0 0 18px #ef4444,0 0 34px #be123c;margin:0 0 .1rem}
.lbx-sub{font-size:.78rem;opacity:.8;margin-bottom:.4rem}
.lbx-stage{position:relative;width:min(78vw,300px);height:min(78vw,300px);margin:.2rem auto 0;display:grid;place-items:center}
.lbx-glow{position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(closest-side,rgba(239,68,68,.45),rgba(190,18,60,.18) 62%,transparent 76%);animation:whlGlow 2.6s ease-in-out infinite}
.lbx-hero{position:absolute;left:50%;bottom:6%;height:92%;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 0 14px rgba(239,68,68,.65));pointer-events:none}
.lbx-crate{position:relative;width:34%;margin-top:58%;filter:drop-shadow(0 0 16px rgba(239,68,68,.85));z-index:2}
.lbx-crate svg{width:100%;display:block}
.lbx-crate.shake{animation:lbxShake .5s linear infinite}
@keyframes lbxShake{0%,100%{transform:translate(0) rotate(0)}20%{transform:translate(-5px,2px) rotate(-6deg)}40%{transform:translate(5px,-2px) rotate(6deg)}60%{transform:translate(-4px,0) rotate(-4deg)}80%{transform:translate(4px,2px) rotate(4deg)}}
.lbx-tag{position:absolute;top:0;left:0;z-index:3;font-size:.68rem;font-weight:900;letter-spacing:.14em;padding:.2rem .55rem;border-radius:999px;background:linear-gradient(135deg,#fbbf24,#ef4444);color:#1a0505;box-shadow:0 0 12px rgba(251,191,36,.7)}
.lbx-prog{margin:.9rem auto 0;width:min(380px,100%);display:grid;gap:.5rem}
.lbx-pr{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:12px;border:1px solid rgba(239,68,68,.45);background:rgba(76,5,25,.35);text-align:left}
.lbx-pr .t{flex:1;min-width:0;font-size:.8rem;font-weight:800}.lbx-pr .t small{display:block;font-weight:500;opacity:.8;font-size:.7rem}
.lbx-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.12);margin-top:.3rem;overflow:hidden}.lbx-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ef4444,#fbbf24);box-shadow:0 0 8px rgba(239,68,68,.8)}
.lbx-pr button{flex:none;padding:.4rem .75rem;border-radius:9px;border:0;font-weight:800;font-size:.8rem;color:#1a0505;background:linear-gradient(135deg,#fde68a,#fbbf24);cursor:pointer}
.lbx-pr button:disabled{opacity:.4;cursor:default}.lbx-pr .ok{color:#86efac;font-weight:800;font-size:.8rem;flex:none}
.lbx-gem{display:inline-block;width:1.15rem;height:1.15rem;flex:none;clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);background:linear-gradient(135deg,#fecaca,#ef4444 55%,#7f1d1d);vertical-align:middle}.lbx-gem.a{background:linear-gradient(135deg,#cffafe,#22d3ee 55%,#0e7490)}
.lbx-prog,.lbx-pity,.lbx-btns,.lbx-note,.lbx-odds{box-sizing:border-box}
.lbx-pity{margin:.6rem auto 0;width:min(380px,100%);font-size:.78rem;opacity:.9;padding:.45rem .7rem;border-radius:10px;background:rgba(251,191,36,.08);border:1px dashed rgba(251,191,36,.5)}
.lbx-btns{display:flex;gap:.5rem;margin:.9rem auto 0;width:min(380px,100%)}
.lbx-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.7rem .5rem;border-radius:12px;border:1.5px solid rgba(239,68,68,.7);background:linear-gradient(135deg,rgba(239,68,68,.28),rgba(190,18,60,.2));box-shadow:0 0 16px rgba(239,68,68,.3),inset 0 0 14px rgba(239,68,68,.15);color:#fff;font-weight:900;font-size:.95rem;cursor:pointer}
.lbx-btn small{font-weight:600;font-size:.74rem;opacity:.9}.lbx-btn.ten{border-color:rgba(251,191,36,.8);background:linear-gradient(135deg,rgba(251,191,36,.3),rgba(239,68,68,.25))}
.lbx-btn:disabled{opacity:.45;cursor:default}
.lbx-hist{margin:.7rem auto 0;width:min(380px,100%);text-align:left;font-size:.78rem;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.5rem .8rem;box-sizing:border-box}.lbx-hist summary{cursor:pointer;font-weight:700}.lbx-hist .hr{padding:.4rem 0;border-top:1px solid rgba(255,255,255,.08)}.lbx-hist .hr:first-of-type{margin-top:.35rem}.lbx-hist .hd{opacity:.65;font-size:.7rem}.lbx-hist .hg{color:#fbbf24;font-weight:800}.lbx-hist .hn{opacity:.6;padding:.3rem 0}
.lbx-note{margin:.5rem auto 0;width:min(380px,100%);font-size:.74rem;opacity:.85}
.lbx-note button{background:none;border:0;color:#fbbf24;font-weight:800;text-decoration:underline;cursor:pointer;font-size:inherit}
.lbx-odds{margin:.9rem auto 0;width:min(380px,100%);text-align:left;font-size:.8rem;background:rgba(76,5,25,.3);border:1px solid rgba(239,68,68,.25);border-radius:12px;padding:.55rem .8rem}
.lbx-odds summary{cursor:pointer;font-weight:700}.lbx-odds table{width:100%;margin-top:.4rem;border-collapse:collapse}.lbx-odds td{padding:.22rem 0;border-top:1px solid rgba(255,255,255,.08)}.lbx-odds td:last-child{text-align:right;font-weight:700}
.lbx-res{position:fixed;inset:0;z-index:9410;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,3,10,.82);animation:whlFade .25s ease-out}
.lbx-res .bx{width:min(380px,100%);max-height:90vh;overflow-y:auto;border-radius:18px;padding:1.1rem .9rem .9rem;text-align:center;color:#fff;background:linear-gradient(180deg,#2a0a14,#12060f);border:2px solid #ef4444;box-shadow:0 0 30px rgba(239,68,68,.55),0 0 60px rgba(190,18,60,.3);animation:whlPop .45s cubic-bezier(.2,1.6,.4,1)}
.lbx-res .k{font-size:.75rem;letter-spacing:.18em;color:#fca5a5;font-weight:800;text-shadow:0 0 8px #ef4444}
.lbx-res .big{margin:.6rem auto;display:grid;place-items:center;gap:.3rem}.lbx-res .big img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(239,68,68,.7))}
.lbx-res .big .lbx-gem{width:3rem;height:3rem}
.lbx-res h4{font-size:1.05rem;font-weight:900;margin:.1rem 0}
.lbx-res p{font-size:.78rem;opacity:.85;margin:.3rem 0 .8rem}
.lbx-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;margin:.7rem 0}
.lbx-cell{border-radius:10px;padding:.4rem .15rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:.62rem;font-weight:700;line-height:1.15;display:flex;flex-direction:column;align-items:center;gap:.2rem;min-height:3.9rem;justify-content:center}
.lbx-cell.hit{border-color:#fbbf24;background:rgba(251,191,36,.18);box-shadow:0 0 12px rgba(251,191,36,.55)}.lbx-cell.dup{opacity:.6}
.lbx-cell img{width:30px;height:30px;object-fit:contain}.lbx-cell .lbx-gem{width:1.5rem;height:1.5rem}.lbx-cell .cn{font-size:1.1rem}
.lbx-res .row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.lbx-res button{padding:.6rem 1.2rem;border-radius:10px;border:0;font-weight:800;color:#1a0505;background:linear-gradient(135deg,#fde68a,#fbbf24);box-shadow:0 0 14px rgba(251,191,36,.5);cursor:pointer}.lbx-res button.sec{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
/* ---- premium skin (ทับชุดเดิม): ดำ-แดงเข้ม + ทองโลหะ ---- */
.lbx-ov{background:radial-gradient(120% 60% at 50% 0%,rgba(150,18,40,.55),rgba(7,3,10,0) 62%),radial-gradient(90% 50% at 50% 100%,rgba(245,196,81,.09),rgba(7,3,10,0) 70%),linear-gradient(180deg,#0b0409,#050206)!important}
.lbx-h{font-family:Orbitron,'Prompt',sans-serif;font-weight:900;font-size:1.5rem;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(180deg,#fff8dc 0%,#f8d672 38%,#c58a1c 62%,#ffe9a3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 10px rgba(245,158,11,.45));margin:.2rem 0 .3rem}
.lbx-orn{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0 auto .45rem;width:min(260px,70%)}.lbx-orn i{flex:1;height:1px;background:linear-gradient(90deg,transparent,#d9a441)}.lbx-orn i:last-child{transform:scaleX(-1)}.lbx-orn b{width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(135deg,#fff3bd,#c58a1c);box-shadow:0 0 8px rgba(245,196,81,.8)}
.lbx-sub{font-size:.72rem;letter-spacing:.06em;color:#e9d3a0;opacity:.85}
.lbx-x{border-color:rgba(245,196,81,.5);background:rgba(20,8,12,.7);color:#f8d672}
.lbx-stage{width:min(88vw,340px);height:min(88vw,340px);margin-top:.3rem}
.lbx-rays{position:absolute;inset:-14%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,214,120,.16) 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent 72%);mask:radial-gradient(closest-side,#000 25%,transparent 72%);animation:lbxSpin 38s linear infinite;pointer-events:none}
@keyframes lbxSpin{to{transform:rotate(360deg)}}
.lbx-glow{background:radial-gradient(closest-side,rgba(239,68,68,.5),rgba(190,18,60,.2) 58%,transparent 76%)}
.lbx-floor{position:absolute;left:12%;right:12%;bottom:2%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(245,196,81,.5),rgba(239,68,68,.22) 55%,transparent 75%);filter:blur(2px)}
.lbx-hero{height:88%;bottom:9%;filter:drop-shadow(0 0 16px rgba(239,68,68,.7)) drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.lbx-crate{width:44%;margin-top:56%;filter:drop-shadow(0 8px 14px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(245,158,11,.45))}
.lbx-crate .slit{animation:lbxSlit 2.2s ease-in-out infinite}@keyframes lbxSlit{50%{opacity:.55}}
.lbx-beam{position:absolute;left:14%;right:14%;bottom:46%;height:150%;background:linear-gradient(0deg,rgba(255,226,150,.55),rgba(255,214,120,.18) 45%,transparent);clip-path:polygon(34% 100%,66% 100%,100% 0,0 0);mix-blend-mode:screen;opacity:.45;animation:lbxBeam 2.6s ease-in-out infinite;pointer-events:none}@keyframes lbxBeam{50%{opacity:.8}}
.lbx-crate.shake .lbx-beam{opacity:1;animation:none}
.lbx-sp{position:absolute;bottom:10%;width:4px;height:4px;border-radius:50%;background:#fff3bd;box-shadow:0 0 8px 2px rgba(245,196,81,.85);opacity:0;animation:lbxUp 4s ease-in infinite;pointer-events:none}
@keyframes lbxUp{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-230px) scale(1);opacity:0}}
.lbx-tag{background:linear-gradient(135deg,#fff3bd,#e0a830 55%,#9a6512);color:#2a1204;letter-spacing:.2em;box-shadow:0 0 14px rgba(245,196,81,.6),inset 0 1px 0 rgba(255,255,255,.6)}
.lbx-pr{border:1px solid rgba(217,164,65,.45);background:linear-gradient(135deg,rgba(52,14,24,.8),rgba(14,6,10,.92));box-shadow:inset 0 1px 0 rgba(255,235,170,.12),0 6px 18px -10px #000}
.lbx-bar{background:rgba(255,255,255,.08);height:6px}.lbx-bar i{background:linear-gradient(90deg,#b8801f,#f8d672,#fff3bd);box-shadow:0 0 8px rgba(245,196,81,.7)}
.lbx-pr button{background:linear-gradient(180deg,#fff3bd,#e0a830 55%,#9a6512);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 10px rgba(245,196,81,.35);color:#2a1204}
.lbx-pity{border:1px dashed rgba(217,164,65,.55);background:rgba(217,164,65,.07);color:#f3e2b3}
.lbx-btn{border:1.5px solid rgba(217,164,65,.75);background:linear-gradient(180deg,rgba(120,20,40,.75),rgba(48,8,20,.9));box-shadow:0 0 18px rgba(190,18,60,.35),inset 0 1px 0 rgba(255,235,170,.25);text-shadow:0 1px 2px #000;letter-spacing:.03em}
.lbx-btn.ten{border-color:#f8d672;background:linear-gradient(180deg,#fff3bd,#e0a830 50%,#a8741a);color:#2a1204;text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:0 0 22px rgba(245,196,81,.5),inset 0 1px 0 rgba(255,255,255,.7)}
.lbx-btn.ten small{opacity:.8}
.lbx-note{color:#e9d3a0}.lbx-note button{color:#f8d672}
.lbx-odds{background:rgba(24,8,14,.6);border:1px solid rgba(217,164,65,.3)}.lbx-odds summary{color:#f3e2b3}
.lbx-res{background:radial-gradient(60% 50% at 50% 45%,rgba(120,20,40,.45),rgba(4,2,7,.92))}
.lbx-res .bx{background:linear-gradient(180deg,#2c0a16,#0c0509);border:1px solid #d9a441;outline:1px solid rgba(217,164,65,.35);outline-offset:4px;box-shadow:0 0 36px rgba(245,158,11,.35),0 0 70px rgba(190,18,60,.35);position:relative;overflow:hidden}
.lbx-res .bx::before{content:'';position:absolute;left:50%;top:-30%;width:150%;aspect-ratio:1;transform:translateX(-50%);background:repeating-conic-gradient(rgba(255,214,120,.14) 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(closest-side,#000 15%,transparent 70%);mask:radial-gradient(closest-side,#000 15%,transparent 70%);animation:lbxSpin 30s linear infinite;pointer-events:none}
.lbx-res .bx>*{position:relative}
.lbx-res .k{color:#f8d672;letter-spacing:.28em;text-shadow:0 0 10px rgba(245,158,11,.7)}
.lbx-res h4{background:linear-gradient(180deg,#fff8dc,#f8d672 60%,#c58a1c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lbx-res .big img{filter:drop-shadow(0 0 14px rgba(245,196,81,.75))}
.lbx-cell{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(217,164,65,.25)}
.lbx-cell.hit{border-color:#f8d672;background:linear-gradient(180deg,rgba(245,196,81,.3),rgba(190,18,60,.18));box-shadow:0 0 14px rgba(245,196,81,.6)}
.lbx-res button{background:linear-gradient(180deg,#fff3bd,#e0a830 55%,#9a6512);color:#2a1204;box-shadow:0 0 16px rgba(245,196,81,.5),inset 0 1px 0 rgba(255,255,255,.6)}.lbx-res button.sec{background:rgba(255,255,255,.1);color:#f3e2b3;box-shadow:inset 0 0 0 1px rgba(217,164,65,.4)}
@media (prefers-reduced-motion:reduce){.lbx-rays,.lbx-sp,.lbx-beam,.lbx-crate .slit{animation:none}}
.lbx-evb .kth{width:46px;height:46px;flex:none;object-fit:contain;border-radius:50%;background:radial-gradient(circle,#7f1d1d,#12060f);box-shadow:0 0 0 2px #ef4444,0 0 12px rgba(239,68,68,.8)}
.lbx-evb .x2{white-space:nowrap}
.shop-it .loot-note{font-weight:800;font-size:.72rem;color:#fbbf24}
.whl-evb .wic{width:46px;height:46px;flex:none;border-radius:50%;background:conic-gradient(#0e1530 0 45deg,#2a0f3d 0 90deg,#0e1530 0 135deg,#06303f 0 180deg,#0e1530 0 225deg,#2a0f3d 0 270deg,#0e1530 0 315deg,#06303f 0);box-shadow:0 0 0 2px #22d3ee,0 0 12px rgba(34,211,238,.8),0 0 0 4px #05070f,0 0 0 5px #d946ef;animation:whlSpinIc 6s linear infinite}
@keyframes whlSpinIc{to{transform:rotate(360deg)}}
.msn-evb{position:relative;overflow:hidden;display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:16px;color:#fff;border:1.5px solid rgba(246,210,122,.55);
  background:linear-gradient(120deg,var(--ev1,#3b1d5c),var(--ev2,#7a2f12));box-shadow:0 12px 26px -16px rgba(0,0,0,.7)}
.msn-evb .ic{font-size:1.9rem;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));animation:evBob 2.4s ease-in-out infinite}
.msn-evb .tx{flex:1;min-width:0;font-size:.86rem;line-height:1.5}.msn-evb .tx b{color:#ffe08a}
.msn-evb .tx small{display:block;opacity:.85;font-size:.74rem}
.msn-evb::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--sx,20%) 30%,rgba(255,255,255,.22) 0 1.5px,transparent 2px) 0 0/38px 38px;opacity:.55;animation:evStars 6s linear infinite;pointer-events:none}
.msn-evb.boost{--ev1:#5a0f0f;--ev2:#b0451a}
.msn-evb.boost .ic{animation:evFlame 1.1s ease-in-out infinite alternate}
.msn-evb .x2{font-weight:900;font-size:1.25rem;padding:.15rem .55rem;border-radius:10px;color:#3a1600;background:linear-gradient(135deg,#fff1b8,#f2c14e 50%,#d29a2e);box-shadow:0 0 18px rgba(255,190,80,.6);animation:evPulse 1.6s ease-in-out infinite}
@keyframes evBob{50%{transform:translateY(-4px) rotate(-6deg)}}
/* [21 ต.ค. user "การ์ดกิจกรรมปรับเป็นภาพนิ่งหมด"] การ์ดแถวกิจกรรม (#evRow) ไม่มีแอนิเมชัน/เคลื่อนไหวใดๆ */
.ev-row .ev-card,.ev-row .ev-card *,.ev-row .ev-card::before,.ev-row .ev-card::after,.ev-row .ev-card *::before,.ev-row .ev-card *::after{animation:none!important}
.ev-row .ev-card:hover,.ev-row .ev-card:hover .ev-art{transform:none!important}
@keyframes evFlame{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.15) rotate(4deg)}}
@keyframes evPulse{50%{box-shadow:0 0 28px rgba(255,190,80,.95);transform:scale(1.05)}}
@keyframes evStars{to{background-position:38px 76px}}
.msn-rkm{display:flex;align-items:center;gap:.65rem;padding:.6rem .85rem;border-radius:14px;color:#fff6dc;border:1.5px solid rgba(246,210,122,.5);background:linear-gradient(120deg,#123c30,#0b2a22 60%,#071a14);box-shadow:0 10px 22px -16px rgba(0,0,0,.7)}
.msn-rkm .x{flex:none;font-weight:900;font-size:1.15rem;padding:.12rem .55rem;border-radius:10px;color:#241a08;background:linear-gradient(135deg,#fff1b8,#f2c14e 50%,#d29a2e);box-shadow:0 0 14px rgba(246,210,122,.55)}
.msn-rkm .tx{flex:1;min-width:0;font-size:.8rem;line-height:1.45}.msn-rkm .tx b{color:#ffe08a}.msn-rkm .tx small{display:block;opacity:.8;font-size:.72rem}
.msn-rkm.base .x{background:rgba(255,255,255,.12);color:#fff6dc;box-shadow:none}
.msn-ntf{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;border-radius:14px;border:1px dashed color-mix(in srgb,#d9a441 55%,var(--line));background:color-mix(in srgb,#d9a441 7%,var(--paper-raised));font-size:.8rem;color:var(--ink)}
.msn-ntf .ic{font-size:1.15rem}.msn-ntf .tx{flex:1;min-width:0;line-height:1.45}.msn-ntf .tx small{display:block;color:color-mix(in srgb,var(--ink) 65%,var(--ink-muted));font-size:.72rem}
.msn-ntf .x{border:none;background:none;color:var(--ink-muted);font-size:1rem;cursor:pointer;padding:.1rem .3rem}
.msn-sw{position:relative;width:42px;height:24px;border-radius:99px;border:none;cursor:pointer;background:var(--line);flex:none;transition:background .2s}
.msn-sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}
.msn-sw.on{background:#16a34a}.msn-sw.on::after{left:21px}
/* ตู้ปลา — กระจกใต้ทะเล แสงน้ำระยิบ (caustics) */
.aqx{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;padding:1rem 1.1rem;color:#eafffa;cursor:pointer;border:1.5px solid rgba(126,224,195,.45);
  background:linear-gradient(180deg,#0f4c5c 0%,#0a3442 55%,#06202b 100%);box-shadow:0 14px 30px -18px rgba(4,30,40,.9),inset 0 1px 0 rgba(255,255,255,.12)}
.aqx::before{content:'';position:absolute;inset:-30%;z-index:-1;opacity:.35;background:
  radial-gradient(ellipse 18% 8% at 20% 30%,rgba(190,255,240,.5),transparent 70%),radial-gradient(ellipse 14% 6% at 70% 20%,rgba(190,255,240,.45),transparent 70%),
  radial-gradient(ellipse 20% 7% at 45% 60%,rgba(190,255,240,.4),transparent 70%),radial-gradient(ellipse 12% 5% at 85% 70%,rgba(190,255,240,.4),transparent 70%);animation:aqCaustic 9s ease-in-out infinite alternate}
.aqx::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22px;z-index:-1;background:linear-gradient(0deg,rgba(226,169,59,.35),transparent);}
@keyframes aqCaustic{to{transform:translate(6%,4%) scale(1.08) rotate(3deg)}}
/* ================== [NEW 14 ต.ค.] หน้าภารกิจ — ปรับให้สวย (แถบสรุป · พร้อมรับ · เหรียญบิน · ปฏิทินเช็กอิน · ไอคอน · ตู้ปลา) ================== */
/* ---- premium banners (หน้าภารกิจ): ฟอนต์ไทย Kanit/Prompt + ทองโลหะ ---- */
.msn-evb,.msn-rkm,.msn-ntf{font-family:'Prompt','IBM Plex Sans',system-ui,sans-serif}
.msn-evb{gap:.95rem;padding:1rem 1.1rem;border-radius:18px;border:1px solid rgba(245,196,81,.6);
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,255,255,.14),transparent 55%),linear-gradient(115deg,var(--ev1,#3b1d5c),var(--ev2,#7a2f12));
  box-shadow:inset 0 1px 0 rgba(255,235,170,.4),inset 0 0 0 1px rgba(0,0,0,.25),0 14px 28px -14px rgba(0,0,0,.75),0 0 22px -8px var(--ev2,#7a2f12);cursor:pointer;transition:transform .2s,box-shadow .2s}
.msn-evb:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,235,170,.5),inset 0 0 0 1px rgba(0,0,0,.25),0 18px 32px -14px rgba(0,0,0,.8),0 0 28px -4px var(--ev2,#7a2f12)}
.msn-evb::before{content:'';position:absolute;top:-30%;bottom:-30%;left:-40%;width:28%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,244,200,.22),transparent);animation:evShine 6s ease-in-out infinite;pointer-events:none}
@keyframes evShine{0%,55%{left:-40%}100%{left:130%}}
.msn-evb .tx{font-size:.8rem;line-height:1.4;position:relative;z-index:1}
.msn-evb .tx>b:first-child{display:block;font-family:'Kanit','Prompt',sans-serif;font-weight:500;font-size:1.12rem;line-height:1.2;letter-spacing:.01em;color:#ffe9a8;background:linear-gradient(180deg,#fffbe6 0%,#ffe08a 45%,#f0b43c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
.msn-evb .tx .ds{display:block;margin-top:.15rem;font-weight:400;font-size:.8rem;color:rgba(255,246,222,.92)}
.msn-evb .tx .ds b{color:#ffe08a;font-weight:500}
.msn-evb .tx small{margin-top:.3rem;font-size:.72rem;font-weight:400;color:rgba(255,224,160,.85);opacity:1}
.msn-evb .tx small::before{content:'';display:inline-block;width:5px;height:5px;margin-right:.4rem;transform:rotate(45deg);background:#f5c451;box-shadow:0 0 6px #f5c451;vertical-align:middle}
.msn-evb .x2{position:relative;z-index:1;font-family:'Kanit','Prompt',sans-serif;font-weight:500;font-size:1.02rem;padding:.5rem 1rem;border-radius:12px;color:#2a1204;background:linear-gradient(180deg,#fff3bd,#f2c14e 52%,#b9801f);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 18px rgba(245,196,81,.55),0 4px 10px -4px rgba(0,0,0,.6);text-shadow:0 1px 0 rgba(255,255,255,.4);animation:none}
.msn-evb.boost .x2{font-size:1.3rem;padding:.25rem .7rem}
.mz-evb{background:linear-gradient(100deg,rgba(4,36,52,.88) 0%,rgba(4,36,52,.55) 55%,rgba(4,36,52,.15) 100%),var(--mzbg) center 62%/cover no-repeat!important;min-height:112px;border:1.5px solid rgba(255,225,140,.85)!important;box-shadow:0 14px 30px -12px rgba(10,50,60,.7),0 0 0 3px rgba(255,255,255,.25),inset 0 1px 0 rgba(255,255,255,.6)!important}
.mz-evb .mzi{width:78px;height:78px;flex:none;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#7fe0f2 0%,#2aa6c9 55%,#0e5f86 100%);box-shadow:inset 0 0 0 2.5px rgba(255,225,140,.95),0 0 0 3px rgba(60,35,5,.55),0 0 20px rgba(255,214,102,.55)}
.mz-evb .mzi img{width:112%;height:112%;max-width:none;object-fit:contain;animation:mzBob 2.6s ease-in-out infinite;filter:drop-shadow(0 3px 4px rgba(0,30,50,.5))}
@keyframes mzBob{50%{transform:translateY(-3px) rotate(-3deg)}}
.mz-evb .mzbadge{position:absolute;top:8px;right:10px;font-size:.62rem;font-weight:600;letter-spacing:.12em;padding:.12rem .55rem;border-radius:999px;color:#5a3a10;background:linear-gradient(180deg,#fffbe0,#ffd75e);box-shadow:0 0 12px rgba(255,214,102,.8)}
.mz-evb .tx,.mz-evb .tx b,.mz-evb .tx .ds,.mz-evb .tx small{color:#fff;text-shadow:0 1px 4px rgba(0,30,40,.8)}
.mz-evb .x2{white-space:nowrap}
.lbx-evb .kth,.dg-evb .dgi,.whl-evb .wic{width:56px;height:56px}.dg-evb .dgi{width:64px;height:64px}
.lbx-evb .kth{box-shadow:0 0 0 2px #f5c451,0 0 0 4px rgba(76,5,25,.9),0 0 18px rgba(239,68,68,.85)}
.lbx-evb{background:radial-gradient(90% 160% at 8% 50%,rgba(239,68,68,.35),transparent 60%),radial-gradient(120% 140% at 0% 0%,rgba(255,255,255,.1),transparent 55%),linear-gradient(115deg,#5b0a22,#12060f)}
.lbx-evb.vel{background:radial-gradient(90% 160% at 8% 50%,rgba(245,196,81,.30),transparent 60%),radial-gradient(120% 140% at 0% 0%,rgba(255,255,255,.1),transparent 55%),linear-gradient(115deg,#13224a,#05070f)}
.lbx-evb.vel .kth{background:radial-gradient(circle,#1e2f63,#05070f);box-shadow:0 0 0 2px #f5c451,0 0 0 4px rgba(11,21,48,.9),0 0 18px rgba(245,196,81,.8)}
.ev-row .loot-card.vel{border-color:rgba(245,196,81,.6);background:radial-gradient(70% 90% at 85% 70%,rgba(245,196,81,.30),transparent 70%),linear-gradient(135deg,#070b1a,#16264f)}
.ev-row .loot-card.vel .ev-art{filter:drop-shadow(0 0 12px rgba(245,196,81,.7))}
.ev-row .loot-card.vel .ev-k{color:#fde68a}
.ev-row .loot-card.vel .dgc-bars i{background:linear-gradient(90deg,#f5c451,#fff3bd)}
.lbx-ov.vel{background-color:#05070f!important;background:radial-gradient(110% 70% at 50% 18%,rgba(30,52,110,.8),transparent 62%),radial-gradient(90% 60% at 50% 100%,rgba(120,84,10,.35),transparent 70%),#05070f!important}
.lbx-ov.vel .lbx-h{color:#fff3bd;text-shadow:0 0 6px #f5c451,0 0 18px #f5c451,0 0 34px #a8741a}
.lbx-ov.vel .lbx-glow{background:radial-gradient(closest-side,rgba(245,196,81,.42),rgba(60,90,170,.2) 62%,transparent 76%)}
.lbx-ov:not(.vel) .lbx-hero.lbx-an{width:auto;height:150%;bottom:-10%;object-fit:contain;filter:drop-shadow(0 0 12px rgba(239,68,68,.55))}.lbx-ov.vel .lbx-hero{filter:drop-shadow(0 0 14px rgba(245,196,81,.7))}.lbx-ov.vel .lbx-hero.lbx-an{width:auto;height:80%;bottom:20%;transform:translateX(-70%);object-fit:contain}.lbx-res .big .lbx-rv{width:min(300px,80vw);height:auto;max-width:100%;filter:drop-shadow(0 0 12px rgba(239,68,68,.7))}.lbx-res:not(.vel) .big:has(.lbx-rv){overflow:hidden;position:relative;height:200px;width:100%}.lbx-res:not(.vel) .big .lbx-rv{position:absolute;left:50%;top:-46px;width:520px;max-width:none;transform:translateX(-50%)}.lbx-res.vel .big .lbx-rv{filter:drop-shadow(0 0 14px rgba(245,196,81,.75))}
.lbx-ov.vel .lbx-crate{filter:drop-shadow(0 0 16px rgba(245,196,81,.85))}
.lbx-ov.vel #lbcB stop:nth-child(1){stop-color:#14224a}.lbx-ov.vel #lbcB stop:nth-child(2){stop-color:#04060f}
.lbx-ov.vel #lbcL stop:nth-child(1){stop-color:#2b4a9a}.lbx-ov.vel #lbcL stop:nth-child(2){stop-color:#14224a}.lbx-ov.vel #lbcL stop:nth-child(3){stop-color:#070b1a}
.lbx-ov.vel #lbcR stop:nth-child(1){stop-color:#fff3bd}.lbx-ov.vel #lbcR stop:nth-child(2){stop-color:#f5c451}.lbx-ov.vel #lbcR stop:nth-child(3){stop-color:#7a5410}
.lbx-ov.vel .lbx-tag{background:linear-gradient(135deg,#fff3bd,#f5c451);box-shadow:0 0 12px rgba(245,196,81,.75)}
.lbx-ov.vel .lbx-pr{border-color:rgba(245,196,81,.5);background:rgba(20,34,74,.45)}
.lbx-ov.vel .lbx-bar i{background:linear-gradient(90deg,#f5c451,#fff3bd);box-shadow:0 0 8px rgba(245,196,81,.8)}
.pn-box{display:flex;flex-direction:column;gap:.45rem}
.pn-row{display:flex;align-items:flex-start;gap:.6rem;padding:.65rem .8rem;border-radius:12px;border:1px solid rgba(245,196,81,.45);background:linear-gradient(135deg,rgba(245,196,81,.13),rgba(120,90,255,.08));font-size:.82rem;line-height:1.45}
.pn-row i{font-style:normal;font-size:1.15rem;line-height:1.2}
.pn-row b{color:var(--accent,#d9a441)}
.pn-row.rk{border-color:rgba(120,170,255,.45);background:linear-gradient(135deg,rgba(90,150,255,.13),rgba(120,90,255,.06))}
.pn-bar{height:5px;border-radius:5px;background:rgba(128,128,128,.25);margin-top:.35rem;overflow:hidden}.pn-bar>span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#5aa0ff,#a78bfa)}
.pn-tag{display:inline-block;margin-top:.5rem;padding:.2rem .55rem;border-radius:99px;font-size:.7rem;font-weight:700;background:rgba(245,196,81,.18);color:#b8860b;border:1px solid rgba(245,196,81,.5)}
.pn-tag.rk{background:rgba(90,150,255,.14);color:#3b6fd4;border-color:rgba(90,150,255,.45)}
.lbx-free{margin:.8rem auto 0;width:min(380px,100%);padding:.6rem .7rem;border-radius:12px;border:1.5px solid rgba(110,231,160,.6);background:rgba(16,120,70,.22);text-align:center;font-size:.8rem}
.lbx-free b{color:#86efac}.lbx-free .row{display:flex;gap:.5rem;margin-top:.5rem}
.lbx-free button{flex:1;padding:.55rem .4rem;border-radius:10px;border:1.5px solid rgba(110,231,160,.8);background:rgba(16,150,90,.35);color:inherit;font-weight:800;cursor:pointer}
.lbx-free button:disabled{opacity:.45;cursor:default}
.lbx-tier{margin:.6rem auto 0;width:min(380px,100%);font-size:.74rem;opacity:.9;text-align:center}
.lbx-tier button{background:none;border:0;color:#fbbf24;font-weight:800;text-decoration:underline;cursor:pointer;font-size:inherit}
.lbx-ov.vel .lbx-btn{border-color:rgba(245,196,81,.75);background:linear-gradient(135deg,rgba(245,196,81,.25),rgba(30,52,110,.35));box-shadow:0 0 16px rgba(245,196,81,.3)}
.lbx-ov.vel .lbx-btn.ten{border-color:#fff3bd;background:linear-gradient(135deg,#f8d672,#c68a1c);color:#1b1200;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:0 0 20px rgba(245,196,81,.55),inset 0 0 10px rgba(255,255,255,.25)}.lbx-ov.vel .lbx-btn.ten small{opacity:.85}.lbx-ov.vel .lbx-btn:disabled{filter:saturate(.5)}
.lbx-ov.vel .lbx-odds{background:rgba(20,34,74,.35);border-color:rgba(245,196,81,.3)}
.lbx-ov.vel .lbx-gem{background:linear-gradient(135deg,#fff3bd,#f5c451 55%,#7a5410)}
.kai-perks.vel{border-color:rgba(245,196,81,.5);background:linear-gradient(135deg,rgba(245,196,81,.16),rgba(11,21,48,.6))}.kai-perks.vel b{color:#fff3bd}
.lbx-res.vel .bx{background:linear-gradient(180deg,#14224a,#05070f);border-color:#f5c451;box-shadow:0 0 30px rgba(245,196,81,.5)}
.lbx-res.vel .k{color:#fde68a;text-shadow:0 0 8px #f5c451}
.lbx-res.vel .lbx-gem{background:linear-gradient(135deg,#fff3bd,#f5c451 55%,#7a5410)}
.lbx-res.vel .lbx-cell.hit{border-color:#f5c451;box-shadow:0 0 12px rgba(245,196,81,.6)}
.lbx-res.vel .big img{filter:drop-shadow(0 0 10px rgba(245,196,81,.7))}
.msn-rkm{gap:.8rem;padding:.75rem 1rem;border-radius:16px;border:1px solid rgba(245,196,81,.55);background:radial-gradient(120% 140% at 0% 0%,rgba(255,255,255,.1),transparent 55%),linear-gradient(115deg,#12483a,#0a2a21 60%,#06160f);box-shadow:inset 0 1px 0 rgba(255,235,170,.3),0 12px 24px -16px rgba(0,0,0,.8)}
.msn-rkm .x{font-family:'Kanit','Prompt',sans-serif;font-size:1.3rem;font-weight:500;padding:.2rem .7rem;border-radius:12px;background:linear-gradient(180deg,#fff3bd,#f2c14e 52%,#b9801f);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 14px rgba(245,196,81,.5)}
.msn-rkm .tx{font-size:.84rem;font-weight:400}.msn-rkm .tx b{font-family:'Kanit','Prompt',sans-serif;font-weight:500;color:#ffe08a}.msn-rkm .tx small{font-size:.72rem;color:rgba(255,224,160,.8);opacity:1}
.msn-ntf{padding:.7rem .9rem;border-radius:16px;border:1px solid color-mix(in srgb,#d9a441 45%,var(--line));border-left:4px solid #d9a441;font-weight:500}
.msn-ntf .tx b{font-family:'Kanit','Prompt',sans-serif;font-weight:500;font-size:.92rem}
.msn-ntf button:not(.x){font-family:'Kanit','Prompt',sans-serif;font-weight:500;border:0;border-radius:10px;padding:.4rem .8rem;color:#2a1204;background:linear-gradient(180deg,#fff3bd,#e0a830 55%,#b9801f);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 8px -2px rgba(185,128,31,.6);cursor:pointer}
@media (prefers-reduced-motion:reduce){.msn-evb::before{animation:none}}
/* ---- ฟอนต์ไทยคมชัดทั้งหน้าภารกิจ (Prompt เนื้อความ / Kanit หัวข้อ) + คอนทราสต์ตัวรอง ---- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#missionsSection,.msn-modal,.msn-hero{font-family:'Prompt','IBM Plex Sans Thai','IBM Plex Sans',system-ui,sans-serif;font-weight:400;letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#missionsSection :is(h1,h2,h3,h4,.tt,.mh-k,.mh-v,.msn-head h3,.msn-box .t b),.msn-modal :is(h3,h4,.tt){font-family:'Kanit','Prompt',sans-serif;font-weight:500;letter-spacing:.005em}
.msn-head h3{font-size:1.12rem;font-weight:500}
.msn-card{padding:1.1rem 1.2rem;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 24px -20px rgba(20,30,25,.45);border-color:color-mix(in srgb,var(--line) 80%,#d9a441 20%)}
.msn-t .tt{font-size:.95rem;font-weight:500;color:var(--ink)}
.msn-t small,.msn-sub,.msn-explain{font-size:.8rem;font-weight:400;line-height:1.45;color:color-mix(in srgb,var(--ink) 72%,var(--ink-muted))}
.msn-day{font-size:.74rem;font-weight:400;color:color-mix(in srgb,var(--ink) 70%,var(--ink-muted))}.msn-day b{font-family:'Kanit',sans-serif;font-weight:500}
.msn-pill{font-family:'Kanit','Prompt',sans-serif;font-size:.78rem;font-weight:500;color:#8a5a12;background:color-mix(in srgb,#d9a441 24%,transparent)}
.msn-opt{font-size:.88rem;font-weight:400;color:var(--ink)}
.msn-btn{font-family:'Kanit','Prompt',sans-serif;font-weight:500}
.msn-box .t small{font-size:.84rem;font-weight:400;color:rgba(255,255,255,.92)}
.msn-box .cta,.msn-btn:is([onclick^="msnClaim"],[onclick^="msnCheckin"]){font-family:'Kanit','Prompt',sans-serif;font-weight:500}
.msn-hero :is(.mh-k,.mh-s,small){font-weight:400;color:rgba(255,246,222,.92)}
.msn-hero :is(.mh-v){font-family:'Kanit',sans-serif;font-weight:500}
.msn-hero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:.9rem 1.4rem;padding:1rem 1.25rem;border-radius:20px;margin-bottom:.9rem;color:#fff6dc;
  background:linear-gradient(135deg,#17372e 0%,#0f251f 55%,#0a1a16 100%);border:1px solid rgba(246,210,122,.32);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px -22px rgba(6,30,25,.9)}
.msn-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 50% 90% at 85% 0%,rgba(246,210,122,.16),transparent 70%)}
.msn-hero.mh-bump{animation:mhBump .6s ease}
@keyframes mhBump{30%{box-shadow:0 0 0 2px rgba(246,210,122,.55),0 0 30px rgba(246,210,122,.35)}}
.mh-cell{display:flex;align-items:center;gap:.6rem;min-width:0}
.mh-cell.grow{display:block}
.mh-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(246,210,122,.1);border:1px solid rgba(246,210,122,.25)}
.mh-ic svg{width:24px;height:24px}
.mh-k{font-size:.7rem;color:#c9d9d2;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-v{font-family:'Orbitron','IBM Plex Mono',monospace;font-weight:700;font-size:1.25rem;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.mh-v small{font-family:inherit;font-size:.7rem;font-weight:500;color:#c9d9d2;font-family:var(--font-sans,inherit)}
.mh-v.gold{background:linear-gradient(180deg,#fff4c9,#f6d27a 55%,#c9922f);-webkit-background-clip:text;background-clip:text;color:transparent}
.mh-bar{height:9px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid rgba(246,210,122,.3);overflow:hidden;margin:.35rem 0 .25rem}
.mh-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#7c6cf0,#d9a441 70%,#fff1b8);box-shadow:0 0 10px rgba(246,210,122,.5)}
.mh-s{font-size:.68rem;color:#c9d9d2;font-variant-numeric:tabular-nums}
.mh-ready{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;background:rgba(229,72,77,.16);border:1px solid rgba(255,120,120,.45);color:#ffd6d6;white-space:nowrap}
.mh-ready i{width:8px;height:8px;border-radius:50%;background:#ff5a5f;box-shadow:0 0 0 0 rgba(255,90,95,.7);animation:mhDot 1.6s ease-out infinite}
.mh-ready.ok{background:rgba(79,214,156,.12);border-color:rgba(79,214,156,.4);color:#bff3dc}
@keyframes mhDot{70%{box-shadow:0 0 0 7px rgba(255,90,95,0)}100%{box-shadow:0 0 0 0 rgba(255,90,95,0)}}
.mh-ea{grid-column:1 / -1;font-size:.8rem;padding:.55rem .75rem;border-radius:12px;background:rgba(246,210,122,.1);border:1px dashed rgba(246,210,122,.4)}
.mh-ea a{color:#f6d27a;font-weight:700;text-decoration:underline;white-space:nowrap}
@media (max-width:760px){.msn-hero{grid-template-columns:1fr 1fr;gap:.8rem}.mh-cell.grow,.mh-ready{grid-column:1 / -1}.mh-ready{justify-self:start}}
/* การ์ดพร้อมรับ / ทำครบแล้ว */
.msn-card{position:relative;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.msn-card.msn-ready{border-color:rgba(217,164,65,.7);box-shadow:0 0 0 1px rgba(217,164,65,.35),0 10px 26px -14px rgba(217,164,65,.55);animation:msnReadyGlow 2.6s ease-in-out infinite}
.msn-card.msn-ready::before{content:'';position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:#ff5a5f;border:2px solid var(--paper-raised,#fff);box-shadow:0 0 0 0 rgba(255,90,95,.6);animation:mhDot 1.6s ease-out infinite}
.msn-card[data-ready]::after{content:attr(data-ready);position:absolute;top:-9px;left:14px;font-size:.62rem;font-weight:800;letter-spacing:.06em;padding:.12rem .5rem;border-radius:999px;color:#241a08;background:linear-gradient(135deg,#fff1b8,#f2c14e 50%,#d29a2e);box-shadow:0 3px 8px -3px rgba(168,118,31,.6)}
.msn-card.msn-dim{opacity:.72}
.msn-card.msn-dim:hover{opacity:1}
@keyframes msnReadyGlow{50%{box-shadow:0 0 0 1px rgba(217,164,65,.5),0 12px 30px -12px rgba(217,164,65,.75)}}
/* ไอคอนหัวการ์ด */
.msn-ic{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:.45rem;vertical-align:-8px;border-radius:9px;color:#b07a2a;background:color-mix(in srgb,#d9a441 14%,transparent);border:1px solid color-mix(in srgb,#d9a441 35%,transparent)}
.msn-ic svg{width:17px;height:17px}
/* เหรียญบิน */
.msn-flychip{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 70px);z-index:10069;display:flex;align-items:center;gap:.45rem;padding:.45rem .95rem .45rem .6rem;border-radius:999px;pointer-events:none;
  background:linear-gradient(135deg,#145647,#0b3a31 55%,#06231d);border:1.5px solid rgba(246,210,122,.65);color:#fff6dc;font-size:.8rem;font-weight:600;white-space:nowrap;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.65),0 0 18px rgba(246,210,122,.25);opacity:0;transform:translate(-50%,-14px) scale(.92);transition:opacity .25s ease,transform .3s cubic-bezier(.2,1.4,.4,1)}
.msn-flychip.on{opacity:1;transform:translate(-50%,0) scale(1)}
.msn-flychip.pop{animation:mhBump .6s ease}
.msn-flychip svg{width:22px;height:22px;flex:none}
.msn-flychip b{color:#ffe08a;font-size:1.05rem;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.msn-flycoin{position:fixed;z-index:10070;width:22px;height:22px;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(168,118,31,.5))}
.msn-flycoin svg{width:100%;height:100%;display:block}
/* ปฏิทินเช็กอิน — เกล็ด + ตราประทับ + หีบวันสุดท้าย */
.msn-day{border-radius:14px;padding:.6rem .2rem .55rem;background:var(--paper);transition:transform .15s}
.msn-day b{font-family:'Orbitron','IBM Plex Mono',monospace;font-weight:700;font-size:1rem}
.msn-day.done{background:linear-gradient(180deg,#fff4c9,#f6d27a 60%,#e2b04f);border-color:#c9922f;color:#5a3d0b;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 10px -6px rgba(168,118,31,.7)}
.msn-day.done b{color:#5a3d0b}
.msn-day.done::after{content:'✓';top:-6px;right:-6px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#1f8a5b;color:#fff;font-size:.68rem;border:2px solid var(--paper-raised,#fff);transform:rotate(-10deg)}
.msn-day.today{border:2px solid #d9a441;background:color-mix(in srgb,#d9a441 14%,var(--paper));animation:msnDayPulse 1.8s ease-in-out infinite}
.msn-day.big{background:radial-gradient(circle at 50% 30%,color-mix(in srgb,#f6d27a 35%,var(--paper)),var(--paper) 70%);border-color:#d9a441}
.msn-day.big.done{background:linear-gradient(180deg,#fff4c9,#f6d27a 60%,#e2b04f)}
.msn-day.big b{font-size:1.15rem}
@keyframes msnDayPulse{50%{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(217,164,65,.8)}}
/* ตู้ปลา — ปลาจริงว่ายในการ์ด */
.aqx-swim{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aqx-swim img{position:absolute;top:var(--y);left:-30%;width:calc(90px * var(--s));height:auto;opacity:.42;filter:saturate(.85) drop-shadow(0 6px 8px rgba(0,0,0,.35));animation:aqxSwim var(--t) linear infinite,aqxBob 2.6s ease-in-out infinite;animation-delay:var(--dl),0s}
@keyframes aqxSwim{from{left:-30%}to{left:110%}}
@keyframes aqxBob{50%{transform:translateY(-5px) rotate(-2deg)}}
.aqx .aqx-tank span{background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
/* [14 ต.ค.] รายการค้าง — ชิปกดไปหา + ป้าย "ทำตรงนี้" บนการ์ด */
.mh-todo{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;padding-top:.15rem;border-top:1px dashed rgba(246,210,122,.25);padding-top:.7rem}
.mh-todo-k{font-size:.72rem;color:#c9d9d2;margin-right:.15rem}
.mh-chip{font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;padding:.42rem .85rem;border-radius:999px;color:#241a08;border:none;
  background:linear-gradient(135deg,#fff1b8,#f2c14e 50%,#d29a2e);box-shadow:0 4px 12px -5px rgba(242,193,78,.8),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .15s}
.mh-chip:hover{transform:translateY(-1px)}
.mh-chip:active{transform:scale(.97)}
.msn-todo-card{outline:2.5px solid #f2c14e;outline-offset:3px}
.msn-flag{position:absolute;top:8px;right:10px;z-index:6;pointer-events:none;font-size:.7rem;font-weight:800;padding:.2rem .6rem;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,#ff6a5f,#e5484d);box-shadow:0 4px 10px -3px rgba(229,72,77,.7);animation:msnFlagBob 1.6s ease-in-out infinite}
@keyframes msnFlagBob{50%{translate:0 -3px}}
.msn-card .msn-flag{top:-11px;right:16px}
.msn-card.msn-todo-card::before,.msn-card.msn-todo-card[data-ready]::after{display:none}
.fsh2 .msn-flag{top:8px;right:12px}
.aqx .msn-flag,.lbx .msn-flag{top:6px;right:auto;left:50%;transform:translateX(-50%)}
.msn-flash{animation:msnFlash .8s ease-in-out 3}
@keyframes msnFlash{50%{outline-color:#fff;outline-offset:6px;box-shadow:0 0 0 6px rgba(242,193,78,.45),0 0 30px rgba(242,193,78,.6)}}
@media (prefers-reduced-motion:reduce){.msn-flag,.msn-flash{animation:none}}
/* [15 ต.ค. user "เปิดหน้าภารกิจทิ้งไว้ มือถือร้อน"] เปลี่ยนแอนิเมชันที่ทำให้เครื่องวาดจอใหม่ทุกเฟรม (left / box-shadow / backdrop-filter)
   เป็น transform / opacity ที่การ์ดจอทำให้เองไม่กินแรง — หน้าตาเหมือนเดิม */
.aqx-swim .aqx-lane{position:absolute;left:0;top:var(--y);width:100%;height:0;animation:aqxLane var(--t) linear infinite;animation-delay:var(--dl);will-change:transform}
.aqx-swim .aqx-lane img{position:absolute;left:0;top:0;width:calc(90px * var(--s));height:auto;opacity:.42;filter:saturate(.85) drop-shadow(0 6px 8px rgba(0,0,0,.35));animation:aqxBob 2.6s ease-in-out infinite}
@keyframes aqxLane{from{transform:translateX(-30%)}to{transform:translateX(110%)}}
.aqx .aqx-tank span{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.08)}
.msn-fab-home{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:linear-gradient(135deg,#17372e,#0a1a16)!important}
.msn-fab-home::after{left:0!important;animation-name:msnFabShine2!important;will-change:transform}
@keyframes msnFabShine2{0%,70%{transform:translateX(-150%)}100%{transform:translateX(330%)}}
.msn-btn[onclick^="msnClaim"]::after{left:0!important;animation-name:msnClaimSheen2!important;will-change:transform}
@keyframes msnClaimSheen2{0%,60%{transform:translateX(-150%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
.msn-btn[onclick^="msnClaim"]{animation:none!important;box-shadow:inset 0 1px 0 rgba(255,231,163,.35),0 0 0 4px rgba(226,176,79,.2),0 0 14px rgba(242,193,78,.35),0 8px 18px -8px rgba(6,30,25,.9)}
.msn-card.msn-ready{animation:none;box-shadow:0 0 0 1px rgba(217,164,65,.5),0 12px 30px -12px rgba(217,164,65,.7)}
.msn-day.today{animation-name:msnDayBob}
@keyframes msnDayBob{50%{transform:translateY(-2px)}}
.mh-ready i,.msn-card.msn-ready::before{animation:none}
@media (prefers-reduced-motion:reduce){.msn-card.msn-ready,.msn-card.msn-ready::before,.mh-ready i,.msn-day.today,.aqx-swim img,.aqx-swim .aqx-lane{animation:none}}
.aqx-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.aqx-k{font-size:.62rem;letter-spacing:.3em;color:#7ee0c3;font-weight:700}
.aqx-t{font-size:1.12rem;font-weight:800;margin:.05rem 0 .1rem;color:#fff}
.aqx-n{font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:1.05rem;color:#ffe08a;white-space:nowrap}
.aqx-tank{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.3rem;margin:.65rem 0 .55rem}
.aqx-tank span{min-width:0;overflow:hidden;display:grid;place-items:center;aspect-ratio:1.35;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(126,224,195,.18)}
.aqx-tank span.got{background:rgba(126,224,195,.12);border-color:rgba(126,224,195,.45)}
.aqx-tank svg{width:84%;height:auto}
.aqx-tank span.got svg{animation:aqSwim 3s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes aqSwim{50%{transform:translateX(3px) translateY(-1px)}}
.aqx-sets{display:flex;gap:.35rem;flex-wrap:wrap}
.aqx-sets span{font-size:.72rem;font-weight:600;padding:.18rem .55rem;border-radius:99px;background:rgba(0,0,0,.25);border:1px solid rgba(126,224,195,.3);white-space:nowrap}
.aqx-sets span.ok{border-color:#f6d27a;color:#ffe08a}
.aqx-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.65rem;font-size:.76rem;color:#cfeee6}
.aqx-cta{border:none;border-radius:11px;padding:.45rem .85rem;font-family:inherit;font-weight:800;font-size:.8rem;cursor:pointer;color:#06302a;background:linear-gradient(135deg,#d9fff3,#7ee0c3);white-space:nowrap}
.aqx-cta.gold{color:#241a08;background:linear-gradient(135deg,#fff1b8,#f2c14e 45%,#d29a2e);animation:evPulse 1.6s ease-in-out infinite}
/* อันดับ — โพเดียมทอง มงกุฎเรืองแสง */
.lbx{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;padding:1rem 1.1rem;color:#fff8e6;cursor:pointer;border:1.5px solid transparent;
  background:linear-gradient(165deg,#173f2f,#0c2a20 60%,#071a14) padding-box,linear-gradient(135deg,#f6d27a,#7a5414 40%,#fff1b8 60%,#a8761f) border-box;box-shadow:0 14px 30px -18px rgba(6,30,22,.95)}
.lbx::before{content:'';position:absolute;right:-30px;top:-40px;width:170px;height:170px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(246,210,122,.28),transparent 65%);animation:lbGlow 3.2s ease-in-out infinite}
@keyframes lbGlow{50%{transform:scale(1.18);opacity:.6}}
.lbx-k{font-size:.62rem;letter-spacing:.3em;color:#f6d27a;font-weight:700}
.lbx-t{font-size:1.12rem;font-weight:800;margin:.05rem 0 .5rem}
.lbx-crown{position:absolute;right:.9rem;top:.7rem;font-size:1.8rem;filter:drop-shadow(0 0 10px rgba(246,210,122,.7));animation:evBob 3s ease-in-out infinite}
.lbx-rows{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.lbx-r{border-radius:12px;padding:.5rem .6rem;background:rgba(0,0,0,.28);border:1px solid rgba(246,210,122,.28)}
.lbx-r small{display:block;font-size:.7rem;opacity:.85}.lbx-r b{font-size:1.05rem;color:#ffe08a;font-family:'IBM Plex Mono',monospace}
.lbx-cm{margin-top:.6rem}
.lbx-cm .t{display:flex;justify-content:space-between;gap:.4rem;font-size:.74rem;margin-bottom:.3rem;opacity:.95}
.lbx-cm .bar{position:relative;height:10px;border-radius:99px;background:rgba(0,0,0,.35);border:1px solid rgba(246,210,122,.3);overflow:visible}
.lbx-cm .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1f8f6b,#7ee0c3 60%,#f6d27a);box-shadow:0 0 10px rgba(126,224,195,.5)}
.lbx-cm .bar em{position:absolute;top:50%;transform:translate(-50%,-55%);font-style:normal;font-size:.95rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.lbx-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.6rem;font-size:.74rem;opacity:.95}
/* modal ตู้ปลา / อันดับ */
.aqm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
/* [14 ต.ค. — user "ในภาพซ้อนทับกัน"] รูปปลาจริงขนาดไฟล์ใหญ่ (480px) ดันช่องตารางให้ล้น → บังคับให้ย่อตามช่อง */
.aqx-tank .aq-ph{width:84%;max-width:100%;margin:0}.aq-ph img{max-width:100%;min-width:0}
.aqm-sp{min-width:0}
.aqm-sp{border-radius:12px;padding:.45rem .3rem .4rem;text-align:center;background:var(--paper);border:1px solid var(--line);position:relative}
.aqm-sp svg{width:78%;height:auto;display:block;margin:0 auto .15rem}
/* [14 ต.ค.] ปลาวาดใหม่ — หางพลิ้วเบาๆ (เฉพาะตัวที่ได้แล้ว) · ตัวที่ยังไม่ได้ไม่ขยับ */
.aq-fish .aq-tail{transform-box:fill-box;transform-origin:100% 50%;animation:aqTail 1.8s ease-in-out infinite}
.aq-fish.aq-lock .aq-tail{animation:none}
/* [14 ต.ค.] รูปปลาจริง */
.aq-ph{position:relative;display:block;width:84%;margin:0 auto .15rem;aspect-ratio:108/72}
/* [15 ต.ค.] ปลาคู่ใจว่ายรอบการ์ด */
.pet-layer{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:25;overflow:visible}
.pet-layer[hidden]{display:none}
/* [16 ต.ค. user "เปิดป๊อปอัพแล้วไม่ต้องให้เอฟเฟกต์วิ่งขึ้น"] มีป๊อปอัพ/ร้าน/หน้าภารกิจเปิดอยู่ → ซ่อนตัววิ่ง หาง บริวาร เกล็ด บนการ์ดทั้งหมด (ห้องลองชุดในร้านยังเห็นปกติ) */
:is(html.ovh,body.shop-open,body.ov-open,body.msn-open,body.swal2-shown) :is(body > .pet-layer,#dashboardView .pet-fish,#dashboardView .pet-tr,#dashboardView .pet-esc,#dashboardView .pet-coin){visibility:hidden!important}
.pet-fish{position:absolute!important;left:0;top:0;width:32px;height:22px;z-index:20!important;margin:0!important;pointer-events:none;will-change:transform;transform-origin:50% 50%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.pet-fish img,.pet-fish svg{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:640px){.pet-fish{width:26px;height:18px}}
/* [15 ต.ค.] ร้านปลาทู — ของแต่งปลา (หมวก/เอฟเฟกต์) ติดไปกับตัวปลาที่ว่าย */
.pet-fish .pf-in{position:absolute;inset:0;display:block;transform-origin:50% 50%}
.pet-fish .pf-in img,.pet-fish .pf-in svg{width:100%;height:100%;object-fit:contain;display:block}
.pet-fish.has-trick{pointer-events:auto!important;cursor:pointer}
.pet-fish .pf-in.flip{animation:petFlip .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes petFlip{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-16px) rotate(-200deg) scale(1.25)}75%{transform:translateY(-6px) rotate(-360deg) scale(1.1)}100%{transform:translateY(0) rotate(-360deg)}}
.pet-tr,.pet-esc{position:absolute!important;left:0;top:0;width:32px;height:22px;pointer-events:none;z-index:19!important;margin:0!important;will-change:transform}
.pet-tr img,.pet-esc img,.pet-tr svg,.pet-esc svg{width:100%;height:100%;object-fit:contain;display:block}
.pet-tr.tr-stardust{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#ffe9a8 45%,transparent 70%);box-shadow:0 0 6px #ffe08a;animation:petTw 1s ease-in-out infinite alternate}
@keyframes petTw{from{filter:brightness(.7)}to{filter:brightness(1.6)}}
.pet-esc{filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.pet-coin{position:absolute!important;left:0;top:0;z-index:18!important;margin:0!important;font-size:11px;line-height:1;pointer-events:none;animation:petCoin .95s ease-in forwards}
@keyframes petCoin{0%{opacity:1;transform:translate(var(--x),var(--y)) rotate(0)}100%{opacity:0;transform:translate(calc(var(--x) + var(--dx,0px)),calc(var(--y) + var(--dy,20px))) rotate(200deg)}}
.pet-fish.fx-goldbody .pf-in img,.pet-esc.gb img{filter:sepia(1) saturate(4.2) hue-rotate(-12deg) brightness(1.15) contrast(1.05)}
.pet-fish.fx-goldbody{filter:drop-shadow(0 0 4px rgba(255,205,70,.95)) drop-shadow(0 0 9px rgba(255,180,40,.55))}
.pet-fish.fx-goldbody::after{content:'✨';position:absolute;right:-7px;top:-8px;font-size:9px;animation:petSpk 1.2s ease-in-out infinite}
@media (max-width:640px){.pet-tr,.pet-esc{width:26px;height:18px}}
.pet-pick-sub{margin-top:.8rem;font-size:.8rem;font-weight:800}
.pet-fish.is-runner,.pet-tr.is-runner{width:40px;height:32px}
.pet-esc.is-runner{width:40px;height:32px}
.pet-fish.fx-goldbody.is-runner .pf-in img{filter:saturate(1.3) brightness(1.08)}
@media (max-width:640px){.pet-fish.is-runner,.pet-tr.is-runner,.pet-esc.is-runner{width:32px;height:26px}}
.shop-it .ic.rn{width:100%;height:92px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 0%,#2b6b5a,#0b221d);overflow:hidden}
html[data-card-theme] .shop-it .ic.rn{background:var(--ct-bg)}
.shop-it .ic.rn img{max-width:62%;max-height:72px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.35))}
@media (hover:hover){.shop-it:hover .ic.rn img{animation:rnBob 2.6s ease-in-out infinite;will-change:transform}}
@keyframes rnBob{0%,100%{transform:translateY(2px) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.shop-it .tier{font-size:.62rem;font-weight:800;letter-spacing:.06em;padding:.1rem .45rem;border-radius:999px;align-self:flex-start}
.shop-it .tier.c{background:#e5e7eb;color:#374151}.shop-it .tier.r{background:#dbeafe;color:#1d4ed8}.shop-it .tier.l{background:linear-gradient(90deg,#f5d0fe,#fde68a);color:#7e22ce}
@media (prefers-reduced-motion:reduce){.shop-it .ic.rn img{animation:none}}
.pet-hat{position:absolute;left:var(--hl,54%);top:var(--ht,-46%);font-size:var(--hs,13px);line-height:1;transform:rotate(var(--hr,8deg));pointer-events:none}
@media (max-width:640px){.pet-hat{font-size:calc(var(--hs,13px) * .82)}}
.pet-fish.fx-bubbles::before,.pet-fish.fx-bubbles::after{content:'';position:absolute;left:-3px;top:38%;width:5px;height:5px;border-radius:50%;border:1px solid rgba(214,244,255,.9);background:rgba(214,244,255,.15);animation:petBub 1.7s linear infinite}
.pet-fish.fx-bubbles::after{animation-delay:.85s;width:4px;height:4px;top:52%}
@keyframes petBub{0%{transform:translate(0,0) scale(.5);opacity:0}25%{opacity:1}100%{transform:translate(-18px,-9px) scale(1.25);opacity:0}}
.pet-fish.fx-sparkle{filter:drop-shadow(0 0 4px rgba(255,214,102,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.pet-fish.fx-sparkle::after{content:'✨';position:absolute;right:-8px;top:-8px;font-size:9px;animation:petSpk 1.4s ease-in-out infinite}
@keyframes petSpk{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.pet-fish::before,.pet-fish::after{animation:none!important}}
/* ธีมการ์ด (ซื้อจากร้าน) — ทับธีมเทศกาลเฉพาะ 2 การ์ดนี้ เพราะลูกค้าเลือกเอง */
/* [15 ต.ค. user "ธีมการ์ดครอบคลุมการ์ดภารกิจ + ที่จำเป็น / เพิ่มทางเลือกขาย"] ธีมการ์ด = ตัวแปร 3 ตัวต่อธีม (พื้น/ขอบ/เงา)
   ใช้กับการ์ดสีเข้มทุกใบ: โทเคน · สรุปกำไร · แถบภารกิจ · หน้าภารกิจ (หัว/กล่อง/ตกปลา/ตู้ปลา/อันดับ) · แถบซ้ายบัญชีของฉัน — ทับธีมเทศกาล (ลูกค้าเลือกเอง)
   ไม่มีแอนิเมชันพื้นหลัง (เว็บไม่หนัก) */
html[data-card-theme=gold],.ct-gold{--ct-bg:radial-gradient(120% 140% at 0% 0%,#7a5512 0%,#3d2a07 45%,#1c1303 100%);--ct-bd:#e9b949;--ct-sh:0 18px 40px -18px rgba(233,185,73,.55)}
html[data-card-theme=ocean],.ct-ocean{--ct-bg:radial-gradient(90% 120% at 100% 0%,rgba(110,220,255,.22),transparent 55%),radial-gradient(120% 140% at 0% 100%,#0b5d8c 0%,#063654 50%,#021a2e 100%);--ct-bd:#4cc9f0;--ct-sh:0 18px 40px -18px rgba(76,201,240,.55)}
html[data-card-theme=neon],.ct-neon{--ct-bg:linear-gradient(135deg,#1d0a33,#2a0f4d 50%,#0a1d3a);--ct-bd:#ff4fd8;--ct-sh:0 0 0 1px rgba(76,240,255,.35),0 0 22px -4px rgba(255,79,216,.6),0 0 34px -10px rgba(76,240,255,.55)}
html[data-card-theme=sakura],.ct-sakura{--ct-bg:radial-gradient(circle at 88% 12%,rgba(255,190,218,.42),transparent 34%),radial-gradient(circle at 8% 92%,rgba(255,140,190,.28),transparent 42%),radial-gradient(circle,rgba(255,200,225,.22) 0 1.6px,transparent 2.4px) 0 0/38px 38px,linear-gradient(135deg,#5a1438,#33091f 55%,#1c0512);--ct-bd:#ffa8cd;--ct-sh:0 18px 40px -18px rgba(255,140,190,.55)}
html[data-card-theme=emerald],.ct-emerald{--ct-bg:radial-gradient(90% 120% at 100% 0%,rgba(212,175,55,.22),transparent 50%),radial-gradient(120% 140% at 0% 0%,#128a66 0%,#065038 45%,#02221a 100%);--ct-bd:#d4af37;--ct-sh:0 18px 40px -18px rgba(18,138,102,.6)}
html[data-card-theme=ruby],.ct-ruby{--ct-bg:radial-gradient(90% 120% at 100% 0%,rgba(255,120,150,.25),transparent 50%),radial-gradient(120% 140% at 0% 0%,#a5122a 0%,#5c0a17 45%,#26040a 100%);--ct-bd:#ff5c7a;--ct-sh:0 18px 40px -18px rgba(220,30,70,.6)}
html[data-card-theme=carbon],.ct-carbon{--ct-bg:linear-gradient(90deg,transparent,rgba(212,175,55,.12) 50%,transparent),repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px),repeating-linear-gradient(-45deg,rgba(0,0,0,.25) 0 2px,transparent 2px 6px),linear-gradient(135deg,#232323,#0c0c0c);--ct-bd:#d4af37;--ct-sh:0 18px 40px -18px rgba(212,175,55,.5),inset 0 1px 0 rgba(255,236,170,.18)}
html[data-card-theme=galaxy],.ct-galaxy{--ct-bg:radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 34% 70%,#cfe3ff,transparent),radial-gradient(1.6px 1.6px at 58% 18%,#fff,transparent),radial-gradient(1px 1px at 78% 56%,#fff,transparent),radial-gradient(1.2px 1.2px at 90% 28%,#ffe9b0,transparent),radial-gradient(1px 1px at 46% 88%,#fff,transparent),radial-gradient(1px 1px at 22% 50%,#d9c8ff,transparent),radial-gradient(60% 90% at 80% 0%,rgba(154,92,255,.4),transparent 60%),radial-gradient(70% 90% at 10% 100%,rgba(40,120,255,.35),transparent 60%),linear-gradient(160deg,#0b0f2e,#05071a);--ct-bd:#9b8cff;--ct-sh:0 0 26px -8px rgba(154,92,255,.65)}
html[data-card-theme=aurora],.ct-aurora{--ct-bg:radial-gradient(ellipse 70% 60% at 18% 0%,rgba(0,255,170,.38),transparent 60%),radial-gradient(ellipse 60% 70% at 85% 10%,rgba(150,80,255,.38),transparent 62%),radial-gradient(ellipse 80% 60% at 50% 105%,rgba(0,170,255,.3),transparent 62%),linear-gradient(160deg,#04161f,#061f33 60%,#030b14);--ct-bd:#5cffc8;--ct-sh:0 0 26px -8px rgba(92,255,200,.55)}
@property --silk{syntax:'<percentage>';inherits:false;initial-value:20%}
html[data-card-theme=silk],.ct-silk{--ct-bg:linear-gradient(112deg,transparent 18%,rgba(240,212,160,.20) 36%,rgba(255,255,255,.075) 44%,rgba(240,212,160,.12) 52%,transparent 66%),radial-gradient(ellipse 80% 120% at 0% 0%,rgba(214,170,98,.15),transparent 62%),radial-gradient(ellipse 70% 100% at 100% 100%,rgba(70,130,165,.14),transparent 64%),linear-gradient(160deg,#0b1424,#101c32 55%,#09111f);--ct-bd:#c9a45c;--ct-sh:0 14px 36px -18px rgba(201,164,92,.5)}
html[data-card-theme=silk][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:linear-gradient(112deg,transparent calc(var(--silk)*1.5 - 24%),rgba(240,212,160,.20) calc(var(--silk)*1.5 - 6%),rgba(255,255,255,.075) calc(var(--silk)*1.5 + 2%),rgba(240,212,160,.12) calc(var(--silk)*1.5 + 10%),transparent calc(var(--silk)*1.5 + 26%)),radial-gradient(ellipse 80% 120% at 0% 0%,rgba(214,170,98,.15),transparent 62%),radial-gradient(ellipse 70% 100% at 100% 100%,rgba(70,130,165,.14),transparent 64%),linear-gradient(160deg,#0b1424,#101c32 55%,#09111f)!important;animation:ctSilk 18s ease-in-out infinite alternate}
.shop-it .ic.th.ct-silk,.sp-card.ct-silk{background:linear-gradient(112deg,transparent calc(var(--silk)*1.5 - 24%),rgba(240,212,160,.20) calc(var(--silk)*1.5 - 6%),rgba(255,255,255,.075) calc(var(--silk)*1.5 + 2%),rgba(240,212,160,.12) calc(var(--silk)*1.5 + 10%),transparent calc(var(--silk)*1.5 + 26%)),radial-gradient(ellipse 80% 120% at 0% 0%,rgba(214,170,98,.15),transparent 62%),radial-gradient(ellipse 70% 100% at 100% 100%,rgba(70,130,165,.14),transparent 64%),linear-gradient(160deg,#0b1424,#101c32 55%,#09111f);animation:ctSilk 18s ease-in-out infinite alternate}
@keyframes ctSilk{from{--silk:0%}to{--silk:100%}}
/* [16 ต.ค. user ส่งรูปธีม 6 แบบ] ธีมแบบภาพ (ลิมิเต็ด/พรีเมียม) — รูป webp ≤100KB ใน /assets/theme (เก็บในเครื่องลูกค้าผ่าน sw.js)
   ชั้นมืดทับด้านซ้าย (--ct-ov) ให้ตัวเลข/ตัวหนังสืออ่านชัด · มือถือการ์ดแคบ → มืดทั้งใบเท่าๆ กัน · ภาพนิ่ง ไม่มีแอนิเมชัน (ไม่กินเครื่อง) */
:root{--ct-ov:linear-gradient(90deg,rgba(8,12,26,.66) 0%,rgba(8,12,26,.4) 42%,rgba(8,12,26,.12) 80%,rgba(8,12,26,.05) 100%)} /* [26 ต.ค. user "การ์ดแรกมืดไป"] เดิม .86/.6/.22/.12 */
@media (max-width:640px){:root{--ct-ov:linear-gradient(180deg,rgba(8,12,26,.16),rgba(8,12,26,.48))}} /* เดิม .45/.74 */
html[data-card-theme=img_hw_pumpkin],.ct-img_hw_pumpkin{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_hw_pumpkin.webp) 72% center/cover no-repeat;--ct-bd:#f59e0b;--ct-sh:0 18px 40px -18px rgba(245,158,11,.55)}
.shop-it .ic.th.ct-img_hw_pumpkin{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_hw_pumpkin.webp) 72% center/cover no-repeat;font-size:0}
html[data-card-theme=img_hw_forest],.ct-img_hw_forest{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_hw_forest.webp) 72% center/cover no-repeat;--ct-bd:#2dd4bf;--ct-sh:0 18px 40px -18px rgba(45,212,191,.45)}
.shop-it .ic.th.ct-img_hw_forest{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_hw_forest.webp) 72% center/cover no-repeat;font-size:0}
html[data-card-theme=img_hw_carriage],.ct-img_hw_carriage{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_hw_carriage.webp) 72% center/cover no-repeat;--ct-bd:#fcd34d;--ct-sh:0 18px 40px -18px rgba(252,211,77,.5)}
.shop-it .ic.th.ct-img_hw_carriage{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_hw_carriage.webp) 72% center/cover no-repeat;font-size:0}
html[data-card-theme=img_sakura],.ct-img_sakura{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_sakura.webp) 72% center/cover no-repeat;--ct-bd:#f9a8d4;--ct-sh:0 18px 40px -18px rgba(249,168,212,.55)}
html[data-card-theme=img_vault],.ct-img_vault{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_vault.webp) 72% center/cover no-repeat;--ct-bd:#e9b949;--ct-sh:0 18px 40px -18px rgba(233,185,73,.6)}
html[data-card-theme=img_palace],.ct-img_palace{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_palace.webp) 72% center/cover no-repeat;--ct-bd:#f6d27a;--ct-sh:0 18px 40px -18px rgba(246,210,122,.55)}
html[data-card-theme=img_treasure],.ct-img_treasure{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_treasure.webp) 72% center/cover no-repeat;--ct-bd:#67e8f9;--ct-sh:0 18px 40px -18px rgba(103,232,249,.5)}
html[data-card-theme=img_cosmos],.ct-img_cosmos{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_cosmos.webp) 72% center/cover no-repeat;--ct-bd:#c4b5fd;--ct-sh:0 18px 40px -18px rgba(196,181,253,.6)}
html[data-card-theme=img_castle],.ct-img_castle{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_castle.webp) 72% center/cover no-repeat;--ct-bd:#fcd34d;--ct-sh:0 18px 40px -18px rgba(252,211,77,.5)}
.shop-it .ic.th.ct-img_sakura{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_sakura.webp) 72% center/cover no-repeat;font-size:0}
html[data-card-theme=img_mist],.ct-img_mist{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_mist.webp) 72% center/cover no-repeat;--ct-bd:#fde68a;--ct-sh:0 18px 40px -18px rgba(253,230,138,.5)}
.shop-it .ic.th.ct-img_mist{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_mist.webp) 72% center/cover no-repeat;font-size:0}
html[data-card-theme=img_garden],.ct-img_garden{--ct-bg:var(--ct-ov),url(/assets/theme/theme_img_garden.webp) 72% center/cover no-repeat;--ct-bd:#f9a8d4;--ct-sh:0 18px 40px -18px rgba(249,168,212,.5)}
.shop-it .ic.th.ct-img_garden{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_garden.webp) 72% center/cover no-repeat;font-size:0}
.shop-it .ic.th.ct-img_vault{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_vault.webp) 72% center/cover no-repeat;font-size:0}
.shop-it .ic.th.ct-img_palace{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_palace.webp) 72% center/cover no-repeat;font-size:0}
.shop-it .ic.th.ct-img_treasure{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_treasure.webp) 72% center/cover no-repeat;font-size:0}
.shop-it .ic.th.ct-img_cosmos{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_cosmos.webp) 72% center/cover no-repeat;font-size:0}
.shop-it .ic.th.ct-img_castle{background:linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_castle.webp) 72% center/cover no-repeat;font-size:0}
html[data-card-theme] :is(#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero){background:var(--ct-bg)!important;border-color:var(--ct-bd)!important;box-shadow:var(--ct-sh)!important}
/* [21 ต.ค. user "ทำให้ธีมซากุระขยับด้วย"] ทุกธีมภาพขยับ: อนุภาคเข้ากับฉาก (กลีบ/ดาว/ฟอง/ฝุ่นทอง/ถ่านไฟ/หิ่งห้อย) · เฉพาะจอคอม มือถือเป็นภาพนิ่ง */
@property --pa{syntax:'<percentage>';inherits:false;initial-value:0%}@property --pb{syntax:'<percentage>';inherits:false;initial-value:0%}@property --pc{syntax:'<percentage>';inherits:false;initial-value:0%}@property --sw{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes skpa{to{--pa:100%}}@keyframes skpb{to{--pb:100%}}@keyframes skpc{to{--pc:100%}}@keyframes sksw{to{--sw:100%}}
@media (min-width:700px){
html[data-card-theme=img_sakura][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(ellipse 8px 5px at calc(10% + var(--pa)*-0.04 + var(--sw)*-0.04) calc(-12% + var(--pa)*1.3),rgba(255,224,236,0.9) 55%,transparent 100%),radial-gradient(ellipse 8px 5px at calc(36% + var(--pa)*-0.09 + var(--sw)*-0.03) calc(-3% + var(--pa)*1.3),rgba(255,224,236,0.9) 55%,transparent 100%),radial-gradient(ellipse 8px 5px at calc(63% + var(--pa)*-0.02 + var(--sw)*-0.02) calc(6% + var(--pa)*1.3),rgba(255,224,236,0.9) 55%,transparent 100%),radial-gradient(ellipse 8px 5px at calc(88% + var(--pa)*-0.07 + var(--sw)*-0.01) calc(15% + var(--pa)*1.3),rgba(255,224,236,0.9) 55%,transparent 100%),radial-gradient(ellipse 10.5px 6.5px at calc(24% + var(--pb)*-0.06 + var(--sw)*-0.04) calc(-12% + var(--pb)*1.3),rgba(255,224,236,0.8) 55%,transparent 100%),radial-gradient(ellipse 10.5px 6.5px at calc(52% + var(--pb)*-0.135 + var(--sw)*-0.03) calc(-3% + var(--pb)*1.3),rgba(255,224,236,0.8) 55%,transparent 100%),radial-gradient(ellipse 10.5px 6.5px at calc(78% + var(--pb)*-0.03 + var(--sw)*-0.02) calc(6% + var(--pb)*1.3),rgba(255,224,236,0.8) 55%,transparent 100%),radial-gradient(ellipse 5.5px 3.6px at calc(5% + var(--pc)*-0.08 + var(--sw)*-0.04) calc(-12% + var(--pc)*1.3),rgba(255,224,236,0.65) 55%,transparent 100%),radial-gradient(ellipse 5.5px 3.6px at calc(45% + var(--pc)*-0.18 + var(--sw)*-0.03) calc(-3% + var(--pc)*1.3),rgba(255,224,236,0.65) 55%,transparent 100%),radial-gradient(ellipse 5.5px 3.6px at calc(70% + var(--pc)*-0.04 + var(--sw)*-0.02) calc(6% + var(--pc)*1.3),rgba(255,224,236,0.65) 55%,transparent 100%),radial-gradient(ellipse 5.5px 3.6px at calc(94% + var(--pc)*-0.14 + var(--sw)*-0.01) calc(15% + var(--pc)*1.3),rgba(255,224,236,0.65) 55%,transparent 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_sakura{background:radial-gradient(ellipse 8px 5px at calc(10% + var(--pa)*-0.04 + var(--sw)*-0.04) calc(-12% + var(--pa)*1.3),rgba(255,224,236,0.9) 55%,transparent 100%),radial-gradient(ellipse 8px 5px at calc(36% + var(--pa)*-0.09 + var(--sw)*-0.03) calc(-3% + var(--pa)*1.3),rgba(255,224,236,0.9) 55%,transparent 100%),radial-gradient(ellipse 8px 5px at calc(63% + var(--pa)*-0.02 + var(--sw)*-0.02) calc(6% + var(--pa)*1.3),rgba(255,224,236,0.9) 55%,transparent 100%),radial-gradient(ellipse 8px 5px at calc(88% + var(--pa)*-0.07 + var(--sw)*-0.01) calc(15% + var(--pa)*1.3),rgba(255,224,236,0.9) 55%,transparent 100%),radial-gradient(ellipse 10.5px 6.5px at calc(24% + var(--pb)*-0.06 + var(--sw)*-0.04) calc(-12% + var(--pb)*1.3),rgba(255,224,236,0.8) 55%,transparent 100%),radial-gradient(ellipse 10.5px 6.5px at calc(52% + var(--pb)*-0.135 + var(--sw)*-0.03) calc(-3% + var(--pb)*1.3),rgba(255,224,236,0.8) 55%,transparent 100%),radial-gradient(ellipse 10.5px 6.5px at calc(78% + var(--pb)*-0.03 + var(--sw)*-0.02) calc(6% + var(--pb)*1.3),rgba(255,224,236,0.8) 55%,transparent 100%),radial-gradient(ellipse 5.5px 3.6px at calc(5% + var(--pc)*-0.08 + var(--sw)*-0.04) calc(-12% + var(--pc)*1.3),rgba(255,224,236,0.65) 55%,transparent 100%),radial-gradient(ellipse 5.5px 3.6px at calc(45% + var(--pc)*-0.18 + var(--sw)*-0.03) calc(-3% + var(--pc)*1.3),rgba(255,224,236,0.65) 55%,transparent 100%),radial-gradient(ellipse 5.5px 3.6px at calc(70% + var(--pc)*-0.04 + var(--sw)*-0.02) calc(6% + var(--pc)*1.3),rgba(255,224,236,0.65) 55%,transparent 100%),radial-gradient(ellipse 5.5px 3.6px at calc(94% + var(--pc)*-0.14 + var(--sw)*-0.01) calc(15% + var(--pc)*1.3),rgba(255,224,236,0.65) 55%,transparent 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_sakura.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
html[data-card-theme=img_castle][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(ellipse 7px 4.5px at calc(10% + var(--pa)*-0.04 + var(--sw)*-0.04) calc(-12% + var(--pa)*1.3),rgba(255,247,226,0.9) 55%,transparent 100%),radial-gradient(ellipse 7px 4.5px at calc(36% + var(--pa)*-0.09 + var(--sw)*-0.03) calc(-3% + var(--pa)*1.3),rgba(255,247,226,0.9) 55%,transparent 100%),radial-gradient(ellipse 7px 4.5px at calc(63% + var(--pa)*-0.02 + var(--sw)*-0.02) calc(6% + var(--pa)*1.3),rgba(255,247,226,0.9) 55%,transparent 100%),radial-gradient(ellipse 7px 4.5px at calc(88% + var(--pa)*-0.07 + var(--sw)*-0.01) calc(15% + var(--pa)*1.3),rgba(255,247,226,0.9) 55%,transparent 100%),radial-gradient(ellipse 9.5px 6px at calc(24% + var(--pb)*-0.06 + var(--sw)*-0.04) calc(-12% + var(--pb)*1.3),rgba(255,247,226,0.8) 55%,transparent 100%),radial-gradient(ellipse 9.5px 6px at calc(52% + var(--pb)*-0.135 + var(--sw)*-0.03) calc(-3% + var(--pb)*1.3),rgba(255,247,226,0.8) 55%,transparent 100%),radial-gradient(ellipse 9.5px 6px at calc(78% + var(--pb)*-0.03 + var(--sw)*-0.02) calc(6% + var(--pb)*1.3),rgba(255,247,226,0.8) 55%,transparent 100%),radial-gradient(ellipse 5px 3.4px at calc(5% + var(--pc)*-0.08 + var(--sw)*-0.04) calc(-12% + var(--pc)*1.3),rgba(255,247,226,0.65) 55%,transparent 100%),radial-gradient(ellipse 5px 3.4px at calc(45% + var(--pc)*-0.18 + var(--sw)*-0.03) calc(-3% + var(--pc)*1.3),rgba(255,247,226,0.65) 55%,transparent 100%),radial-gradient(ellipse 5px 3.4px at calc(70% + var(--pc)*-0.04 + var(--sw)*-0.02) calc(6% + var(--pc)*1.3),rgba(255,247,226,0.65) 55%,transparent 100%),radial-gradient(ellipse 5px 3.4px at calc(94% + var(--pc)*-0.14 + var(--sw)*-0.01) calc(15% + var(--pc)*1.3),rgba(255,247,226,0.65) 55%,transparent 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_castle{background:radial-gradient(ellipse 7px 4.5px at calc(10% + var(--pa)*-0.04 + var(--sw)*-0.04) calc(-12% + var(--pa)*1.3),rgba(255,247,226,0.9) 55%,transparent 100%),radial-gradient(ellipse 7px 4.5px at calc(36% + var(--pa)*-0.09 + var(--sw)*-0.03) calc(-3% + var(--pa)*1.3),rgba(255,247,226,0.9) 55%,transparent 100%),radial-gradient(ellipse 7px 4.5px at calc(63% + var(--pa)*-0.02 + var(--sw)*-0.02) calc(6% + var(--pa)*1.3),rgba(255,247,226,0.9) 55%,transparent 100%),radial-gradient(ellipse 7px 4.5px at calc(88% + var(--pa)*-0.07 + var(--sw)*-0.01) calc(15% + var(--pa)*1.3),rgba(255,247,226,0.9) 55%,transparent 100%),radial-gradient(ellipse 9.5px 6px at calc(24% + var(--pb)*-0.06 + var(--sw)*-0.04) calc(-12% + var(--pb)*1.3),rgba(255,247,226,0.8) 55%,transparent 100%),radial-gradient(ellipse 9.5px 6px at calc(52% + var(--pb)*-0.135 + var(--sw)*-0.03) calc(-3% + var(--pb)*1.3),rgba(255,247,226,0.8) 55%,transparent 100%),radial-gradient(ellipse 9.5px 6px at calc(78% + var(--pb)*-0.03 + var(--sw)*-0.02) calc(6% + var(--pb)*1.3),rgba(255,247,226,0.8) 55%,transparent 100%),radial-gradient(ellipse 5px 3.4px at calc(5% + var(--pc)*-0.08 + var(--sw)*-0.04) calc(-12% + var(--pc)*1.3),rgba(255,247,226,0.65) 55%,transparent 100%),radial-gradient(ellipse 5px 3.4px at calc(45% + var(--pc)*-0.18 + var(--sw)*-0.03) calc(-3% + var(--pc)*1.3),rgba(255,247,226,0.65) 55%,transparent 100%),radial-gradient(ellipse 5px 3.4px at calc(70% + var(--pc)*-0.04 + var(--sw)*-0.02) calc(6% + var(--pc)*1.3),rgba(255,247,226,0.65) 55%,transparent 100%),radial-gradient(ellipse 5px 3.4px at calc(94% + var(--pc)*-0.14 + var(--sw)*-0.01) calc(15% + var(--pc)*1.3),rgba(255,247,226,0.65) 55%,transparent 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_castle.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
html[data-card-theme=img_garden][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(ellipse 9px 5.8px at calc(10% + var(--pa)*-0.04 + var(--sw)*-0.05) calc(-12% + var(--pa)*1.3),rgba(255,196,214,0.9) 55%,transparent 100%),radial-gradient(ellipse 9px 5.8px at calc(36% + var(--pa)*-0.09 + var(--sw)*-0.04) calc(-3% + var(--pa)*1.3),rgba(255,196,214,0.9) 55%,transparent 100%),radial-gradient(ellipse 9px 5.8px at calc(63% + var(--pa)*-0.02 + var(--sw)*-0.03) calc(6% + var(--pa)*1.3),rgba(255,196,214,0.9) 55%,transparent 100%),radial-gradient(ellipse 9px 5.8px at calc(88% + var(--pa)*-0.07 + var(--sw)*-0.02) calc(15% + var(--pa)*1.3),rgba(255,196,214,0.9) 55%,transparent 100%),radial-gradient(ellipse 11.5px 7.4px at calc(24% + var(--pb)*-0.06 + var(--sw)*-0.05) calc(-12% + var(--pb)*1.3),rgba(255,196,214,0.8) 55%,transparent 100%),radial-gradient(ellipse 11.5px 7.4px at calc(52% + var(--pb)*-0.135 + var(--sw)*-0.04) calc(-3% + var(--pb)*1.3),rgba(255,196,214,0.8) 55%,transparent 100%),radial-gradient(ellipse 11.5px 7.4px at calc(78% + var(--pb)*-0.03 + var(--sw)*-0.03) calc(6% + var(--pb)*1.3),rgba(255,196,214,0.8) 55%,transparent 100%),radial-gradient(ellipse 6.5px 4.2px at calc(5% + var(--pc)*-0.08 + var(--sw)*-0.05) calc(-12% + var(--pc)*1.3),rgba(255,196,214,0.65) 55%,transparent 100%),radial-gradient(ellipse 6.5px 4.2px at calc(45% + var(--pc)*-0.18 + var(--sw)*-0.04) calc(-3% + var(--pc)*1.3),rgba(255,196,214,0.65) 55%,transparent 100%),radial-gradient(ellipse 6.5px 4.2px at calc(70% + var(--pc)*-0.04 + var(--sw)*-0.03) calc(6% + var(--pc)*1.3),rgba(255,196,214,0.65) 55%,transparent 100%),radial-gradient(ellipse 6.5px 4.2px at calc(94% + var(--pc)*-0.14 + var(--sw)*-0.02) calc(15% + var(--pc)*1.3),rgba(255,196,214,0.65) 55%,transparent 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_garden{background:radial-gradient(ellipse 9px 5.8px at calc(10% + var(--pa)*-0.04 + var(--sw)*-0.05) calc(-12% + var(--pa)*1.3),rgba(255,196,214,0.9) 55%,transparent 100%),radial-gradient(ellipse 9px 5.8px at calc(36% + var(--pa)*-0.09 + var(--sw)*-0.04) calc(-3% + var(--pa)*1.3),rgba(255,196,214,0.9) 55%,transparent 100%),radial-gradient(ellipse 9px 5.8px at calc(63% + var(--pa)*-0.02 + var(--sw)*-0.03) calc(6% + var(--pa)*1.3),rgba(255,196,214,0.9) 55%,transparent 100%),radial-gradient(ellipse 9px 5.8px at calc(88% + var(--pa)*-0.07 + var(--sw)*-0.02) calc(15% + var(--pa)*1.3),rgba(255,196,214,0.9) 55%,transparent 100%),radial-gradient(ellipse 11.5px 7.4px at calc(24% + var(--pb)*-0.06 + var(--sw)*-0.05) calc(-12% + var(--pb)*1.3),rgba(255,196,214,0.8) 55%,transparent 100%),radial-gradient(ellipse 11.5px 7.4px at calc(52% + var(--pb)*-0.135 + var(--sw)*-0.04) calc(-3% + var(--pb)*1.3),rgba(255,196,214,0.8) 55%,transparent 100%),radial-gradient(ellipse 11.5px 7.4px at calc(78% + var(--pb)*-0.03 + var(--sw)*-0.03) calc(6% + var(--pb)*1.3),rgba(255,196,214,0.8) 55%,transparent 100%),radial-gradient(ellipse 6.5px 4.2px at calc(5% + var(--pc)*-0.08 + var(--sw)*-0.05) calc(-12% + var(--pc)*1.3),rgba(255,196,214,0.65) 55%,transparent 100%),radial-gradient(ellipse 6.5px 4.2px at calc(45% + var(--pc)*-0.18 + var(--sw)*-0.04) calc(-3% + var(--pc)*1.3),rgba(255,196,214,0.65) 55%,transparent 100%),radial-gradient(ellipse 6.5px 4.2px at calc(70% + var(--pc)*-0.04 + var(--sw)*-0.03) calc(6% + var(--pc)*1.3),rgba(255,196,214,0.65) 55%,transparent 100%),radial-gradient(ellipse 6.5px 4.2px at calc(94% + var(--pc)*-0.14 + var(--sw)*-0.02) calc(15% + var(--pc)*1.3),rgba(255,196,214,0.65) 55%,transparent 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_garden.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
html[data-card-theme=img_cosmos][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(circle 3.9px at calc(10% + var(--pa)*0.03 + var(--sw)*0.02) calc(112% - var(--pa)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.63) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.03) calc(103% - var(--pa)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.63) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(63% + var(--pa)*0.04 + var(--sw)*0.04) calc(94% - var(--pa)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.63) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.05) calc(85% - var(--pa)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.63) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(24% + var(--pb)*0.045 + var(--sw)*0.02) calc(112% - var(--pb)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.56) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.03) calc(103% - var(--pb)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.56) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(78% + var(--pb)*0.06 + var(--sw)*0.04) calc(94% - var(--pb)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.56) 30%,transparent 100%),radial-gradient(circle 3.0px at calc(5% + var(--pc)*0.06 + var(--sw)*0.02) calc(112% - var(--pc)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.45) 30%,transparent 100%),radial-gradient(circle 3.0px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.03) calc(103% - var(--pc)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.45) 30%,transparent 100%),radial-gradient(circle 3.0px at calc(70% + var(--pc)*0.08 + var(--sw)*0.04) calc(94% - var(--pc)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.45) 30%,transparent 100%),radial-gradient(circle 3.0px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.05) calc(85% - var(--pc)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.45) 30%,transparent 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_cosmos{background:radial-gradient(circle 3.9px at calc(10% + var(--pa)*0.03 + var(--sw)*0.02) calc(112% - var(--pa)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.63) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.03) calc(103% - var(--pa)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.63) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(63% + var(--pa)*0.04 + var(--sw)*0.04) calc(94% - var(--pa)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.63) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.05) calc(85% - var(--pa)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.63) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(24% + var(--pb)*0.045 + var(--sw)*0.02) calc(112% - var(--pb)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.56) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.03) calc(103% - var(--pb)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.56) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(78% + var(--pb)*0.06 + var(--sw)*0.04) calc(94% - var(--pb)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.56) 30%,transparent 100%),radial-gradient(circle 3.0px at calc(5% + var(--pc)*0.06 + var(--sw)*0.02) calc(112% - var(--pc)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.45) 30%,transparent 100%),radial-gradient(circle 3.0px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.03) calc(103% - var(--pc)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.45) 30%,transparent 100%),radial-gradient(circle 3.0px at calc(70% + var(--pc)*0.08 + var(--sw)*0.04) calc(94% - var(--pc)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.45) 30%,transparent 100%),radial-gradient(circle 3.0px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.05) calc(85% - var(--pc)*1.3),rgba(226,214,255,1) 0,rgba(226,214,255,0.45) 30%,transparent 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_cosmos.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
html[data-card-theme=img_treasure][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(circle 3.5px at calc(10% + var(--pa)*0.03 + var(--sw)*0.03) calc(112% - var(--pa)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.9) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 3.5px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.04) calc(103% - var(--pa)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.9) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 3.5px at calc(63% + var(--pa)*0.04 + var(--sw)*0.05) calc(94% - var(--pa)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.9) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 3.5px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.06) calc(85% - var(--pa)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.9) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 5.0px at calc(24% + var(--pb)*0.045 + var(--sw)*0.03) calc(112% - var(--pb)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.8) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 5.0px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.04) calc(103% - var(--pb)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.8) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 5.0px at calc(78% + var(--pb)*0.06 + var(--sw)*0.05) calc(94% - var(--pb)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.8) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 2.5px at calc(5% + var(--pc)*0.06 + var(--sw)*0.03) calc(112% - var(--pc)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.65) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 2.5px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.04) calc(103% - var(--pc)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.65) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 2.5px at calc(70% + var(--pc)*0.08 + var(--sw)*0.05) calc(94% - var(--pc)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.65) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 2.5px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.06) calc(85% - var(--pc)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.65) 85%,rgba(190,245,255,0) 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_treasure{background:radial-gradient(circle 3.5px at calc(10% + var(--pa)*0.03 + var(--sw)*0.03) calc(112% - var(--pa)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.9) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 3.5px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.04) calc(103% - var(--pa)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.9) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 3.5px at calc(63% + var(--pa)*0.04 + var(--sw)*0.05) calc(94% - var(--pa)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.9) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 3.5px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.06) calc(85% - var(--pa)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.9) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 5.0px at calc(24% + var(--pb)*0.045 + var(--sw)*0.03) calc(112% - var(--pb)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.8) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 5.0px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.04) calc(103% - var(--pb)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.8) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 5.0px at calc(78% + var(--pb)*0.06 + var(--sw)*0.05) calc(94% - var(--pb)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.8) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 2.5px at calc(5% + var(--pc)*0.06 + var(--sw)*0.03) calc(112% - var(--pc)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.65) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 2.5px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.04) calc(103% - var(--pc)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.65) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 2.5px at calc(70% + var(--pc)*0.08 + var(--sw)*0.05) calc(94% - var(--pc)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.65) 85%,rgba(190,245,255,0) 100%),radial-gradient(circle 2.5px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.06) calc(85% - var(--pc)*1.3),rgba(190,245,255,0) 55%,rgba(190,245,255,0.65) 85%,rgba(190,245,255,0) 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_treasure.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
html[data-card-theme=img_palace][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(circle 5.1px at calc(10% + var(--pa)*0.03 + var(--sw)*0.02) calc(112% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.03) calc(103% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(63% + var(--pa)*0.04 + var(--sw)*0.04) calc(94% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.05) calc(85% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(24% + var(--pb)*0.045 + var(--sw)*0.02) calc(112% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.03) calc(103% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(78% + var(--pb)*0.06 + var(--sw)*0.04) calc(94% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(5% + var(--pc)*0.06 + var(--sw)*0.02) calc(112% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.03) calc(103% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(70% + var(--pc)*0.08 + var(--sw)*0.04) calc(94% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.05) calc(85% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_palace{background:radial-gradient(circle 5.1px at calc(10% + var(--pa)*0.03 + var(--sw)*0.02) calc(112% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.03) calc(103% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(63% + var(--pa)*0.04 + var(--sw)*0.04) calc(94% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.05) calc(85% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(24% + var(--pb)*0.045 + var(--sw)*0.02) calc(112% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.03) calc(103% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(78% + var(--pb)*0.06 + var(--sw)*0.04) calc(94% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(5% + var(--pc)*0.06 + var(--sw)*0.02) calc(112% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.03) calc(103% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(70% + var(--pc)*0.08 + var(--sw)*0.04) calc(94% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.05) calc(85% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_palace.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
html[data-card-theme=img_vault][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(circle 5.1px at calc(10% + var(--pa)*0.03 + var(--sw)*0.02) calc(112% - var(--pa)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.03) calc(103% - var(--pa)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(63% + var(--pa)*0.04 + var(--sw)*0.04) calc(94% - var(--pa)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.05) calc(85% - var(--pa)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.63) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(24% + var(--pb)*0.045 + var(--sw)*0.02) calc(112% - var(--pb)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.03) calc(103% - var(--pb)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(78% + var(--pb)*0.06 + var(--sw)*0.04) calc(94% - var(--pb)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.56) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(5% + var(--pc)*0.06 + var(--sw)*0.02) calc(112% - var(--pc)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.03) calc(103% - var(--pc)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(70% + var(--pc)*0.08 + var(--sw)*0.04) calc(94% - var(--pc)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.05) calc(85% - var(--pc)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.45) 30%,transparent 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_vault{background:radial-gradient(circle 5.1px at calc(10% + var(--pa)*0.03 + var(--sw)*0.02) calc(112% - var(--pa)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.03) calc(103% - var(--pa)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(63% + var(--pa)*0.04 + var(--sw)*0.04) calc(94% - var(--pa)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.05) calc(85% - var(--pa)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.63) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(24% + var(--pb)*0.045 + var(--sw)*0.02) calc(112% - var(--pb)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.03) calc(103% - var(--pb)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(78% + var(--pb)*0.06 + var(--sw)*0.04) calc(94% - var(--pb)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.56) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(5% + var(--pc)*0.06 + var(--sw)*0.02) calc(112% - var(--pc)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.03) calc(103% - var(--pc)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(70% + var(--pc)*0.08 + var(--sw)*0.04) calc(94% - var(--pc)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.05) calc(85% - var(--pc)*1.3),rgba(255,214,120,1) 0,rgba(255,214,120,0.45) 30%,transparent 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_vault.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
html[data-card-theme=img_hw_carriage][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(circle 5.1px at calc(10% + var(--pa)*0.03 + var(--sw)*0.03) calc(112% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.04) calc(103% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(63% + var(--pa)*0.04 + var(--sw)*0.05) calc(94% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.06) calc(85% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(24% + var(--pb)*0.045 + var(--sw)*0.03) calc(112% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.04) calc(103% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(78% + var(--pb)*0.06 + var(--sw)*0.05) calc(94% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(5% + var(--pc)*0.06 + var(--sw)*0.03) calc(112% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.04) calc(103% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(70% + var(--pc)*0.08 + var(--sw)*0.05) calc(94% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.06) calc(85% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_hw_carriage{background:radial-gradient(circle 5.1px at calc(10% + var(--pa)*0.03 + var(--sw)*0.03) calc(112% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.04) calc(103% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(63% + var(--pa)*0.04 + var(--sw)*0.05) calc(94% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 5.1px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.06) calc(85% - var(--pa)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.63) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(24% + var(--pb)*0.045 + var(--sw)*0.03) calc(112% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.04) calc(103% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 6.9px at calc(78% + var(--pb)*0.06 + var(--sw)*0.05) calc(94% - var(--pb)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.56) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(5% + var(--pc)*0.06 + var(--sw)*0.03) calc(112% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.04) calc(103% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(70% + var(--pc)*0.08 + var(--sw)*0.05) calc(94% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),radial-gradient(circle 3.6px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.06) calc(85% - var(--pc)*1.3),rgba(255,226,150,1) 0,rgba(255,226,150,0.45) 30%,transparent 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_hw_carriage.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
html[data-card-theme=img_hw_pumpkin][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(circle 5.4px at calc(10% + var(--pa)*0.03 + var(--sw)*0.04) calc(112% - var(--pa)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.63) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.05) calc(103% - var(--pa)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.63) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(63% + var(--pa)*0.04 + var(--sw)*0.06) calc(94% - var(--pa)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.63) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.07) calc(85% - var(--pa)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.63) 30%,transparent 100%),radial-gradient(circle 7.2px at calc(24% + var(--pb)*0.045 + var(--sw)*0.04) calc(112% - var(--pb)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.56) 30%,transparent 100%),radial-gradient(circle 7.2px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.05) calc(103% - var(--pb)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.56) 30%,transparent 100%),radial-gradient(circle 7.2px at calc(78% + var(--pb)*0.06 + var(--sw)*0.06) calc(94% - var(--pb)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.56) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(5% + var(--pc)*0.06 + var(--sw)*0.04) calc(112% - var(--pc)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.45) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.05) calc(103% - var(--pc)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.45) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(70% + var(--pc)*0.08 + var(--sw)*0.06) calc(94% - var(--pc)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.45) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.07) calc(85% - var(--pc)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.45) 30%,transparent 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_hw_pumpkin{background:radial-gradient(circle 5.4px at calc(10% + var(--pa)*0.03 + var(--sw)*0.04) calc(112% - var(--pa)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.63) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.05) calc(103% - var(--pa)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.63) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(63% + var(--pa)*0.04 + var(--sw)*0.06) calc(94% - var(--pa)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.63) 30%,transparent 100%),radial-gradient(circle 5.4px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.07) calc(85% - var(--pa)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.63) 30%,transparent 100%),radial-gradient(circle 7.2px at calc(24% + var(--pb)*0.045 + var(--sw)*0.04) calc(112% - var(--pb)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.56) 30%,transparent 100%),radial-gradient(circle 7.2px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.05) calc(103% - var(--pb)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.56) 30%,transparent 100%),radial-gradient(circle 7.2px at calc(78% + var(--pb)*0.06 + var(--sw)*0.06) calc(94% - var(--pb)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.56) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(5% + var(--pc)*0.06 + var(--sw)*0.04) calc(112% - var(--pc)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.45) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.05) calc(103% - var(--pc)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.45) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(70% + var(--pc)*0.08 + var(--sw)*0.06) calc(94% - var(--pc)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.45) 30%,transparent 100%),radial-gradient(circle 3.9px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.07) calc(85% - var(--pc)*1.3),rgba(255,150,50,1) 0,rgba(255,150,50,0.45) 30%,transparent 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_hw_pumpkin.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
html[data-card-theme=img_hw_forest][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(circle 5.7px at calc(10% + var(--pa)*0.03 + var(--sw)*0.06) calc(112% - var(--pa)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.7px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.07) calc(103% - var(--pa)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.7px at calc(63% + var(--pa)*0.04 + var(--sw)*0.08) calc(94% - var(--pa)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.7px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.09) calc(85% - var(--pa)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.63) 30%,transparent 100%),radial-gradient(circle 7.5px at calc(24% + var(--pb)*0.045 + var(--sw)*0.06) calc(112% - var(--pb)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.56) 30%,transparent 100%),radial-gradient(circle 7.5px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.07) calc(103% - var(--pb)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.56) 30%,transparent 100%),radial-gradient(circle 7.5px at calc(78% + var(--pb)*0.06 + var(--sw)*0.08) calc(94% - var(--pb)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.56) 30%,transparent 100%),radial-gradient(circle 4.2px at calc(5% + var(--pc)*0.06 + var(--sw)*0.06) calc(112% - var(--pc)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.45) 30%,transparent 100%),radial-gradient(circle 4.2px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.07) calc(103% - var(--pc)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.45) 30%,transparent 100%),radial-gradient(circle 4.2px at calc(70% + var(--pc)*0.08 + var(--sw)*0.08) calc(94% - var(--pc)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.45) 30%,transparent 100%),radial-gradient(circle 4.2px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.09) calc(85% - var(--pc)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.45) 30%,transparent 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_hw_forest{background:radial-gradient(circle 5.7px at calc(10% + var(--pa)*0.03 + var(--sw)*0.06) calc(112% - var(--pa)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.7px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.07) calc(103% - var(--pa)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.7px at calc(63% + var(--pa)*0.04 + var(--sw)*0.08) calc(94% - var(--pa)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.63) 30%,transparent 100%),radial-gradient(circle 5.7px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.09) calc(85% - var(--pa)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.63) 30%,transparent 100%),radial-gradient(circle 7.5px at calc(24% + var(--pb)*0.045 + var(--sw)*0.06) calc(112% - var(--pb)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.56) 30%,transparent 100%),radial-gradient(circle 7.5px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.07) calc(103% - var(--pb)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.56) 30%,transparent 100%),radial-gradient(circle 7.5px at calc(78% + var(--pb)*0.06 + var(--sw)*0.08) calc(94% - var(--pb)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.56) 30%,transparent 100%),radial-gradient(circle 4.2px at calc(5% + var(--pc)*0.06 + var(--sw)*0.06) calc(112% - var(--pc)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.45) 30%,transparent 100%),radial-gradient(circle 4.2px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.07) calc(103% - var(--pc)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.45) 30%,transparent 100%),radial-gradient(circle 4.2px at calc(70% + var(--pc)*0.08 + var(--sw)*0.08) calc(94% - var(--pc)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.45) 30%,transparent 100%),radial-gradient(circle 4.2px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.09) calc(85% - var(--pc)*1.3),rgba(190,255,120,1) 0,rgba(190,255,120,0.45) 30%,transparent 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_hw_forest.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
html[data-card-theme=img_mist][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){background:radial-gradient(circle 6.6px at calc(10% + var(--pa)*0.03 + var(--sw)*0.03) calc(112% - var(--pa)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.63) 30%,transparent 100%),radial-gradient(circle 6.6px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.04) calc(103% - var(--pa)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.63) 30%,transparent 100%),radial-gradient(circle 6.6px at calc(63% + var(--pa)*0.04 + var(--sw)*0.05) calc(94% - var(--pa)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.63) 30%,transparent 100%),radial-gradient(circle 6.6px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.06) calc(85% - var(--pa)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.63) 30%,transparent 100%),radial-gradient(circle 9.0px at calc(24% + var(--pb)*0.045 + var(--sw)*0.03) calc(112% - var(--pb)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.56) 30%,transparent 100%),radial-gradient(circle 9.0px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.04) calc(103% - var(--pb)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.56) 30%,transparent 100%),radial-gradient(circle 9.0px at calc(78% + var(--pb)*0.06 + var(--sw)*0.05) calc(94% - var(--pb)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.56) 30%,transparent 100%),radial-gradient(circle 4.5px at calc(5% + var(--pc)*0.06 + var(--sw)*0.03) calc(112% - var(--pc)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.45) 30%,transparent 100%),radial-gradient(circle 4.5px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.04) calc(103% - var(--pc)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.45) 30%,transparent 100%),radial-gradient(circle 4.5px at calc(70% + var(--pc)*0.08 + var(--sw)*0.05) calc(94% - var(--pc)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.45) 30%,transparent 100%),radial-gradient(circle 4.5px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.06) calc(85% - var(--pc)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.45) 30%,transparent 100%),var(--ct-bg)!important;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
.shop-it .ic.th.ct-img_mist{background:radial-gradient(circle 6.6px at calc(10% + var(--pa)*0.03 + var(--sw)*0.03) calc(112% - var(--pa)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.63) 30%,transparent 100%),radial-gradient(circle 6.6px at calc(36% + var(--pa)*-0.05 + var(--sw)*0.04) calc(103% - var(--pa)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.63) 30%,transparent 100%),radial-gradient(circle 6.6px at calc(63% + var(--pa)*0.04 + var(--sw)*0.05) calc(94% - var(--pa)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.63) 30%,transparent 100%),radial-gradient(circle 6.6px at calc(88% + var(--pa)*-0.03 + var(--sw)*0.06) calc(85% - var(--pa)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.63) 30%,transparent 100%),radial-gradient(circle 9.0px at calc(24% + var(--pb)*0.045 + var(--sw)*0.03) calc(112% - var(--pb)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.56) 30%,transparent 100%),radial-gradient(circle 9.0px at calc(52% + var(--pb)*-0.07500000000000001 + var(--sw)*0.04) calc(103% - var(--pb)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.56) 30%,transparent 100%),radial-gradient(circle 9.0px at calc(78% + var(--pb)*0.06 + var(--sw)*0.05) calc(94% - var(--pb)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.56) 30%,transparent 100%),radial-gradient(circle 4.5px at calc(5% + var(--pc)*0.06 + var(--sw)*0.03) calc(112% - var(--pc)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.45) 30%,transparent 100%),radial-gradient(circle 4.5px at calc(45% + var(--pc)*-0.1 + var(--sw)*0.04) calc(103% - var(--pc)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.45) 30%,transparent 100%),radial-gradient(circle 4.5px at calc(70% + var(--pc)*0.08 + var(--sw)*0.05) calc(94% - var(--pc)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.45) 30%,transparent 100%),radial-gradient(circle 4.5px at calc(94% + var(--pc)*-0.06 + var(--sw)*0.06) calc(85% - var(--pc)*1.3),rgba(255,255,240,1) 0,rgba(255,255,240,0.45) 30%,transparent 100%),linear-gradient(90deg,rgba(8,12,26,.25),transparent 60%),url(/assets/theme/theme_img_mist.webp) 72% center/cover no-repeat;animation:skpa 14s linear infinite,skpb 21s linear infinite,skpc 10s linear infinite,sksw 5s ease-in-out infinite alternate}
}
html[data-card-theme] .mya-side{background:var(--ct-bg)!important;border-right-color:var(--ct-bd)!important}
html[data-card-theme] :is(.msn-strip,.fsh2,.aqx,.lbx,.msn-box,.msn-hero){border-style:solid}
/* หน้าร้าน */
 /* [15 ต.ค. เฟส 2] กรอบเหรียญแรงค์ (การ์ดโทเคน + บัญชีของฉัน) — วงแหวนเป็นพื้นหลัง conic ของรูปเหรียญเอง หมุนด้วย @property (GPU เบา) */
@property --fra{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes frSpin{to{--fra:360deg}}
/* [15 ต.ค.] รูปโปรไฟล์ (อวาตาร์) + กรอบจากร้าน + เหรียญแรงค์มุมล่าง — ใช้ทุกจุด (หัวเว็บ/บัญชีของฉัน/กระดานอันดับ/ร้าน) */
.pav{--s:40px;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;flex:none;vertical-align:middle;box-sizing:border-box}
.pav>.in{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#f6d27a,#c8963f);color:#241a08;font-weight:800;font-size:calc(var(--s) * .38);line-height:1}
.pav>.in img{width:100%;height:100%;object-fit:cover;display:block}
.pav[data-fr]{padding:max(2px,calc(var(--s) * .075));animation:frSpin var(--frs,5s) linear infinite}
.pav[data-fr=gold]{background:conic-gradient(from var(--fra),#fff4c9,#e9b949,#8a5a12,#f6d27a,#fff4c9);box-shadow:0 0 calc(var(--s) * .22) rgba(233,185,73,.6)}
.pav[data-fr=rainbow]{--frs:3.5s;background:conic-gradient(from var(--fra),#ff4d4d,#ffb84d,#fff04d,#4dff88,#4dd2ff,#9b6dff,#ff4dd8,#ff4d4d);box-shadow:0 0 calc(var(--s) * .22) rgba(155,109,255,.5)}
.pav[data-fr=fire]{--frs:2.2s;background:conic-gradient(from var(--fra),#ff3d00,#ffb300,#ff6d00,#ffd54f,#ff1744,#ff3d00);box-shadow:0 0 calc(var(--s) * .28) rgba(255,109,0,.7)}
.pav[data-fr=pumpkin]{--frs:4s;background:conic-gradient(from var(--fra),#f97316,#fbbf24,#8b5cf6,#f97316,#2b1042,#f97316);box-shadow:0 0 calc(var(--s) * .22) rgba(249,115,22,.6)}
.pav[data-fr]::after{position:absolute;z-index:3;line-height:1;pointer-events:none;font-size:calc(var(--s) * .36);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.pav[data-fr=gold]::after{content:'👑';top:calc(var(--s) * -.3);left:50%;transform:translateX(-50%) rotate(-8deg)}
.pav[data-fr=rainbow]::after{content:'✨';top:calc(var(--s) * -.12);right:calc(var(--s) * -.12)}
.pav[data-fr=fire]::after{content:'🔥';top:calc(var(--s) * -.26);left:50%;transform:translateX(-50%)}
.pav[data-fr=pumpkin]::after{content:'🎃';bottom:calc(var(--s) * -.1);left:calc(var(--s) * -.14)}
/* [17 ต.ค.] กรอบเกล็ดมังกร (รางวัลศึกล่ามังกร) — วงแหวนเพลิงแดงทอง + หัวมังกรโผล่เหนือรูป (ภาพเล็ก 17KB ในระบบเก็บไฟล์ในเครื่องลูกค้า) */
.pav[data-fr=dragon]{--frs:3s;background:conic-gradient(from var(--fra),#5c0f0f,#ff6d2e,#ffd36b,#b5261a,#2a0a0a,#ff6d2e,#5c0f0f);box-shadow:0 0 calc(var(--s) * .28) rgba(255,90,30,.7)}
.pav[data-fr=dragon]::after{content:'';width:calc(var(--s) * .62);height:calc(var(--s) * .62);top:calc(var(--s) * -.44);left:50%;transform:translateX(-50%);background:url(/assets/dragon/frame_dragon.webp) center bottom/contain no-repeat}
/* [17 ต.ค. user "ได้ดาบจากศึกมังกร ให้ดาบขึ้นข้างแรงค์ ทุกที่ในโปรไฟล์"] ดาบปราบมังกรมุมซ้ายล่าง (คู่กับเหรียญแรงค์มุมขวาล่าง) */
.pav .sw{position:absolute;z-index:4;left:92%;right:auto;bottom:-12%;width:42%;height:42%;object-fit:contain;cursor:pointer;filter:drop-shadow(0 0 3px rgba(255,200,80,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.5));animation:pavSw 2.8s ease-in-out infinite}
@keyframes pavSw{0%,100%{filter:drop-shadow(0 0 2px rgba(255,200,80,.7)) drop-shadow(0 2px 3px rgba(0,0,0,.5))}50%{filter:drop-shadow(0 0 6px rgba(255,214,107,1)) drop-shadow(0 2px 3px rgba(0,0,0,.5))}}
html[data-fxq="0"] .pav .sw{animation:none}
.pav.has-sw{margin-right:calc(var(--s) * .36)} /* เว้นที่ให้ดาบทางขวาเหรียญแรงค์ ไม่ทับชื่อ */
.dash-profile-icon-btn .pav.has-sw,.expiry-countdown-icon-badge .pav.has-sw{margin-right:0}
.pav .rk{position:absolute;z-index:4;right:-10%;bottom:-10%;width:44%;height:44%;object-fit:contain;border-radius:50%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));cursor:pointer}
/* [16 ต.ค.] ระดับเอฟเฟกต์อัตโนมัติ (FXQ) — 1 สมดุล: กรอบหมุนอย่างเดียว (ตัดเรืองแสงกะพริบที่ต้องวาดเงาใหม่ทุกเฟรม) · 0 ประหยัด: ภาพนิ่งทั้งหมด */
html[data-fxq="1"] .pav[data-fr]{animation:frSpin var(--frs,5s) linear infinite}
html[data-fxq="1"] .pav[data-fr]::before{animation:frTwinkle 2.8s ease-in-out infinite}
html[data-fxq="0"] .pav[data-fr],html[data-fxq="0"] .pav[data-fr]::before,html[data-fxq="0"] .pav[data-fr]::after{animation:none!important}
html[data-fxq="0"] .rank-badge-bubbles,html[data-fxq="0"] .rank-badge-shine{display:none!important}
html[data-fxq="0"] .promo-fab-icon,html[data-fxq="0"] .promo-fab-dot::after,html[data-fxq="0"] .fab-chat-avatar::before,html[data-fxq="0"] .pet-fish,html[data-fxq="0"] .pet-fish *,html[data-fxq="0"] .pet-esc,html[data-fxq="0"] .pet-tr{animation:none!important}
/* [15 ต.ค. user "กรอบให้มีแสงประกาย ทุกอันที่ซื้อ"] ประกาย 3 ชั้น (เฉพาะ transform/opacity → GPU เบา):
   (1) แสงเรืองรอบกรอบเต้นเป็นจังหวะ (2) ดาวระยิบรอบวง หมุนช้าๆ (3) แสงวาบกวาดผ่านรูปทุก ~4 วิ */
.pav[data-fr=gold]{--frg:rgba(255,214,102,.85);--frd:#fff6c9}
.pav[data-fr=rainbow]{--frg:rgba(170,120,255,.8);--frd:#ffffff}
.pav[data-fr=fire]{--frg:rgba(255,120,20,.9);--frd:#ffe08a}
.pav[data-fr=pumpkin]{--frg:rgba(249,115,22,.85);--frd:#ffd29a}
.pav[data-fr=dragon]{--frg:rgba(255,90,30,.9);--frd:#ffd36b}
/* [19 ต.ค.] กรอบคลื่นนักตกปลา (รางวัลตกปลาครบ 30 ตัว ไม่มีขาย) — วงแหวนคลื่นน้ำทะเลคราม+ทอง + ปลาทองว่ายเกาะขอบล่างขวา */
.pav[data-fr=angler]{--frs:4s;--frg:rgba(45,212,191,.85);--frd:#e6fffb;background:conic-gradient(from var(--fra),#0e7490,#2dd4bf,#f6d27a,#0ea5e9,#134e4a,#5eead4,#f6d27a,#0e7490);box-shadow:0 0 calc(var(--s) * .26) rgba(45,212,191,.6)}
.pav[data-fr=angler]::after{content:'';width:calc(var(--s) * .56);height:calc(var(--s) * .42);bottom:calc(var(--s) * -.14);right:calc(var(--s) * -.26);background:url(/assets/fish/ev_lucky.webp) center/contain no-repeat;transform:rotate(-12deg);animation:pavFishBob 2.6s ease-in-out infinite}
@keyframes pavFishBob{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-4deg) translateY(calc(var(--s) * -.05))}}
html[data-fxq="0"] .pav[data-fr=angler]::after{animation:none}
/* [26 ต.ค.] กรอบผู้บุกเบิก (รางวัลภารกิจ 7 วันแรก ไม่มีขาย) — วงแหวนมรกต-มิ้นต์-ทอง + ดาวทองกะพริบมุมขวาบน */
.pav[data-fr=starter]{--frs:5s;--frg:rgba(52,211,153,.85);--frd:#fff7d1;background:conic-gradient(from var(--fra),#047857,#34d399,#fff7d1,#f6d27a,#10b981,#a7f3d0,#f6d27a,#047857);box-shadow:0 0 calc(var(--s) * .24) rgba(52,211,153,.55)}
.pav[data-fr=starter]::after{content:'';width:calc(var(--s) * .3);height:calc(var(--s) * .3);top:calc(var(--s) * -.1);right:calc(var(--s) * -.08);background:linear-gradient(135deg,#fff7d1,#f6d27a 55%,#c9922f);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 0 4px rgba(246,210,122,.9));animation:pavStarTw 2.2s ease-in-out infinite}
@keyframes pavStarTw{0%,100%{transform:scale(.88) rotate(-8deg);opacity:.85}50%{transform:scale(1.08) rotate(8deg);opacity:1}}
html[data-fxq="0"] .pav[data-fr=starter]::after{animation:none}
/* ฉายานักตกปลา (ข้างฉายาในการ์ดโทเคน) */
#tokenBalanceSection .tok-ft{display:inline-flex;align-items:center;gap:.25rem;margin-left:.4rem;padding:.08rem .5rem .08rem .35rem;border-radius:999px;vertical-align:middle;font-size:.68rem;font-weight:800;letter-spacing:.02em;text-transform:none;color:#062a26;
  background:linear-gradient(135deg,#a7f3d0,#2dd4bf 45%,#f6d27a);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 2px 8px -2px rgba(45,212,191,.7);white-space:nowrap;cursor:pointer}
#tokenBalanceSection .tok-ft svg{width:12px;height:12px;flex:none}
#tokenBalanceSection .tok-ft[data-k=seaking]{background:linear-gradient(135deg,#fff4c9,#f6d27a 40%,#2dd4bf);color:#2a1a02}
/* เส้นทางนักตกปลา (การ์ดตกปลา) */
.fsh2-mile{grid-column:1 / -1;display:flex;align-items:center;gap:.55rem;font-size:.74rem;color:#d1fae5;margin-top:.15rem}
.fsh2-mile .bar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;min-width:60px}
.fsh2-mile .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2dd4bf,#f6d27a)}
.fsh2-mile b{color:#fde68a}
.fsh2-mile{cursor:pointer}.fsh2-mile .all{flex:none;padding:.15rem .55rem;border-radius:999px;border:1px solid rgba(246,210,122,.55);color:#fde68a;font-weight:700;font-size:.7rem}
.fsh2-mile:hover .all{background:rgba(246,210,122,.15)}
/* [19 ต.ค. user "จะแจ้งของรางวัลลูกค้าไว้ตรงไหน"] หน้าต่างเส้นทางนักตกปลา — รางวัลทุกขั้น ได้แล้ว/ขั้นถัดไป/ยังไม่ถึง */
.fml-box{max-width:480px}
.fml-sum{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--ink-muted)}
.fml-sum b{color:var(--ink);font-size:1.05rem}.fml-sum .bar{flex:1;height:7px;border-radius:99px;background:var(--line);overflow:hidden}.fml-sum .bar i{display:block;height:100%;background:linear-gradient(90deg,#14b8a6,#f6d27a)}
.fml-list{max-height:min(60vh,520px);overflow:auto;padding:.6rem .8rem .9rem;display:flex;flex-direction:column;gap:.4rem}
.fml-it{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:14px;border:1px solid var(--line);background:var(--paper-raised)}
.fml-it .ic{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#0f3d36,#145647);color:#f6d27a}
.fml-it .ic img{width:100%;height:100%;object-fit:contain;border-radius:10px}.fml-it .ic svg{width:24px;height:24px}
.fml-it .tx{flex:1;min-width:0}.fml-it .tx small{display:block;font-size:.7rem;color:var(--ink-muted)}.fml-it .tx b{display:block;font-size:.86rem;line-height:1.3}
.fml-it .st{font-size:.72rem;font-weight:800;white-space:nowrap;color:var(--ink-muted)}
.fml-it.got{opacity:.78}.fml-it.got .st{color:#16a34a}
.fml-it.nx{border-color:#d9a441;box-shadow:0 0 0 2px rgba(217,164,65,.25)}.fml-it.nx .st{color:#b07a2a}
.fml-it.lock .ic{filter:grayscale(.6) brightness(.85)}
@media (max-width:640px){.fsh2-mile{flex-wrap:wrap;gap:.3rem .55rem}.fsh2-mile .bar{order:3;flex-basis:100%}}
.pav[data-fr]{animation:frSpin var(--frs,5s) linear infinite,frGlow 2.4s ease-in-out infinite alternate}
@keyframes frGlow{from{box-shadow:0 0 calc(var(--s) * .12) var(--frg)}to{box-shadow:0 0 calc(var(--s) * .34) var(--frg),0 0 calc(var(--s) * .08) #fff}}
.pav[data-fr]::before{content:'';position:absolute;inset:-22%;z-index:2;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 12% 30%,var(--frd) 0 1.6px,transparent 2.6px),radial-gradient(circle at 88% 22%,var(--frd) 0 1.3px,transparent 2.3px),
    radial-gradient(circle at 92% 70%,var(--frd) 0 1.8px,transparent 2.8px),radial-gradient(circle at 20% 88%,var(--frd) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 55% 4%,var(--frd) 0 1.1px,transparent 2px),radial-gradient(circle at 50% 98%,var(--frd) 0 1.4px,transparent 2.4px);
  filter:drop-shadow(0 0 2px var(--frd));animation:frTwinkle 2.8s ease-in-out infinite,frOrbit 14s linear infinite}
@keyframes frTwinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes frOrbit{to{rotate:360deg}}
.pav[data-fr]>.in{position:relative}
.pav[data-fr]>.in::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.1) 56%,transparent 62%);transform:translateX(-120%);animation:frShine 4.2s ease-in-out infinite}
@keyframes frShine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.pav[data-fr]::before,.pav[data-fr]>.in::after{animation:none}.pav[data-fr]>.in::after{display:none}}
@media (prefers-reduced-motion:reduce){.pav[data-fr]{animation:none}}
/* [26 ต.ค. รอบ 3 user เลือก "ไฟ B (นีออนไฟ+ประกายลอย) / ทอง A (เรียบหรูขัดเงา)"] CSS ล้วน */
@keyframes frEmber{from{background-position-y:0}to{background-position-y:-100%}}
.pav[data-fr=fire]>.in,.pav[data-fr=gold]>.in{z-index:2}
.pav[data-fr=fire]{--frs:3s;--frg:rgba(255,80,0,.95);--frd:#ffd54f;padding:max(2px,calc(var(--s) * .07));background:conic-gradient(from var(--fra),#ff9a00,#ff4d00,#ffb300,#ff3d00,#ff9a00)}
.pav[data-fr=fire]>.in{box-shadow:0 0 0 max(1px,calc(var(--s) * .035)) #3b0d00,inset 0 0 calc(var(--s) * .1) rgba(60,10,0,.45)}
.pav[data-fr=fire]::after{content:'';inset:calc(var(--s) * -.075);top:calc(var(--s) * -.075);left:calc(var(--s) * -.075);right:calc(var(--s) * -.075);bottom:calc(var(--s) * -.075);width:auto;height:auto;transform:none;z-index:3;font-size:0;border-radius:50%;
  border:max(1px,calc(var(--s) * .022)) solid #ffd54f;box-shadow:0 0 calc(var(--s) * .12) #ffb300,inset 0 0 calc(var(--s) * .06) rgba(255,179,0,.6);animation:none}
.pav[data-fr=fire]::before{inset:-20%;z-index:4;border-radius:50%;
  background:radial-gradient(circle,#ffe08a 0 1.3px,transparent 2.2px) 12% 8%/38% 46%,radial-gradient(circle,#ffb300 0 1.6px,transparent 2.6px) 62% 30%/44% 52%,radial-gradient(circle,#fff3a6 0 1.1px,transparent 2px) 85% 70%/33% 41%,radial-gradient(circle,#ff7a00 0 1.5px,transparent 2.5px) 30% 85%/40% 49%;
  background-repeat:repeat;
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 74%,#000 80%,transparent 100%);mask-image:radial-gradient(circle closest-side,transparent 74%,#000 80%,transparent 100%);
  filter:drop-shadow(0 0 2px #ff7a00);animation:frEmber 2.6s linear infinite}
.pav[data-fr=gold]{--frs:8s;--frg:rgba(255,205,80,.7);--frd:#fffbe0;padding:max(2.5px,calc(var(--s) * .085));background:conic-gradient(from var(--fra),#fffbe0,#f5c842 12%,#a8690d 24%,#ffe9a0 36%,#fff 42%,#e9b949 52%,#7a4a08 66%,#f6d27a 80%,#fffbe0)}
.pav[data-fr=gold]>.in{box-shadow:0 0 0 max(1px,calc(var(--s) * .022)) #5a3606,inset 0 0 calc(var(--s) * .12) rgba(0,0,0,.35)}
.pav[data-fr=gold]::before{inset:0;z-index:3;border-radius:50%;background:none;-webkit-mask-image:none;mask-image:none;filter:none;
  box-shadow:0 0 0 max(1px,calc(var(--s) * .02)) #fff2b8,0 0 0 max(2px,calc(var(--s) * .04)) #6b4208;animation:none}
.pav[data-fr=gold]::after{content:none}
@media (prefers-reduced-motion:reduce){.pav[data-fr=fire]::before{animation:none}}
/* [26 ต.ค. user "เพิ่มกรอบรูปโปรไฟล์ขายอีก 2 อย่าง"] กรอบคริสตัลน้ำแข็ง + กรอบสายฟ้า (CSS ล้วน) */
@keyframes frCrack{0%{opacity:1}12%{opacity:.25}20%{opacity:1}55%{opacity:.5}62%{opacity:1}100%{opacity:1}}
.pav[data-fr=ice]>.in,.pav[data-fr=lightning]>.in{z-index:2}
.pav[data-fr=ice]{--frs:6s;--frg:rgba(125,211,252,.85);--frd:#ffffff;padding:max(2.5px,calc(var(--s) * .085));background:conic-gradient(from var(--fra),#f0fdff,#7dd3fc 14%,#0284c7 28%,#e0f9ff 42%,#fff 48%,#38bdf8 60%,#075985 74%,#a5f3fc 88%,#f0fdff)}
.pav[data-fr=ice]>.in{box-shadow:0 0 0 max(1px,calc(var(--s) * .02)) #0c4a6e,inset 0 0 calc(var(--s) * .12) rgba(12,74,110,.4)}
.pav[data-fr=ice]::before{inset:-17%;z-index:1;border-radius:0;
  background:repeating-conic-gradient(#ffffff 0 1.5deg,#a5f3fc 1.5deg 4.5deg,transparent 4.5deg 20deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 70%,#000 76%,rgba(0,0,0,.75) 88%,transparent 100%);mask-image:radial-gradient(circle closest-side,transparent 70%,#000 76%,rgba(0,0,0,.75) 88%,transparent 100%);
  filter:drop-shadow(0 0 calc(var(--s) * .04) #7dd3fc);animation:frTwinkle 3s ease-in-out infinite,frOrbit 70s linear infinite}
.pav[data-fr=ice]::after{content:'';width:calc(var(--s) * .36);height:calc(var(--s) * .36);top:calc(var(--s) * -.16);right:calc(var(--s) * -.12);left:auto;transform:none;font-size:0;z-index:4;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%23ffffff' stroke-width='4' stroke-linecap='round' fill='none'%3E%3Cpath d='M32 6v52M9.5 19l45 26M9.5 45l45-26'/%3E%3Cpath d='M26 10l6 6 6-6M26 54l6-6 6 6M6 26l8 2-2 8M58 38l-8-2 2-8M6 38l8-2-2-8M58 26l-8 2 2 8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 calc(var(--s) * .05) #38bdf8);animation:frTwinkle 2.6s ease-in-out infinite}
.pav[data-fr=lightning]{--frs:1.8s;--frg:rgba(96,165,250,.95);--frd:#e0f2fe;padding:max(2px,calc(var(--s) * .075));background:conic-gradient(from var(--fra),#1e1b4b,#818cf8 10%,#e0f2fe 16%,#3b82f6 26%,#1e1b4b 40%,#c4b5fd 54%,#ffffff 60%,#60a5fa 70%,#1e1b4b 86%,#818cf8 94%,#1e1b4b)}
.pav[data-fr=lightning]>.in{box-shadow:0 0 0 max(1px,calc(var(--s) * .025)) #0f172a,inset 0 0 calc(var(--s) * .1) rgba(30,27,75,.5)}
.pav[data-fr=lightning]::before{inset:-21%;z-index:1;border-radius:0;
  background:repeating-conic-gradient(#e0f2fe 0 1deg,transparent 1deg 17deg),repeating-conic-gradient(from 9deg,#a5b4fc 0 .8deg,transparent .8deg 29deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 66%,#000 74%,rgba(0,0,0,.6) 86%,transparent 100%);mask-image:radial-gradient(circle closest-side,transparent 66%,#000 74%,rgba(0,0,0,.6) 86%,transparent 100%);
  filter:drop-shadow(0 0 calc(var(--s) * .05) #60a5fa);animation:frCrack .9s steps(1,end) infinite,frOrbit 7s linear infinite}
.pav[data-fr=lightning]::after{content:'';width:calc(var(--s) * .34);height:calc(var(--s) * .46);top:calc(var(--s) * -.2);right:calc(var(--s) * -.1);left:auto;transform:rotate(12deg);font-size:0;z-index:4;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%2360a5fa'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 2L8 36h15l-6 26 25-38H28z' fill='url(%23g)' stroke='%231e3a8a' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 calc(var(--s) * .06) #60a5fa);animation:frCrack 1.3s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){.pav[data-fr=ice]::before,.pav[data-fr=ice]::after,.pav[data-fr=lightning]::before,.pav[data-fr=lightning]::after{animation:none}}
/* [26 ต.ค. user เลือกแนว "D กาแล็กซี่โคจร" + ขอแนวเดียวกันอีก 1] กรอบกาแล็กซี่ + กรอบดาวเสาร์ (CSS ล้วน) */
@property --gx{syntax:'<percentage>';inherits:false;initial-value:97%}
@property --gy{syntax:'<percentage>';inherits:false;initial-value:50%}
@keyframes frOrb{0%{--gx:97%;--gy:50%}8.33%{--gx:90.7%;--gy:73.5%}16.67%{--gx:73.5%;--gy:90.7%}25%{--gx:50%;--gy:97%}33.33%{--gx:26.5%;--gy:90.7%}41.67%{--gx:9.3%;--gy:73.5%}50%{--gx:3%;--gy:50%}58.33%{--gx:9.3%;--gy:26.5%}66.67%{--gx:26.5%;--gy:9.3%}75%{--gx:50%;--gy:3%}83.33%{--gx:73.5%;--gy:9.3%}91.67%{--gx:90.7%;--gy:26.5%}100%{--gx:97%;--gy:50%}}
.pav[data-fr=galaxy]>.in,.pav[data-fr=saturn]>.in{z-index:2}
.pav[data-fr=galaxy]{--frs:9s;--frg:rgba(124,58,237,.85);--frd:#e9d5ff;padding:max(2.5px,calc(var(--s) * .085));background:conic-gradient(from var(--fra),#1e1b4b,#7c3aed 16%,#22d3ee 34%,#1e1b4b 50%,#c026d3 68%,#6366f1 84%,#1e1b4b)}
.pav[data-fr=galaxy]>.in{box-shadow:0 0 0 max(1px,calc(var(--s) * .022)) #0f0a2e,inset 0 0 calc(var(--s) * .12) rgba(30,27,75,.5)}
.pav[data-fr=galaxy]::before{inset:-30%;z-index:1;border-radius:50%;
  background:radial-gradient(circle at 9% 28%,#fff 0 1px,transparent 1.9px),radial-gradient(circle at 86% 20%,#c4b5fd 0 1.2px,transparent 2.1px),radial-gradient(circle at 94% 66%,#fff 0 0.9px,transparent 1.8px),radial-gradient(circle at 18% 82%,#67e8f9 0 1.2px,transparent 2.1px),radial-gradient(circle at 60% 6%,#fff 0 1px,transparent 1.9px),radial-gradient(circle at 46% 96%,#e9d5ff 0 1px,transparent 1.9px),radial-gradient(circle at 4% 52%,#fff 0 0.8px,transparent 1.7000000000000002px),radial-gradient(circle at 74% 90%,#fff 0 1px,transparent 1.9px),radial-gradient(circle at 30% 10%,#a5f3fc 0 0.9px,transparent 1.8px);
  filter:drop-shadow(0 0 2px #a78bfa);animation:frTwinkle 2.6s ease-in-out infinite}
.pav[data-fr=galaxy]::after{content:'';font-size:0;width:auto;height:auto;inset:auto;top:50%;left:50%;right:auto;bottom:auto;width:170%;height:58%;margin:calc(var(--s) * -.29) 0 0 calc(var(--s) * -.85);transform:rotate(-22deg);z-index:1;border-radius:0;
  background:radial-gradient(circle at var(--gx) var(--gy),#fff6c8 0 1.5px,#fbbf24 2.5px,rgba(251,191,36,0) 6.5px),radial-gradient(ellipse closest-side,transparent 92%,rgba(167,139,250,.85) 93% 96%,transparent 97%);
  filter:drop-shadow(0 0 calc(var(--s) * .04) #fbbf24);animation:frSwayG 7s ease-in-out infinite,frOrb 7s linear infinite}
@keyframes frSwayG{0%,100%{transform:rotate(-36deg) scaleY(.85)}50%{transform:rotate(-8deg) scaleY(1.15)}}
.pav[data-fr=saturn]{--frs:10s;--frg:rgba(244,180,214,.8);--frd:#fff1f6;padding:max(2.5px,calc(var(--s) * .085));background:conic-gradient(from var(--fra),#fff1f6,#f9a8d4 14%,#a78bfa 30%,#fde68a 46%,#fff 52%,#f9a8d4 66%,#8b5cf6 82%,#fff1f6)}
.pav[data-fr=saturn]>.in{box-shadow:0 0 0 max(1px,calc(var(--s) * .022)) #4c1d4f,inset 0 0 calc(var(--s) * .12) rgba(76,29,79,.4)}
.pav[data-fr=saturn]::before,.pav[data-fr=saturn]::after{content:'';font-size:0;inset:auto;top:50%;left:50%;right:auto;bottom:auto;width:176%;height:60%;margin:calc(var(--s) * -.3) 0 0 calc(var(--s) * -.88);transform:rotate(-18deg);border-radius:0;
  background:radial-gradient(circle at var(--gx) var(--gy),#fff 0 1.6px,#ffe4f1 2.6px,rgba(255,200,230,0) 6px),radial-gradient(ellipse closest-side,transparent 70%,rgba(253,230,138,.95) 71% 78%,rgba(249,168,212,.95) 79% 86%,rgba(196,181,253,.9) 87% 92%,transparent 93%);
  filter:drop-shadow(0 0 calc(var(--s) * .04) rgba(249,168,212,.9));opacity:1;animation:frSway 6s ease-in-out infinite,frOrb2 5s linear infinite}
.pav[data-fr=saturn]::before{z-index:1;-webkit-clip-path:inset(0 0 50% 0);clip-path:inset(0 0 50% 0)}
.pav[data-fr=saturn]::after{z-index:3;-webkit-clip-path:inset(50% 0 0 0);clip-path:inset(50% 0 0 0)}
@keyframes frSway{0%,100%{transform:rotate(-26deg) scaleY(.9)}50%{transform:rotate(-10deg) scaleY(1.12)}}
@keyframes frOrb2{0%{--gx:91%;--gy:50%}8.33%{--gx:85.5%;--gy:70.5%}16.67%{--gx:70.5%;--gy:85.5%}25%{--gx:50%;--gy:91%}33.33%{--gx:29.5%;--gy:85.5%}41.67%{--gx:14.5%;--gy:70.5%}50%{--gx:9%;--gy:50%}58.33%{--gx:14.5%;--gy:29.5%}66.67%{--gx:29.5%;--gy:14.5%}75%{--gx:50%;--gy:9%}83.33%{--gx:70.5%;--gy:14.5%}91.67%{--gx:85.5%;--gy:29.5%}100%{--gx:91%;--gy:50%}}
@media (prefers-reduced-motion:reduce){.pav[data-fr=saturn]::before,.pav[data-fr=saturn]::after{animation:none}}
html[data-fxq="0"] .pav[data-fr=saturn]::before,html[data-fxq="0"] .pav[data-fr=saturn]::after{animation:none}
/* โหมดเอฟเฟกต์ปกติ (fxq=1) บังคับ ::before เป็น frTwinkle → ดาวเสาร์ครึ่งหลังไม่ขยับตามครึ่งหน้า (เอียงครึ่งเดียว) / ไฟไม่มีประกายลอย — ใส่ทับให้ถูกตัว */
html[data-fxq="1"] .pav[data-fr=saturn]::before{animation:frSway 6s ease-in-out infinite,frOrb2 5s linear infinite}
html[data-fxq="1"] .pav[data-fr=fire]::before{animation:frEmber 2.6s linear infinite}
html[data-fxq="1"] .pav[data-fr=gold]::before{animation:none}
@media (prefers-reduced-motion:reduce){html[data-fxq="1"] .pav[data-fr=saturn]::before,html[data-fxq="1"] .pav[data-fr=fire]::before{animation:none}}
@media (prefers-reduced-motion:reduce){.pav[data-fr=galaxy]::before,.pav[data-fr=galaxy]::after{animation:none}}
html[data-fxq="0"] .pav[data-fr=galaxy]::before,html[data-fxq="0"] .pav[data-fr=galaxy]::after{animation:none}
.mya-avwrap{flex:none;cursor:pointer;margin:6px 4px 6px 2px}
.expiry-countdown-icon-badge.has-av{background:transparent!important;border-color:transparent!important;padding:0!important;overflow:visible!important;width:84px;height:84px;box-shadow:none!important;margin-top:6px}
.expiry-countdown-icon-badge.has-av > :not(.pav){display:none!important}
.expiry-countdown-icon-badge.has-av::before,.expiry-countdown-icon-badge.has-av::after{display:none!important}
.expiry-countdown-icon-badge.has-av .pav{cursor:pointer;transition:transform .2s}
.expiry-countdown-icon-badge.has-av .pav:hover{transform:scale(1.06)}
.expiry-countdown-icon-badge.has-av .pav .in img{width:100%!important;height:100%!important;object-fit:cover!important;position:static!important;animation:none!important;padding:0!important;filter:none!important;border-radius:0!important;display:block!important;z-index:auto!important}
.expiry-countdown-icon-badge.has-av .pav .sw{position:absolute!important;display:block!important;padding:0!important;object-fit:contain!important;border-radius:0!important;z-index:4!important;width:44%!important;height:44%!important;left:94%;bottom:-13%;right:auto}
.expiry-countdown-icon-badge.has-av .pav .rk{position:absolute!important;display:block!important;padding:0!important;object-fit:contain!important;animation:none!important;z-index:4!important;width:48%!important;height:48%!important;right:-12%;bottom:-12%;filter:drop-shadow(0 0 5px var(--rank-glow-color,rgba(255,255,255,.45))) drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.expiry-countdown-icon-badge.has-av .pav:not([data-fr]){box-shadow:0 0 0 2px rgba(255,255,255,.25),0 0 16px var(--rank-glow-color,rgba(255,255,255,.2))}
.dash-profile-icon-btn .pav{--s:32px}
.lbm-row .nm .pav{margin-right:.4rem}
.shop-it .ic.av{display:grid;place-items:center;padding:.6rem 0 .2rem}
.shop-it.av-free .pr{color:#16a34a}
.shop-it .ic.fr{width:46px;height:46px;border-radius:50%;padding:3px;display:grid;place-items:center;font-size:1.3rem}
.shop-it .ic.fr i{width:100%;height:100%;border-radius:50%;background:var(--paper-raised);display:grid;place-items:center;font-style:normal}
.shop-it .ic.fr.gold{background:conic-gradient(#fff4c9,#e9b949,#8a5a12,#f6d27a,#fff4c9)}.shop-it .ic.fr.rainbow{background:conic-gradient(#ff4d4d,#ffb84d,#fff04d,#4dff88,#4dd2ff,#9b6dff,#ff4dd8,#ff4d4d)}
.shop-it .ic.fr.fire{background:conic-gradient(#ff3d00,#ffb300,#ff6d00,#ffd54f,#ff1744,#ff3d00)}.shop-it .ic.fr.dragon{background:conic-gradient(#5c0f0f,#ff6d2e,#ffd36b,#b5261a,#2a0a0a,#ff6d2e,#5c0f0f)}.shop-it .ic.fr.pumpkin{background:conic-gradient(#f97316,#fbbf24,#8b5cf6,#f97316,#2b1042,#f97316)}
.shop-it .ic.sh{width:100%;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;padding:0 .6rem;font-size:.62rem;font-weight:800;letter-spacing:.1em;color:#fff}
.shop-it .ic.sh span{font-size:1.4rem}
.shop-it .ic.sh.gold{background:radial-gradient(120% 80% at 100% 0%,#7a5512,#3d2a07 45%,#1c1303);border:1.5px solid #e9b949}
.shop-it .ic.sh.ocean{background:radial-gradient(120% 80% at 100% 0%,#0b5d8c,#063654 45%,#021a2e);border:1.5px solid #4cc9f0}
.shop-it .ic.sh.neon{background:radial-gradient(120% 80% at 100% 0%,#3a0f66,#1d0a33 45%,#0a1d3a);border:1.5px solid #ff4fd8}
.shop-it .cnt{font-size:.72rem;font-weight:700;color:var(--ink-muted)}
.shop-link{margin-top:.6rem;border:0;background:none;color:#b07a2a;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;padding:0}
/* [15 ต.ค. user "ร้านค้าหน่วง"] เปิดร้าน → หยุดแอนิเมชันทั้งหมดข้างหลัง (ปลาวิ่ง/เทศกาล/ปุ่มลอย) */
body.ov-open #dashboardView *,body.ov-open #dashboardView *::before,body.ov-open #dashboardView *::after,body.ov-open #promoFab,body.ov-open #promoFab *,body.ov-open #festRibbon,body.ov-open #festMascot{animation-play-state:paused!important}
body.ov-open #festFx{visibility:hidden}
/* [3 พ.ย. user "เปิดหน้าเติมเงิน iPhone ร้อน"] ป๊อปอัพแพ็กเกจ/ชำระเงินอยู่ใน #dashboardView → ov-open ต้องไม่หยุดแอนิเมชันในตัวป๊อปอัพเอง
   + มือถือ: ตัดฉากหลังเบลอ (backdrop-filter เต็มจอ = เครื่องคำนวณเบลอใหม่ทุกเฟรมที่ข้างหลังขยับ) ใช้พื้นทึบเข้มแทน */
body.ov-open #dashboardView .auth-modal-overlay,body.ov-open #dashboardView .auth-modal-overlay *,body.ov-open #dashboardView .auth-modal-overlay *::before,body.ov-open #dashboardView .auth-modal-overlay *::after{animation-play-state:running!important}
@media (pointer:coarse),(max-width:820px){
  .auth-modal-overlay,#myAcct,.mswal-backdrop,.promo-overlay,.rfp-ov,.aqz-ov,.gbx-ov,.cx-ov,.chat-panel{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .auth-modal-overlay,#myAcct{background:rgba(8,18,15,.86)}
  .mswal-backdrop{background:radial-gradient(120% 120% at 50% 0%,rgba(20,36,29,.8),rgba(4,10,7,.9))}
  .rfp-ov{background:rgba(6,12,10,.84)}
  .promo-overlay{background:radial-gradient(ellipse at center,rgba(6,26,20,.9),rgba(0,0,0,.94))}
  .aqz-ov{background:radial-gradient(ellipse at 50% 40%,rgba(31,95,80,.82),rgba(2,14,12,.96) 70%)}
}
/* [15 ต.ค. user "อันดับประจำสัปดาห์ มือถือค้าง"] กรอบรูปในแถวอันดับ = นิ่ง (เดิมทุกแถวหมุน/เรืองแสง/ประกายพร้อมกัน 20-40 วง) · แถวของเรายังเคลื่อนไหว */
.lbm-row:not(.me) .pav,.lbm-row:not(.me) .pav *,.lbm-row:not(.me) .pav::before,.lbm-row:not(.me) .pav::after,.lbm-row:not(.me) .pav *::before,.lbm-row:not(.me) .pav *::after{animation:none!important}
.lbm-row .pav .rk{filter:none!important}
#lbmBody{contain:content}
body.shop-open #dashboardView *,body.shop-open #dashboardView *::before,body.shop-open #dashboardView *::after,body.shop-open #promoFab,body.shop-open #promoFab *,body.shop-open #fabChatBtn *,body.shop-open #festRibbon,body.shop-open #festMascot{animation-play-state:paused!important}
body.shop-open #festFx{visibility:hidden}
/* [15 ต.ค. user "iPhone ยังหน่วง"] มือถือ: ร้านเปิด = ซ่อนทุกอย่างข้างหลัง (เหลือแค่ร้าน + ป๊อปอัพยืนยัน) */

html.shop-open-root:has(body.shop-lite){overflow:hidden;height:100%}
body.shop-lite.shop-open > :not(#sh2Ov):not(#xc2Ov):not(#bagOv):not(#tourRoot):not(#learnOv):not(#nickOv):not(#spOv):not(#petOv):not(script):not(style):not([class*="swal"]){display:none!important}
body.shop-lite.shop-open{position:fixed;inset:0;width:100%;overflow:hidden}
/* [15 ต.ค. user "เลื่อนลงแล้วไปทับดึงจอรีเฟรช"] กล่องที่เลื่อนในร้าน ไม่ส่งแรงลากต่อให้หน้าเว็บ (กันดึงรีเฟรช/เด้งยาง) */
html.shop-open-root,html.shop-open-root body{overscroll-behavior:none}


body.shop-lite .shop-it .ic.rn img{filter:none}
body.shop-lite .shop-it{transition:none}
.shop-it .pav,.shop-it .pav *,.shop-it .pav::before,.shop-it .pav::after,.shop-it .pav *::before,.shop-it .pav *::after{animation-play-state:paused!important}
@media (hover:hover){.shop-it:hover .pav,.shop-it:hover .pav *,.shop-it:hover .pav::before,.shop-it:hover .pav::after,.shop-it:hover .pav *::before,.shop-it:hover .pav *::after{animation-play-state:running!important}}


.shop-pond{flex:none;width:118px;height:70px;border-radius:14px;position:relative;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,rgba(127,214,240,.35),rgba(8,40,60,.85));border:1px solid rgba(255,255,255,.18)}
.shop-pond .pf{position:absolute;left:50%;top:62%;width:62px;height:42px;transform:translate(-50%,-50%);animation:shopPondBob 3s ease-in-out infinite}
.shop-pond .pf img,.shop-pond .pf svg{width:100%;height:100%;object-fit:contain;display:block}
.shop-pond .pf .pet-hat{font-size:calc(var(--hs,13px) * 1.6)}
@keyframes shopPondBob{0%,100%{transform:translate(-50%,-50%) rotate(-3deg)}50%{transform:translate(-50%,-58%) rotate(3deg)}}
.shop-x{margin-left:auto;align-self:flex-start;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:1rem}
.shop-tabs{flex:none;display:flex;gap:.3rem;padding:.6rem .9rem 0;border-bottom:1px solid var(--line);background:var(--paper-raised);overflow-x:auto;scrollbar-width:none}
.shop-tabs{cursor:grab;user-select:none}
.shop-tabs::-webkit-scrollbar{display:none}
.shop-tabs button{flex:none;border:0;background:none;font:inherit;font-size:.86rem;font-weight:700;color:var(--ink-muted);padding:.55rem .8rem;cursor:pointer;position:relative}
.shop-tabs button.on{color:var(--ink)}.shop-tabs button.on::after{content:'';position:absolute;left:.6rem;right:.6rem;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#e6b567,#c8963f)}
html[data-fest]:not([data-fest=""]) .shop-tabs button.on::after{background:linear-gradient(90deg,var(--fz-a),var(--fz-c))}
.shop-body{flex:1;min-height:0;overflow-y:auto;padding:.9rem 1rem 1.1rem}
.shop-it{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:.8rem;border-radius:16px;border:1px solid var(--line);background:var(--paper-raised);transition:transform .15s,box-shadow .15s}
.shop-it:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(0,0,0,.35)}
.shop-it.eq{border-color:#d9a441;box-shadow:0 0 0 3px rgba(217,164,65,.22)}
.shop-it .ic{font-size:2rem;line-height:1.1}
.shop-it .ic.th{width:100%;height:58px;border-radius:12px;font-size:1.3rem;display:grid;place-items:center;background:var(--ct-bg);border:1.5px solid var(--ct-bd);box-shadow:var(--ct-sh)}
.shop-it b{font-size:.9rem}.shop-it p{margin:0;font-size:.74rem;color:var(--ink-muted);line-height:1.45;flex:1}
.shop-it .pr{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:.86rem;color:#b07a2a}
.shop-it .lim{position:absolute;top:.55rem;right:.55rem;font-size:.62rem;font-weight:800;padding:.12rem .45rem;border-radius:999px;color:#fff;background:linear-gradient(90deg,#e11d48,#f97316)}
.shop-it .lim.cpn{background:linear-gradient(90deg,#7c3aed,#db2777);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 2px 10px rgba(124,58,237,.45)}
.shop-it .pr.cpn-pr s{color:var(--ink-muted);font-weight:500;font-size:.72rem;margin-right:.15rem}
.shop-it .pr.cpn-pr{color:#a21caf}
.shop-it .own{position:absolute;top:.55rem;right:.55rem;font-size:.62rem;font-weight:800;padding:.12rem .45rem;border-radius:999px;color:#166534;background:#dcfce7}
.shop-it button{border:0;border-radius:10px;padding:.5rem .6rem;font:inherit;font-size:.8rem;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#fff1c9,#f2c14e 55%,#d29a2e);color:#2a1a04}
.shop-it button.sec{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.shop-it button:disabled{opacity:.5;cursor:not-allowed}
html[data-fest]:not([data-fest=""]) .shop-it button:not(.sec){background:linear-gradient(135deg,#fff6d8,var(--fz-c) 45%,color-mix(in srgb,var(--fz-a) 55%,var(--fz-c)))}
@media (max-width:640px){.shop-pond{width:92px;height:58px}.shop-it{padding:.65rem}}
/* ===== [15 ต.ค. user "ทำเมนูร้านใหม่ + พรีวิวทุกชิ้น"] ร้าน v2: เมนูซ้าย · ตารางกลาง · ห้องลองชุดขวา ===== */

.sv2 .shop-it .vsave{width:100%;font-size:.72rem;font-weight:800;color:#15803d}
/* [15 ต.ค. user "ทำรูปบัตรให้สวย"] บัตร VIP แบบบัตรเครดิตพรีเมียม (CSS ล้วน ไม่มีรูป · ประกายวิ่งเฉพาะตอนชี้) */
.sv2 .shop-it .ic.vcard{position:relative;height:96px;border-radius:12px;overflow:hidden;color:#fff;font-size:1rem;display:block;isolation:isolate}
.ic.vcard.v-black{background:radial-gradient(120% 140% at 100% 0%,#3b2c0c 0%,#141008 45%,#050403 100%);border:1px solid #c99a3e;box-shadow:inset 0 0 0 1px rgba(246,210,122,.15),0 10px 22px -12px rgba(0,0,0,.6)}
.ic.vcard.v-silver{background:linear-gradient(135deg,#f8fafc 0%,#cbd5e1 40%,#94a3b8 72%,#e2e8f0 100%);border:1px solid #64748b;color:#1e293b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 10px 22px -12px rgba(71,85,105,.7)}
.v-silver .vc-brand,.v-silver .vc-off{color:#1e293b}.v-silver .vc-brand i{background:none;color:#334155;-webkit-text-fill-color:#334155}.v-silver .vc-days,.v-silver .vc-no{color:#334155}
.vrec{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:800;color:#7c2d12;background:linear-gradient(135deg,#fde68a,#f59e0b);padding:.12rem .55rem;border-radius:999px;margin-bottom:.2rem}
.vnote.warn{color:#b45309!important;font-weight:600}
.ic.vcard.v-gold{background:linear-gradient(135deg,#fff1c2 0%,#f2c14e 38%,#c88a24 70%,#f7d98a 100%);border:1px solid #b07a2a;color:#3a2604;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 10px 22px -12px rgba(176,122,42,.7)}
.ic.vcard::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.5;background:repeating-linear-gradient(115deg,transparent 0 9px,rgba(255,255,255,.05) 9px 10px)}
.ic.vcard.v-gold::before{background:repeating-linear-gradient(115deg,transparent 0 9px,rgba(255,255,255,.18) 9px 10px)}
.vc-chip{position:absolute;left:12px;top:36px;width:26px;height:19px;border-radius:4px;background:linear-gradient(135deg,#fbe7a1,#d8a440 50%,#f3d27c);box-shadow:inset 0 0 0 1px rgba(90,60,10,.45)}
.vc-chip::after{content:'';position:absolute;inset:4px 6px;border:1px solid rgba(90,60,10,.4);border-radius:2px}
.vc-crown{position:absolute;right:10px;top:7px;font-size:1.05rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.vc-brand{position:absolute;left:12px;top:9px;font-size:.66rem!important;font-weight:900;letter-spacing:.22em}
.vc-brand i{font-style:normal;background:linear-gradient(90deg,#fff3c4,#f6d27a,#e2b357);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-gold .vc-brand{color:#3a2604}
.v-gold .vc-brand i{background:none;color:#5a3a06;-webkit-text-fill-color:#5a3a06}
.vc-off{position:absolute;left:46px;top:33px;font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:1.25rem;line-height:1;color:#f6d27a;text-shadow:0 1px 6px rgba(246,210,122,.35)}
.v-gold .vc-off{color:#3a2604;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.vc-off small{display:block;font-size:.5rem;letter-spacing:.25em;opacity:.8;margin-top:2px}
.vc-days{position:absolute;right:12px;bottom:8px;font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:1.35rem;line-height:1;text-align:right}
.vc-days small{display:block;font-size:.5rem;letter-spacing:.2em;opacity:.75;font-family:inherit}
.vc-no{position:absolute;left:12px;bottom:9px;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;opacity:.7}
.vc-shine{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 47%,rgba(255,255,255,.08) 55%,transparent 62%);transform:translateX(-130%)}
@media (hover:hover){.shop-it:hover .vc-shine{animation:vcShine 1.4s ease-out}}
@keyframes vcShine{to{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){.vc-shine{display:none}}
/* ===== [15 ต.ค.] ทัวร์สอนใช้งาน + ศูนย์การเรียนรู้ ===== */
.tour-root{position:fixed;inset:0;z-index:1000;pointer-events:none}
.tour-dim{position:fixed;background:rgba(5,14,11,.62);pointer-events:auto;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:all .3s ease}
.tour-root.lite .tour-dim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,14,11,.74)}
.tour-hole{position:fixed;border-radius:16px;pointer-events:none;box-shadow:0 0 0 2px #f6d27a,0 0 0 6px rgba(246,210,122,.28),0 0 28px 6px rgba(246,210,122,.35);transition:all .3s ease;animation:tourPulse 1.8s ease-in-out infinite}
@keyframes tourPulse{50%{box-shadow:0 0 0 2px #f6d27a,0 0 0 9px rgba(246,210,122,.18),0 0 36px 10px rgba(246,210,122,.3)}}
.tour-root.lite .tour-hole{animation:none}
.tour-pop{position:fixed;pointer-events:auto;background:var(--paper-raised,#fff);color:var(--ink,#111);border-radius:16px;padding:.9rem 1rem .8rem;box-shadow:0 24px 50px -18px rgba(0,0,0,.6);border:1px solid rgba(246,210,122,.55);transition:top .3s ease,left .3s ease}
.tp-h{display:flex;align-items:flex-start;gap:.5rem}.tp-t{flex:1;font-size:1rem;font-weight:800;line-height:1.35}
.tp-x{border:0;background:none;color:var(--ink-muted);font-size:.95rem;cursor:pointer;padding:0 .1rem}
.tp-b{font-size:.84rem;line-height:1.6;color:var(--ink-muted);margin-top:.35rem}.tp-b b{color:var(--ink)}
.tp-f{display:flex;align-items:center;gap:.45rem;margin-top:.75rem}
.tp-dots{flex:1;display:flex;gap:4px}.tp-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ink) 20%,transparent)}.tp-dots i.on{width:16px;border-radius:4px;background:#d29a2e}
.tp-back{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:.42rem .75rem;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.tp-next{border:0;border-radius:10px;padding:.45rem .9rem;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#fff1c9,#f2c14e 55%,#d29a2e);color:#2a1a04}
.learn-ov{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(6,16,13,.78)}
.learn-box{width:100%;max-width:440px;border-radius:20px;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 30px 70px -25px rgba(0,0,0,.6)}
.lb-h{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;color:#fff;background:radial-gradient(120% 160% at 0% 0%,#2b6b5a 0%,#123f35 45%,#071f1a 100%)}
.lb-h>div{flex:1}.lb-h h3{margin:0;font-size:1.1rem;font-weight:800}.lb-h small{opacity:.8;font-size:.74rem}
.lb-list{display:flex;flex-direction:column;gap:.5rem;padding:.9rem}
.lb-it{display:flex;align-items:center;gap:.7rem;padding:.75rem .8rem;border-radius:14px;border:1px solid var(--line);background:var(--paper-raised);color:var(--ink);font:inherit;text-align:left;cursor:pointer;text-decoration:none}
.lb-it:hover{border-color:#d9a441}
.lb-it .i{font-size:1.5rem;width:2rem;text-align:center}.lb-it .tx{flex:1;min-width:0}.lb-it b{display:block;font-size:.9rem}.lb-it small{display:block;font-size:.74rem;color:var(--ink-muted)}
.lb-it .st{font-size:.74rem;font-weight:800;color:#b07a2a;white-space:nowrap}.lb-it .st.ok{color:#16a34a}
@media (max-width:640px){.learn-ov{align-items:flex-end;padding:0}.learn-box{border-radius:20px 20px 0 0}}
@media (prefers-reduced-motion:reduce){.tour-dim,.tour-hole,.tour-pop{transition:none}.tour-hole{animation:none}}
/* [15 ต.ค.] แคปซูล EXP + แผง EXP */
.sv2 .shop-it .ic.capsule{position:relative;height:96px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(120% 120% at 50% 0%,#2a1650,#0d0820 70%);border:1px solid #7c3aed}
.sv2 .shop-it .ic.capsule.m15{background:radial-gradient(120% 120% at 50% 0%,#0f4c5c,#04161c 70%);border-color:#22d3ee}
.sv2 .shop-it .ic.capsule.m3{background:radial-gradient(120% 120% at 50% 0%,#5c1a0f,#1c0704 70%);border-color:#f97316}
.cp-pill{position:relative;width:96px;height:38px;border-radius:999px;display:flex;overflow:hidden;transform:rotate(-14deg);box-shadow:0 8px 18px -6px rgba(0,0,0,.6),0 0 22px rgba(167,139,250,.45)}
.cp-pill i{flex:1;display:block}.cp-pill .a{background:linear-gradient(180deg,#f5d0fe,#c084fc 45%,#7c3aed)}.cp-pill .b{background:linear-gradient(180deg,#fff,#e5e7eb 50%,#a1a1aa)}
.m15 .cp-pill .a{background:linear-gradient(180deg,#cffafe,#22d3ee 45%,#0e7490)}.m15 .cp-pill{box-shadow:0 8px 18px -6px rgba(0,0,0,.6),0 0 22px rgba(34,211,238,.45)}
.m3 .cp-pill .a{background:linear-gradient(180deg,#fed7aa,#fb923c 45%,#c2410c)}.m3 .cp-pill{box-shadow:0 8px 18px -6px rgba(0,0,0,.6),0 0 26px rgba(251,146,60,.6)}
.cp-pill::after{content:'';position:absolute;left:8px;right:8px;top:5px;height:8px;border-radius:999px;background:rgba(255,255,255,.45)}
.cp-pill b{position:absolute;inset:0;display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-weight:900;font-size:1.05rem!important;color:#1e1033;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.cp-spark{position:absolute;right:18%;top:14%;color:#fde68a;font-size:.9rem;opacity:.85}.cp-spark.s2{left:16%;right:auto;top:auto;bottom:22%;font-size:.65rem}
.cp-lbl{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:.55rem!important;font-weight:900;letter-spacing:.3em;color:rgba(255,255,255,.7)}
.xr{display:flex;justify-content:space-between;font-size:.74rem;padding:.25rem 0;border-bottom:1px dashed var(--line)}.xr em{font-style:normal;color:#7c3aed;font-weight:800}.xr b{font-family:'IBM Plex Mono',monospace;color:#16a34a}.xr.demo b{color:var(--ink-muted)}
.rk-exp-link{margin-left:.4rem;border:0;border-radius:999px;padding:.15rem .6rem;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer;background:linear-gradient(90deg,#c084fc,#7c3aed);color:#fff}
/* [15 ต.ค.] แผงไอเทมที่ใช้งานอยู่ */
@keyframes bstPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ai) 0%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ai) 22%,transparent)}}
.mini-pill{display:flex;width:30px;height:13px;border-radius:99px;overflow:hidden;transform:rotate(-20deg);box-shadow:0 0 10px color-mix(in srgb,var(--ai) 60%,transparent)}
.mini-pill i{flex:1}.mini-pill i:first-child{background:var(--ai)}.mini-pill i:last-child{background:#e5e7eb}
/* [15 ต.ค.] ฉายา */
.nick-box{max-width:420px}
/* [19 ต.ค. user "ป๊อปอัพตั้งฉายาไม่อยู่กลางจอในมือถือ"] มือถือ: กลางจอ (ไม่ชิดล่างแบบป๊อปอัพอื่น) · คีย์บอร์ดขึ้นก็ยังเห็นช่องกรอก (สูงไม่เกินจอที่เหลือ เลื่อนในกล่องได้) */
@media (max-width:640px){#nickOv.learn-ov{align-items:center;padding:.75rem;padding-bottom:max(.75rem,env(safe-area-inset-bottom))}
  #nickOv .learn-box{border-radius:20px;max-height:calc(100dvh - 1.5rem);overflow:auto}}
.nk-h{background:radial-gradient(120% 160% at 0% 0%,#5b3a0f 0%,#2a1a06 50%,#120b02 100%)}
.nk-h small b{color:#f6d27a}
.nk-body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.65rem}
.nk-prev{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:14px;background:linear-gradient(135deg,#0c2a20,#123f35);color:#fff}
.nk-prev small{display:block;font-size:.66rem;opacity:.7}.nk-prev b{display:block;font-size:1.15rem;font-weight:800;color:#ffe08a;word-break:break-all}.nk-prev em{display:block;font-style:normal;font-size:.62rem;opacity:.65;margin-top:.1rem}
.nk-in{position:relative;display:block}
.nk-in input{width:100%;box-sizing:border-box;font:inherit;font-size:1.05rem;font-weight:700;padding:.75rem 3.6rem .75rem .9rem;border-radius:12px;border:2px solid var(--line);background:var(--paper-raised);color:var(--ink);outline:none}
.nk-in input:focus{border-color:#d29a2e;box-shadow:0 0 0 4px rgba(210,154,46,.18)}
.nk-in span{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);font-size:.72rem;color:var(--ink-muted);font-family:'IBM Plex Mono',monospace}
.nk-msg{font-size:.76rem;color:var(--ink-muted);min-height:1.1em}.nk-msg.ok{color:#16a34a;font-weight:700}.nk-msg.bad{color:#dc2626;font-weight:700}.nk-msg.wait{color:#b07a2a}
.nk-cost{font-size:.8rem;padding:.5rem .7rem;border-radius:10px;background:color-mix(in srgb,#d29a2e 10%,var(--paper));border:1px dashed #d29a2e;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.nk-buy{border:0;border-radius:8px;padding:.25rem .6rem;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#fff1c9,#f2c14e 55%,#d29a2e);color:#2a1a04}
.nk-note{margin:0;font-size:.7rem;color:var(--ink-muted);line-height:1.5}
.nk-act{display:flex;gap:.5rem}.nk-act .sp-go{flex:1}
.vx{margin:0 0 .8rem;padding:.7rem .9rem;border-radius:14px;border:1px solid #e2b357;background:color-mix(in srgb,#f6d27a 12%,var(--paper-raised))}
.vx summary{cursor:pointer;font-weight:800;font-size:.86rem}
.vx ul{margin:.5rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;line-height:1.55}
.sv2 .shop-it .vnote{width:100%;font-size:.66rem;color:var(--ink-muted);line-height:1.4}
@keyframes coinPop{40%{transform:scale(1.18);box-shadow:0 0 0 6px rgba(244,197,66,.35)}}
.coin-tip{position:fixed;z-index:100001;max-width:240px;padding:.55rem .75rem;border-radius:12px;background:#1f2a24;color:#fff;font-size:.76rem;line-height:1.45;box-shadow:0 12px 28px -10px rgba(0,0,0,.5);animation:coinTip .25s ease-out}
.coin-tip b{color:#f6d27a}.coin-tip.nb::before{display:none}.coin-tip::before{content:"";position:absolute;top:-6px;left:var(--ax,24px);width:12px;height:12px;background:inherit;transform:rotate(45deg)}
@keyframes coinTip{from{opacity:0;transform:translateY(-4px)}}
.sv2 .shop-it[data-slot="vip"]{border-color:#e2b357;background:linear-gradient(160deg,color-mix(in srgb,#f6d27a 14%,var(--paper-raised)),var(--paper-raised) 60%)}
/* [19 ต.ค. user "เมนูของฉัน → กระเป๋าของฉัน ไว้บนสุด"] */
/* [19 ต.ค. user "ของที่ได้เข้ากระเป๋า ล่าสุดก่อน ทำเป็นรูปไอเทมสวยๆ"] ได้รับล่าสุด */
.shop-it.bag-new{border-color:#f2c14e;box-shadow:0 0 0 2px rgba(242,193,78,.55),0 10px 24px -12px rgba(210,154,46,.7);animation:bagNewGlow 2.4s ease-in-out 3}
.shop-it.bag-new::before{content:attr(data-new);position:absolute;left:8px;top:8px;z-index:3;font-size:.62rem;font-weight:800;letter-spacing:.04em;color:#fff;background:#dc2626;padding:.12rem .45rem;border-radius:999px;box-shadow:0 0 0 2px #fff;pointer-events:none}
@keyframes bagNewGlow{50%{box-shadow:0 0 0 4px rgba(242,193,78,.85),0 14px 30px -10px rgba(210,154,46,.85)}}
@media (prefers-reduced-motion:reduce){.shop-it.bag-new{animation:none}}
@keyframes btRd{50%{box-shadow:0 0 0 4px rgba(234,88,12,.25)}}
/* ปุ่มกระเป๋าลอย (เหนือปุ่มร้านค้า มุมล่างซ้าย) + ป้ายสอนครั้งแรก */
#bagFab{position:fixed;left:1.1rem;bottom:calc(max(.6rem, env(safe-area-inset-bottom, 0px)) + var(--vv-shift, 0px) + 60px);z-index:20;width:48px;height:48px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font:inherit;font-size:.5rem;font-weight:800;line-height:1.05;white-space:nowrap;color:#f6dc97;
  background:radial-gradient(circle at 50% 28%,#3f7a6a 0%,#1f4a3f 55%,#0f2a23 100%);box-shadow:0 10px 22px -8px rgba(0,0,0,.6),inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.18),0 0 0 2px rgba(246,220,151,.55);transform:translateZ(0);transition:transform .15s ease}
#bagFab svg{width:17px;height:17px;margin-top:1px}
#bagFab .bf-lb{margin-top:1px}
#bagFab:hover{transform:translateY(-2px) translateZ(0)}#bagFab:active{transform:scale(.92)}
#bagFab .bf-n{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#dc2626;color:#fff;font:800 .62rem/17px 'IBM Plex Mono',monospace;text-align:center;box-shadow:0 0 0 2px #fff}
#bagFab .bf-d{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:#f97316;box-shadow:0 0 0 2px #fff}
#bagFab.pop{animation:bagPop .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes bagPop{0%{transform:scale(1)}25%{transform:scale(1.28) rotate(-10deg)}50%{transform:scale(.94) rotate(6deg)}75%{transform:scale(1.08) rotate(-3deg)}100%{transform:scale(1)}}
body.shop-open #bagFab,body.shop-open .bag-coach{display:none}
/* [30 ต.ค. user "ทำไอคอนกิจกรรมลอยไว้แบบกระเป๋า ร้านค้า ลูกค้าเข้าง่ายไม่ต้องเลื่อนหา"] ปุ่มลอยเหนือกระเป๋า → หน้าภารกิจ/กิจกรรม · ตัวเลขแดง = มีของพร้อมทำ/รับรางวัล · ไม่มีแอนิเมชันวนลูป (กฎข้อ 63) */
#msnFab{position:fixed;left:1.1rem;bottom:calc(max(.6rem, env(safe-area-inset-bottom, 0px)) + var(--vv-shift, 0px) + 120px);z-index:20;width:48px;height:48px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font:inherit;font-size:.5rem;font-weight:800;line-height:1.05;white-space:nowrap;color:#fff1c9;
  background:radial-gradient(circle at 50% 28%,#4f7fd6 0%,#284a9e 55%,#142858 100%);box-shadow:0 10px 22px -8px rgba(0,0,0,.6),inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.2),0 0 0 2px rgba(246,220,151,.55);transform:translateZ(0);transition:transform .15s ease}
#msnFab[hidden]{display:none}
body:has(#bagFab[hidden]) #msnFab{bottom:calc(max(.6rem, env(safe-area-inset-bottom, 0px)) + var(--vv-shift, 0px) + 60px)}
#msnFab svg{width:17px;height:17px;margin-top:1px}
#msnFab .mf-lb{margin-top:1px}
#msnFab:hover{transform:translateY(-2px) translateZ(0)}#msnFab:active{transform:scale(.92)}
#msnFab .mf-n{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#dc2626;color:#fff;font:800 .62rem/17px 'IBM Plex Mono',monospace;text-align:center;box-shadow:0 0 0 2px #fff}
#msnFab .mf-n[hidden]{display:none}
body.shop-open #msnFab,body.bag2-open #msnFab,body.msn-open #msnFab{display:none}
.bag-coach{position:fixed;z-index:21;width:min(270px,calc(100vw - 90px));background:#163029;color:#fff;border:1px solid rgba(246,220,151,.5);border-radius:14px;padding:.7rem .8rem;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);font-size:.78rem;line-height:1.45;animation:bagIn .3s ease-out}
.bag-coach::before{content:'';position:absolute;left:-7px;bottom:13px;width:12px;height:12px;background:#163029;border-left:1px solid rgba(246,220,151,.5);border-bottom:1px solid rgba(246,220,151,.5);transform:rotate(45deg)}
.bag-coach b{display:block;color:#f6dc97;font-size:.84rem;margin-bottom:.15rem}
.bag-coach .bc-it{display:flex;flex-wrap:wrap;gap:.3rem;margin:.4rem 0}.bag-coach .bc-it span{background:rgba(246,220,151,.14);border:1px solid rgba(246,220,151,.3);border-radius:999px;padding:.05rem .5rem;font-size:.7rem;color:#f6dc97}
.bag-coach .bc-ac{display:flex;gap:.4rem;margin-top:.5rem}
.bag-coach button{border:0;border-radius:9px;padding:.32rem .7rem;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer}
.bag-coach .go{background:linear-gradient(135deg,#fff1c9,#f2c14e 55%,#d29a2e);color:#2a1a04}.bag-coach .ok{background:rgba(255,255,255,.1);color:#fff}
@keyframes bagIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.tok-coach{--tc-a:#ffc24d;--tc-b:#f59e0b;--tc-bg1:#20242c;--tc-bg2:#14171d;position:fixed;z-index:21;width:min(290px,calc(100vw - 24px));color:rgba(240,243,248,.84);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:.8rem .9rem .85rem;background:linear-gradient(160deg,var(--tc-bg1),var(--tc-bg2));box-shadow:0 20px 44px -14px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.78rem;line-height:1.5;animation:bagIn .3s ease-out}
.tok-coach.out{--tc-a:#ff8a8a;--tc-b:#ef4444}
.tok-coach::before{content:'';position:absolute;left:var(--ax,40px);top:-7px;width:12px;height:12px;background:var(--tc-bg1);border-left:1px solid rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.16);transform:rotate(45deg)}
.tok-coach.up::before{top:auto;bottom:-7px;background:var(--tc-bg2);border:0;border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.tok-coach b{display:flex;align-items:center;gap:.45rem;font-size:.86rem;margin-bottom:.2rem;color:var(--tc-a)}
.tok-coach b::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--tc-b);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc-b) 28%,transparent),0 0 10px var(--tc-b)}
.tok-coach .tc-ac{display:flex;gap:.45rem;margin-top:.65rem}
.tok-coach button{border:0;border-radius:10px;padding:.4rem .85rem;font:inherit;font-size:.75rem;font-weight:800;cursor:pointer;transition:transform .15s,filter .15s}
.tok-coach button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.tok-coach .go{background:linear-gradient(135deg,#ffd37a,var(--tc-b));color:#2a1704;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--tc-b) 80%,transparent)}
.tok-coach.out .go{background:linear-gradient(135deg,#ff9aa8,var(--tc-b));color:#2a0610}
.tok-coach .ok{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
body.shop-open .tok-coach{display:none}
@media (prefers-reduced-motion:reduce){.tok-coach{animation:none}}
@media (prefers-reduced-motion:reduce){#bagFab.pop,.bag-coach{animation:none}}
.sv2 .shop-it{cursor:pointer;outline:none}
.sv2 .shop-it:focus-visible{box-shadow:0 0 0 3px rgba(59,130,246,.45)}
.sv2 .shop-it.try{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.22)}
.sv2 .shop-it .tryt{position:absolute;top:.55rem;right:.55rem;z-index:2;font-size:.62rem;font-weight:800;padding:.12rem .45rem;border-radius:999px;color:#fff;background:#3b82f6}
.sv2 .shop-it .lim,.sv2 .shop-it .own{z-index:2}
.sv2 .shop-it .ic.em{height:58px;display:grid;place-items:center;font-size:2rem;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.sv2 .shop-it .ic.th,.sv2 .shop-it .ic.sh{height:58px}
.sv2 .shop-it .ic.rn{height:86px}
.sv2 .shop-it .ft{display:flex;align-items:center;justify-content:space-between;gap:.4rem;flex-wrap:wrap;margin-top:.15rem}
.sv2 .shop-it .ft .pr small{font-weight:600;color:var(--ink-muted);font-size:.7rem}
.sv2 .shop-it .ft .pr.ok{color:#16a34a;font-family:inherit;font-size:.78rem}
.sv2 .shop-it .ft button{padding:.38rem .65rem;font-size:.74rem}
.sv2 .shop-it .ft .cnt{width:100%}
.sv2 .shop-it p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-card{position:relative;height:150px;border-radius:18px;color:#fff;display:flex;align-items:center;gap:.8rem;padding:0 1.6rem;overflow:visible;background:var(--ct-bg);border:1.5px solid var(--ct-bd);box-shadow:var(--ct-sh);contain:layout}
.sp-card.ct-none{--ct-bg:radial-gradient(120% 140% at 0% 0%,#2b6b5a 0%,#123f35 45%,#071f1a 100%);--ct-bd:rgba(255,255,255,.14);--ct-sh:0 16px 34px -18px rgba(0,0,0,.6)}
.sp-av{flex:none}.sp-tx{min-width:0;flex:1}
.sp-tx small{display:block;font-size:.66rem;opacity:.75}.sp-tx b{display:block;font-family:'IBM Plex Mono',monospace;font-size:1.25rem;line-height:1.2}
.sp-tx i{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.15);margin-top:.35rem;overflow:hidden}.sp-tx i em{display:block;height:100%;background:linear-gradient(90deg,#7ee0c3,#f6d27a)}
.sp-card .pet-fish.is-runner,.sp-card .pet-tr.is-runner,.sp-card .pet-esc.is-runner{width:50px;height:40px}
.sp-go{border:0;border-radius:12px;padding:.7rem;font:inherit;font-size:.9rem;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#fff1c9,#f2c14e 55%,#d29a2e);color:#2a1a04;box-shadow:0 8px 18px -10px rgba(210,154,46,.8)}
html[data-fest]:not([data-fest=""]) .sp-go{background:linear-gradient(135deg,#fff6d8,var(--fz-c) 45%,color-mix(in srgb,var(--fz-a) 55%,var(--fz-c)))}
.sp-go:disabled{opacity:.5;cursor:not-allowed}
.sp-clr{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:.45rem;font:inherit;font-size:.78rem;font-weight:700;color:var(--ink);cursor:pointer}
/* แท็บเล็ต: ห้องลองชุดขึ้นบนตาราง */
@media (max-width:1000px){
  .sp-card{height:120px;padding:0 1.3rem}
  .sp-go{flex:1;padding:.6rem}.sp-clr{flex:none;padding:.55rem .8rem}
}
/* มือถือ: เมนูเป็นแถบเลื่อนแนวนอน · ห้องลองชุดย่อ/ขยายได้ */
@media (max-width:640px){
  
  /* [19 ต.ค. user "หัวเมนูร้านเหลือพื้นที่มาก"] มือถือ: หัวร้านแถวเดียว — ชื่อร้าน + ยอด/ปุ่มซื้อโทเคน (เลื่อนข้างได้) + ปิด */
   /* [19 ต.ค. user] มือถือ: ไม่โชว์ VIP บนหัว (ดูได้ในกระเป๋า/หมวด VIP) → ยอดโทเคนเห็นทันที */
  .sp-card{flex:1;height:96px;padding:0 1rem;gap:.55rem}.sp-card .pav{--s:42px!important}
  /* [17 ต.ค. user "กดดูหุ่นห้องออเดอร์ในมือถือ ตัวอย่างไม่โชว์"] ห้องตัวอย่างเคยถูกบีบเหลือกว้าง 0 ในแถวเดียวกับการ์ด → ขึ้นบรรทัดใหม่เต็มกว้าง · ลองของห้องโรบอทอยู่ = ซ่อนการ์ดโทเคนจำลอง ให้ห้องเห็นเต็มๆ */
  .sp-room{flex:1 1 100%;width:100%;margin-top:0}
  .sp-tx b{font-size:1rem}
  .sp-go{flex:1;padding:.6rem}.sp-clr{flex:none;padding:.55rem .8rem}
}
.pet-pick-wrap{grid-column:1 / -1;margin-top:.4rem;padding:.85rem;border-radius:14px;border:1px solid var(--line);background:var(--paper)}
.pet-pick-h b{display:block;font-size:.92rem}.pet-pick-h small{display:block;font-size:.74rem;color:var(--ink-muted);margin-top:.1rem}
.pet-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.45rem;margin-top:.65rem}
.pet-pick button{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem .35rem;border-radius:12px;border:1.5px solid var(--line);background:var(--paper-raised);color:var(--ink);font:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:transform .15s,border-color .15s}
.pet-pick button:hover{transform:translateY(-2px)}
.pet-pick button.on{border-color:#d9a441;box-shadow:0 0 0 3px rgba(217,164,65,.25);background:color-mix(in srgb,#d9a441 10%,var(--paper-raised))}
.pet-pick button .im{width:64px;height:40px;display:grid;place-items:center;font-size:1.3rem}
.pet-pick button .im img,.pet-pick button .im svg{width:100%;height:100%;object-fit:contain}
.pet-pick .empty{grid-column:1 / -1;font-size:.8rem;color:var(--ink-muted)}
.aq-ph img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 5px 7px rgba(15,42,34,.28))}
.aq-ph.aq-lock img{filter:brightness(0) opacity(.55)}
.aq-ph.aq-lock i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1.1rem;color:#9fb6bd}
.aq-ph.aq-metal img{filter:drop-shadow(0 0 8px rgba(255,211,106,.75)) drop-shadow(0 5px 7px rgba(15,42,34,.25))}
.aqx-tank span.got .aq-ph{animation:aqSwim 3s ease-in-out infinite;animation-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.aqx-tank span.got .aq-ph{animation:none}}
@keyframes aqTail{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-6deg) scaleX(.92)}}
.aqm-sp:not(.lock) svg{filter:drop-shadow(0 4px 6px rgba(15,42,34,.18))}
@media (prefers-reduced-motion:reduce){.aq-fish .aq-tail{animation:none}}
.aqm-sp b{display:block;font-size:.72rem;line-height:1.25}.aqm-sp small{font-size:.66rem;color:var(--ink-muted)}
.aqm-sp.lock b{color:var(--ink-muted)}
.aqm-sp.ev{border-color:#d9a441;background:color-mix(in srgb,#d9a441 10%,var(--paper))}
.aqm-sp.ev{padding-top:1.35rem}.aqm-sp.ev.lock{border-style:dashed;background:var(--paper)}
.aqm-sp.ev.live{border:1.5px solid #e2621c;box-shadow:0 0 0 3px rgba(226,98,28,.12)}
.aqm-evtag{position:absolute;top:4px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.58rem;font-weight:700;padding:.08rem .4rem;border-radius:999px;background:rgba(217,164,65,.16);color:#8a5a12;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.aqm-evtag.on{background:linear-gradient(90deg,#e2621c,#f2a541);color:#fff;animation:aqmLive 1.6s ease-in-out infinite}
@keyframes aqmLive{50%{filter:brightness(1.15)}}
.aqm-sp .rr{position:absolute;top:4px;right:6px;font-size:.6rem}
.aqm-sp{cursor:zoom-in;transition:transform .15s,box-shadow .15s}.aqm-sp:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(15,42,34,.35)}
.aqm-sp:focus-visible{outline:2px solid #d9a441;outline-offset:2px}
/* [14 ต.ค.] ดูรูปปลาขนาดใหญ่ */
.aqz-ov{position:fixed;inset:0;z-index:10060;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,rgba(31,95,80,.55),rgba(2,14,12,.92) 70%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.aqz-ov.on{opacity:1}
.aqz-card{position:relative;box-sizing:border-box;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;text-align:center;color:#fff6dc;padding:1.4rem 1.2rem 1.1rem;border-radius:24px;
  background:radial-gradient(120% 90% at 50% 0%,#1d5c4e,#0b2a24 70%) padding-box,linear-gradient(160deg,rgba(246,210,122,.65),rgba(246,210,122,.12) 45%,rgba(246,210,122,.5)) border-box;border:1.5px solid transparent;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);transform:scale(.94);transition:transform .25s cubic-bezier(.2,1.3,.4,1)}
.aqz-ov.on .aqz-card{transform:scale(1)}
.aqz-stage{position:relative;display:grid;place-items:center;min-height:min(46vh,300px);margin:.2rem 0 .6rem;overflow:hidden;border-radius:16px;background:radial-gradient(ellipse at 50% 55%,rgba(126,224,195,.18),transparent 65%)}
.aqz-fish{position:relative;width:min(92%,440px);animation:aqzFloat 3.2s ease-in-out infinite}
.aqz-fish .aq-ph,.aqz-fish svg{width:100%!important;margin:0}
.aqz-fish .aq-ph img{filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.aqz-fish .aq-ph.aq-lock img{filter:brightness(0) opacity(.6)}
.aqz-fish .aq-ph.aq-lock i{font-size:2.6rem}
.aqz-rays{position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg,rgba(255,214,120,.16) 0 9deg,transparent 9deg 22deg);animation:aqzSpin 18s linear infinite;-webkit-mask:radial-gradient(circle,#000 20%,transparent 62%);mask:radial-gradient(circle,#000 20%,transparent 62%)}
.aqz-card.lux .aqz-fish .aq-ph img{filter:drop-shadow(0 0 22px rgba(255,211,106,.65)) drop-shadow(0 14px 18px rgba(0,0,0,.4))}
.aqz-card h3{margin:.35rem 0 .2rem;font-size:1.35rem}
.aqz-card p{margin:0;font-size:.86rem;opacity:.85}
.aqz-card small{display:block;margin-top:.55rem;font-size:.72rem;opacity:.55;font-variant-numeric:tabular-nums}
.aqz-r{display:inline-block;font-size:.72rem;letter-spacing:.12em;padding:.2rem .75rem;border-radius:999px;background:rgba(246,210,122,.14);color:#f6d27a}
.aqz-x{position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);color:#fff;font-size:1rem;cursor:pointer}
.aqz-nav{position:absolute;top:42%;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid rgba(246,210,122,.45);background:rgba(0,0,0,.35);color:#f6d27a;font-size:1.5rem;line-height:1;cursor:pointer}
.aqz-nav.p{left:10px}.aqz-nav.n{right:10px}
.aqz-x:focus-visible,.aqz-nav:focus-visible{outline:2px solid #f6d27a;outline-offset:2px}
@keyframes aqzFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes aqzSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.aqz-fish,.aqz-rays{animation:none}}
.aqm-set{display:flex;align-items:center;gap:.55rem;padding:.55rem .65rem;border-radius:12px;border:1px solid var(--line);margin-top:.45rem;font-size:.8rem}
.aqm-set .bar{flex:1;height:7px;border-radius:9px;background:var(--line);overflow:hidden}.aqm-set .bar i{display:block;height:100%;background:linear-gradient(90deg,#1f8f6b,#d9a441)}
.aqm-h{font-weight:700;font-size:.82rem;margin:.8rem 0 .35rem}
.lbm-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}
.lbm-tabs button{flex:1 1 auto;white-space:nowrap;padding:.4rem .6rem!important;font-size:.76rem!important}
.lbm-tabs button{border:1px solid var(--line);border-radius:10px;padding:.45rem;background:var(--paper);font-family:inherit;font-weight:700;font-size:.8rem;cursor:pointer;color:var(--ink)}
.lbm-tabs button.on{background:#0c2a20;color:#ffe08a;border-color:#d9a441}
.lbm-row{display:flex;align-items:center;gap:.55rem;padding:.42rem .55rem;border-radius:10px;font-size:.82rem}
.lbm-row:nth-child(odd){background:var(--paper)}
.lbm-row.me{outline:2px solid #d9a441;background:color-mix(in srgb,#d9a441 12%,var(--paper))}
.lbm-row .rk{width:28px;text-align:center;font-weight:800}
.lbm-tabs button.rw{position:relative}.lbm-tabs button.rw::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:#f0b84d;box-shadow:0 0 6px rgba(240,184,77,.9)}
.lb-champ{display:flex;gap:.55rem;align-items:center;margin:.1rem 0 .55rem;padding:.5rem .6rem;border-radius:12px;background:color-mix(in srgb,#d9a441 13%,var(--paper));border:1px solid color-mix(in srgb,#d9a441 40%,transparent);font-size:.74rem;line-height:1.5}
.lb-champ img{width:38px;height:38px;object-fit:contain;flex:none;filter:drop-shadow(0 0 4px rgba(255,200,80,.7))}
.pav .cbs{position:absolute;z-index:4;left:92%;bottom:-12%;display:flex;flex-direction:row;align-items:flex-end;pointer-events:none}
.pav .cbs .cb{position:relative;display:block;flex:none;width:calc(var(--s) * .336);height:calc(var(--s) * .336);margin-right:calc(var(--s) * -.048);font-style:normal}
.pav .cbs .cb img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 2px rgba(255,240,190,1)) drop-shadow(0 0 calc(var(--s) * .06) var(--cg)) drop-shadow(0 2px 3px rgba(0,0,0,.5))}
/* [24 ต.ค. user เลือกแบบ E "แฟลชเพชร"] แสงวาบแรง + กากบาทแสงเลนส์แวบที่ขอบบน ไล่ทีละอัน */
.pav .cbs .cb .fl{position:absolute;z-index:3;left:50%;top:-6%;width:120%;height:120%;margin-left:-60%;margin-top:-50%;pointer-events:none;background:radial-gradient(circle,#fff 0 3%,rgba(255,240,190,.9) 5%,transparent 12%),linear-gradient(90deg,transparent 30%,rgba(255,245,210,.95) 50%,transparent 70%) center/100% 6% no-repeat,linear-gradient(0deg,transparent 30%,rgba(255,245,210,.95) 50%,transparent 70%) center/6% 100% no-repeat;filter:drop-shadow(0 0 3px rgba(255,196,64,1));transform:scale(0);opacity:0;animation:cbFlare 3s ease-in-out infinite}
.pav .cbs .cb:nth-child(2) .fl{animation-delay:.75s}.pav .cbs .cb:nth-child(3) .fl{animation-delay:1.5s}.pav .cbs .cb:nth-child(4) .fl{animation-delay:2.25s}
@keyframes cbFlare{0%,70%,100%{transform:scale(0) rotate(0deg);opacity:0}80%{transform:scale(.55) rotate(45deg);opacity:1}90%{transform:scale(.2) rotate(60deg);opacity:.6}}
html[data-fxq="0"] .pav .cbs .cb .fl{display:none}
/* [24 ต.ค. user "เอฟเฟกต์แบบ A เพิ่มเข้าไปอีก อย่าให้ช้า"] ออร่าทอง + ดาวกะพริบ (ขยับแค่ transform/opacity · ไม่มี filter ที่ต้องวาดใหม่ทุกเฟรม) */
.pav .cbs .cb .sp{position:absolute;z-index:3;inset:0;pointer-events:none}
.pav .cbs .cb .sp s{position:absolute;display:block;width:34%;height:34%;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background:radial-gradient(circle,#fff 0 18%,#ffe9a0 36%,#ffc23c 62%,#ffb000 100%);will-change:transform,opacity;transform:scale(0);opacity:0;animation:cbTw 2.8s ease-in-out infinite}
.pav .cbs .cb .sp s:nth-child(1){top:-16%;right:-12%}
.pav .cbs .cb .sp s:nth-child(2){top:30%;left:-20%;width:24%;height:24%;animation-delay:.9s}
.pav .cbs .cb .sp s:nth-child(3){bottom:-14%;right:18%;width:27%;height:27%;animation-delay:1.8s}
.pav .cbs .cb:nth-child(2) .sp s{animation-duration:3.3s}.pav .cbs .cb:nth-child(3) .sp s{animation-duration:2.5s}.pav .cbs .cb:nth-child(4) .sp s{animation-duration:3.6s}
@keyframes cbTw{0%,62%,100%{transform:scale(0) rotate(0deg);opacity:0}72%{transform:scale(1.15) rotate(45deg);opacity:1}82%{transform:scale(.7) rotate(80deg);opacity:.9}92%{transform:scale(0) rotate(110deg);opacity:0}}
html[data-fxq="0"] .pav .cbs .cb .sp{display:none}
.pav .cbs .cb::before{content:"";position:absolute;z-index:0;inset:-22%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,140,.75) 0%,rgba(255,190,60,.35) 45%,transparent 70%);opacity:.6;animation:cbPulse 2.6s ease-in-out infinite;will-change:transform,opacity;pointer-events:none}
@keyframes cbPulse{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:.9;transform:scale(1.04)}}
.pav .cbs .cb-sw{pointer-events:auto;cursor:pointer}
.pav .cbs .cb::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#fff 50%,transparent 60%) no-repeat;background-size:260% 100%;background-position:160% 0;-webkit-mask:var(--cm) center/contain no-repeat;mask:var(--cm) center/contain no-repeat;mix-blend-mode:screen;animation:cbShine 3s ease-in-out infinite}
.pav .cbs .cb:nth-child(2)::before,.pav .cbs .cb:nth-child(2)::after{animation-delay:.5s}.pav .cbs .cb:nth-child(3)::before,.pav .cbs .cb:nth-child(3)::after{animation-delay:1s}
@keyframes cbShine{0%,58%{background-position:160% 0}100%{background-position:-70% 0}}
html[data-fxq="0"] .pav .cbs .cb::before{animation:none;opacity:.45}html[data-fxq="0"] .pav .cbs .cb::after{display:none}
@media (prefers-reduced-motion:reduce){.pav .cbs .cb::before,.pav .cbs .cb::after,.pav .cbs .cb .fl,.pav .cbs .cb .sp s{animation:none}.pav .cbs .cb .fl,.pav .cbs .cb .sp{display:none}.pav .cbs .cb::after{display:none}}
.pav.has-cb{margin-right:calc(var(--s) * .29 * var(--nb, 1))}
.dash-profile-icon-btn .pav.has-cb,.expiry-countdown-icon-badge .pav.has-cb{margin-right:0}
.expiry-countdown-icon-badge.has-av .pav{--rw:calc(var(--s) * .24)}
.expiry-countdown-icon-badge.has-av .pav .cbs{left:calc(50% - var(--nb, 1) * var(--rw) / 2);top:calc(100% + var(--s) * .16);bottom:auto}
.expiry-countdown-icon-badge.has-av .pav .cbs .cb{width:calc(var(--s) * .29);height:calc(var(--s) * .29);margin-right:calc(var(--rw) - var(--s) * .29)}
.expiry-countdown-icon-badge.has-av:has(.pav.has-sw,.pav.has-cb){margin-bottom:calc(84px * .48)}
/* [24 ต.ค. user "ชื่อฉายาดันสัญลักษณ์ลงมา"] การ์ดรวม (#heroCombo): สัญลักษณ์อยู่คอลัมน์ข้อความ ใต้ฉายา/ยอดโทเคน ข้างขอบล่างรูป ไม่ดันการ์ดให้สูงขึ้น */
#heroCombo .expiry-countdown-icon-badge.has-av:has(.pav.has-sw,.pav.has-cb){margin-bottom:0}
#heroCombo .expiry-countdown-icon-badge.has-av .pav .cbs{left:calc(100% + 12px);top:auto;bottom:6px}
/* [25 ต.ค. user "ขยับฉายา จำนวนโทเคน สัญลักษณ์ขึ้นไปอีกนิด ประหยัดพื้นที่ด้านล่าง"] มีสัญลักษณ์ = ยกฉายา+ยอดโทเคนขึ้น (ขยับภาพอย่างเดียว ไม่กินพื้นที่การ์ด) */
#heroCombo #tokenBalanceSection:has(.pav.has-cb) :is(.expiry-countdown-label,#tokenBalanceUnits,#tokenRunway,.hc-topup){transform:translateY(-15px)}
.expiry-countdown-icon-badge.has-av .pav .cbs .cb img{position:relative!important;display:block!important;padding:0!important;object-fit:contain!important;border-radius:0!important;animation:none!important;z-index:1!important;width:100%!important;height:100%!important;filter:drop-shadow(0 0 2px rgba(255,236,170,.9)) drop-shadow(0 0 6px var(--cg)) drop-shadow(0 2px 3px rgba(0,0,0,.5))!important}
.lbm-row .nm .pav.has-cb{margin-right:calc(var(--s) * .29 * var(--nb, 1) + .4rem)}
.lbm-row .nm{padding:2px 0 6px}
.lbm-cb{width:17px;height:17px;object-fit:contain;vertical-align:-3px;margin-left:2px;filter:drop-shadow(0 0 2px rgba(255,200,80,.8))}
.lbm-row .nm.pc-tap{cursor:pointer;border-radius:8px}.lbm-row .nm.pc-tap:hover .lbm-n{text-decoration:underline;text-underline-offset:3px}.lbm-row .nm.pc-tap:active{opacity:.75}
/* [30 ต.ค. user "ทุกเกมเอาโปรไฟล์คนที่ได้อันดับ 1 มาโชว์แบบเกมล่ามังกร"] แถบแชมป์ (ctop) — แชมป์สัปดาห์ที่แล้ว + ผู้นำสัปดาห์นี้ · ประกายเลื่อน 2 รอบแล้วหยุด (ข้อ 63 ไม่วนตลอด) */
/* [31 ต.ค. user "โชว์ชื่ออันดับ 1 ไม่สวย เปลืองพื้นที่ บดบังเลย์เอาต์"] ย่อเป็นป้ายเล็กบรรทัดเดียว (สูง 26px) · ไม่มีแอนิเมชัน · รายละเอียดอยู่ใน title */
.ctop{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:26px;padding:0 10px 0 2px;border-radius:999px;vertical-align:middle;color:#fff3cf;font-size:.7rem;line-height:1;white-space:nowrap;
  background:rgba(20,16,8,.72);border:1px solid rgba(240,200,110,.6);box-shadow:0 2px 8px -4px rgba(0,0,0,.6)}
.ctop[data-pk]{cursor:pointer}
.ctop .cav{width:22px;height:22px;flex:none;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#f5c451,#a8650f);display:grid;place-items:center;font-weight:700;font-size:.66rem;color:#3a2408;box-shadow:0 0 0 1.5px #f0c46a}
.ctop .cav img{width:100%;height:100%;object-fit:cover}
.ctop small{color:#f0c97a;font-weight:700;font-size:.64rem;letter-spacing:.02em}
.ctop b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ctop-slot:empty{display:none}.msn-card .ctop-slot{margin:.45rem 0 .1rem}
.pc-ov{position:fixed;inset:0;z-index:85;background:rgba(6,12,18,.66);display:flex;align-items:center;justify-content:center;padding:1rem;animation:pcFade .18s ease-out}
@keyframes pcFade{from{opacity:0}to{opacity:1}}@keyframes pcPop{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.pc-card{position:relative;width:100%;max-width:360px;max-height:88vh;overflow:auto;border-radius:20px;background:var(--paper-raised);color:var(--ink);border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(0,0,0,.6);animation:pcPop .22s cubic-bezier(.2,.8,.3,1)}
.pc-top{position:relative;height:118px;background:linear-gradient(135deg,#0f2a2a,#13233f);overflow:hidden}
.pc-top .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.pc-top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.45))}
.pc-top .bot{position:absolute;right:50px;bottom:-4px;height:104px;width:auto;z-index:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.pc-x{position:absolute;top:8px;right:8px;z-index:3;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:.95rem;cursor:pointer}
.pc-av{position:relative;z-index:2;margin:-46px 0 0 16px;display:inline-block;border-radius:50%;box-shadow:0 0 0 4px var(--paper-raised)}
.pc-body{padding:.35rem 1.1rem 1.1rem}
.pc-nm{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.35rem;font-size:1.12rem;font-weight:800;line-height:1.25;word-break:break-word}
.pc-nm .bd{font-size:.95rem;letter-spacing:.05em}
.pc-sub{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.3rem;font-size:.76rem;color:var(--ink-muted)}
.pc-rk{display:inline-flex;align-items:center;gap:.3rem;padding:.16rem .5rem .16rem .3rem;border-radius:999px;background:color-mix(in srgb,#d9a441 16%,var(--paper));color:var(--ink);font-weight:700}
.pc-rk img{width:18px;height:18px;object-fit:contain}
.pc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-top:.85rem}
.pc-st{padding:.55rem .3rem;border-radius:12px;background:var(--paper);text-align:center}
.pc-st b{display:block;font-family:'IBM Plex Mono',monospace;font-size:1.05rem;line-height:1.2}
.pc-st small{display:block;font-size:.66rem;color:var(--ink-muted);margin-top:.15rem;line-height:1.3}
.pc-h{font-size:.74rem;font-weight:700;color:var(--ink-muted);margin:.9rem 0 .35rem;letter-spacing:.02em}
.pc-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.pc-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .55rem;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.75rem;font-weight:600}
.pc-room{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:12px;background:var(--paper);font-size:.78rem;line-height:1.4}
.pc-room b{font-weight:700}
.pc-foot{margin-top:.9rem;padding-top:.6rem;border-top:1px dashed var(--line);font-size:.68rem;color:var(--ink-muted);line-height:1.5}
.pc-me{margin-top:.5rem;font-size:.72rem;color:#b07d1a;font-weight:600}
.lbm-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbm-row .sc{font-family:'IBM Plex Mono',monospace;font-weight:700}
@media (max-width:640px){.aqx-tank{grid-template-columns:repeat(6,minmax(0,1fr));gap:.22rem}.lbx-rows{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.msn-evb .ic,.msn-evb::after,.msn-evb .x2,.aqx::before,.aqx-tank span.got svg,.lbx::before,.lbx-crown,.aqx-cta.gold{animation:none}}
/* [14 ต.ค. — user "ตัวหนังสือไม่ค่อยชัด"] หน้าภารกิจ: ตัวอักษรใหญ่ขึ้น เข้มขึ้น คมขึ้น */
#missionsSection{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#missionsSection .msn-sub{font-size:.8rem;color:color-mix(in srgb,var(--ink) 70%,var(--ink-muted));line-height:1.5}
#missionsSection .msn-pill{font-size:.78rem}
#missionsSection .msn-rule{font-size:.78rem;color:var(--ink)}
#missionsSection .bgo-cell .tt{font-size:.8rem;font-weight:700;line-height:1.3}
#missionsSection .bgo-cell .pg{font-size:.74rem;color:var(--ink);opacity:.8;font-weight:600}
#missionsSection .bgo-cell .ic{font-size:1.4rem}
#missionsSection .prd-info{font-size:.88rem;color:var(--ink)}
#missionsSection .prd-crowd-l{font-size:.78rem;color:color-mix(in srgb,var(--ink) 70%,var(--ink-muted))}
#missionsSection .prd-btn b{font-size:1.1rem}
#missionsSection .prd-dot{font-size:.68rem;color:color-mix(in srgb,var(--ink) 70%,var(--ink-muted))}
.msn-rule{position:relative;border:1px solid var(--line);background:var(--paper);color:var(--ink-muted);border-radius:999px;padding:.2rem .65rem;font-size:.72rem;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap}
.msn-rule:hover{border-color:#d9a441;color:#b07a2a}
.msn-rule.new::after{content:'';position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px var(--paper-raised);animation:gbxPulse 1.2s ease-in-out infinite alternate}
.msn-hd-r{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.msn-rules{margin:0;padding-left:1.15rem}.msn-rules li{font-size:.84rem;line-height:1.6;margin:0 0 .45rem}
.msn-rules-note{font-size:.74rem;color:var(--ink-muted);background:var(--paper);border-radius:10px;padding:.55rem .7rem;margin-top:.4rem;line-height:1.55}
.prd-btns{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.prd-btn{border:2px solid var(--line);border-radius:16px;padding:.8rem .5rem;background:var(--paper);font-family:inherit;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:.15rem;transition:transform .15s,border-color .15s}
.prd-btn b{font-size:1rem}.prd-btn span{font-size:1.6rem;line-height:1}
.prd-btn:hover{transform:translateY(-2px)}
.prd-btn.up.sel{border-color:#16a34a;background:color-mix(in srgb,#22c55e 14%,var(--paper));box-shadow:0 8px 18px -10px rgba(22,163,74,.8)}
.prd-btn.down.sel{border-color:#dc2626;background:color-mix(in srgb,#ef4444 12%,var(--paper));box-shadow:0 8px 18px -10px rgba(220,38,38,.8)}
.prd-btn:disabled{cursor:default;transform:none;opacity:.78}.prd-btn.sel:disabled{opacity:1}
.prd-crowd{display:flex;height:8px;border-radius:9px;overflow:hidden;margin:.6rem 0 .2rem;background:var(--line)}.prd-crowd i{display:block;height:100%}
.prd-crowd-l{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-muted)}
.prd-info{margin-top:.6rem;padding:.6rem .75rem;border-radius:12px;background:var(--paper);font-size:.78rem;line-height:1.55}
.prd-info b.up{color:#16a34a}.prd-info b.down{color:#dc2626}
.prd-hist{display:flex;gap:.35rem;margin-top:.7rem;flex-wrap:wrap}
.prd-dot{width:30px;text-align:center;font-size:.6rem;color:var(--ink-muted)}
.prd-dot i{display:grid;place-items:center;width:26px;height:26px;margin:0 auto .15rem;border-radius:50%;font-style:normal;font-size:.72rem;font-weight:800;background:var(--line);color:var(--ink-muted)}
.prd-dot i.w{background:#16a34a;color:#fff}.prd-dot i.l{background:#ef4444;color:#fff}.prd-dot i.p{background:color-mix(in srgb,#d9a441 30%,var(--paper));color:#8a5a12}
.msn-a{border:1px solid var(--line);border-radius:12px;padding:.6rem .75rem;display:flex;flex-direction:column;gap:.3rem}
.msn-a .tt{font-weight:600;font-size:.84rem}.msn-a small{color:var(--ink-muted);font-size:.7rem}
.msn-tier{display:flex;gap:4px}.msn-tier i{flex:1;height:5px;border-radius:9px;background:var(--line)}.msn-tier i.on{background:#d9a441}
.msn-rankbar{position:relative;height:10px;border-radius:99px;background:var(--line);overflow:hidden;flex:1}
.msn-rankbar i{position:absolute;top:0;height:100%}
.msn-legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.7rem;color:var(--ink-muted);margin-top:.4rem}
.msn-legend b{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:.3rem;vertical-align:-1px}
.msn-ov{position:fixed;inset:0;z-index:70;background:rgba(10,20,18,.6);display:flex;align-items:center;justify-content:center;padding:1rem}
/* [30 ต.ค.] ภารกิจรายวันแบบสุ่ม: เลขข้อแทนไอคอน · ป้าย "ไปทำ" · กระดานภารกิจ */
.msn-ic.msn-num{font-weight:700;font-size:.85rem;color:#8a5a12;background:color-mix(in srgb,#d9a441 16%,var(--paper))}
.msn-gol{flex:none;font-size:.72rem;font-weight:700;color:#0b6b4f;padding:.2rem .6rem;border-radius:999px;border:1px solid color-mix(in srgb,#0b6b4f 40%,transparent);margin-right:.35rem}
.msn-modal.msn-board{position:relative;padding:.4rem .5rem .6rem}.msn-board .msn-card{margin:0;border:0;box-shadow:none}
.msn-bx{position:absolute;right:.6rem;top:.6rem;z-index:2;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font:inherit}
.msn-board .msn-head{padding-right:2.4rem}
/* [30 ต.ค.] กระดานภารกิจแบบเกม (ภาพ 3:4 · ตำแหน่งเป็น % ของภาพ · ตัวหนังสือย่อตามขนาดกระดาน cqw) */
.qb-ov{align-items:center}
.qb-wrap{position:relative;width:min(440px,94vw,calc(86vh * .75));max-height:94vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.qb-wrap::-webkit-scrollbar{display:none}
.qb-x{position:absolute;right:3%;top:2%;z-index:5;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(8,30,40,.45);color:#fff;font:inherit;cursor:pointer}
.qb{position:relative;width:100%;aspect-ratio:3/4;container-type:inline-size;border-radius:18px;overflow:hidden;background:#6b4a2a;box-shadow:0 24px 60px -18px rgba(0,0,0,.7)}
.qb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.qb-h{position:absolute;left:50%;top:27.2%;transform:translateX(-50%);white-space:nowrap;font-family:Kanit,Prompt,sans-serif;font-weight:600;font-size:4.2cqw;color:#ffe9b0;text-shadow:0 1px 0 #3b2208,0 0 8px rgba(0,0,0,.6)}
.qb-h span{font-size:.85em;padding:.05em .5em;margin-left:.25em;border-radius:999px;background:rgba(40,20,4,.55);color:#fff3cf}
.qb-p{position:absolute;top:35.4%;height:24.6%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.2cqw;padding:3.4cqw 1.6cqw 2cqw;border:0;background:none;cursor:pointer;font:inherit;color:#3b2611;text-align:center;-webkit-tap-highlight-color:transparent}
.qb-p:disabled{cursor:default}
.qb-n{font-size:2.6cqw;font-weight:700;letter-spacing:.04em;color:#8a5a1d}
.qb-t{font-family:Kanit,Prompt,sans-serif;font-weight:600;font-size:3.3cqw;line-height:1.3;color:#3b2611;flex:1;display:flex;align-items:center}
.qb-go{font-size:2.9cqw;font-weight:700;color:#fff8e6;padding:.35em .9em;border-radius:999px;background:linear-gradient(180deg,#1f8a62,#0b6b4f);box-shadow:0 2px 0 #074a37,0 4px 8px -4px rgba(0,0,0,.5)}
.qb-p:not(:disabled):active .qb-go{transform:translateY(1px)}
.qb-ok{font-family:Kanit,Prompt,sans-serif;font-weight:700;font-size:4.6cqw;color:#0f7a4f;transform:rotate(-12deg);padding:.05em .35em;border:.45cqw solid #0f7a4f;border-radius:.4em;opacity:.9}
.qb-p.ok .qb-t,.qb-p.ok .qb-n{opacity:.55}
.qb-pin{position:absolute;top:31.2%;width:8.8%;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.qb-pin.pop{animation:qbPin .55s cubic-bezier(.3,1.6,.5,1) both}
@keyframes qbPin{0%{transform:translate(-50%,-60%) scale(1.6);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
.qb-box{position:absolute;left:9%;right:9%;top:64.4%;height:6.6%;display:flex;align-items:center;gap:2cqw;padding:0 2.2cqw;border-radius:2.4cqw;background:rgba(36,18,4,.62);box-shadow:inset 0 0 0 1px rgba(246,211,138,.35)}
.qb-box .g{width:8cqw;height:8cqw;flex:none}.qb-box .g svg{width:100%;height:100%}
.qb-box .tx{flex:1;min-width:0;font-size:2.8cqw;line-height:1.3;color:#fff1d0}
.qb-box button{flex:none;font:inherit;font-size:3cqw;font-weight:700;padding:.45em 1em;border-radius:999px;border:0;cursor:pointer;color:#3a2405;background:linear-gradient(135deg,#fff3c8,#f3c056 55%,#c8862a);box-shadow:0 3px 0 #7a4c10}
.qb-box button:disabled{filter:grayscale(.7) brightness(.85);cursor:default}
.qb-box.ready{box-shadow:inset 0 0 0 1px #f3c056,0 0 18px rgba(243,192,86,.55)}
.qb-box .dn{font-size:3cqw;font-weight:700;color:#9fe0bf}
.qb-hint{position:absolute;left:6%;right:6%;bottom:3%;text-align:center;font-size:2.8cqw;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.qb-quiz{margin-top:10px;padding:14px 14px 12px;border-radius:16px;background:var(--paper-raised);color:var(--ink);border:1px solid var(--line)}
.qb-quiz b{font-family:Kanit,Prompt,sans-serif;font-weight:600}.qb-quiz p{margin:.35rem 0 .6rem;font-size:.9rem}
@media (prefers-reduced-motion:reduce){.qb-pin.pop{animation:none}}
.msn-modal{background:var(--paper-raised);color:var(--ink);border-radius:18px;max-width:480px;width:100%;max-height:85vh;overflow:auto;padding:1.2rem 1.25rem;border:1px solid var(--line)}
.msn-modal h3{margin:0 0 .6rem;font-size:1.05rem;padding-right:2.4rem}
/* [20 ต.ค. user "ปุ่ม x ปิดป๊อปอัป ตู้ปลา/ตู้อันดับ อยู่บนขวา"] ติดมุมขวาบนตลอดแม้เลื่อนลง */
.msn-x{position:sticky;top:0;float:right;margin:-.3rem -.35rem -2rem 0;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:1rem;line-height:1;cursor:pointer;box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
.msn-x:hover{background:var(--paper-raised)}
.msn-modal p{font-size:.85rem;line-height:1.65;margin:0 0 .7rem}
.msn-pop{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);z-index:80;background:#1f3a34;color:#fff;border-radius:20px;padding:1.2rem 1.6rem;text-align:center;box-shadow:0 20px 50px -10px rgba(0,0,0,.5);opacity:0;transition:all .25s ease;pointer-events:none}
.msn-pop.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.msn-pop b{display:block;font-size:2rem;color:#f3d08f;font-family:'IBM Plex Mono',monospace}
.ach-card{--ach-g1:#22c55e;--ach-g2:#15803d;--ach-gold:#d9a441;padding:1.1rem 1.15rem;border-radius:18px;background:var(--paper-raised);border:1px solid var(--line);display:flex;flex-direction:column;gap:.9rem;position:relative;overflow:hidden}
.ach-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
/* [30 ต.ค.] การ์ดสถิติบอทของฉัน (rsm-*) */
.rsm-card{padding:1.1rem 1.15rem 1rem;border-radius:18px;background:var(--paper-raised);border:1px solid var(--line);color:var(--ink);display:flex;flex-direction:column;gap:.85rem}
.rsm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;flex-wrap:wrap}
.rsm-head h3{margin:0}
.rsm-sub{margin:.2rem 0 0;font-size:.74rem;color:var(--ink-muted)}.rsm-sub b{font-weight:600;color:var(--ink)}.rsm-sub b.up{color:#16a34a}.rsm-sub b.dn{color:#dc2626}
.rsm-seg{display:inline-flex;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid var(--line)}
.rsm-seg button{font:inherit;font-size:.72rem;font-weight:600;padding:.3rem .75rem;border:0;border-radius:999px;background:none;color:var(--ink-muted);cursor:pointer;transition:background .2s,color .2s}
.rsm-seg button.on{background:var(--paper,#fff);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rsm-spark{position:relative;height:64px}.rsm-spark svg{display:block;width:100%;height:100%;overflow:visible}
.rsm-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}
.rsm-t{min-width:0;padding:.7rem .75rem;border-radius:13px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,transparent)}
.rsm-t small{display:block;font-size:.68rem;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsm-t b{display:block;margin-top:.2rem;font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsm-t b.up{color:#16a34a}.rsm-t b.dn{color:#dc2626}
.rsm-t span{display:block;margin-top:.15rem;font-size:.66rem;line-height:1.45;color:var(--ink-muted)}
.rsm-split{display:flex;flex-direction:column;gap:.3rem;font-size:.7rem;color:var(--ink-muted)}
.rsm-split div{display:flex;justify-content:space-between}.rsm-split b{color:var(--ink);font-weight:600}
.rsm-bar{display:flex;height:6px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)}.rsm-bar i{display:block;height:100%}
.rsm-bar i.b{background:#16a34a}.rsm-bar i.s{background:#d9a441}
.rsm-note{margin:0;font-size:.66rem;color:var(--ink-muted);line-height:1.5}
.rsm-empty{padding:1.2rem .5rem;text-align:center;font-size:.78rem;color:var(--ink-muted)}
.rsm-sk{height:64px;border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent),color-mix(in srgb,var(--ink) 10%,transparent),color-mix(in srgb,var(--ink) 5%,transparent));background-size:200% 100%;animation:rsmSk 1.2s linear infinite}
@keyframes rsmSk{to{background-position:-200% 0}}
@media (max-width:640px){.rsm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.rsm-head{flex-direction:column}.rsm-seg{align-self:stretch}.rsm-seg button{flex:1}}
.ach-title-chip{display:inline-flex;align-items:center;gap:.3rem;margin-top:.35rem;padding:.15rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ach-gold) 22%,transparent),color-mix(in srgb,var(--ach-g1) 18%,transparent));color:var(--ink);border:1px solid color-mix(in srgb,var(--ach-gold) 45%,transparent)}
.ach-ring{width:60px;height:60px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;position:relative;
  background:conic-gradient(var(--ach-g1) 0, var(--ach-g2) var(--ach-pct,0%), var(--line) 0);box-shadow:0 4px 12px -6px color-mix(in srgb,var(--ach-g1) 45%,transparent)}
.ach-ring::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--paper-raised)}
.ach-ring span{position:relative;font-size:.8rem;font-weight:800;font-family:'IBM Plex Mono',monospace;color:var(--ach-g2)}
.ach-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.55rem}
.ach-item{--p:0%;position:relative;display:flex;align-items:center;gap:.65rem;padding:.65rem .75rem;border-radius:14px;border:1px solid var(--line);background:var(--paper);overflow:hidden;transition:transform .2s}
.ach-item:hover{transform:translateY(-2px)}
.ach-medal{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;
  background:conic-gradient(var(--ach-gold) var(--p), color-mix(in srgb,var(--line) 85%,transparent) 0)}
.ach-medal::before{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--paper-raised)}
.ach-medal .ic{position:relative;font-size:1.15rem;line-height:1}
.ach-item:not(.done) .ach-medal .ic{filter:grayscale(1);opacity:.5}
.ach-txt{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.ach-item .t{font-size:.82rem;font-weight:700;line-height:1.3}
.ach-item .v{font-size:.68rem;color:var(--ink-muted);font-family:'IBM Plex Mono',monospace}
.ach-item .v .left{font-family:inherit;color:#b7791f;font-weight:700}
/* [แก้ 7 ต.ค. — user "เขียวเกินไป รก"] สำเร็จ = โทนเรียบ: พื้นเกือบขาว ขอบเขียวจางๆ เกล็ดวงเขียวบาง + ติ๊กเล็กที่เกล็ด */
.ach-item.done{border-color:color-mix(in srgb,var(--ach-g1) 30%,var(--line));background:color-mix(in srgb,var(--ach-g1) 4%,var(--paper))}
.ach-item.done .ach-medal{background:var(--ach-g1)}
.ach-item.done .ach-medal::before{inset:3px;background:#f0fdf4}
.ach-item.done .ach-medal::after{content:'✓';position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:var(--ach-g1);color:#fff;font-size:.58rem;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid var(--paper)}
.ach-item.done .v{color:var(--ach-g2);font-weight:600}
@keyframes ach-shine{0%,72%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
/* ใกล้สำเร็จ (≥70%) = ขอบทองกะพริบเบาๆ */
.ach-item.near{border-color:color-mix(in srgb,var(--ach-gold) 60%,transparent);animation:ach-near 2.4s ease-in-out infinite}
@keyframes ach-near{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ach-gold) 0%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ach-gold) 22%,transparent)}}
/* เพิ่งปลดล็อก */
.ach-item.is-new{animation:ach-pop .7s cubic-bezier(.2,1.6,.4,1) both}
.ach-item.is-new .ach-newtag{position:absolute;top:5px;right:6px;z-index:2;font-size:.58rem;font-weight:800;color:#fff;background:linear-gradient(90deg,#f59e0b,#ef4444);padding:.05rem .4rem;border-radius:999px}
@keyframes ach-pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.ach-confetti{position:absolute;top:30%;left:50%;width:7px;height:11px;border-radius:2px;pointer-events:none;z-index:3;animation:ach-conf 1.6s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes ach-conf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@media (max-width:520px){.ach-list{grid-template-columns:1fr 1fr;gap:.45rem}.ach-item{gap:.5rem;padding:.55rem .55rem}
  .ach-medal{width:36px;height:36px}.ach-medal .ic{font-size:.95rem}.ach-item .t{font-size:.74rem;padding-right:.9rem}.ach-item .v{font-size:.62rem}}
@media (prefers-reduced-motion:reduce){.ach-item.near,.ach-item.is-new,.ach-confetti{animation:none}}
/* ================== [NEW — 9 ต.ค. คุยกับ user "หน้าลูกค้าทำแบบเดียวกับแอดมิน"] หน้า "บัญชีของฉัน" ==================
   รวมโปรไฟล์ / ตั้งค่า EA / บัญชี & อุปกรณ์ / เติมเงิน ไว้ที่เดียว — ซ้ายการ์ดสรุป ขวาแท็บ + แถบบันทึกลอย
   ย้าย element เดิม (ID เดิมครบ ฟังก์ชันเดิมทำงานเหมือนเดิม) เข้ามาตอนเปิดครั้งแรก (myaBuild) */
/* [NEW 10 ต.ค.] หน้า "ประวัติ" 2 แท็บ */
.hst-tabs{display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--surface-2,rgba(0,0,0,.04));border:1px solid var(--line)}
.hst-tabs button{flex:1;font-family:inherit;font-size:.84rem;font-weight:600;padding:.45rem .6rem;border-radius:9px;border:0;background:none;color:var(--ink-muted,#6b7a72);cursor:pointer}
.hst-tabs button.on{background:linear-gradient(180deg,rgba(230,181,103,.3),rgba(230,181,103,.12));color:#fff4c9;box-shadow:inset 0 0 0 1px rgba(230,181,103,.55)}
.hst-link{align-self:flex-start;font-family:inherit;font-size:.84rem;font-weight:600;color:#e6b567;background:none;border:0;padding:.2rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#myAcct{position:fixed;inset:0;z-index:25;display:flex;justify-content:center;background:rgba(8,20,16,.6);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#myAcct[hidden]{display:none}
.mya-panel{width:100%;height:100%;display:grid;grid-template-columns:310px minmax(0,1fr);overflow:hidden;background:var(--paper);box-shadow:0 40px 100px -30px rgba(0,0,0,.6);animation:myaIn .22s cubic-bezier(.2,1,.4,1)}
@media (min-width:1000px){#myAcct{padding:18px}.mya-panel{max-width:1240px;border-radius:22px}}
@keyframes myaIn{from{opacity:0;transform:translateY(10px) scale(.99)}}
.mya-side{overflow-y:auto;padding:14px 12px 16px;display:flex;flex-direction:column;gap:7px;color:#e9efe9;
  background:radial-gradient(120% 60% at 0% 0%,#24493f 0%,var(--sidebar-bg,#16302a) 55%,var(--sidebar-bg-2,#0f241f) 100%);border-right:1px solid rgba(230,181,103,.18);scrollbar-width:thin;scrollbar-color:rgba(230,181,103,.35) transparent}
.mya-id{display:flex;gap:12px;align-items:center;padding-bottom:4px}
.mya-ava{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-weight:800;font-size:1.2rem;color:#241a08;background:linear-gradient(135deg,#f6d27a,#c8963f)}
.mya-rk{flex:none;position:relative;width:60px;height:60px;margin:0 2px 6px 2px;cursor:pointer}
.mya-rk img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;border-radius:50%;animation:rank-badge-glow 3.2s ease-in-out infinite}
.mya-rk em{position:absolute;left:50%;bottom:-9px;z-index:5;transform:translateX(-50%);font-style:normal;font-size:.6rem;font-weight:800;white-space:nowrap;padding:1px 8px;border-radius:999px;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.75));border:1px solid var(--rank-glow-color,rgba(255,255,255,.4));box-shadow:0 0 10px -2px var(--rank-glow-color,rgba(255,255,255,.3))}
.mya-rk .rank-badge-bubbles,.mya-rk .rank-badge-shine{display:block}
.mya-name{font-size:1.05rem;font-weight:700;color:#fff;line-height:1.25;word-break:break-word}
.mya-sub{font-size:.74rem;color:#a7bdb3;word-break:break-all}
.mya-key{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:#f3e7c9}
.mya-key span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mya-key button{border:0;background:rgba(230,181,103,.16);color:#f3d08f;border-radius:7px;padding:3px 8px;font-size:.68rem;cursor:pointer;font-family:inherit}
.mya-chips{display:flex;flex-wrap:wrap;gap:6px}
.mya-chip{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:#dfe8e3}
.mya-chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.mya-chip.g{color:#4fd69c}.mya-chip.r{color:#ff7a8a}.mya-chip.y{color:#f2c46b}.mya-chip.m{color:#a7bdb3}
.mya-kpis{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mya-kpi{border-radius:12px;padding:7px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);min-width:0}
.mya-kpi small{display:block;font-size:.66rem;color:#a7bdb3}
.mya-kpi b{display:block;font-size:.98rem;color:#fff;margin-top:2px;font-family:'IBM Plex Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mya-kpi .neg{color:#ff7a8a}.mya-kpi .mya-kpi-n{display:block;font-style:normal;font-size:.6rem;color:#f3c969;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mya-fee-note{margin-top:6px;padding:7px 10px;border-radius:10px;font-size:.72rem;line-height:1.5;color:#e9f3ee;background:rgba(243,201,105,.1);border:1px solid rgba(243,201,105,.3)}.mya-fee-note b{color:#f3c969}.mya-kpi .pos{color:#4fd69c}
.mya-kpi.click{cursor:pointer}.mya-kpi.click:hover{background:rgba(230,181,103,.1);border-color:rgba(230,181,103,.35)}
.mya-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mya-act{display:flex;align-items:center;gap:7px;font-family:inherit;font-size:.76rem;font-weight:600;color:#f3e7c9;padding:7px 10px;border-radius:11px;cursor:pointer;border:1px solid rgba(230,181,103,.22);background:rgba(230,181,103,.07);text-align:left}
.mya-act:hover{background:rgba(230,181,103,.18)}
.mya-act.pri{background:linear-gradient(90deg,#f6d27a,#e2a93b);color:#241a08;border:0}
.mya-panel{position:relative}
/* [แก้ 9 ต.ค. user "textbox ใหญ่ไป กินพื้นที่"] */
#myAcct input:not([type=checkbox]):not([type=radio]):not([type=color]),#myAcct select,#myAcct textarea{padding:.42rem .65rem!important;font-size:.88rem!important;line-height:1.35!important;min-height:0!important;border-radius:9px!important}
#myAcct .btn-sm,#myAcct .btn{min-height:0}
#myAcct .profile-ro{padding:.42rem .65rem!important;font-size:.88rem!important;min-height:0!important;border-radius:9px!important}
.mya-side-x{display:none}
.mya-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.mya-top{display:flex;align-items:center;gap:10px;padding:8px 12px 0 16px;background:var(--paper-raised,#fff);border-bottom:1px solid var(--line)}
.mya-top-t{flex:1;min-width:0;padding-bottom:6px}
.mya-top-t small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);font-weight:700}
.mya-top-t b{font-size:1.05rem;color:var(--ink)}
.mya-x{flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font-size:.95rem;margin-bottom:6px}
.mya-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:0 10px 0 12px;background:var(--paper-raised,#fff);border-bottom:1px solid var(--line)}
.mya-nav::-webkit-scrollbar{display:none}
.mya-nav button{flex:none;border:0;background:none;padding:9px 12px;font-family:inherit;font-size:.84rem;font-weight:600;color:var(--ink-muted);position:relative;cursor:pointer;white-space:nowrap}
.mya-nav button.on{color:var(--ink)}
.mya-nav button.on::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#e6b567,#c8963f)}
.mya-body{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 100px;scrollbar-width:thin}
.mya-pane{max-width:900px;margin:0 auto;background:var(--paper-raised,#fff);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.mya-pane[hidden]{display:none}
.mya-pane-h{display:flex;align-items:center;gap:10px}
.mya-pane-h .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:1.05rem;background:color-mix(in srgb,var(--accent,#e6b567) 16%,transparent)}
.mya-pane-h b{font-size:.98rem;color:var(--ink)}.mya-pane-h small{display:block;font-size:.72rem;color:var(--ink-muted)}
#myaPaneProfile .profile-row{display:flex;flex-direction:column;gap:5px}
#myaPaneProfile .mya-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
#myaPaneProfile .mya-pgrid > .profile-row:first-child{grid-column:1/-1}
#myAcct #profileSaveBtn,#myAcct #eaSettingsSaveBtn{display:none!important}
#myaPaneEa .eaTabBtn{border-radius:999px}
.mya-money{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.mya-mcard{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--paper);cursor:pointer;text-align:left;font-family:inherit;color:var(--ink);transition:border-color .15s,transform .15s}
.mya-mcard:hover{border-color:var(--accent,#e6b567);transform:translateY(-1px)}
.mya-mcard b{font-size:.92rem}.mya-mcard span{font-size:.74rem;color:var(--ink-muted)}
.mya-mcard .ic{font-size:1.4rem}
.mya-savebar{position:absolute;left:50%;bottom:18px;transform:translate(-50%,160%);width:min(720px,calc(100% - 32px));display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px 10px 16px;border-radius:16px;
  background:#13291f;color:#f3e7c9;box-shadow:0 20px 50px -14px rgba(0,0,0,.55),0 0 0 1px rgba(230,181,103,.3);transition:transform .28s cubic-bezier(.2,1.1,.4,1);z-index:6}
.mya-savebar.on{transform:translate(-50%,0)}
.mya-savebar .msg{flex:1;min-width:150px;display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600}
.mya-savebar .msg i{width:9px;height:9px;border-radius:50%;background:#f2c46b}
.mya-savebar button{font-family:inherit;font-size:.84rem;font-weight:700;border-radius:11px;padding:9px 16px;cursor:pointer}
.mya-savebar .ghost{background:none;border:1px solid rgba(255,255,255,.2);color:#e9efe9}
.mya-savebar .pri{border:0;background:linear-gradient(90deg,#f6d27a,#e2a93b);color:#241a08}
.mya-savebar .pri:disabled{opacity:.6;cursor:wait}
.mya-toast{position:absolute;left:50%;top:16px;transform:translate(-50%,-140%);opacity:0;visibility:hidden;padding:9px 16px;border-radius:12px;background:#13291f;color:#7ee2a8;font-size:.84rem;font-weight:700;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);transition:transform .3s,opacity .3s;z-index:7}
.mya-toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}.mya-toast.bad{color:#ff9aa5}
@media (max-width:999px){
  .mya-panel{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mya-side{overflow:visible;border-right:0;border-bottom:1px solid rgba(230,181,103,.18)}
  .mya-side-x{display:grid;place-items:center;position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:11px;border:1px solid rgba(230,181,103,.3);background:rgba(0,0,0,.25);color:#f3e7c9;font-size:.95rem;cursor:pointer}
  .mya-kpis,.mya-acts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mya-act{flex-direction:column;justify-content:center;text-align:center;gap:3px;font-size:.68rem;padding:7px 4px}
  .mya-main{min-height:100vh}
  .mya-top{position:sticky;top:0;z-index:5;padding:6px 10px 0 12px}
  html[data-fest]:not([data-fest=""]) .mya-top{position:sticky} /* [2 พ.ย. user "เมนูลอยค้างแปลกๆ"] ธีมเทศกาลตั้ง .mya-top เป็น relative ทับ sticky บนมือถือ → แถบหัวเลื่อนหาย เหลือช่องว่างให้เนื้อหาลอดขึ้นมาเหนือแท็บ */
  .mya-nav{position:sticky;top:var(--mya-toph,49px);z-index:5;padding:0 6px}
  .mya-body{overflow:visible;padding:8px 8px 110px}
  .mya-savebar,.mya-toast{position:fixed}
}
@media (max-width:560px){
  .mya-kpis{grid-template-columns:1fr 1fr}
  #myaPaneProfile .mya-pgrid{grid-template-columns:1fr}
  .mya-pane{padding:12px;border-radius:14px}
}
#accountStatusSection.mya-moved,#eaSettingsSection.mya-moved{display:none!important}
/* [NEW — 9 ต.ค. คุยกับ user "มือถือ: จิ้มค้างที่หัวเมนูแล้วลาก มันขยับตาม / เปิดป๊อปอัพแล้วลากลงไม่ต้องรีเฟรช"]
   1) ตอนมีป๊อปอัพเปิด (body ถูกล็อก overflow:hidden) ปิด pull-to-refresh/เด้งยางของทั้งหน้า
   2) กล่องที่เลื่อนได้ในป๊อปอัพ ไม่ส่งแรงลากต่อไปให้หน้าข้างหลัง (overscroll-behavior:contain)
   3) แถบหัว/แถบแท็บที่ค้าง (sticky) ลากแนวตั้งแล้วไม่ขยับตาม — แถบแท็บยังปัดซ้าย-ขวาได้ */
/* [15 ต.ค. user "ร้านในมือถือค้าง"] เดิม html:has(body[style*=…]) ทำให้เบราว์เซอร์คำนวณสไตล์ใหม่ทั้งหน้า ทุกครั้งที่ style ของอะไรก็ได้เปลี่ยน (ปลาวิ่ง = ทุกเฟรม) → เปลี่ยนเป็นคลาส html.ovh (JS ตั้งให้) */
html:has(#myAcct:not([hidden])),html:has(.auth-modal-overlay:not([hidden])),html:has(.gbx-ov),html.ovh,body[style*="overflow: hidden"]{overscroll-behavior:none}
#myAcct,.mya-side,.auth-modal-overlay,.auth-modal-card,#profitCalModal .pcal-card,.lc-overlay,.gbx-ov{overscroll-behavior:contain}
.mya-panel,.mya-body{overscroll-behavior:none}
.mya-nav,#myaPaneEa .mya-subtabs{touch-action:pan-x}
.mya-top,.mya-pane-h{touch-action:manipulation}
/* [NEW — 9 ต.ค. คุยกับ user "ล็อกหัวข้อมูลไว้ sticky ดูง่าย"] หัวแต่ละแท็บ + แถวหมวดตั้งค่า EA ค้างบนสุดตอนเลื่อน
   --mya-off = ความสูงหัว+แท็บที่ค้างอยู่แล้ว (มือถือ) / 0 (จอคอม เลื่อนใน .mya-body) — คำนวณใน myaStickyCalc() */
.mya-pane-h{position:sticky;top:var(--mya-off,0px);z-index:8;margin:-14px -16px 0;padding:12px 16px 9px;background:var(--paper-raised,#fff);border-radius:16px 16px 0 0;border-bottom:1px solid var(--line)}
#myaPaneEa .mya-subtabs{position:sticky;top:calc(var(--mya-off,0px) + var(--mya-ph,56px) - 14px);z-index:7;margin:-24px -16px 0;padding:22px 16px 8px;background:var(--paper-raised,#fff);border-bottom:1px solid var(--line);box-shadow:0 8px 12px -12px rgba(0,0,0,.25)}
@media (max-width:560px){.mya-pane-h{margin:-12px -12px 0;padding:10px 12px 8px;border-radius:14px 14px 0 0}#myaPaneEa .mya-subtabs{margin:-24px -12px 0;padding:21px 12px 7px;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}#myaPaneEa .mya-subtabs .eaTabBtn{flex:none}}
/* ================== [NEW — 9 ต.ค. คุยกับ user "หน้าลูกค้าเพิ่ม 1-4"] โทเคนพอใช้อีกกี่วัน / ปฏิทินกำไร / เป้าหมาย / สรุปเดือน ================== */
.tok-runway{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.35rem;font-size:.76rem;color:#cfe3da;font-weight:500}
.tok-runway b{color:#fff;font-weight:700}
.tok-runway.warn{color:#ffd28a}.tok-runway.warn b{color:#ffe1a6}
.tok-runway .tr-btn{border:0;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:700;padding:.22rem .65rem;border-radius:999px;background:linear-gradient(90deg,#f6d27a,#e2a93b);color:#241a08;box-shadow:0 4px 12px -4px rgba(226,169,59,.8)}
.pcal-card{border-radius:20px;padding:1.1rem 1.25rem 1.2rem;background:var(--paper-raised,var(--paper));border:1px solid var(--line);display:flex;flex-direction:column;gap:.9rem}
.pcal-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.pcal-modal-box{max-width:660px}
#profitCalModal .pcal-card{max-height:calc(100vh - 2rem);overflow-y:auto;box-shadow:0 30px 70px -20px rgba(0,0,0,.55)}
#profitCalModal .pcal-card{position:relative}#profitCalModal .pcal-head{padding-right:2.4rem}
.pcal-x{position:absolute;top:1rem;right:1rem;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;font-size:.85rem}
.pcal-head h2{font-size:1.05rem;font-weight:600;margin:0;color:var(--ink)}
.pcal-nav{display:inline-flex;align-items:center;gap:.25rem}
.pcal-nav button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;font-size:1rem;line-height:1}
.pcal-nav button:disabled{opacity:.3;cursor:default}
.pcal-nav span{min-width:118px;text-align:center;font-weight:600;font-size:.88rem;color:var(--ink)}
.pcal-recap-btn{border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink);border-radius:999px;padding:.32rem .8rem;font-size:.76rem;font-weight:600;cursor:pointer;font-family:inherit}
.pcal-goal{border-radius:14px;padding:.75rem .9rem;background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.pcal-goal-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.82rem;color:var(--ink)}
.pcal-goal-top b{font-family:'IBM Plex Mono',monospace}
.pcal-goal-edit{border:0;background:none;color:var(--ink-muted);cursor:pointer;font-size:.75rem;text-decoration:underline;font-family:inherit;padding:0}
.pcal-bar{position:relative;height:10px;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden;margin:.5rem 0 .35rem}
.pcal-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,#4fd69c,#e6b567);transition:width 1s cubic-bezier(.3,.8,.3,1)}
.pcal-goal.done .pcal-bar i{background:linear-gradient(90deg,#e6b567,#ffd86b,#e6b567);box-shadow:0 0 12px rgba(246,210,122,.8)}
.pcal-goal-sub{font-size:.74rem;color:var(--ink-muted)}
.pcal-goal-set{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.pcal-goal-set input{width:130px;padding:.4rem .6rem;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:.85rem}
.pcal-goal-set button{border-radius:10px;padding:.42rem .8rem;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--line);background:none;color:var(--ink)}
.pcal-goal-set button.pri{background:var(--accent);border-color:var(--accent);color:#1a1208}
.pcal-goal-cta{width:100%;border:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);background:none;border-radius:12px;padding:.6rem;color:var(--ink);font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit}
.pcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.pcal-wd{font-size:.68rem;text-align:center;color:var(--ink-muted);font-weight:600;padding-bottom:2px}
.pcal-d{position:relative;height:clamp(42px,9vw,62px);border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;padding:4px 5px;font-size:.66rem;color:var(--ink);
  background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid transparent;cursor:default;min-width:0;overflow:hidden;transition:transform .12s}
.pcal-d .n{font-weight:600;opacity:.75}
.pcal-d .v{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:.66rem;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcal-d.has{cursor:pointer}.pcal-d.has:hover{transform:translateY(-1px)}
.pcal-d.pos{background:rgba(52,199,129,var(--a));color:#0d3b26}.pcal-d.pos.dark-txt{color:#fff}
.pcal-d.neg{background:rgba(239,90,104,var(--a));color:#5a1219}.pcal-d.neg.dark-txt{color:#fff}
.pcal-d.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pcal-d.future{opacity:.35}.pcal-d.blank{background:none}
.pcal-d.sel{outline:2px solid var(--ink);outline-offset:1px}
.pcal-d.best::after{content:'★';position:absolute;top:2px;right:4px;font-size:.62rem;color:#b07a2a}
.pcal-detail{font-size:.8rem;color:var(--ink);min-height:1.2em;text-align:center}
.pcal-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.pcal-stats div{border-radius:12px;padding:.55rem .6rem;background:color-mix(in srgb,var(--ink) 4%,transparent);text-align:center}
.pcal-stats b{display:block;font-family:'IBM Plex Mono',monospace;font-size:.95rem;color:var(--ink)}
.pcal-stats span{font-size:.7rem;color:var(--ink-muted)}
.pcal-stats .up{color:var(--good)}.pcal-stats .dn{color:var(--bad)}
@media (max-width:520px){.pcal-card{padding:.95rem .8rem}.pcal-grid{gap:3px}.pcal-d{padding:3px;border-radius:7px}.pcal-d .v{font-size:.56rem}.pcal-d .n{font-size:.6rem}.pcal-stats b{font-size:.82rem}}
/* สรุปเดือน (Wrapped) */
.rcp-card{position:relative;overflow:hidden;border-radius:22px;padding:1.6rem 1.4rem 1.3rem;color:#fff;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,#2f5a4a 0%,#14302a 55%,#0b1d19 100%);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.rcp-card::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(246,210,122,.16),transparent 30%);animation:rcpSpin 9s linear infinite;pointer-events:none}
.rcp-card > *{position:relative}
.rcp-kicker{font-size:.72rem;letter-spacing:.2em;color:#f3d08f;font-weight:700}
.rcp-month{font-size:1.25rem;font-weight:700;margin:.25rem 0 1rem}
.rcp-lbl{font-size:.8rem;color:#cfe3da}
.rcp-big{font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:2.6rem;line-height:1.1;color:#ffe08a;text-shadow:0 0 22px rgba(255,200,80,.6);margin:.2rem 0}
.rcp-big.neg{color:#ff9aa5;text-shadow:none}
.rcp-pct{font-size:.85rem;color:#9fe3c3;font-weight:600}
.rcp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:1.2rem 0 1rem}
.rcp-grid div{border-radius:14px;padding:.65rem .5rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(10px);animation:rcpIn .5s forwards}
.rcp-grid div:nth-child(2){animation-delay:.12s}.rcp-grid div:nth-child(3){animation-delay:.24s}.rcp-grid div:nth-child(4){animation-delay:.36s}
.rcp-grid b{display:block;font-size:1.05rem;font-family:'IBM Plex Mono',monospace}
.rcp-grid span{font-size:.7rem;color:#cfe3da}
.rcp-msg{font-size:.86rem;color:#f3e7c9;margin-bottom:1rem}
.rcp-btns{display:flex;gap:.5rem}
.rcp-btns button{flex:1;border-radius:999px;padding:.7rem;font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
.rcp-btns button.pri{border:0;background:linear-gradient(90deg,#f6d27a,#e2a93b);color:#241a08;box-shadow:0 10px 24px -8px rgba(226,169,59,.8)}
.rcp-demo{display:inline-block;margin-left:.35rem;font-size:.62rem;padding:.08rem .4rem;border-radius:6px;background:rgba(255,255,255,.15);letter-spacing:.08em}
@keyframes rcpSpin{to{transform:rotate(360deg)}}
@keyframes rcpIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rcp-card::before{animation:none}.rcp-grid div{animation:none;opacity:1;transform:none}.pcal-bar i{transition:none}}
.sr-tabs{display:flex;gap:.35rem}
.sr-tabs button{flex:1;padding:.4rem;border-radius:999px;border:1px solid var(--line);background:none;font-size:.8rem;cursor:pointer;font-family:inherit;color:var(--ink)}
.sr-tabs button.is-active{background:var(--accent);border-color:var(--accent);color:#1a1208;font-weight:600}
/* [NEW — 8 ต.ค.] เลือกบัญชีที่จะแชร์ (บัญชีนี้ / เงินจริงรวม / เดโมรวม / รวมทั้งหมด) */
.sr-scope{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.sr-scope>span{font-size:.72rem;color:var(--ink-muted);margin-right:.15rem}
.sr-scope button{padding:.28rem .65rem;border-radius:999px;border:1px dashed var(--line);background:none;font-size:.74rem;cursor:pointer;font-family:inherit;color:var(--ink-muted)}
.sr-scope button.is-active{border-style:solid;border-color:var(--accent);color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.sr-scope button:disabled{opacity:.4;cursor:default}
.sr-card .demo{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.08em;padding:2px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.4);color:#fff;opacity:.85;vertical-align:1px}
.sr-stage{display:flex;justify-content:center;overflow:hidden}
.sr-card{box-sizing:border-box;width:360px;max-width:100%;min-height:450px;border-radius:20px;padding:22px;position:relative;overflow:hidden;color:#eef2ea;
  background:radial-gradient(120% 80% at 100% 0%,#1f4a3f 0%,#122b25 45%,#0b1c18 100%);border:1.5px solid rgba(230,181,103,.55);
  display:flex;flex-direction:column;font-family:'IBM Plex Sans','Chakra Petch',system-ui,sans-serif}
.sr-card .glow{position:absolute;width:240px;height:240px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(230,181,103,.28),rgba(230,181,103,0) 70%)}
.sr-card .hd{display:flex;justify-content:space-between;align-items:center;position:relative}
.sr-card .brand{font-family:'Orbitron','Chakra Petch',sans-serif;font-size:16px;letter-spacing:.14em;color:#e6b567;font-weight:700}
.sr-card .chip{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid rgba(230,181,103,.45);color:#f0d49e}
/* [26 ต.ค. user "การ์ดแชร์ให้สวยขึ้น"] การ์ด 4:5 (ลงฟีด Facebook/IG สวย) — โรบอทที่ใส่อยู่ + แถบรหัสแนะนำ · ใช้ภาพนิ่ง/gradient ธรรมดาเพื่อให้ html2canvas วาดได้ */
.sr-card .hero{position:relative;height:108px;margin:6px 0 0;display:flex;align-items:flex-end;justify-content:center}
.sr-card .hero .hglow{position:absolute;left:50%;bottom:-22px;width:150px;height:150px;margin-left:-75px;background:radial-gradient(circle 74px at 50% 50%,rgba(230,181,103,.36),rgba(230,181,103,0))}
.sr-card .hero img{position:relative;height:104px;width:auto;max-width:150px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.sr-card .refrow{position:relative;margin-top:9px;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(230,181,103,.1);border:1px dashed rgba(230,181,103,.5);font-size:10.5px;color:#f0d49e}
.sr-card .refrow b{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.1em;color:#ffe08a}
.sr-card .lbl{margin-top:auto;font-size:12px;opacity:.75;position:relative}
.sr-card .big{font-family:'Orbitron','Chakra Petch',sans-serif;font-size:40px;font-weight:700;line-height:1.25;color:#efc677;position:relative;text-shadow:0 2px 18px rgba(230,181,103,.35)}
.sr-card .big.neg{color:#ff9a8a;text-shadow:none}
.sr-card .sub{font-size:12.5px;opacity:.85;position:relative;margin-top:2px}
.sr-card .stats{display:flex;gap:8px;margin-top:14px;position:relative}
.sr-card .stats div{flex:1;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.sr-card .stats b{display:block;font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1.4}
.sr-card .stats span{font-size:10px;opacity:.65}
.sr-card .ft{margin-top:auto;padding-top:12px;border-top:1px solid rgba(230,181,103,.22);display:flex;justify-content:space-between;align-items:flex-end;position:relative}
.sr-card .ft .cta{font-size:11.5px;font-weight:600;color:#f0d49e;white-space:nowrap}
.sr-card .ft .url{font-family:'Orbitron','Chakra Petch',sans-serif;font-size:10.5px;opacity:.85;margin-top:2px;letter-spacing:.05em}
.sr-card .ft .vf{display:flex;align-items:center;gap:8px}
.sr-card .ft .vf img{width:52px;height:52px;border-radius:6px;background:#fff;padding:2px;flex:none;image-rendering:pixelated}
.sr-card .ft .vf b{display:block;font-size:11px;color:#efc677;font-weight:700;white-space:nowrap}
.sr-card .ft .vf .url{font-family:'IBM Plex Mono',monospace;letter-spacing:0;font-size:10px;white-space:nowrap}
.sr-amt{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.8rem;flex-wrap:wrap}
.sr-amt label{display:flex;align-items:center;gap:.4rem;cursor:pointer}
.sr-amt input{width:16px;height:16px;accent-color:#e6b567}
.sr-amt button{font-size:.72rem;opacity:.7;text-decoration:underline;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.sr-card.fest .big{font-size:36px;line-height:1.15}.sr-card.fest .stats{margin-top:9px}.sr-card.fest .ft{padding-top:9px}
.sr-card .ft .disc{font-size:8.5px;opacity:.5;text-align:right;max-width:50%;padding-left:10px;line-height:1.4}
/* [NEW — 7 ต.ค.] ขอคืนเงิน */
.rf-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.rf-sum>div{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.55rem .65rem;display:flex;flex-direction:column;gap:.15rem}
.rf-sum span{font-size:.7rem;opacity:.7}
.rf-sum b{font-size:1rem;font-family:'IBM Plex Mono',monospace}
.rf-sum small{font-size:.66rem;opacity:.7;font-family:inherit;font-weight:400;display:block}
.rf-terms{border:1px solid rgba(230,181,103,.35);border-radius:12px;background:rgba(230,181,103,.06)}
.rf-terms summary{cursor:pointer;padding:.6rem .8rem;font-size:.85rem;font-weight:600;color:#f0d49e}
.rf-terms-body{max-height:240px;overflow-y:auto;padding:0 .8rem .7rem;font-size:.78rem;line-height:1.6}
.rf-terms-body ol{padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem;list-style:decimal}
.rf-f{display:flex;flex-direction:column;gap:.3rem;font-size:.75rem;opacity:.95}
.rf-f input,.rf-f select{width:100%;padding:.55rem .7rem;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit;font-size:.92rem;color-scheme:dark}
.rf-f select option{background:#16241e;color:#eef2ea}
.rf-inline{display:flex;gap:.5rem;align-items:center}
.rf-preview{border-radius:12px;background:rgba(255,255,255,.05);padding:.55rem .75rem;display:flex;flex-direction:column;gap:.2rem;font-size:.82rem}
.rf-preview>div{display:flex;justify-content:space-between;gap:.5rem}
.rf-preview .net{border-top:1px dashed rgba(255,255,255,.2);padding-top:.3rem;margin-top:.15rem;font-size:.95rem}
.rf-preview .net b{color:#7ee2a8}
.rf-preview .warn{color:#f0b46a;font-size:.75rem}
.rf-check{display:flex;gap:.5rem;align-items:flex-start;font-size:.8rem;line-height:1.5;cursor:pointer}
.rf-check input{margin-top:.25rem;flex:none}
.rf-hist-wrap{border-top:1px solid rgba(255,255,255,.12);padding-top:.6rem}
.rf-hist{padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.8rem}
.rf-hist .a{display:flex;justify-content:space-between;gap:.5rem}
.rf-hist .b{font-size:.72rem;opacity:.7;margin-top:.1rem;word-break:break-word}
@media (max-width:480px){.rf-sum{grid-template-columns:1fr 1fr}.rf-sum>div:last-child{grid-column:1/-1}}
/* [แก้ 7 ต.ค. — user "ไอคอนแชร์ผลไม่สวย"] ปุ่มแชร์: ไอคอนเส้นสีทอง แทนอีโมจิ 📤 */
.profit-summary-head .btn-outline.ps-share-btn{display:inline-flex;align-items:center;gap:.4rem;color:#f0d49e!important;border-color:rgba(230,181,103,.45)!important}
.profit-summary-head .btn-outline.ps-share-btn:hover{background:rgba(230,181,103,.12)!important;border-color:rgba(230,181,103,.7)!important}
.ps-share-btn svg{flex:none}
.sr-act{display:inline-flex;align-items:center;gap:.4rem}
.msn-ic.ic-share{background:linear-gradient(135deg,#fff1b8,#e2a93b);color:#5a3d0c}
.msn-share-note{display:block;margin-top:.2rem;font-size:.7rem;color:#b07a2a}
/* [NEW — 8 ต.ค. คุยกับ user "ยังไม่เคยเชื่อมต่อ EA ให้ดูมีมิติ ถามว่าเพราะอะไร + ลิงก์ไลน์"] */
.nc-help{margin-top:.85rem;padding:.9rem;border-radius:14px;background:color-mix(in srgb,var(--paper) 70%,transparent);border:1px solid var(--line);cursor:default;text-align:left}
.nc-help .nc-q{font-weight:700;font-size:.88rem;margin-bottom:.6rem;color:var(--ink)}
.nc-help .nc-q small{display:block;font-weight:400;font-size:.72rem;color:var(--ink-muted);margin-top:.15rem}
.nc-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.45rem}
.nc-opt{display:flex;align-items:center;gap:.5rem;text-align:left;font-family:inherit;font-size:.8rem;font-weight:600;color:var(--ink);cursor:pointer;
  padding:.6rem .7rem;border-radius:11px;border:1px solid var(--line);background:var(--paper-raised);transition:border-color .15s,background .15s,transform .15s}
.nc-opt:hover{border-color:#d9a441;transform:translateY(-1px)}
.nc-opt .e{font-size:1.1rem;flex:none}
.nc-ans{display:flex;flex-direction:column;gap:.55rem}
.nc-ans .nc-tag{align-self:flex-start;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:color-mix(in srgb,#d9a441 18%,transparent);color:#b07a2a}
.nc-ans p{margin:0;font-size:.82rem;line-height:1.65;color:var(--ink)}
.nc-ans ol{list-style:decimal;margin:0;padding-left:1.25rem;font-size:.8rem;line-height:1.7;color:var(--ink)}
.nc-acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.15rem}
.nc-line{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:11px;font-weight:700;font-size:.84rem;color:#fff!important;text-decoration:none;
  background:linear-gradient(135deg,#06c755,#04a648);box-shadow:0 8px 18px -8px rgba(6,199,85,.7)}
.nc-line:hover{filter:brightness(1.06)}
.nc-btn2{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .9rem;border-radius:11px;font-weight:600;font-size:.8rem;font-family:inherit;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink-muted);text-decoration:none}
.nc-btn2:hover{border-color:#d9a441;color:var(--ink)}
@media (max-width:520px){.nc-opts{grid-template-columns:1fr}}
/* ฟอนต์ไทย IBM Plex Sans Thai (OFL) โฮสต์เอง — ผูกช่วงตัวอักษรไทยเข้ากับ Plex Sans/Plex Mono ด้วย ทุกจุดที่ใช้ฟอนต์สองตัวนี้จะได้ไทยที่คมเหมือนกัน */
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-thai-400.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-thai-500.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-thai-600.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-thai-700.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-thai-400.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-thai-500.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-thai-600.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-thai-700.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-thai-400.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-thai-500.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-thai-600.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-thai-700.woff2) format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
/* [NEW — 8 ต.ค. คุยกับ user "ปรับตัวหนังสือให้คมชัดขึ้น"] เดิม IBM Plex Sans ไม่มีตัวอักษรไทย เบราว์เซอร์เลยไปหยิบฟอนต์เครื่อง
   (Tahoma/Leelawadee ฯลฯ — ขนาดเล็กแล้วเบลอ/หนาไม่เท่ากัน) → ใช้ IBM Plex Sans Thai (ออกแบบคู่กับ Plex) + เรนเดอร์แบบคมขึ้น
   + เข้มสีตัวหนังสือรอง (muted) ให้ตัดกับพื้นมากขึ้น */
:root{--ink:#141c18;--ink-muted:#4a5448;--sidebar-ink-muted:#bccfc6}
body{font-family:'IBM Plex Sans','IBM Plex Sans Thai',system-ui,sans-serif;text-rendering:optimizeLegibility;font-kerning:normal;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
button,input,select,textarea{font-family:inherit}
.tabular{font-family:'IBM Plex Mono','IBM Plex Sans Thai',ui-monospace,monospace}
h1,h2,h3,.display{font-family:'Orbitron','IBM Plex Sans Thai','Chakra Petch',sans-serif}
/* พื้นเข้ม (เมนูซ้าย/การ์ดสีเข้ม/ป๊อปอัพ) ใช้ grayscale AA บน Mac ให้ตัวขาวบนพื้นเข้มไม่ฟุ้ง */
.dash-sidebar,.auth-modal-card,.open-pos-card,.msn-strip,.msn-box,.gbx-ov,.chat-panel{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* [15 ต.ค. user "ตัวหนังสือไทยดูไม่คมชัด"] การ์ดในแดชบอร์ดเคยใช้ backdrop-filter (กระจกฝ้า) → Chrome บน Windows แยกการ์ดเป็นเลเยอร์ GPU
   แล้ววาดตัวหนังสือแบบ grayscale (ไม่ใช้ ClearType) ตัวไทยเล็กๆ เลยดูฟุ้ง/ไม่คม — พื้นหลังด้านหลังการ์ดเป็นแสงเบลอนุ่มอยู่แล้ว
   ปิด blur ที่ตัวการ์ดแทบไม่เห็นความต่าง แต่ตัวหนังสือคมขึ้นชัดเจน (+ เว็บลื่นขึ้นบนมือถือ) — การ์ดขาวเพิ่มความทึบนิดให้ดูเหมือนเดิม */
#dashboardView .card,#dashboardView .expiry-countdown-card,#dashboardView .profit-summary-card,#dashboardView .partner-promo-card,
#dashboardView .risk-card,#dashboardView .open-pos-card,#dashboardView .news-cal-card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#dashboardView .card{background:linear-gradient(165deg,color-mix(in srgb,#ffffff 78%,var(--paper-raised)),color-mix(in srgb,#ffffff 50%,var(--paper-raised)))}
#dashboardView .open-pos-card,#dashboardView .news-cal-card{background:linear-gradient(165deg,color-mix(in srgb,#ffffff 74%,var(--paper)),color-mix(in srgb,#ffffff 42%,var(--paper)))}
/* [NEW — 9 ต.ค.] กราฟพื้นหลังเบลอบนการ์ดโทเคน */
#tokenBalanceSection > *:not(.tok-bg-chart):not(.glass-sheen){position:relative;z-index:1}
/* [16 ต.ค. user "เอากราฟหลังการ์ดแรกออก (บังธีม) · เอาคำบอกแรงค์ออก · การ์ดใสเหมือนกระจก ตัวหนังสือคมชัดมาก"]
   กระจก = ชั้นแสงสะท้อน (ไล่ขาวจางมุมซ้ายบน + ขอบสว่างด้านบน) ใต้ตัวหนังสือ · ไม่ใช้ backdrop-filter (มือถือไม่หนัก) · ทับได้ทุกธีม */
#tokenBalanceSection .tok-bg-chart{display:none!important}
#tokenRankLabel{display:none!important}
#tokenBalanceSection,#profitSummaryCard{isolation:isolate}
.glass-sheen{position:absolute!important;inset:0;border-radius:inherit;pointer-events:none;z-index:-1!important;
  background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.07) 26%,rgba(255,255,255,0) 50%),radial-gradient(120% 70% at 50% -25%,rgba(255,255,255,.16),transparent 62%),linear-gradient(180deg,transparent 60%,rgba(0,0,0,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 18px 36px -24px rgba(255,255,255,.35)}
#tokenBalanceSection,#profitSummaryCard{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
#tokenBalanceSection :is(.expiry-countdown-units,.tok-nick),#profitSummaryCard :is(b,strong,.ps-val,.profit-summary-value,h2,h3){text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 1px rgba(0,0,0,.35)}
#tokenBalanceSection :is(small,span,p),#profitSummaryCard :is(small,span,p){text-shadow:0 1px 1.5px rgba(0,0,0,.35)}
#tokenBalanceSection .tok-bg-chart{position:absolute;z-index:0;pointer-events:none;left:20%;width:60%;right:auto;bottom:-2%;height:100%; /* [แก้ 9 ต.ค.] กำหนดกว้างชัดเจน (เดิม width:auto → SVG กว้างแค่ ~440px ขอบขวาไปจบกลางข้อความ เห็นเป็นเส้นตั้ง) */
  opacity:.85;filter:blur(.4px) saturate(125%); /* [แก้ 9 ต.ค.] ลดเบลอ 1.1→0.4px ให้กราฟคมขึ้น */
  /* [แก้ 9 ต.ค. คุยกับ user "ขอบกราฟยังเห็นเป็นเหลี่ยม"] ใช้หน้ากากวงรีไล่จางรอบทิศ แทนการไล่จาง 2 แกน (ทำให้เห็นมุมเหลี่ยม) */
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 55%,#000 35%,rgba(0,0,0,.5) 68%,transparent 100%);
  mask:radial-gradient(ellipse 50% 50% at 50% 55%,#000 35%,rgba(0,0,0,.5) 68%,transparent 100%)}
#tokenBalanceSection .tok-bg-chart .pts{opacity:0;animation:tokBgPts .6s 1.6s ease forwards}@keyframes tokBgPts{to{opacity:1}}
#tokenBalanceSection .tok-bg-chart .line{stroke-dasharray:2400;stroke-dashoffset:2400;animation:tokBgDraw 2.4s .3s cubic-bezier(.3,.7,.2,1) forwards}
#tokenBalanceSection .tok-bg-chart .dot{opacity:0;animation:tokBgDot 2.2s 2.4s ease-in-out infinite}
#tokenBalanceSection:hover .tok-bg-chart{opacity:1}
#tokenBalanceSection.is-urgent .tok-bg-chart{opacity:.28;filter:blur(.8px) grayscale(.4)}
@keyframes tokBgDraw{to{stroke-dashoffset:0}}
@keyframes tokBgDot{0%,100%{opacity:.35;r:4}50%{opacity:1;r:6}}
/* [แก้ 9 ต.ค. คุยกับ user "กราฟไม่อยู่กลาง"] ใช้ความกว้าง "การ์ด" ตัดสิน (container query) ไม่ใช่ความกว้างจอ —
   การ์ดแคบ (มือถือ/แท็บเล็ต/จอแคบ) ข้อความตกลงไปอีกแถว → กราฟวางกลางล่างเต็มความกว้างการ์ด */
#tokenBalanceSection{container-type:inline-size}
@container (max-width:712px){#tokenBalanceSection .tok-bg-chart{left:8%;width:84%;height:66%;bottom:0;opacity:.65}}
@media (max-width:640px){#tokenBalanceSection .tok-bg-chart{left:8%;width:84%;opacity:.6;height:62%}}
@media (prefers-reduced-motion:reduce){#tokenBalanceSection .tok-bg-chart .pts{animation:none;opacity:1}#tokenBalanceSection .tok-bg-chart .line{animation:none;stroke-dashoffset:0}#tokenBalanceSection .tok-bg-chart .dot{animation:none;opacity:.8}}
/* [แก้ 9 ต.ค. คุยกับ user "ดูประวัติทั้งหมด จางไป"] ลิงก์มุมขวาเป็นปุ่มแคปซูลอ่านชัดบนกราฟ */
#tokenBalanceSection .tok-hist-link{white-space:nowrap;font-size:.74rem;font-weight:600;color:#bff0d8;padding:.32rem .75rem;border-radius:999px;
  background:rgba(8,24,20,.55);border:1px solid rgba(110,231,183,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .2s,border-color .2s,color .2s}
#tokenBalanceSection:hover .tok-hist-link{color:#fff;background:rgba(110,231,183,.16);border-color:rgba(110,231,183,.6)}
/* [แก้ 9 ต.ค. คุยกับ user "กล่องข้อความให้เนียน ไม่เห็นขอบ"] ข้อความบนการ์ดโทเคนไม่มีกล่อง — ลอยบนกราฟ ใช้เงาตัวหนังสืออ่านชัดแทน */
#tokenBalanceSection .expiry-countdown-date{background:none;padding:.2rem 0;border-radius:0;color:#d7e6df;font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 8px rgba(6,20,16,.75)}
/* ===== [แก้ 10 ต.ค. — user "ปรับการ์ดโทเคนให้ดูพรีเมียม หรูหราขึ้น"] ===== */
/* พื้น: เขียวมรกตเกือบดำ + แสงทองนวลหลังเหรียญ + แสงมรกตมุมขวา */
#tokenBalanceSection{
  background:
    radial-gradient(120% 140% at 6% 50%,rgba(246,210,122,.13) 0%,rgba(246,210,122,0) 38%),
    radial-gradient(90% 120% at 100% 0%,rgba(79,214,156,.12) 0%,rgba(79,214,156,0) 45%),
    linear-gradient(135deg,#0f2721 0%,#0b1d18 52%,#071410 100%);
  border:1px solid transparent;border-radius:20px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.7),0 10px 24px -14px rgba(7,20,16,.6),inset 0 1px 0 rgba(255,244,201,.06);
  isolation:isolate}
/* ขอบเส้นทองบางๆ ไล่แสง (เส้นผม 1px) */
#tokenBalanceSection::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,rgba(246,210,122,.7) 0%,rgba(246,210,122,.12) 28%,rgba(110,231,183,.1) 55%,rgba(246,210,122,.45) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* แสงกวาดผิวการ์ดช้าๆ */
#tokenBalanceSection::before{top:0;right:auto;left:-60%;width:45%;height:100%;border-radius:0;z-index:0;
  background:linear-gradient(105deg,transparent 0%,rgba(255,244,201,.06) 45%,rgba(255,244,201,.11) 50%,rgba(255,244,201,.06) 55%,transparent 100%);
  animation:tokSheen 7s ease-in-out 1.5s infinite}
@keyframes tokSheen{0%{left:-60%}35%,100%{left:130%}}
/* ป้าย + ตัวเลขทองแชมเปญ */
#tokenBalanceSection .expiry-countdown-label{color:#d9c7a0;letter-spacing:.14em;font-size:.68rem}
#tokenBalanceSection .tok-nick{cursor:pointer;text-transform:none;letter-spacing:.02em;font-size:1rem;font-weight:800;color:#fde68a;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
#tokenBalanceSection .tok-nick.none{font-size:.78rem;font-weight:700;color:#1a1208;background:linear-gradient(135deg,#fde68a,#f59e0b);border-radius:999px;padding:.1rem .6rem}
#tokenBalanceSection .tok-nick:hover{text-decoration:underline}
#tokenBalanceSection:not(.is-urgent) .expiry-unit-value{
  background:linear-gradient(180deg,#fff8e1 0%,#f6d27a 55%,#c99a3e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 10px rgba(246,210,122,.28)) drop-shadow(0 1px 0 rgba(0,0,0,.4));letter-spacing:.01em}
#tokenBalanceSection .expiry-unit-suffix{color:#a9bfb4;letter-spacing:.06em}
/* แถบความคืบหน้าแรงค์ ทอง */
#tokenBalanceSection .token-rank-progress-track{background:rgba(255,255,255,.07);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
#tokenBalanceSection .token-rank-progress-bar{background:linear-gradient(90deg,#c99a3e,#f6d27a 70%,#fff3c4)}
/* กราฟ: อยู่โซนกลาง-ขวาครึ่งล่าง จางลงไม่แย่งตัวเลข/ข้อความ */
#tokenBalanceSection .tok-bg-chart{left:30%;width:56%;height:92%;bottom:-6%;opacity:.55;filter:saturate(115%);
  -webkit-mask:radial-gradient(ellipse 52% 60% at 50% 62%,#000 30%,rgba(0,0,0,.45) 65%,transparent 100%);
  mask:radial-gradient(ellipse 52% 60% at 50% 62%,#000 30%,rgba(0,0,0,.45) 65%,transparent 100%)}
#tokenBalanceSection:hover .tok-bg-chart{opacity:.75}
/* ข้อความชวน + ปุ่มประวัติ */
#tokenBalanceSection .expiry-countdown-date{color:#e9dfc6;font-weight:500;letter-spacing:.01em}
#tokenBalanceSection .tok-hist-link{color:#f6d27a;background:rgba(10,22,18,.6);border-color:rgba(246,210,122,.45);letter-spacing:.02em}
#tokenBalanceSection:hover .tok-hist-link{color:#1a1205;background:linear-gradient(180deg,#f9dd8f,#e2b357);border-color:#f6d27a}
@container (max-width:712px){#tokenBalanceSection .tok-bg-chart{left:6%;width:88%;height:60%;bottom:0;opacity:.5}}
@media (max-width:640px){#tokenBalanceSection .tok-bg-chart{left:6%;width:88%;height:58%;opacity:.45}}
@media (prefers-reduced-motion:reduce){#tokenBalanceSection::before{animation:none;display:none}}
/* [แก้ 13 ต.ค. — user เลือกฟอนต์ตัวเลขแนวหุ่นยนต์ "1. Orbitron"] ตัวเลขการ์ดโทเคน + สรุปกำไร
   กันล้นจอ: ห้ามขึ้นบรรทัดใหม่ + JS ย่อขนาดเองถ้ายาวเกินช่อง (ดูท้ายไฟล์) */
#tokenBalanceSection .expiry-unit-value,
.profit-stat-value{font-family:'Orbitron','IBM Plex Mono',monospace!important;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.profit-stat-value{display:block;white-space:nowrap;max-width:100%;font-size:1.75rem}
.profit-stat{min-width:0}
@media (max-width:640px){.profit-stat-value{font-size:1.35rem}}
/* ==== [16 ต.ค. user เลือกแบบ B] การ์ดรวม โปรไฟล์ + สรุปกำไร (#heroCombo) ==== */
#heroCombo{position:relative;isolation:isolate;border-radius:22px;padding:1rem 1.1rem 1.05rem;color:#f4ecd8;
  background:radial-gradient(120% 140% at 6% 0%,rgba(246,210,122,.13) 0%,rgba(246,210,122,0) 38%),radial-gradient(90% 120% at 100% 0%,rgba(79,214,156,.12) 0%,rgba(79,214,156,0) 45%),linear-gradient(135deg,#0f2721 0%,#0b1d18 52%,#071410 100%);
  border:1px solid rgba(246,210,122,.28);box-shadow:0 30px 60px -28px rgba(0,0,0,.7),0 10px 24px -14px rgba(7,20,16,.6);-webkit-font-smoothing:antialiased}
#heroCombo:not(:has(> section:not([hidden]))){display:none}
html[data-card-theme] #heroCombo{background:var(--ct-bg)!important;border-color:var(--ct-bd)!important;box-shadow:var(--ct-sh)!important}
html[data-fest]:not([data-fest=""]):not([data-card-theme]) #heroCombo{border-color:color-mix(in srgb,var(--fz-a,#f6d27a) 55%,transparent)}
/* ส่วนบน: โปร่งใส เกาะพื้นกล่องรวม */
#heroCombo #tokenBalanceSection,html[data-card-theme] #heroCombo #tokenBalanceSection,html[data-fest]:not([data-fest=""]) #heroCombo #tokenBalanceSection{
  background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0;overflow:visible;
  display:grid;grid-template-columns:auto auto auto 1fr;column-gap:.55rem;row-gap:.05rem;align-items:center}
#heroCombo #tokenBalanceSection::before,#heroCombo #tokenBalanceSection > .glass-sheen,#heroCombo #profitSummaryCard > .glass-sheen,#heroCombo #profitSummaryCard::after{display:none!important}
#heroCombo #tokenBalanceSection .expiry-countdown-main{display:contents}
#heroCombo #tokenRankIconBadge{grid-column:1;grid-row:1/span 2;align-self:center}
#heroCombo .expiry-countdown-label{grid-column:2/-1;grid-row:1;align-self:end;min-width:0;letter-spacing:0}
#heroCombo #tokNick{max-width:100%;font-size:1.06rem}
#heroCombo #tokenBalanceUnits{grid-column:2;grid-row:2;justify-self:start;align-self:start;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem}
#heroCombo #tokenBalanceUnits .expiry-unit-value{font-size:.98rem!important;line-height:1.2}
#heroCombo #tokenBalanceUnits .expiry-unit-value::before{content:'🪙 ';font-size:.85rem;vertical-align:.08em}
#heroCombo #tokenBalanceUnits .expiry-unit-suffix{display:none}
#heroCombo #tokenRunway{grid-column:3;grid-row:2;justify-self:start;align-self:start;margin-top:.12rem!important;margin:0;font-size:.64rem;min-width:0;white-space:nowrap;opacity:.85;gap:.25rem}
#heroCombo #tokenRunway b{font-weight:600}
#heroCombo .hc-topup{grid-column:4;grid-row:2;align-self:start;width:22px;height:22px;padding:0;border:0;border-radius:50%;cursor:pointer;
  font:inherit;font-size:0;line-height:0;color:#1d1405;background:linear-gradient(135deg,#fde68a,#e2a93b);box-shadow:0 3px 10px -3px rgba(226,169,59,.8),inset 0 1px 0 rgba(255,255,255,.55);position:relative}
#heroCombo .hc-topup::before{content:'+';font-size:16px;font-weight:800;line-height:22px;position:absolute;inset:0;text-align:center}
#heroCombo .hc-topup:hover{transform:scale(1.08)}
#heroCombo #tokenRankProgressWrap,#heroCombo .tok-hist-link,#heroCombo .tok-bg-chart,#heroCombo #tokenRankLabel{display:none!important}
#heroCombo #tokenBalanceHint{grid-column:1/-1;grid-row:3;font-size:.76rem;margin-top:.35rem}
#heroCombo #tokenBalanceSection.tip-mode #tokenBalanceHint{display:none}
#heroCombo #tokenBirthdayBadge{grid-column:1/-1;grid-row:4;margin:.3rem 0 0}
.hc-topup{display:none}
#heroCombo .hc-topup{display:inline-block}
/* ส่วนล่าง: แผงกำไร (กระจกเข้ม) */
#heroCombo #profitSummarySection{margin-top:.85rem}
#heroCombo #profitSummaryCard,html[data-card-theme] #heroCombo #profitSummaryCard{
  background:rgba(6,10,20,.46)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px -12px rgba(0,0,0,.6)!important;
  -webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);
  border-radius:16px;padding:.7rem .95rem .95rem;gap:.55rem;color:#f4ecd8}
html[data-fxq="0"] #heroCombo #profitSummaryCard{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,10,20,.78)!important}
/* [16 ต.ค. user "ตัวเลขทับภาพพื้นหลัง ดูยาก"] ธีมรูปสว่าง: ม่านมืดทั้งกล่อง + ป้ายมืดหลังยอดโทเคน */
html[data-card-theme^="img_"] #heroCombo::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,16,.28) 0%,rgba(5,8,16,.06) 45%,rgba(5,8,16,.12) 100%)} /* [26 ต.ค.] สว่างขึ้น (เดิม .5/.2/.3) */
#heroCombo #tokenBalanceSection::after{display:none!important;content:'';position:absolute;z-index:-1;top:-.35rem;bottom:auto;left:auto;right:-.5rem;width:10rem;height:calc(100% + .7rem);border-radius:14px;pointer-events:none;padding:0;-webkit-mask:none;mask:none;animation:none;background:radial-gradient(120% 100% at 100% 50%,rgba(5,8,16,.55),rgba(5,8,16,.25) 70%,transparent)}
#heroCombo #tokenBalanceSection{position:relative;isolation:isolate}
#heroCombo :is(.profit-stat-value,#tokNick){text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.45)!important}
#heroCombo #tokenBalanceUnits .expiry-unit-value{text-shadow:none!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85))}
#heroCombo .profit-stat-label,#heroCombo #tokenRunway{text-shadow:0 1px 2px rgba(0,0,0,.8)}
#heroCombo #tokenRunway{opacity:1!important;color:#e9e2cf}
#heroCombo #profitSummaryCard.is-swipeable{padding-bottom:1.35rem}
#heroCombo .profit-summary-head{align-items:center;flex-wrap:nowrap;gap:.5rem}
#heroCombo .profit-summary-head > div:first-child{min-width:0}
#heroCombo .profit-summary-head h2,#heroCombo #profitSummaryLink{display:none!important}
#heroCombo .hc-acct{display:inline-flex;align-items:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;font-size:.74rem;font-weight:700;
  color:#f4ecd8;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.2rem .7rem;cursor:pointer;opacity:1}
#heroCombo .hc-acct:hover{background:rgba(255,255,255,.18)}
.hc-host{display:inline-flex;align-items:center;white-space:nowrap;font:inherit;font-size:.68rem;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid var(--line);border-radius:999px;padding:.16rem .6rem;cursor:pointer;line-height:1.3}
#heroCombo .hc-host{color:#f4ecd8;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}#heroCombo .hc-host:hover{background:rgba(255,255,255,.16)}
.hc-host.soon,#heroCombo .hc-host.soon{border-color:rgba(251,191,36,.7);color:#f59e0b}#heroCombo .hc-host.soon{color:#fde68a}
.hc-host.fix,#heroCombo .hc-host.fix,.hc-host.end,#heroCombo .hc-host.end{border-color:rgba(248,113,113,.7);color:#dc2626}#heroCombo .hc-host.end{color:#fecaca}
#heroCombo .hc-acct:empty{display:none}
#heroCombo .hc-acct::before{content:"";width:14px;height:14px;margin-right:.4rem;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fcd34d%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%226%22 width=%2218%22 height=%2214%22 rx=%223%22/%3E%3Cpath d=%22M3 10h18M16 15h2%22/%3E%3Cpath d=%22M7 6V4.5h10V6%22/%3E%3C/svg%3E") center/contain no-repeat}
.hc-share{flex:none;width:22px;height:22px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:#1d1405;background:linear-gradient(135deg,#fde68a,#e2a93b);border:0;box-shadow:0 4px 12px -4px rgba(226,169,59,.75),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .15s ease}
.hc-share:hover{transform:translateY(-1px) rotate(-8deg)}
.hc-share svg{width:11px;height:11px;margin:1px 1px 0 0}
#heroCombo .profit-summary-stats{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem;align-items:start}
#heroCombo .profit-stat{min-width:0;gap:.1rem}
#heroCombo .profit-stat-divider{display:none!important}
#heroCombo .profit-stat-label{font-size:.72rem;text-transform:none;letter-spacing:0;color:rgba(244,236,216,.78)}
#heroCombo .profit-stat-value{font-size:clamp(1.05rem,5.2vw,1.45rem);font-weight:700;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5)}
#heroCombo #profitStatBalance{color:#f4ecd8}
#heroCombo .profit-stat-hint:empty{display:none}
@media (min-width:768px){
  #heroCombo{padding:1.15rem 1.4rem 1.2rem}
  #heroCombo #tokenBalanceUnits .expiry-unit-value{font-size:1.08rem!important}
  #heroCombo #tokenRunway{font-size:.7rem}
  #heroCombo .profit-summary-stats{grid-template-columns:1fr 1fr 1fr}
  #heroCombo .profit-stat-value{font-size:1.9rem}
  #heroCombo #profitSummaryCard{padding:.85rem 1.3rem 1.1rem}
  #heroCombo #profitSummaryCard.is-swipeable{padding-left:3rem;padding-right:3rem}
}
@media (max-width:380px){#heroCombo{padding:.9rem .85rem}}
/* [16 ต.ค. user "ปรับการ์ดจำนวนเงินให้ดูดีขึ้น"] ช่องเงินเป็นกล่องย่อย 3 ใบเท่ากัน มีไอคอน+แถบสีประจำช่อง · มือถือเรียงเป็นแถว (ป้ายซ้าย ตัวเลขขวา) */
#heroCombo #tokenRunway{white-space:nowrap}
#heroCombo .profit-summary-stats{display:flex!important;flex-direction:column;align-items:stretch!important;gap:.45rem}
#heroCombo .profit-stat{--pc:#6ee7a8;position:relative;display:flex!important;flex-direction:row;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.55rem .75rem .55rem .9rem;border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 14%,rgba(255,255,255,.04)),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.09);overflow:hidden}
#heroCombo .profit-stat::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:0 3px 3px 0;background:var(--pc);box-shadow:0 0 10px var(--pc)}
#heroCombo .profit-stat:has(#profitStatAll){--pc:#f6d27a}
#heroCombo .profit-stat:has(#profitStatBalance){--pc:#7cc4ff}
#heroCombo .profit-stat[hidden]{display:none!important}
#heroCombo .profit-stat-label{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem!important;font-weight:600;color:rgba(244,236,216,.9)!important;white-space:nowrap}
#heroCombo .profit-stat-label::before{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;font-size:.8rem;background:color-mix(in srgb,var(--pc) 22%,transparent);content:'📈'}
#heroCombo .profit-stat:has(#profitStatAll) .profit-stat-label::before{content:'💰'}
#heroCombo .profit-stat:has(#profitStatBalance) .profit-stat-label::before{content:'🏦'}
#heroCombo .profit-stat-value{font-size:1.18rem!important;text-align:right;letter-spacing:-.01em}
#heroCombo .profit-stat-value:not(.is-good):not(.is-bad){color:#f4ecd8}
#heroCombo .profit-stat-hint{display:none!important}
@media (min-width:768px){
  #heroCombo .profit-summary-stats{display:grid!important;grid-template-columns:repeat(3,1fr);gap:.7rem}
  #heroCombo .profit-stat{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.45rem;padding:.8rem 1rem .85rem 1.1rem;
    background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 16%,rgba(255,255,255,.04)),rgba(255,255,255,.025) 70%)}
  #heroCombo .profit-stat::before{left:0;top:14%;bottom:14%}
  #heroCombo .profit-stat-value{font-size:1.6rem!important;text-align:left}
}
/* ==== [16 ต.ค. user "เอาไอคอนร้านค้าออก รก · แยกเมนูเป็นหมวด กิจกรรม/บอท"] ==== */
/* [16 ต.ค. user "ปุ่มร้านค้ามุมซ้ายล่างหาย ใส่คำ ร้านค้า Shop ให้ลูกค้าไม่งง"] ปุ่มลอยแบบมีป้ายชื่อ */
/* [19 ต.ค. user เลือกแบบ 6 "วงทองแสงหมุน"] ปุ่มร้านค้ากลมทอง ไอคอน+คำเล็กข้างใต้ · วงแสงวิ่งรอบขอบ (หมุนด้วย transform = เบา) · ประกายดาวกะพริบ */
#pkgFloatBtn{width:48px!important;height:48px!important;border-radius:50%!important;padding:0;flex-direction:column;gap:0;font:inherit;font-size:.5rem;font-weight:800;letter-spacing:0;white-space:nowrap;line-height:1.05;
  color:#3a2405;background:radial-gradient(circle at 50% 28%,#fff3c8 0%,#f3c056 52%,#c8862a 100%);box-shadow:0 10px 22px -8px rgba(150,90,15,.75),inset 0 -3px 0 rgba(120,70,10,.28),inset 0 2px 0 rgba(255,255,255,.65);isolation:isolate}
#pkgFloatBtn svg{width:17px;height:17px;margin-top:1px}
#pkgFloatBtn::before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 58%,rgba(255,231,163,.15) 64%,#ffe7a3 74%,#fff 78%,rgba(255,231,163,.4) 82%,transparent 88%);
  -webkit-mask:radial-gradient(circle,transparent calc(50% - 5px),#000 calc(50% - 4px));mask:radial-gradient(circle,transparent calc(50% - 5px),#000 calc(50% - 4px));animation:pfRing 3.2s linear infinite}
#pkgFloatBtn::after{content:"";position:absolute;right:0;top:4px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #ffd36b;pointer-events:none;animation:pfTw 2.4s ease-in-out infinite}
@keyframes pfRing{to{transform:rotate(360deg)}}
@keyframes pfTw{0%,100%{opacity:.25;transform:scale(.6)}45%{opacity:1;transform:scale(1.15)}}
#pkgFloatBtn:active{transform:scale(.94)}
#pkgFloatBtn .pkg-float-badge{top:1px;right:1px;z-index:2}
@media (prefers-reduced-motion: reduce){#pkgFloatBtn::before,#pkgFloatBtn::after{animation:none}}
body.shop-open #pkgFloatBtn::before,body.shop-open #pkgFloatBtn::after{animation-play-state:paused}
#pkgFloatBtn .pf-lb small{font-weight:600;opacity:.75;margin-left:.2rem}
.sb-gico{width:16px;text-align:center;font-size:.9rem;line-height:1}
.nav-sec,#navBuyTokensM,#navBotHealthM,#navPotHealthM,#navHostM{display:none}
@media (max-width:767px){
  #dashNavActions.is-open{display:grid!important;grid-template-columns:1fr 1fr;gap:.45rem;align-items:stretch}
  #dashNavActions.is-open > *,#dashNavActions.is-open .nav-more-item{order:var(--o,15)}
  #dashNavActions a{text-decoration:none}
  #dashNavActions .nav-more-wrap,#dashNavActions .nav-more-menu{display:contents!important}
  #dashNavActions :is(.btn,.nav-more-item){width:100%;margin:0;font-size:.8rem;padding:.55rem .5rem;text-align:center;white-space:normal}
  #dashNavActions .nav-sec{display:block;grid-column:1/-1;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--ink-muted);margin:.45rem 0 -.1rem .15rem}
  #dashNavActions .nav-sec[style*="--o:10"]{margin-top:0}
  #dashNavActions #navBuyTokensM{display:block}
  #dashNavActions #navBotHealthM,#dashNavActions #navPotHealthM,#dashNavActions #navHostM{display:block}
  #navKey{--o:1;grid-column:1/-1}
  #navAddLicense,#navSwitchLicense,#navMyAccount,#navProfile,#navNickM{--o:11}
  #navHostM{--o:21}
  #navEaSettings,#navDownloadEa{--o:22}
  #navBotHealthM,#navPotHealthM{--o:23}
  #navMissionsM,#navSeasonM,#navAlbumM{--o:31}
  #navShopM,#navBuyTokensM{--o:41}
  #navPaymentHistory,#navEarnings,#navProfitCal{--o:51}
  #pushNotifyBtn,#navLearnM,#navPerksM,#navWeeklyM,#navManualM{--o:61}
  #navLogoutM{--o:99;grid-column:1/-1;margin-top:.4rem}
}
/* [16 ต.ค. user "ไอคอนพรีเมียมดูแพง"] ไอคอนอัญมณีขอบทอง (SVG ฝังในไฟล์ ไม่โหลดเพิ่ม) */
#heroCombo .profit-stat-label::before{content:''!important;width:30px!important;height:30px!important;border-radius:0!important;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cdefs%3E%3ClinearGradient id=%22b%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236ee7b7%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%2310b981%22/%3E%3Cstop offset=%221%22 stop-color=%22%23065f46%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22r%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff6cf%22/%3E%3Cstop offset=%22.35%22 stop-color=%22%23e9b949%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%238a5a12%22/%3E%3Cstop offset=%221%22 stop-color=%22%23f7d77a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22s%22 x=%22-20%%22 y=%22-20%%22 width=%22140%%22 height=%22140%%22%3E%3CfeDropShadow dx=%220%22 dy=%22.8%22 stdDeviation=%22.7%22 flood-color=%22%23000%22 flood-opacity=%22.45%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%221.5%22 y=%221.5%22 width=%2237%22 height=%2237%22 rx=%2211%22 fill=%22url(%23r)%22/%3E%3Crect x=%223.2%22 y=%223.2%22 width=%2233.6%22 height=%2233.6%22 rx=%229.6%22 fill=%22url(%23b)%22/%3E%3Cpath d=%22M4.5 13C4.5 7.5 8 4.5 13 4.5h14c5 0 8.5 3 8.5 8.5-5 2.6-10.2 3.6-15.5 3.6S9.5 15.6 4.5 13z%22 fill=%22url(%23g)%22/%3E%3Cg filter=%22url(%23s)%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 27l6.5-6.5 4.5 4.5L30 15%22/%3E%3Cpath d=%22M23.5 15H30v6.5%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat!important;flex:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
#heroCombo .profit-stat:has(#profitStatAll) .profit-stat-label::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cdefs%3E%3ClinearGradient id=%22b%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fde68a%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23f59e0b%22/%3E%3Cstop offset=%221%22 stop-color=%22%2392400e%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22r%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff6cf%22/%3E%3Cstop offset=%22.35%22 stop-color=%22%23e9b949%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%238a5a12%22/%3E%3Cstop offset=%221%22 stop-color=%22%23f7d77a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22s%22 x=%22-20%%22 y=%22-20%%22 width=%22140%%22 height=%22140%%22%3E%3CfeDropShadow dx=%220%22 dy=%22.8%22 stdDeviation=%22.7%22 flood-color=%22%23000%22 flood-opacity=%22.45%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%221.5%22 y=%221.5%22 width=%2237%22 height=%2237%22 rx=%2211%22 fill=%22url(%23r)%22/%3E%3Crect x=%223.2%22 y=%223.2%22 width=%2233.6%22 height=%2233.6%22 rx=%229.6%22 fill=%22url(%23b)%22/%3E%3Cpath d=%22M4.5 13C4.5 7.5 8 4.5 13 4.5h14c5 0 8.5 3 8.5 8.5-5 2.6-10.2 3.6-15.5 3.6S9.5 15.6 4.5 13z%22 fill=%22url(%23g)%22/%3E%3Cg filter=%22url(%23s)%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2220%22 cy=%2213.5%22 rx=%228%22 ry=%223%22/%3E%3Cpath d=%22M12 13.5v5c0 1.7 3.6 3 8 3s8-1.3 8-3v-5%22/%3E%3Cpath d=%22M12 18.5v5c0 1.7 3.6 3 8 3s8-1.3 8-3v-5%22/%3E%3Cpath d=%22M12 23.5v3c0 1.7 3.6 3 8 3s8-1.3 8-3v-3%22/%3E%3C/g%3E%3C/svg%3E")!important}
#heroCombo .profit-stat:has(#profitStatBalance) .profit-stat-label::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cdefs%3E%3ClinearGradient id=%22b%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23bfdbfe%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%233b82f6%22/%3E%3Cstop offset=%221%22 stop-color=%22%231e3a8a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22r%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff6cf%22/%3E%3Cstop offset=%22.35%22 stop-color=%22%23e9b949%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%238a5a12%22/%3E%3Cstop offset=%221%22 stop-color=%22%23f7d77a%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cfilter id=%22s%22 x=%22-20%%22 y=%22-20%%22 width=%22140%%22 height=%22140%%22%3E%3CfeDropShadow dx=%220%22 dy=%22.8%22 stdDeviation=%22.7%22 flood-color=%22%23000%22 flood-opacity=%22.45%22/%3E%3C/filter%3E%3C/defs%3E%3Crect x=%221.5%22 y=%221.5%22 width=%2237%22 height=%2237%22 rx=%2211%22 fill=%22url(%23r)%22/%3E%3Crect x=%223.2%22 y=%223.2%22 width=%2233.6%22 height=%2233.6%22 rx=%229.6%22 fill=%22url(%23b)%22/%3E%3Cpath d=%22M4.5 13C4.5 7.5 8 4.5 13 4.5h14c5 0 8.5 3 8.5 8.5-5 2.6-10.2 3.6-15.5 3.6S9.5 15.6 4.5 13z%22 fill=%22url(%23g)%22/%3E%3Cg filter=%22url(%23s)%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2210%22 y=%2211%22 width=%2220%22 height=%2218%22 rx=%223%22/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%224%22/%3E%3Cpath d=%22M20 16v-1.5M20 25.5V24M16 20h-1.5M25.5 20H24M13.5 29v2M26.5 29v2%22/%3E%3C/g%3E%3C/svg%3E")!important}
#heroCombo #tokenBalanceUnits .expiry-unit-value::before{content:''!important;display:inline-block;width:1.05em;height:1.05em;margin-right:.3em;vertical-align:-.16em;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cdefs%3E%3CradialGradient id=%22c%22 cx=%22.35%22 cy=%22.3%22 r=%22.8%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff7d1%22/%3E%3Cstop offset=%22.35%22 stop-color=%22%23fcd34d%22/%3E%3Cstop offset=%22.8%22 stop-color=%22%23d97706%22/%3E%3Cstop offset=%221%22 stop-color=%22%2392400e%22/%3E%3C/radialGradient%3E%3ClinearGradient id=%22e%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff3c4%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23b7791f%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fde68a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%2218%22 fill=%22url(%23e)%22/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%2215%22 fill=%22url(%23c)%22/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%2211.5%22 fill=%22none%22 stroke=%22%23fff4c2%22 stroke-opacity=%22.7%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M20 12.5l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.5 5-.7z%22 fill=%22%23fff8dc%22 stroke=%22%23b45309%22 stroke-width=%22.8%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
#heroCombo #tokenRunway .hc-clock{width:12px;height:12px;flex:none;color:#fcd34d}
#heroCombo .hc-acct svg{width:14px;height:14px;margin-right:.35rem;flex:none;color:#fcd34d}
@media (min-width:769px){#heroCombo #profitSummaryCard:has(.acct-swipe-nav.is-active-group){padding-left:2.6rem;padding-right:2.6rem;padding-bottom:1.5rem}}
/* ==== [16 ต.ค. user "การ์ดออเดอร์เป็นห้องโรบอท มีแอนิเมชันสวยๆ ขาย"] ห้องโรบอทแล็บ (ไอเทม room_robot) ====
   ทุกอย่างเป็น CSS transform/opacity ล้วน · หยุดแอนิเมชันเมื่อเลื่อนพ้นจอ (.rbr-off) · FXQ 0 = ภาพนิ่ง */
.rbr{position:relative;height:208px;margin-top:.8rem;border-radius:16px;overflow:hidden;isolation:isolate;contain:layout paint;
  background:radial-gradient(120% 70% at 50% 0%,#1d2d5c 0%,#0d1633 45%,#070b1c 100%);border:1px solid rgba(125,211,252,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -30px 60px -30px rgba(56,189,248,.25),0 14px 30px -18px rgba(2,6,23,.8);color:#e0f2fe;font-family:inherit}
.rbr *{box-sizing:border-box}
.rbr-wall{position:absolute;inset:0 0 34% 0;background:repeating-linear-gradient(90deg,rgba(148,197,255,.07) 0 1px,transparent 1px 64px),linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.rbr-wall::after{content:'';position:absolute;left:6%;right:6%;top:8px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#7dd3fc,#c4b5fd,#7dd3fc,transparent);box-shadow:0 0 14px 2px rgba(125,211,252,.7);animation:rbrLamp 4s ease-in-out infinite}
@keyframes rbrLamp{50%{opacity:.55}}
.rbr-floor{position:absolute;left:-30%;right:-30%;bottom:0;height:34%;overflow:hidden;perspective:220px;background:linear-gradient(180deg,#0b1430,#050813)}
.rbr-floor::before{content:'';position:absolute;left:0;right:0;top:-100%;height:300%;transform-origin:50% 0;transform:rotateX(62deg);
  background:linear-gradient(rgba(56,189,248,.35) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(56,189,248,.35) 1px,transparent 1px) 0 0/48px 48px;animation:rbrGrid 3.2s linear infinite}
@keyframes rbrGrid{to{transform:rotateX(62deg) translateY(48px)}}
.rbr-floor::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b1430 0%,transparent 40%,transparent 70%,rgba(5,8,19,.7))}
/* ชั้นวางเซิร์ฟเวอร์ + ไฟกะพริบ */
.rbr-rack{position:absolute;top:22px;width:34px;height:96px;border-radius:6px;background:linear-gradient(180deg,#1e293b,#0f172a);border:1px solid rgba(148,163,184,.25);display:grid;align-content:start;gap:7px;padding:8px 6px}
.rbr-rack.l{left:10px}.rbr-rack.r{right:10px}
.rbr-rack i{display:block;height:4px;border-radius:2px;background:rgba(148,163,184,.25);position:relative}
.rbr-rack i::after{content:'';position:absolute;right:0;top:0;width:4px;height:4px;border-radius:50%;background:#34d399;box-shadow:0 0 6px #34d399;animation:rbrLed 1.6s steps(2) infinite}
.rbr-rack i:nth-child(2)::after{background:#7dd3fc;box-shadow:0 0 6px #7dd3fc;animation-delay:.4s}
.rbr-rack i:nth-child(3)::after{animation-delay:.9s;animation-duration:2.2s}
.rbr-rack i:nth-child(4)::after{background:#fbbf24;box-shadow:0 0 6px #fbbf24;animation-delay:.2s;animation-duration:1.1s}
.rbr-rack i:nth-child(5)::after{animation-delay:1.3s}
@keyframes rbrLed{50%{opacity:.15}}
/* จอโฮโลแกรมกลางผนัง */
.rbr-scr{position:absolute;left:50%;top:20px;transform:translateX(-50%);min-width:190px;max-width:62%;padding:7px 14px 8px;border-radius:12px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(56,189,248,.18),rgba(56,189,248,.06));border:1px solid rgba(125,211,252,.45);box-shadow:0 0 22px -4px rgba(56,189,248,.55),inset 0 0 18px rgba(56,189,248,.15)}
.rbr-scr::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);pointer-events:none}
.rbr-scr::before{content:'';position:absolute;left:0;right:0;height:40%;top:-40%;background:linear-gradient(180deg,transparent,rgba(125,211,252,.22),transparent);animation:rbrScan 3s linear infinite}
@keyframes rbrScan{from{transform:translateY(0)}to{transform:translateY(450%)}} /* [30 ต.ค. user "แดชบอร์ดเครื่องร้อน"] เดิมขยับ top = คำนวณเลย์เอาต์ทุกเฟรม (~60 ครั้ง/วิ) → ใช้ transform แทน ระยะเท่าเดิม (-40% → 140% ของจอ = 4.5 เท่าความสูงแถบ) */
.rbr-scr small{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#7dd3fc;opacity:.9}
.rbr-scr b{display:block;font-family:'IBM Plex Mono',monospace;font-size:1.25rem;line-height:1.15;color:#f0f9ff;text-shadow:0 0 10px rgba(125,211,252,.8)}
.rbr-scr b.g{color:#6ee7b7;text-shadow:0 0 12px rgba(52,211,153,.8)}.rbr-scr b.r{color:#fca5a5;text-shadow:0 0 12px rgba(248,113,113,.7)}
.rbr-scr em{display:block;font-style:normal;font-size:.66rem;color:#bae6fd;opacity:.85;margin-top:1px}
/* หุ่นยนต์ */
.rbr-bots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,2.2vw,16px);padding:0 46px}
.rbr-bot{position:relative;width:62px;flex:none;display:flex;flex-direction:column;align-items:center;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.rbr-bot.in{animation:rbrIn .7s cubic-bezier(.2,.9,.25,1.3) both}
@keyframes rbrIn{from{transform:translateY(40px) scale(.6);opacity:0}}
.rbr-bot.out{animation:rbrOut 1.1s ease-in forwards}
@keyframes rbrOut{30%{transform:translateY(-14px) scale(1.06)}100%{transform:translateY(-60px) scale(.4);opacity:0}}
.rbr-tag{position:relative;margin-bottom:4px;padding:3px 6px 3px;border-radius:8px;min-width:58px;text-align:center;background:rgba(2,6,23,.72);border:1px solid rgba(125,211,252,.35);box-shadow:0 0 10px -3px rgba(56,189,248,.6);white-space:nowrap}
.rbr-tag::after{content:'';position:absolute;left:50%;bottom:-4px;width:7px;height:7px;transform:translateX(-50%) rotate(45deg);background:rgba(2,6,23,.85);border-right:1px solid rgba(125,211,252,.35);border-bottom:1px solid rgba(125,211,252,.35)}
.rbr-tag small{display:block;font-size:.56rem;font-weight:700;letter-spacing:.06em;line-height:1.2}
.rbr-bot.buy .rbr-tag small{color:#6ee7b7}.rbr-bot.sell .rbr-tag small{color:#fda4af}
.rbr-tag b{display:block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;line-height:1.2;color:#f8fafc}
.rbr-tag b.g{color:#6ee7b7}.rbr-tag b.r{color:#fca5a5}
.rbr-bot svg{width:58px;height:72px;overflow:visible;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.rbr-body{animation:rbrHover 2.4s ease-in-out infinite;transform-box:fill-box}
.rbr-bot:nth-child(2n) .rbr-body{animation-delay:-.8s}.rbr-bot:nth-child(3n) .rbr-body{animation-delay:-1.5s}
@keyframes rbrHover{50%{transform:translateY(-4px)}}
.rbr-shadow{animation:rbrShadow 2.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes rbrShadow{50%{transform:scaleX(.8);opacity:.35}}
.rbr-eye{animation:rbrBlink 4.5s infinite;transform-origin:center;transform-box:fill-box}
@keyframes rbrBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.rbr-ant{animation:rbrLed 1.2s steps(2) infinite}
.rbr-sign{transform-box:fill-box;transform-origin:center}
.rbr-bot.buy .rbr-sign{animation:rbrLift 1.6s ease-in-out infinite}
.rbr-bot.sell .rbr-sign{animation:rbrPush 1.6s ease-in-out infinite}
@keyframes rbrLift{50%{transform:translateY(-5px)}}
@keyframes rbrPush{50%{transform:translateY(4px)}}
.rbr-bot.win .rbr-spark{animation:rbrSpark 1.8s ease-in-out infinite}
.rbr-spark{opacity:0}
@keyframes rbrSpark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
.rbr-more{align-self:center;margin-bottom:30px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:.78rem;color:#e0f2fe;background:rgba(56,189,248,.18);border:1px solid rgba(125,211,252,.4)}
/* เกล็ดเด้งตอนปิดกำไร */
.rbr-coin{position:absolute;width:16px;height:16px;border-radius:50%;pointer-events:none;z-index:5;background:radial-gradient(circle at 35% 30%,#fff7d1,#fcd34d 40%,#d97706 85%);box-shadow:0 0 8px rgba(251,191,36,.8);animation:rbrCoin 1.3s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rbrCoin{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}
.rbr-pop{position:absolute;z-index:6;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:.95rem;color:#6ee7b7;text-shadow:0 0 10px rgba(52,211,153,.9),0 1px 2px #000;pointer-events:none;animation:rbrPop 1.6s ease-out forwards;white-space:nowrap}
@keyframes rbrPop{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{transform:translate(-50%,-10px) scale(1.1);opacity:1}100%{transform:translate(-50%,-46px);opacity:0}}
/* สถานะว่าง / ออฟไลน์ */
.rbr.idle .rbr-bot svg .rbr-eye{animation:none;transform:scaleY(.18)}
.rbr.idle .rbr-body{animation-duration:4s}
.rbr-zz{position:absolute;top:-6px;right:2px;font-weight:800;font-size:.8rem;color:#bae6fd;opacity:0;animation:rbrZz 2.6s ease-in-out infinite}
.rbr-zz:nth-of-type(2){animation-delay:1.3s}
@keyframes rbrZz{0%{transform:translate(0,6px) scale(.6);opacity:0}40%{opacity:1}100%{transform:translate(10px,-18px) scale(1.1);opacity:0}}
.rbr.off{filter:grayscale(.85) brightness(.65)}
.rbr.off *{animation:none!important}
.rbr.off .rbr-scr b{color:#fca5a5;text-shadow:0 0 10px rgba(248,113,113,.7)}
/* หยุดทั้งห้องเมื่อพ้นจอ / เครื่องอ่อน */
.rbr.rbr-pause *,.rbr.rbr-pause::before,.rbr.rbr-pause::after{animation-play-state:paused!important}
html[data-fxq="0"] .rbr *{animation:none!important}
@media (prefers-reduced-motion:reduce){.rbr *{animation:none!important}}
@media (min-width:768px){.rbr{height:236px}.rbr-bot{width:74px}.rbr-bot svg{width:66px;height:82px}.rbr-scr b{font-size:1.45rem}.rbr-rack{height:120px;width:40px}.rbr-rack.l{left:16px}.rbr-rack.r{right:16px}.rbr-bots{padding:0 70px}}
@media (max-width:767px){.rbr{height:236px}.rbr-rack{display:none}.rbr-bots{padding:0 8px;bottom:10px}.rbr-scr{top:16px;min-width:0;max-width:86%;padding:5px 14px 6px}.rbr-scr b{font-size:1.12rem}.rbr-scr em{font-size:.62rem}}
@media (max-width:380px){.rbr-bot{width:54px}.rbr-bot svg{width:50px;height:64px}.rbr-tag{min-width:50px}}
/* ป้ายชวนซื้อ (ยังไม่มีห้อง) */
.rbr-tease{position:relative;display:block;width:100%;height:132px;margin-top:.8rem;padding:0;border-radius:16px;overflow:hidden;isolation:isolate;cursor:pointer;font:inherit;text-align:left;color:#fff;
  background:#0b1222;border:1px solid rgba(125,211,252,.35);box-shadow:0 14px 30px -18px rgba(30,64,175,.9);transition:transform .25s,box-shadow .25s}
.rbr-tease:hover{transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(56,189,248,.7)}
.rbr-tease .rt-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(6,10,24,.94) 0%,rgba(6,10,24,.78) 42%,rgba(6,10,24,.15) 72%,transparent),url(/assets/robot/bg_penthouse.webp?v=8) center 40%/cover no-repeat}
.rbr-tease .rt-holo{position:absolute;z-index:1;right:14px;top:16px;width:150px;height:92px;border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 40%,rgba(8,14,30,.2));border:1px solid rgba(186,230,253,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 18px -6px rgba(56,189,248,.7);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);overflow:hidden}
.rbr-tease .rt-holo .hl{position:absolute;left:10px;top:10px;width:52%;height:7px;border-radius:4px;background:linear-gradient(90deg,#fda4af,#fb7185)}
.rbr-tease .rt-holo .r{position:absolute;left:10px;right:10px;height:20px;padding-left:24px;background:url(/assets/holoicon/ic_bull.webp?v=1) left center/18px 18px no-repeat}
.rbr-tease .rt-holo .r::after{content:'';position:absolute;left:24px;top:7px;width:40%;height:5px;border-radius:3px;background:rgba(255,255,255,.55)}
.rbr-tease .rt-holo .r::before{content:'';position:absolute;right:0;top:6px;width:30%;height:7px;border-radius:3px;background:#34d399}
.rbr-tease .rt-holo .r.b{top:32px}.rbr-tease .rt-holo .r.s{top:60px;background-image:url(/assets/holoicon/ic_bear.webp?v=1)}.rbr-tease .rt-holo .r.s::before{background:#fb7185}
.rbr-tease .rt-holo::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 42%,transparent 54%);background-size:250% 100%;animation:rtSheen 4.5s ease-in-out infinite}
@keyframes rtSheen{0%,55%{background-position:140% 0}100%{background-position:-60% 0}}
.rbr-tease .rt-bot{position:absolute;z-index:2;bottom:-4px;right:150px;height:124px;width:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6));animation:rtBob 3.6s ease-in-out infinite}
.rbr-tease .rt-bot.b2{right:212px;height:112px;z-index:1;opacity:.92;animation-delay:-1.8s}
@keyframes rtBob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.rbr-tease .rt-txt{position:absolute;z-index:3;left:16px;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:min(58%,330px);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.rbr-tease .rt-txt small{font-size:.62rem;font-weight:800;letter-spacing:.22em;color:#7dd3fc}
.rbr-tease .rt-txt b{font-size:1.08rem;font-weight:800;line-height:1.25;color:#fff;text-shadow:0 0 14px rgba(56,189,248,.55),0 1px 3px rgba(0,0,0,.9)}
.rbr-tease .rt-txt em{font-style:normal;font-size:.72rem;line-height:1.35;color:#cbd5e1}
.rbr-tease .rt-cta{margin-top:6px;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:800;color:#0b1222;background:linear-gradient(90deg,#fde68a,#f59e0b);box-shadow:0 4px 14px -4px rgba(245,158,11,.8)}
.rbr-tease .rt-cta i{font-style:normal;font-size:.95rem;line-height:1;transition:translate .2s}.rbr-tease:hover .rt-cta i{translate:3px 0}
@media (max-width:520px){.rbr-tease{height:150px}.rbr-tease .rt-holo{width:96px;height:72px;top:12px;right:10px;z-index:1}.rbr-tease .rt-holo .r.b{top:24px}.rbr-tease .rt-holo .r.s{top:46px}
  .rbr-tease .rt-bot{right:14px;height:132px}.rbr-tease .rt-bot.b2{display:none}.rbr-tease .rt-txt{max-width:62%;left:14px}.rbr-tease .rt-txt b{font-size:.95rem}}
html[data-fxq="0"] .rbr-tease *,.rbr-tease[hidden]{animation:none!important}
.rbr-tease[hidden]{display:none}
#openPositionsCard.has-room #openPositionsHint{display:none}
/* [18 ต.ค. user "ทำการ์ดให้เต็มๆ · เอากรอบขาวที่มี Bot Online ออก ให้เหลือกรอบห้องบอทอย่างเดียว"] มีห้องโรบอท = ไม่มีการ์ดขาวครอบ ห้องเต็มความกว้าง
   หัวข้อ BUY/SELL ซ่อน (จอโฮโลแกรมในห้องบอกอยู่แล้ว) · ป้าย Bot Online ย้ายเข้ามุมขวาล่างในห้อง (JS roomSync) · ป้ายจำนวนไม้อยู่มุมห้อง */
#dashboardView #openPositionsCard.has-room,#openPositionsCard.has-room{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;gap:.6rem}
#openPositionsCard.has-room>.open-pos-head{display:none}
#openPositionsCard.has-room>.rbr{margin-top:0}
#openPositionsCard.has-room .open-pos-count-badge{top:-.45rem;right:-.45rem;z-index:50}
.open-pos-count-badge{display:none!important} /* [21 ต.ค. user "เลขแดงมุมขวาการ์ดเอาออก"] */
#openPositionsCard.has-room .bot-ctl{margin-right:0;margin-bottom:0}
.rbr>.bot-status-badge{bottom:5px;left:6px;right:auto;top:auto;z-index:46;gap:.28rem;padding:.08rem .42rem .08rem .34rem;font-size:.56rem;letter-spacing:0;background:rgba(6,14,26,.45);border:0;box-shadow:none;opacity:.85;pointer-events:none} /* [18 ต.ค. user "Bot Online ย้ายไปมุม ไม่รกห้อง"] ป้ายเล็กมุมล่างซ้าย */
.rbr>.bot-status-badge .bot-status-dot{width:.38rem;height:.38rem;box-shadow:none!important}
.rbr>.bot-status-badge.is-online{color:#6ee7b7}.rbr>.bot-status-badge.is-offline{color:#fca5a5}
.pos-toast{display:flex;align-items:flex-start;gap:9px;margin-left:auto;width:fit-content;max-width:min(80%,440px);padding:8px 13px 8px 11px;border-radius:14px;
  background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.28);box-shadow:0 6px 18px -12px rgba(16,185,129,.6)}
.pos-toast .pt-dot{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:ptPulse 2.2s ease-out infinite}
@keyframes ptPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}80%,100%{box-shadow:0 0 0 7px rgba(16,185,129,0)}}
.pos-toast .pt-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.pos-toast #openPositionsTitle{margin:0;font-size:.84rem;font-weight:700;line-height:1.35}
.pos-toast #openPositionsHint{display:block!important;margin:0;font-size:.72rem;line-height:1.35;opacity:.72}
#openPositionsCard.st-idle .open-pos-head{display:none}
@media (max-width:520px){.pos-toast{max-width:88%}}
html[data-fxq="0"] .pos-toast .pt-dot{animation:none}
/* [19 ต.ค. user "ร้านค้าเปิดแล้วค้าง"] ห้องลองชุดเปิดมาเป็นภาพนิ่ง + ปุ่มเล่นแบบเคลื่อนไหว · ป้าย "ขยับได้" บนรูปโปรไฟล์ในตาราง */
.sp-room.still{position:relative}
.sp-room.still .rbr,.sp-room.still .rbr *,.sp-room.still .rbr *::before,.sp-room.still .rbr *::after{animation:none!important;transition:none!important}
.sp-room.still .sp-play{position:absolute;z-index:6;left:8px;top:8px;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;border:1px solid rgba(246,210,122,.7);border-radius:999px;padding:.3rem .8rem .3rem .35rem;font:inherit;font-size:.72rem;font-weight:800;color:#1d1405;background:linear-gradient(135deg,#fff1b8,#f2c14e 55%,#c98d26);box-shadow:0 8px 20px -8px rgba(0,0,0,.7);cursor:pointer}
.sp-room.still .sp-play i{width:22px;height:22px;border-radius:50%;background:#1d1405;position:relative;flex:none}
.sp-room.still .sp-play i::after{content:'';position:absolute;left:8px;top:6px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #f2c14e}
.sp-room.still .sp-play:active{transform:scale(.96)}
.shop-it .ic.av{position:relative}.shop-it .ic.av .avm{position:absolute;z-index:2;bottom:2px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.6rem;font-weight:800;padding:.08rem .42rem;border-radius:999px;color:#fff;background:linear-gradient(135deg,#ec4899,#8b5cf6)}
.sp-room{margin-top:.6rem}.sp-room .rbr{height:170px;margin:0}.sp-room .rbr-bot{width:54px}.sp-room .rbr-bot svg{width:50px;height:64px}.sp-room .rbr-bots{padding:0 40px}.sp-room .rbr-rack{height:72px;width:28px}
/* [16 ต.ค. user "เมนูย่อยเอาไอคอนออกให้หมด"] */
/* [16 ต.ค. user "เมนูย่อยร้านค้าขยับขวา ให้แยกจากเมนูหลักชัด"] จอกว้างเท่านั้น (มือถือเป็นแถบเลื่อนแนวนอน) */
/* [16 ต.ค.] หุ่นหลายแถว + ย่อขนาดอัตโนมัติ (--rs) ให้เห็นครบทุกไม้ */
.rbr{--rs:1;transition:height .35s ease}
.rbr-bots{top:98px;bottom:10px!important;flex-wrap:wrap;align-content:center;row-gap:4px}
.rbr-bot{zoom:var(--rs);width:72px!important}
@media (min-width:768px){.rbr-bot{width:88px!important}}
.rbr-bots{column-gap:calc(6px * var(--rs))!important;justify-content:center}
.rbr-more{margin-bottom:0}
.rbr-scr em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbr-tag{min-width:0}
@media (min-width:768px){.rbr-bots{top:112px}}
.sp-room .rbr-bots{top:90px}
/* [16 ต.ค. user "ไอคอนช่องเงินรก เอาออก"] */
#heroCombo .profit-stat-label::before{display:none!important}
/* [16 ต.ค.] สกินหุ่น + ต้นไม้เงินทอง */
.rbr-tail{transform-origin:44px 56px;animation:rbrTail 1.4s ease-in-out infinite}
@keyframes rbrTail{50%{transform:rotate(-14deg)}}
.rbr-glint{animation:rbrSpark 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;opacity:0}
.rbr-deco{position:absolute;left:8px;bottom:6px;width:44px;height:72px;z-index:1;pointer-events:none}
.rbr-deco svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.mt-c{fill:url(#rbrCoin);stroke:#92400e;stroke-width:.6}
.mt-crown{transform-origin:22px 44px;animation:mtSway 4s ease-in-out infinite}
@keyframes mtSway{50%{transform:rotate(2.5deg)}}
.rbr-deco.rich .mt-c{animation:mtShine 2s ease-in-out infinite;animation-delay:calc(var(--i) * .22s)}
@keyframes mtShine{50%{filter:brightness(1.45) drop-shadow(0 0 3px #fde68a)}}
.mt-drop{position:absolute;left:18px;top:26px;width:8px;height:8px;border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 30%,#fff7d1,#fcd34d 45%,#b45309)}
.rbr-deco.rich .mt-drop{animation:mtDrop 3.2s ease-in infinite}
.rbr-deco.rich .mt-drop:nth-of-type(2){left:28px;animation-delay:1.6s}
@keyframes mtDrop{0%{opacity:0;transform:translateY(0)}10%{opacity:1}80%{opacity:1;transform:translateY(38px)}100%{opacity:0;transform:translateY(42px)}}
@media (min-width:768px){.rbr-deco{left:66px;bottom:8px;width:56px;height:92px}}
/* [16 ต.ค.] หุ่นรูป 3D */
.rbr-fig{position:relative;width:62px;height:72px;display:flex;align-items:flex-end;justify-content:center}
.rbr-fig img{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55));animation:rbrHover 2.4s ease-in-out infinite;will-change:transform;user-select:none}
.rbr-fig.wide{width:78px}
.rbr-bot:nth-child(2n) .rbr-fig img{animation-delay:-.8s}.rbr-bot:nth-child(3n) .rbr-fig img{animation-delay:-1.5s}
.rbr-sh{position:absolute;left:18%;right:18%;bottom:-3px;height:6px;border-radius:50%;background:#34d399;opacity:.45;filter:blur(2px);animation:rbrShadow 2.4s ease-in-out infinite}
.rbr-sh.sell{background:#fb7185}
.rbr-fig.win img{animation:rbrJoy 1.6s ease-in-out infinite}
@keyframes rbrJoy{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-7px) rotate(-4deg)}60%{transform:translateY(-2px) rotate(3deg)}}
.rbr-fig.lose img{animation:rbrSad 3s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55)) saturate(.8)}
@keyframes rbrSad{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(2px) rotate(-3deg)}}
.rbr-fig.idle img{animation-duration:4.5s;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55)) brightness(.85)}
.rbr-fig .rbr-spark{position:absolute;z-index:2;top:2px;right:2px;width:10px;height:10px;opacity:0;background:#fde68a;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);transform-box:border-box}
.rbr-fig .rbr-spark.s2{top:22px;right:auto;left:0;width:7px;height:7px;animation-delay:.9s!important}
.rbr-fig.win .rbr-spark{animation:rbrSpark 1.8s ease-in-out infinite}
.rbr-badge{position:absolute;z-index:3;right:-2px;bottom:10px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:900;color:#fff;
  background:radial-gradient(circle at 35% 30%,#6ee7b7,#059669);box-shadow:0 0 10px rgba(16,185,129,.8),0 2px 4px rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.8)}
.rbr-badge.sell{background:radial-gradient(circle at 35% 30%,#fda4af,#e11d48);box-shadow:0 0 10px rgba(225,29,72,.8),0 2px 4px rgba(0,0,0,.5)}
.rbr-bot.buy .rbr-badge{animation:rbrLift 1.6s ease-in-out infinite}.rbr-bot.sell .rbr-badge{animation:rbrPush 1.6s ease-in-out infinite}
.rbr.idle .rbr-fig img{animation-duration:4.5s}
.rbr-zz{z-index:3}
.rbr-deco img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));transform-origin:50% 100%;animation:mtSway 4s ease-in-out infinite}
.rbr-deco{width:52px;height:70px}
.rbr-deco.rich img{animation:mtSway 4s ease-in-out infinite,mtGlow 2.2s ease-in-out infinite}
@keyframes mtGlow{50%{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(253,230,138,.85)) brightness(1.15)}}
@media (min-width:768px){.rbr-fig{width:72px;height:84px}.rbr-fig.wide{width:92px}.rbr-deco{width:64px;height:88px}.rbr-badge{width:22px;height:22px;font-size:11px}}
.rbr-fig.rbr-swap img{animation:rbrPopIn .45s cubic-bezier(.2,.9,.3,1.3) both!important}
@keyframes rbrPopIn{0%{transform:scale(.7) rotate(-8deg);opacity:.2}100%{transform:none;opacity:1}}
/* [16 ต.ค.] ฉากห้อง */
.rbr-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.rbr.has-scene>:is(.rbr-wall,.rbr-rack,.rbr-floor){display:none}
.rbr-scene .bgi{position:absolute;inset:0;background-size:cover;background-position:center 62%;animation:scDrift 30s ease-in-out infinite alternate}
@keyframes scDrift{to{transform:scale(1.06) translateX(-1.5%)}}
.rbr-scene .bgv{width:100%;height:100%;object-fit:cover;object-position:center 62%;animation:none;display:block}
.rbr-scene .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,18,.55) 0%,rgba(3,6,18,.15) 38%,rgba(3,6,18,.1) 60%,rgba(3,6,18,.55) 100%)}
.rbr-scene .fx{position:absolute;inset:0}
.rbr-scene .fx i{position:absolute;display:block}
/* ห้องนิรภัย: ประกายบนทอง + แสงกวาด */
.sc-vault .g{left:var(--x);top:var(--y);width:14px;height:14px;background:#fff8d6;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 4px #fde68a);opacity:0;animation:scGlint 3s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes scGlint{0%,60%,100%{opacity:0;transform:scale(.3) rotate(0)}75%{opacity:1;transform:scale(1) rotate(45deg)}}
.sc-vault .sweep{inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,236,170,.16) 48%,rgba(255,236,170,.05) 55%,transparent 65%);background-size:250% 100%;animation:scSweep 7s ease-in-out infinite}
@keyframes scSweep{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
/* อวกาศ: ดาวระยิบ + ดาวตก */
.sc-space .stars{inset:0 0 45% 0;background:radial-gradient(1.5px 1.5px at 18% 22%,#fff,transparent),radial-gradient(1px 1px at 32% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 61% 18%,#e9d5ff,transparent),radial-gradient(1px 1px at 74% 35%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 30%,#fff,transparent),radial-gradient(1px 1px at 86% 24%,#c7d2fe,transparent);animation:scTwinkle 2.6s ease-in-out infinite alternate}
@keyframes scTwinkle{to{opacity:.25}}
.sc-space .shoot{top:12%;left:70%;width:90px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));opacity:0;transform:rotate(-20deg);animation:scShoot 7s ease-in infinite}
.sc-space .shoot.s2{top:26%;left:40%;animation-delay:3.6s;animation-duration:9s}
@keyframes scShoot{0%,88%{opacity:0;translate:0 0}90%{opacity:1}100%{opacity:0;translate:-160px 58px}}
/* ใต้ทะเล: ฟองอากาศ + แสงใต้น้ำ */
.sc-ocean .ray{inset:-10% 20% 30% 20%;background:linear-gradient(180deg,rgba(186,230,253,.22),transparent 70%);clip-path:polygon(35% 0,65% 0,95% 100%,5% 100%);animation:scRay 6s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes scRay{0%{transform:skewX(-6deg);opacity:.6}100%{transform:skewX(6deg);opacity:1}}
.sc-ocean .b{left:var(--x);bottom:-12px;width:8px;height:8px;border-radius:50%;border:1.3px solid rgba(224,242,254,.75);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),transparent 60%);animation:scBub 6s linear infinite;animation-delay:var(--d)}
@keyframes scBub{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(6px,-90px)}100%{transform:translate(-4px,-200px);opacity:0}}
/* นีออน: ฝน + ไฟกะพริบ */
.sc-neon .rain{inset:-20% 0 0 0;background:repeating-linear-gradient(100deg,transparent 0 22px,rgba(199,210,254,.18) 22px 23px,transparent 23px 47px);background-size:200px 160px;animation:scRain .7s linear infinite}
@keyframes scRain{to{background-position:-30px 160px}}
.sc-neon .flick{inset:0;background:radial-gradient(40% 50% at 22% 35%,rgba(236,72,153,.22),transparent 70%),radial-gradient(35% 45% at 80% 40%,rgba(34,211,238,.18),transparent 70%);animation:scFlick 4s steps(1) infinite}
@keyframes scFlick{0%,100%{opacity:1}42%{opacity:.4}44%{opacity:1}46%{opacity:.55}48%,90%{opacity:1}92%{opacity:.6}}
.rbr.has-scene .rbr-scr{background:linear-gradient(180deg,rgba(8,20,45,.72),rgba(8,20,45,.55))}
html[data-fxq="0"] .rbr-scene .bgi{animation:none}
/* [16 ต.ค.] การ์ดสินค้าห้องโรบอท = รูปจริง */
.shop-it .ic.rbx{position:relative;width:100%;height:92px;border-radius:12px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;gap:4px;padding-bottom:4px;
  background:radial-gradient(120% 90% at 50% 0%,#1d2d5c,#0d1633 55%,#070b1c);box-shadow:inset 0 0 0 1px rgba(125,211,252,.25)}
.shop-it .ic.rbx::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,transparent,rgba(56,189,248,.18));pointer-events:none}
.shop-it .ic.rbx .bot{position:relative;z-index:1;height:80px;max-width:46%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.5));transition:transform .2s}
.shop-it .ic.rbx.lab .bot{height:70px}
.shop-it:hover .ic.rbx .bot{transform:translateY(-3px)}
.shop-it .ic.rbx.bg .bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop-it .ic.rbx.bg .bot{height:52px;margin-bottom:2px}
.shop-it .ic.rbx.bg::after{display:none}
/* [16 ต.ค.] โหมดจัดห้อง */
.rbr-edbtn{position:absolute;z-index:8;left:26px;top:10px;border:1px solid rgba(125,211,252,.5);background:rgba(2,6,23,.6);color:#e0f2fe;font:inherit;font-size:.7rem;font-weight:700;padding:.22rem .6rem;border-radius:999px;cursor:pointer;opacity:.75;transition:opacity .15s}
.rbr-edbtn:hover{opacity:1}
.rbr.rbr-edit .rbr-edbtn{display:none}
.rbr-sndbtn{position:absolute;z-index:8;left:88px;top:10px;width:26px;height:24px;display:grid;place-items:center;border:1px solid rgba(125,211,252,.5);background:rgba(2,6,23,.6);color:#94a3b8;border-radius:999px;cursor:pointer;opacity:.75;padding:0;transition:opacity .15s,color .15s}
.rbr-fsbtn{position:absolute;z-index:47;right:10px;top:10px;width:28px;height:26px;display:grid;place-items:center;border:1px solid rgba(125,211,252,.5);background:rgba(2,6,23,.6);color:#e0f2fe;border-radius:9px;cursor:pointer;opacity:.8;padding:0}
.rbr-dnbtn{position:absolute;z-index:47;right:44px;top:10px;width:28px;height:26px;display:grid;place-items:center;border:1px solid rgba(125,211,252,.5);background:rgba(2,6,23,.6);color:#e0f2fe;border-radius:9px;cursor:pointer;opacity:.8;padding:0;font-size:14px;line-height:1}.rbr-dnbtn.on{background:rgba(14,116,144,.85);border-color:#67e8f9;opacity:1}.rbr.rbr-edit .rbr-dnbtn{display:none}.rbr.rbr-fs .rbr-dnbtn{width:34px;height:32px;right:56px;top:14px;opacity:.9;font-size:17px}
.rbr-hubbtn{position:absolute;z-index:47;right:78px;top:10px;width:28px;height:26px;display:grid;place-items:center;border:1px solid rgba(251,191,36,.6);background:rgba(2,6,23,.6);color:#fcd34d;border-radius:9px;cursor:pointer;opacity:.9;padding:0}.rbr-hubbtn:hover{opacity:1;background:rgba(120,80,0,.55)}.rbr-hubbtn svg{width:16px;height:16px}.rbr.rbr-edit .rbr-hubbtn{display:none}.rbr.rbr-fs .rbr-hubbtn{width:34px;height:32px;right:98px;top:14px}
.rbr-fsbtn:hover{opacity:1}.rbr.rbr-edit .rbr-fsbtn{display:none}
.rbr.rbr-fs{position:fixed!important;left:0;top:0;width:var(--fsw)!important;height:var(--fsh)!important;max-width:none!important;margin:0!important;border-radius:0!important;transform-origin:0 0;z-index:2147483600;transition:none!important}
.rbr.rbr-fs .rbr-fsbtn{width:34px;height:32px;right:14px;top:14px;opacity:.9}
.rbr.rbr-fs.rbr-fsrot .rbr-edbtn{display:none}
.appv-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2147483000;border:0;border-radius:999px;padding:.55rem 1.1rem;font:inherit;font-size:.82rem;font-weight:700;color:#1d1405;background:linear-gradient(135deg,#fde68a,#e2a93b);box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;white-space:nowrap}
/* [20 ต.ค. user "เต็มจอแล้วจอโฮโลแกรมใหญ่มาก กินพื้นที่"] เต็มจอ = จอโฮโลแคบลง สูงตามเนื้อหา */
.rbr.rbr-fs .rbr-holo{width:min(30%,250px)!important;top:58px!important;bottom:auto!important;max-height:calc(100% - 72px);overflow:hidden}
.rbr-fs-anc{transform:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;contain:none!important;will-change:auto!important;perspective:none!important;z-index:auto!important;isolation:auto!important}
html.rbr-fs-on,html.rbr-fs-on body{overflow:hidden!important;overscroll-behavior:none}
html.rbr-fs-on .rbr-fs-bk{position:fixed;inset:0;background:#000;z-index:2147483599}
.rbr-sndbtn:hover{opacity:1}.rbr-sndbtn.on{color:#6ee7b7;border-color:rgba(110,231,183,.6);opacity:.95}.rbr.rbr-edit .rbr-sndbtn{display:none}
.rbr-edbar{position:absolute;z-index:9;left:8px;right:8px;top:8px;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;padding:.4rem .5rem;border-radius:12px;background:rgba(2,6,23,.82);border:1px solid rgba(125,211,252,.45);color:#e0f2fe;font-size:.7rem}
.rbr-edbar span{flex:1;min-width:120px;opacity:.9}
.rbr-edbar button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:700;padding:.25rem .65rem;border-radius:999px;cursor:pointer}
.rbr-edbar button.ok{background:linear-gradient(135deg,#fde68a,#e2a93b);color:#1d1405;border:0}
.rbr-edbar.out{position:relative;left:auto;right:auto;top:auto;margin:.55rem 0 .2rem;z-index:auto}
.rbr-edbar .tx{flex:1 1 100%;min-width:0}.rbr-edbar .sz,.rbr-edbar .bt{flex:none;min-width:0;opacity:1;display:inline-flex;align-items:center;gap:.35rem}
.rbr-edbar .sz{display:none}.rbr-edbar.has-sel .sz{display:inline-flex}.rbr-edbar .sz .nm{font-style:normal;font-weight:700;color:#fde68a;margin-right:.1rem}.rbr-edbar .bt{margin-left:auto}
.rbr.rbr-edit .rbr-holo{z-index:5}.rbr.rbr-edit .rbr-sel{z-index:8!important;outline-color:#fde68a!important}
.rbr-rz.rbr-hrz{right:auto;bottom:auto;z-index:41;touch-action:none}
@media (pointer:coarse){.rbr-rz,.rbr-tl{width:32px;height:32px;font-size:16px}.rbr-x{width:28px;height:28px}.rbr-edbar button{padding:.45rem .85rem}}
.rbr.rbr-edit :is(.rbr-deco,.rbr-bots){pointer-events:auto;cursor:grab;touch-action:none;outline:2px dashed rgba(125,211,252,.75);outline-offset:2px;border-radius:10px}
.rbr.rbr-edit :is(.rbr-deco,.rbr-bots).dragging{cursor:grabbing;outline-color:#fde68a}
.rbr.rbr-edit .rbr-deco{z-index:4}
.rbr-rz{position:absolute;right:-10px;bottom:-10px;z-index:5;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;color:#1d1405;background:#fde68a;box-shadow:0 2px 6px rgba(0,0,0,.5);cursor:nwse-resize}
.rbr-bots,.rbr-deco{transform-origin:center center}
.rbr.rbr-dragging .rbr-holo,.rbr.rbr-dragging .rbr-holo *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation-play-state:paused!important;transition:none!important}
.rbr.rbr-dragging :is(.rbr-holo,.rbr-bots,.rbr-deco,.rbr-dk){will-change:transform}
.rbr.rbr-edit .rbr-holo{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.rbr-tl{position:absolute;left:4px;top:4px;z-index:40;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:900;color:#06222e;background:#7dd3fc;box-shadow:0 2px 6px rgba(0,0,0,.5);cursor:grab;touch-action:none}
.rbr-holo>.rbr-tl{pointer-events:auto}
.rbr.rbr-edit .rbr-bots{left:6px;right:6px}
.rbr-bots{z-index:2}.rbr-deco{z-index:1}.rbr-scene{z-index:0}
.rbr-bots>.rbr-rz{right:6px;bottom:4px}
.rbr.rbr-edit .rbr-deco{z-index:3}
/* [20 ต.ค.] ของแต่งห้องชุดใหม่: ตู้เซฟทองคำ (ทองตามกำไรเดือนนี้) · ชั้นถ้วยแรงค์ · อาร์ตทอย — ลาก/ย่อขยายได้เหมือนต้นไม้ */
.rbr-dk{position:absolute;z-index:1;pointer-events:none;transform-origin:center center}
.rbr-dk img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));-webkit-user-drag:none}
.dk-safe{left:50px;bottom:4px;width:60px}
.dk-shelf{left:8px;top:72px;width:92px}
.dk-toy{left:112px;bottom:5px;width:42px}
@media (min-width:768px){.dk-safe{left:62px;width:74px}.dk-shelf{left:66px;top:70px;width:118px}.dk-toy{left:142px;width:52px}}
.dk-toy .tw{animation:dkFloat 3.2s ease-in-out infinite}
.dk-toy.hop .tw{animation:dkHop .55s cubic-bezier(.3,1.6,.5,1) 2}
.dk-toy .tw::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) no-repeat;background-size:250% 100%;-webkit-mask:var(--dkm) center/contain no-repeat;mask:var(--dkm) center/contain no-repeat;animation:dkShine 4.5s ease-in-out infinite;opacity:.0}
.dk-toy.t-gold .tw::after,.dk-toy.t-holo .tw::after{opacity:1}
.dk-toy .tw{position:relative}
.dk-safe.lv3 img{filter:drop-shadow(0 0 7px rgba(253,224,71,.55)) drop-shadow(0 4px 6px rgba(0,0,0,.55))}
@keyframes dkFloat{50%{transform:translateY(-3px)}}
@keyframes dkHop{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px) rotate(-6deg)}}
@keyframes dkShine{0%,55%{background-position:120% 0}85%,100%{background-position:-60% 0}}
html[data-fxq="0"] .dk-toy .tw,html[data-fxq="0"] .dk-toy .tw::after{animation:none}
@media (prefers-reduced-motion:reduce){.dk-toy .tw,.dk-toy .tw::after{animation:none}}
.rbr.rbr-edit .rbr-dk{pointer-events:auto;cursor:grab;touch-action:none;outline:2px dashed rgba(125,211,252,.75);outline-offset:2px;border-radius:10px;z-index:6}
.rbr.rbr-edit .rbr-dk.dragging{cursor:grabbing;outline-color:#fde68a}
.ic.rbx.dkx .bot{max-width:88%;height:92px}
.rbr-x{position:absolute;left:-10px;top:-10px;z-index:7;width:22px;height:22px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:#dc2626;box-shadow:0 2px 6px rgba(0,0,0,.5);cursor:pointer}
.rbr-x:disabled{opacity:.5}
.shop-it .shop-disc.shop-disc{position:absolute;left:4px;top:4px;z-index:3;width:28px;height:28px;min-width:0;min-height:0;padding:0;margin:0;border:1px solid rgba(220,38,38,.4)!important;border-radius:50%!important;display:grid;place-items:center;color:#dc2626!important;background:rgba(255,255,255,.95)!important;box-shadow:0 2px 6px rgba(0,0,0,.2)!important;cursor:pointer;flex:none}
.shop-it .shop-disc.shop-disc:hover{background:#fee2e2!important}
.rbr.rbr-edit,.rbr.rbr-edit *{user-select:none;-webkit-user-select:none}
.rbr.rbr-edit .rbr-scr{opacity:.35}
.shop-it .ic.rbx .rbx-anim{position:absolute;z-index:2;bottom:6px;left:6px;font-size:.66rem;font-weight:800;padding:.12rem .45rem;border-radius:999px;color:#fff;background:linear-gradient(135deg,#ec4899,#8b5cf6);box-shadow:0 2px 8px rgba(139,92,246,.6)}
.rbr-fig img[src*="robot_anim"]{animation:none!important} /* ภาพขยับเองอยู่แล้ว ไม่ต้องลอยซ้อน */
/* ==== [16 ต.ค.] ห้องแบบหุ่นพระเอกตัวเดียว + จอโฮโลแกรม ==== */
.rbr.hero-mode{height:236px}
.rbr.hero-mode .rbr-bots{left:2%;right:auto;top:auto!important;bottom:1px!important;width:44%;height:85%;padding:0!important;display:flex;align-items:flex-end;justify-content:center;flex-wrap:nowrap;z-index:2}
.rbr.hero-mode .rbr-bot.hero{width:100%!important;height:100%;zoom:1}
.rbr.hero-mode .rbr-bot.hero .rbr-fig{width:100%;height:100%}
.rbr.hero-mode .rbr-bot.hero .rbr-fig img,.rbr.hero-mode .rbr-bot.hero .rbr-fig video{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.rbr-fig video{display:block;pointer-events:none;background:transparent}
.rbr.hero-mode .rbr-sh{left:22%;right:22%;bottom:-2px;height:10px}
.rbr.hero-mode .rbr-badge{right:8%;bottom:16%;width:26px;height:26px;font-size:12px}
.rbr-fig.anim.win video,.rbr-fig.anim.win img{filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(52,211,153,.55))}
.rbr-fig.anim.lose video,.rbr-fig.anim.lose img{filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)) saturate(.75) brightness(.9)}
.rbr-winv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:6;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .25s}
.rbr-winv.on{opacity:1}
.rbr-wina{position:absolute;left:50%;top:50%;z-index:7;pointer-events:none;white-space:nowrap;font:800 1.9rem/1 'IBM Plex Mono',monospace;color:#fde68a;opacity:0;transform:translate(-50%,-50%);
  text-shadow:0 0 10px rgba(250,204,21,.85),0 0 26px rgba(34,211,238,.55),0 2px 2px rgba(0,0,0,.7)}
.rbr-wina.on{animation:rbrAmt 2.6s ease-out 2.5s both}.rbr-wina.on.now{animation-delay:0s}
@keyframes rbrAmt{0%{opacity:0;transform:translate(-50%,-25%) scale(.6)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}24%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1;transform:translate(-50%,-75%)}100%{opacity:0;transform:translate(-50%,-95%)}}
@media (min-width:768px){.rbr-wina{font-size:2.4rem}}
.rbr-bot.hero.cheer .rbr-fig{animation:rbrCheer 1.6s cubic-bezier(.2,.8,.3,1.2)}
@keyframes rbrCheer{0%{transform:none}20%{transform:translateY(-14px) scale(1.06)}40%{transform:translateY(0) scale(1)}55%{transform:translateY(-6px)}70%,100%{transform:none}}
.rbr-holo{position:absolute;z-index:3;right:10px;top:84px;bottom:10px;width:52%;display:flex;flex-direction:column;gap:5px;justify-content:flex-start;padding:7px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(8,20,45,.66),rgba(8,20,45,.5));border:1px solid rgba(125,211,252,.4);box-shadow:0 0 20px -6px rgba(56,189,248,.55),inset 0 0 16px rgba(56,189,248,.12);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transform-origin:center}
.rbr-holo::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)}
.rbr-holo[hidden]{display:none}
.rbr-row{position:relative;display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.rbr-row .ar{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;color:#fff;background:radial-gradient(circle at 35% 30%,#6ee7b7,#059669);box-shadow:0 0 8px rgba(16,185,129,.7)}
.rbr-row.sell .ar{background:radial-gradient(circle at 35% 30%,#fda4af,#e11d48);box-shadow:0 0 8px rgba(225,29,72,.7)}
/* [17 ต.ค. user "ไอคอน buy/sell เดิมไม่สวย → กระทิง-หมีคริสตัล ใช้ฟรีทุกคน"] รูป 96px ~10KB · ลูกศรตัวอักษรซ่อน (ยังอยู่ให้โปรแกรมอ่านหน้าจอ) */
.rbr-row .ar.ar{width:28px;height:28px;border-radius:0;font-size:0;color:transparent;background:url(/assets/holoicon/ic_bull.webp?v=1) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 5px rgba(52,211,153,.5))}
.rbr-row.sell .ar.ar{background-image:url(/assets/holoicon/ic_bear.webp?v=1);filter:drop-shadow(0 0 5px rgba(244,63,94,.5))}
.rbr-holo .rbr-row .ar.ar{width:30px;height:30px}.rbr-holo.t-lg .rbr-row .ar.ar{width:36px;height:36px}.rbr-holo.t-sm .rbr-row .ar.ar{width:24px;height:24px}.hsk .rbr-holo .rbr-row .ar.ar{width:26px;height:26px}
.rbr-row .nm{display:flex;flex-direction:column;line-height:1.1;font-size:.66rem;font-weight:800;letter-spacing:.04em;color:#e0f2fe;min-width:0}
.rbr-row .nm small{font-size:.6rem;font-weight:600;opacity:.7;letter-spacing:0}
.rbr-row .v{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.82rem;font-weight:700;color:#f8fafc;white-space:nowrap;text-shadow:0 0 8px rgba(0,0,0,.6)}
.rbr-row .v.g{color:#6ee7b7}.rbr-row .v.r{color:#fca5a5}
.rbr-row.in{animation:rbrRowIn .6s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes rbrRowIn{from{transform:translateX(30px);opacity:0}}
.rbr-row.out{transform:translateX(30px);opacity:0}
.rbr-holo.t-lg{justify-content:center;gap:7px}
.rbr-holo.t-lg .rbr-row{padding:8px 10px}.rbr-holo.t-lg .rbr-row .v{font-size:1rem}.rbr-holo.t-lg .rbr-row .nm{font-size:.72rem}.rbr-holo.t-lg .ar{width:24px;height:24px;font-size:11px}
.rbr-holo.t-sm{gap:3px;padding:5px}.rbr-holo.t-sm .rbr-row{padding:3px 7px}.rbr-holo.t-sm .rbr-row .nm{flex-direction:row;gap:5px;align-items:baseline}.rbr-holo.t-sm .rbr-row .v{font-size:.74rem}.rbr-holo.t-sm .ar{width:16px;height:16px;font-size:8px}
.rbr-holo.t-grp{justify-content:center;gap:8px}.rbr-holo.t-grp .rbr-row{padding:9px 10px}.rbr-holo.t-grp .rbr-row .v{font-size:1.02rem}.rbr-holo.t-grp .nm{font-size:.78rem}
.rbr-more2{text-align:center;font-size:.62rem;color:#bae6fd;opacity:.85}
.rbr.hero-mode .rbr-scr{left:auto;right:10px;transform:none;top:12px;width:52%;min-width:0;max-width:none;padding:5px 10px 6px}
.rbr.hero-mode.idle .rbr-scr,.rbr.hero-mode.off .rbr-scr{left:auto;right:10px;top:50%;transform:translateY(-50%)}
.rbr.rbr-edit .rbr-holo{pointer-events:auto;cursor:grab;touch-action:none;outline:2px dashed rgba(125,211,252,.75);outline-offset:2px}
.rbr-holo>.rbr-rz{right:4px;bottom:4px}
@media (min-width:768px){
  .rbr.hero-mode{height:256px}
  .rbr.hero-mode .rbr-bots{left:6%;width:36%;height:90%} /* [18 ต.ค. user "ตัวละครก้าวมาข้างหน้า 2 ก้าว"] 80→85% · 86→90% · ชิดขอบล่างขึ้น */ /* [18 ต.ค. user "หุ่นใหญ่ขึ้นอีกนิด"] 72→80% · 78→86% */
  .rbr-holo,.rbr.hero-mode .rbr-scr{width:42%;right:16px}
  .rbr-holo{top:92px}
  .rbr-row .v{font-size:.9rem}.rbr-holo.t-lg .rbr-row .v{font-size:1.12rem}
  .rbr.hero-mode .rbr-rack{display:none}
}
.sp-room .rbr.hero-mode{height:190px}.sp-room .rbr-holo{top:70px}
/* [19 ต.ค. user "ตัวเลขในจอโฮโลแกรมห้องลองชุดล้นจอ ทำเล็กๆ"] ห้องลองชุดเล็ก → ย่อตัวหนังสือในจอ */
.sp-room .rbr-holo{padding:5px!important;gap:3px!important}
.sp-room .rbr-holo .hd{padding:1px 3px 4px!important}
.sp-room .rbr-holo .hd small{font-size:.48rem!important;letter-spacing:.02em!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-room .rbr-holo .hd b{font-size:.9rem!important;white-space:nowrap}
.sp-room .rbr-holo .hd em{font-size:.48rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sp-room .rbr-holo .rbr-row{padding:2px 5px!important;gap:4px!important}.sp-room .rbr-holo .rbr-row .nm{font-size:.5rem!important}.sp-room .rbr-holo .rbr-row .nm small{font-size:.46rem!important}.sp-room .rbr-holo .rbr-row .v{font-size:.6rem!important}
.sp-room .rbr-holo .ar{width:14px!important;height:14px!important;font-size:7px!important}
.sp-room .rbr-holo,.sp-room .rbr.hero-mode .rbr-holo{width:50%!important;right:6px!important;bottom:6px!important}.sp-room .rbr-holo .rbr-row .nm small{display:none}.sp-room .rbr-holo .rbr-row .v{margin-left:auto;letter-spacing:-.02em}
.rbr-holo{overflow-y:auto;scrollbar-width:none}.rbr-holo::-webkit-scrollbar{display:none}
.rbr-holo.t-sm .rbr-row{padding:2px 7px;min-height:0}.rbr-holo.t-sm .rbr-row .nm{font-size:.62rem}.rbr-holo.t-sm .rbr-row .v{font-size:.7rem}
.rbr-holo.t-grp{justify-content:space-evenly!important;gap:4px!important}.rbr-holo.t-grp .rbr-row{flex-wrap:wrap;row-gap:0;padding:5px 9px!important}.rbr-holo.t-grp .rbr-more2{display:none}.rbr-holo.t-grp .rbr-row .nm{white-space:nowrap;flex:1}.rbr-holo.t-grp .rbr-row .v{flex-basis:100%;text-align:right;font-size:1.1rem!important}
@media (min-width:768px){.rbr-holo.t-grp .rbr-row{flex-wrap:nowrap}.rbr-holo.t-grp .rbr-row .v{flex-basis:auto}}
.rbr-bot.hero .rbr-badge{display:none}
.rbr.hero-mode .rbr-zz{top:6%;right:18%;font-size:1rem}
@media (min-width:768px){.rbr-holo.t-sm .rbr-row{padding:4px 9px}.rbr-holo.t-sm .rbr-row .v{font-size:.82rem}}
/* ==== [16 ต.ค. user เลือกแบบ I] จอโฮโลแกรมแผ่นเดียว เอียงเบาๆ + หุ่นเอนเข้าหาจอ ==== */
.rbr.hero-mode{perspective:800px}
.rbr.hero-mode.holo-on .rbr-scr{display:none}
.rbr.hero-mode .rbr-bots{transform-origin:bottom center}
.rbr.hero-mode .rbr-bot.hero{transform:rotate(5deg) translateX(3%);transform-origin:bottom center}
.rbr.hero-mode .rbr-holo{top:14px!important;bottom:14px;width:50%;right:12px;padding:10px 9px;gap:4px;justify-content:flex-start;border-radius:16px;
  transform:rotateY(-9deg);transform-origin:right center;
  background:linear-gradient(115deg,rgba(14,165,233,.16),rgba(8,20,45,.55) 40%,rgba(8,20,45,.45));border:1px solid rgba(125,211,252,.28);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 18px 40px -18px rgba(14,165,233,.6);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.rbr.hero-mode .rbr-holo::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,rgba(125,211,252,.9),transparent 35%,transparent 65%,rgba(167,139,250,.8));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.rbr-holo .hd{position:relative;flex:none;padding:2px 4px 7px;border-bottom:1px solid rgba(125,211,252,.25);margin-bottom:2px}
.rbr-holo>.hw{order:-1;position:relative;flex:none;overflow:hidden;display:flex;align-items:baseline;justify-content:space-between;gap:8px;max-height:0;opacity:0;margin:0;padding:0 8px;border-radius:9px;
  background:linear-gradient(90deg,rgba(16,185,129,.28),rgba(240,205,110,.2));border:1px solid rgba(110,231,183,.0);transition:max-height .35s ease,opacity .3s ease,padding .35s ease,margin .35s ease,border-color .35s ease}
.rbr-holo>.hw.on{max-height:3rem;opacity:1;padding:6px 8px;margin-bottom:4px;border-color:rgba(110,231,183,.55);box-shadow:0 0 16px rgba(16,185,129,.35) inset}
.rbr-holo>.hw.out{opacity:0;max-height:0;padding:0 8px;margin:0}
.rbr-holo>.hw small{font-size:.7rem;letter-spacing:.14em;color:#a7f3d0;font-weight:700;white-space:nowrap}
.rbr-holo>.hw b{font-family:'IBM Plex Mono',monospace;font-size:1.2rem;line-height:1.2;color:#6ee7b7;text-shadow:0 0 10px rgba(16,185,129,.8),0 0 2px #fff;white-space:nowrap}
.rbr-holo>.hw.done b{animation:rbrHwPop .5s ease-out}
.rbr-holo>.hw .sh{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);translate:-100% 0;pointer-events:none}
.rbr-holo>.hw.on .sh{animation:rbrHwSh 1.6s ease-out .3s 2}
@keyframes rbrHwSh{to{translate:100% 0}}
@keyframes rbrHwPop{40%{scale:1.12;color:#fff}100%{scale:1}}
html[data-fxq="0"] .rbr-holo>.hw{transition:none}
.rbr-holo .hd small{display:block;font-size:.58rem;letter-spacing:.12em;color:#7dd3fc}
.rbr-holo .hd b{display:block;font-family:'IBM Plex Mono',monospace;font-size:1.25rem;line-height:1.15;color:#f0f9ff;text-shadow:0 0 10px rgba(125,211,252,.6)}
.rbr-holo .hd>.hp.hp{position:absolute!important;bottom:7px;right:4px;top:auto;left:auto;z-index:5!important;display:flex;align-items:center;gap:3px;padding:0;pointer-events:none;opacity:.92}
.rbr-holo .hp small{display:none!important}
.rbr-holo .hd>.hp b{display:inline!important;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:.64rem!important;line-height:1!important;font-weight:600;color:#fde68a;text-shadow:0 0 6px rgba(251,191,36,.55);transition:color .6s ease,text-shadow .6s ease;white-space:nowrap}
.rbr-holo .hp i{flex:none;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;opacity:0;transition:opacity .5s ease}
.rbr-holo .hp[data-d=u] i{border-bottom:5px solid #6ee7b7;opacity:1}.rbr-holo .hp[data-d=u] b{color:#a7f3d0;text-shadow:0 0 6px rgba(52,211,153,.6)}
.rbr-holo .hp[data-d=d] i{border-top:5px solid #fca5a5;opacity:1}.rbr-holo .hp[data-d=d] b{color:#fecaca;text-shadow:0 0 6px rgba(248,113,113,.55)}
.sp-room .rbr-holo .hd>.hp.hp{bottom:4px!important;right:3px!important}.sp-room .rbr-holo .hd>.hp b{font-size:.56rem!important}
.rbr-holo .hd b.g{color:#6ee7b7;text-shadow:0 0 10px rgba(52,211,153,.7)}.rbr-holo .hd b.r{color:#fca5a5;text-shadow:0 0 10px rgba(248,113,113,.6)}
.rbr-holo .hd em{font-style:normal;font-size:.6rem;color:#bae6fd;opacity:.8}
.rbr.hero-mode .rbr-holo .rbr-row{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.07);border-radius:0;padding:4px 4px}
.rbr.hero-mode .rbr-holo .rbr-row:last-child{border-bottom:0}
.rbr.hero-mode .rbr-holo.t-lg{justify-content:flex-start;gap:2px}
.rbr.hero-mode .rbr-holo.t-lg .rbr-row{padding:6px 4px}.rbr.hero-mode .rbr-holo.t-lg .rbr-row .v{font-size:.95rem}
.rbr.hero-mode .rbr-holo.t-grp .rbr-row{padding:6px 4px!important}
.rbr.hero-mode .rbr-holo.t-grp{justify-content:flex-start!important}
@media (min-width:768px){.rbr.hero-mode .rbr-holo{width:42%;right:18px}.rbr-holo .hd b{font-size:1.45rem}}
/* [16 ต.ค. user "ตัวหนังสือห้องโรบอทให้คมชัด"] เอียงน้อยลง · ตัวหนังสืออยู่เหนือเส้นสแกน · glow แคบลง + เงาเข้มบางๆ ให้ขอบตัวอักษรชัด */
.rbr.hero-mode .rbr-holo{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.rbr.hero-mode .rbr-holo>*{position:relative;z-index:1}
.rbr.hero-mode .rbr-holo::after{opacity:.5}
.rbr-holo .hd b{font-weight:700;text-shadow:0 0 5px rgba(125,211,252,.45),0 1px 1px rgba(0,0,0,.7)}
.rbr-holo .hd b.g{text-shadow:0 0 5px rgba(52,211,153,.5),0 1px 1px rgba(0,0,0,.7)}.rbr-holo .hd b.r{text-shadow:0 0 5px rgba(248,113,113,.45),0 1px 1px rgba(0,0,0,.7)}
.rbr.hero-mode .rbr-holo .rbr-row .v{font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.65)}
.rbr.hero-mode .rbr-holo .rbr-row .nm,.rbr-holo .hd small,.rbr-holo .hd em{text-shadow:0 1px 1px rgba(0,0,0,.6)}
.rbr-holo .hd em{opacity:1}
/* [18 ต.ค. user "ลดขนาดจอโฮโลแกรมเข้าอีก ตัวหนังสือปรับให้บาลานซ์"] จอเล็กลง + ตัวอักษร/ไอคอนย่อตามสัดส่วน (ตัวละครเด่นขึ้น) */
.rbr.hero-mode .rbr-holo{width:42%;right:10px;top:18px!important;bottom:18px;padding:7px 8px;gap:3px}
.rbr.hero-mode .rbr-holo .hd{padding:1px 3px 5px}
.rbr.hero-mode .rbr-holo .hd small{font-size:.5rem}.rbr.hero-mode .rbr-holo .hd b{font-size:1.04rem}.rbr.hero-mode .rbr-holo .hd em{font-size:.54rem}
.rbr.hero-mode .rbr-holo .rbr-row{padding:3px 3px;gap:6px}.rbr.hero-mode .rbr-holo .rbr-row .nm{font-size:.58rem}.rbr.hero-mode .rbr-holo .rbr-row .nm small{font-size:.52rem}
.rbr.hero-mode .rbr-holo .rbr-row .v{font-size:.76rem}.rbr.hero-mode .rbr-holo.t-lg .rbr-row .v{font-size:.84rem}.rbr.hero-mode .rbr-holo.t-lg .rbr-row{padding:5px 3px}
.rbr.hero-mode .rbr-holo .rbr-row .ar.ar{width:22px;height:22px}.rbr.hero-mode .rbr-holo.t-lg .rbr-row .ar.ar{width:26px;height:26px}.rbr.hero-mode .rbr-holo.t-sm .rbr-row .ar.ar{width:18px;height:18px}
.rbr.hero-mode .rbr-holo>.hw b{font-size:1rem}.rbr.hero-mode .rbr-holo>.hw small{font-size:.6rem}
@media (min-width:768px){.rbr.hero-mode .rbr-holo{width:32%;right:22px;top:24px!important;bottom:24px;padding:9px 10px}
  .rbr.hero-mode .rbr-holo .hd b{font-size:1.2rem}.rbr.hero-mode .rbr-holo .hd small{font-size:.55rem}.rbr.hero-mode .rbr-holo .hd em{font-size:.58rem}
  .rbr.hero-mode .rbr-holo .rbr-row .v{font-size:.82rem}.rbr.hero-mode .rbr-holo.t-lg .rbr-row .v{font-size:.92rem}.rbr.hero-mode .rbr-holo .rbr-row .nm{font-size:.62rem}
  .rbr.hero-mode .rbr-holo .rbr-row .ar.ar{width:24px;height:24px}.rbr.hero-mode .rbr-holo.t-lg .rbr-row .ar.ar{width:28px;height:28px}}
/* ===== [17 ต.ค. user "จอโฮโลแกรมสวยอลังการ คุ้มเงิน"] สกินจอโฮโลแกรม — CSS ล้วน (ไม่มีรูป) · แอนิเมชันปิดเองที่เครื่องอ่อน (fxq 0) ===== */
.rbr[data-holo] .rbr-holo,.hsk .rbr-holo{isolation:isolate}
.rbr[data-holo] .rbr-holo>*,.hsk .rbr-holo>*{position:relative;z-index:2}
.rbr[data-holo] .rbr-holo .rbr-row{border-bottom-color:rgba(255,255,255,.09)}
.hsk{position:relative;overflow:hidden;background:radial-gradient(circle at 30% 30%,#1e293b,#020617)!important}
.hsk .rbr-holo{position:absolute!important;left:8px!important;top:7px!important;width:calc((100% - 16px) / .62)!important;height:calc((100% - 14px) / .62)!important;transform:scale(.62)!important;transform-origin:0 0!important;bottom:auto!important;right:auto!important;padding:7px 8px!important;gap:2px!important;display:flex;flex-direction:column;border-radius:12px;overflow:hidden}
.hsk .rbr-holo .hd{padding:0 2px 4px!important;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.18)}.hsk .rbr-holo .hd small{font-size:.5rem;letter-spacing:.14em}.hsk .rbr-holo .hd b{font-size:1rem!important;font-family:'IBM Plex Mono',monospace;display:block}
.hsk .rbr-row{display:flex;align-items:center;gap:5px;padding:3px 2px!important;border-bottom:1px solid rgba(255,255,255,.08)}.hsk .rbr-row .nm{font-size:.62rem;font-weight:800;color:#e2e8f0}.hsk .rbr-row .v{font-size:.72rem!important;margin-left:auto;font-family:'IBM Plex Mono',monospace}
.hsk .ar{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:7px;font-style:normal;color:#fff;background:#10b981}.hsk .sell .ar{background:#ef4444}
@keyframes hkSpin{to{transform:rotate(1turn)}}
@keyframes hkSweep{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes hkFall{to{background-position:0 400px,60px 400px,120px 400px}}
@keyframes hkRain{to{background-position:0 300px,0 220px}}
@keyframes hkStars{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes hkNeb{to{background-position:200% 50%}}
@keyframes hkFlick{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.6}97%{opacity:1}}
@keyframes hkScan{0%{top:-10%}100%{top:110%}}
@keyframes hkLamp{0%,100%{opacity:.75;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
/* --- 👑 ทองคำจักรพรรดิ --- */
:is(.rbr[data-holo="gold"],.hsk[data-holo="gold"]) .rbr-holo{background:linear-gradient(160deg,rgba(66,42,6,0.30),rgba(20,12,2,0.30) 55%,rgba(48,30,4,0.30))!important;border:1px solid rgba(250,204,21,.55)!important;
  box-shadow:0 0 0 1px rgba(255,236,170,.15) inset,0 0 22px rgba(250,204,21,.35),0 18px 40px -16px rgba(250,204,21,.55)!important}
:is(.rbr[data-holo="gold"],.hsk[data-holo="gold"]) .rbr-holo::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(120deg,#fef3c7,#d4a017 25%,#7c5a10 45%,#fde68a 60%,#b8860b 80%,#fff7d6)!important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
:is(.rbr[data-holo="gold"],.hsk[data-holo="gold"]) .rbr-holo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;z-index:1;pointer-events:none;opacity:1!important;
  background:linear-gradient(90deg,transparent,rgba(255,240,190,.28),transparent)!important;animation:hkSweep 7.5s ease-in-out infinite}
:is(.rbr[data-holo="gold"],.hsk[data-holo="gold"]) .rbr-holo .hd small{color:#fcd34d}
:is(.rbr[data-holo="gold"],.hsk[data-holo="gold"]) .rbr-holo .hd b{color:#fde68a!important;text-shadow:0 0 10px rgba(250,204,21,.75),0 1px 1px rgba(0,0,0,0.30)!important}
:is(.rbr[data-holo="gold"],.hsk[data-holo="gold"]) .rbr-holo .hd{border-bottom-color:rgba(250,204,21,.4)!important}
/* --- 🌌 กาแล็กซี --- */
:is(.rbr[data-holo="galaxy"],.hsk[data-holo="galaxy"]) .rbr-holo{border:0!important;box-shadow:0 0 26px rgba(168,85,247,.45),0 18px 40px -16px rgba(56,189,248,.5)!important;
  background:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 72% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 70%,#fff,transparent),radial-gradient(1px 1px at 86% 62%,#fff,transparent),radial-gradient(1px 1px at 24% 88%,#fff,transparent),
  linear-gradient(115deg,rgba(76,29,149,.3),rgba(15,23,42,0.30) 40%,rgba(30,64,175,.3) 70%,rgba(131,24,67,0.30))!important;background-size:auto,auto,auto,auto,auto,200% 200%!important;animation:hkNeb 30s linear infinite alternate}
:is(.rbr[data-holo="galaxy"],.hsk[data-holo="galaxy"]) .rbr-holo::before{content:"";position:absolute;inset:-60%;z-index:0;pointer-events:none;-webkit-mask:none!important;mask:none!important;padding:0!important;
  background:conic-gradient(from var(--ha),#f472b6,#a78bfa,#38bdf8,#34d399,#facc15,#f472b6)!important;animation:hkSpin 16s linear infinite}
:is(.rbr[data-holo="galaxy"],.hsk[data-holo="galaxy"]) .rbr-holo::after{content:"";position:absolute;inset:2px;z-index:1;border-radius:14px;pointer-events:none;opacity:1!important;
  background:radial-gradient(1px 1px at 18% 30%,#fff,transparent),radial-gradient(1px 1px at 64% 48%,#e0f2fe,transparent),radial-gradient(1.4px 1.4px at 82% 20%,#fff,transparent),radial-gradient(1px 1px at 46% 84%,#fff,transparent),
  linear-gradient(115deg,rgba(46,16,101,0.30),rgba(10,15,40,0.30) 45%,rgba(23,37,84,0.30) 75%,rgba(80,7,36,0.30))!important;animation:hkStars 6s ease-in-out infinite}
:is(.rbr[data-holo="galaxy"],.hsk[data-holo="galaxy"]) .rbr-holo .hd small{color:#c4b5fd}
:is(.rbr[data-holo="galaxy"],.hsk[data-holo="galaxy"]) .rbr-holo .hd b:not(.g):not(.r){color:#f0abfc!important}
/* --- 💜 ไซเบอร์นีออน --- */
:is(.rbr[data-holo="neon"],.hsk[data-holo="neon"]) .rbr-holo{background:linear-gradient(160deg,rgba(24,4,40,0.30),rgba(8,4,24,0.30))!important;border:1px solid #f0abfc!important;border-radius:6px!important;
  box-shadow:0 0 6px #f0abfc,0 0 18px rgba(217,70,239,.8),0 0 40px rgba(124,58,237,.55),inset 0 0 18px rgba(217,70,239,.35)!important;animation:hkFlick 9s linear infinite}
:is(.rbr[data-holo="neon"],.hsk[data-holo="neon"]) .rbr-holo::before{content:"";position:absolute;inset:4px;z-index:1;pointer-events:none;padding:0!important;-webkit-mask:none!important;mask:none!important;
  background:linear-gradient(#22d3ee,#22d3ee) top left/14px 2px no-repeat,linear-gradient(#22d3ee,#22d3ee) top left/2px 14px no-repeat,linear-gradient(#22d3ee,#22d3ee) bottom right/14px 2px no-repeat,linear-gradient(#22d3ee,#22d3ee) bottom right/2px 14px no-repeat,
  repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)!important;filter:drop-shadow(0 0 4px #22d3ee)}
:is(.rbr[data-holo="neon"],.hsk[data-holo="neon"]) .rbr-holo::after{content:"";position:absolute;left:0;right:0;height:18%;z-index:1;pointer-events:none;opacity:1!important;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.18),transparent)!important;animation:hkScan 6s linear infinite}
:is(.rbr[data-holo="neon"],.hsk[data-holo="neon"]) .rbr-holo .hd small{color:#f0abfc;text-shadow:0 0 6px #d946ef}
:is(.rbr[data-holo="neon"],.hsk[data-holo="neon"]) .rbr-holo .hd{border-bottom-color:rgba(240,171,252,.5)!important}
/* --- 🌸 กระจกซากุระ --- */
:is(.rbr[data-holo="sakura"],.hsk[data-holo="sakura"]) .rbr-holo{background:linear-gradient(150deg,rgba(131,24,67,0.30),rgba(60,10,40,0.30) 50%,rgba(157,23,77,.6))!important;border:1px solid rgba(251,207,232,.7)!important;
  box-shadow:0 0 22px rgba(244,114,182,.45),inset 0 0 22px rgba(251,207,232,.15),0 18px 40px -16px rgba(236,72,153,.6)!important;-webkit-backdrop-filter:blur(1.5px)!important;backdrop-filter:blur(1.5px)!important}
:is(.rbr[data-holo="sakura"],.hsk[data-holo="sakura"]) .rbr-holo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;padding:0!important;-webkit-mask:none!important;mask:none!important;opacity:.9;
  background:radial-gradient(5px 3px at 20% 10%,#fbcfe8 60%,transparent 62%),radial-gradient(4px 3px at 70% 30%,#f9a8d4 60%,transparent 62%),radial-gradient(5px 3px at 45% 60%,#fce7f3 60%,transparent 62%)!important;
  background-size:90px 130px,110px 150px,80px 120px!important;animation:hkFall 22s linear infinite}
:is(.rbr[data-holo="sakura"],.hsk[data-holo="sakura"]) .rbr-holo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:1!important;border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.22),transparent 30%,transparent 70%,rgba(255,255,255,.1))!important}
:is(.rbr[data-holo="sakura"],.hsk[data-holo="sakura"]) .rbr-holo .hd small{color:#fbcfe8}
:is(.rbr[data-holo="sakura"],.hsk[data-holo="sakura"]) .rbr-holo .hd b:not(.g):not(.r){color:#fdf2f8!important}
/* --- 💚 แมทริกซ์ --- */
:is(.rbr[data-holo="matrix"],.hsk[data-holo="matrix"]) .rbr-holo{background:rgba(0,12,4,0.30)!important;border:1px solid rgba(74,222,128,.6)!important;border-radius:8px!important;
  box-shadow:0 0 18px rgba(34,197,94,.5),inset 0 0 20px rgba(34,197,94,.18)!important}
:is(.rbr[data-holo="matrix"],.hsk[data-holo="matrix"]) .rbr-holo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;padding:0!important;-webkit-mask:none!important;mask:none!important;opacity:.32;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,0.30) 9px 12px),repeating-linear-gradient(180deg,#22c55e 0 2px,transparent 2px 7px,#86efac 7px 8px,transparent 8px 15px)!important;
  background-size:auto,100% 300px!important;animation:hkRain 11s linear infinite}
:is(.rbr[data-holo="matrix"],.hsk[data-holo="matrix"]) .rbr-holo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:1!important;background:linear-gradient(180deg,rgba(0,12,4,0.30),transparent 18%,transparent 82%,rgba(0,12,4,0.30))!important}
:is(.rbr[data-holo="matrix"],.hsk[data-holo="matrix"]) .rbr-holo .hd small,:is(.rbr[data-holo="matrix"],.hsk[data-holo="matrix"]) .rbr-holo .nm{color:#86efac!important;font-family:'IBM Plex Mono',monospace}
:is(.rbr[data-holo="matrix"],.hsk[data-holo="matrix"]) .rbr-holo .hd b:not(.r){color:#4ade80!important;text-shadow:0 0 10px rgba(74,222,128,.8)!important}
/* --- 🦊 จิ้งจอกทอง (เฉพาะแพ็ก) --- */
:is(.rbr[data-holo="kitsune"],.hsk[data-holo="kitsune"]) .rbr-holo{border:0!important;
  background:radial-gradient(circle at 100% 0,rgba(250,204,21,.25),transparent 45%),repeating-conic-gradient(from 200deg at 100% 100%,rgba(250,204,21,.13) 0 6deg,transparent 6deg 12deg),linear-gradient(160deg,rgba(69,10,10,0.30),rgba(20,4,4,0.30) 60%,rgba(60,8,8,0.30))!important;
  box-shadow:0 0 24px rgba(239,68,68,.45),0 18px 40px -16px rgba(250,204,21,.55)!important}
:is(.rbr[data-holo="kitsune"],.hsk[data-holo="kitsune"]) .rbr-holo::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(140deg,#fde68a,#dc2626 35%,#facc15 55%,#991b1b 75%,#fde68a)!important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
:is(.rbr[data-holo="kitsune"],.hsk[data-holo="kitsune"]) .rbr-holo::after{content:"🏮";position:absolute;right:6px;top:4px;z-index:1;font-size:.95rem;opacity:1!important;background:none!important;filter:drop-shadow(0 0 6px rgba(248,113,113,.9));animation:hkLamp 4.5s ease-in-out infinite}
:is(.rbr[data-holo="kitsune"],.hsk[data-holo="kitsune"]) .rbr-holo .hd small{color:#fca5a5}
:is(.rbr[data-holo="kitsune"],.hsk[data-holo="kitsune"]) .rbr-holo .hd b:not(.r){color:#fde68a!important;text-shadow:0 0 10px rgba(250,204,21,.7)!important}
html[data-fxq="0"] .rbr-holo::before,html[data-fxq="0"] .rbr-holo::after,html[data-fxq="0"] .rbr-holo{animation:none!important}
/* ===== จอโฮโลแกรมรุ่นพรีเมียม: แสงวิ่งรอบกรอบ (conic หมุน) + ของโคจรรอบขอบ ===== */
.rbr.hero-mode .rbr-bots{transition:translate 2.2s cubic-bezier(.45,.05,.35,1)}
.rbr.hero-mode .rbr-holo,.rbr.hero-mode .rbr-scr{transition:scale .9s cubic-bezier(.4,0,.2,1),opacity .6s}
.rbr.hero-mode.h-idle .rbr-holo,.rbr.hero-mode.idle .rbr-scr,.rbr.hero-mode.off .rbr-scr{scale:.62;transform-origin:right top!important;top:10px!important}
.rbr.hero-mode.h-idle .rbr-holo{bottom:auto!important;height:calc(100% - 28px)}
.rbr.hero-mode.idle .rbr-scr,.rbr.hero-mode.off .rbr-scr{transform:none!important}
/* [4 พ.ย. user "มือถือ ไม่มีไม้ คำว่ารอจังหวะสูงไป มองไม่เห็น ขยับมากลางจอ"] มือถือ: จอสถานะ (รอจังหวะ/ออฟไลน์) และจอโฮโลแกรมตอนว่าง เดิมย่อ .62 ชิดบนขวา โดนปุ่มมุมขวาบนทับ → ลงมากึ่งกลางความสูงห้อง ชิดขวา ขยายเป็น .8 อ่านง่าย */
@media (max-width:767px){.rbr.hero-mode.idle:not(.rbr-edit) .rbr-scr,.rbr.hero-mode.off:not(.rbr-edit) .rbr-scr,.rbr.hero-mode.h-idle:not(.rbr-edit) .rbr-holo{top:50%!important;right:8px!important;translate:0 -50%;transform-origin:right center!important;scale:.78;z-index:5}}
@keyframes rbrWarpOut{0%{opacity:1;filter:none;scale:1 1}55%{opacity:.85;filter:brightness(2) drop-shadow(0 0 10px #22d3ee);scale:.92 1.04}100%{opacity:0;filter:brightness(3) drop-shadow(0 0 16px #22d3ee);scale:.15 1.25}}
@keyframes rbrWarpIn{0%{clip-path:inset(100% -30% 0 -30%);filter:brightness(2.6) drop-shadow(0 0 12px #22d3ee)}75%{clip-path:inset(0 -30% 0 -30%);filter:brightness(1.5) drop-shadow(0 0 8px #22d3ee)}100%{clip-path:inset(-30% -30% -30% -30%);filter:none}}
@keyframes rbrBeam{0%{bottom:2%;opacity:1}75%{bottom:94%;opacity:1}100%{bottom:98%;opacity:0}}
@keyframes rbrPad{0%{opacity:0;scale:.3 1}30%{opacity:1;scale:1 1}100%{opacity:0;scale:1.4 1}}
.rbr-bots.warp-out .rbr-bot.hero{animation:rbrWarpOut .56s ease-in forwards}
.rbr-bots.warp-in .rbr-bot.hero{animation:rbrWarpIn .85s ease-out}
.rbr-bots.warp-in::after{content:"";position:absolute;left:12%;right:12%;height:3px;border-radius:3px;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,#a5f3fc,#fff,#a5f3fc,transparent);box-shadow:0 0 12px #22d3ee,0 0 24px rgba(34,211,238,.6);animation:rbrBeam .85s ease-out forwards}
.rbr-bots:is(.warp-in,.warp-out)::before{content:"";position:absolute;left:14%;right:14%;bottom:0;height:14px;border-radius:50%;z-index:1;pointer-events:none;background:radial-gradient(ellipse,rgba(165,243,252,.9),rgba(34,211,238,.35) 45%,transparent 70%);animation:rbrPad .9s ease-out forwards}
.rbr-bot.hero video.rbr-vid,.rbr-bot.hero video.rbr-walkv{transition:opacity .25s ease}
/* [17 ต.ค.] วาร์ปมังกร: สลายเป็นควันม่วง/เปลวไฟ (เบลอ+จาง+ขยายนิดๆ) → ก่อตัวใหม่จากควัน · ไม่มีลำแสงฟ้า */
.rbr-bots[data-wfx=shadow]{--wc:rgba(168,85,247,.8);--wc2:rgba(233,213,255,.85)}
.rbr-bots[data-wfx=fire]{--wc:rgba(249,115,22,.8);--wc2:rgba(254,240,138,.9)}
.rbr-bots.warp-out[data-wfx] .rbr-bot.hero{animation:rbrDgOut .56s cubic-bezier(.45,0,.7,1) forwards}
.rbr-bots.warp-in[data-wfx] .rbr-bot.hero{animation:rbrDgIn .9s cubic-bezier(.2,.75,.3,1)}
.rbr-bots[data-wfx]:is(.warp-in,.warp-out)::after{left:18%;right:18%;top:auto;bottom:6%;height:70%;border-radius:50%;box-shadow:none;background:radial-gradient(ellipse at 50% 75%,var(--wc2),var(--wc) 35%,transparent 68%);filter:blur(10px);mix-blend-mode:screen;animation:rbrDgSmoke .95s ease-out forwards}
.rbr-bots[data-wfx].warp-out::after{content:"";position:absolute;z-index:5;pointer-events:none}
.rbr-bots[data-wfx]:is(.warp-in,.warp-out)::before{height:20px;background:radial-gradient(ellipse,var(--wc2),var(--wc) 42%,transparent 70%);animation:rbrDgPad 1s ease-out forwards}
@keyframes rbrDgOut{0%{opacity:1;filter:none;scale:1}45%{opacity:.85;filter:blur(1.5px) brightness(1.35) drop-shadow(0 0 10px var(--wc))}100%{opacity:0;filter:blur(8px) brightness(1.7) drop-shadow(0 0 18px var(--wc));scale:1.07 1.1}}
@keyframes rbrDgIn{0%{opacity:0;filter:blur(9px) brightness(1.8) drop-shadow(0 0 18px var(--wc));scale:.93 .9}55%{opacity:1;filter:blur(1.5px) brightness(1.25) drop-shadow(0 0 10px var(--wc));scale:1.01}100%{opacity:1;filter:none;scale:1}}
@keyframes rbrDgSmoke{0%{opacity:0;scale:.55 .4;translate:0 10%}30%{opacity:.75}100%{opacity:0;scale:1.25 1.15;translate:0 -12%}}
@keyframes rbrDgPad{0%{opacity:0;scale:.4 1}35%{opacity:.9;scale:1 1}100%{opacity:0;scale:1.7 1.3}}
@media (prefers-reduced-motion:reduce){.rbr-bots[data-wfx]:is(.warp-in,.warp-out)::after,.rbr-bots[data-wfx]:is(.warp-in,.warp-out)::before{animation:none;opacity:0}}
.rbr.hero-mode .rbr-bot.hero .rbr-fig video.rbr-walkv{position:absolute!important;left:50%;bottom:0;translate:-50% 0;height:100%;width:auto;max-width:none;opacity:0;pointer-events:none}
.rbr.walking .rbr-bot.hero .rbr-fig video.rbr-walkv{opacity:1}
.rbr.walking .rbr-bot.hero .rbr-fig video.rbr-vid{opacity:0;transition:opacity .01s linear .22s}
.rbr.hero-mode .rbr-bot.hero .rbr-fig video.rbr-walkv{z-index:2}
.rbr.hero-mode .rbr-bots{z-index:4;pointer-events:none}
.rbr.hero-mode.rbr-edit .rbr-bots{pointer-events:auto}
/* [17 ต.ค. user "จอโฮให้ใสแบบกระจก คมชัด"] กระจกใส: เห็นฉากหลังทะลุ · ขอบคม · แสงสะท้อนเฉียง · ตัวอักษรมีเงาอ่านชัด · เบลอนิดเดียว (ไม่หน่วงเครื่อง) */
:is(.rbr,.hsk) .rbr-holo.rbr-holo{-webkit-backdrop-filter:blur(1.5px) saturate(1.3)!important;backdrop-filter:blur(1.5px) saturate(1.3)!important;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 6px rgba(0,0,0,.4)}
:is(.rbr:not([data-holo]),.rbr[data-holo=""],.hsk:not([data-holo])) .rbr-holo.rbr-holo{background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.04) 34%,rgba(8,14,30,.14) 60%,rgba(255,255,255,.07))!important;border:1px solid rgba(186,230,253,.55)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 18px -6px rgba(56,189,248,.55)!important}
:is(.rbr:not([data-holo]),.rbr[data-holo=""],.hsk:not([data-holo])) .rbr-holo.rbr-holo::after{opacity:1!important;background:linear-gradient(118deg,transparent 22%,rgba(255,255,255,.12) 30%,rgba(255,255,255,.03) 38%,transparent 46%)!important}
/* จอพรีเมียม/กาแล็กซี: แสงวิ่งรอบ "เฉพาะขอบ" (เดิมหมุนทั้งแผ่นแล้วเอาแผ่นทึบบัง → พอทำใส แสงจะทะลุกลางจอ) */
@property --ha{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes hkAng{to{--ha:360deg}}
:is(.rbr,.hsk):is([data-holo="galaxy"],[data-holo="sakura2"],[data-holo="coinring"],[data-holo="diamond"],[data-holo="thunder"],[data-holo="raiden"],[data-holo="flame"]) .rbr-holo.rbr-holo::before{inset:0!important;border-radius:inherit;padding:3px!important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)!important;animation:hkAng 10s linear infinite!important}
:is(.rbr,.hsk)[data-holo="galaxy"] .rbr-holo.rbr-holo::before{animation-duration:16s!important}
html[data-fxq="0"] .rbr-holo.rbr-holo::before{animation:none!important}
.rbr.walk-back .rbr-bot.hero .rbr-fig video.rbr-walkv{scale:-1 1}.rbr.hero-mode .rbr-bot.hero .rbr-fig img.rbr-walkv{position:absolute!important;left:50%;bottom:0;translate:-50% 0;height:100%;width:auto;max-width:none;opacity:0;pointer-events:none;z-index:2}.rbr.walking .rbr-bot.hero .rbr-fig img.rbr-walkv{opacity:1}.rbr.walking .rbr-bot.hero .rbr-fig img.rbr-hi{opacity:0}.rbr.walk-back .rbr-bot.hero .rbr-fig img.rbr-walkv{scale:-1 1}.rbr.hero-mode .rbr-bot.hero .rbr-fig.bigfx.cr>img.rbr-walkv{left:var(--cl)!important;bottom:var(--cb)!important;height:var(--chh)!important}
/* [18 ต.ค.] ท่าเต้น (ไม่มีออเดอร์) + ท่าเปิด/ปิดออเดอร์ในห้อง — กรอบเดียวกับคลิปหลัก จางสลับ 0.3 วิ */
.rbr-fig>:is(.rbr-dancev,.rbr-actv){opacity:0;pointer-events:none;transition:opacity .3s ease}
.rbr.hero-mode .rbr-bot.hero .rbr-fig:not(.bigfx)>:is(.rbr-dancev,.rbr-actv){position:absolute;left:50%;bottom:0;translate:-50% 0;height:100%;width:auto;max-width:none}
.rbr-fig.dance>.rbr-dancev,.rbr-fig.act-on>.rbr-actv[data-k]{opacity:0}
.rbr-fig.dance>.rbr-dancev{opacity:1}
.rbr-fig.act-on>.rbr-actv.sq.cur{opacity:1;z-index:3}.rbr-fig>.rbr-actv.sq{transition:none}
.rbr-fig[data-act=open].act-on>.rbr-actv[data-k=open],.rbr-fig[data-act=close].act-on>.rbr-actv[data-k=close]{opacity:1;z-index:3}
.rbr-fig:is(.dance,.act-on)>:is(video.rbr-vid,img.rbr-hi){opacity:0;transition:opacity .3s ease}
.rbr-fig.act-on>.rbr-dancev{opacity:0}
.rbr-fig.snap>:is(video,img){transition:none!important}
.rbr.walking .rbr-fig>:is(.rbr-dancev,.rbr-actv){opacity:0!important}
html[data-fxq="0"] .rbr-fig>:is(.rbr-dancev,.rbr-actv){display:none}
.rbr.hero-mode .rbr-bot.hero:has(.rbr-fig.bigfx){transform:none}
.rbr.hero-mode .rbr-bot.hero .rbr-fig.bigfx :is(video,img){position:absolute!important;left:var(--vl)!important;bottom:var(--vb)!important;height:var(--vh)!important;width:auto!important;max-width:none!important;max-height:none!important;translate:none!important}
.rbr.hero-mode .rbr-bot.hero .rbr-fig.bigfx.cr>:is(video.rbr-vid,img.rbr-hi,video.rbr-walkv,.rbr-dancev){left:var(--cl)!important;bottom:var(--cb)!important;height:var(--chh)!important} /* [18 ต.ค.] คลิปครอป (ยืน/เต้น/เดิน) วางตรงตำแหน่งเดิมในภาพเต็ม */
.rbr.walking .rbr-bot.hero .rbr-fig.bigfx video.rbr-walkv{transition:opacity .22s ease,left var(--wd,1.5s) linear,height var(--wd,1.5s) linear,bottom var(--wd,1.5s) linear}
.rbr.walking .rbr-bot.hero .rbr-fig.bigfx video.rbr-vid{transition:opacity .01s linear .22s,left var(--wd,1.5s) linear,height var(--wd,1.5s) linear,bottom var(--wd,1.5s) linear}
.rbr.walking .rbr-zz{opacity:0}
/* [18 ต.ค. user "ทำให้ว้าวๆ สวยๆ"] ออร่าหลังตัวละครสกินเต็มห้อง (CSS ล้วน ไม่มีไฟล์เพิ่ม) · moon = จันทร์เต็มดวงเรืองแสงหลังตัว + แสงพื้น + ละอองแสงลอยขึ้น */
.rbr-aura{display:none}
.rbr.hero-mode .rbr-fig.bigfx>.rbr-aura{display:block;position:absolute;z-index:0;pointer-events:none;left:calc(var(--vl) + var(--vh) * var(--var,1) * .49);bottom:var(--vb);height:var(--vh);width:calc(var(--vh) * .95);translate:-50% 0;transition:left var(--wd,1.5s) linear}
.rbr-aura.moon::before{content:"";position:absolute;left:55%;top:3%;width:66%;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle at 44% 40%,rgba(236,252,255,.85) 0,rgba(196,236,246,.6) 38%,rgba(130,225,230,.32) 60%,rgba(240,205,110,.14) 70%,transparent 73%);mix-blend-mode:screen;
  box-shadow:0 0 34px 10px rgba(120,235,225,.45),0 0 90px 30px rgba(240,205,110,.22);opacity:.7;animation:rbrMoon 6s ease-in-out infinite}
.rbr-aura.moon::after{content:"";position:absolute;left:50%;bottom:4%;width:78%;height:9%;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse,rgba(110,240,225,.55),rgba(240,205,110,.18) 55%,transparent 72%);animation:rbrMoonF 3s ease-in-out infinite}
.rbr-aura b{position:absolute;bottom:12%;left:var(--x);width:5px;height:5px;border-radius:50%;background:#bff9f1;box-shadow:0 0 8px 2px rgba(110,240,225,.8);opacity:0;animation:rbrMote 5.5s linear infinite;animation-delay:var(--d)}
.rbr-aura b:nth-child(1){--x:18%;--d:0s}.rbr-aura b:nth-child(2){--x:34%;--d:-1.8s}.rbr-aura b:nth-child(3){--x:52%;--d:-3.6s}.rbr-aura b:nth-child(4){--x:68%;--d:-.9s}.rbr-aura b:nth-child(5){--x:82%;--d:-2.7s}.rbr-aura b:nth-child(6){--x:44%;--d:-4.5s;background:#ffe6a3;box-shadow:0 0 8px 2px rgba(240,205,110,.8)}
@keyframes rbrMoon{0%,100%{opacity:.62;scale:1}50%{opacity:.85;scale:1.04}}
@keyframes rbrMoonF{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes rbrMote{0%{opacity:0;translate:0 0}12%{opacity:.95}80%{opacity:.6}100%{opacity:0;translate:6px calc(var(--vh) * -.72)}}
.rbr.hero-mode .rbr-fig.bigfx>:is(video,img){z-index:1}
html[data-fxq="0"] .rbr-aura{display:none!important}
.rbr-ci{position:absolute;inset:0;z-index:40;pointer-events:none;display:flex;align-items:center;overflow:hidden;--ca:#5ff2e0}.rbr-ci.close{--ca:#f0cd6e}
.rbr-ci::before{content:'';position:absolute;inset:0;background:rgba(2,8,7,.5);opacity:0;transition:opacity .3s ease}.rbr-ci.on::before{opacity:1}.rbr-ci.out::before{opacity:0}
.rbr-ci .ci-band{position:relative;width:108%;margin-left:-4%;height:76%;overflow:hidden;background:#06120f;border-block:2px solid var(--ca);box-shadow:0 0 22px color-mix(in srgb,var(--ca) 55%,transparent);transform:skewY(-4deg) translateX(-110%);transition:transform .38s cubic-bezier(.2,.9,.25,1);will-change:transform}
.rbr-ci.on .ci-band{transform:skewY(-4deg) translateX(0)}.rbr-ci.out .ci-band{transform:skewY(-4deg) translateX(110%);transition-duration:.4s;transition-timing-function:cubic-bezier(.6,0,.8,.3)}
.rbr-ci video{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;transform:skewY(4deg)}
.rbr-ci .ci-sh{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);translate:-100% 0}.rbr-ci.on .ci-sh{animation:rbrCiSh .9s ease-out .25s 1 both}
@keyframes rbrCiSh{to{translate:100% 0}}
.rbr-ci .ci-tx{position:absolute;left:5%;bottom:13%;z-index:2;color:#fff;font-weight:900;font-style:italic;font-size:clamp(.95rem,3.4vw,1.35rem);line-height:1.05;text-shadow:0 2px 8px rgba(0,0,0,.8),0 0 14px color-mix(in srgb,var(--ca) 60%,transparent);opacity:0;translate:-24px 0;transition:opacity .3s ease .3s,translate .3s ease .3s}
.rbr-ci .ci-tx small{display:block;font-size:.58em;letter-spacing:.22em;color:var(--ca);font-style:normal}
.rbr-ci.on .ci-tx{opacity:1;translate:0 0}.rbr-ci.out .ci-tx{opacity:0;transition-delay:0s}
.sp-ci{display:flex;gap:5px;margin-top:5px}.sp-ci button{flex:1;padding:4px 6px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:8px;border:1px solid #c9a64a;background:linear-gradient(#183633,#0b1c1a);color:#f3d27a;font-size:.72rem;font-weight:800;cursor:pointer}.sp-ci button:active{transform:scale(.97)}
html[data-fxq="0"] .rbr.hero-mode .rbr-bots,html[data-fxq="0"] .rbr.hero-mode .rbr-holo{transition:none}
/* [18 ต.ค. user "สัตว์เลี้ยง 3 ตัว: นั่งรอข้างหุ่น · เดินตามตอนหุ่นเดิน · ปิดกำไร = ท่าพิเศษ"] ภาพตัวเลี้ยงคือส่วนครอปของคลิป 960x540 (RBR_BUD.c) · ท่าพิเศษ = คลิปเต็มภาพ วางทับให้ตัวตรงกันพอดี */
.rbr-bud{position:absolute;left:30%;bottom:calc(4px + 13%);height:24%;translate:-50% 0;z-index:3;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:left var(--bd,1.5s) linear}
.rbr-bud>.bi{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));transition:opacity .15s}
.rbr-bud>.bw,.rbr-bud>.bsp{opacity:0}
.rbr-bud.walk>.bw{opacity:1}.rbr-bud.walk.hw>.bs{opacity:0}
.rbr-bud.back>.bs,.rbr-bud.back>.bw,.rbr-bud.back>.bd,.rbr-bud.back>.bu{scale:-1 1}
.rbr-bud>.bd,.rbr-bud>.bu{opacity:0}.rbr-bud.dn>.bd,.rbr-bud.upc>.bu{opacity:1;transition-duration:.1s}.rbr-bud.dn>.bs,.rbr-bud.dn>.bw,.rbr-bud.upc>.bs,.rbr-bud.upc>.bw{opacity:0;transition-duration:.1s}
.rbr-bud>.bsp{position:absolute;max-width:none;object-fit:fill;inset:auto;transition:opacity .2s;filter:none}
.rbr-bud.sp>.bsp{opacity:1}.rbr-bud.sp>.bs,.rbr-bud.sp>.bw{opacity:0}
.rbr-bud.sp{z-index:7}
.rbr-bud>.bi{transition:opacity .2s,translate var(--bd,1.5s) ease-in-out}.rbr-bud.lift>.bi{translate:0 -22%} /* มังกรบินเล่น: ลอยสูงขึ้นตอนบิน */
@media (max-width:767px){.rbr-bud{height:22%;bottom:calc(4px + 12%)}}
 /* มือถือ: มีสัตว์เลี้ยงมุมล่างซ้าย → ป้าย Bot Online ขึ้นไปไว้ใต้ปุ่มจัดห้อง ไม่บังกัน */
.sp-room .rbr-bud{height:24%}
/* [18 ต.ค. user "ให้ตัวละครอยู่หน้าสัตว์เลี้ยง"] ตัวเลี้ยงยืนลึกเข้าไปในห้อง (สูงขึ้นจากพื้น + เล็กลง + มืดลงนิด) → หุ่นดูอยู่ข้างหน้า */
.rbr-bud:not(.sp)>.bs,.rbr-bud:not(.sp)>.bw,.rbr-bud:not(.sp)>.bd,.rbr-bud:not(.sp)>.bu{filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) brightness(.9) saturate(.95)}
/* [22 ต.ค. user "เวลิร่ากระตุกตรงลุกจะเดิน / ก่อนใช้ท่าหมุน / หมุนเสร็จ"] ตอนสลับระหว่างท่านั่งกับท่าพิเศษ สีต้องไม่เปลี่ยนวาบ: ท่านั่งคงความสว่างเดิม (.9) ตลอดช่วงท่าพิเศษ · ท่าพิเศษใช้ความสว่างเดียวกัน · สลับภาพเร็วขึ้นเพราะเฟรมต่อกันพอดีแล้ว (ไม่ต้องเบลนด์นาน) */
.rbr-bud[data-k="velyra"].sp>.bs{filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) brightness(.9) saturate(.95)}
.rbr-bud[data-k="velyra"]>.bsp{filter:brightness(.9) saturate(.95)}
.rbr-bud[data-k="velyra"].flip>.bi{transition:opacity .18s ease-in-out,translate var(--bd,1.5s) ease-in-out}
.rbr-bud[data-k="velyra"]>.bi{transition:opacity .08s linear,translate var(--bd,1.5s) ease-in-out}.rbr-bud[data-k="velyra"]>.bsp{transition:opacity .12s linear}
/* [3 พ.ย. รอบ 2] เสือ: คลิปต่อเฟรมกันพอดีแล้ว → สลับคลิปแทบทันที (จาง .04 วิ) กันภาพจางวูบ/เห็นสองตัวซ้อนตอนเปลี่ยนท่า */
.rbr-bud[data-k="tiger"]>.bi{transition:opacity .04s linear,translate var(--bd,1.5s) ease-in-out}.rbr-bud[data-k="tiger"]>.bsp{transition:opacity .12s linear}
.rbr-bud[data-k^="rabbit"]>.bi{transition:opacity .04s linear,translate var(--bd,1.5s) ease-in-out}.rbr-bud[data-k^="rabbit"]>.bsp{transition:opacity .12s linear} /* [3 พ.ย.] กระต่าย: คลิปต่อเฟรมกันพอดี สลับทันที */
html[data-fxq="0"] .rbr-bud{transition:none}
/* [22 ต.ค. user "เวลิร่าวาร์ปลงมาตอนล็อกอินเข้ามาใหม่ ช้าๆ สวยๆ เนียนๆ"] ท่าวาร์ปเข้าห้อง: ลำแสงทองไหลลงมาจากเพดาน → วงแหวนบนพื้นขยายออก → ตัวเวลิร่าค่อยๆ ปรากฏ (สว่างวาบแล้วจางลง) · เล่นครั้งเดียวต่อการเปิดหน้า · เครื่องอ่อน/ลดการเคลื่อนไหว = ไม่เล่น */
.rbr-bud.warp::before,.rbr-bud.warp::after{content:"";position:absolute;pointer-events:none;z-index:0}
.rbr-bud.warp::before{left:calc(var(--wx,74%) - 17%);width:34%;bottom:6%;height:520%;background:linear-gradient(to top,rgba(255,236,170,.95),rgba(246,210,122,.55) 22%,rgba(246,210,122,.16) 62%,transparent);filter:blur(5px);transform-origin:50% 100%;opacity:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent);animation:budWarpBeam 2.9s cubic-bezier(.3,.1,.2,1) both}
.rbr-bud.warp::after{left:calc(var(--wx,74%) - 34%);width:68%;bottom:2%;height:15%;border-radius:50%;border:2px solid rgba(255,226,150,.9);box-shadow:0 0 14px 2px rgba(246,200,100,.7),inset 0 0 10px rgba(255,226,150,.55);opacity:0;animation:budWarpRing 2.9s ease-out both}
.rbr-bud.warp>.bs{animation:budWarpIn 2.9s cubic-bezier(.22,.7,.2,1) both}
@keyframes budWarpBeam{0%{opacity:0;transform:scaleX(.15) scaleY(.2)}18%{opacity:.95;transform:scaleX(1) scaleY(1)}55%{opacity:.8;transform:scaleX(.9) scaleY(1)}100%{opacity:0;transform:scaleX(.3) scaleY(1)}}
@keyframes budWarpRing{0%,12%{opacity:0;transform:scale(.15)}30%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@keyframes budWarpIn{0%,16%{opacity:0;transform:translateY(-34%) scale(1.04);filter:brightness(3.2) saturate(.3) blur(7px)}55%{opacity:1;transform:translateY(0);filter:brightness(1.9) saturate(.8) blur(1.5px)}100%{opacity:1;transform:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) brightness(.9) saturate(.95) blur(0)}}
@media (prefers-reduced-motion:reduce){.rbr-bud.warp::before,.rbr-bud.warp::after{display:none}.rbr-bud.warp>.bs{animation:none}}
.rbr.rbr-edit .rbr-bud,.sp-room .rbr-bud{pointer-events:none}
/* [2 พ.ย.] สัตว์เลี้ยงของฉัน (petsOpen) */
.pet-ov{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(6,12,10,.62)}
.pet-ov[hidden]{display:none}
.pet-box{width:100%;max-width:520px;max-height:min(88vh,760px);display:flex;flex-direction:column;border-radius:16px;background:#14201c;color:#eef3ea;border:1px solid rgba(246,210,122,.35);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);overflow:hidden}
.pet-hd{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}.pet-hd b{font-size:1rem;color:#f6d27a}
.pet-x{background:none;border:0;color:#cfd8d2;font-size:1.05rem;cursor:pointer;padding:.2rem .4rem}
.pet-body{overflow-y:auto;padding:.8rem 1rem 1rem;display:flex;flex-direction:column;gap:.7rem}
.pet-card{display:grid;grid-template-columns:84px 1fr;gap:.75rem;padding:.7rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.pet-card.on{border-color:rgba(246,210,122,.5);background:rgba(246,210,122,.06)}
.pet-pic{width:84px;height:84px;border-radius:10px;background:radial-gradient(circle at 50% 70%,rgba(103,232,249,.14),transparent 70%);display:grid;place-items:center}
.pet-pic img{max-width:100%;max-height:100%;object-fit:contain}
.pet-card[data-lv="2"] .pet-pic img{filter:drop-shadow(0 0 5px rgba(186,230,253,.55))}.pet-card:not([data-lv="1"]):not([data-lv="2"]) .pet-pic img{filter:drop-shadow(0 0 7px rgba(246,200,100,.75))}
.pet-info{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.pet-sp{font-size:.72rem;color:#aab7b0;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.pet-sp span{opacity:.75}.pet-sp em{font-style:normal;font-size:.62rem;font-weight:700;color:#14201c;background:#f6d27a;padding:.02rem .4rem;border-radius:99px}
.pet-nm{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.pet-name{font-size:1.02rem;font-weight:800;color:#fff7d6}
.pet-nm input{flex:1 1 8rem;min-width:0;padding:.35rem .55rem;border-radius:8px;border:1px solid rgba(246,210,122,.4);background:rgba(0,0,0,.25);color:#fff;font:inherit;font-size:.85rem}
.pet-btn{border:0;border-radius:8px;padding:.35rem .7rem;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;background:#f6d27a;color:#1d1606}.pet-btn.ghost{background:transparent;color:#f6d27a;border:1px solid rgba(246,210,122,.45)}.pet-btn.sm{padding:.15rem .5rem;font-size:.7rem}
.pet-lv{display:flex;align-items:center;gap:.4rem;font-size:.8rem}.pet-lv b{color:#fff}.pet-lv i{font-style:normal;color:#f6d27a;letter-spacing:-.04em}.pet-lv s{text-decoration:none;color:rgba(255,255,255,.25)}.pet-lv span{margin-left:auto;font-weight:700;color:#7ee2a8}
.shard-bx{display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.5;margin:6px 0}.shard-bx .pet-info{width:100%}.bg2-pvact .shard-bx{flex:1 1 100%;width:100%;text-align:center}
.pet-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.pet-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#d6a54a,#f6d27a)}
.pet-mut{font-size:.7rem;color:#9fb0a8;line-height:1.5;margin:0}.pet-mut .pet-buy{color:#f6d27a;font-weight:700;text-decoration:underline}.pet-note{margin-top:.1rem}
.pet-tbl summary{cursor:pointer;font-size:.75rem;color:#f6d27a}.pet-tbl table{width:100%;margin-top:.4rem;font-size:.74rem;border-collapse:collapse}.pet-tbl th,.pet-tbl td{text-align:left;padding:.25rem .3rem;border-bottom:1px solid rgba(255,255,255,.06)}.pet-tbl th{color:#9fb0a8;font-weight:600}

@media (max-width:480px){.pet-card{grid-template-columns:64px 1fr}.pet-pic{width:64px;height:64px}}
/* [2 พ.ย.] เลเวลสัตว์เลี้ยง: ป้าย Lv + ดาว · Lv.2 เรืองแสงอ่อน · Lv.3 ออร่าทอง (นิ่ง) · ฉลองอัปเลเวล 3 รอบแล้วหยุด */
.rbr-bud>.bud-lv{left:var(--bx,50%);top:2%;bottom:auto;margin-bottom:0;translate:-50% calc(-100% - .8em);z-index:2;transition:left var(--bd,1.5s) linear} /* [5 พ.ย. กฎข้อ 129] หน้าตาป้าย = ป้ายกลาง .pk-nm (/chars.js) · ตรงนี้เหลือแค่ตำแหน่ง */




.rbr-bud.back>.bud-lv{left:calc(100% - var(--bx,50%))}

.rbr-bud[data-lv="2"]:not(.sp)>.bs,.rbr-bud[data-lv="2"]:not(.sp)>.bw{filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) drop-shadow(0 0 5px rgba(186,230,253,.55)) brightness(.95)}
.rbr-bud.lvg:not(.sp)>.bs,.rbr-bud.lvg:not(.sp)>.bw{filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) drop-shadow(0 0 7px rgba(246,200,100,.75)) brightness(1)}
.rbr-bud.lvg::before{content:"";position:absolute;left:calc(var(--bx,50%) - 30%);width:60%;bottom:-2%;height:12%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(246,210,122,.55),rgba(246,210,122,.18) 60%,transparent)}

/* [3 พ.ย. user "สามขึ้นไป ออร่าทอง+วงแสงใต้เท้า · เลเวลสุดท้ายแสงพิเศษ เนียนๆ ว้าวๆ ไม่รก"] .lvg = Lv.3 ขึ้นไป · .lvtop = เลเวลสูงสุดตามที่แอดมินตั้ง (ขอบแสงขาวทอง + ลำแสงจางๆ + วงแหวนพื้น + ประกายลอยขึ้น 6 จุด · transform/opacity เท่านั้น) */
.rbr-bud.lvtop:not(.sp)>.bs,.rbr-bud.lvtop:not(.sp)>.bw{filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) drop-shadow(0 0 1.5px rgba(255,250,228,.95)) drop-shadow(0 0 9px rgba(246,192,84,.85)) brightness(1.03)}
.rbr-bud>.bud-top{position:absolute;left:calc(var(--bx,50%) - 40%);width:80%;bottom:-5%;height:105%;pointer-events:none;z-index:-1}
.bud-top>u{position:absolute;left:8%;width:84%;bottom:4%;height:96%;background:radial-gradient(ellipse 42% 100% at 50% 100%,rgba(255,220,140,.55),rgba(255,214,120,.2) 45%,transparent 76%);opacity:.75;animation:budBeam 3.8s ease-in-out infinite alternate}
.bud-top>s{position:absolute;left:10%;width:80%;bottom:0;height:13%;border-radius:50%;border:1.5px solid rgba(255,228,160,.8);box-shadow:0 0 10px rgba(246,196,90,.55),inset 0 0 7px rgba(246,196,90,.4)}
.bud-top>s+s{left:24%;width:52%;bottom:3%;height:8%;border-color:rgba(255,240,200,.45);box-shadow:none}
.bud-top>i{position:absolute;bottom:3%;width:4px;height:70%;opacity:0;animation:budSpk 3.6s ease-out infinite}
.bud-top>i::before{content:"";position:absolute;left:0;bottom:0;width:3.5px;height:3.5px;border-radius:50%;background:#fff7dc;box-shadow:0 0 6px 1.5px rgba(255,206,104,.95)}
.bud-top>i:nth-of-type(1){left:16%;animation-delay:0s}.bud-top>i:nth-of-type(2){left:31%;animation-delay:.6s;animation-duration:4.2s}.bud-top>i:nth-of-type(3){left:47%;animation-delay:1.3s}
.bud-top>i:nth-of-type(4){left:62%;animation-delay:1.9s;animation-duration:4s}.bud-top>i:nth-of-type(5){left:79%;animation-delay:2.6s}.bud-top>i:nth-of-type(6){left:39%;animation-delay:3.1s;animation-duration:4.4s}
@keyframes budSpk{0%{opacity:0;transform:translateY(0) scale(.6)}18%{opacity:1}70%{opacity:.7}100%{opacity:0;transform:translateY(-62%) scale(1)}}
@keyframes budBeam{0%{opacity:.45}100%{opacity:.85}}
.sp-room .bud-top,.rbr.rbr-edit .bud-top,.rbr-bud.sp>.bud-top>i{display:none}
@media (prefers-reduced-motion:reduce){.bud-top>u{animation:none}.bud-top>i{display:none}}
.rbr-bud.lvup::after{content:"";position:absolute;left:calc(var(--bx,50%) - 40%);width:80%;bottom:-4%;height:18%;border-radius:50%;border:2px solid rgba(255,226,150,.95);
  box-shadow:0 0 14px 2px rgba(246,200,100,.7);pointer-events:none;animation:budLvUp 1.2s ease-out 3 both}
@keyframes budLvUp{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
.rbr>.bud-tip{position:absolute;z-index:48;width:180px;display:flex;flex-direction:column;gap:.1rem;padding:.4rem .55rem;border-radius:9px;font-size:.64rem;line-height:1.4;color:#eef3ea;
  background:rgba(14,22,20,.9);border:1px solid rgba(246,210,122,.45);box-shadow:0 10px 24px -8px rgba(0,0,0,.6);cursor:pointer;animation:rsIn .25s ease-out}
.rbr>.bud-tip b{color:#f6d27a;font-size:.7rem}
.sp-room .bud-lv,.rbr.rbr-edit .bud-lv{display:none}
@media (prefers-reduced-motion:reduce){.rbr-bud.lvup::after{animation:none;display:none}}
.open-pos-card.has-room{cursor:default}.open-pos-card.has-room .rbr.hero-mode .rbr-holo{cursor:pointer;pointer-events:auto}
@media (hover:hover){.open-pos-card.has-room .rbr.hero-mode .rbr-holo:hover{filter:brightness(1.08)}}
.shop-it .ic.rbx.bud .bot{height:84px;max-width:80%}
.rbr.h-idle .rbr-holo{justify-content:center!important}.rbr.h-idle .rbr-holo .hd{border-bottom:0!important;text-align:center;margin:0}.rbr.h-idle .rbr-holo .hd>.hp.hp{position:static!important;justify-content:center;margin-top:.35rem;opacity:.95}.rbr.h-idle .rbr-holo .hd>.hp b{font-size:.78rem!important}
.rbr.h-idle .rbr-holo .hd>b{font-size:1.5rem!important}.rbr.h-idle .rbr-holo .hd>em{display:block;margin-top:.25rem}
.hfx{position:absolute!important;inset:5px;z-index:4!important;pointer-events:none;contain:layout}
.hfx i{position:absolute;left:0;top:0;display:block;translate:-50% -50%}
@keyframes hkOrbit{0%{left:0;top:0}25%{left:100%;top:0}50%{left:100%;top:100%}75%{left:0;top:100%}100%{left:0;top:0}}
@keyframes hkTwirl{to{rotate:1turn}}
@keyframes hkFlipC{0%,100%{scale:1 1}50%{scale:.15 1}}
@keyframes hkTwk{0%,100%{opacity:.55;scale:.7}50%{opacity:1;scale:1.15}}
@keyframes hkBolt{0%,86%,100%{opacity:0}88%{opacity:1}90%{opacity:.2}92%{opacity:1}95%{opacity:0}}
@keyframes hkEmber{0%{top:100%;opacity:0;scale:.6}15%{opacity:1}100%{top:-5%;opacity:0;scale:1.1}}
:is(.rbr[data-holo="sakura2"],.rbr[data-holo="coinring"],.rbr[data-holo="diamond"],.rbr[data-holo="thunder"],.rbr[data-holo="raiden"],[data-holo="raiden"],.rbr[data-holo="flame"],.hsk[data-holo="sakura2"],.hsk[data-holo="coinring"],.hsk[data-holo="diamond"],.hsk[data-holo="thunder"],.hsk[data-holo="raiden"],[data-holo="raiden"],.hsk[data-holo="flame"]) .rbr-holo{border:0!important}
:is(.rbr[data-holo="sakura2"],.rbr[data-holo="coinring"],.rbr[data-holo="diamond"],.rbr[data-holo="thunder"],.rbr[data-holo="raiden"],[data-holo="raiden"],.rbr[data-holo="flame"],.hsk[data-holo="sakura2"],.hsk[data-holo="coinring"],.hsk[data-holo="diamond"],.hsk[data-holo="thunder"],.hsk[data-holo="raiden"],[data-holo="raiden"],.hsk[data-holo="flame"]) .rbr-holo::before{content:"";position:absolute;inset:-70%;z-index:0;pointer-events:none;padding:0!important;-webkit-mask:none!important;mask:none!important;animation:hkSpin 10s linear infinite}
:is(.rbr[data-holo="sakura2"],.rbr[data-holo="coinring"],.rbr[data-holo="diamond"],.rbr[data-holo="thunder"],.rbr[data-holo="raiden"],[data-holo="raiden"],.rbr[data-holo="flame"],.hsk[data-holo="sakura2"],.hsk[data-holo="coinring"],.hsk[data-holo="diamond"],.hsk[data-holo="thunder"],.hsk[data-holo="raiden"],[data-holo="raiden"],.hsk[data-holo="flame"]) .rbr-holo::after{content:"";position:absolute;inset:3px;z-index:1;border-radius:14px;pointer-events:none;opacity:1!important;animation:none}
.hsk .rbr-holo::after{inset:4px!important}
/* 🌸 ซากุระโคจร */
:is(.rbr[data-holo="sakura2"],.hsk[data-holo="sakura2"]) .rbr-holo{box-shadow:0 0 26px rgba(244,114,182,.55),0 18px 40px -16px rgba(236,72,153,.6)!important;background:transparent!important}
:is(.rbr[data-holo="sakura2"],.hsk[data-holo="sakura2"]) .rbr-holo::before{background:conic-gradient(from var(--ha),transparent 0 62%,rgba(249,168,212,.4) 75%,#fbcfe8 92%,#fff 100%)!important}
:is(.rbr[data-holo="sakura2"],.hsk[data-holo="sakura2"]) .rbr-holo::after{background:radial-gradient(4px 3px at 20% 30%,rgba(251,207,232,.5) 60%,transparent 62%),radial-gradient(4px 3px at 70% 65%,rgba(249,168,212,.45) 60%,transparent 62%),linear-gradient(150deg,rgba(80,10,45,0.30),rgba(35,5,24,0.30) 55%,rgba(90,14,52,0.30))!important;background-size:70px 110px,90px 130px,auto!important;animation:hkFall 24s linear infinite!important}
:is(.rbr[data-holo="sakura2"],.hsk[data-holo="sakura2"]) .hfx i{width:11px;height:8px;border-radius:80% 0 80% 0;background:linear-gradient(135deg,#fff5fa,#f9a8d4 55%,#ec4899);box-shadow:0 0 6px rgba(244,114,182,.95);animation:hkOrbit 26s linear infinite var(--d),hkTwirl 5s linear infinite}
:is(.rbr[data-holo="sakura2"],.hsk[data-holo="sakura2"]) .rbr-holo .hd small{color:#fbcfe8}
/* 🪙 เหรียญทองโคจร */
:is(.rbr[data-holo="coinring"],.hsk[data-holo="coinring"]) .rbr-holo{box-shadow:0 0 26px rgba(250,204,21,.5),0 18px 40px -16px rgba(250,204,21,.6)!important;background:transparent!important}
:is(.rbr[data-holo="coinring"],.hsk[data-holo="coinring"]) .rbr-holo::before{background:conic-gradient(from var(--ha),transparent 0 60%,rgba(250,204,21,.4) 74%,#fde68a 92%,#fffbe6 100%)!important}
:is(.rbr[data-holo="coinring"],.hsk[data-holo="coinring"]) .rbr-holo::after{background:radial-gradient(circle at 100% 0,rgba(250,204,21,.18),transparent 45%),linear-gradient(160deg,rgba(48,30,4,0.30),rgba(18,11,2,0.30))!important}
:is(.rbr[data-holo="coinring"],.hsk[data-holo="coinring"]) .hfx i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe6 0 18%,#fcd34d 40%,#b45309 100%);box-shadow:inset 0 0 0 1.5px rgba(146,64,14,.7),0 0 7px rgba(250,204,21,.95);animation:hkOrbit 28s linear infinite var(--d),hkFlipC 2.8s ease-in-out infinite}
:is(.rbr[data-holo="coinring"],.hsk[data-holo="coinring"]) .rbr-holo .hd small{color:#fcd34d}
:is(.rbr[data-holo="coinring"],.hsk[data-holo="coinring"]) .rbr-holo .hd b:not(.r){color:#fde68a!important;text-shadow:0 0 10px rgba(250,204,21,.75)!important}
/* 💎 เพชรนิรันดร์ */
:is(.rbr[data-holo="diamond"],.hsk[data-holo="diamond"]) .rbr-holo{box-shadow:0 0 28px rgba(165,243,252,.5),0 18px 40px -16px rgba(129,140,248,.6)!important;background:transparent!important}
:is(.rbr[data-holo="diamond"],.hsk[data-holo="diamond"]) .rbr-holo::before{background:conic-gradient(from var(--ha),transparent 0 55%,#f472b6 66%,#a78bfa 74%,#38bdf8 82%,#a7f3d0 90%,#fff 100%)!important;animation-duration:9s!important}
:is(.rbr[data-holo="diamond"],.hsk[data-holo="diamond"]) .rbr-holo::after{background:linear-gradient(125deg,rgba(255,255,255,.1),transparent 30%),linear-gradient(160deg,rgba(12,24,52,0.30),rgba(6,10,26,0.30) 60%,rgba(20,20,60,0.30))!important}
:is(.rbr[data-holo="diamond"],.hsk[data-holo="diamond"]) .hfx i{width:9px;height:9px;rotate:45deg;background:linear-gradient(135deg,#fff,#a5f3fc 45%,#818cf8);box-shadow:0 0 8px rgba(165,243,252,.95),0 0 2px #fff;animation:hkOrbit 30s linear infinite var(--d),hkTwk 3.2s ease-in-out infinite var(--d)}
:is(.rbr[data-holo="diamond"],.hsk[data-holo="diamond"]) .rbr-holo .hd small{color:#a5f3fc}
:is(.rbr[data-holo="diamond"],.hsk[data-holo="diamond"]) .rbr-holo .hd b:not(.g):not(.r){color:#e0f2fe!important}
/* ⚡ สายฟ้าพันขอบ (สองสายวิ่งสวนกัน + ฟ้าแลบที่มุม) */
:is(.rbr[data-holo="thunder"],.hsk[data-holo="thunder"]) .rbr-holo{box-shadow:0 0 26px rgba(56,189,248,.55),0 18px 40px -16px rgba(56,189,248,.6)!important;background:transparent!important}
:is(.rbr[data-holo="thunder"],.hsk[data-holo="thunder"]) .rbr-holo::before{background:conic-gradient(from var(--ha),transparent 0 32%,#38bdf8 44%,#fff 50%,transparent 50% 82%,#a78bfa 94%,#fff 100%)!important;animation-duration:7s!important}
:is(.rbr[data-holo="thunder"],.hsk[data-holo="thunder"]) .rbr-holo::after{background:repeating-linear-gradient(180deg,rgba(56,189,248,.05) 0 1px,transparent 1px 3px),linear-gradient(160deg,rgba(6,22,40,0.30),rgba(3,10,22,0.30))!important}
:is(.rbr[data-holo="thunder"],.hsk[data-holo="thunder"]) .hfx i{width:16px;height:22px;translate:none;background:linear-gradient(#e0f2fe,#38bdf8);clip-path:polygon(55% 0,15% 55%,45% 55%,30% 100%,85% 38%,55% 38%,75% 0);filter:drop-shadow(0 0 4px #38bdf8);opacity:0;animation:hkBolt 8s linear infinite var(--d)}
:is(.rbr[data-holo="thunder"],.hsk[data-holo="thunder"]) .hfx i:nth-child(1){left:-2px;top:-4px}:is(.rbr[data-holo="thunder"],.hsk[data-holo="thunder"]) .hfx i:nth-child(2){left:auto;right:-2px;top:-4px;scale:-1 1}
:is(.rbr[data-holo="thunder"],.hsk[data-holo="thunder"]) .hfx i:nth-child(3){left:-2px;top:auto;bottom:-4px;scale:1 -1}:is(.rbr[data-holo="thunder"],.hsk[data-holo="thunder"]) .hfx i:nth-child(4){left:auto;right:-2px;top:auto;bottom:-4px;scale:-1 -1}
:is(.rbr[data-holo="thunder"],.hsk[data-holo="thunder"]) .rbr-holo .hd small{color:#7dd3fc}
/* [17 ต.ค.] จอดาบสายฟ้า (เฉพาะแพ็กคู่ดาบสายฟ้า) — โครงเดียวกับจอสายฟ้า แต่แสงวิ่งฟ้า-ทอง สายฟ้าสีทองอ่อน */
:is(.rbr[data-holo="raiden"],.hsk[data-holo="raiden"]) .rbr-holo{box-shadow:0 0 26px rgba(56,189,248,.55),0 18px 40px -16px rgba(250,204,21,.55)!important;background:transparent!important}
:is(.rbr[data-holo="raiden"],.hsk[data-holo="raiden"]) .rbr-holo::before{background:conic-gradient(from var(--ha),transparent 0 32%,#38bdf8 44%,#fff 50%,transparent 50% 82%,#facc15 94%,#fff 100%)!important;animation-duration:7s!important}
:is(.rbr[data-holo="raiden"],.hsk[data-holo="raiden"]) .rbr-holo::after{background:repeating-linear-gradient(180deg,rgba(56,189,248,.05) 0 1px,transparent 1px 3px),linear-gradient(160deg,rgba(6,22,40,0.30),rgba(3,10,22,0.30))!important}
:is(.rbr[data-holo="raiden"],.hsk[data-holo="raiden"]) .hfx i{width:16px;height:22px;translate:none;background:linear-gradient(#fef9c3,#38bdf8 55%,#facc15);clip-path:polygon(55% 0,15% 55%,45% 55%,30% 100%,85% 38%,55% 38%,75% 0);filter:drop-shadow(0 0 4px #38bdf8);opacity:0;animation:hkBolt 8s linear infinite var(--d)}
:is(.rbr[data-holo="raiden"],.hsk[data-holo="raiden"]) .hfx i:nth-child(1){left:-2px;top:-4px}:is(.rbr[data-holo="raiden"],.hsk[data-holo="raiden"]) .hfx i:nth-child(2){left:auto;right:-2px;top:-4px;scale:-1 1}
:is(.rbr[data-holo="raiden"],.hsk[data-holo="raiden"]) .hfx i:nth-child(3){left:-2px;top:auto;bottom:-4px;scale:1 -1}:is(.rbr[data-holo="raiden"],.hsk[data-holo="raiden"]) .hfx i:nth-child(4){left:auto;right:-2px;top:auto;bottom:-4px;scale:-1 -1}
:is(.rbr[data-holo="raiden"],.hsk[data-holo="raiden"]) .rbr-holo .hd small{color:#fde68a}
:is(.rbr[data-holo="raiden"],.hsk[data-holo="raiden"]) .rbr-holo .hd b:not(.r){color:#e0f2fe!important;text-shadow:0 0 10px rgba(56,189,248,.85),0 0 18px rgba(250,204,21,.35)!important}
/* 🔥 วงแหวนเพลิง */
:is(.rbr[data-holo="flame"],.hsk[data-holo="flame"]) .rbr-holo{box-shadow:0 0 26px rgba(249,115,22,.55),0 18px 40px -16px rgba(239,68,68,.6)!important;background:transparent!important}
:is(.rbr[data-holo="flame"],.hsk[data-holo="flame"]) .rbr-holo::before{background:conic-gradient(from var(--ha),transparent 0 55%,#7f1d1d 64%,#ef4444 74%,#f97316 84%,#facc15 94%,#fff7d6 100%)!important;animation-duration:9s!important}
:is(.rbr[data-holo="flame"],.hsk[data-holo="flame"]) .rbr-holo::after{background:radial-gradient(ellipse at 50% 120%,rgba(249,115,22,.3),transparent 60%),linear-gradient(170deg,rgba(30,10,4,0.30),rgba(14,5,2,0.30))!important}
:is(.rbr[data-holo="flame"],.hsk[data-holo="flame"]) .hfx i{left:var(--x);width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fff7d6,#fb923c 50%,transparent 72%);box-shadow:0 0 6px #f97316;animation:hkEmber 5.5s ease-out infinite var(--d)}
:is(.rbr[data-holo="flame"],.hsk[data-holo="flame"]) .rbr-holo .hd small{color:#fdba74}
:is(.rbr[data-holo="flame"],.hsk[data-holo="flame"]) .rbr-holo .hd b:not(.r){color:#fed7aa!important;text-shadow:0 0 10px rgba(249,115,22,.75)!important}
html[data-fxq="0"] .hfx i{animation:none!important;opacity:.85}
/* ===== [21 ต.ค.] หน้าแรกแบบ parallax + การ์ดกระจกใส (รูปธรรมชาติ) ===== */
#loginView{position:relative;overflow-x:clip}
#loginView .auth-wrap{position:relative;z-index:1}
.kai-perks{margin:8px 0 10px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,130,150,.45);background:linear-gradient(135deg,rgba(200,16,46,.2),rgba(18,6,15,.55));font-size:.82rem;line-height:1.55}
.kai-perks b{display:block;margin-bottom:4px;color:#ffd9de;letter-spacing:.04em}
.kai-perks>summary{cursor:pointer;list-style:none;font-weight:700;color:#ffd9de;letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between;gap:.6rem}.kai-perks>summary::-webkit-details-marker{display:none}.kai-perks>summary::after{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;flex:none;margin:-3px 2px 0 0}.kai-perks[open]>summary::after{transform:rotate(-135deg);margin-top:3px}.kai-perks[open]>summary{margin-bottom:6px}.kai-perks:not([open]){padding-top:9px;padding-bottom:9px}
.kai-perks.vel>summary{color:#fff3bd}.kai-perks ul{margin:0 0 6px;padding:0;list-style:none}.kai-perks li{padding:1px 0}.kai-perks li::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;border-radius:50%;background:#ff6b86;vertical-align:middle}.kai-perks small{display:block;opacity:.75;font-size:.72rem}
.kai-ltd{color:#ff8da1;letter-spacing:.04em}
.rbr-bot.hero.kai-aura{isolation:isolate}
.rbr-bot.hero.kai-aura::before{content:"";position:absolute;left:50%;bottom:2%;width:125%;height:92%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,45,75,.5),rgba(255,45,75,.14) 58%,transparent 72%);animation:kaiAura 2.8s ease-in-out infinite;pointer-events:none;z-index:-1}
@keyframes kaiAura{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.kai-ser{transition:opacity 1.5s ease;position:absolute;left:50%;bottom:-4px;translate:-50% 0;z-index:7;pointer-events:none;font:700 10px/1 "Chakra Petch",ui-monospace,monospace;letter-spacing:.1em;padding:3px 8px;border-radius:99px;color:#ffe3e7;background:linear-gradient(135deg,#8a1329,#3a0912);border:1px solid rgba(255,130,150,.65);box-shadow:0 2px 10px rgba(255,40,70,.35)}
.kai-ser.gone{opacity:0}
.rbr-bot.hero.kai-enter .rbr-fig{animation:kaiWarp 1.9s cubic-bezier(.3,.7,.2,1) both}
@keyframes kaiWarp{0%{opacity:0;transform:translateY(-90px) scaleY(1.35) scaleX(.8);filter:blur(10px) brightness(3.2) saturate(1.8)}32%{opacity:1;transform:translateY(-20px) scaleY(1.15) scaleX(.9);filter:blur(4px) brightness(2.2)}48%{opacity:1;transform:translateY(8px) scaleY(.94) scaleX(1.05);filter:blur(0) brightness(1.7)}62%{transform:translateY(-4px) scaleY(1.02);filter:brightness(1.25)}78%{transform:translateY(1px)}100%{opacity:1;transform:none;filter:none}}
.kai-warp{position:absolute;inset:0;pointer-events:none;z-index:9}
.kai-warp i{position:absolute;display:block}
.kai-warp .beam{left:50%;bottom:6%;width:46%;height:230%;translate:-50% 0;background:linear-gradient(180deg,transparent,rgba(255,60,90,0) 12%,rgba(255,90,115,.32) 55%,rgba(255,225,200,.7));filter:blur(6px);clip-path:polygon(42% 0,58% 0,86% 100%,14% 100%);transform-origin:50% 100%;animation:kaiBeam 1.7s ease-out both}
@keyframes kaiBeam{0%{opacity:0;transform:scaleX(.2)}18%{opacity:1;transform:scaleX(1)}55%{opacity:.9;transform:scaleX(.9)}100%{opacity:0;transform:scaleX(.25)}}
.kai-warp .ring{left:50%;bottom:3%;width:30%;aspect-ratio:3/1;translate:-50% 0;border-radius:50%;border:2px solid rgba(255,170,185,.95);box-shadow:0 0 18px rgba(255,60,90,.8),inset 0 0 14px rgba(255,60,90,.6);opacity:0;animation:kaiRing 1.1s .72s ease-out both}
.kai-warp .ring.r2{animation-delay:.9s;border-color:rgba(255,215,150,.9)}
@keyframes kaiRing{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(2.6)}}
.kai-warp .flare{left:50%;bottom:8%;width:70%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,230,.95),rgba(255,70,100,.45) 45%,transparent 72%);opacity:0;animation:kaiFlare 1.2s .62s ease-out both}
@keyframes kaiFlare{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
.kai-petals{position:absolute;inset:-30% -10% 0;overflow:hidden;pointer-events:none;z-index:8}
.kai-petals.big{position:fixed;inset:0;z-index:1}
.kai-petals i{position:absolute;top:-6%;width:11px;height:15px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#ff6b86,#c8102e);opacity:0;scale:var(--s);animation:kaiFall var(--t) var(--d) ease-in forwards}
@keyframes kaiFall{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.95}100%{opacity:0;transform:translate(var(--x),115vh) rotate(540deg)}}
.kai-petals:not(.big) i{animation-name:kaiRise}
@keyframes kaiRise{0%{opacity:0;top:60%;transform:translate(0,0) rotate(0)}15%{opacity:.95}100%{opacity:0;top:-10%;transform:translate(var(--x),0) rotate(360deg)}}
.kai-big{position:fixed;inset:0;z-index:9000;pointer-events:none}
.kai-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(255,60,90,.55),rgba(120,0,20,.25) 55%,transparent 75%);animation:kaiFl 1.6s ease-out forwards}
@keyframes kaiFl{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.kai-bt{position:absolute;left:50%;top:38%;translate:-50% 0;text-align:center;color:#fff;text-shadow:0 2px 18px rgba(200,16,46,.9);animation:kaiBt 4.2s ease-out forwards}
.kai-bt small{display:block;letter-spacing:.3em;font-size:11px;color:#ffc2cc}.kai-bt b{display:block;font:700 34px/1.15 "Chakra Petch",sans-serif}.kai-bt em{display:block;font-style:normal;font:700 22px/1.3 "Chakra Petch",sans-serif;color:#ffd24d}
@keyframes kaiBt{0%{opacity:0;transform:scale(.7)}12%{opacity:1;transform:scale(1.06)}20%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.kai-petals,.kai-flash,.kai-warp{display:none}.rbr-bot.hero.kai-enter .rbr-fig{animation:none}}
.lp-herobg{position:absolute;left:0;right:0;top:0;height:max(92vh,640px);z-index:1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.lp-herobg img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
/* [25 ต.ค.] ภาพหน้าแรกสว่างขึ้น: ภาพอยู่เหนือแสงฟุ้ง (.auth-glow-layer) + ม่านเข้มบางลง */
.lp-herobg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,26,19,.34) 0%,rgba(4,26,19,.20) 45%,rgba(4,26,19,.06) 100%)}
#loginView>header{z-index:20}
.lp-photo{width:100%;padding:10px;border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.12));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.5);box-shadow:0 30px 70px -28px rgba(0,30,22,.75),inset 0 1px 0 rgba(255,255,255,.6)}
.lp-photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:24px}
.lp-heroglass{padding:28px 26px;border-radius:28px;background:linear-gradient(135deg,rgba(6,34,26,.36),rgba(6,34,26,.22));-webkit-backdrop-filter:blur(7px) saturate(1.4);backdrop-filter:blur(7px) saturate(1.4);border:1px solid rgba(255,255,255,.45);text-shadow:0 1px 3px rgba(0,25,18,.75),0 0 18px rgba(0,25,18,.45);box-shadow:0 24px 60px -26px rgba(0,30,22,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.lp-heroglass .auth-title-accent{text-shadow:none;-webkit-text-fill-color:#f2b44d;color:#f2b44d;background:none;filter:drop-shadow(0 1px 3px rgba(0,25,18,.8))}
@media(max-width:560px){.lp-heroglass{padding:20px 16px;border-radius:24px}}
.lp-band{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:clamp(480px,78vh,700px);display:grid;place-items:center;overflow:hidden;padding:84px 18px;isolation:isolate}
.lp-band .lp-img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;will-change:transform;image-rendering:auto}
.lp-imgwrap{position:absolute;inset:0;z-index:-1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 17%,#000 83%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 17%,#000 83%,transparent 100%)}
.lp-imgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,26,19,.18),rgba(4,26,19,.30))}
.lp-imgwrap .lp-img{z-index:0}
.lp-band.lp-face{min-height:clamp(560px,92vh,820px)}.lp-face .lp-img{object-position:50% 14%}
@media(min-width:561px){.lp-face .lp-glass{max-width:430px}}
@media(max-width:560px){.lp-band.lp-face{min-height:720px;align-items:end;padding:64px 14px 36px}.lp-face .lp-img{object-position:50% 0}}
.lp-glass{position:relative;overflow:hidden;max-width:760px;width:100%;padding:30px 28px;border-radius:28px;color:#fff;text-shadow:0 1px 10px rgba(0,35,28,.5);
 background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.04) 50%,rgba(255,255,255,.12)),rgba(6,34,26,.12);
 -webkit-backdrop-filter:blur(7px) saturate(1.9) brightness(1.04);backdrop-filter:blur(7px) saturate(1.9) brightness(1.04);
 border:1px solid rgba(255,255,255,.62);box-shadow:0 30px 70px -26px rgba(0,40,30,.6),inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.22),inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(255,255,255,.2)}
.lp-glass::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:30%;will-change:transform;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translate3d(-140%,0,0) skewX(-18deg);animation:lpSheen 7s ease-in-out infinite;pointer-events:none}
@keyframes lpSheen{0%,55%{transform:translate3d(-140%,0,0) skewX(-18deg)}100%{transform:translate3d(520%,0,0) skewX(-18deg)}}
.lp-glass:not(.in)::before{animation-play-state:paused}
.lp-herobg img,.lp-imgwrap .lp-img{will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.lp-glass,.lp-heroglass{transform:translateZ(0)}
@media(hover:none),(max-width:700px){.lp-glass::before{animation:none;display:none}}
.lp-tag{display:inline-block;font-size:.72rem;letter-spacing:.16em;padding:.28rem .8rem;border-radius:999px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.55);margin-bottom:12px}
.lp-glass h2{font-family:Kanit,Prompt,sans-serif;font-weight:500;font-size:clamp(1.55rem,4.6vw,2.4rem);line-height:1.45;margin-bottom:10px}
.lp-glass p{font-size:clamp(.95rem,2.6vw,1.08rem);line-height:1.85;opacity:.96}
.lp-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:18px}
.lp-chip{padding:12px 18px;border-radius:999px;justify-content:center;text-align:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);font-family:Kanit,Prompt,sans-serif;font-weight:500;font-size:.95rem;display:flex;align-items:center;gap:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.lp-chip i{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.3);font-style:normal;font-size:1rem}
.lp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.lp-stats div{text-align:center;padding:12px 6px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45)}
.lp-stats b{display:block;font-family:Kanit,Prompt,sans-serif;font-weight:500;font-size:clamp(1.3rem,5vw,1.9rem);color:#ffe9a3}
.lp-stats small{font-size:.74rem;opacity:.92}
.lp-note{font-size:.72rem;opacity:.85;margin-top:14px}
.lp-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.lp-btn{cursor:pointer;font-family:Kanit,Prompt,sans-serif;font-weight:500;font-size:1.02rem;padding:13px 26px;border-radius:999px;border:1.5px solid rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 24px -12px rgba(0,40,30,.6);text-shadow:none}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1rem;margin-top:-.4rem}@media (min-width:768px){.hero-cta{display:none}} /* คอมมีปุ่มเข้าสู่ระบบ/สมัครคอลัมน์ขวาในจอแรกอยู่แล้ว */
.hero-cta .lp-btn{font-size:1.05rem;padding:14px 30px}.hero-cta-in{background:none;border:0;color:var(--sidebar-ink-muted,#cfe3da);font:inherit;font-size:.9rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.4rem}
/* [31 ต.ค.] มือถือ: ปุ่มสมัครติดล่างจอ หลังเลื่อนพ้นปุ่มหัวเว็บ (หลบปุ่มลอยมุมซ้าย/ขวา) · ไม่มีแอนิเมชันวน */
.sticky-cta{position:fixed;left:84px;right:84px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;justify-content:center;transform:translateY(140%);transition:transform .25s ease;pointer-events:none}
.sticky-cta.on{transform:none;pointer-events:auto}.sticky-cta .lp-btn{width:100%;max-width:320px;padding:12px 14px;font-size:.95rem;white-space:nowrap;box-shadow:0 10px 26px -10px rgba(0,0,0,.6)}
@media (min-width:821px){.sticky-cta{display:none}}
.lp-btn.gold{color:#5a3a10;border-color:#c09252;background:linear-gradient(180deg,#fffdf4,#f6e4b6 55%,#efcf86)}
.lp-btn:active{transform:translateY(1px)}
.lp-rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.lp-rv.in{opacity:1;transform:none}
.lp-band.r .lp-glass{margin-left:auto}.lp-band.l .lp-glass{margin-right:auto}
@media(min-width:900px){.lp-band{padding-inline:max(24px,calc((100vw - 1152px)/2))}.lp-glass{max-width:560px}}
@media(max-width:560px){.lp-band{min-height:auto;padding:64px 14px}.lp-glass{padding:22px 18px;border-radius:24px}.lp-herobg img{top:0;height:100%}}
@media(prefers-reduced-motion:reduce){.lp-glass::before{animation:none}.lp-rv{opacity:1;transform:none;transition:none}}
/* ===== [25 ต.ค. user "แชทรวมในหน้าแดชบอร์ด ห้องคอมมูนิตี้ ไม่รก ไม่กินพื้นที่"] ห้องคอมมูนิตี้ — คอม: แผงเลื่อนจากขวา · มือถือ: แผ่นเลื่อนขึ้นจากล่าง ===== */
.cm-sys>span:first-child{display:flex}
.cm-on{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--ink-muted,#a9b6ae);white-space:nowrap}
.cm-on i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.18)}
.cm-rules{flex:none;margin:.6rem .8rem 0;padding:.6rem .8rem;border-radius:12px;background:rgba(240,184,77,.08);border:1px solid rgba(240,184,77,.25);font-size:.76rem;line-height:1.55;color:#e9dcc0}
.cm-rules b{display:block;color:#f0b84d;font-size:.78rem;margin-bottom:.15rem}
.cm-rules ul{margin:0;padding-left:1rem}
.cm-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.6rem .7rem .4rem;display:flex;flex-direction:column;gap:.15rem}
.cm-empty{margin:auto;text-align:center;color:var(--ink-muted);font-size:.82rem;padding:2rem 1rem}
.cm-day{align-self:center;font-size:.68rem;color:var(--ink-muted);padding:.5rem 0 .2rem}
.cm-m{display:flex;gap:.5rem;align-items:flex-start;padding:.3rem .1rem;position:relative}
.cm-m.cont{padding-top:0}
.cm-m.cont .cm-av{visibility:hidden;height:0}
.cm-m.cont .cm-nm{display:none}
.cm-av{flex:none;width:34px;cursor:pointer;margin-top:2px}
.cm-av .pav{--nb:0!important;margin-right:0!important}
.cm-av .pav .cbs,.cm-av .pav .rk{display:none}
.cm-c{min-width:0;max-width:calc(100% - 46px)}
.cm-nm{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--ink-muted);margin:0 0 .15rem .15rem;cursor:pointer}
.cm-nm em{font-style:normal;color:#e8e2cf;font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-nm .cb-mini{display:inline-flex;gap:2px}
.cm-nm .cb-mini img{width:14px;height:14px;object-fit:contain;filter:drop-shadow(0 0 3px rgba(250,204,21,.6))}
.cm-staff{display:inline-flex;align-items:center;gap:.2rem;font-size:.64rem;font-weight:700;color:#1b1406;background:linear-gradient(135deg,#f6d77a,#d9a13b);padding:.05rem .4rem .05rem .3rem;border-radius:99px}
.cm-staff svg{width:10px;height:10px}
.cm-b{display:inline-block;padding:.45rem .7rem;border-radius:4px 14px 14px 14px;background:rgba(255,255,255,.075);font-size:.86rem;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.cm-t{font-size:.62rem;color:var(--ink-muted);margin-left:.4rem;white-space:nowrap}
.cm-rp{position:absolute;right:0;top:50%;translate:0 -50%;border:0;background:rgba(255,255,255,.08);color:var(--ink-muted);border-radius:8px;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s}
.cm-rp svg{width:13px;height:13px}
.cm-m:hover .cm-rp,.cm-m.sel .cm-rp{opacity:1}
.cm-rp.done{color:#f0b84d;opacity:1;cursor:default}
.cm-m.me{flex-direction:row-reverse}
.cm-m.me .cm-av,.cm-m.me .cm-nm{display:none}
.cm-m.me .cm-c{max-width:82%;text-align:right}
.cm-m.me .cm-b{background:linear-gradient(135deg,#2f6a55,#22503f);border-radius:14px 4px 14px 14px;text-align:left}
.cm-m.me .cm-t{margin:0 .4rem 0 0}
.cm-m.stf .cm-b{background:linear-gradient(135deg,rgba(240,184,77,.18),rgba(240,184,77,.07));border:1px solid rgba(240,184,77,.45)}
.cm-m.stf .cm-av .lg{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f6d77a,#c98f3e)}
.cm-m.stf .cm-av .lg img{width:22px;height:22px}
.cm-sys{align-self:center;max-width:92%;display:flex;align-items:center;gap:.45rem;margin:.35rem 0;padding:.35rem .75rem .35rem .4rem;border-radius:99px;background:linear-gradient(90deg,rgba(240,184,77,.16),rgba(240,184,77,.05));border:1px solid rgba(240,184,77,.3);font-size:.76rem;color:#f3dfae}
.cm-sys .pav{flex:none}
.cm-sys .pav .cbs,.cm-sys .pav .rk{display:none}
.cm-sys.noav{padding-left:.75rem}
.cm-new{position:absolute;left:50%;translate:-50% 0;bottom:86px;z-index:2;border:0;border-radius:99px;padding:.35rem .8rem;font-size:.74rem;font-weight:600;background:#f0b84d;color:#1b1406;box-shadow:0 8px 20px -6px rgba(0,0,0,.6);cursor:pointer}
.cm-ft{flex:none;border-top:1px solid var(--line);padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom))}
.cm-err{font-size:.74rem;color:#fca5a5;margin:0 .2rem .4rem;line-height:1.45}
.cm-hint{font-size:.72rem;color:var(--ink-muted);margin:0 .2rem .4rem}
.cm-hint a{color:#f0b84d;cursor:pointer;text-decoration:underline}
.cm-row{display:flex;gap:.45rem;align-items:center}
.cm-row input{flex:1;min-width:0;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--ink);padding:0 .85rem;font-size:16px;outline:none}
.cm-row input:focus{border-color:rgba(240,184,77,.6)}
.cm-row input::placeholder{color:#7f8c84}
.cm-row button{flex:none;height:42px;min-width:42px;padding:0 .7rem;border-radius:12px;border:0;background:linear-gradient(135deg,#f0b84d,#d9962e);color:#1b1406;font-weight:700;font-size:.8rem;display:grid;place-items:center;cursor:pointer}
.cm-row button:disabled{opacity:.45;cursor:default}
.cm-row button svg{width:18px;height:18px}
.cm-cnt{font-size:.66rem;color:var(--ink-muted);text-align:right;margin:.25rem .2rem 0}
.cm-cnt.max{color:#fca5a5}
.cm-mute{font-size:.8rem;color:#fcd9a0;text-align:center;padding:.5rem;border-radius:12px;background:rgba(240,184,77,.08)}
.sb-cm-n{margin-left:auto;font-size:.66rem;font-weight:600;color:#16a34a;display:inline-flex;align-items:center;gap:.25rem}
.sb-cm-n::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e}
.msn-navdot.cm-dot{min-width:9px;width:9px;height:9px;padding:0}
.sb-cm-n:not([hidden]) + .cm-dot{margin-left:.45rem}
.cp-tabs{display:flex;gap:4px;padding:.35rem .6rem 0;flex:none;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.cp-tabs[hidden],.cp-note[hidden]{display:none}
.cp-tabs button{flex:1;position:relative;border:0;background:transparent;color:var(--sidebar-ink-muted,#a9b6ae);font:inherit;font-size:.78rem;font-weight:600;padding:.5rem .4rem .55rem;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.cp-tabs button.on{color:#f3d08f;border-bottom-color:#e6b567}
.cp-gdot{display:inline-block;vertical-align:top;margin-left:4px;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.25)}
.cp-gdot[hidden]{display:none}
.cp-note{flex:none;font-size:.7rem;line-height:1.45;padding:.4rem .8rem;border-bottom:1px solid rgba(255,255,255,.08)}
.cp-note.prv{color:#bfeedd;background:rgba(16,185,129,.09)}.cp-note.prv b{color:#6ee7b7}
.cp-note.pub{color:#fde2b0;background:rgba(240,184,77,.11)}.cp-note.pub b{color:#f0b84d}
.cp-note a{text-decoration:underline;cursor:pointer;color:inherit}
.cm-host{--ink:#f4f1e6;--ink-muted:#a9b6ae;--line:rgba(214,175,110,.2);display:none;flex:1;min-height:0;flex-direction:column;position:relative;color:var(--ink)}
.chat-panel.cp-cm .cm-host{display:flex}
.chat-panel.cp-cm .chat-panel-body,.chat-panel.cp-cm .chat-panel-foot{display:none}
.chat-panel.cp-cm{width:min(390px,calc(100vw - 2.2rem));height:min(620px,calc(100vh - 7rem))}
@media(max-width:480px){.chat-panel.cp-cm{left:.6rem;right:.6rem;width:auto;height:calc(100dvh - 6.4rem)}}
.cm-host .cm-rules{margin:.5rem .6rem 0}
.cm-host .cm-new{bottom:78px}
.chat-panel-title .cm-on{font-size:.7rem}
.fab-chat-avatar::after{content:"";position:absolute;right:-5px;bottom:-4px;z-index:2;width:17px;height:17px;border-radius:50%;background:#e6b567 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 6h14a1.5 1.5 0 0 1 1.5 1.5v7A1.5 1.5 0 0 1 19 16h-7l-4 3.5V16H5a1.5 1.5 0 0 1-1.5-1.5v-7A1.5 1.5 0 0 1 5 6z' fill='%23241a08'/%3E%3C/svg%3E") center/11px no-repeat;border:2px solid #142a25;box-sizing:border-box}
.fab-cm-dot{position:absolute;top:-1px;right:-1px;z-index:2;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid #142a25}
.fab-cm-dot[hidden]{display:none}
.fab-team-dot{position:absolute;top:-2px;left:-2px;z-index:3;width:12px;height:12px;border-radius:50%;background:#ef4444;border:2px solid #142a25}.fab-team-dot[hidden]{display:none}
/* [5 พ.ย.] ป้ายทีมงานทักก่อน (เหนือปุ่มแชท · แตะ = เปิดแชท) */
.fab-team-msg{position:fixed;right:1.1rem;bottom:calc(max(.6rem, env(safe-area-inset-bottom, 0px)) + var(--vv-shift, 0px) + 54px);z-index:15;padding:.5rem .85rem;border-radius:14px 14px 4px 14px;border:1px solid rgba(246,210,122,.55);background:rgba(20,42,37,.96);color:#f6ecd2;font:600 .8rem/1.2 inherit;cursor:pointer;box-shadow:0 12px 28px -10px rgba(0,0,0,.6);animation:ftmIn .3s ease-out}
@keyframes ftmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cm-priv{margin:0 .1rem .5rem;padding:.55rem .65rem;border-radius:12px;background:rgba(240,184,77,.1);border:1px solid rgba(240,184,77,.35);font-size:.76rem;line-height:1.45;color:#fde2b0}
.cm-priv-b{display:flex;gap:.4rem;margin-top:.45rem;flex-wrap:wrap}
.cm-priv-b button{flex:1;min-width:120px;border:0;border-radius:9px;padding:.45rem .5rem;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer}
.cm-priv-b .pv{background:linear-gradient(135deg,#34d399,#10b981);color:#062b1f}
.cm-tg{display:flex;align-items:center;gap:.4rem;cursor:pointer}.cm-tg input{accent-color:#e6b567}
.cm-priv-b .pb{background:rgba(255,255,255,.08);color:#e9dcc0}
/* [26 ต.ค.] iPhone รุ่นเก่า: ปิดเบลอพื้นหลัง (backdrop-filter) ทั้งหน้า — กินแรง GPU มากบน A9/A10 */
html.weak-dev *,html.weak-dev *::before,html.weak-dev *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* [26 ต.ค. user "กดที่ธีมการ์ดแล้วค้างไปเลย ทุกเครื่อง เครื่องร้อน"] ธีมที่ขยับ (ผ้าไหมใช้ @property วิ่งในไล่สี + อนุภาคธีมภาพ) ต้องวาดใหม่ทั้งการ์ดทุกเฟรม — หนักมากบน Safari
   • มือถือ/จอแคบ (<700px): ธีมผ้าไหมเป็นภาพนิ่ง (ธีมภาพอื่นเป็นภาพนิ่งอยู่แล้ว) · เครื่องประหยัด (fxq 0 / weak-dev): ไม่ขยับทุกธีม
   • เปิดร้านอยู่ (หน้าข้างหลังถูกบังหรือซ่อน): หยุดแอนิเมชันธีมของการ์ดหน้าหลักไว้ก่อน แล้วเล่นต่อเมื่อปิดร้าน */
@media (max-width:699.98px){.shop-it .ic.th.ct-silk,.sp-card.ct-silk,html[data-card-theme=silk][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){animation:none!important}}
html[data-fxq="0"] .shop-it .ic.th,html[data-fxq="0"] .sp-card,html[data-fxq="0"][data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side),html.weak-dev[data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){animation:none!important}
html.shop-open-root[data-card-theme] :is(#heroCombo,#tokenBalanceSection,#profitSummaryCard,.msn-strip,.msn-box,.fsh2,.aqx,.lbx,.msn-hero,.mya-side){animation-play-state:paused!important}
.bt2{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;min-height:210px;border-radius:22px;color:#fff;cursor:pointer;border:2px solid transparent;background:#0b2a4a;box-shadow:0 8px 22px rgba(8,50,80,.28)}
.bt2 .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;z-index:-2;transition:transform 6s ease}
.bt2:hover .bg{transform:scale(1.05)}
.bt2::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(4,20,38,.88) 0%,rgba(4,20,38,.45) 30%,rgba(4,20,38,0) 58%)}
.bt2.ready{border-color:#f6d27a;box-shadow:0 0 0 3px rgba(246,210,122,.28),0 8px 22px rgba(8,50,80,.3)}
.bt2.done .bg{filter:grayscale(.6) brightness(.8)}
.bt2-chip{position:absolute;top:.8rem;left:.9rem;font-size:.68rem;font-weight:800;letter-spacing:.1em;padding:.25rem .65rem;border-radius:99px;background:rgba(4,20,38,.55);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px)}
.bt2.ready .bt2-chip{background:#f6d27a;color:#241a08;border-color:#f6d27a}
.bt2-body{flex:1;min-width:0;padding:1rem 0 1rem 1.2rem}
.bt2-k{font-size:.66rem;letter-spacing:.14em;opacity:.8;font-weight:700}
.bt2-t{font-size:1.3rem;font-weight:800;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.bt2-s{font-size:.82rem;opacity:.95;margin-top:.15rem;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.bt2-cta{flex:none;margin:0 1.1rem 1rem 1rem;border:none;border-radius:14px;padding:.7rem 1.2rem;font-family:inherit;font-weight:800;font-size:.9rem;cursor:pointer;white-space:nowrap;color:#241a08;background:linear-gradient(180deg,#ffe29a,#f2b84b);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.bt2.sail .bt2-cta,.bt2.done .bt2-cta{color:#fff;background:rgba(4,20,38,.55);border:1px solid rgba(255,255,255,.4);box-shadow:none}
.fs2{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:1rem;min-height:120px;padding:1rem 1.2rem;border-radius:22px;color:#fff;cursor:pointer;border:2px solid transparent;background:linear-gradient(135deg,#3a2406,#8a5a12 55%,#c78a1f);box-shadow:0 8px 22px rgba(80,50,8,.28)}
.fs2 .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.fs2::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(40,24,4,.78),rgba(40,24,4,.35))}
.fs2.has{border-color:#f6d27a;box-shadow:0 0 0 3px rgba(246,210,122,.25),0 8px 22px rgba(80,50,8,.3)}
.fs2-fish{display:flex;flex:none;align-items:center}.fs2-fish img{width:54px;height:54px;object-fit:contain;margin-left:-14px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}.fs2-fish img:first-child{margin-left:0}
.fs2-coin{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#ffe9a8,#e0a62b 70%);color:#5b3a05;font-weight:900;font-size:1.05rem;box-shadow:inset 0 -3px 6px rgba(0,0,0,.2),0 4px 10px rgba(0,0,0,.35)}
.fs2-body{flex:1;min-width:0}.fs2-k{font-size:.66rem;letter-spacing:.14em;opacity:.8;font-weight:700}.fs2-t{font-size:1.25rem;font-weight:800;line-height:1.2}.fs2-s{font-size:.82rem;opacity:.95;margin-top:.15rem}
.fs2-cta{flex:none;border:none;border-radius:14px;padding:.7rem 1.15rem;font-family:inherit;font-weight:800;font-size:.9rem;cursor:pointer;white-space:nowrap;color:#241a08;background:linear-gradient(180deg,#ffe29a,#f2b84b)}
.fs2:not(.has) .fs2-cta{color:#fff;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.4)}
@media (min-width:641px){.bt2{min-height:340px}.bt2 .bg{object-position:50% 68%}}
@media (max-width:640px){.fs2{flex-wrap:wrap}.fs2-cta{width:100%}.bt2-t{font-size:1.15rem}.bt2-cta{padding:.65rem 1rem}}
.bm-scene{position:relative;border-radius:14px;overflow:hidden;background:#0b2a4a;aspect-ratio:16/10;margin-bottom:.7rem}
.bm-scene video,.bm-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bm-scene .bm-sh{position:absolute;inset:auto 0 0 0;padding:1.4rem .9rem .7rem;background:linear-gradient(0deg,rgba(4,18,34,.85),transparent);color:#fff}
.bm-snd{position:absolute;top:.5rem;right:.5rem;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.bm-big{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.bm-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:.45rem}
.bm-bar i{display:block;height:100%;width:2%;background:linear-gradient(90deg,#5fe3c6,#f6d27a);border-radius:99px;transition:width .9s linear}
.bm-trips{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.5rem 0}
.bm-trip{border:1px solid var(--line);border-radius:12px;padding:.6rem .4rem;text-align:center;background:var(--paper-raised);color:var(--ink);cursor:pointer;font-family:inherit}
.bm-trip b{display:block;font-size:1.15rem}.bm-trip small{display:block;font-size:.7rem;color:var(--ink-muted);margin-top:.1rem;line-height:1.35}
.bm-trip:hover:not(:disabled){border-color:#13806f;box-shadow:0 0 0 2px rgba(19,128,111,.25)}
.bm-trip:disabled{opacity:.5;cursor:default}
.bm-fish{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.5rem;margin:.6rem 0}
.bm-f{position:relative;text-align:center;border:1px solid var(--line);border-radius:12px;padding:.5rem .3rem;font-size:.74rem;background:var(--paper-raised)}
.bm-f img{width:72px;height:72px;object-fit:contain}.bm-f em{position:absolute;top:.3rem;left:.3rem;font-style:normal;font-size:.62rem;font-weight:800;background:#f2b84b;color:#241a08;border-radius:6px;padding:.05rem .35rem}
.bm-net{position:relative;margin:.9rem auto .4rem;width:min(100%,360px);padding-top:22px}
.bm-rope{position:absolute;left:12%;right:12%;top:8px;height:18px;border-radius:12px;background:repeating-linear-gradient(115deg,#c9a45c 0 7px,#a8803a 7px 14px);box-shadow:0 3px 6px rgba(0,0,0,.35);z-index:3}
.bm-rope:before,.bm-rope:after{content:"";position:absolute;top:14px;width:3px;height:26px;background:#b8924a;border-radius:2px}.bm-rope:before{left:8px;transform:rotate(14deg)}.bm-rope:after{right:8px;transform:rotate(-14deg)}
.bm-bag{position:relative;z-index:2;min-height:150px;padding:34px 14px 26px;border-radius:22px 22px 46% 46%/22px 22px 34% 34%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M0 0L26 26M26 0L0 26' stroke='%23f3dca0' stroke-width='1.6' stroke-opacity='.75' fill='none'/%3E%3C/svg%3E"),radial-gradient(ellipse at 50% 30%,rgba(120,200,235,.5),rgba(20,70,110,.72));background-size:26px 26px,auto;border:2px solid rgba(243,220,160,.85);box-shadow:inset 0 -14px 24px rgba(0,30,60,.45),0 10px 22px rgba(0,30,60,.4);display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:2px 6px;transform-origin:50% 0;animation:bmNetIn 1.15s cubic-bezier(.22,.9,.3,1) both,bmNetSway 3.2s ease-in-out 1.2s infinite}
.bm-nf{position:relative;width:82px;height:62px;display:flex;align-items:center;justify-content:center;animation:bmFishIn .7s cubic-bezier(.2,.9,.3,1.3) var(--d) both}
.bm-nf img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,20,40,.5));transform-origin:68% 55%;animation:bmFishWig var(--t) ease-in-out var(--d) infinite}
.bm-nf .bm-kg{position:absolute;left:50%;bottom:-6px;z-index:2;transform:translateX(-50%);white-space:nowrap;font-size:.58rem;font-weight:800;font-variant-numeric:tabular-nums;background:rgba(6,30,40,.82);color:#f3dca0;border:1px solid rgba(243,220,160,.45);border-radius:6px;padding:.02rem .32rem}
.bm-bigrec{margin:.55rem auto .2rem;max-width:360px;text-align:center;padding:.55rem .8rem;border-radius:14px;border:1px solid color-mix(in srgb,#f2b84b 45%,transparent);background:color-mix(in srgb,#f2b84b 8%,transparent)}
.bm-bigrec small{display:block;font-size:.7rem;color:var(--ink-muted)}.bm-bigrec b{display:block;font-size:1.02rem;margin:.1rem 0}.bm-bigrec span{display:block;font-size:.72rem;color:var(--ink-muted)}
.bm-bigrec.new{border-color:#f2b84b;background:linear-gradient(135deg,color-mix(in srgb,#f2b84b 18%,transparent),color-mix(in srgb,#f2b84b 6%,transparent))}.bm-bigrec.new small{color:#d9961e;font-weight:700}
.bm-nf em{position:absolute;top:-4px;left:2px;z-index:2;font-style:normal;font-size:.58rem;font-weight:800;background:#f2b84b;color:#241a08;border-radius:6px;padding:.03rem .3rem}
.bm-nsp{position:absolute;left:0;right:0;bottom:-6px;height:0;z-index:4;pointer-events:none}
.bm-nsp i{position:absolute;left:var(--l);top:0;width:var(--w);height:calc(var(--w)*1.3);margin-left:calc(var(--w)/-2);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#fff,rgba(190,235,255,.95) 55%,rgba(120,200,240,.8));opacity:0;animation:bmDrip 1.15s ease-in var(--d) 3 both}
.bm-nsp b{position:absolute;left:var(--l);top:-90px;width:var(--w);height:calc(var(--w)*1.3);margin-left:calc(var(--w)/-2);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(190,235,255,.95) 55%,rgba(120,200,240,.8));opacity:0;animation:bmSplash 1.1s cubic-bezier(.2,.7,.3,1) var(--d) 1 both}
.bm-nimg{padding-top:0;width:min(100%,400px);aspect-ratio:1/1;transform-origin:50% 0;animation:bmNetIn 1.15s cubic-bezier(.22,.9,.3,1) both,bmNetSway 3.2s ease-in-out 1.2s infinite}
.bm-nimg .bm-rope{display:none}
.bm-nimg .bm-bag{position:absolute;left:21%;right:21%;top:32%;bottom:13%;min-height:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0;animation:none;z-index:2;gap:0 2px;align-content:flex-end}
.bm-nimg .bm-nf{width:80px;height:60px}
.bm-nimg .bm-nimgel{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,20,40,.4))}
.bm-nimg .bm-nsp{bottom:8%;z-index:5}
.bm-names{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin:.5rem 0}
.bm-names span{font-size:.72rem;padding:.12rem .5rem;border-radius:999px;border:1px solid var(--line);background:var(--paper-raised)}
@keyframes bmNetIn{0%{opacity:0;transform:translateY(110px) scale(.7) rotate(-6deg)}45%{opacity:1;transform:translateY(-16px) scale(1.05) rotate(4deg)}70%{transform:translateY(6px) scale(.99) rotate(-2.5deg)}100%{transform:none}}
@keyframes bmNetSway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes bmFishIn{0%{opacity:0;transform:translateY(34px) scale(.3) rotate(-30deg)}100%{opacity:1;transform:none}}
@keyframes bmFishWig{0%,100%{transform:rotate(-9deg) skewY(3deg) translateY(0)}25%{transform:rotate(0) translateY(-5px) scaleX(.95)}50%{transform:rotate(9deg) skewY(-3deg) translateY(1px)}75%{transform:rotate(0) translateY(-3px) scaleX(1.04)}}
@keyframes bmDrip{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(80px)}}
@keyframes bmSplash{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}60%{opacity:1;transform:translate(var(--x),var(--y)) scale(1)}100%{opacity:0;transform:translate(calc(var(--x)*1.2),calc(var(--y) + 110px)) scale(.6)}}
@media (prefers-reduced-motion:reduce){.bm-bag,.bm-nf,.bm-nf img,.bm-nsp i,.bm-nsp b{animation:none!important}.bm-nsp{display:none}}
.bm-scene{box-shadow:0 0 0 1px color-mix(in srgb,#d9a441 55%,transparent),0 8px 22px rgba(4,18,34,.35)}
.bmd{margin-top:.9rem;padding:.75rem .7rem .6rem;border-radius:16px;background:linear-gradient(160deg,#0d2238,#07131f);border:1px solid color-mix(in srgb,#d9a441 45%,transparent);color:#e9eef4}
.bmd-h{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem}.bmd-h span{font-weight:800;color:#f2c76a;font-variant-numeric:tabular-nums}
.bmd-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.12);margin:.4rem 0 .6rem;overflow:hidden}.bmd-bar i{display:block;height:100%;background:linear-gradient(90deg,#5fe3c6,#f2c76a);border-radius:99px}
.bmd-g{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.bmd-t{position:relative;aspect-ratio:1;padding:0;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(circle at 50% 35%,#16365a,#0a1a2b);display:grid;place-items:center;cursor:pointer;overflow:hidden;font-family:inherit}
.bmd-t img{width:82%;height:82%;object-fit:contain;filter:brightness(0) opacity(.35)}
.bmd-t small{position:absolute;left:4px;bottom:2px;font-size:.55rem;color:rgba(255,255,255,.4);font-weight:700}
.bmd-t.got{border-color:#d9a441;background:radial-gradient(circle at 50% 35%,#1f5a86,#0c2238);box-shadow:0 0 10px rgba(217,164,65,.25)}.bmd-t.got img{filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}.bmd-t.got small{color:#f2c76a}
.bmd-t:active{transform:scale(.95)}.bmd-n{margin:.55rem 0 0;text-align:center;font-size:.7rem;color:rgba(255,255,255,.5)}
.bmf{position:relative;width:min(92vw,330px);text-align:center;padding:1.1rem 1.1rem 1.2rem;border-radius:22px;background:linear-gradient(165deg,#10304f,#07131f);color:#fff;border:1px solid #d9a441;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.bmf .lbf-x{color:#fff;opacity:.7}.bmf-k{font-size:.66rem;letter-spacing:.14em;color:#f2c76a;font-weight:700}
.bmf-pic{margin:.6rem 0;min-height:210px;display:grid;place-items:center;border-radius:16px;background:radial-gradient(closest-side,rgba(120,200,255,.3),transparent)}
.bmf-pic img,.bmf-fish img{max-width:100%;max-height:230px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}.bmf-fish{display:grid;place-items:center;width:78%}.bmf-fish img{max-height:190px}.bmf-fish.lock img{filter:brightness(0) opacity(.4)}
.bmf-n{font-weight:800;font-size:1.2rem}.bmf-s{font-size:.8rem;color:rgba(255,255,255,.6);margin-top:.15rem}.bmf-s.ok{color:#5fe3c6}
.bm-deep{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.bm-deep span{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;background:var(--paper-raised)}
.bm-deep span img{width:34px;height:34px;object-fit:contain}.bm-deep span.lock img{filter:brightness(0) opacity(.35)}
.msn-vb{display:flex;justify-content:center;margin:.2rem 0 .7rem}
.msn-vb div{display:inline-flex;padding:3px;border-radius:999px;background:var(--paper-raised);border:1px solid var(--line)}
.msn-vb button{border:0;background:transparent;color:var(--ink-muted);font:inherit;font-weight:700;font-size:.82rem;padding:.4rem 1.1rem;border-radius:999px;cursor:pointer}
.msn-vb button.on{background:linear-gradient(135deg,#0e7490,#14b8a6);color:#fff;box-shadow:0 2px 8px rgba(14,116,144,.35)}
.scn{overflow-x:auto;overflow-y:hidden;border-radius:22px;margin-bottom:.9rem;box-shadow:0 8px 22px rgba(8,50,80,.28);border:2px solid rgba(255,255,255,.5);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scn::-webkit-scrollbar{display:none}
.scn-in{position:relative;width:max(100%,860px);aspect-ratio:16/9;background:linear-gradient(180deg,#8fd3f4 0%,#cdeefb 38%,#3aa6c8 39%,#0f6f9a 100%);overflow:hidden}
.scn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scn-vcv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s;pointer-events:none;z-index:0}.scn-vcv.on{opacity:1}
.scn-vid.scn-vsrc,.scn-vid.scn-vsrc.on{inset:auto;left:0;top:0;width:2px;height:2px;opacity:.01;transition:none;-webkit-transform:none}
.scn-sndrow{position:sticky;left:0;width:100%;height:0;z-index:8;pointer-events:none}.scn-snd{pointer-events:auto;position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(8,30,46,.55);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:0}.scn-snd.on{background:rgba(242,193,78,.85);color:#2a1704;border-color:#fff}
.scn-in{isolation:isolate}.scn-img{z-index:0}.scn-vid{z-index:0;-webkit-transform:translateZ(0);position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .8s;pointer-events:none}.scn-vid.on{opacity:1}
.scn-w{position:absolute;width:max(calc(1.05% * var(--s,1)),8px);aspect-ratio:10/22;transform:translate(-50%,-92%);pointer-events:none;z-index:1;filter:drop-shadow(0 1px 0 rgba(0,40,70,.25))}
.scn-w svg{display:block;width:100%;height:100%;overflow:visible}
.scn-w.mv{left:var(--x1);top:var(--y1);animation:scnWalk var(--t,20s) ease-in-out var(--d,0s) infinite}
.scn-w .bd{transform-origin:50% 100%;animation:scnBob .42s ease-in-out infinite}
.scn-w.id .bd{animation:scnIdle 3.4s ease-in-out infinite}
.scn-w .lg{transform-box:fill-box;transform-origin:50% 0}
.scn-w .l1{animation:scnL1 .42s ease-in-out infinite}.scn-w .l2{animation:scnL2 .42s ease-in-out infinite}
.scn-w.id .lg{animation:none}
.scn-w .rod{transform-box:fill-box;transform-origin:0 100%;animation:scnRod 2.6s ease-in-out infinite}
.scn-w .arm{transform-box:fill-box;transform-origin:50% 0;animation:scnArm 1.5s ease-in-out infinite}
.scn-in.pz .scn-w,.scn-in.pz .scn-w *{animation-play-state:paused}
@keyframes scnWalk{0%,6%{left:var(--x1);top:var(--y1)}47%,56%{left:var(--x2);top:var(--y2)}97%,100%{left:var(--x1);top:var(--y1)}}
@keyframes scnBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6px)}}
@keyframes scnIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-.4px)}}
@keyframes scnL1{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
@keyframes scnL2{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
@keyframes scnRod{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
@keyframes scnArm{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(28deg)}}
.scn-spot{position:absolute;z-index:3;-webkit-transform:translate3d(-50%,-50%,0);transform:translate(-50%,-50%);display:flex;align-items:flex-end;justify-content:center;border:0;background:none;padding:0 0 1.5%;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;border-radius:50%;outline:none}
.scn-spot::before{content:"";position:absolute;inset:-4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,243,190,.42),rgba(255,243,190,0));opacity:0;transition:opacity .25s;pointer-events:none}
.scn-spot:hover::before,.scn-spot:focus-visible::before{opacity:1}
.scn-spot.rdy::before{opacity:.75;animation:scnGlow 2.2s ease-in-out infinite}
.scn-spot:active{transform:translate(-50%,-50%) scale(.98);-webkit-transform:translate3d(-50%,-50%,0) scale(.98)}
.scn-spot .cap{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1.15;pointer-events:none;text-align:center}
.scn-spot .lb{font-weight:800;font-size:.76rem;color:#fff;letter-spacing:.01em;text-shadow:0 0 3px rgba(10,20,35,.95),0 1px 2px rgba(10,20,35,.95),0 0 8px rgba(10,20,35,.6);white-space:nowrap;transition:transform .2s}
.scn-spot:hover .lb{transform:translateY(-1px)}
.scn-spot .bd{font-weight:800;font-size:.68rem;color:#ffe08a;text-shadow:0 0 3px rgba(10,20,35,.95),0 1px 2px rgba(10,20,35,.95);white-space:nowrap}
/* [30 ต.ค. user "ตัวหนังสือที่อยู่ในฉากไม่ชัด" → "ไม่เอาพื้นหลังดำ เอาแบบเดิม แต่ให้คมขึ้น"] ขอบตัวอักษรเข้มแบบคม (เงา 8 ทิศ ไม่เบลอ) แทนเงาฟุ้ง · ไม่ใช้ translate3d (ตัวหนังสือในเลเยอร์ GPU ตำแหน่งเศษพิกเซล = เบลอ) */
.scn-spot{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.scn-spot .cap{-webkit-font-smoothing:antialiased}
.scn-spot .lb,.scn-spot .bd{text-shadow:1px 0 0 #0b1726,-1px 0 0 #0b1726,0 1px 0 #0b1726,0 -1px 0 #0b1726,1px 1px 0 #0b1726,-1px -1px 0 #0b1726,1px -1px 0 #0b1726,-1px 1px 0 #0b1726,0 2px 5px rgba(0,0,0,.45)}
.scn-spot .dt{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#ffd45a;box-shadow:0 0 6px 2px rgba(255,212,90,.85);vertical-align:1px;animation:scnGlow 1.4s ease-in-out infinite}
@keyframes scnGlow{0%,100%{opacity:.55}50%{opacity:1}}
.scn-spot.rdy::before{inset:-2%;background:radial-gradient(closest-side,rgba(255,230,130,.5),rgba(255,230,130,0));opacity:.9;animation:scnPulse 2s ease-in-out infinite}
.scn-spot.rdy .dt{display:none}
.scn-spot.rdy .bd{color:#ffe08a}
.scn-spot .sdot{position:absolute;left:50%;top:10%;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#ffd84d;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 7px 2px rgba(255,190,40,.7);pointer-events:none;-webkit-transform:translateZ(0)}
.scn-spot .bub{-webkit-transform:translateZ(0);position:absolute;left:50%;top:10%;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:#ffd84d;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 10px 3px rgba(255,190,40,.9);pointer-events:none;animation:scnPing 1.6s ease-out infinite;font-size:0;color:transparent}
@keyframes scnPulse{0%,100%{transform:scale(.94);opacity:.45}50%{transform:scale(1.04);opacity:.95}}
@keyframes scnPing{0%{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 0 rgba(255,200,50,.8)}70%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 14px rgba(255,200,50,0)}}
.scn-todo{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center;margin:0 0 .6rem}
.scn-todo .t{font-size:.76rem;font-weight:800;color:var(--ink-muted);margin-right:.15rem}
.scn-todo button{border:0;font:inherit;font-weight:800;font-size:.78rem;color:#5a3200;background:linear-gradient(180deg,#fff0a8,#ffbf3a);padding:.32rem .8rem;border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgba(255,170,30,.45)}
.scn-todo .none{font-size:.76rem;color:var(--ink-muted)}
.scn-hint{display:none;text-align:center;font-size:.72rem;color:var(--ink-muted);margin:-.4rem 0 .7rem}
@media (max-width:700px){.scn-in{width:700px}.scn-spot .lb{font-size:.66rem}.scn-spot .bd{font-size:.56rem}.scn-hint{display:block}}
@media (prefers-reduced-motion:reduce){.scn-spot.rdy::before,.scn-spot .dt,.scn-spot .bub{animation:none}.scn-vid,.scn-vcv{display:none}.scn-w,.scn-w *{animation:none!important}}
.lbm-tf{display:inline-flex;align-items:center;gap:.4rem;justify-content:flex-end}.lbm-fi{width:38px;height:30px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 2px rgba(0,40,70,.35))}.lbm-tt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}.lbm-tt small{font-size:.66rem;font-weight:600;color:var(--ink-muted)}
.lbm-var{cursor:pointer;border-radius:12px;padding:2px 4px;margin:-2px -4px;-webkit-tap-highlight-color:transparent}.lbm-var:hover,.lbm-var:focus-visible{background:color-mix(in srgb,#d9a441 18%,transparent)}.lbm-var-c{font-style:normal;opacity:.55;margin-left:.1rem}.lbv-card{width:min(94vw,400px);max-height:82vh;overflow:auto;text-align:left}.lbv-card .lbf-n{padding-right:1.6rem}.lbv-sum{font-size:.78rem;color:var(--ink-muted);margin:.1rem 0 .55rem}.lbv-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}.lbv-it{display:flex;align-items:center;gap:.4rem;padding:.3rem .4rem;border-radius:12px;background:color-mix(in srgb,var(--ink,#222) 5%,transparent);min-width:0}.lbv-it img,.lbv-np{width:36px;height:28px;object-fit:contain;flex:none}.lbv-t{font-size:.78rem;font-weight:600;line-height:1.2;min-width:0;overflow-wrap:anywhere}.lbv-t small{font-weight:500;opacity:.6}.lbv-t em{display:inline-block;font-style:normal;font-size:.62rem;font-weight:700;margin-left:.3rem;padding:0 .35rem;border-radius:8px;background:color-mix(in srgb,#3b8bd9 22%,transparent)}
.lbm-tf.tap{cursor:pointer;border-radius:12px;padding:2px 4px;margin:-2px -4px;-webkit-tap-highlight-color:transparent}.lbm-tf.tap:hover,.lbm-tf.tap:focus-visible{background:color-mix(in srgb,#d9a441 16%,transparent);outline:none}.lbm-tf.tap .lbm-fi{transition:transform .15s}.lbm-tf.tap:active .lbm-fi{transform:scale(1.15)}
.lbf-ov{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(5,14,24,.72);animation:lbfIn .18s ease-out}
.lbf-card{position:relative;width:min(92vw,340px);text-align:center;padding:1.1rem 1.1rem 1rem;border-radius:22px;background:var(--paper,#fff);color:var(--ink,#222);border:1px solid color-mix(in srgb,#d9a441 55%,var(--line,#ddd));box-shadow:0 18px 50px rgba(0,0,0,.45)}
.lbf-x{position:absolute;top:.5rem;right:.6rem;border:0;background:none;font-size:1.05rem;color:var(--ink-muted,#777);cursor:pointer;padding:.25rem .4rem}
.lbf-pic{height:200px;display:grid;place-items:center;border-radius:16px;background:radial-gradient(closest-side,rgba(120,200,255,.28),rgba(120,200,255,0));margin-bottom:.4rem}.lbf-pic img{max-width:100%;max-height:190px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,40,70,.35))}.lbf-nopic{font-size:4rem}
.lbf-n{font-weight:800;font-size:1.1rem}.lbf-w{font-family:'Kanit','Prompt',sans-serif;font-weight:700;font-size:2rem;line-height:1.15;color:#b7791f;margin:.1rem 0 .3rem}.lbf-w span{font-size:1rem;font-weight:600}.lbf-o{font-size:.8rem;color:var(--ink-muted,#666);line-height:1.5}.lbf-o small{font-size:.7rem}
@keyframes lbfIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
#missionsBody.msn-sc .fsh2,#missionsBody.msn-sc .bt2,#missionsBody.msn-sc .fs2,#missionsBody.msn-sc [data-msn="wheel"],#missionsBody.msn-sc [data-msn="loot"],#missionsBody.msn-sc [data-msn="loot_velyra"],#missionsBody.msn-sc [data-msn="maze"],#missionsBody.msn-sc [data-msn="dragon"]{display:none}
.bm-sell{display:flex;flex-direction:column;gap:.4rem;margin:.4rem 0}.bm-srow{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:12px;padding:.35rem .5rem;background:var(--paper-raised)}.bm-srow .th{width:40px;height:40px;flex:none;display:grid;place-items:center;overflow:hidden}.bm-srow .th img,.bm-srow .th svg{width:38px;height:38px;object-fit:contain}.bm-srow .nm{flex:1;min-width:0;font-size:.82rem;font-weight:700}.bm-srow .nm small{display:block;font-weight:500;color:var(--ink-muted);font-size:.7rem}.bm-srow .msn-btn.sm{padding:.35rem .6rem;font-size:.72rem;white-space:nowrap}
/* [5 พ.ย. กฎข้อ 137] สิทธิประโยชน์ & ส่วนลด (web-src/ml/c/16-perks.js) — สีกำหนดเอง ไม่ขึ้นกับธีม */
.pk-ov{z-index:905}
.pk-box{width:100%;max-width:760px;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#0f1c17;color:#eef3ef;box-shadow:0 30px 70px -25px rgba(0,0,0,.7);border:1px solid rgba(214,175,110,.22)}
.pk-h{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.1rem;background:radial-gradient(120% 160% at 0% 0%,#2b6b5a 0%,#123f35 45%,#071f1a 100%)}
.pk-h>div{flex:1;min-width:0}.pk-h h3{margin:0;font-size:1.15rem;font-weight:800;color:#fff}.pk-h small{display:block;margin-top:.15rem;font-size:.78rem;color:rgba(255,255,255,.78)}
.pk-x{flex:none;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.2);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer}
.pk-tabs{display:flex;gap:.4rem;padding:.7rem .9rem 0;border-bottom:1px solid rgba(214,175,110,.18);overflow-x:auto;scrollbar-width:none}
.pk-tabs::-webkit-scrollbar{display:none}
.pk-tabs button{flex:none;font:inherit;font-size:.86rem;font-weight:600;padding:.55rem .9rem;border:0;border-bottom:2px solid transparent;background:none;color:#a9bbb1;cursor:pointer}
.pk-tabs button.on{color:#f4d79b;border-bottom-color:#e6b567}
.pk-body{flex:1;overflow-y:auto;padding:1rem;-webkit-overflow-scrolling:touch}
.pk-load,.pk-empty{padding:1.2rem .4rem;text-align:center;color:#a9bbb1;font-size:.9rem}
.pk-empty{text-align:left;padding:.2rem 0 1rem;border-bottom:1px solid rgba(214,175,110,.14);margin-bottom:.8rem}
.pk-retry{margin-left:.4rem;font:inherit;font-size:.82rem;padding:.3rem .7rem;border-radius:8px;border:1px solid #e6b567;background:none;color:#f4d79b;cursor:pointer}
.pk-sum{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding:1rem 1.1rem;border-radius:16px;background:linear-gradient(135deg,#1d3a2f,#13241d);border:1px solid rgba(214,175,110,.3)}
.pk-sum small{display:block;font-size:.78rem;color:#a9bbb1}.pk-sum b{display:block;font-size:2.2rem;line-height:1.1;font-weight:800;color:#f4d79b}
.pk-sum-r{text-align:right}.pk-sum-r s{display:block;font-size:1.2rem;color:#a9bbb1}
.pk-list{display:flex;flex-direction:column;gap:.45rem;margin-top:.8rem}
.pk-row{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.pk-row .tx{flex:1;min-width:0}.pk-row b{display:block;font-size:.9rem;font-weight:600;color:#c9d4cd}.pk-row small{display:block;font-size:.74rem;color:#8fa298;margin-top:.1rem}
.pk-row .v{flex:none;font-size:.92rem;font-weight:700;color:#7d8f86;white-space:nowrap}
.pk-row.on{background:rgba(230,181,103,.08);border-color:rgba(230,181,103,.35)}.pk-row.on b{color:#eef3ef}.pk-row.on .v{color:#f4d79b}
.pk-notes{margin:.8rem 0 0;padding-left:1.1rem;font-size:.78rem;color:#a9bbb1;line-height:1.55}
.pk-link{margin-top:.9rem;font:inherit;font-size:.86rem;font-weight:600;background:none;border:0;padding:0;color:#7fd1b2;cursor:pointer}
.pk-lead{margin:0 0 .4rem;font-size:.86rem;color:#a9bbb1;line-height:1.55}
.pk-sec{display:flex;align-items:center;gap:.7rem;margin:1rem 0 .55rem;font-size:.82rem;font-weight:700;color:#7fd1b2}
.pk-sec:after{content:"";flex:1;height:1px;background:rgba(214,175,110,.16)}
.pk-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.pk-card{padding:.8rem .9rem;border-radius:14px;background:#13221b;border:1px solid #24382e}
.pk-card.w{grid-column:1/-1}
.pk-card .t{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}.pk-card .t b{font-size:.95rem;font-weight:700}.pk-card .t span{font-size:.92rem;font-weight:700;color:#f4d79b;white-space:nowrap}
.pk-card p{margin:.3rem 0 0;font-size:.78rem;color:#a9bbb1;line-height:1.5}
.pk-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.pk-chips span{font-size:.76rem;padding:.25rem .5rem;border-radius:8px;background:#0d1914;border:1px solid #24382e;white-space:nowrap}
.pk-chips i{font-style:normal;font-weight:700;color:#f4d79b;margin-left:.3rem}
.pk-foot{margin:.9rem 0 0;font-size:.76rem;color:#8fa298}
@media (max-width:640px){.pk-grid{grid-template-columns:1fr}.pk-box{max-height:94vh;max-height:94dvh;border-radius:20px 20px 0 0}.pk-sum b{font-size:1.9rem}}
/* [5 พ.ย.] การ์ดทำลายสถิติรอบก่อน */
.rb-ov{display:flex;align-items:center;justify-content:center;padding:16px;z-index:9400}
.rb-box{width:min(360px,100%);display:flex;flex-direction:column;gap:12px}
.rb-card{border-radius:22px;padding:26px 22px 20px;text-align:center;color:#fff;background:radial-gradient(120% 90% at 50% 0%,#2f7a63 0%,#123c37 55%,#0b2325 100%);box-shadow:0 18px 50px rgba(0,0,0,.45);position:relative;overflow:hidden}
.rb-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 18%,rgba(255,226,140,.28),transparent 55%);pointer-events:none}
.rb-top{font-size:14px;letter-spacing:.06em;color:#ffe08a;font-weight:700;position:relative}
.rb-big{font-size:48px;font-weight:800;margin:10px 0 6px;color:#fff;position:relative;text-shadow:0 2px 18px rgba(255,220,120,.4)}
.rb-sub{font-size:14px;color:#d8efe6;position:relative}.rb-sub b{color:#ffe08a}
.rb-prev{font-size:12px;color:#9fc7ba;margin-top:8px;position:relative}
.rb-brand{margin-top:16px;font-size:11px;letter-spacing:.3em;color:#7fb3a3;position:relative}
.rb-gift{background:rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;font-size:13px;color:#fff;text-align:center}.rb-gift b{color:#ffe08a}
.rb-msg{font-size:12px;color:#d8efe6;text-align:center}
.rb-act{display:flex;gap:8px}.rb-act button{flex:1;border:0;border-radius:12px;padding:12px;font-size:14px;font-weight:700;cursor:pointer}
.rb-share{background:#ffe08a;color:#3b2c00}.rb-close{background:rgba(255,255,255,.14);color:#fff}
/* [5 พ.ย.] สรุปของฉัน (รายงานสัปดาห์) */
.wk-ov{display:flex;align-items:center;justify-content:center;padding:14px;z-index:9300}
.wk-box{width:min(420px,100%);max-height:90vh;overflow:auto;background:#12302f;color:#e8f4ef;border-radius:20px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.wk-h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.wk-h h3{margin:0;font-size:18px}.wk-h small{color:#8fb5a8;font-size:12px}
.wk-hero{text-align:center;padding:8px 0}.wk-hero small{color:#8fb5a8;font-size:12px}
.wk-big{font-size:38px;font-weight:800;color:#6fe3a5;margin:4px 0}.wk-big.neg{color:#ff9a8a}
.wk-vs{font-size:13px;color:#b9d6cb}.wk-vs .up{color:#6fe3a5}.wk-vs .neg{color:#ff9a8a}
.wk-msg{background:#0f2827;border-radius:12px;padding:10px 12px;font-size:13px;margin:10px 0;text-align:center;color:#d8efe6}
.wk-bars{display:flex;gap:6px;height:92px;align-items:flex-end;margin:12px 0}
.wk-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}.wk-col b{font-size:11px;color:#8fb5a8;font-weight:600}.wk-col.now b{color:#ffe08a}
.wk-bw{flex:1;width:100%;display:flex;align-items:flex-end;background:#0f2827;border-radius:6px;overflow:hidden}.wk-bw i{display:block;width:100%;background:linear-gradient(180deg,#ffe08a,#3aa37f);border-radius:6px 6px 0 0}.wk-bw i.neg{background:#c9695d}
.wk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wk-t{background:#0f2827;border-radius:12px;padding:10px}.wk-t small{display:block;color:#8fb5a8;font-size:11px}.wk-t b{font-size:17px}.wk-t em{font-style:normal;font-size:11px;color:#8fb5a8;font-weight:400}
.wk-pct{display:flex;gap:8px;margin-top:10px}.wk-pct>div{flex:1;background:#0f2827;border-radius:12px;padding:10px}.wk-pct small{display:block;color:#8fb5a8;font-size:11px}.wk-pct b{font-size:20px;color:#ffe08a}.wk-pct b.neg{color:#ff9a8a}
.wk-note{font-size:11px;color:#7fa497;margin-top:8px;text-align:center}

/* [5 พ.ย. กฎ 144 user "ปุ่มพวกนี้จำเป็นต้องขึ้นทุกหน้าไหม" → แบบเกม] ปุ่มลอย ร้านค้า/กระเป๋า/กิจกรรม ขึ้นเฉพาะหน้าแดชบอร์ดหลัก
   · จอคอม (มีเมนูซ้าย) = ไม่มีปุ่มลอย ใช้เมนูซ้ายแทน (#sbBag #sbShop #sbMissions มีเลข/จุดแดงครบ)
   · มีหน้าต่าง/ป๊อปอัปเปิดอยู่ (body.ov-open กฎ 100 · SweetAlert) = ซ่อน · ยกเว้นระหว่างทัวร์ (#tourRoot ชี้ปุ่มเหล่านี้) */
@media (min-width:768px){body:has(#dashboardView:not([hidden]) .dash-sidebar) :is(#pkgFloatBtn,#bagFab,#msnFab){display:none!important}}
body.ov-open:not(:has(#tourRoot)) :is(#pkgFloatBtn,#bagFab,#msnFab),body.swal2-shown:not(:has(#tourRoot)) :is(#pkgFloatBtn,#bagFab,#msnFab){display:none!important}

/* [5 พ.ย. กฎ 146] ป้าย "ฟรี" ข้างเมนูฝากทีมงานรันบอท (เมนูซ้ายคอม + เมนูมือถือ) · ไม่มีแอนิเมชัน */
.sb-free{margin-left:auto;font-size:.62rem;font-weight:700;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,#d9a441 20%,transparent);color:#b07a2a;line-height:1.5}
#navHostM .sb-free{margin-left:.3rem}
/* [5 พ.ย. กฎ 147] ช่องวงล้อ "หมุนฟรีอีกรอบ" (เดิม "ลองใหม่") — 2 บรรทัด สีทอง */
.whl-none{display:block;text-align:center;line-height:1.05;font-size:.78rem;color:#fde68a}

/* [5 พ.ย. กฎ 151] สรุปของฉัน · เทียบกับคนทุนใกล้เคียงกัน */
.wk-grp{margin-top:14px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.03)}
.wk-g-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;margin-bottom:8px}.wk-g-h small{color:#9fb1a8;font-size:.72rem}
.wk-g-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wk-g-c{padding:10px;border-radius:12px;background:rgba(0,0,0,.18);min-width:0}
.wk-g-t{font-size:.68rem;color:#9fb1a8;margin-bottom:4px}
.wk-g-m{font-size:1.05rem;font-weight:800;line-height:1.2}.wk-g-m.up{color:#f3cf95}
.wk-g-c small{display:block;font-size:.68rem;color:#9fb1a8;margin:2px 0 6px;line-height:1.35}
.wk-g-r{display:flex;justify-content:space-between;gap:6px;font-size:.74rem;padding:2px 0;border-top:1px dashed rgba(255,255,255,.08)}.wk-g-r span{color:#9fb1a8}.wk-g-r b.neg{color:#f87171}
@media (max-width:380px){.wk-g-cols{grid-template-columns:1fr}}
/* [5 พ.ย. กฎ 155] สมุดสะสม (19-album.js) — คอม: รูปสมุดเปิด หน้าซ้าย/ขวา · มือถือ: แผงเดียว · ไม่มีแอนิเมชันวน */
.alb-ov{padding:12px}
.alb-book{position:relative;width:min(1180px,96vw);aspect-ratio:1672/941;max-height:94vh;background:url(/assets/album/book.webp) center/100% 100% no-repeat;color:#e8f4f1}
.alb-pg{position:absolute;top:8.5%;bottom:13%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(34,211,238,.35) transparent}
.alb-l{left:8.5%;width:37.5%;padding:0 .4rem 0 0}.alb-r{left:54%;width:38%;padding:0 .3rem 0 0}
.alb-x{position:absolute;top:1.2%;right:.6%;z-index:3;width:36px;height:36px;border-radius:10px;border:1px solid rgba(34,211,238,.45);background:rgba(4,14,14,.85);color:#e8f4f1;font-size:1.3rem;line-height:1;cursor:pointer}
.alb-load{padding:2rem 1rem;text-align:center;color:#9fc7c2;font-size:.85rem}
.alb-h h3{font-size:1.35rem;font-weight:800;letter-spacing:.02em;color:#f3cf95;margin:0}.alb-h small{display:block;color:#9fc7c2;font-size:.75rem;margin-top:2px}
.alb-tot{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;margin:12px 0;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(34,211,238,.22)}
.alb-tot b{grid-row:span 2;font-size:1.7rem;font-weight:800;color:#67e8f9}.alb-tot b small{font-size:.9rem;color:#9fc7c2}.alb-tot span{font-size:.75rem;color:#9fc7c2}
.alb-bar{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}.alb-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#f3cf95)}
.alb-cats{display:flex;flex-direction:column;gap:6px}
.alb-cat{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;text-align:left;padding:8px 12px;border-radius:12px;border:1px solid rgba(34,211,238,.18);background:rgba(0,0,0,.22);color:inherit;font:inherit;cursor:pointer}
.alb-cat .alb-bar{grid-column:1/-1}.alb-cat .n{font-weight:700;font-size:.88rem}.alb-cat .c{font-size:.78rem;color:#9fc7c2;font-variant-numeric:tabular-nums}
.alb-cat.on{border-color:rgba(34,211,238,.75);background:rgba(34,211,238,.1)}.alb-cat.full .c{color:#f3cf95}
.alb-st-s{position:absolute;right:-6px;top:-10px;width:34px;height:34px;pointer-events:none}
.alb-dot{margin-left:6px;font-style:normal;font-size:.62rem;font-weight:800;padding:1px 7px;border-radius:99px;background:#f3cf95;color:#1b1406;vertical-align:1px}
.alb-all{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:9px 12px;border-radius:12px;border:1px dashed rgba(243,207,149,.4);font-size:.78rem}.alb-all.done{border-style:solid;background:rgba(243,207,149,.08)}
.alb-all em,.alb-step em{font-style:normal;color:#9fc7c2;font-size:.72rem;white-space:nowrap}
.alb-claim{flex:none;border:0;border-radius:10px;padding:5px 12px;font:inherit;font-size:.74rem;font-weight:800;background:linear-gradient(135deg,#f3cf95,#d9962e);color:#1b1406;cursor:pointer}.alb-claim:disabled{opacity:.5}
.alb-rh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px}.alb-rh h4{margin:0;font-size:1.15rem;font-weight:800}.alb-rh small{color:#9fc7c2;font-size:.75rem}
.alb-st{width:64px;height:64px;flex:none}
.alb-tabs{display:none}
.alb-steps{display:flex;flex-direction:column;gap:5px;margin:6px 0 10px}
.alb-step{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.22);font-size:.76rem}.alb-step small{color:#9fc7c2}.alb-step.done{background:rgba(34,211,238,.08)}
.alb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.alb-it{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 7px;border-radius:12px;border:1px solid rgba(34,211,238,.2);background:rgba(0,0,0,.25);min-width:0}
.alb-it span{font-size:.66rem;line-height:1.2;text-align:center;color:#d7ece8;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alb-art{width:64px;height:64px;display:flex;align-items:center;justify-content:center;overflow:hidden}.alb-art>img{max-width:100%;max-height:100%;object-fit:contain}.alb-art .ic{transform:scale(.8)}.alb-art svg{max-width:100%;max-height:100%}
.alb-it.lock{border-style:dashed;opacity:.8}.alb-it.lock .alb-art>img,.alb-it.lock .alb-art .ic{filter:brightness(0) saturate(0);opacity:.45}.alb-it.lock span{color:#7d9893}
.alb-it em{position:absolute;top:3px;right:3px;font-style:normal;font-size:.55rem;font-weight:800;padding:0 5px;border-radius:99px;background:#a855f7;color:#fff}
.alb-ini{font-size:1.4rem;color:#67e8f9}
.alb-note{margin-top:8px;font-size:.66rem;color:#7d9893}
@media (max-width:820px){
  .alb-ov{padding:0;align-items:stretch}
  .alb-book{width:100%;height:100%;max-height:none;aspect-ratio:auto;background:#0c1d1b;border-top:2px solid rgba(34,211,238,.5);overflow-y:auto;padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px))}
  .alb-pg{position:static;width:auto;overflow:visible;padding:0}
  .alb-l .alb-cats{display:none}
  .alb-x{position:fixed;top:10px;right:10px}
  .alb-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:6px 0 2px;padding-bottom:2px}.alb-tabs::-webkit-scrollbar{display:none}
  .alb-tabs button{flex:none;border:1px solid rgba(34,211,238,.25);background:rgba(0,0,0,.25);color:inherit;border-radius:99px;padding:6px 12px;font:inherit;font-size:.78rem;font-weight:700}
  .alb-tabs button.on{border-color:#22d3ee;background:rgba(34,211,238,.14)}.alb-tabs small{color:#9fc7c2;font-weight:600}
  .alb-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
  .alb-r{margin-top:6px}
}
.alb-cat.full .c{padding-right:28px}
/* [5 พ.ย. กฎ 155 รอบ 2 user "ตัดขอบให้เนียนๆ สวยๆ"] รูปสมุดตัดพื้นดำออกแล้ว (พื้นใส) · เนื้อหาในหน้าค่อยๆ จางที่ขอบบน/ล่างตอนเลื่อน ไม่ขาดเป็นเส้น · ซ่อนแถบเลื่อน */
@media (min-width:821px){
  .alb-pg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 26px),transparent 100%);padding-top:6px;padding-bottom:22px;scrollbar-width:none}
  .alb-pg::-webkit-scrollbar{display:none}
  .alb-ov{background:rgba(3,10,10,.82)}
}
/* [5 พ.ย. กฎ 155 รอบ 3] สมุดสะสม: แตะการ์ด = ป๊อปอัปรูปใหญ่ (เด้งขึ้นครั้งเดียว ไม่วน) */
.alb-it{cursor:pointer;transition:transform .12s ease,border-color .12s ease}.alb-it:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.6)}
.alb-pop{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,8,8,.62);border-radius:18px}
.alb-pc{position:relative;width:min(340px,92%);padding:22px 18px 16px;border-radius:18px;text-align:center;background:linear-gradient(180deg,#123a3a,#0a1c1b);border:1px solid rgba(34,211,238,.55);box-shadow:0 0 0 1px rgba(243,207,149,.25) inset,0 18px 40px -12px rgba(0,0,0,.7);animation:albPop .28s cubic-bezier(.2,1.4,.4,1) both}
.alb-pc.gold{border-color:rgba(243,207,149,.8)}
@keyframes albPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.alb-pc{animation:none}}
.alb-pa{width:200px;height:170px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}.alb-pa>img,.alb-pa svg,.alb-pa .aq-ph,.alb-pa .aq-ph img{max-width:100%;max-height:100%;object-fit:contain}.alb-pa .aq-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.alb-pa .ic{transform:scale(1.6)}
.alb-pc.lock .alb-pa>img,.alb-pc.lock .alb-pa .ic{filter:brightness(0) saturate(0);opacity:.45}
.alb-pc h5{margin:0 0 6px;font-size:1.15rem;font-weight:800;color:#f3cf95}
.alb-pt{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-bottom:8px}.alb-pt span{font-size:.68rem;font-weight:700;padding:2px 9px;border-radius:99px;background:rgba(255,255,255,.08);color:#cfe7e3}.alb-pt span.ok{background:rgba(34,211,238,.18);color:#67e8f9}.alb-pt span.ret{background:#a855f7;color:#fff}
.alb-pc p{margin:0;font-size:.76rem;color:#9fc7c2}
.alb-px{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:9px;border:1px solid rgba(34,211,238,.4);background:rgba(0,0,0,.3);color:#e8f4f1;font-size:1.1rem;line-height:1;cursor:pointer}
@media (max-width:820px){.alb-pop{position:fixed;border-radius:0}}
@media (min-width:821px){.alb-pop{background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(2,8,8,.72) 35%,rgba(2,8,8,0) 100%);border-radius:0}}
/* [5 พ.ย. กฎ 155 รอบ 4] สมุดสะสมบนมือถือ = สมุดหน้าเดียว (ครึ่งซ้ายของ book.webp) พลิกทีละหน้า · ทับสไตล์มือถือรอบก่อน */
@media (max-width:820px){
  .alb-book{background:radial-gradient(ellipse at 50% 40%,#0d2826,#040c0c 75%);padding:12px 10px calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column}
  .alb-r{display:none}
  .alb-l{flex:1;display:flex;flex-direction:column;min-height:0}
  .albm-top{padding-right:46px}.albm-top h3{margin:0;font-size:1.2rem;font-weight:800;color:#f3cf95}.albm-top small{font-size:.72rem;color:#9fc7c2}.albm-top .alb-claim{padding:3px 9px;font-size:.68rem}
  .alb-tabs button{position:relative}.albm-dot{position:absolute;top:2px;right:4px;width:8px;height:8px;border-radius:50%;background:#f3cf95}
  .albm-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;perspective:1400px;margin:8px 0 6px;touch-action:pan-y}
  .albm-page{position:relative;height:min(100%,calc((100vw - 20px) / .888));aspect-ratio:836/941;max-width:100%;background:url(/assets/album/book.webp) 0 0/200% 100% no-repeat;transform-origin:0 50%}
  .albm-page.tn{animation:albTn .38s cubic-bezier(.3,.7,.3,1) both}.albm-page.tp{animation:albTp .38s cubic-bezier(.3,.7,.3,1) both}
  @keyframes albTn{from{transform:rotateY(-78deg);opacity:.25}to{transform:none;opacity:1}}
  @keyframes albTp{from{transform:rotateY(55deg) translateX(8%);opacity:.25}to{transform:none;opacity:1}}
  .albm-in{position:absolute;left:17%;right:9%;top:9%;bottom:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
  .albm-foot{position:absolute;left:0;right:0;bottom:6.5%;text-align:center;font-size:.68rem;letter-spacing:.08em;color:#67e8f9;opacity:.85}
  .albm-cover{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}.albm-cover>small{font-size:.66rem;letter-spacing:.2em;color:#9fc7c2}
  .albm-cover h4{margin:0;font-size:1.45rem;font-weight:800;color:#f3cf95}.albm-big{font-size:2.6rem;font-weight:800;color:#67e8f9;line-height:1.05}.albm-big small{font-size:1rem;color:#9fc7c2}
  .albm-cover .alb-bar{width:80%}.albm-pct{font-size:.72rem;color:#9fc7c2;margin-bottom:6px}.albm-cover .alb-steps{width:100%;text-align:left}
  .albm-st{width:58px;height:58px;position:absolute;top:-6px;right:0}
  .albm-hint{margin-top:6px;font-size:.66rem;color:#7d9893}
  .albm-item{width:100%;display:flex;flex-direction:column;align-items:center;position:relative}
  .albm-no{font-size:.66rem;letter-spacing:.16em;color:#9fc7c2;margin-bottom:4px}
  .albm-art{width:88%;height:auto;aspect-ratio:1.2;max-height:42vh}
  .albm-item h5{margin:6px 0;font-size:1.2rem;font-weight:800;color:#f3cf95}.albm-item p{margin:6px 0 0;font-size:.74rem;color:#9fc7c2}
  .albm-item.lock .alb-pa>img,.albm-item.lock .alb-pa .ic{filter:brightness(0) saturate(0);opacity:.45}
  .albm-item.gold h5{text-shadow:0 0 10px rgba(243,207,149,.5)}
  .albm-st2{position:absolute;right:-4px;top:-4px;width:46px;height:46px;opacity:.95}
  .albm-nav{display:flex;align-items:center;gap:10px;padding:0 4px}.albm-nav button{flex:none;width:42px;height:42px;border-radius:12px;border:1px solid rgba(34,211,238,.4);background:rgba(0,0,0,.35);color:#e8f4f1;font-size:1.5rem;line-height:1}.albm-nav button:disabled{opacity:.3}
  .albm-nav input{flex:1;accent-color:#22d3ee}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.albm-page.tn,.albm-page.tp{animation:none}}
/* [5 พ.ย. กฎ 155 รอบ 4b] หน้าเดียวบนมือถือ: เอาสันสมุดมาด้วย (ไม่ดูขาด) · จอเตี้ย (iPhone SE) ย่อรูปไม่ให้ข้อความชนขอบ */
@media (max-width:820px){
  .albm-page{height:min(100%,calc((100vw - 20px) / .94));aspect-ratio:886/941;background-size:188.7% 100%}
  .albm-in{left:16%;right:13.5%}
  .albm-art{max-height:36vh}
}
@media (max-width:820px) and (max-height:700px){.albm-art{max-height:28vh}.albm-item h5{font-size:1.05rem;margin:3px 0}.albm-cover .albm-big{font-size:2.1rem}.alb-step{padding:5px 8px;font-size:.7rem}}
@media (max-width:820px) and (max-height:700px){.albm-art{max-height:22vh}.albm-in{bottom:16%}.albm-hint{display:none}.albm-cover .alb-bar{margin:2px 0}}
/* [5 พ.ย. กฎ 155 รอบ 5] พลิกหน้าแบบหนังสือจริงบนมือถือ — หน้า = ครึ่งขวาของสมุด (สันซ้าย) · หลังแผ่น = ครึ่งซ้าย · แทนแอนิเมชันรอบ 4 */
@media (max-width:820px){
  .albm-stage{perspective:1600px;perspective-origin:30% 50%;overflow:visible}
  .albm-sheet{position:relative;height:min(100%,calc((100vw - 20px) / .94));aspect-ratio:886/941;max-width:100%;transform-style:preserve-3d}
  .albm-sheet>.albm-page{position:absolute;inset:0;height:auto;aspect-ratio:auto;background:url(/assets/album/book.webp) 100% 0/188.7% 100% no-repeat;animation:none!important}
  .albm-page .albm-in{left:13.5%;right:16%}
  .albm-leaf{position:absolute;inset:0;transform-origin:3.5% 50%;transform-style:preserve-3d;will-change:transform}
  .albm-leaf>.albm-page,.albm-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .albm-leaf>.albm-page{background:url(/assets/album/book.webp) 100% 0/188.7% 100% no-repeat}
  .albm-back{transform:rotateY(180deg);background:url(/assets/album/book.webp) 0 0/188.7% 100% no-repeat}
  .albm-back::after{content:'';position:absolute;inset:6% 8%;border-radius:12px;background:rgba(3,12,12,.35)}
  .albm-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.35) 45%,rgba(0,0,0,.1));opacity:0;border-radius:14px}
  .albm-gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0) 30%,rgba(190,250,255,.35) 70%,rgba(255,255,255,0));opacity:0;mix-blend-mode:screen}
}
/* รอบ 5b: เว้นที่ด้านซ้ายของสัน ให้เห็นแผ่นที่พลิกข้ามไปฝั่งซ้าย (ด้านหลังแผ่น) เหมือนหนังสือจริง */
@media (max-width:820px){
  .albm-stage{justify-content:flex-end;padding-right:2px}
  .albm-sheet{height:min(100%,calc((100vw - 20px) * .86 / .94))}
}
/* [5 พ.ย. กฎ 155 รอบ 6] พลิกขึ้น-ลง (เย็บด้านบน) · ทั้งสมุดรับนิ้ว ไม่ให้หน้าเว็บเลื่อน · ทับรอบ 5 */
@media (max-width:820px){
  .albm-stage{touch-action:none;justify-content:center;padding-right:0;perspective:1500px;perspective-origin:50% 0}
  .albm-sheet{height:min(100%,calc((100vw - 24px) / .94))}
  .albm-leaf{transform-origin:50% 2.5%}
  .albm-back{transform:rotateX(180deg);background-position:100% 0;background-size:188.7% 100%}
  .albm-back::after{background:rgba(3,12,12,.45)}
  .albm-shade{background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.3) 50%,rgba(0,0,0,.1))}
  .albm-gloss{background:linear-gradient(180deg,rgba(255,255,255,0) 30%,rgba(190,250,255,.35) 70%,rgba(255,255,255,0))}
  .albm-nav button{display:flex;align-items:center;justify-content:center}
}
/* [5 พ.ย. กฎ 155 รอบ 7] รูปหน้าใหม่ page.webp (หน้าเดียวแนวตั้ง แกนเย็บด้านบน · user เจน) · แกนเย็บนิ่ง (.albm-bar) แผ่นพลิกรอบแกน · ทับรอบ 5-6 */
@media (max-width:820px){
  .albm-stage{perspective:1100px;perspective-origin:50% 6%}
  .albm-sheet{aspect-ratio:1086/1448;height:min(100%,calc((100vw - 24px) / .75))}
  .albm-sheet>.albm-page,.albm-leaf>.albm-page{background:url(/assets/album/page.webp) 0 0/100% 100% no-repeat}
  .albm-leaf{transform-origin:50% 5.9%}
  .albm-leaf>.albm-page{clip-path:inset(7.2% 0 0 0)}
  .albm-back{transform:rotateX(180deg);background:url(/assets/album/page.webp) 0 0/100% 100% no-repeat;clip-path:inset(7.2% 0 0 0)}
  .albm-back::after{inset:8% 4% 2%;border-radius:14px;background:linear-gradient(180deg,rgba(3,12,12,.35),rgba(3,12,12,.7))}
  .albm-bar{position:absolute;left:0;right:0;top:0;height:10.6%;background:url(/assets/album/page.webp) 0 0/100% auto no-repeat;pointer-events:none;z-index:3;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
  .albm-page .albm-in{left:10%;right:10%;top:13%;bottom:9%}
  .albm-foot{bottom:4.2%}
  .albm-shade{background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 40%,rgba(0,0,0,.05));border-radius:16px}
  .albm-gloss{background:linear-gradient(180deg,rgba(190,250,255,0) 10%,rgba(190,250,255,.28) 55%,rgba(255,255,255,0) 90%)}
  .albm-leaf{filter:none}
}
@media (max-width:820px){.albm-stage{perspective:2600px;perspective-origin:50% 6%}.albm-under{transform:translateZ(-2px)}}
/* [6 พ.ย. user "ลูกค้าฝากรันถึงกำหนดแล้วยังไม่เติม ให้รับทราบหลายทาง"] แถบฝากรันใกล้หมด/หมดแล้ว + ป๊อปอัพวันละครั้ง (hstDueRender) */
.hdue{display:flex;align-items:center;gap:.75rem;margin:.7rem 0 .3rem;padding:.8rem .9rem;border-radius:16px;background:linear-gradient(135deg,#fff6e3,#fdebc8);border:1px solid #f0cf8a;color:#5a3d06}
.hdue.end{background:linear-gradient(135deg,#fff0ee,#ffe0db);border-color:#f2b3a8;color:#7a1f12}
.hdue[hidden]{display:none}
.hdue-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.hdue-tx b{font-size:.95rem;line-height:1.3}
.hdue-tx span{font-size:.8rem;line-height:1.45;opacity:.85}
.hdue-bt{display:flex;flex-direction:column;gap:.35rem;flex-shrink:0}
.hdue-go{border:0;border-radius:11px;padding:.55rem .95rem;font-weight:700;font-size:.85rem;color:#fff;background:#1f4d3a;cursor:pointer;white-space:nowrap}
.hdue.end .hdue-go,.hdue-card.end .hdue-go{background:#b3261e}
.hdue-more{border:1px solid currentColor;border-radius:11px;padding:.4rem .8rem;font-size:.75rem;background:transparent;color:inherit;cursor:pointer;opacity:.8}
.hdue-card{text-align:center;max-width:380px}
.hdue-card h3{margin:.55rem 0 .4rem;font-size:1.15rem}
.hdue-card p{margin:0 0 1rem;font-size:.9rem;line-height:1.55;opacity:.85}
.hdue-badge{display:inline-block;padding:.2rem .7rem;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.04em;background:#fdebc8;color:#7a5200}
.hdue-card.end .hdue-badge{background:#ffe0db;color:#8a1c10}
.hdue-go.big{display:block;width:100%;padding:.8rem 1rem;font-size:1rem}
.hdue-later{display:block;width:100%;margin-top:.45rem;padding:.55rem;border:0;background:transparent;color:inherit;opacity:.65;font-size:.85rem;cursor:pointer}
@media (max-width:480px){.hdue{flex-direction:column;align-items:stretch}.hdue-bt{flex-direction:row}.hdue-go,.hdue-more{flex:1}}
/* [6 พ.ย.] การ์ดโปรเติมสะสม: บรรทัดของแถม (tgCardLoad) — ขึ้นครบ ตัดบรรทัดได้ */
.ev-row .tg-card .tg-extra{color:#fde68a;font-weight:700;white-space:normal;overflow-wrap:anywhere;display:block;max-width:100%}
/* [6 พ.ย. user "ทำการ์ดโฆษณาบอกลูกค้า ราคาโทเคนดึงที่ผมตั้งไว้"] การ์ดตัวละครใหม่ (#ncCard · คาเซะ ลมฟ้าขาว) — ภาพนิ่ง ไม่มีแอนิเมชันวน (กันเครื่องร้อน) */
.ev-row .nc-card{padding-right:38%;text-align:left;cursor:pointer;font:inherit;color:#ecfeff;border-color:rgba(103,232,249,.5);background:radial-gradient(70% 90% at 85% 70%,rgba(34,211,238,.32),transparent 70%),linear-gradient(135deg,#06141f,#0e2a3a 55%,#05101a)}
.ev-row .nc-card .ev-art{width:40%;max-width:150px;right:4px;bottom:-4px;filter:drop-shadow(0 0 14px rgba(103,232,249,.55))}
.ev-row .nc-card .ev-k{color:#a5f3fc}
.ev-row .nc-card .nc-new{display:inline-block;font-size:.62rem;font-weight:900;letter-spacing:.1em;padding:.1rem .45rem;border-radius:999px;background:linear-gradient(135deg,#ecfeff,#67e8f9);color:#06141f;margin-left:.35rem;vertical-align:middle}
.ev-row .nc-card .nc-prs{display:flex;flex-direction:column;gap:2px;margin-top:3px;width:100%;max-width:290px}
.ev-row .nc-card .nc-pr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;font-size:.74rem;line-height:1.35}
.ev-row .nc-card .nc-pr>span{opacity:.85;flex:1 1 auto;min-width:0;white-space:nowrap}
.ev-row .nc-card .nc-pr>b{margin-left:auto;color:#a5f3fc;font-weight:800;white-space:nowrap}
.ev-row .nc-card .nc-pk>b{color:#f6d27a}
.ev-row .nc-card .nc-pr>b.nc-own{color:#bbf7d0}
.ev-row .nc-card .nc-pr em{font-style:normal;font-size:.62rem;font-weight:800;color:#06141f;background:#f6d27a;border-radius:999px;padding:0 .4rem;white-space:nowrap}
.ev-row .nc-card .ev-go{background:linear-gradient(135deg,#ecfeff,#67e8f9 55%,#22d3ee);color:#06141f}
@media (max-width:640px){.ev-row .nc-card{padding-right:30%}.ev-row .nc-card .ev-art{width:32%}.ev-row .nc-card .nc-pr{font-size:.7rem}}
/* ================== [7 พ.ย. 2026 กฎ 180] หน้าออเดอร์ที่เปิดอยู่ — โทนหรู กรมท่า+ทอง · ตัวเลขใหญ่ · ประโยคสรุป · แถบระยะ · โซนสี · จุดเรืองแสง · เต็มจอ ==================
   เบาเครื่อง: แอนิเมชันใช้ transform/opacity อย่างเดียว · ไม่มี backdrop-filter บนกราฟ · เครื่องอ่อน/ลดการเคลื่อนไหว = ปิดแอนิเมชัน */
#openPositionsModal .lc-card{background:radial-gradient(120% 60% at 50% -12%,rgba(216,180,106,.16),transparent 60%),linear-gradient(180deg,#0f1d2e,#0a1421);border:1px solid rgba(216,180,106,.5);box-shadow:0 30px 80px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,236,190,.12);color:#e9eef4}
#openPositionsModal .lc-card h1{background:linear-gradient(135deg,#f8ecc6,#e3c27a 45%,#b98d45 75%,#f1dca2);-webkit-background-clip:text;background-clip:text;color:transparent}
#openPositionsModal .lc-card .btn-outline{border-color:rgba(216,180,106,.45);color:#f3e6c4;background:rgba(216,180,106,.06)}
#openPositionsModal .lc-tabs{border-bottom-color:rgba(216,180,106,.18)}
#openPositionsModal .lc-tabs button{display:inline-flex;align-items:center;gap:.35rem;border-color:rgba(216,180,106,.3);color:#e9eef4}
#openPositionsModal .lc-tabs button.is-active{background:linear-gradient(135deg,#f8ecc6,#e3c27a 45%,#b98d45 80%);border-color:transparent;color:#241805}
.lc-ti{flex:none}
#openPositionsModal .lc-sym{color:#f3e6c4}
#openPositionsModal .lc-bid{color:#fff3cf}#openPositionsModal .lc-bid.up{color:#34c781}#openPositionsModal .lc-bid.dn{color:#ef5350}
#openPositionsModal .lc-tfs{background:rgba(255,255,255,.04);border-color:rgba(216,180,106,.25)}
#openPositionsModal .lc-tfs button{color:rgba(233,238,244,.65)}
#openPositionsModal .lc-tfs button.is-active{background:linear-gradient(135deg,#e3c27a,#b98d45);color:#241805}
#openPositionsModal .lc-stats span{background:linear-gradient(180deg,rgba(216,180,106,.1),rgba(216,180,106,.03));border-color:rgba(216,180,106,.28);color:rgba(233,238,244,.8)}
#openPositionsModal .lc-stats b{color:#fff3cf}
#openPositionsModal .lc-chart-box{border-color:rgba(216,180,106,.28)}
#openPositionsModal .lc-foot{color:rgba(233,238,244,.5)}
#openPositionsModal #lcPaneList{color:#e9eef4}
.lc-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.65rem .85rem;border-radius:14px;background:linear-gradient(135deg,rgba(216,180,106,.12),rgba(216,180,106,.02) 60%);border:1px solid rgba(216,180,106,.28)}
.lc-hl{display:flex;flex-direction:column;gap:.1rem;min-width:0}.lc-hl small{font-size:.68rem;letter-spacing:.04em;color:rgba(233,238,244,.6)}
.lc-float{font-family:'IBM Plex Mono',monospace;font-size:1.9rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;display:inline-block}
.lc-float.pos{color:#34d399}.lc-float.neg{color:#f87171}.lc-float.none{font-family:inherit;font-size:1rem;font-weight:600;color:rgba(233,238,244,.7)}
.lc-float.up{animation:lcFlashUp .7s ease-out}.lc-float.dn{animation:lcFlashDn .7s ease-out}
@keyframes lcFlashUp{0%{opacity:.55;transform:translateY(2px)}100%{opacity:1;transform:none}}
@keyframes lcFlashDn{0%{opacity:.55;transform:translateY(-2px)}100%{opacity:1;transform:none}}
.lc-hr{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.lc-eq{font-size:.78rem;color:rgba(233,238,244,.65)}.lc-eq b{font-family:'IBM Plex Mono',monospace;color:#fff3cf}
.lc-mkt{font-size:.68rem;font-weight:600;padding:.18rem .6rem;border-radius:999px;background:rgba(148,163,184,.16);border:1px solid rgba(148,163,184,.4);color:#dbe4ee;white-space:nowrap}
.lc-mkt.warn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.45);color:#fde68a}.lc-mkt[hidden]{display:none}
.lc-say{margin:0;font-size:.8rem;line-height:1.65;color:rgba(233,238,244,.85);padding:.15rem .1rem}.lc-say b{color:#fff3cf;font-family:'IBM Plex Mono',monospace;font-weight:600}.lc-say[hidden]{display:none}
.lc-prog{padding:.15rem .1rem .1rem}.lc-prog[hidden]{display:none}
.lc-pt{position:relative;height:8px;border-radius:99px;background:linear-gradient(90deg,rgba(248,113,113,.35),rgba(230,181,103,.3) 55%,rgba(52,211,153,.4))}
.lc-pf{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,rgba(248,113,113,.0),rgba(255,243,207,.35));transition:width .5s ease}
.lc-pb{position:absolute;top:-3px;width:2px;height:14px;margin-left:-1px;background:#e6b567;border-radius:2px}
.lc-pd{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff3cf;border:2px solid #e6b567;box-shadow:0 0 10px rgba(230,181,103,.8);transition:left .5s ease}
.lc-pl{display:flex;justify-content:space-between;gap:.5rem;margin-top:.4rem;font-size:.66rem;color:rgba(233,238,244,.6)}.lc-pl b{font-family:'IBM Plex Mono',monospace;color:#e9eef4;font-weight:600}
.lc-pl span:last-child{text-align:right;color:#86efac}.lc-pl span:first-child{color:#fca5a5}
.lc-ov{position:absolute;left:0;top:0;pointer-events:none;overflow:hidden;z-index:2}
.lc-ov i{position:absolute;left:0;top:0;width:100%;display:block;will-change:transform}
.lc-ov i[hidden]{display:none}
.lc-zg{background:linear-gradient(180deg,rgba(52,211,153,.13),rgba(52,211,153,.04))}.lc-zg.dn{background:linear-gradient(0deg,rgba(52,211,153,.13),rgba(52,211,153,.04))}
.lc-zr{background:linear-gradient(0deg,rgba(248,113,113,.1),rgba(248,113,113,0))}.lc-zr.dn{background:linear-gradient(180deg,rgba(248,113,113,.1),rgba(248,113,113,0))}
.lc-ov .lc-dot{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 8px 2px rgba(230,181,103,.85)}
.lc-ov .lc-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(230,181,103,.7);animation:lcDot 1.8s ease-out infinite}
@keyframes lcDot{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.lc-tip{position:absolute;z-index:4;width:min(270px,calc(100% - 16px));max-height:calc(100% - 16px);overflow-y:auto;padding:.55rem .65rem;border-radius:12px;background:rgba(10,20,33,.96);border:1px solid rgba(216,180,106,.5);box-shadow:0 14px 32px -12px rgba(0,0,0,.8);color:#e9eef4;font-size:.75rem}
.lc-tip[hidden]{display:none}
.lc-th{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:#f3e6c4;margin-bottom:.3rem}
.lc-th button{width:24px;height:24px;border-radius:50%;border:1px solid rgba(233,238,244,.25);background:transparent;color:#e9eef4;cursor:pointer;font-size:.7rem;padding:0}
.lc-tr{display:grid;grid-template-columns:1fr auto;gap:0 .5rem;padding:.35rem 0;border-top:1px solid rgba(216,180,106,.14)}
.lc-tr b{font-family:'IBM Plex Mono',monospace}.lc-tr b.s{color:#f87171}.lc-tr b.b{color:#60a5fa}
.lc-tr span{font-family:'IBM Plex Mono',monospace;font-weight:700}.lc-tr span.g{color:#34d399}.lc-tr span.r{color:#f87171}
.lc-tr small{grid-column:1/-1;color:rgba(233,238,244,.6);font-size:.66rem}
.lc-tm{padding-top:.35rem;color:rgba(233,238,244,.55);font-size:.66rem}
.lc-fullbtn .i-off{display:none}#openPositionsModal.lc-full .lc-fullbtn .i-on{display:none}#openPositionsModal.lc-full .lc-fullbtn .i-off{display:inline}
/* เต็มจอ */
#openPositionsModal.lc-full{padding:0!important;align-items:stretch}
#openPositionsModal.lc-full .lc-wrap{max-width:none;height:100%;height:100dvh}
#openPositionsModal.lc-full .lc-card{height:100%;max-height:none;border-radius:0;border:0;padding:max(.6rem,env(safe-area-inset-top)) max(.8rem,env(safe-area-inset-right)) max(.6rem,env(safe-area-inset-bottom)) max(.8rem,env(safe-area-inset-left));overflow:hidden}
#openPositionsModal.lc-full #lcPaneChart{flex:1;min-height:0}
#openPositionsModal.lc-full .lc-chart-box{flex:1;min-height:0;display:flex}
#openPositionsModal.lc-full .lc-chart{height:auto;flex:1;min-height:200px}
.lc-card:fullscreen{width:100%;height:100%;max-width:none;overflow:hidden}
@media (max-height:520px){#openPositionsModal.lc-full .lc-say,#openPositionsModal.lc-full .lc-prog,#openPositionsModal.lc-full .lc-stats,#openPositionsModal.lc-full .lc-tabs,#openPositionsModal.lc-full .lc-foot{display:none}
  #openPositionsModal.lc-full .lc-hero{padding:.35rem .6rem}#openPositionsModal.lc-full .lc-float{font-size:1.2rem}}
@media (max-width:600px){.lc-float{font-size:1.5rem}.lc-say{font-size:.76rem}}
@media (prefers-reduced-motion:reduce){.lc-ov .lc-dot::after,.lc-float.up,.lc-float.dn{animation:none}.lc-pf,.lc-pd{transition:none}}
html[data-fxq="0"] .lc-ov .lc-dot::after,html[data-fxq="0"] .lc-float.up,html[data-fxq="0"] .lc-float.dn{animation:none}
/* [7 พ.ย. กฎ 180b] ปุ่มย่อ/ขยายป้ายราคาบนกราฟ (มุมซ้ายบน ไม่บังแกนราคา) */
.lc-lblbtn{position:absolute;z-index:3;left:8px;top:8px;display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;border-radius:999px;border:1px solid rgba(216,180,106,.45);background:rgba(10,20,33,.82);color:#f3e6c4;font:inherit;font-size:.68rem;font-weight:600;cursor:pointer}
.lc-lblbtn:hover{border-color:#e6b567}.lc-lblbtn[aria-pressed="true"]{background:linear-gradient(135deg,#e3c27a,#b98d45);color:#241805;border-color:transparent}
/* [7 พ.ย. กฎ 180c] ลายน้ำโลโก้ PLATOO BOT กลางกราฟ (จางมาก ไม่บังแท่งเทียน · อยู่ใต้โซนสี/จุดราคา · ไม่รับคลิก) */
.lc-ov .lc-wm{position:absolute;left:50%;top:50%;width:min(46%,360px);height:auto;transform:translate(-50%,-50%);opacity:.08;user-select:none;-webkit-user-drag:none;pointer-events:none}
@media (max-width:600px){.lc-ov .lc-wm{width:min(62%,260px);opacity:.09}}
/* [7 พ.ย. กฎ 180d] กำไรประมาณถ้าราคาถึง TP (แถบหัว + ประโยคสรุป + ป้ายเส้น TP) */
.lc-tpv{font-size:.78rem;padding:.2rem .65rem;border-radius:999px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:#bbf7d0;white-space:nowrap}
.lc-tpv b{font-family:'IBM Plex Mono',monospace;color:#34d399}.lc-tpv.neg{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.4);color:#fecaca}.lc-tpv.neg b{color:#f87171}.lc-tpv[hidden]{display:none}
.lc-say b.g{color:#34d399}
/* ==== [7 พ.ย. 2026 กฎ 181 user "การ์ดกำไร ทำให้ลูกค้าประทับใจ → ทำทุกข้อ ระวังเครื่องร้อน/ช้า"] ====
   แอนิเมชันค้างมีแค่จุดเขียว (transform/opacity) · ที่เหลือจบในตัว · data-fxq=0 / ลดการเคลื่อนไหว = ปิดหมด */
#heroCombo .hc-away{display:flex;align-items:center;gap:.6rem;margin:.1rem 0 .6rem;padding:.55rem .7rem;border-radius:12px;font-size:.8rem;line-height:1.45;color:#f4ecd8;
  background:linear-gradient(90deg,rgba(246,210,122,.16),rgba(255,255,255,.04));border:1px solid rgba(246,210,122,.28);animation:hcIn .45s ease both}
#heroCombo .hc-away[hidden],#heroCombo .hc-meta[hidden],#heroCombo .hc-per[hidden],.hc-pct[hidden],.hc-spark[hidden],.hc-streak[hidden]{display:none!important}
#heroCombo .hc-away span{flex:1;min-width:0}
#heroCombo .hc-away b{font-weight:700}
#heroCombo .hc-away b.g,#heroCombo .hc-per b.g{color:#6ee7a8}
#heroCombo .hc-away b.r,#heroCombo .hc-per b.r{color:#ff8a8a}
#heroCombo .hc-away button{flex:none;width:26px;height:26px;border-radius:8px;border:0;background:rgba(255,255,255,.08);color:#f4ecd8;font-size:.75rem;cursor:pointer}
#heroCombo .hc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;margin:0 0 .55rem;font-size:.74rem;color:rgba(244,236,216,.8)}
#heroCombo .hc-live{display:inline-flex;align-items:center;gap:.4rem}
#heroCombo .hc-live i{position:relative;width:8px;height:8px;border-radius:50%;background:#8a8f98;flex:none}
#heroCombo .hc-live.on i{background:#3ddc84}
#heroCombo .hc-live.on i::after{content:'';position:absolute;inset:0;border-radius:50%;background:#3ddc84;animation:hcPulse 2.2s ease-out infinite}
#heroCombo .hc-streak{padding:.12rem .5rem;border-radius:999px;font-weight:700;color:#3a2405;background:linear-gradient(90deg,#f6d27a,#e8a93a)}
#heroCombo .hc-pct{font-style:normal;font-size:.72rem;font-weight:700;color:#f6d27a;white-space:nowrap}
#heroCombo .hc-pct.neg{color:#ff8a8a}
#heroCombo .hc-spark{position:absolute;inset:auto 0 0 0;width:100%;height:62%;pointer-events:none;opacity:.55;z-index:0}
#heroCombo .hc-spark .l{fill:none;stroke:#7cc4ff;stroke-width:1.4;vector-effect:non-scaling-stroke}
#heroCombo .hc-spark .a{fill:rgba(124,196,255,.13);stroke:none}
#heroCombo .hc-spark.dn .l{stroke:#ff9d9d}
#heroCombo .hc-spark.dn .a{fill:rgba(255,138,138,.1)}
#heroCombo #profitStatBalanceBox>*:not(.hc-spark){position:relative;z-index:1}
#heroCombo .profit-stat:has(#profitStatToday),#heroCombo .profit-stat:has(#profitStatAll){cursor:pointer}
#heroCombo .hc-per{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:.4rem;padding:.6rem .7rem 1.3rem;border-radius:12px;cursor:pointer;
  background:linear-gradient(160deg,#1f2a22,#14181a);border:1px solid rgba(246,210,122,.3);box-shadow:0 10px 28px -12px rgba(0,0,0,.7);transform-origin:50% 50%;animation:hcFlip .35s cubic-bezier(.2,.8,.3,1) both}
#heroCombo .hc-per div{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:0;text-align:center}
#heroCombo .hc-per small{font-size:.72rem;color:rgba(244,236,216,.75)}
#heroCombo .hc-per b{font-size:clamp(.95rem,4.4vw,1.5rem);font-weight:800;color:#f4ecd8;white-space:nowrap}
#heroCombo .hc-per p{position:absolute;left:0;right:0;bottom:.35rem;margin:0;text-align:center;font-size:.66rem;color:rgba(244,236,216,.5)}
@media (max-width:767px){
  #heroCombo .profit-stat{flex-wrap:wrap}
  #heroCombo .hc-pct{flex-basis:100%;text-align:right;margin-top:-.4rem}
}
@keyframes hcPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
@keyframes hcIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes hcFlip{from{opacity:0;transform:perspective(700px) rotateX(-70deg)}to{opacity:1;transform:none}}
.hc-ms{position:fixed;inset:0;z-index:10080;display:grid;place-items:center;padding:16px;background:rgba(6,8,10,.72);opacity:0;transition:opacity .25s}
.hc-ms.on{opacity:1}
.hc-ms-card{position:relative;box-sizing:border-box;width:min(360px,100%);padding:1.6rem 1.3rem 1.2rem;border-radius:20px;text-align:center;color:#f4ecd8;
  background:radial-gradient(120% 90% at 50% 0%,#3b2f12,#15130e 70%);border:1px solid rgba(246,210,122,.45);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 24px 60px -20px rgba(246,190,80,.45);
  transform:scale(.9);transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.hc-ms.on .hc-ms-card{transform:none}
.hc-ms-card small{display:block;font-size:.7rem;font-weight:800;letter-spacing:.18em;color:#f6d27a}
.hc-ms-card b{display:block;margin:.5rem 0 .4rem;font-size:1.45rem;line-height:1.3;background:linear-gradient(180deg,#fff3c8,#f3c056 55%,#c8862a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hc-ms-card p{margin:0 0 1.1rem;font-size:.84rem;line-height:1.55;color:rgba(244,236,216,.8)}
.hc-ms-card .row{display:flex;gap:.6rem}
.hc-ms-card button{flex:1;height:42px;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;border:0}
.hc-ms-card .ghost{background:rgba(255,255,255,.08);color:#f4ecd8}
.hc-ms-card .go{color:#3a2405;background:linear-gradient(180deg,#fff3c8,#f3c056 55%,#c8862a)}
.hc-ms-fx{position:absolute;left:50%;top:38%;width:0;height:0;pointer-events:none}
.hc-ms-fx i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#f6d27a;box-shadow:0 0 8px #f6d27a;opacity:0;
  animation:hcBurst var(--d) cubic-bezier(.15,.7,.3,1) .15s 1 both}
.hc-ms-fx i:nth-child(3n){background:#fff3c8;width:4px;height:4px}
@keyframes hcBurst{0%{opacity:1;transform:rotate(var(--a)) translateX(0)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--r))}}
html[data-fxq="0"] #heroCombo .hc-live.on i::after{animation:none;display:none}
@media (prefers-reduced-motion:reduce){#heroCombo .hc-live.on i::after{animation:none;display:none}#heroCombo .hc-per,#heroCombo .hc-away{animation:none}}
/* ==== [7 พ.ย. 2026 กฎ 181b user "ตอนปิดกำไรให้ตัวเลขวิ่งเข้ากองสวยๆ"] ป้ายกำไรลอยเข้าช่องกำไรรวม + เหรียญตาม + ช่องเรืองทอง (จบในตัว ~1.6 วิ) ==== */
.hc-fly{position:fixed;z-index:10070;display:flex;flex-direction:column;align-items:center;gap:1px;padding:.4rem .8rem .35rem;border-radius:14px;pointer-events:none;will-change:transform,opacity;
  color:#0f2a1a;background:linear-gradient(180deg,#d9ffe9,#6ee7a8 60%,#34c47c);box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 8px 24px -6px rgba(52,196,124,.7),0 0 26px rgba(110,231,168,.45);opacity:0}
.hc-fly b{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.hc-fly small{font-size:.62rem;font-weight:700;opacity:.8;white-space:nowrap}
.hc-coin{position:fixed;z-index:10069;width:12px;height:12px;border-radius:50%;pointer-events:none;will-change:transform,opacity;opacity:0;
  background:radial-gradient(circle at 35% 30%,#fff6cf,#f3c056 55%,#b8791f);box-shadow:0 0 8px rgba(246,210,122,.8)}
#heroCombo .profit-stat.hc-hit{animation:hcHit 1.2s ease-out}
#heroCombo .profit-stat.hc-hit .profit-stat-value{animation:hcHitV 1.2s ease-out}
@keyframes hcHit{0%{box-shadow:0 0 0 0 rgba(246,210,122,0)}18%{box-shadow:0 0 0 2px rgba(246,210,122,.85),0 0 28px rgba(246,210,122,.55)}100%{box-shadow:0 0 0 0 rgba(246,210,122,0)}}
@keyframes hcHitV{0%{transform:none}18%{transform:scale(1.08)}45%{transform:none}}
/* ==== [8 พ.ย. 2026 กฎ 182 user "ตัวปรับค่า บางอันมี 3 บางอันมี 5 อยากให้มี 5 ระดับเท่าๆกัน"] ปุ่มพรีเซ็ต 5 ระดับ + แถบระดับ 5 ขีด (แทนอิโมจิ) ====
   คอม ≥640px = 5 ช่องเรียงแถวเดียว · มือถือ = 5 แถวซ้อน (แถบซ้าย ชื่อ+คำอธิบายขวา) */
.lv5Grid{display:grid;grid-template-columns:1fr;gap:.5rem}
.lv5Grid .dzPresetBtn{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.7rem;text-align:left;padding:10px 12px}
.lv5Grid .lvTx{display:flex;flex-direction:column;gap:2px;min-width:0}
.lvMeter{display:inline-flex;align-items:flex-end;gap:3px;height:22px}
.lvMeter i{display:block;width:5px;border-radius:2px;background:color-mix(in srgb,var(--ink-muted,#888) 28%,transparent)}
.lvMeter i:nth-child(1){height:8px}.lvMeter i:nth-child(2){height:11px}.lvMeter i:nth-child(3){height:14px}.lvMeter i:nth-child(4){height:18px}.lvMeter i:nth-child(5){height:22px}
.lvMeter[data-lv="1"] i:nth-child(-n+1){background:#1f8a6a}
.lvMeter[data-lv="2"] i:nth-child(-n+2){background:#4f9a5c}
.lvMeter[data-lv="3"] i:nth-child(-n+3){background:#2b6cb0}
.lvMeter[data-lv="4"] i:nth-child(-n+4){background:#d9822b}
.lvMeter[data-lv="5"] i:nth-child(-n+5){background:#c0392b}
.dzPresetBtn.is-active .lvMeter i{background:rgba(36,26,8,.22)}

.dzPresetBtn.is-active .lvMeter[data-lv="1"] i:nth-child(-n+1),.dzPresetBtn.is-active .lvMeter[data-lv="2"] i:nth-child(-n+2),.dzPresetBtn.is-active .lvMeter[data-lv="3"] i:nth-child(-n+3),
.dzPresetBtn.is-active .lvMeter[data-lv="4"] i:nth-child(-n+4),.dzPresetBtn.is-active .lvMeter[data-lv="5"] i:nth-child(-n+5){background:#241a08}
@media (min-width:640px){
  .lv5Grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lv5Grid .dzPresetBtn{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 8px}
  .lv5Grid .lvTx{align-items:center}
}
/* [8 พ.ย. 2026 กฎ 183 user "การ์ดแชร์ ทั้งแอดมิน ลูกค้า ใส่ลายน้ำโลโก้ปลาทูเรา"] ลายน้ำโลโก้กลางการ์ดแชร์ผล (ทับบนสุดแบบจาง ไม่บังตัวเลข) */
.sr-card .wm-logo{position:absolute;left:50%;top:52%;width:78%;height:auto;transform:translate(-50%,-50%) rotate(-10deg);opacity:.1;pointer-events:none;user-select:none;z-index:5}
/* [8 พ.ย. กฎ 183] ลายน้ำโลโก้ปลาทูบนการ์ดทำลายสถิติ (แชร์ภาพได้) */
.rb-card .wm-logo{position:absolute;left:50%;top:50%;width:62%;height:auto;transform:translate(-50%,-50%) rotate(-10deg);opacity:.1;pointer-events:none;user-select:none;z-index:5}
/* [8 พ.ย. 2026 กฎ 185] ภาษาจีน: ฟอนต์จีนของระบบ (iPhone/Mac = PingFang · Windows = Microsoft YaHei · Android = Noto Sans SC) ต่อท้ายฟอนต์เดิม */
html.lang-zh body{font-family:'IBM Plex Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC',system-ui,sans-serif}
/* [8 พ.ย. 2026 user "ส่วนลดค่าธรรมเนียม เอามาเป็นเมนูที่เดียวกับ โปรไฟล์ / ตั้งค่า EA"] แท็บ "ส่วนลดค่าธรรมเนียม" ใน "บัญชีของฉัน" (web-src/ml/c/21-mya-feedisc.js · กฎ 193)
   พื้นเข้ม (เขียวมรกตแบบหน้าสิทธิประโยชน์) เพราะส่วน "ลดได้จากไหนบ้าง" ใช้ .pk-* ของหน้านั้นที่ออกแบบบนพื้นเข้ม · ไม่มีไอคอน (กฎ 38) */
.mya-disc{margin-top:10px;padding:12px;border-radius:14px;background:#0f1c17;color:#eef3ef;border:1px solid rgba(214,175,110,.22)}
.mya-disc-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px;border-radius:12px;background:linear-gradient(135deg,#1d3a2f,#13241d);border:1px solid rgba(214,175,110,.3)}
.mya-disc-sum>div{min-width:0}
.mya-disc-sum small{display:block;font-size:.7rem;color:#a9bbb1}
.mya-disc-sum b,.mya-disc-sum s{display:block;font-family:'IBM Plex Mono',monospace;font-size:1.25rem;line-height:1.2;color:#fff;margin-top:2px;white-space:nowrap}
.mya-disc-sum s{color:#8fa59b;font-weight:600}
.mya-disc-sum .off b{color:#7ee2a8}
.mya-disc-t{margin:14px 2px 6px;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:#f6dfa6}
.mya-disc-l{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.mya-disc-l li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:.84rem;line-height:1.35}
.mya-disc-l li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e3eee8}
.mya-disc-l li b{flex:none;font-family:'IBM Plex Mono',monospace;font-size:.84rem;color:#7ee2a8;font-weight:700}
.mya-disc-e,.mya-disc-n{margin:6px 2px 0;font-size:.76rem;line-height:1.5;color:#a9bbb1}
.mya-disc-ld{height:44px;margin-top:8px;border-radius:10px;background:rgba(255,255,255,.06)}
.mya-disc-rt{padding:2px 10px;border-radius:8px;border:1px solid rgba(214,175,110,.4);background:transparent;color:#f6dfa6;font:inherit;cursor:pointer}
.mya-disc-src .pk-lead{margin-top:0}
@media (max-width:480px){.mya-disc{padding:10px}.mya-disc-sum{padding:10px;gap:6px}.mya-disc-sum b,.mya-disc-sum s{font-size:1.05rem}}
/* [8 พ.ย. 2026 user "ทำประกาศขายในการ์ดหน้าแดชบอร์ด 99 บาท"] การ์ดฉากใหม่ (#nsCard · 22-newscene-card.js) — รูปฉากเต็มการ์ด ไล่เงาซ้ายให้ตัวหนังสืออ่านง่าย · ไม่มีไอคอน */
.ns-card{text-align:left;cursor:pointer;font:inherit;color:#f0f9ff;border-color:rgba(125,211,252,.55);background:linear-gradient(90deg,rgba(6,20,40,.92) 0%,rgba(6,20,40,.8) 50%,rgba(6,20,40,.25) 85%,rgba(6,20,40,.05) 100%),var(--ns-art) center/cover no-repeat,#0b2236}
.ns-card .ev-tx{max-width:86%}
.ns-card .ev-k{color:#bae6fd}
.ns-card .nc-new{display:inline-block;font-size:.62rem;font-weight:900;letter-spacing:.1em;padding:.1rem .45rem;border-radius:999px;background:linear-gradient(135deg,#f0f9ff,#7dd3fc);color:#06141f;margin-left:.4rem;vertical-align:1px}
.ns-card .ev-sub{color:#dbeafe}
.ns-card .ns-pr{display:flex;align-items:baseline;gap:8px;margin-top:4px;font-size:.74rem;line-height:1.35;max-width:290px}
.ns-card .ns-pr>span{opacity:.88;white-space:nowrap}
.ns-card .ns-pr>b{margin-left:auto;color:#7dd3fc;font-weight:800;white-space:nowrap}
.ns-card .ev-go{background:linear-gradient(135deg,#f0f9ff,#7dd3fc 55%,#38bdf8);color:#06141f}
@media (max-width:640px){.ns-card .ev-tx{max-width:80%}}

/* [8 พ.ย. 2026 กฎ 198] การ์ดศึกล่ามังกร: ส่วนลดค่าธรรมเนียม */
.dgc-fee{display:flex;flex-direction:column;gap:1px;margin-top:5px;padding:4px 7px;border-radius:8px;background:rgba(0,0,0,.32);border:1px solid rgba(247,210,126,.35);font-size:.68rem;line-height:1.3;color:#fde9b8;max-width:100%;position:relative;z-index:1}
.dgc-fee b{font-size:.66rem;color:#f7d27e;letter-spacing:.02em}.dgc-fee i{font-style:normal;white-space:nowrap}
/* [8 พ.ย. 2026 กฎ 201] การ์ดเขาวงกตกราฟทองในหน้าภารกิจ (พื้นห้องโถงทอง) */
.mz-evb{background:linear-gradient(100deg,rgba(44,28,6,.9) 0%,rgba(44,28,6,.55) 55%,rgba(44,28,6,.1) 100%),var(--mzbg) center 60%/cover no-repeat!important;border-color:rgba(242,199,106,.65)!important}