@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   คุ้มมาก — ธีมเข้ม "ห้องควบคุมร้าน"  (km-dark.css)
   ใช้เฉพาะหน้าฝั่งเจ้าของร้าน: store · dashboard · review · earn · link · admin
   ฝั่งลูกค้ายังสว่างเหมือนเดิม เพราะคนที่กำลังจะโอนเงินให้คนแปลกหน้า
   ต้องเห็นหน้าเว็บที่สว่างสะอาด = ความน่าเชื่อถือ

   วิธีทำงาน: โหลดหลัง <style> ของหน้า จึงทับค่าเดิมได้
   จุดที่หน้าเดิมฝังสีขาวไว้ตรงๆ ถูกไล่ทับครบทุกตัวแล้ว (ดูหัวข้อ "ไล่ทับพื้นขาว")

   กฎเหล็ก (เหมือนธีมสว่าง):
   ✗ ไม่มี position:fixed   ✗ ไม่แตะ display   ✗ ไม่ตั้ง opacity:0
   ✗ ไม่มี animation ที่ซ่อนเนื้อหา   → กล่องหาย/จอดำแบบที่เคยเจอ เกิดไม่ได้
   ═══════════════════════════════════════════════════════════════ */

:root{
  color-scheme:only dark;

  --ink:#E9ECF5;          /* ตัวอักษรหลัก (กลับด้านจากธีมสว่าง) */
  --muted:#98A0B5;
  --faint:#6E7689;
  --paper:#0A0D14;        /* พื้นหลังลึก */
  --card:#151B2B;         /* พื้นการ์ด */
  --line:#2A3350;

  --brand:#FFFF66;
  --brand-solid:#FFFF66;   /* เหลืองสด — ใช้เป็นพื้น */        /* คราม เรืองแสงได้ในที่มืด */
  --brand-ink:#FFFF66;
  --brand-soft:#2A2600;
  --brand-line:#5A5200;

  --ok:#17C964;
  --ok-bg:#0F2B1E;
  --ok-line:#1F5C3C;

  --bad:#FF5C7A;
  --bad-bg:#2B1119;
  --bad-line:#5E2135;

  --warn:#F5A524;
  --warn-bg:#2B2010;
  --warn-line:#5E4518;

  --line-green:#06C755;

  --f:'IBM Plex Sans Thai',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --display:'Bai Jamjuree','IBM Plex Sans Thai',sans-serif;
}

html,body{background:var(--paper);color:var(--ink);-webkit-text-fill-color:var(--ink)}
body{background-image:radial-gradient(rgba(255,255,255,.045) .9px,transparent .9px);background-size:24px 24px}

h1,h2,h3,.brand{font-family:var(--display);letter-spacing:-.015em;color:var(--ink);-webkit-text-fill-color:var(--ink)}

/* ── แถบบน ── */
.top{background:#111726;border-bottom:1px solid var(--line)}
.mk{background:linear-gradient(145deg,var(--brand),#C9B400);color:#fff;-webkit-text-fill-color:#fff;
  box-shadow:0 0 18px rgba(255,255,102,.45)}
.out{color:var(--muted);-webkit-text-fill-color:var(--muted)}

/* ══ ไล่ทับพื้นขาวทุกจุดที่หน้าเดิมฝังไว้ตรงๆ ══ */
.card,.om-card,.optgrp,.mp-row,.seg,.qr-box,.pcell{
  background:var(--card);color:var(--ink);-webkit-text-fill-color:var(--ink);
  border-color:var(--line)}
.card{border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 44px -28px #000}
.slogo{background:#1D2438;border-color:#2A3350}
.input,select.input,input,textarea,select,
.filebox input[type=file],.lv-confirm input{
  background:#0F1524;color:var(--ink);-webkit-text-fill-color:var(--ink);
  border:1.5px solid var(--line);border-radius:10px;
  transition:border-color .16s,box-shadow .16s}
.input:focus,input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,255,102,.28)}
input::placeholder,textarea::placeholder{color:var(--faint);-webkit-text-fill-color:var(--faint)}
.payee-row .cp{background:#0F1524;color:var(--brand-ink);-webkit-text-fill-color:var(--brand-ink);border-color:var(--brand-line)}
.lvbtn,.days button{background:#0F1524;color:var(--ink);-webkit-text-fill-color:var(--ink);border-color:var(--line)}

/* ปุ่มโทนอ่อนที่หน้าเดิมเขียน background:#fff ไว้ในแอตทริบิวต์ style
   ทับด้วย !important เพราะ inline style ชนะ CSS ปกติเสมอ */
[style*="background:#fff"]{background:#1B2237!important;color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;border-color:var(--line)!important}

/* ── ปุ่ม ── */
.btn{border-radius:12px;font-family:var(--f);font-weight:600;
  transition:transform .13s ease,box-shadow .13s ease,background .18s ease}
.btn-primary,.btn-ghost,.btn-line,.btn-no,.buy-btn{position:relative;overflow:hidden}
.btn-primary::after,.btn-ghost::after,.btn-line::after,.btn-no::after,.buy-btn::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg)}
.btn-primary:hover::after,.btn-ghost:hover::after,.btn-line:hover::after,
.btn-no:hover::after,.buy-btn:hover::after{animation:kmDarkShine .85s ease}
@keyframes kmDarkShine{to{left:140%}}
.btn:active{transform:translateY(2px)}
.btn-primary{background:linear-gradient(145deg,var(--brand),#C9B400);color:#fff;-webkit-text-fill-color:#fff;
  box-shadow:0 8px 22px -10px rgba(255,255,102,.9)}
.btn-ghost{background:#1B2237;color:var(--ink);-webkit-text-fill-color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn-no{background:#1B2237;color:var(--bad);-webkit-text-fill-color:var(--bad);border:1.5px solid var(--bad-line)}
.btn-line{background:var(--line-green);color:#fff;-webkit-text-fill-color:#fff}
.buy-btn,.go{background:linear-gradient(145deg,#12A855,#0C7C3F);color:#fff;-webkit-text-fill-color:#fff;border-radius:12px}
.btn:disabled{opacity:.45;box-shadow:none;transform:none}

/* ── ป้ายสถานะ ── */
.chip,.bdg,.stock-tag{border-radius:999px;font-weight:500;border:1px solid}
.c-ok,.bdg.done{background:var(--ok-bg);border-color:var(--ok-line);color:#4BE28C;-webkit-text-fill-color:#4BE28C}
.c-bad{background:var(--bad-bg);border-color:var(--bad-line);color:#FF8BA3;-webkit-text-fill-color:#FF8BA3}
.c-info,.bdg.new{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink);-webkit-text-fill-color:var(--brand-ink)}
.c-review,.bdg.trust{background:var(--warn-bg);border-color:var(--warn-line);color:#FFC46B;-webkit-text-fill-color:#FFC46B}

/* ── ข้อความรอง ── */
.sub,.muted,.empty,.loading,small{color:var(--muted);-webkit-text-fill-color:var(--muted)}
hr{border-color:var(--line)}
a{color:var(--brand-ink);-webkit-text-fill-color:var(--brand-ink)}

/* ── แถบวัด/ความคืบหน้า ── */
progress,.bar,.meter{background:#0F1524}

/* ── รูปภาพในธีมมืด ลดความจ้าเล็กน้อยไม่ให้แสบตา ── */
img{filter:saturate(.96)}

:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px;border-radius:10px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}