/* ===================================================================
   Smoothie Neon — ธีมกระจกเข้ม ขอบไล่สีชมพู → ม่วง → ฟ้า (แนวเดียวกับ UI ในเกม)
   ใช้กับทุกหน้าของผู้เล่น (ยกเว้น /admin) · โหลดต่อจาก sm-soft.css เสมอ
   เปิดใช้ด้วย <html class="soft neon"> · เอาออก = ลบคำว่า neon + <link> ไฟล์นี้ (กลับเป็นธีมพาสเทลเดิม)
   ทุก selector ขึ้นต้นด้วย html.soft.neon:not(#nx) เพื่อให้ชนะกฎ !important ของธีมเก่าทุกอัน
   =================================================================== */

/* ---------- พาเลต (ปรับสีทั้งเว็บได้ที่นี่) ---------- */
html.soft.neon:not(#nx) {
  --nx-pink: #ff8fcf;
  --nx-lav: #b9a4ff;
  --nx-blue: #8ec5ff;
  --nx-gold: #f3c35a;
  --nx-mint: #7ee2c4;
  --nx-edge: linear-gradient(135deg, #ffa3d9 0%, #c7a8ff 48%, #8fc8ff 100%);
  --nx-edge-v: linear-gradient(180deg, #ffa3d9, #8fc8ff);
  --nx-text-grad: linear-gradient(90deg, #ff9ad6, #c3a6ff 55%, #8ec5ff);
  --nx-panel-fill: linear-gradient(180deg, rgba(36, 27, 40, 0.97), rgba(15, 13, 19, 0.98));
  --nx-row: rgba(255, 255, 255, 0.055);
  --nx-row-h: rgba(255, 255, 255, 0.09);
  --nx-glow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 24px 60px -28px rgba(0, 0, 0, 0.9), 0 0 40px -18px rgba(255, 143, 207, 0.35);
  --nx-head: 'Audiowide', 'Kanit', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --nx-body: 'Kanit', 'IBM Plex Sans Thai Looped', 'IBM Plex Sans Thai', system-ui, sans-serif;

  /* ทับตัวแปรของธีม soft ให้เป็นโทนเข้ม */
  --bg: #0f0d13;
  --surface: #1b1720;
  --surface-2: #221d28;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --border: rgba(255, 255, 255, 0.1);
  --text: #f5eff9;
  --muted: #b9afc6;
  --faint: #7f768c;
  --accent: #ff8fcf;
  --accent-rgb: 255, 143, 207;
  --accent-soft: rgba(255, 143, 207, 0.16);
  --bg-rgb: 15, 13, 19;
  --surface-rgb: 27, 23, 32;
  --fg-rgb: 245, 239, 249;
  --main: linear-gradient(135deg, #ff8fcf, #b9a4ff 55%, #8ec5ff);
  --main-ink: #ffffff;
  --edit-btn: rgba(255, 255, 255, 0.07);
  --check-active: rgba(255, 143, 207, 0.16);
  --p-pink: rgba(255, 143, 207, 0.14); --p-pink-ink: #ff9fd6;
  --p-blue: rgba(142, 197, 255, 0.14); --p-blue-ink: #9ccdff;
  --p-lav: rgba(185, 164, 255, 0.15);  --p-lav-ink: #c6b5ff;
  --p-mint: rgba(126, 226, 196, 0.13); --p-mint-ink: #8fe8cc;
  --p-peach: rgba(255, 170, 140, 0.13); --p-peach-ink: #ffb79d;
  --p-butter: rgba(243, 195, 90, 0.14); --p-butter-ink: #f6cd6e;
  --ok: #8fe8cc; --ok-soft: rgba(126, 226, 196, 0.13);
  --warn: #f6cd6e; --warn-soft: rgba(243, 195, 90, 0.14);
  --danger: #ff8aa8; --danger-soft: rgba(255, 120, 160, 0.14);
  --card: rgba(24, 20, 28, 0.86);
  --card-solid: #1c1821;
  --card-2: rgba(255, 255, 255, 0.055);
  --card-brd: rgba(255, 255, 255, 0.09);
  --soft-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.9);
  --pop-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.95);
  --btn-glow: 0 0 22px -6px rgba(255, 143, 207, 0.55);
  --ring: 0 0 0 3px rgba(255, 143, 207, 0.25);
  --r: 26px;
  --r-sm: 16px;
  --s-head: var(--nx-head);
  --s-body: var(--nx-body);
  --sm-head: var(--nx-head);
  --g-head: var(--nx-head);
  color-scheme: dark;
}

/* ---------- พื้นหลัง: มืด + แสงชมพู/ฟ้าฟุ้ง ๆ ---------- */
html.soft.neon:not(#nx) body {
  font-family: var(--nx-body) !important;
  background-color: #0f0d13 !important;
  background-image:
    radial-gradient(900px 600px at 0% 0%, rgba(255, 120, 200, 0.16), transparent 60%),
    radial-gradient(900px 640px at 100% 10%, rgba(120, 180, 255, 0.15), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(170, 140, 255, 0.14), transparent 60%),
    linear-gradient(180deg, #121017, #0c0b10) !important;
  background-size: auto !important;
  background-attachment: fixed !important;
}
html.soft.neon:not(#nx) ::selection { background: rgba(255, 143, 207, 0.4); color: #fff; }

/* ---------- ตัวอักษร: หัวข้อแนว sci-fi กว้าง ๆ ---------- */
html.soft.neon:not(#nx) h1, html.soft.neon:not(#nx) h2, html.soft.neon:not(#nx) h3, html.soft.neon:not(#nx) h4,
html.soft.neon:not(#nx) .g-title, html.soft.neon:not(#nx) .wf-head h1, html.soft.neon:not(#nx) .rl-sec-ttl {
  font-family: var(--nx-head) !important; font-weight: 400 !important; letter-spacing: 0.02em !important; color: var(--text);
}
html.soft.neon:not(#nx) .g-eyebrow, html.soft.neon:not(#nx) .p-eyebrow, html.soft.neon:not(#nx) .rl-eyebrow, html.soft.neon:not(#nx) .ux-kicker {
  font-family: var(--nx-head) !important; letter-spacing: 0.22em !important; color: var(--nx-lav) !important;
}
html.soft.neon:not(#nx) .p-eyebrow, html.soft.neon:not(#nx) .rl-eyebrow, html.soft.neon:not(#nx) .g-sechd .g-eyebrow {
  background: rgba(185, 164, 255, 0.1) !important; border: 1px solid rgba(185, 164, 255, 0.35);
}
/* คำที่ไล่สี (เช่น ITEM "EXPIRE") */
html.soft.neon:not(#nx) .nx-grad, html.soft.neon:not(#nx) .g-l2, html.soft.neon:not(#nx) .wf-head h1 {
  background: var(--nx-text-grad) !important; -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; filter: drop-shadow(0 0 18px rgba(255, 143, 207, 0.25)) !important; animation: none !important;
}

/* ===================================================================
   กล่องกระจกเข้ม + ขอบไล่สี (ใช้กับการ์ดทุกแบบ)
   =================================================================== */
html.soft.neon:not(#nx) .nx-panel,
html.soft.neon:not(#nx) .card, html.soft.neon:not(#nx) .p-card, html.soft.neon:not(#nx) .dialog, html.soft.neon:not(#nx) .ux-sheet,
html.soft.neon:not(#nx) .rl-sec, html.soft.neon:not(#nx) .rl-adminbar, html.soft.neon:not(#nx) .rl-dlg, html.soft.neon:not(#nx) .ai-box,
html.soft.neon:not(#nx) .e-card, html.soft.neon:not(#nx) .v-card, html.soft.neon:not(#nx) .sm-panel, html.soft.neon:not(#nx) .sm-hero,
html.soft.neon:not(#nx) .g-card, html.soft.neon:not(#nx) .wf-tier .wf-title, html.soft.neon:not(#nx) .wf-dlg, html.soft.neon:not(#nx) .ux-tilt,
html.soft.neon:not(#nx) .g-hello {
  border: 1.5px solid transparent !important;
  background: var(--nx-panel-fill) padding-box, var(--nx-edge) border-box !important;
  border-radius: var(--r) !important;
  box-shadow: var(--nx-glow) !important;
  -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
}
html.soft.neon:not(#nx) .wf-tier { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* ขีดสีเล็ก ๆ ตรงกลางขอบบน/ล่าง (เหมือนกรอบในเกม) */
html.soft.neon:not(#nx) .nx-panel::before, html.soft.neon:not(#nx) .nx-panel::after,
html.soft.neon:not(#nx) .g-card::after, html.soft.neon:not(#nx) .rl-sec::after, html.soft.neon:not(#nx) .sm-panel::after,
html.soft.neon:not(#nx) #app.card::after, html.soft.neon:not(#nx) .v-card::after {
  content: ''; position: absolute; left: 50%; width: 64px; height: 3px; translate: -50% 0; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #ff9fd6, #8fc8ff); pointer-events: none; display: block !important; z-index: 2; opacity: 0.95;
  box-shadow: 0 0 12px rgba(255, 159, 214, 0.6);
}
html.soft.neon:not(#nx) .nx-panel::before { top: -1.5px; }
html.soft.neon:not(#nx) .nx-panel::after, html.soft.neon:not(#nx) .g-card::after, html.soft.neon:not(#nx) .rl-sec::after,
html.soft.neon:not(#nx) .sm-panel::after, html.soft.neon:not(#nx) #app.card::after, html.soft.neon:not(#nx) .v-card::after { bottom: -1.5px; border-radius: 4px 4px 0 0; }
html.soft.neon:not(#nx) .g-stats > .g-card::after { display: none !important; }

/* ช่องย่อยในการ์ด = แถวเทาเข้มโค้งมน */
html.soft.neon:not(#nx) .tile, html.soft.neon:not(#nx) .sm-tile, html.soft.neon:not(#nx) .sm-slot, html.soft.neon:not(#nx) .sm-chip,
html.soft.neon:not(#nx) .h-link, html.soft.neon:not(#nx) .h-rules a, html.soft.neon:not(#nx) .u-changes li, html.soft.neon:not(#nx) .rl-tab,
html.soft.neon:not(#nx) .v-app, html.soft.neon:not(#nx) .ux-tile, html.soft.neon:not(#nx) .opt, html.soft.neon:not(#nx) .perks li,
html.soft.neon:not(#nx) .wf-item, html.soft.neon:not(#nx) .wf-row, html.soft.neon:not(#nx) .wf-notes {
  background: var(--nx-row) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: var(--r-sm) !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.soft.neon:not(#nx) .h-link:hover, html.soft.neon:not(#nx) .h-rules a:hover, html.soft.neon:not(#nx) .rl-tab:hover,
html.soft.neon:not(#nx) .ux-tile:hover, html.soft.neon:not(#nx) .opt:hover, html.soft.neon:not(#nx) .wf-item:hover {
  background: var(--nx-row-h) !important; border-color: rgba(255, 159, 214, 0.35) !important;
}

/* สถิติ 4 ใบ: ขอบสีเดียวคนละสี (ฟ้า / ชมพู / ทอง / ม่วง) เหมือนป้ายในโปรไฟล์ */
html.soft.neon:not(#nx) .g-stats > .g-card { --nc: var(--nx-blue); background: linear-gradient(180deg, rgba(30, 26, 36, 0.92), rgba(16, 14, 20, 0.95)) padding-box, linear-gradient(135deg, var(--nc), color-mix(in srgb, var(--nc) 30%, transparent)) border-box !important; box-shadow: inset 0 0 22px -8px var(--nc), var(--nx-glow) !important; }
html.soft.neon:not(#nx) .g-stats > .g-card:nth-child(2) { --nc: var(--nx-pink); }
html.soft.neon:not(#nx) .g-stats > .g-card:nth-child(3) { --nc: var(--nx-gold); }
html.soft.neon:not(#nx) .g-stats > .g-card:nth-child(4) { --nc: var(--nx-lav); }
html.soft.neon:not(#nx) .g-stats .g-sic { background: color-mix(in srgb, var(--nc) 18%, transparent) !important; color: var(--nc) !important; }

/* ไอคอนวงกลม = วงแหวนไล่สี (เหมือนไอคอนนาฬิกาใน ITEM EXPIRE) */
html.soft.neon:not(#nx) .nx-ic, html.soft.neon:not(#nx) .g-cic, html.soft.neon:not(#nx) .rl-cat-ic, html.soft.neon:not(#nx) .sm-ico {
  border: 1.5px solid transparent !important; border-radius: 50% !important;
  background: linear-gradient(#1a1620, #1a1620) padding-box, var(--nx-edge) border-box !important; color: #f5eff9 !important;
  box-shadow: 0 0 16px -4px rgba(255, 159, 214, 0.45) !important;
}
html.soft.neon:not(#nx) .h-link .ic, html.soft.neon:not(#nx) .rl-tab-ic, html.soft.neon:not(#nx) .ux-tile-ic {
  background: rgba(255, 143, 207, 0.14) !important; color: var(--nx-pink) !important;
}
html.soft.neon:not(#nx) .h-link:nth-child(4n+2) .ic, html.soft.neon:not(#nx) .rl-tab:nth-child(4n+2) .rl-tab-ic, html.soft.neon:not(#nx) .ux-tile:nth-child(4n+2) .ux-tile-ic { background: rgba(142, 197, 255, 0.14) !important; color: var(--nx-blue) !important; }
html.soft.neon:not(#nx) .h-link:nth-child(4n+3) .ic, html.soft.neon:not(#nx) .rl-tab:nth-child(4n+3) .rl-tab-ic, html.soft.neon:not(#nx) .ux-tile:nth-child(4n+3) .ux-tile-ic { background: rgba(185, 164, 255, 0.15) !important; color: var(--nx-lav) !important; }
html.soft.neon:not(#nx) .h-link:nth-child(4n+4) .ic, html.soft.neon:not(#nx) .rl-tab:nth-child(4n+4) .rl-tab-ic, html.soft.neon:not(#nx) .ux-tile:nth-child(4n+4) .ux-tile-ic { background: rgba(243, 195, 90, 0.14) !important; color: var(--nx-gold) !important; }

/* ===================================================================
   แถบเมนูบน
   =================================================================== */
html.soft.neon:not(#nx) header.nav {
  border: 1.5px solid transparent !important;
  background: linear-gradient(180deg, rgba(30, 24, 34, 0.86), rgba(16, 14, 20, 0.9)) padding-box, var(--nx-edge) border-box !important;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9), 0 0 30px -16px rgba(255, 143, 207, 0.4) !important;
}
html.soft.neon:not(#nx) .brand-tx { font-family: var(--nx-head) !important; letter-spacing: 0.06em; }
html.soft.neon:not(#nx) .pmenu > .pn-top, html.soft.neon:not(#nx) .pgrp-btn { font-family: var(--nx-body) !important; color: var(--muted) !important; }
html.soft.neon:not(#nx) .pmenu > .pn-top:hover, html.soft.neon:not(#nx) .pgrp-btn:hover, html.soft.neon:not(#nx) .pgrp.open .pgrp-btn { background: rgba(255, 255, 255, 0.06) !important; color: var(--text) !important; }
html.soft.neon:not(#nx) .pmenu > .pn-top.on, html.soft.neon:not(#nx) .pgrp.on > .pgrp-btn {
  color: #fff !important; border: 1.5px solid transparent !important;
  background: linear-gradient(90deg, rgba(255, 143, 207, 0.22), rgba(142, 197, 255, 0.18)) padding-box, linear-gradient(#18141d, #18141d) padding-box, var(--nx-edge) border-box !important;
  box-shadow: 0 0 18px -6px rgba(255, 143, 207, 0.55), inset 0 0 14px -6px rgba(255, 255, 255, 0.4) !important;
}
html.soft.neon:not(#nx) .pmenu > .pn-top.on .pn-ic, html.soft.neon:not(#nx) .pgrp.on > .pgrp-btn .pn-ic { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }
html.soft.neon:not(#nx) .pdrop, html.soft.neon:not(#nx) .udrop {
  border: 1.5px solid transparent !important;
  background: linear-gradient(#1a1620, #141118) padding-box, var(--nx-edge) border-box !important;
  box-shadow: var(--pop-shadow) !important;
}
html.soft.neon:not(#nx) .ptabs .pdrop a:hover { background: rgba(255, 255, 255, 0.06) !important; }
html.soft.neon:not(#nx) .ptabs .pdrop a.on { background: rgba(255, 143, 207, 0.14) !important; }
html.soft.neon:not(#nx) .pd-tx b { font-family: var(--nx-body) !important; font-weight: 500; }
html.soft.neon:not(#nx) .theme-btn { display: none !important; } /* ธีมนี้เป็นโหมดมืดอย่างเดียว */
html.soft.neon:not(#nx) .ubtn, html.soft.neon:not(#nx) .lang-sw {
  background: linear-gradient(#1a1620, #1a1620) padding-box, var(--nx-edge) border-box !important; border: 1.5px solid transparent !important;
}

/* ===================================================================
   ปุ่ม: แคปซูลเข้ม ขอบสีเรืองแสง (แบบป้าย 15 / Mix nakawa)
   =================================================================== */
html.soft.neon:not(#nx) .nx-pill,
html.soft.neon:not(#nx) .btn.primary, html.soft.neon:not(#nx) .rl-btn.primary, html.soft.neon:not(#nx) .sm-btn:not(.sm-ghost):not(.sm-discord),
html.soft.neon:not(#nx) .ai-fab, html.soft.neon:not(#nx) .rl-ask, html.soft.neon:not(#nx) .u-filter .ux-tile.on, html.soft.neon:not(#nx) .wf-tab.on,
html.soft.neon:not(#nx) .lang-sw button.on, html.soft.neon:not(#nx) .ai-msg.me .ai-bub, html.soft.neon:not(#nx) .me .ai-bub {
  color: #fff !important; border: 1.5px solid transparent !important;
  background: linear-gradient(90deg, #4a2240, #2a2448) padding-box, var(--nx-edge) border-box !important;
  box-shadow: 0 0 20px -6px rgba(255, 143, 207, 0.6), inset 0 0 16px -6px rgba(255, 190, 230, 0.55) !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}
html.soft.neon:not(#nx) .u-filter .ux-tile.on *, html.soft.neon:not(#nx) .wf-tab.on * { color: #fff !important; }
html.soft.neon:not(#nx) .btn.ghost, html.soft.neon:not(#nx) .sm-btn.sm-ghost, html.soft.neon:not(#nx) .rl-btn.ghost,
html.soft.neon:not(#nx) .rl-btn:not(.primary):not(.danger), html.soft.neon:not(#nx) .rl-tbtn, html.soft.neon:not(#nx) .g-go, html.soft.neon:not(#nx) .g-more {
  background: rgba(255, 255, 255, 0.06) !important; color: var(--text) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: none !important;
}
html.soft.neon:not(#nx) .rl-btn:not(.primary):not(.danger):hover, html.soft.neon:not(#nx) .btn.ghost:hover, html.soft.neon:not(#nx) .g-more:hover { border-color: var(--nx-pink) !important; }
html.soft.neon:not(#nx) .btn.discord, html.soft.neon:not(#nx) .sm-btn.sm-discord {
  color: #fff !important; border: 1.5px solid #8ea2ff !important; background: rgba(88, 101, 242, 0.25) !important;
  box-shadow: 0 0 20px -6px rgba(120, 140, 255, 0.7), inset 0 0 14px -6px rgba(170, 180, 255, 0.6) !important;
}
html.soft.neon:not(#nx) .wf-tab, html.soft.neon:not(#nx) .ux-tile:not(.on) { color: var(--muted) !important; }

/* ===================================================================
   ฟอร์ม / ป้าย / แจ้งเตือน
   =================================================================== */
html.soft.neon:not(#nx) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
html.soft.neon:not(#nx) select, html.soft.neon:not(#nx) textarea, html.soft.neon:not(#nx) .pf-in, html.soft.neon:not(#nx) .rl-search {
  background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--text) !important;
}
html.soft.neon:not(#nx) label.rl-search input:not([type=checkbox]) { background: transparent !important; border: 0 !important; }
html.soft.neon:not(#nx) input:focus, html.soft.neon:not(#nx) select:focus, html.soft.neon:not(#nx) textarea:focus, html.soft.neon:not(#nx) .rl-search:focus-within {
  border-color: var(--nx-pink) !important; box-shadow: 0 0 0 3px rgba(255, 143, 207, 0.18) !important;
}
html.soft.neon:not(#nx) select option { background: #1c1821; color: var(--text); }
html.soft.neon:not(#nx) input[type=checkbox], html.soft.neon:not(#nx) input[type=radio] { accent-color: var(--nx-pink); }
html.soft.neon:not(#nx) .opt.sel, html.soft.neon:not(#nx) .pf-radio:has(input:checked) { background: rgba(255, 143, 207, 0.14) !important; border-color: var(--nx-pink) !important; }
html.soft.neon:not(#nx) .toast, html.soft.neon:not(#nx) .rl-toast {
  background: linear-gradient(#1c1821, #1c1821) padding-box, var(--nx-edge) border-box !important; border: 1.5px solid transparent !important; color: var(--text) !important;
}
html.soft.neon:not(#nx) .spin { border-color: rgba(255, 255, 255, 0.12) !important; border-top-color: var(--nx-pink) !important; }
html.soft.neon:not(#nx) .sk { background: linear-gradient(90deg, rgba(255, 143, 207, 0.14), rgba(142, 197, 255, 0.14), rgba(255, 143, 207, 0.14)) !important; background-size: 200% 100% !important; }
html.soft.neon:not(#nx) .modal-back, html.soft.neon:not(#nx) .rl-modal, html.soft.neon:not(#nx) .wf-mback { background: rgba(6, 5, 9, 0.7) !important; }
html.soft.neon:not(#nx) .badge, html.soft.neon:not(#nx) .chip { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--text) !important; }
html.soft.neon:not(#nx) .badge.ok { color: var(--nx-mint) !important; border-color: rgba(126, 226, 196, 0.45) !important; }
html.soft.neon:not(#nx) .badge.warn { color: var(--nx-gold) !important; border-color: rgba(243, 195, 90, 0.45) !important; }
html.soft.neon:not(#nx) .badge.bad { color: var(--danger) !important; border-color: rgba(255, 138, 168, 0.45) !important; }

/* ===================================================================
   หน้าเฉพาะ
   =================================================================== */
/* ยืนยันตัวตน / ด่านเข้า */
html.soft.neon:not(#nx) .hero { background: linear-gradient(135deg, rgba(255, 143, 207, 0.18), rgba(142, 197, 255, 0.14)) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; }
html.soft.neon:not(#nx) .hero::before, html.soft.neon:not(#nx) .hero::after { background: rgba(255, 255, 255, 0.05) !important; }
html.soft.neon:not(#nx) .hero h1, html.soft.neon:not(#nx) .hero p b { color: #fff !important; }
html.soft.neon:not(#nx) .hero p { color: var(--muted) !important; }
html.soft.neon:not(#nx) .pair .av { border: 2px solid transparent !important; background: linear-gradient(#1a1620, #1a1620) padding-box, var(--nx-edge) border-box !important; }
html.soft.neon:not(#nx) .link i { background: var(--nx-edge) !important; }
html.soft.neon:not(#nx) .step .bar, html.soft.neon:not(#nx) .pbar { background: rgba(255, 255, 255, 0.08) !important; }
html.soft.neon:not(#nx) .step .bar::after, html.soft.neon:not(#nx) .pbar i { background: var(--nx-edge) !important; box-shadow: 0 0 10px rgba(255, 143, 207, 0.6) !important; }
html.soft.neon:not(#nx) .step.active span { color: var(--nx-pink) !important; }
html.soft.neon:not(#nx) .perks .n { background: rgba(255, 143, 207, 0.14) !important; color: var(--nx-pink) !important; font-family: var(--nx-head) !important; }
html.soft.neon:not(#nx) .perks li:nth-child(2) .n { background: rgba(142, 197, 255, 0.14) !important; color: var(--nx-blue) !important; }
html.soft.neon:not(#nx) .perks li:nth-child(3) .n { background: rgba(243, 195, 90, 0.14) !important; color: var(--nx-gold) !important; }
html.soft.neon:not(#nx) .sec-h { color: var(--nx-lav) !important; font-family: var(--nx-head) !important; }
html.soft.neon:not(#nx) .timeline div.done::before, html.soft.neon:not(#nx) .timeline div.now::before { background: var(--nx-pink) !important; border-color: var(--nx-pink) !important; }

/* หน้าแรก /home */
html.soft.neon:not(#nx) .g-title { font-size: clamp(34px, 4.6vw, 58px) !important; line-height: 1.2 !important; }
html.soft.neon:not(#nx) .g-halo { background: radial-gradient(circle at 50% 40%, rgba(255, 143, 207, 0.35), rgba(142, 197, 255, 0.18) 55%, transparent 72%) !important; box-shadow: 0 0 0 1.5px rgba(255, 159, 214, 0.5), 0 0 60px -10px rgba(255, 143, 207, 0.5) !important; }
html.soft.neon:not(#nx) .g-live { background: rgba(126, 226, 196, 0.1) !important; border: 1px solid rgba(126, 226, 196, 0.45) !important; color: var(--nx-mint) !important; }
html.soft.neon:not(#nx) .g-live.off { background: rgba(255, 120, 160, 0.1) !important; border-color: rgba(255, 138, 168, 0.45) !important; color: var(--danger) !important; }
html.soft.neon:not(#nx) .g-stat b, html.soft.neon:not(#nx) .g-stat-big b { font-family: var(--nx-head) !important; font-weight: 400 !important; }
html.soft.neon:not(#nx) .g-ringwrap .bg { stroke: rgba(255, 255, 255, 0.1) !important; }
html.soft.neon:not(#nx) .g-ringwrap .fg { stroke: var(--nx-pink) !important; }
html.soft.neon:not(#nx) .g-livetag { background: rgba(126, 226, 196, 0.12) !important; color: var(--nx-mint) !important; }
html.soft.neon:not(#nx) .g-b-ai { background: linear-gradient(135deg, rgba(110, 45, 90, 0.85), rgba(40, 45, 95, 0.85)) padding-box, var(--nx-edge) border-box !important; }
html.soft.neon:not(#nx) .g-b-ai h3, html.soft.neon:not(#nx) .g-b-ai p { color: #fff !important; }
html.soft.neon:not(#nx) .g-uhead { background: linear-gradient(135deg, rgba(255, 143, 207, 0.14), rgba(142, 197, 255, 0.12)) !important; }
html.soft.neon:not(#nx) .g-ver, html.soft.neon:not(#nx) .ux-ver, html.soft.neon:not(#nx) .u-ver { color: var(--nx-pink) !important; font-family: var(--nx-head) !important; }
html.soft.neon:not(#nx) .g-slide { border: 2px solid transparent !important; background: linear-gradient(#1a1620, #1a1620) padding-box, var(--nx-edge) border-box !important; }
html.soft.neon:not(#nx) .g-nav { background: linear-gradient(#1a1620, #1a1620) padding-box, var(--nx-edge) border-box !important; border: 1.5px solid transparent !important; color: #fff !important; }
html.soft.neon:not(#nx) .g-dots button { background: rgba(255, 255, 255, 0.25) !important; }
html.soft.neon:not(#nx) .g-dots button.on { background: var(--nx-edge) !important; }
html.soft.neon:not(#nx) .g-slide figcaption { background: linear-gradient(transparent, rgba(10, 8, 14, 0.8)) !important; }

/* กฎ */
html.soft.neon:not(#nx) .rl-tab.on { background: rgba(255, 143, 207, 0.14) !important; border-color: var(--nx-pink) !important; color: #fff !important; }
html.soft.neon:not(#nx) .rl-tab.on .rl-tab-ic { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
html.soft.neon:not(#nx) .rl-side a.on, html.soft.neon:not(#nx) .rl-side .on { background: rgba(255, 143, 207, 0.14) !important; color: #fff !important; }
html.soft.neon:not(#nx) .rl-n { background: rgba(142, 197, 255, 0.14) !important; color: var(--nx-blue) !important; font-family: var(--nx-head) !important; }
html.soft.neon:not(#nx) .rl-card-y { background: rgba(243, 195, 90, 0.16) !important; color: var(--nx-gold) !important; }
html.soft.neon:not(#nx) .rl-card-r { background: rgba(255, 120, 160, 0.16) !important; color: var(--danger) !important; }
html.soft.neon:not(#nx) .rl-card-o { background: rgba(255, 170, 140, 0.16) !important; color: var(--p-peach-ink) !important; }
html.soft.neon:not(#nx) .rl-sec-hd { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }

/* อัปเดต */
html.soft.neon:not(#nx) .ux-line::before { background: var(--nx-edge-v) !important; box-shadow: 0 0 10px rgba(255, 143, 207, 0.5); }
html.soft.neon:not(#nx) .ux-node { background: #15121a !important; border: 2px solid var(--nx-pink) !important; box-shadow: 0 0 12px rgba(255, 143, 207, 0.6) !important; }
html.soft.neon:not(#nx) .t-add, html.soft.neon:not(#nx) .u-tag.add { background: rgba(126, 226, 196, 0.13) !important; color: var(--nx-mint) !important; }
html.soft.neon:not(#nx) .t-fix, html.soft.neon:not(#nx) .u-tag.fix { background: rgba(243, 195, 90, 0.14) !important; color: var(--nx-gold) !important; }
html.soft.neon:not(#nx) .t-tweak, html.soft.neon:not(#nx) .u-tag.tweak { background: rgba(185, 164, 255, 0.15) !important; color: var(--nx-lav) !important; }
html.soft.neon:not(#nx) .t-remove, html.soft.neon:not(#nx) .u-tag.remove { background: rgba(255, 120, 160, 0.14) !important; color: var(--danger) !important; }

/* สวัสดิการ */
html.soft.neon:not(#nx) .wf-poster { border: 2px solid transparent !important; background: linear-gradient(#1a1620, #1a1620) padding-box, var(--nx-edge) border-box !important; box-shadow: var(--nx-glow) !important; }
html.soft.neon:not(#nx) .wf-noposter { background: linear-gradient(135deg, rgba(255, 143, 207, 0.12), rgba(142, 197, 255, 0.1)) !important; }
html.soft.neon:not(#nx) .wf-qty { background: rgba(255, 143, 207, 0.2) !important; color: #fff !important; border: 1px solid var(--nx-pink); }
html.soft.neon:not(#nx) .wf-badge { background: rgba(255, 143, 207, 0.16) !important; color: var(--nx-pink) !important; box-shadow: none !important; }
html.soft.neon:not(#nx) .wf-head h1 { font-size: clamp(34px, 5vw, 60px) !important; }

/* สถานะเซิร์ฟ */
html.soft.neon:not(#nx) .sm-ring-track { stroke: rgba(255, 255, 255, 0.1) !important; }
html.soft.neon:not(#nx) .sm-ring-bar { stroke: var(--nx-pink) !important; }
html.soft.neon:not(#nx) .sm-ring-num { font-family: var(--nx-head) !important; }

/* ท้ายเว็บ */
html.soft.neon:not(#nx) .sitefoot-in { background: rgba(20, 17, 24, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; }
html.soft.neon:not(#nx) .sitefoot a:hover, html.soft.neon:not(#nx) .linkish { color: var(--nx-pink) !important; }

/* ===================================================================
   คอมโพเนนต์ใหม่ (nx-*) — ใช้ได้ทุกหน้า
   =================================================================== */
html.soft.neon:not(#nx) .nx-panel, html.soft.neon:not(#nx) .g-card, html.soft.neon:not(#nx) .rl-sec, html.soft.neon:not(#nx) .sm-panel, html.soft.neon:not(#nx) .v-card { position: relative; }
html.soft.neon:not(#nx) .nx-hd { display: flex; align-items: center; gap: 14px; }
html.soft.neon:not(#nx) .nx-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; }
html.soft.neon:not(#nx) .nx-ic svg { width: 22px; height: 22px; }
html.soft.neon:not(#nx) .nx-title { margin: 0; font: 400 clamp(24px, 3.4vw, 34px)/1.15 var(--nx-head) !important; letter-spacing: 0.08em !important; text-transform: uppercase; }
html.soft.neon:not(#nx) .nx-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px !important;
  font: 500 15px var(--nx-body); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
html.soft.neon:not(#nx) .nx-pill:hover { transform: translateY(-2px); filter: brightness(1.12); }
html.soft.neon:not(#nx) .nx-pill.sm { padding: 7px 14px; font-size: 13.5px; }
html.soft.neon:not(#nx) .nx-pill svg { width: 16px; height: 16px; }
html.soft.neon:not(#nx) .nx-chip {
  --nc: var(--nx-blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; color: #fff;
  border: 1.5px solid var(--nc); background: color-mix(in srgb, var(--nc) 14%, rgba(16, 14, 20, 0.9));
  box-shadow: 0 0 18px -6px var(--nc), inset 0 0 14px -6px var(--nc);
}
html.soft.neon:not(#nx) .nx-chip b { font: 400 18px var(--nx-head); }
html.soft.neon:not(#nx) .nx-chip small { color: var(--muted); font-size: 12.5px; }
html.soft.neon:not(#nx) .nx-chip.c-pink { --nc: var(--nx-pink); }
html.soft.neon:not(#nx) .nx-chip.c-gold { --nc: var(--nx-gold); }
html.soft.neon:not(#nx) .nx-chip.c-lav { --nc: var(--nx-lav); }
html.soft.neon:not(#nx) .nx-ib { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
html.soft.neon:not(#nx) .nx-ib:hover { color: #fff; border-color: var(--nx-pink); }
html.soft.neon:not(#nx) .nx-ib svg { width: 16px; height: 16px; }

/* แถบเลื่อน */
html.soft.neon:not(#nx) * { scrollbar-color: rgba(255, 255, 255, 0.25) transparent; scrollbar-width: thin; }

/* ตัวเลข: Audiowide เขียน 0 เป็นวงขีด อ่านยาก → ใช้ Kanit หนา ๆ แทน (เหมือน "15" / "1,000 คน" ในรูปตัวอย่าง) */
html.soft.neon:not(#nx) .g-stat b, html.soft.neon:not(#nx) .g-stat-big b, html.soft.neon:not(#nx) .sm-ring-num,
html.soft.neon:not(#nx) .nx-chip b, html.soft.neon:not(#nx) .rm-mhd b, html.soft.neon:not(#nx) .rm-prog b,
html.soft.neon:not(#nx) .rm-ftab small, html.soft.neon:not(#nx) .rm-step, html.soft.neon:not(#nx) .wf-qty, html.soft.neon:not(#nx) .rl-n {
  font-family: 'Kanit', var(--nx-body) !important; font-weight: 600 !important;
}