/* LEXACY SHOP — ธีมมืด ม่วงนีออน + เขียวมะนาว ตามโลโก้ · ฟอนต์ Prompt (OFL, โฮสต์เอง) */
@font-face { font-family: Prompt; font-style: normal; font-display: swap; font-weight: 400; src: url(/static/prompt-thai-400.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Prompt; font-style: normal; font-display: swap; font-weight: 500; src: url(/static/prompt-thai-500.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Prompt; font-style: normal; font-display: swap; font-weight: 600; src: url(/static/prompt-thai-600.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Prompt; font-style: normal; font-display: swap; font-weight: 700; src: url(/static/prompt-thai-700.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Prompt; font-style: normal; font-display: swap; font-weight: 800; src: url(/static/prompt-thai-800.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Prompt; font-style: normal; font-display: swap; font-weight: 400; src: url(/static/prompt-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Prompt; font-style: normal; font-display: swap; font-weight: 500; src: url(/static/prompt-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Prompt; font-style: normal; font-display: swap; font-weight: 600; src: url(/static/prompt-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Prompt; font-style: normal; font-display: swap; font-weight: 700; src: url(/static/prompt-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Prompt; font-style: normal; font-display: swap; font-weight: 800; src: url(/static/prompt-latin-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --bg: #0b0814; --bg2: #110c1f; --card: rgba(255, 255, 255, .045); --card-solid: #161027; --line: rgba(196, 160, 255, .14); --line2: rgba(196, 160, 255, .28);
  --text: #f4f0ff; --muted: #a9a1c6; --purple: #a855f7; --violet: #c4b5fd; --lime: #b5f23d;
  --brand: var(--purple); --brand-ink: #fff;
  --grad: linear-gradient(120deg, #6d28d9 0%, #8b5cf6 55%, #a855f7 100%);
  --grad-text: linear-gradient(110deg, #c4b5fd 0%, #a855f7 45%, #b5f23d 100%);
  --glow: 0 0 0 1px rgba(168, 85, 247, .35), 0 10px 40px rgba(168, 85, 247, .35);
  --ok: #86efac; --ok-bg: rgba(34, 197, 94, .12); --err: #fca5a5; --err-bg: rgba(239, 68, 68, .14); --warn: #fcd34d; --on: rgba(181, 242, 61, .08);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font: 16px/1.7 Prompt, system-ui, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 500px at 85% -10%, rgba(139, 92, 246, .22), transparent 60%), radial-gradient(700px 420px at -10% 10%, rgba(124, 58, 237, .16), transparent 60%), radial-gradient(800px 600px at 50% 110%, rgba(181, 242, 61, .06), transparent 60%); }
a { color: var(--violet); text-underline-offset: 3px; }
img { max-width: 100%; }
main { max-width: 1180px; margin: 0 auto; padding: 28px 18px 56px; }
main.wide { max-width: none; padding: 0 0 56px; }
h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.2; margin: 6px 0 18px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(22px, 3.2vw, 32px); line-height: 1.25; margin: 6px 0 14px; font-weight: 700; }
h3 { font-size: 18px; margin: 0 0 8px; font-weight: 600; }
code { font-family: ui-monospace, Consolas, monospace; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; word-break: break-all; font-size: 14px; }
small, .small { font-size: 13px; }
.muted { color: var(--muted); }
.center { text-align: center; }
::selection { background: rgba(168, 85, 247, .45); }

/* ---------- หัวเว็บ: แคปซูลกระจก ---------- */
.top { position: sticky; top: 0; z-index: 30; padding: 12px 0; background: linear-gradient(var(--bg) 55%, rgba(11, 8, 20, 0)); }
.top-in { max-width: 1180px; margin: 0 auto; padding: 0 18px; display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .05em; text-decoration: none; color: var(--text); white-space: nowrap; font-size: 17px; }
.brand img { border-radius: 10px; box-shadow: 0 0 18px rgba(168, 85, 247, .55); }
.brand b { color: var(--lime); font-weight: 800; }
.pill { display: flex; gap: 2px; padding: 5px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.pill a { padding: 7px 15px; border-radius: 99px; text-decoration: none; color: var(--muted); font-size: 15px; white-space: nowrap; transition: color .15s, background .15s; }
.pill a:hover { color: var(--text); }
.pill a.on { color: var(--text); background: rgba(168, 85, 247, .22); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .45); }
.me { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.me form { margin: 0; }
.who { display: inline-flex; align-items: center; gap: 8px; }
.who img { border-radius: 50%; box-shadow: 0 0 0 2px rgba(168, 85, 247, .6); }
.uname { font-size: 14px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: rgba(181, 242, 61, .15); color: var(--lime); border: 1px solid rgba(181, 242, 61, .35); }
.navt { display: none; }
.burger { display: none; cursor: pointer; padding: 8px; margin-left: auto; }
.burger i { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; }
@media (max-width: 920px) {
  .top { background: rgba(11, 8, 20, .92); }
  .top-in { flex-wrap: wrap; }
  .burger { display: block; }
  .pill, .me { display: none; flex: 0 0 100%; }
  .pill { flex-direction: column; border-radius: 16px; }
  .pill a { border-radius: 12px; }
  .me { margin: 0; flex-wrap: wrap; padding: 4px 4px 8px; }
  .navt:checked ~ .pill, .navt:checked ~ .me { display: flex; }
}

/* ---------- ปุ่ม ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--grad); background-size: 160% 100%; color: var(--brand-ink); border: 0; border-radius: 14px; padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .2s, background-position .4s; box-shadow: 0 8px 26px rgba(168, 85, 247, .38); }
.btn:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 12px 34px rgba(124, 58, 237, .55); }
.btn:active { transform: none; }
.btn span[aria-hidden] { transition: transform .15s; }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.btn.sm { padding: 7px 14px; font-size: 14px; border-radius: 11px; box-shadow: none; }
.btn.lg { padding: 15px 26px; font-size: 17px; border-radius: 16px; }
.btn.block { display: flex; width: 100%; }
.btn.glass, .btn.ghost { background: rgba(255, 255, 255, .06); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.btn.glass:hover, .btn.ghost:hover { background: rgba(255, 255, 255, .1); }
.btn.outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.btn.danger { color: var(--err); box-shadow: inset 0 0 0 1px rgba(252, 165, 165, .4); }
.dangerzone { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 14px; padding: 0; text-decoration: none; }
.link:hover { color: var(--text); }
button:disabled { opacity: .6; cursor: wait; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; --mx: 72%; --my: 42%; }
/* ภาพเกมเป็นพื้นหลังมืด ๆ แล้วส่องสว่างตามเมาส์ (--mx/--my ตั้งจาก static/app.js) */
.hero-bg { position: absolute; inset: -2px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 6px; transform: rotate(-4deg) scale(1.15); filter: saturate(1.15) brightness(.9); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 14px; }
.hero-shade { position: absolute; inset: 0; background: rgba(11, 8, 20, .9);
  -webkit-mask-image: radial-gradient(circle 260px at var(--mx) var(--my), rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .7) 50%, #000 100%);
  mask-image: radial-gradient(circle 260px at var(--mx) var(--my), rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .7) 50%, #000 100%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-in, .hero .marquee { position: relative; z-index: 1; }
.hero-in { max-width: 1180px; margin: 0 auto; padding: clamp(44px, 7vw, 84px) 18px clamp(24px, 5vw, 48px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; }
.hero h1 { font-size: clamp(36px, 6.4vw, 72px); line-height: 1.08; margin: 16px 0; font-weight: 800; letter-spacing: -.02em; }
.hero .lead { max-width: 560px; font-size: clamp(16px, 2vw, 19px); }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .06em; padding: 6px 14px; border-radius: 99px; background: rgba(181, 242, 61, .08); color: var(--lime); border: 1px solid rgba(181, 242, 61, .3); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: blink 1.6s infinite; }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trust { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 26px 0 0; }
.trust li { font-size: 14px; padding: 6px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.hero-art { position: relative; display: grid; place-items: center; min-height: 320px; }
.hero-art .float { position: relative; z-index: 1; width: min(420px, 85%); height: auto; border-radius: 34px; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 30px 60px rgba(168, 85, 247, .55)); }
.halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, .55), rgba(124, 58, 237, .18) 45%, transparent 70%); filter: blur(10px); animation: pulse 5s ease-in-out infinite; }
.px { position: absolute; width: 8px; height: 8px; background: var(--purple); box-shadow: 0 0 10px var(--purple); animation: twinkle 3.2s ease-in-out infinite; }
.px:nth-child(3n) { background: var(--lime); box-shadow: 0 0 10px var(--lime); width: 6px; height: 6px; }
.px:nth-child(4n) { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.p0 { top: 6%; left: 18%; } .p1 { top: 14%; right: 12%; animation-delay: .4s; } .p2 { top: 38%; left: 4%; animation-delay: .9s; }
.p3 { top: 70%; left: 10%; animation-delay: 1.3s; } .p4 { bottom: 6%; right: 22%; animation-delay: .2s; } .p5 { top: 48%; right: 2%; animation-delay: 1.8s; }
.p6 { top: 2%; right: 40%; animation-delay: 2.2s; } .p7 { bottom: 14%; left: 30%; animation-delay: 1.1s; } .p8 { top: 26%; left: 28%; animation-delay: 2.6s; }
.p9 { bottom: 30%; right: 8%; animation-delay: .7s; } .p10 { top: 60%; right: 30%; animation-delay: 1.5s; } .p11 { top: 84%; left: 50%; animation-delay: 2s; }
.p12 { top: 20%; left: 6%; animation-delay: 2.9s; } .p13 { top: 90%; right: 6%; animation-delay: .5s; }
.marquee { border-block: 1px solid var(--line); background: rgba(255, 255, 255, .02); overflow: hidden; padding: 12px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 14px; width: max-content; animation: scroll 40s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.mq { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); white-space: nowrap; font-weight: 500; }
.mq img { width: 34px; height: 34px; border-radius: 10px; }
@media (max-width: 860px) { .hero-in { grid-template-columns: 1fr; text-align: left; } .hero-art { order: -1; min-height: 240px; } .hero-art .float { width: min(260px, 70%); } }

/* ---------- ส่วนต่าง ๆ ---------- */
.sec { max-width: 1180px; margin: 0 auto; padding: 36px 18px 8px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sec-head h2 { margin: 0; }
.kicker { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin-bottom: 4px; }
.more { color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; }
.more:hover { color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stats > div { padding: 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.stats b { display: block; font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.25; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats b small { font-size: .5em; }
.stats span { color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.steps li { position: relative; padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.steps li:hover { border-color: var(--line2); transform: translateY(-3px); }
.steps .emo { font-size: 34px; display: block; }
.steps .n { position: absolute; top: 16px; right: 18px; font-weight: 800; font-size: 28px; color: rgba(255, 255, 255, .07); }
.steps b { display: block; font-size: 18px; margin-top: 10px; }
.steps p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.agent-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: clamp(22px, 4vw, 40px); border-radius: 26px; background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(181, 242, 61, .05)); border: 1px solid var(--line2); }
.agent-opts { display: grid; gap: 12px; }
.agent-opts > div { padding: 18px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.agent-opts p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .agent-card { grid-template-columns: 1fr; } }

.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 4px 20px; transition: border-color .2s; }
.faq details[open] { border-color: var(--line2); }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--lime); font-size: 22px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; color: var(--muted); }

.cta { display: flex; align-items: center; gap: 22px; padding: clamp(22px, 4vw, 36px); border-radius: 26px; background: var(--grad); box-shadow: 0 20px 60px rgba(124, 58, 237, .4); }
.cta img { border-radius: 22px; flex-shrink: 0; }
.cta div { flex: 1; }
.cta h2 { margin: 0; }
.cta p { margin: 4px 0 0; opacity: .9; }
.cta .btn { background: #0b0814; box-shadow: none; }
@media (max-width: 700px) { .cta { flex-direction: column; text-align: center; } }

/* ---------- การ์ดเกม ---------- */
.ggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ggrid { grid-template-columns: 1fr; } }
.gcard { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); background: var(--card-solid); border: 1px solid var(--line); transition: transform .2s, box-shadow .25s, border-color .2s; }
.gcard:hover { transform: translateY(-6px); border-color: rgba(168, 85, 247, .6); box-shadow: var(--glow); }
.gcover { position: relative; }
.art { aspect-ratio: 16 / 9; background: #120c22; overflow: hidden; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gcard:hover .art img { transform: scale(1.06); }
.art.ph { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(167, 139, 250, .45), transparent 60%), radial-gradient(circle at 80% 90%, rgba(139, 92, 246, .6), transparent 55%), #150e26; }
.art.ph span { font-size: 64px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.gicon { position: absolute; left: 14px; bottom: -22px; width: 52px; height: 52px; border-radius: 14px; border: 3px solid var(--card-solid); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line2); color: var(--text); }
.gcover .badge { position: absolute; top: 12px; right: 12px; }
.badge.on { background: rgba(181, 242, 61, .16); color: var(--lime); border-color: rgba(181, 242, 61, .45); }
.badge.soon { background: rgba(0, 0, 0, .45); color: var(--muted); }
.badge.test { background: rgba(252, 211, 77, .16); color: var(--warn); border-color: rgba(252, 211, 77, .5); }
.gbody { padding: 30px 18px 18px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.gbody b { font-size: 19px; font-weight: 700; }
.gfoot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; }
.price { font-weight: 800; font-size: 22px; }
.price small { font-weight: 500; font-size: 13px; color: var(--muted); }
.price.big { font-size: 40px; letter-spacing: -.02em; }
.go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(168, 85, 247, .18); color: var(--text); transition: background .2s, transform .2s; }
.gcard:hover .go { background: var(--purple); transform: translateX(3px); }

/* ---------- หน้าเกม ---------- */
.crumb { color: var(--muted); font-size: 14px; margin: 0 0 4px; }
.crumb a { color: var(--muted); }
.product { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 26px; align-items: start; }
.gallery { display: grid; gap: 12px; min-width: 0; }
.art.main, .video { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.video { aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.thumb { flex: 0 0 120px; aspect-ratio: 16 / 9; padding: 0; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: #120c22; cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover, .thumb.on { opacity: 1; border-color: var(--purple); }
.about p { color: var(--muted); }
.buy { position: sticky; top: 90px; padding: 22px; border-radius: 22px; background: var(--card-solid); border: 1px solid var(--line2); box-shadow: var(--glow); }
.buy-head { display: flex; gap: 12px; align-items: center; }
.buy-head img { border-radius: 14px; }
.buy-head b { display: block; font-size: 20px; }
.buy-head span { font-size: 14px; }
.pricebox { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; }
.keylink { margin-top: 10px; font-size: 15px; }
.checks { list-style: none; padding: 0; margin: 18px 0 12px; display: grid; gap: 8px; }
.checks li { padding-left: 28px; position: relative; font-size: 15px; color: var(--muted); }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--lime); font-weight: 800; }
.agentbox { margin-top: 16px; padding: 16px; border-radius: 16px; background: rgba(181, 242, 61, .06); border: 1px dashed rgba(181, 242, 61, .45); }
.agentbox p { margin: 6px 0; }
.copyrow { display: flex; gap: 8px; align-items: center; }
.copyrow code { flex: 1; min-width: 0; font-size: 12px; }
.more-games { margin-top: 44px; }
@media (max-width: 880px) { .product { grid-template-columns: 1fr; } .buy { position: static; } }

/* ---------- เอกสาร ---------- */
.doc { max-width: 820px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 4vw, 36px); }
.doc h2 { font-size: 19px; margin: 26px 0 8px; }
.doc ul { padding-left: 20px; }
.doc li, .doc p { color: var(--muted); }
.doc b { color: var(--text); }

/* ---------- ส่วนประกอบทั่วไป (หน้าสั่งซื้อ / ตัวแทน / แอดมิน) ---------- */
.lead { font-size: 17px; color: var(--muted); }
.box, .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 12px 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); }
.card span { color: var(--muted); }
.stats > div b:only-child { display: block; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
th { font-size: 13px; color: var(--muted); font-weight: 500; }
tr.on td { background: var(--on); }
tr.sub td { color: var(--muted); font-size: 13px; white-space: normal; }
table.mini { width: auto; display: table; }
td.neg { color: var(--err); }
td.pos { color: var(--ok); }
.form { display: grid; gap: 14px; max-width: 560px; }
.form label, .row label { display: grid; gap: 6px; font-weight: 500; }
.form label.check, label.check { display: flex; gap: 10px; font-weight: 400; align-items: flex-start; color: var(--muted); }
label.check > span { flex: 1; min-width: 0; }
label small { font-weight: 400; }
[hidden] { display: none !important; }
.payset { display: grid; gap: 10px; }
.more-opt { border: 1px dashed var(--line2); border-radius: 14px; padding: 10px 14px; }
.more-opt summary { cursor: pointer; color: var(--violet); }
.more-opt[open] { display: grid; gap: 12px; }
.flash { white-space: pre-line; }
.tablewrap { overflow-x: auto; }
input, select { font: inherit; padding: 11px 14px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(0, 0, 0, .35); color: var(--text); min-width: 0; }
input:focus, select:focus { outline: 2px solid rgba(168, 85, 247, .6); outline-offset: 1px; }
input[type=checkbox] { accent-color: var(--purple); width: 18px; height: 18px; margin-top: 3px; }
input[type=file] { padding: 10px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 10px; padding: 16px; }
legend { color: var(--muted); padding: 0 6px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row .grow { flex: 1; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.quote, .big { font-size: 20px; font-weight: 700; }
.warn { color: var(--warn); }
.flash { border-radius: 14px; padding: 12px 16px; margin: 8px 0 16px; border: 1px solid transparent; }
.flash.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(134, 239, 172, .25); }
.flash.err { background: var(--err-bg); color: var(--err); border-color: rgba(252, 165, 165, .25); }
.qr { display: inline-block; background: #fff; padding: 12px; border-radius: 16px; box-shadow: var(--glow); }
.qr svg { width: 240px; height: 240px; display: block; }
.avatar { border-radius: 14px; }
body.admin { --purple: #7c8cff; --grad: linear-gradient(120deg, #4f6bff, #8b5cf6); }

/* ---------- ไอคอนเส้น (SVG) ---------- */
.ic { flex-shrink: 0; vertical-align: -0.2em; }
.menu-pop a { display: flex; align-items: center; gap: 10px; }
.menu-pop a .ic, .side a .ic { color: var(--violet); }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust li .ic { color: var(--lime); }
.agent-opts b { display: inline-flex; align-items: center; gap: 8px; }
.agent-opts b .ic, .agentbox b .ic { color: var(--lime); }
.agentbox b { display: inline-flex; align-items: center; gap: 8px; }
.steps .emo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(168, 85, 247, .14); border: 1px solid rgba(168, 85, 247, .35); color: var(--lime); font-size: inherit; }
.act-i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(168, 85, 247, .16); color: var(--lime); margin-bottom: 6px; }
.act.hot .act-i { background: rgba(181, 242, 61, .14); }
.art.ph span { color: rgba(196, 181, 253, .75); font-size: inherit; display: grid; }
.sum-ph { color: var(--violet); }
.x { display: grid; place-items: center; padding: 0; }
.hint .link, .copy-how p, .row .btn { display: inline-flex; align-items: center; gap: 6px; }
.copy-how p { display: flex; flex-wrap: wrap; }
.copy-how p .ic { color: var(--lime); }
.pm-i { color: var(--violet); display: grid; place-items: center; }
.pm:has(input:checked) .pm-i { color: var(--lime); }
.big .ic { color: var(--lime); }

/* ---------- ฟอร์ม: ตัวเลือกแบบการ์ด / ธนาคาร / dropdown ธีมมืด ---------- */
select option, select optgroup { background: #160f28; color: var(--text); }
.legend { margin: 0 0 -6px; font-weight: 500; }
.picks { display: grid; gap: 10px; }
.picks.two { grid-template-columns: 1fr 1fr; }
.form label.pick, label.pick { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line2); background: rgba(0, 0, 0, .25); cursor: pointer; font-weight: 600; transition: border-color .15s, background .15s; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick-i { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(168, 85, 247, .14); color: var(--violet); }
.pick small { color: var(--muted); font-weight: 400; font-size: 13px; }
.pick:has(input:checked) { border-color: var(--purple); background: rgba(168, 85, 247, .14); box-shadow: 0 0 0 3px rgba(168, 85, 247, .2); }
.pick:has(input:checked) .pick-i { color: var(--lime); background: rgba(181, 242, 61, .12); }
.pick:has(input:focus-visible), .bank:has(input:focus-visible) { outline: 2px solid rgba(168, 85, 247, .7); outline-offset: 2px; }
.banks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.form label.bank, label.bank { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: rgba(0, 0, 0, .25); cursor: pointer; font-weight: 500; font-size: 14px; }
.bank input { position: absolute; opacity: 0; pointer-events: none; }
.bank:has(input:checked) { border-color: var(--purple); background: rgba(168, 85, 247, .14); }
.bank-logo { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: #fff; background: #555; }
.bank-name { line-height: 1.25; }
.bk-kbank { background: #138f2d; } .bk-scb { background: #4e2a84; } .bk-bbl { background: #1e4598; } .bk-ktb { background: #1ba5e1; }
.bk-bay { background: #f5b700; color: #3d2b00; } .bk-ttb { background: #0050f0; } .bk-gsb { background: #e91e8c; } .bk-baac { background: #3c9a35; }
.bk-ghb { background: #f57d23; } .bk-uob { background: #0b3979; } .bk-cimb { background: #d71920; } .bk-kkp { background: #5b5aa6; }
.bk-pp { background: #1a4a8f; color: #fff; }
/* แอดมิน: การ์ดโปรไฟล์ Discord + บัญชีรับค่าคอม */
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pcard { display: grid; gap: 10px; align-content: start; }
.pcard .legend { margin: 0; color: var(--muted); font-size: 13px; }
.pcard .row { margin: 0; }
.who { display: flex; align-items: center; gap: 14px; }
.who-av { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--line2); object-fit: cover; }
.who > div { display: grid; gap: 1px; min-width: 0; }
.who b { font-size: 18px; }
.acct { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.acct .bank-logo { width: 48px; height: 48px; border-radius: 12px; font-size: 11px; }
.acct > div { flex: 1; display: grid; gap: 1px; min-width: 0; }
.acct .mono { font-size: 16px; letter-spacing: .04em; }
.acct small { color: var(--muted); }
.acct.sm { padding: 0; gap: 10px; background: none; border: 0; }
.acct.sm .bank-logo { width: 32px; height: 32px; border-radius: 8px; font-size: 8.5px; }
.acct.sm .mono { font-size: 13px; }
@media (max-width: 760px) { .pcards { grid-template-columns: 1fr; } }
.bk-lhb { background: #6d6e71; } .bk-tisco { background: #12549b; } .bk-icbc { background: #c50f1f; } .bk-ibank { background: #0f6b5e; }
.codefield { display: grid; gap: 6px; }
.codefield p { margin: 0; min-height: 1.2em; }
.row.nowrap { flex-wrap: nowrap; }
.row.nowrap input { flex: 1; }
.verified { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(134, 239, 172, .08); border: 1px solid rgba(134, 239, 172, .3); color: var(--ok); }
.verified div { flex: 1; display: grid; }
.verified b { color: var(--text); }
.verified small { color: var(--muted); }
.verify-need { display: grid; gap: 8px; justify-items: start; padding: 14px; border-radius: 14px; border: 1px dashed var(--line2); }
.verify-need p { margin: 0; }
/* สมัครตัวแทน: เลือกอีเมลติดต่อ (อีเมล Discord / อีเมลอื่น) */
.eopts { display: grid; gap: 10px; }
.eopt { display: flex !important; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); cursor: pointer; font-weight: 400 !important; }
.eopt > input { accent-color: var(--purple); width: 18px; height: 18px; margin-top: 4px; flex-shrink: 0; }
.eopt-b { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.eopt-b b { font-weight: 600; word-break: break-all; }
.eopt-b small { color: var(--muted); font-size: 13px; }
.eopt-b input { width: 100%; margin-top: 4px; }
.eopt-b input:disabled { opacity: .45; }
.eopt:has(> input:checked) { border-color: var(--purple); background: rgba(168, 85, 247, .1); box-shadow: 0 0 0 3px rgba(168, 85, 247, .16); }
/* ปุ่ม "ดำเนินการต่อด้วย Discord / Google" แบบเว็บทั่วไป */
.sso { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 12px; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: filter .15s, box-shadow .15s; }
.sso:hover { filter: brightness(1.06); }
.sso:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.sso-i { flex-shrink: 0; }
.sso-discord { color: #fff; background: #5865f2; }
.join-box { border-color: rgba(251, 191, 36, .35); }
.join-box > p:first-child { display: flex; gap: 8px; align-items: flex-start; }
.join-box > p:first-child svg { flex: none; margin-top: 3px; color: #fbbf24; }
.join-box .row { flex-wrap: wrap; gap: 10px; }
.btn.join-btn { color: #fff; background: #5865f2; box-shadow: 0 8px 26px rgba(88, 101, 242, .35); }
.btn.join-btn .sso-i { width: 20px; height: 20px; }
.sso-google { color: #1f1f1f; background: #fff; box-shadow: inset 0 0 0 1px #dadce0; }
.vbadge.wait { color: var(--warn); background: rgba(251, 146, 60, .12); border-color: rgba(253, 186, 116, .3); }
.qhead { display: flex; align-items: center; gap: 8px; }
.qbtn { font: inherit; font-size: 13px; font-weight: 700; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255, 255, 255, .05); color: var(--violet); cursor: pointer; line-height: 1; }
.qbtn:hover { color: var(--text); border-color: var(--purple); }
.helpopts { display: grid; gap: 10px; }
.helpopts > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--d1); }
.helpopts span { color: var(--muted); font-size: 14px; }
.helpopts b { display: block; color: var(--text); }
.vbadge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--ok); background: rgba(34, 197, 94, .12); border: 1px solid rgba(134, 239, 172, .3); }
.terms-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.terms-dl dt { font-weight: 600; color: var(--lime); }
.terms-dl dd { margin: 0; color: var(--muted); }
button:disabled.btn { opacity: .45; cursor: not-allowed; transform: none; }
@media (max-width: 560px) { .picks.two { grid-template-columns: 1fr; } .terms-dl { grid-template-columns: 1fr; gap: 2px; } .terms-dl dd { margin-bottom: 8px; } }

/* ---------- การแจ้งเตือน (หน้าแอดมิน / ตัวแทน) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip-btn { font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); color: var(--muted); cursor: pointer; }
.chip-btn:hover { color: var(--text); }
.chip-btn.on { color: var(--text); background: rgba(168, 85, 247, .22); border-color: rgba(168, 85, 247, .55); }
.nk { display: inline-block; font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 8px; margin-right: 8px; border-radius: 99px; vertical-align: 2px; border: 1px solid; }
.nk-order { color: #86efac; border-color: rgba(134, 239, 172, .45); }
.nk-key { color: #c4b5fd; border-color: rgba(196, 181, 253, .45); }
.nk-money { color: #fcd34d; border-color: rgba(252, 211, 77, .45); }
.nk-security { color: #fca5a5; border-color: rgba(252, 165, 165, .45); }
.nk-system { color: var(--muted); border-color: var(--line2); }
/* สถานะออเดอร์: รอชำระ = ส้ม · ยกเลิก = แดง · ชำระแล้ว/สำเร็จ = เขียว */
.st { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.st-pending, .st-agent-pending { color: #fdba74; }
.st-cancelled, .st-agent-rejected, .st-agent-disabled { color: #fca5a5; }
.st-paid, .st-fulfilled, .st-agent-active { color: #86efac; }

/* ---------- แอดมิน: แท็บ / ปลดล็อกข้อมูลสำคัญ / แบ่งหน้า ---------- */
.tabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 16px; padding: 5px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 12px; color: var(--muted); text-decoration: none; white-space: nowrap; font-weight: 500; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); background: rgba(124, 140, 255, .2); box-shadow: inset 0 0 0 1px rgba(124, 140, 255, .45); }
.lockbox { display: flex; gap: 18px; align-items: flex-start; max-width: 640px; }
.lockbox p { margin: 6px 0 12px; }
.lockbox input { width: 160px; letter-spacing: .2em; text-align: center; }
.lock-i { display: grid; place-items: center; flex-shrink: 0; width: 60px; height: 60px; border-radius: 18px; background: rgba(252, 211, 77, .12); color: var(--warn); }
.unlockbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 14px; border-radius: 14px; background: rgba(134, 239, 172, .08); color: var(--ok); border: 1px solid rgba(134, 239, 172, .3); }
.unlockbar form { margin: 0 0 0 auto; }
.kv.left { margin: 0 0 14px; max-width: 640px; padding: 0; background: none; border: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.toolbar .chips { margin: 0; }
.per { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
a.chip-btn { text-decoration: none; }
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pager span { margin-right: auto; }
.ok-text { color: var(--ok); }
.agent-no { font-family: ui-monospace, Consolas, monospace; color: var(--violet); }
.notices { list-style: none; margin: 0; padding: 4px 6px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); max-height: 560px; overflow-y: auto; }
.nday { position: sticky; top: -4px; z-index: 1; padding: 10px 12px 6px; font-size: 13px; font-weight: 600; color: var(--violet); background: var(--card-solid); border-bottom: 1px solid var(--line); }
/* การแจ้งเตือน: ไอคอนสีตามประเภท · ป้ายประเภท + เวลา · หัวข้อ · รายละเอียด */
.tone-ok { --tn: #86efac; --tn-bg: rgba(34, 197, 94, .13); }
.tone-danger { --tn: #fca5a5; --tn-bg: rgba(239, 68, 68, .14); }
.tone-warn { --tn: #fdba74; --tn-bg: rgba(251, 146, 60, .14); }
.tone-violet { --tn: #c4b5fd; --tn-bg: rgba(168, 85, 247, .16); }
.tone-lime { --tn: #d9f99d; --tn-bg: rgba(181, 242, 61, .13); }
.tone-sky { --tn: #7dd3fc; --tn-bg: rgba(56, 189, 248, .14); }
.tone-gold { --tn: #fcd34d; --tn-bg: rgba(252, 211, 77, .13); }
.tone-neutral { --tn: var(--muted); --tn-bg: rgba(255, 255, 255, .06); }
.nitem { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.nitem:last-child { border-bottom: 0; }
.nitem:hover { background: rgba(255, 255, 255, .02); }
.nic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--tn); background: var(--tn-bg); }
.nhead { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.ntag { font-style: normal; font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 99px; color: var(--tn); background: var(--tn-bg); }
.nhead time { color: var(--muted); font-size: 13px; margin-left: auto; font-variant-numeric: tabular-nums; }
.ntitle { display: block; font-weight: 600; word-break: break-word; }
.nrows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 6px 0 0; font-size: 14px; }
.nrows dt { color: var(--muted); }
.nrows dd { margin: 0; word-break: break-word; }
.nrows dd.full { grid-column: 1 / -1; color: var(--muted); }
@media (max-width: 640px) { .nitem { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; } .nic { width: 32px; height: 32px; border-radius: 10px; } }

/* ---------- หน้าออเดอร์: รอยืนยัน / สำเร็จ ---------- */
.waitbox, .waitbox + p { max-width: 560px; }
.waitbox { padding: 34px 22px; }
.waitbox p { margin: 6px 0; }
.spin { display: inline-block; width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(168, 85, 247, .25); border-top-color: var(--lime); animation: spin 0.9s linear infinite; margin-bottom: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.success { max-width: 600px; text-align: center; padding: 34px 26px; background: linear-gradient(160deg, rgba(181, 242, 61, .08), rgba(139, 92, 246, .12)); border-color: rgba(181, 242, 61, .35); }
.ok-badge { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(181, 242, 61, .14); color: var(--lime); box-shadow: 0 0 40px rgba(181, 242, 61, .35); animation: pop .35s ease-out; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; max-width: 420px; margin: 18px auto; text-align: left; padding: 16px 18px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; word-break: break-all; }
.center-row { justify-content: center; }

/* ---------- หน้าต่างสั่งซื้อ (popup คอม / แผ่นเลื่อนจากล่างบนมือถือ) ---------- */
dialog.sheet { width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line2); border-radius: 24px; background: #120d20; color: var(--text); box-shadow: 0 30px 90px rgba(0, 0, 0, .65), var(--glow); overflow: auto; }
dialog.sheet::backdrop { background: rgba(5, 3, 12, .72); backdrop-filter: blur(6px); }
dialog.sheet[open] { animation: pop .22s ease-out; }
.sheet-in { display: grid; gap: 14px; padding: 22px; }
.sheet-in label { display: grid; gap: 6px; font-weight: 500; }
.sheet-in label.check { display: flex; gap: 10px; font-weight: 400; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-head h2 { margin: 0; font-size: 22px; }
/* popup ยืนยัน (data-confirm) */
dialog.confirm { width: min(420px, calc(100% - 24px)); }
dialog.confirm h2 { margin: 0; font-size: 20px; }
dialog.confirm p { margin: 0; color: var(--muted); white-space: pre-line; }
dialog.confirm .btn.danger { background: #dc2626; color: #fff; box-shadow: none; }
dialog.confirm .btn.danger:hover { background: #ef4444; }
.x { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; cursor: pointer; }
.x:hover { background: rgba(255, 255, 255, .1); }
/* หน้าต่างยืนยันคำสั่งซื้อ: รูป · ชื่อเกม/ระยะเวลา · ราคา (มีโปร = ขีดฆ่า + ราคาแดง) เรียงแนวนอน */
.buy-sum { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.buy-sum img, .sum-ph { width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0; object-fit: cover; }
.sum-ph { display: grid; place-items: center; font-size: 34px; background: #1b1330; }
.buy-sum-name { display: grid; gap: 2px; text-align: left; }
.buy-sum-name b { font-size: 19px; line-height: 1.3; }
.buy-sum-name .muted { font-size: 13px; }
.buy-sum-price { display: grid; justify-items: end; gap: 2px; text-align: right; }
.buy-sum-price b { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--text); }
.buy-sum-price b.sale { color: #f87171; }
.buy-sum-price s { font-size: 13px; color: var(--muted); }
.buy-sum-price .ptag { font-size: 11px; padding: 2px 8px; }
@media (max-width: 420px) { .buy-sum { grid-template-columns: 52px minmax(0, 1fr); } .buy-sum img, .buy-sum .sum-ph { width: 52px; height: 52px; } .buy-sum-price { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; } }
.hint { margin: 0; line-height: 1.4; }
.link.inl { color: var(--violet); text-decoration: underline; font-size: inherit; }
.rbx-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(181, 242, 61, .06); border: 1px solid rgba(181, 242, 61, .35); }
.rbx-card img { width: 52px; height: 52px; border-radius: 12px; background: #1b1330; }
.rbx-card.bad { background: var(--err-bg); border-color: rgba(252, 165, 165, .35); color: var(--err); }
.rbx-card small { color: var(--muted); display: block; }
.paym { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paym legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.pm { position: relative; display: grid !important; justify-items: center; text-align: center; gap: 2px !important; padding: 16px 10px; border-radius: 16px; border: 1.5px solid var(--line2); background: rgba(0, 0, 0, .25); cursor: pointer; transition: border-color .15s, background .15s; }
.pm input { position: absolute; opacity: 0; pointer-events: none; }
.pm-i { font-size: 26px; }
.accepts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px dashed var(--line2); }
.accepts p { flex-basis: 100%; margin: 4px 0 0; }
.chipm { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 8px; background: rgba(255, 255, 255, .92); color: #1a1530; }
.pm small { color: var(--muted); font-weight: 400; font-size: 12px; }
.pm:has(input:checked) { border-color: var(--purple); background: rgba(168, 85, 247, .14); box-shadow: 0 0 0 3px rgba(168, 85, 247, .2); }
.pm:has(input:checked)::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--purple); color: #fff; }
.pm:has(input:focus-visible) { outline: 2px solid rgba(168, 85, 247, .7); outline-offset: 2px; }
.paybox { max-width: 560px; }
.help-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--muted); }
.help-steps b { color: var(--text); }
.help-shot { width: 100%; height: auto; display: block; border-radius: 20px; border: 1px solid var(--line2); box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.copy-how { padding: 14px 16px; border-radius: 16px; background: rgba(181, 242, 61, .06); border: 1px solid rgba(181, 242, 61, .3); }
.copy-how p { margin: 6px 0 0; color: var(--muted); }
.copy-how p b { color: var(--text); }
kbd { font: 600 12px ui-monospace, Consolas, monospace; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line2); border-bottom-width: 2px; background: rgba(255, 255, 255, .06); color: var(--text); }
.terms-sum { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); }
.terms-sum b { color: var(--text); }
.row.end { justify-content: flex-end; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 600px) {
  dialog.sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 92dvh; }
  dialog.sheet[open] { animation: up .25s ease-out; }
  .paym { grid-template-columns: 1fr; }
  .pm { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px !important; }
  .pm .pm-i { grid-row: span 2; }
}
@keyframes up { from { transform: translateY(40%); opacity: .4; } }

/* ---------- เมนูโปรไฟล์ ---------- */
.menu { position: relative; }
.menu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .av > img { display: block; border-radius: 50%; box-shadow: 0 0 0 2px rgba(168, 85, 247, .6); }
/* หน้า /nextstep */
.ns-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.ns-hero img, .ns-mark { width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0; object-fit: contain; background: #fff; }
.ns-mark { display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #0b0814; }
.ns-hero h2 { margin: 0; }
.ns-hero p { margin: 2px 0 0; }
.ns-steps { display: grid; gap: 12px; max-width: 560px; }
.ns-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
/* โลโก้สังกัด (NextStep) ติดมุมขวาล่างของรูปโปรไฟล์ */
.av { position: relative; display: inline-block; flex-shrink: 0; }
.ns-badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 99px; background: #fff; color: #0b0814; font-size: 9px; font-weight: 800; box-shadow: 0 0 0 2px var(--bg); }
.ns-badge img { width: 13px; height: 13px; border-radius: 50%; object-fit: contain; }
.ns-badge.logo { right: -5px; bottom: -5px; min-width: 0; width: 18px; height: 18px; padding: 0; border-radius: 6px; background: #161616; overflow: hidden; }
.ns-badge.logo img { width: 18px; height: 18px; border-radius: 0; object-fit: cover; }
.caret { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); }
.menu[open] summary { border-color: var(--line2); }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; display: grid; padding: 8px; border-radius: 16px; background: var(--card-solid); border: 1px solid var(--line2); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); z-index: 40; }
.menu-pop a, .menu-pop .link { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--text); font-size: 15px; text-align: left; width: 100%; }
.menu-pop a:hover, .menu-pop .link:hover { background: rgba(168, 85, 247, .16); }
.menu-pop form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.menu-pop .link { color: var(--muted); }
@media (max-width: 920px) { .menu-pop { position: static; margin-top: 8px; box-shadow: none; } .menu { width: 100%; } }

/* ---------- หลังบ้าน (ตัวแทน / แอดมิน) ---------- */
.area { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 3px 10px; border-radius: 99px; background: rgba(181, 242, 61, .14); color: var(--lime); border: 1px solid rgba(181, 242, 61, .35); }
.admin .area { background: rgba(124, 140, 255, .16); color: #c7d0ff; border-color: rgba(124, 140, 255, .45); }
.storelink { margin-left: 4px; }
body.back .me { display: flex; }
.shell { max-width: 1280px; margin: 0 auto; padding: 18px 18px 56px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; }
.side { position: sticky; top: 84px; display: grid; gap: 4px; padding: 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.side a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; text-decoration: none; color: var(--muted); font-weight: 500; transition: background .15s, color .15s; }
.side a span { width: 22px; text-align: center; }
.side a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.side a.on { color: var(--text); background: rgba(168, 85, 247, .22); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .45); }
.panel { min-width: 0; max-width: none; margin: 0; padding: 0; }
.panel h1 { margin-top: 0; }
.panel h2 { font-size: 20px; margin: 28px 0 12px; }
.back footer { margin-top: 0; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; gap: 14px; padding-top: 6px; }
  .side { position: static; display: flex; overflow-x: auto; padding: 6px; }
  .side a { white-space: nowrap; padding: 9px 12px; }
  body.back .top-in { flex-wrap: nowrap; } /* เฉพาะหลังบ้าน · หน้าร้านต้องตัดบรรทัดได้ (เมนู ☰ บนมือถือ) */
  body.back .me { display: flex; flex: 0 0 auto; margin-left: auto; }
  body.back .uname, body.back .storelink { display: none; }
  body.back .menu { width: auto; }
  body.back .menu-pop { position: absolute; }
}
.stats > div { display: flex; flex-direction: column; gap: 2px; }
.stats b.code { font-size: clamp(20px, 2.6vw, 28px); word-break: break-all; }
.mini-link { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--violet); text-decoration: none; }
.mini-link:hover { color: var(--lime); }
.acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.act { display: grid; gap: 4px; align-content: start; padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .2s, box-shadow .2s; }
.act:hover { transform: translateY(-3px); border-color: rgba(168, 85, 247, .6); box-shadow: var(--glow); }
.act-i { font-size: 28px; line-height: 1.2; }
.act b { font-size: 17px; }
.act small { color: var(--muted); }
.act.hot { background: linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(181, 242, 61, .06)); border-color: var(--line2); }

/* ---------- ตารางแบบหน้า Payments (รายการขาย / คีย์) ---------- */
/* สีประจำประเภท: ขายหน้าร้าน = ม่วง · เติมเครดิต = ฟ้า · ขายคีย์ตัวแทน = เหลืองมะนาว · รอให้สิทธิ์ = ส้ม */
.ty-order { --ty: #c4b5fd; --ty-bg: rgba(168, 85, 247, .16); }
.ty-topup { --ty: #7dd3fc; --ty-bg: rgba(56, 189, 248, .14); }
.ty-keys { --ty: #d9f99d; --ty-bg: rgba(181, 242, 61, .12); }
.ty-wait { --ty: #fdba74; --ty-bg: rgba(251, 146, 60, .12); }
.ty { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ty); background: var(--ty-bg); white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--ty); vertical-align: 1px; }
.chip-btn .n { display: inline-block; min-width: 22px; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: 12px; text-align: center; }
.chip-btn.sm { font-size: 13px; padding: 4px 11px; }
.chips.sub { margin-top: -4px; }
.sums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.sum { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--ty); color: var(--text); text-decoration: none; }
.sum span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.sum span .ic { color: var(--ty); }
.sum b { font-size: 26px; font-weight: 800; line-height: 1.3; }
.sum small { color: var(--muted); font-size: 13px; }
a.sum:hover { border-color: var(--ty); }
table.sales, table.batches, table.keys { display: table; }
table.sales thead th, table.batches thead th, table.keys thead th { background: rgba(255, 255, 255, .03); text-transform: none; letter-spacing: .01em; }
table.sales tbody tr:hover td, table.batches tbody tr:hover td, table.keys tbody tr:hover td { background: rgba(168, 85, 247, .06); }
table.sales tr:last-child td, table.batches tr:last-child td, table.keys tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
td.num b { font-size: 16px; font-variant-numeric: tabular-nums; }
td.num small { margin-left: 5px; color: var(--muted); font-size: 11px; }
td.what { white-space: normal; min-width: 180px; }
table.sales th, table.sales td { padding: 11px 10px; }
table.sales th:first-child, table.sales td:first-child { padding-left: 16px; }
td.what small, td.ref small { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
td.when { color: var(--muted); font-size: 14px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
td.ref .mono { color: var(--muted); }
code.dim, .dim { color: var(--muted); opacity: .75; }
code.dim { font-size: 11.5px; }
small.block { display: block; }
/* วิธีจ่าย */
.pay { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.pay .ic { padding: 3px; border-radius: 6px; box-sizing: content-box; }
.pay-pp .ic { color: #5eead4; background: rgba(45, 212, 191, .14); }
.pay-cd .ic { color: #a5b4fc; background: rgba(129, 140, 248, .16); }
.pay-sl .ic { color: #fcd34d; background: rgba(252, 211, 77, .12); }
.pay-cr .ic { color: #d9f99d; background: rgba(181, 242, 61, .12); }
.pay-ad .ic { color: var(--muted); background: rgba(255, 255, 255, .06); }
/* สถานะคีย์: ยังไม่ใช้ = เขียว (ส่งได้) · ใช้แล้ว = ม่วง · ยกเลิก = แดง */
.ks { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid; }
.ks::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ks-unused { color: #86efac; background: rgba(34, 197, 94, .12); border-color: rgba(134, 239, 172, .35); }
.ks-used { color: #c4b5fd; background: rgba(168, 85, 247, .12); border-color: rgba(196, 181, 253, .3); }
.ks-revoked { color: #fca5a5; background: rgba(239, 68, 68, .12); border-color: rgba(252, 165, 165, .3); }
.legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.legend-row small { color: var(--muted); margin-right: 10px; }
table.keys tr.k-used td, table.keys tr.k-revoked td { color: var(--muted); }
table.keys tr.k-used code.key, table.keys tr.k-revoked code.key { opacity: .55; }
table.keys tr.k-revoked code.key { text-decoration: line-through; }
code.key { font-size: 14px; letter-spacing: .04em; }
table.batches tr.done td { color: var(--muted); }
.usage { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.usage small { color: var(--muted); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- ถอนค่าคอม (ตัวแทน) / รอบโอน (แอดมิน) ---------- */
.withdraw { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(167, 139, 250, .08); border: 1px solid var(--line2); }
.withdraw > div:first-child { display: grid; }
.withdraw > div:first-child span { color: var(--muted); font-size: 13px; }
.withdraw > div:first-child b { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; }
.withdraw-go { display: grid; justify-items: center; gap: 4px; }
.withdraw-go small { color: var(--muted); font-size: 12px; }
.pay-round { display: grid; gap: 6px; }
.pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pay-i { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(110px, auto) minmax(180px, 1.2fr); gap: 10px 16px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.pay-who { display: grid; gap: 2px; min-width: 0; }
.pay-who a { color: var(--text); }
.pay-who code { justify-self: start; font-size: 12px; color: var(--violet); }
.pay-who small { color: var(--muted); font-size: 12px; }
.pay-amt { display: grid; justify-items: start; }
.pay-amt b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pay-acct { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.pay-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pay-done, .pay-reject { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.pay-done input[name=reference], .pay-reject input { width: 190px; padding: 7px 11px; font-size: 14px; }
.pay-done p { flex-basis: 100%; margin: 0; }
.pay-reject { margin-left: auto; }
.pay-file { display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px dashed var(--line2); color: var(--muted); font-size: 13px; font-weight: 400 !important; cursor: pointer; max-width: 220px; }
.pay-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pay-file.has { color: var(--ok); border-color: rgba(134, 239, 172, .45); border-style: solid; }
.pay-qr { width: 240px; height: 240px; margin: 4px auto; border-radius: 14px; background: #fff; padding: 8px; }
.pay-qr.photo { width: auto; height: auto; max-width: min(320px, 100%); max-height: 60vh; object-fit: contain; padding: 0; background: none; }
.qr-check { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 12px; border-radius: 12px; background: rgba(251, 146, 60, .08); border: 1px solid rgba(253, 186, 116, .3); }
.qr-check p { margin: 0; }
/* แนบ QR รับเงิน (บัญชีธนาคาร) */
.qrup { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px dashed var(--line2); }
.qrup .legend { margin: 0; }
.qr-cur { display: flex; align-items: center; gap: 12px; }
.qr-cur img, .qr-prev { width: 120px; height: auto; max-height: 200px; object-fit: contain; border-radius: 10px; background: #fff; }
.qr-prev { width: 160px; }
@media (max-width: 760px) { .pay-i { grid-template-columns: 1fr; } .pay-reject { margin-left: 0; } }

/* ---------- ปิดตาข้อมูลลูกค้า (ต้องปลดล็อกถึงเห็นเต็ม) ---------- */
.revealbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin: 0; border-radius: 14px; background: rgba(252, 211, 77, .07); border: 1px solid rgba(252, 211, 77, .28); }
.revealbar > span { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-size: 14px; margin-right: auto; }
.revealbar input[name=code] { width: 140px; padding: 7px 11px; letter-spacing: .15em; text-align: center; }

/* ---------- ลูกค้า (แอดมิน) ---------- */
.cust-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cust-filter input[name=q] { flex: 1; min-width: 220px; }
table.custs td.exp { white-space: nowrap; }
table.custs td.exp .days { margin-left: 8px; }
table.custs td.when small { display: block; color: var(--muted); font-size: 12px; }

/* ---------- แดชบอร์ด (แอดมิน / ตัวแทน) ---------- */
/* ชุดสีข้อมูลโทนเดียวกัน (ความสว่างเท่ากัน ไม่ใช้ gradient) ใช้กับกราฟ หลอด แท่ง จุดสีเกม · ราง = เทาโปร่ง */
:root { --d1: #a78bfa; --d2: #818cf8; --d3: #60a5fa; --d4: #c084fc; --trk: rgba(255, 255, 255, .07); }
svg .d1, .hbar .d1 { fill: var(--d1); } svg .d2, .hbar .d2 { fill: var(--d2); } svg .d3, .hbar .d3 { fill: var(--d3); } svg .d4, .hbar .d4 { fill: var(--d4); }
svg .trk { fill: var(--trk); }
i.d1, .gdot.d1 { background: var(--d1); } i.d2, .gdot.d2 { background: var(--d2); } i.d3, .gdot.d3 { background: var(--d3); } i.d4, .gdot.d4 { background: var(--d4); }
svg .line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
svg .d1.line { stroke: var(--d1); } svg .d3.line { stroke: var(--d3); }
svg .area { opacity: .16; }
svg .d1-s { stroke: var(--d1); } svg .trk-s { stroke: var(--trk); }
.chart { display: block; width: 100%; height: auto; }
.chart text { fill: var(--muted); font: 11px Prompt, system-ui, sans-serif; }
.chart text.val { fill: var(--text); font-weight: 600; }
.chart text.big { fill: var(--text); font-size: 34px; font-weight: 800; }
.chart text.empty { font-size: 14px; }
.chart .grid { stroke: rgba(196, 160, 255, .12); }
.chart .dot { stroke: var(--bg); stroke-width: 2; }
.gauge line { stroke-width: 5; stroke-linecap: round; }
.spark { display: block; width: 100%; height: 34px; margin-top: 8px; }
.hbar { display: block; flex: 1; min-width: 80px; }
.seg { display: flex; gap: 3px; flex: 1; min-width: 110px; }
.seg i { flex: 1; height: 12px; border-radius: 3px; background: var(--trk); }
.seg i.on { background: var(--d1); }
.dash { display: grid; gap: 18px; }
.dash h2 { margin: 0 0 2px; font-size: 17px; }
.dash .sub { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rangepick { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.rangepick a { padding: 5px 13px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 13px; }
.rangepick a.on { color: var(--text); background: rgba(168, 85, 247, .25); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { display: grid; gap: 2px; align-content: start; padding: 16px 18px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.kpi > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.kpi > span .ic { color: var(--d1); }
.kpi > b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.35; }
.kpi > small { color: var(--muted); font-size: 12.5px; }
.kpi .mini-link { padding-top: 8px; }
.delta { justify-self: start; font-style: normal; font-size: 12px; font-weight: 600; padding: 0 8px; border-radius: 99px; }
.delta.up { color: var(--ok); background: rgba(34, 197, 94, .13); } .delta.down { color: var(--err); background: rgba(239, 68, 68, .14); } .delta.flat { color: var(--muted); background: rgba(255, 255, 255, .06); }
.dgrid2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; }
.dgrid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dcard { min-width: 0; padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.dcard-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; }
.dcard-head > div { min-width: 0; flex: 1; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.srcs { display: grid; gap: 12px; }
.src > div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 5px; }
.src b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo-i { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
a.todo-i:hover { border-color: var(--line2); }
.todo-i b { display: block; font-size: 14px; }
.todo-i small { display: block; color: var(--muted); font-size: 12px; }
.todo-i em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gdot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 9px; vertical-align: 0; }
table.best td.num, table.best th.num { text-align: right; }
.round { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; color: var(--tn); background: var(--tn-bg); border: 1px solid rgba(252, 211, 77, .25); }
.round > span { display: grid; color: var(--text); font-size: 14px; }
.round b { color: var(--tn); }
.round small { color: var(--muted); font-size: 12px; }
.tiers { display: grid; }
.tier { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tier:first-child { padding-top: 0; }
.tier:last-child { border-bottom: 0; padding-bottom: 0; }
.tier-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.tier-top b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier-top b small { color: var(--muted); font-weight: 400; }
.tier > small { color: var(--muted); font-size: 12px; }
.tier > small em { font-style: normal; color: var(--ok); }
.cust { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cust li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.cust li b { display: block; font-size: 14px; }
.cust li small { color: var(--muted); font-size: 12px; }
.cust-r { display: grid; justify-items: end; gap: 4px; }
.days { font-style: normal; font-size: 12px; font-weight: 700; padding: 0 9px; border-radius: 99px; color: var(--muted); background: rgba(255, 255, 255, .06); white-space: nowrap; }
.days.hot { color: var(--err); background: rgba(239, 68, 68, .14); } .days.warm { color: var(--warn); background: rgba(251, 146, 60, .14); }
/* เครือข่ายตัวแทน (static/app.js วาด) */
.netw-top { display: flex; align-items: start; gap: 10px; }
.netw-top .sub { flex: 1; }
.netw-btns { display: grid; gap: 4px; }
.nb { font: inherit; font-size: 11px; width: 30px; height: 26px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); color: var(--violet); cursor: pointer; }
.nb:hover { color: var(--text); border-color: var(--purple); }
.netw-svg { cursor: grab; touch-action: none; user-select: none; }
.netw-svg.drag { cursor: grabbing; }
.netw-svg:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 12px; }
.netw-svg text { fill: var(--text); font-size: 12px; }
.netw-svg text.m { fill: var(--muted); font-size: 11px; }
.netw-svg text.sel { font-size: 14px; font-weight: 700; }
.netw-svg .hub-ring { fill: none; stroke: rgba(167, 139, 250, .3); }
.netw-svg .edge { fill: none; stroke: var(--d1); }
.netw-svg .flow { fill: none; stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 4 8; opacity: .35; animation: flow 2.4s linear infinite; }
.netw-svg g.item { cursor: pointer; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.netw-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.netw-card .who { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.netw-card .who a { color: var(--text); }
.netw-card .who code { font-size: 12px; color: var(--violet); }
.netw-card .who span { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.netw-card .m { padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.netw-card .m small { display: block; color: var(--muted); font-size: 11px; }
.netw-card .m b { font-variant-numeric: tabular-nums; }
@media (max-width: 1060px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dgrid2, .dgrid3 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kpis { grid-template-columns: 1fr; } .netw-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .netw-svg .flow { animation: none; } }
.keysum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 16px; }
.keysum > div, .keysum-cta { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.keysum span { color: var(--muted); font-size: 13px; }
.keysum b { font-size: 22px; font-weight: 800; line-height: 1.35; }
.keysum small { color: var(--muted); font-size: 13px; }
.keysum .ks-box-unused { border-color: rgba(134, 239, 172, .4); background: rgba(34, 197, 94, .07); }
.keysum .ks-box-unused b { color: #86efac; }
.keysum .ks-box-used b { color: #c4b5fd; }
.keysum-cta { color: var(--text); text-decoration: none; background: linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(181, 242, 61, .06)); border-color: var(--line2); }
.keysum-cta .ic { color: var(--lime); }
.keysum-cta:hover { box-shadow: var(--glow); }
.sendhow ol { margin: 8px 0 6px; padding-left: 22px; }
.sendhow b .ic { color: var(--violet); margin-right: 6px; vertical-align: -3px; }
.affsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.affsum > div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.affsum span { display: block; color: var(--muted); font-size: 12.5px; }
.affsum b { font-size: 20px; }
.affsum .hl { border-color: rgba(134, 239, 172, .35); }
.affsum .hl b { color: #86efac; }
@media (max-width: 860px) { .sums, .keysum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .affsum { grid-template-columns: 1fr; } }

/* ---------- ท้ายเว็บ ---------- */
footer { border-top: 1px solid var(--line); margin-top: 40px; background: rgba(0, 0, 0, .25); }
.foot-in { max-width: 1180px; margin: 0 auto; padding: 34px 18px 10px; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-in p { margin: 10px 0 0; font-size: 14px; }
.foot-links { display: flex; flex-direction: column; gap: 8px; }
.foot-links b { font-size: 14px; color: var(--text); }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot-links a:hover { color: var(--lime); }
.copy { max-width: 1180px; margin: 0 auto; padding: 14px 18px 28px; color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-in > div:first-child { grid-column: 1 / -1; } }

/* ---------- ลูกเล่น ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.steps li.reveal:nth-child(2), .ggrid .reveal:nth-child(2) { transition-delay: .08s; }
.steps li.reveal:nth-child(3), .ggrid .reveal:nth-child(3) { transition-delay: .16s; }
.steps li.reveal:nth-child(4), .ggrid .reveal:nth-child(4) { transition-delay: .24s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
@keyframes pulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- หลังการขาย: เกมของฉัน · คู่มือ · ไฟล์ดาวน์โหลด ---------- */
.tbl-wrap { overflow-x: auto; }
.link.danger { color: var(--err); display: inline-flex; align-items: center; gap: 4px; }
.mygames { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; }
.mygame { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--card-solid); border: 1px solid var(--line); }
.mg-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.mg-body b { font-size: 17px; }
.mg-exp { font-size: 13px; color: var(--muted); }
.mg-exp.soon { color: #fbbf24; }
.mg-body .row { flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mg-head { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 8px; }
.mg-head .art { border-radius: var(--radius); border: 1px solid var(--line); }
.mg-head .row { flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) { .mg-head { grid-template-columns: 1fr; } }
.box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.box h3 .ic { color: var(--d1); }
ol.guide-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; }
ol.guide-steps li { counter-increment: st; position: relative; padding-left: 40px; min-height: 26px; line-height: 1.6; }
ol.guide-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(167, 139, 250, .16); color: var(--d1); font-weight: 700; font-size: 13px; }
table.gifts { display: table; }
table.gifts td { vertical-align: middle; }
.gift-cell { display: inline-flex; align-items: center; gap: 10px; }
.gift-cell img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.gift-ph { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .04); color: var(--muted); }
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dl-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.dl-list li > .ic { color: var(--d1); }
.dl-list li span { display: grid; min-width: 0; }
.dl-list li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.dl-gallery figure { margin: 0; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.dl-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #0f0a1c; }
.dl-gallery figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; font-size: 12px; color: var(--muted); }
.dl-gallery figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-gallery figcaption a { color: var(--d1); display: inline-flex; }
.upl { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--line2); border-radius: 14px; cursor: pointer; color: var(--d1); }
.upl:hover { background: rgba(167, 139, 250, .06); }
.upl span { display: grid; gap: 2px; color: var(--text); }
.upl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upl:focus-within { outline: 2px solid var(--d1); outline-offset: 2px; }
.upl-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.upl-list:empty { display: none; }
.upl-list li { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: 10px; align-items: center; font-size: 14px; }
.upl-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upl-list progress { width: 100%; height: 8px; accent-color: var(--d1); }
.upl-list li.ok small { color: var(--ok, #86efac); }
.upl-list li.err small { color: var(--err); }
.video.narrow { max-width: 760px; margin: 12px 0; }
textarea { font: inherit; line-height: 1.6; padding: 11px 14px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(0, 0, 0, .35); color: var(--text); min-width: 0; width: 100%; resize: vertical; }
textarea:focus { outline: 2px solid rgba(168, 85, 247, .6); outline-offset: 1px; }
.form:has(textarea) { max-width: 760px; }

/* ---------- ตั้งค่าเกม: ป้ายโปร · ราคาลด · หมวด · พาร์ทเนอร์ ---------- */
.st-test { color: var(--violet); }
.ptags { display: flex; flex-wrap: wrap; gap: 6px; }
.gcover .ptags { position: absolute; top: 12px; left: 12px; right: 96px; }
.aside-tags, .buy > .ptags { margin: 14px 0 -6px; }
.ptag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(12, 8, 22, .78); color: #fff; border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); white-space: nowrap; }
.ptag.sale { background: #dc2626; border-color: #ef4444; box-shadow: 0 4px 16px rgba(220, 38, 38, .45); }
.ptag.hot { background: #ea580c; border-color: #fb923c; box-shadow: 0 4px 16px rgba(234, 88, 12, .4); }
.price.sale { display: inline-flex; align-items: baseline; gap: 8px; color: #f87171; }
.price.sale s { font-size: .62em; font-weight: 600; color: var(--muted); text-decoration-thickness: 2px; }
.gprice { display: inline-flex; align-items: baseline; gap: 4px; }
.gprice small { font-size: 13px; color: var(--muted); }
.gcard.on-sale { border-color: rgba(239, 68, 68, .35); }
.gcat { align-self: flex-start; justify-self: start; display: inline-block; margin-top: 10px; font-size: 12px; padding: 2px 10px; border-radius: 99px; background: rgba(167, 139, 250, .12); color: var(--violet); border: 1px solid rgba(167, 139, 250, .25); }
.sale-note { display: flex; align-items: center; gap: 6px; margin: -6px 0 14px; font-size: 14px; color: #fca5a5; }
.box.partner .legend { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.partner-in { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.partner-in img, .partner-ph { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.partner-ph { display: grid; place-items: center; color: var(--muted); }
.partner-in p { margin: 4px 0 0; }
@media (max-width: 560px) { .partner-in { grid-template-columns: 56px minmax(0, 1fr); } .partner-in .btn { grid-column: 1 / -1; } }

/* หลังบ้าน → ตั้งค่าเกม */
.gset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gset-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--card-solid); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s; }
.gset-card:hover { border-color: var(--line2); transform: translateY(-3px); }
.gset-card .art { aspect-ratio: 16 / 7; }
.gset-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.gset-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gset-top .st { font-size: 13px; }
.gset-body .price { font-size: 19px; }
.gset-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.gset-meta span { display: inline-flex; align-items: center; gap: 5px; }
.gset-common { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; color: var(--text); text-decoration: none; margin-top: 16px; }
.gset-common > .ic { color: var(--d1); }
.gset-common span { display: grid; gap: 2px; }
.form.wide { max-width: 860px; }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.form.locked fieldset { opacity: .55; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.status-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .status-pick { grid-template-columns: 1fr; } }
.status-opt { display: grid; gap: 6px; text-align: left; font: inherit; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line2); background: rgba(0, 0, 0, .25); color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s; }
.status-opt:hover { border-color: rgba(168, 85, 247, .6); }
.status-opt.on { border-color: rgba(168, 85, 247, .8); background: rgba(168, 85, 247, .12); cursor: default; }
.status-opt small { font-size: 13px; line-height: 1.5; }
.badge-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0; }
.badge-pick legend { padding: 0 6px; font-weight: 500; }
.check-chip { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; font-weight: 400 !important; }
.check-chip input { accent-color: var(--purple); width: 16px; height: 16px; margin: 0; }
.badge-pick .badge-text { display: flex !important; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; }
.badge-pick .badge-text input { width: 170px; padding: 7px 12px; }
.sale-box { display: grid; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(248, 113, 113, .4); background: rgba(220, 38, 38, .05); }
.sale-box .legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; color: #fca5a5; }
.lockbox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); }
.lockbox > .ic { color: var(--warn); }
.lockbox form { margin-left: auto; gap: 8px; }
.lockbox input { width: 130px; padding: 8px 12px; }
.pnow { margin: 0; font-size: 22px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pnow s { font-size: 15px; color: var(--muted); }
.pnow .sale { color: #f87171; }
table.tiers { font-size: 14px; }
table.tiers th, table.tiers td { padding: 6px 12px; }
.pcards:has(.pcard:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pcards:has(.pcard:nth-child(3)) { grid-template-columns: 1fr; } }
.partner-edit { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 640px) { .partner-edit { grid-template-columns: 1fr; } }
.logo-pick { display: grid; justify-items: center; gap: 10px; }
.logo-pick img, .logo-pick .partner-ph { width: 88px; height: 88px; border-radius: 20px; object-fit: cover; }
.grow-fields { display: grid; gap: 14px; min-width: 0; }
table.share .due { color: var(--lime); }
.status-opt:disabled { opacity: 1; color: var(--text); }
.status-opt.on small { color: var(--muted); }
.lockbox { width: 100%; box-sizing: border-box; }
.logo-pick label.btn { display: inline-flex; grid-template-columns: none; gap: 6px; font-weight: 600; }
.ns-hero { padding: 20px 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); border-left: 3px solid #e11d48; }
.ns-hero img, .ns-mark { width: 72px; height: 72px; background: #161616; border: 1px solid rgba(255, 255, 255, .12); }
.ns-mark { color: #fff; }
.ns-perks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ns-perks span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 11px; border-radius: 99px; background: rgba(225, 29, 72, .1); border: 1px solid rgba(225, 29, 72, .35); color: #fecdd3; }
.ns-note { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; }
.ns-steps { max-width: 620px; }
.ns-steps ol.guide-steps { padding-left: 0; gap: 10px; }
.join-box { max-width: 760px; }

/* ---------- ตั้งค่าเกม: ความกว้างเท่ากันทุกกล่อง + เอฟเฟกต์ให้เหมือนส่วนอื่นของเว็บ ---------- */
.gset-page > .box, .gset-page > form.box, .gset-page > .pcards, .gset-page > .unlockbar { width: 100%; max-width: none; box-sizing: border-box; }
.gset-page .form.wide { max-width: none; }
.gset-page .box { transition: border-color .25s, box-shadow .25s; }
.gset-page .box:hover, .gset-page .box:focus-within { border-color: var(--line2); }
.gset-page .box:focus-within { box-shadow: 0 0 0 1px rgba(168, 85, 247, .25), 0 12px 40px rgba(168, 85, 247, .12); }
.gset-page .box h3 { font-size: 17px; }
.gset-page .tabs a { transition: color .2s, background .2s, box-shadow .2s; }
.gset-page .tabs a.on { background: rgba(168, 85, 247, .18); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .55), 0 6px 22px rgba(168, 85, 247, .25); }
.gset-page .tabs a.on .ic { color: var(--violet); }
.gset-page input, .gset-page textarea, .gset-page select { transition: border-color .2s, box-shadow .2s, background .2s; }
.gset-page input:hover, .gset-page textarea:hover, .gset-page select:hover { border-color: rgba(168, 85, 247, .45); }
.gset-page input:focus, .gset-page textarea:focus, .gset-page select:focus { outline: 0; border-color: rgba(168, 85, 247, .8); box-shadow: 0 0 0 3px rgba(168, 85, 247, .2); background: rgba(0, 0, 0, .45); }
/* ปุ่มเลือกสถานะ: ยกขึ้นตอนชี้ · ตัวที่เลือกเรืองแสงตามสีสถานะ */
.status-opt { position: relative; transition: transform .18s, border-color .2s, box-shadow .25s, background .2s; }
.status-opt:not(:disabled):hover { transform: translateY(-3px); box-shadow: var(--glow); }
.status-opt.on:has(.st-fulfilled) { border-color: rgba(134, 239, 172, .7); background: rgba(34, 197, 94, .08); box-shadow: 0 0 0 1px rgba(134, 239, 172, .35), 0 10px 34px rgba(34, 197, 94, .18); }
.status-opt.on:has(.st-test) { border-color: rgba(196, 181, 253, .75); background: rgba(168, 85, 247, .1); box-shadow: var(--glow); }
.status-opt.on:has(.st-pending) { border-color: rgba(253, 186, 116, .7); background: rgba(251, 146, 60, .08); box-shadow: 0 0 0 1px rgba(253, 186, 116, .35), 0 10px 34px rgba(251, 146, 60, .18); }
.status-opt.on::after { content: "✓ ใช้อยู่"; position: absolute; top: 12px; right: 14px; font-size: 12px; font-weight: 700; color: var(--text); opacity: .8; }
/* ป้ายที่เลือก: ทั้งชิปสว่างขึ้น */
.check-chip { padding: 4px 6px 4px 8px; border-radius: 99px; border: 1px solid transparent; transition: border-color .2s, background .2s, transform .15s; }
.check-chip:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .04); }
.check-chip:has(input:checked) { border-color: rgba(168, 85, 247, .55); background: rgba(168, 85, 247, .12); }
.check-chip:not(:has(input:checked)) .ptag { opacity: .55; }
/* ตัวอย่างราคาโปร */
.sale-preview { margin: 0; min-height: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.sale-preview s { color: var(--muted); }
.sale-preview b { color: #f87171; font-size: 18px; }
.sale-preview.bad { color: var(--err); }
.lockbox { border-color: rgba(252, 211, 77, .3); background: rgba(252, 211, 77, .04); }
/* การ์ดเกมหลังบ้าน / เกมของฉัน / ไฟล์: ยกขึ้น + เรืองแสงแบบการ์ดหน้าร้าน */
.gset-card, .mygame { transition: transform .2s, box-shadow .25s, border-color .2s; }
.gset-card:hover, .mygame:hover { transform: translateY(-5px); border-color: rgba(168, 85, 247, .6); box-shadow: var(--glow); }
.gset-card .art img, .mygame .art img { transition: transform .5s; }
.gset-card:hover .art img, .mygame:hover .art img { transform: scale(1.05); }
.gset-common { transition: border-color .2s, box-shadow .25s, transform .2s; }
.gset-common:hover { transform: translateY(-2px); border-color: rgba(168, 85, 247, .6); box-shadow: var(--glow); }
.dl-list li { transition: border-color .2s, background .2s; }
.dl-list li:hover { border-color: var(--line2); background: rgba(168, 85, 247, .06); }
.dl-gallery figure { transition: transform .2s, border-color .2s; }
.dl-gallery figure:hover { transform: translateY(-3px); border-color: rgba(168, 85, 247, .55); }
/* ป้ายโปร: 🔥 มาแรง กะพริบเบา ๆ · ลดราคา มีแสงวิ่งผ่าน */
.ptag.hot { animation: flame 1.8s ease-in-out infinite; }
@keyframes flame { 0%, 100% { box-shadow: 0 4px 14px rgba(234, 88, 12, .35); } 50% { box-shadow: 0 4px 22px rgba(251, 146, 60, .75); } }
.ptag.sale { position: relative; overflow: hidden; }
.ptag.sale::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: shine 2.6s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(120%); } }
.gcard.on-sale:hover { border-color: rgba(239, 68, 68, .7); box-shadow: 0 0 0 1px rgba(239, 68, 68, .4), 0 10px 40px rgba(239, 68, 68, .28); }
@media (prefers-reduced-motion: reduce) { .ptag.hot, .ptag.sale::after { animation: none; } }
.status-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .status-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .status-pick { grid-template-columns: 1fr; } }
.status-opt .st .ic { margin-right: -2px; }
.status-opt.on:has(.st-cancelled) { border-color: rgba(252, 165, 165, .7); background: rgba(239, 68, 68, .08); box-shadow: 0 0 0 1px rgba(252, 165, 165, .35), 0 10px 34px rgba(239, 68, 68, .2); }
.badge.hidden { gap: 5px; background: rgba(127, 29, 29, .85); color: #fecaca; border: 1px solid rgba(252, 165, 165, .5); }
.langsw { display: inline-flex; gap: 2px; padding: 3px; margin-right: 10px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); vertical-align: middle; }
.langsw a { padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-decoration: none; transition: color .2s, background .2s; }
.langsw a:hover { color: var(--text); }
.langsw a.on { color: var(--text); background: rgba(168, 85, 247, .28); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .55); }
.me { align-items: center; } /* ไม่ตั้ง display ที่นี่ ไม่งั้นทับกฎซ่อนเมนูบนมือถือ (.me อยู่ในเมนู ☰) */
.en-fields { display: grid; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line2); background: rgba(96, 165, 250, .04); }
.en-fields summary { cursor: pointer; font-weight: 600; color: var(--d3); }
.en-fields[open] summary { margin-bottom: 4px; }
.paytimer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 14px; border-radius: 14px; background: rgba(168, 85, 247, .08); border: 1px solid rgba(168, 85, 247, .35); color: var(--muted); }
.paytimer .ic { color: var(--violet); }
.paytimer b { margin-left: auto; font: 700 22px/1 ui-monospace, Consolas, monospace; color: var(--text); letter-spacing: .04em; }
.paytimer.soon { background: rgba(239, 68, 68, .08); border-color: rgba(248, 113, 113, .5); }
.paytimer.soon b { color: #f87171; }
.stats b.neg { color: #f87171; }

/* การ์ดเกม: ชี้เมาส์ = แสงวาบผ่านรูปปก · เกมที่ลดราคา = วาบเองเป็นจังหวะพร้อมป้าย "ลด X%" (keyframes shine เดียวกัน) */
.gcard .art { position: relative; }
.gcard .art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); }
.gcard:hover .art::after { animation: shine 1.1s ease-out 1; }
.gcard.on-sale .art::after { animation: shine 2.6s ease-in-out infinite; }
.gcard.on-sale:hover .art::after { animation: shine 1.1s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .gcard .art::after { animation: none !important; } }
/* การ์ด "ใช้บัญชีเดิม" (หน้าใช้คีย์): รูปตัวละคร Roblox + ชื่อ + TikTok */
.acct-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(134, 239, 172, .35); }
.acct-card img, .acct-ph { width: 64px; height: 64px; border-radius: 14px; background: #1b1330; object-fit: cover; }
.acct-ph { display: grid; place-items: center; color: var(--violet); }
.acct-card > div { display: grid; gap: 1px; min-width: 0; }
.acct-card small { font-size: 12px; color: var(--muted); }
.acct-card b { font-size: 18px; overflow: hidden; text-overflow: ellipsis; }
.acct-card .muted { font-size: 13px; }
.acct-ok { color: #86efac; }

/* Lexacy-Live: ช่องโปรแกรมไลฟ์ของร้าน (ยังเป็นความลับ · เร็ว ๆ นี้) */
.live-teaser { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: stretch; margin: 6px 0 22px; border-radius: var(--radius); overflow: hidden; background: var(--card-solid); border: 1px solid var(--line2); }
.live-teaser .lt-art { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(168, 85, 247, .45), transparent 60%), #120c22; }
.live-teaser .lt-art .ic { width: 64px; height: 64px; color: #fff; filter: blur(.4px) drop-shadow(0 0 18px rgba(168, 85, 247, .9)); }
.live-teaser .lt-art::after { content: "?"; position: absolute; right: 22px; top: 14px; font-size: 34px; font-weight: 800; color: rgba(255, 255, 255, .25); }
.live-teaser .lt-body { display: grid; gap: 8px; align-content: center; padding: 20px 22px; }
.live-teaser .lt-body h3 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 21px; }
.live-teaser .lt-body p { margin: 0; color: var(--muted); line-height: 1.6; }
.live-teaser .lt-blur { filter: blur(5px); user-select: none; }
.live-teaser .lt-side { display: grid; align-content: center; justify-items: end; gap: 6px; padding: 20px 22px; border-left: 1px solid var(--line); }
.live-teaser .lt-side b { font-size: 26px; letter-spacing: .14em; color: var(--violet); }
.live-teaser .lt-side small { color: var(--muted); }
.secret-tag { font-size: 11px; font-weight: 800; letter-spacing: .14em; padding: 3px 10px; border-radius: 99px; color: #0b0814; background: var(--lime); }
.live-teaser::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .08) 50%, transparent 60%); transform: translateX(-120%); animation: shine 4s ease-in-out infinite; }
@media (max-width: 760px) { .live-teaser { grid-template-columns: 1fr; } .live-teaser .lt-art { min-height: 120px; } .live-teaser .lt-side { border-left: 0; border-top: 1px solid var(--line); justify-items: start; } }
@media (prefers-reduced-motion: reduce) { .live-teaser::before { animation: none; } }

/* ราคาพร้อมเพย์ (ส่วนลดเมื่อจ่ายพร้อมเพย์ · ราคาปกติ = ราคาบัตร) */
.gprice { flex-wrap: wrap; }
.ppnote { display: inline-flex; align-items: center; gap: 4px; flex-basis: 100%; margin-top: 2px; font-size: 12px; font-weight: 600; color: #6ee7b7; }
.buy-sum-price .ppnote { justify-content: flex-end; }
.pp-note { display: flex; align-items: center; gap: 6px; margin: -6px 0 14px; font-size: 14px; color: #6ee7b7; }
.pp-note b { color: #a7f3d0; }
.pm-save { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #052e1f; background: #34d399; vertical-align: 1px; }
.pm-amt { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 700; }
.pp-box { border-color: rgba(52, 211, 153, .3); }

/* ตัวแทนต่างประเทศ: รับค่าคอมเป็น USD (Wise / PayPal) */
.bank-logo.bk-intl { background: linear-gradient(135deg, #4f46e5, #2563eb); color: #fff; }
.usd { color: #93c5fd; font-weight: 700; }
.stats small.usd { display: block; margin-top: 2px; font-size: 13px; }
.pay-amt small.muted { display: block; font-size: 12px; }
.intl-note { padding: 10px 12px; margin: 0 0 10px; border-color: rgba(99, 102, 241, .35); }
.intl-note p { margin: 0; display: flex; gap: 6px; align-items: flex-start; }

/* โหมดอังกฤษ: ราคาเทียบดอลลาร์ต่อท้ายราคาบาท */
.usd-eq { margin-left: 4px; font-size: max(12px, .62em); font-weight: 600; color: var(--muted); white-space: nowrap; letter-spacing: 0; }

/* คำขอเปลี่ยนบัญชีรับเงิน (รอแอดมินยืนยัน) */
.pending-req { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; border-color: rgba(251, 191, 36, .45); color: inherit; text-decoration: none; }
.pending-req svg { color: #fbbf24; flex: none; }
.pending-req:hover { border-color: #fbbf24; }
.pending-req-box { border-color: rgba(251, 191, 36, .45); }
.pending-req-box h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req-diff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; margin: 10px 0; }
.req-arrow { align-self: center; font-size: 22px; color: var(--muted); }
@media (max-width: 640px) { .req-diff { grid-template-columns: 1fr; } .req-arrow { transform: rotate(90deg); justify-self: center; } }
td .st + .st { margin-left: 4px; }

/* โหมดอังกฤษ: ดอลลาร์เด่น บาทตัวเล็กสีเทา · โหมดไทยแสดงบาทอย่างเดียว */
.usd-main { white-space: nowrap; }
.thb-sub { margin-left: 6px; font-size: max(12px, .5em); font-weight: 500; color: var(--muted); white-space: nowrap; letter-spacing: 0; vertical-align: middle; }
.fee-note { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.gprice .fee-note { flex-basis: 100%; }
.pm .fee-note { margin-top: -2px; }
.buy-sum-price .thb-sub { margin: 0; }
.usd-box { border-color: rgba(96, 165, 250, .3); }

/* รหัสแตกไฟล์ */
.dl-pw { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.dl-pw code { padding: 2px 8px; border-radius: 6px; background: rgba(168, 85, 247, .15); color: #e9d5ff; font-weight: 700; letter-spacing: .03em; user-select: all; }
.pw-form { display: flex; gap: 6px; align-items: center; }
.pw-form input { width: 140px; padding: 6px 10px; font-size: 13px; }

/* มือถือ: แถวราคาในหน้าต่างสั่งซื้อตัดบรรทัดได้ ไม่ให้ป้ายลดราคาทับราคา */
@media (max-width: 420px) {
  .buy-sum-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .buy-sum-price .ppnote { flex-basis: auto; margin-left: auto; }
}
/* มือถือ: หัวเว็บหลังบ้าน (ตัวแทน/แอดมิน) ซ่อนชื่อร้านข้างโลโก้ ให้พอดีจอ */
@media (max-width: 520px) {
  body.back .brand span { display: none; }
  body.back .top-in { gap: 10px; }
  body.back .langsw { margin-right: 0; }
}