/* ============================================================
   FORMATIX STORE — หน้าร้าน · กระเป๋า Drex · หน้าต่างรับ/แลก/ซื้อ · คลังของฉัน · ข้อกำหนดและนโยบาย (store.js)
   ใช้ตัวแปรสีของเว็บทั้งหมด จึงเปลี่ยนตามธีม (สว่าง/มืด/ธีมจากร้าน) เอง
   ============================================================ */

:root { --coin: #e9a20f; --coin-soft: rgba(240, 168, 20, .14); --coin-ink: #8a5300; }
:root[data-theme="dark"], :root[data-theme="purple"] { --coin-soft: rgba(247, 189, 50, .16); --coin-ink: #ffcf5c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --coin-soft: rgba(247, 189, 50, .16); --coin-ink: #ffcf5c; }
}

.fx-coin { width: 1.15em; height: 1.15em; flex-shrink: 0; display: inline-block; vertical-align: -.2em; filter: drop-shadow(0 1px 1px rgba(120, 70, 0, .25)); }
.fx-coins { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.fx-coins b { font-weight: 700; }

/* ---------- หัวหน้า + กระเป๋า ---------- */
.sx-head { margin-bottom: 22px; }
.sx-top { margin-bottom: 30px; }
.sx-wallet {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; align-items: center;
  padding: 24px 26px; border-radius: var(--r-2xl);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--coin-soft), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, var(--accent-soft), transparent 60%),
    var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.sx-wallet.is-guest { grid-template-columns: auto minmax(0, 1fr); }
.sx-wallet.is-loading { display: block; padding: 0; border: 0; background: none; box-shadow: none; }
.sx-coinart { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: var(--coin-soft); }
.sx-coinart .fx-coin { width: 58px; height: 58px; animation: sx-spin 7s var(--ease) infinite; }
@keyframes sx-spin { 0%, 70% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.sx-kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.sx-wallet h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 4px 0 6px; }
.sx-wallet p { color: var(--mute); font-size: 14.5px; line-height: 1.6; max-width: 56ch; }
.sx-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.sx-balance { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.sx-balance b { font-family: var(--font-display); font-size: clamp(34px, 5vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--coin-ink); }
.sx-balance span { font-weight: 600; color: var(--mute); }
.sx-balance.is-sm { align-items: center; margin-bottom: 14px; }
.sx-balance.is-sm b { font-size: 30px; }
.sx-balance.is-sm .fx-coin { width: 30px; height: 30px; }
.sx-sub { font-size: 13px; color: var(--dim); margin-top: 4px; }
.sx-daily, .sx-share { display: grid; gap: 10px; align-content: center; padding-left: 22px; border-left: 1px solid var(--line); min-width: 0; }
.sx-daily-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.sx-daily-head span { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); }
.sx-daily-head span svg { color: var(--accent); }
.sx-daily-head b { font-weight: 600; color: var(--mute); font-size: 12.5px; white-space: nowrap; }
.sx-streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.sx-streak i { height: 8px; border-radius: 99px; background: var(--surface-3); transition: background .3s; }
.sx-streak i.is-on { background: var(--accent); }
.sx-streak i.is-bonus { background: linear-gradient(90deg, var(--surface-3), var(--coin-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coin) 45%, transparent); }
.sx-streak i.is-bonus.is-on { background: linear-gradient(90deg, #ffd56a, var(--coin)); box-shadow: none; }
.sx-linkbox { display: flex; gap: 6px; min-width: 0; }
.sx-linkbox input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--mute); font-family: var(--font-mono); font-size: 12.5px; }
.sx-linkbox .btn { flex-shrink: 0; }
.sx-hint { font-size: 12.5px !important; color: var(--dim) !important; }

/* ---------- หมวด + การ์ดของในร้าน ---------- */
.sx-cats { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.sx-cat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--mute); white-space: nowrap; }
.sx-cat span { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); font-size: 12px; text-align: center; }
.sx-cat.is-on { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.sx-cat.is-on span { background: rgba(255, 255, 255, .22); color: inherit; }

.sx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 20px; }
.sx-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--spring), box-shadow .3s var(--ease), border-color .3s;
}
.sx-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.sx-card.is-owned { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.sx-prev { position: relative; }
.sx-prev .sx-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s var(--ease); }
.sx-card:hover .sx-prev .sx-shot { opacity: 1; }
.sx-badge, .sx-own {
  position: absolute; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sx-badge { left: 12px; background: rgba(255, 255, 255, .82); color: #1b1d2a; }
.sx-own { right: 12px; background: color-mix(in srgb, var(--ok) 88%, #000); color: #fff; }
.sx-body { display: grid; gap: 8px; align-content: start; padding: 18px 20px 20px; }
.sx-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.sx-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.sx-desc { color: var(--mute); font-size: 14.5px; line-height: 1.6; }
.sx-price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 30px; margin-top: 2px; }
.sx-price:empty { display: none; }
.sx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.sx-chip.is-coin { background: var(--coin-soft); border-color: color-mix(in srgb, var(--coin) 30%, transparent); color: var(--coin-ink); }
.sx-chip.is-free { background: color-mix(in srgb, var(--ok) 13%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.sx-chip.is-off { color: var(--dim); font-weight: 600; }
.sx-or { font-style: normal; font-size: 12px; color: var(--dim); }
.sx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sx-acts .btn-primary { margin-left: auto; }
.btn.is-static { pointer-events: none; color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

/* ---------- ฉากตัวอย่างธีม (CSS ล้วน) ---------- */
.sx-scene { position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; }
.sx-scene.is-big { aspect-ratio: 16 / 8; border-radius: 20px; }
.sx-scene i { position: absolute; display: block; }
.sc-ui { position: absolute; left: 9%; right: 9%; top: 13%; bottom: 13%; z-index: 5; display: grid; grid-template-rows: auto 1fr; gap: 7%; }
.sc-bar { display: flex; align-items: center; gap: 5px; height: 15%; min-height: 12px; padding: 0 8px; border-radius: 99px; }
.sc-bar b { width: 7px; height: 7px; border-radius: 50%; opacity: .55; background: currentColor; }
.sc-bar b:first-child { width: 22%; height: 6px; border-radius: 4px; opacity: .7; margin-right: auto; }
.sc-card { position: relative; width: 62%; border-radius: 12px; padding: 7%; display: grid; gap: 8%; align-content: start; }
.sc-card b { height: 7px; border-radius: 4px; background: currentColor; opacity: .38; }
.sc-card b:first-child { width: 70%; height: 9px; opacity: .65; }
.sc-card b:last-child { width: 46%; }
.sc-btn { position: absolute; right: 0; bottom: 0; width: 26%; height: 18%; border-radius: 99px; }

/* Good Life: ฟ้าใส ภูเขา ทุ่งหญ้า แม่น้ำ นกบิน */
.sx-scene.is-goodlife { background: radial-gradient(circle at 80% 18%, #fffbe6 0 5%, rgba(255, 244, 196, .7) 6%, transparent 22%), linear-gradient(180deg, #9fd3f6 0%, #cde9fb 46%, #eaf6ff 60%); color: #1d4f7a; }
.sx-scene.is-goodlife .sc-a { left: -5%; right: -5%; bottom: 30%; height: 38%; background: linear-gradient(180deg, #8fb5d6, #b5d1e8); clip-path: polygon(0 100%, 12% 42%, 24% 70%, 40% 18%, 55% 64%, 68% 30%, 84% 72%, 100% 40%, 100% 100%); }
.sx-scene.is-goodlife .sc-b { left: -5%; right: -5%; bottom: 0; height: 40%; background: linear-gradient(180deg, #8fcf6d, #5ea84a); clip-path: polygon(0 30%, 18% 12%, 38% 26%, 58% 6%, 78% 22%, 100% 10%, 100% 100%, 0 100%); }
.sx-scene.is-goodlife .sc-c { left: 30%; width: 34%; bottom: -6%; height: 30%; background: linear-gradient(180deg, #bfe6fb, #7cc4ec); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: skewX(-18deg); opacity: .9; }
.sx-scene.is-goodlife .sc-d { left: 4%; bottom: 14%; width: 16%; height: 26%; background: radial-gradient(circle at 30% 60%, #3f8a3a 0 34%, transparent 36%), radial-gradient(circle at 62% 40%, #4f9d42 0 38%, transparent 40%), radial-gradient(circle at 75% 72%, #377d33 0 30%, transparent 32%); }
.sx-scene.is-goodlife .sc-e { left: 58%; top: 14%; width: 9px; height: 5px; border: solid #2a5a83; border-width: 2px 2px 0 0; border-radius: 0 100% 0 0; transform: rotate(-30deg); box-shadow: -14px 6px 0 -1px transparent; animation: sx-bird 9s linear infinite; }
.sx-scene.is-goodlife .sc-e::after { content: ""; position: absolute; left: -10px; top: 0; width: 9px; height: 5px; border: solid #2a5a83; border-width: 2px 0 0 2px; border-radius: 100% 0 0 0; transform: rotate(60deg); transform-origin: right top; }
@keyframes sx-bird { from { transform: translateX(-60px) rotate(-30deg); } to { transform: translateX(160px) rotate(-30deg); } }
.sx-scene.is-goodlife .sc-bar, .sx-scene.is-goodlife .sc-card { background: rgba(251, 253, 255, .82); box-shadow: 0 6px 20px -10px rgba(24, 74, 124, .45); backdrop-filter: blur(6px); }
.sx-scene.is-goodlife .sc-btn { background: linear-gradient(135deg, #5cc2f0, #1f73c2); }

/* Soul of Purple: อวกาศม่วง เนบิวลา ดาว ดาวเคราะห์วงแหวน ดาวตก */
.sx-scene.is-purple { background: radial-gradient(60% 70% at 18% 28%, rgba(154, 99, 255, .55), transparent 70%), radial-gradient(50% 60% at 85% 75%, rgba(255, 127, 198, .35), transparent 70%), radial-gradient(40% 50% at 60% 10%, rgba(82, 240, 207, .22), transparent 70%), #07070f; color: #d9d4ff; }
.sx-scene.is-purple .sc-a { left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  box-shadow: 30px 20px #fff, 80px 60px rgba(255,255,255,.7), 140px 25px #fff, 200px 90px rgba(255,255,255,.6), 260px 40px #fff, 310px 120px rgba(255,255,255,.8), 50px 150px rgba(255,255,255,.6), 120px 180px #fff, 230px 170px rgba(255,255,255,.7), 290px 200px #fff, 20px 230px rgba(255,255,255,.5), 170px 130px #fff, 340px 60px rgba(255,255,255,.6), 380px 170px #fff, 410px 30px rgba(255,255,255,.7);
  animation: sx-twinkle 3.6s ease-in-out infinite alternate; }
@keyframes sx-twinkle { from { opacity: .55; } to { opacity: 1; } }
.sx-scene.is-purple .sc-b { right: 8%; bottom: 12%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9a8ff, #6a3bf0 55%, #2a1466); box-shadow: 0 0 40px rgba(154, 99, 255, .55); }
.sx-scene.is-purple .sc-c { right: 2%; bottom: 25%; width: 34%; height: 9%; border-radius: 50%; border: 2px solid rgba(255, 196, 240, .7); transform: rotate(-16deg); }
.sx-scene.is-purple .sc-d { left: -10%; right: -10%; top: 46%; height: 24%; background: linear-gradient(90deg, transparent, rgba(82, 240, 207, .28), rgba(154, 99, 255, .32), transparent); filter: blur(10px); transform: rotate(-8deg); }
.sx-scene.is-purple .sc-e { left: 20%; top: 12%; width: 70px; height: 2px; background: linear-gradient(90deg, transparent, #fff); transform: rotate(18deg); animation: sx-shoot 4.5s ease-in infinite; opacity: 0; }
@keyframes sx-shoot { 0%, 70% { opacity: 0; transform: translate(0, 0) rotate(18deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(140px, 46px) rotate(18deg); } }
.sx-scene.is-purple .sc-bar, .sx-scene.is-purple .sc-card { background: rgba(23, 21, 39, .78); box-shadow: inset 0 0 0 1px rgba(196, 190, 255, .14); backdrop-filter: blur(6px); }
.sx-scene.is-purple .sc-btn { background: linear-gradient(135deg, #52f0cf, #9a63ff 60%, #ff7fc6); }

/* Morning Mood: แดดเช้า ลำแสงผ่านหน้าต่าง ผ้าม่าน เงาใบไม้ ฝุ่นในแสง */
.sx-scene.is-morning { background: radial-gradient(70% 80% at 85% 10%, rgba(255, 214, 150, .9), transparent 60%), linear-gradient(160deg, #fff4e2 0%, #fde6c8 55%, #f7d3ae 100%); color: #7a4518; }
.sx-scene.is-morning .sc-a { inset: -20% -10%; background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .0) 0 26px, rgba(255, 250, 235, .55) 26px 44px, rgba(255, 255, 255, 0) 44px 80px); mask: linear-gradient(200deg, #000 20%, transparent 75%); -webkit-mask: linear-gradient(200deg, #000 20%, transparent 75%); }
.sx-scene.is-morning .sc-b { right: 8%; top: 6%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fffaf0, rgba(255, 200, 120, .8) 45%, transparent 70%); }
.sx-scene.is-morning .sc-c { left: 0; top: 0; bottom: 0; width: 16%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 7px, rgba(255, 240, 220, .25) 7px 14px); box-shadow: 4px 0 18px rgba(160, 90, 30, .12); }
.sx-scene.is-morning .sc-d { right: 2%; bottom: -4%; width: 40%; height: 50%; background: radial-gradient(ellipse 30% 22% at 30% 40%, rgba(110, 70, 30, .16), transparent 70%), radial-gradient(ellipse 26% 20% at 62% 62%, rgba(110, 70, 30, .14), transparent 70%), radial-gradient(ellipse 22% 16% at 80% 30%, rgba(110, 70, 30, .12), transparent 70%); animation: sx-sway 6s ease-in-out infinite alternate; }
@keyframes sx-sway { from { transform: translateX(-6px) rotate(-2deg); } to { transform: translateX(6px) rotate(2deg); } }
.sx-scene.is-morning .sc-e { left: 0; top: 0; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .9);
  box-shadow: 90px 40px rgba(255,255,255,.8), 160px 90px rgba(255,255,255,.6), 230px 50px rgba(255,255,255,.9), 300px 110px rgba(255,255,255,.7), 360px 70px rgba(255,255,255,.8), 140px 160px rgba(255,255,255,.6), 260px 180px rgba(255,255,255,.7);
  animation: sx-motes 8s ease-in-out infinite alternate; }
@keyframes sx-motes { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.sx-scene.is-morning .sc-bar, .sx-scene.is-morning .sc-card { background: rgba(255, 252, 247, .84); box-shadow: 0 6px 18px -10px rgba(110, 70, 30, .4); backdrop-filter: blur(6px); }
.sx-scene.is-morning .sc-btn { background: linear-gradient(135deg, #ffb35c, #c24a26); }

.motion-off .sx-scene *, .motion-off .sx-coinart .fx-coin { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sx-scene *, .sx-coinart .fx-coin { animation: none !important; } }

/* ---------- วิธีรับ Drex ---------- */
.sx-earn { margin-top: 44px; padding: 26px; border-radius: var(--r-2xl); background: var(--surface); border: 1px solid var(--line); }
.sx-earn-head h2 { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.sx-earn-head p { color: var(--mute); font-size: 14px; margin-top: 4px; }
.sx-earn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin-top: 18px; }
.sx-earn-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.sx-earn-item b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.sx-earn-item small { display: block; color: var(--mute); font-size: 12.5px; line-height: 1.45; }
.sx-earn-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.sx-earn-amt { font-family: var(--font-display); font-weight: 700; color: var(--coin-ink); background: var(--coin-soft); padding: 4px 10px; border-radius: 99px; font-size: 14px; white-space: nowrap; }
.sx-policy-link { display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--accent); font-weight: 600; }
.sx-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin: 30px 0 6px; font-size: 13.5px; }
.sx-foot a { color: var(--mute); }
.sx-foot a:hover { color: var(--accent); }

/* ---------- หน้าต่างรับ/แลก/ซื้อ ---------- */
.modal-card.buy-card { width: min(520px, 100%); padding: 22px 22px 20px; }
.buy-hero { margin: -2px -2px 16px; }
.buy-head { display: grid; gap: 4px; margin-bottom: 16px; }
.buy-head p, .buy-app p { color: var(--mute); font-size: 14px; line-height: 1.55; }
.buy-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; padding-right: 40px; }
.buy-opts { display: grid; gap: 8px; }
.buy-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.buy-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.buy-opt input { accent-color: var(--accent); width: 18px; height: 18px; }
.buy-opt.is-off { opacity: .55; cursor: not-allowed; }
.buy-opt-main b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.buy-opt-main small { display: block; color: var(--mute); font-size: 12.5px; line-height: 1.45; }
.buy-opt-price { font-family: var(--font-display); font-weight: 700; font-size: 16px; white-space: nowrap; }
.buy-fine { margin-top: 14px; font-size: 12.5px; color: var(--dim); line-height: 1.55; }
.buy-fine a { color: var(--accent); }
.buy-foot { display: flex; gap: 10px; margin-top: 16px; }
.buy-foot .btn-primary { flex: 1; }
.buy-gate { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 18px 6px 6px; }
.buy-gate .fx-coin { width: 54px; height: 54px; }
.buy-gate h2 { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.buy-gate p { color: var(--mute); font-size: 14.5px; max-width: 38ch; }
.buy-shots { display: grid; gap: 10px; margin-top: 14px; }
.buy-shots img { width: 100%; border-radius: 14px; border: 1px solid var(--line); }
.buy-app { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 16px; padding-right: 36px; }
.buy-app-ic { width: 58px; height: 58px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.buy-app-ic img { width: 100%; height: 100%; object-fit: cover; }
.buy-cur { margin-bottom: 14px; }
.buy-disc { padding: 14px; border-radius: 16px; background: var(--coin-soft); margin-bottom: 14px; display: grid; gap: 8px; }
.buy-disc-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; }
.buy-disc-head span { display: inline-flex; align-items: center; gap: 7px; }
.buy-disc-head b { color: var(--coin-ink); font-variant-numeric: tabular-nums; }
.buy-disc input[type="range"] { width: 100%; accent-color: var(--coin); }
.buy-disc small { color: var(--mute); font-size: 12px; }
.buy-sum { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 4px 4px; border-top: 1px solid var(--line); font-size: 14.5px; }
.buy-sum dt { color: var(--mute); }
.buy-sum dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.buy-sum .is-total { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); padding-top: 4px; }
.buy-closed { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--star) 14%, transparent); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.buy-closed.is-shake { animation: sx-shake .45s var(--ease); }
@keyframes sx-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- ชำระเงินผ่าน Stripe: PromptPay / บัตร (store.js showPay) ---------- */
.buy-paywith { display: grid; gap: 6px; margin: 2px 0 12px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); }
.buy-paywith > span { font-size: 12.5px; color: var(--dim); }
.buy-paywith small { color: var(--mute); font-size: 12.5px; line-height: 1.5; }
.pay-brands { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-brand { font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.pay-brand.is-promptpay { color: #fff; background: #113566; border-color: #113566; }
.pay-brand.is-visa { color: #1a1f71; }
.pay-brand.is-mastercard { color: #c2410c; }
.pay-to .pay-brands { justify-content: center; margin-top: 4px; }
.pay { display: grid; gap: 12px; }
.pay-head { display: grid; gap: 4px; padding-right: 36px; }
.pay-head small { color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pay-chip { justify-self: start; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 99px; color: #fff; background: #113566; }
.pay-chip.is-stripe { background: #635bff; }
.pay-amount { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; padding: 14px 16px; border-radius: 16px; background: var(--accent-soft); }
.pay-amount small { grid-column: 1 / -1; color: var(--mute); font-size: 12.5px; }
.pay-amount b { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pay-fine, .pay-note { font-size: 12.5px; color: var(--mute); line-height: 1.55; }
.pay-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pay-to { display: grid; gap: 1px; text-align: center; }
.pay-to span { font-size: 12px; color: var(--dim); }
.pay > .btn-sm { justify-self: center; }
.pay-timer { text-align: center; font-size: 13.5px; color: var(--mute); }
.pay-timer b { font-variant-numeric: tabular-nums; color: var(--ink); }
.pay-state { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--star) 14%, transparent); font-size: 13.5px; line-height: 1.55; }
.pay-state b { font-size: 15px; }
.pay-state.is-bad { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.pay-state .btn { justify-self: start; }
.pay-act { display: grid; gap: 8px; }
.pay-cancel { justify-self: center; font: inherit; font-size: 12.5px; color: var(--dim); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 4px; }
.pay-done { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 10px 0 0; }
.pay-done > svg { color: #fff; background: var(--ok); border-radius: 50%; padding: 12px; width: 58px; height: 58px; }
.pay-done h2 { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.pay-done p { color: var(--mute); font-size: 14px; max-width: 40ch; }
.pay-done .buy-sum { width: 100%; text-align: left; }
.pay-done .buy-foot { width: 100%; }
.pay-note.is-warn { color: var(--ink); padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--star) 14%, transparent); }
.lib-row.has-act { grid-template-columns: 1fr auto auto auto; }
.lib-st.is-review, .lib-st.is-pending { background: color-mix(in srgb, var(--star) 16%, transparent); color: var(--ink); }

/* ---------- ปุ่มซื้อ/ไฟล์ล็อกในหน้าผลงาน ---------- */
.get.is-buy { background: linear-gradient(135deg, #ffd56a, var(--coin)); color: #3d2600; border: 0; }
.app-card:hover .get.is-buy { background: linear-gradient(135deg, #ffe08a, #f2a813); color: #3d2600; }
.get.is-buy.is-busy, .get.is-download.is-busy { opacity: .6; pointer-events: none; }
.dl-opt.is-locked { background: color-mix(in srgb, var(--coin) 6%, var(--surface-2)); }
.dl-rec.is-paid { display: inline-flex; align-items: center; gap: 4px; background: var(--coin-soft); color: var(--coin-ink); }
.dl-rec.is-owned { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pd-cta-note.is-owned { color: var(--ok); }
.pd-share { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--mute); border: 1px solid var(--line); background: var(--surface); }
.pd-share:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- ธีมที่ยังไม่ได้ในหน้าการตั้งค่า ---------- */
.theme-tile.is-locked .theme-prev { filter: saturate(.6); }
.theme-tile.is-locked .theme-prev i { opacity: .55; }
.theme-lock { position: absolute; inset: auto 6px 6px auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; background: rgba(20, 20, 30, .72); color: #fff; font-size: 10.5px; font-weight: 700; }

/* ---------- คลังของฉัน ---------- */
.lib-hist { margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lib-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.lib-item { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center; padding: 8px; border-radius: 16px; background: var(--surface-2); }
.lib-item b { display: block; font-family: var(--font-display); font-weight: 600; }
.lib-item small { color: var(--mute); font-size: 12.5px; }
.lib-thumb { display: block; width: 74px; border-radius: 10px; overflow: hidden; }
.lib-thumb .sc-ui { display: none; }
.lib-thumb.is-app { height: 46px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.lib-wallet .btn { width: 100%; }
.lib-table { display: grid; }
.lib-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.lib-row:first-child { border-top: 0; }
.lib-row b { display: block; font-weight: 600; }
.lib-row small { color: var(--dim); font-size: 12px; }
.lib-amt { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.lib-amt.is-plus { color: var(--ok); }
.lib-amt.is-minus { color: var(--danger); }
.lib-st { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--surface-3); color: var(--mute); white-space: nowrap; }
.lib-st.is-paid { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.lib-st.is-refunded, .lib-st.is-chargeback, .lib-st.is-canceled { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* ---------- ข้อกำหนดและนโยบาย ---------- */
.pol-tabs { margin-bottom: 18px; }
.pol-body { max-width: 820px; }
.pol-body h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.pol-body h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.pol-body p, .pol-body li { color: var(--mute); font-size: 15px; line-height: 1.75; }
.pol-body ul { padding-left: 1.2em; display: grid; gap: 6px; }
.pol-body b { color: var(--ink); }
.pol-note { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--ink) !important; }
.pol-meta { margin-top: 22px; font-size: 13px !important; color: var(--dim) !important; }
.pol-meta a { color: var(--accent); }

/* ---------- จอเล็ก ---------- */
@media (max-width: 1100px) {
  .sx-wallet { grid-template-columns: auto minmax(0, 1fr); }
  .sx-daily, .sx-share { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .sx-wallet { padding: 18px; gap: 16px; }
  .sx-coinart { width: 64px; height: 64px; }
  .sx-coinart .fx-coin { width: 42px; height: 42px; }
  .sx-linkbox { flex-wrap: wrap; }
  .sx-linkbox input { flex-basis: 100%; }
  .sx-linkbox .btn { flex: 1; }
  .sx-earn { padding: 18px; }
  .lib-hist { grid-template-columns: 1fr; }
  .lib-row { grid-template-columns: 1fr auto; }
  .lib-row .lib-st { grid-column: 2; justify-self: end; }
  .lib-row.has-act { grid-template-columns: 1fr auto; }
  .lib-row.has-act .btn { grid-column: 1 / -1; justify-self: start; }
  .buy-opt { grid-template-columns: auto 1fr; }
  .buy-opt-price { grid-column: 2; }
}

.buy-card .modal-x { z-index: 8; background: var(--surface); box-shadow: var(--shadow-md); }

/* ---------- ฟอร์มขอใบกำกับภาษีเต็มรูป ---------- */
.buy-rname { margin-top: 14px; display: grid; gap: 6px; }
.buy-rname[hidden] { display: none; }
.buy-rname small { font-size: 12px; color: var(--dim); line-height: 1.5; }
.tax-field { display: grid; gap: 4px; font-size: 13px; color: var(--mute); }
.tax-field input { height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 15px; }
.lib-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 640px) { .lib-row.has-act .lib-acts { grid-column: 1 / -1; justify-content: flex-start; } }