/* ===================== Buttons (สไตล์เดียวทั้งเว็บ · หน้าร้าน + หลังบ้าน + หน้า error) =====================
   ต้นแบบ: ปุ่มสีทึบ (--primary) · มุม 8px · เส้นไฮไลต์ขาว 1px ใต้ขอบบน (inset shadow) · ตัวอักษรขาว น้ำหนักปกติ
   กติกาหลัก: **ทุกสถานะ (ปกติ / hover / focus) หน้าตาเหมือนกัน** — hover ไม่เปลี่ยนสี/เงา/ทรง/ตำแหน่ง
              เหลือแค่ :active (กดลง 1px) และ :focus-visible (กรอบสำหรับคีย์บอร์ด) เท่านั้น

   ใครใช้สไตล์นี้:
     1) ปุ่มเต็ม       .btn  .er-btn  .um3-btn   (+ ตัวแปร .ghost .danger .gray .done .sm .block)
     2) ปุ่มไอคอน      .ic-btn  .theme-btn       (ทรง/ไฮไลต์/กติกา hover เดียวกัน แต่คงสีพื้นแบบ field/card)
     3) ตัวควบคุมย่อย  .stepper button  .up-q button  (ล็อก hover เท่านั้น)
   ไม่แตะ: แท็บ / เมนูดรอปดาวน์ / chip / ปุ่มปิด (×) — เป็นตัวนำทาง ไม่ใช่ปุ่มกด

   วิธีปรับ (แก้ที่ :root ที่เดียว):  --btn สีหลัก · --btn-r มุม · --btn-h ความสูงขั้นต่ำ · --btn-fs ขนาดตัวอักษร
   (รูปอ้างอิงเดิมวัดได้ 48px / 16px — อยากได้ขนาดนั้นตั้ง --btn-h:48px; --btn-fs:1rem)
   โหลดท้ายสุดเสมอ · คุณสมบัติ "ตัวตน" (มุม/น้ำหนักฟอนต์/เงา) ใส่ !important กันไฟล์ CSS รายหน้าที่โหลดทีหลังทับ */
:root{
  --btn:var(--primary);--btn-hl:rgba(255,255,255,.35);
  --btn-r:8px;--btn-h:36px;--btn-fs:.844rem
}

/* ---------- 1) ปุ่มเต็ม ---------- */
.btn.btn,.er-btn.er-btn,.um3-btn.um3-btn{
  /* ตัวแปรสถานะ (variant เปลี่ยนแค่ 4 ตัวนี้ → hover ล็อกได้ด้วยการอ้างค่าเดิม) */
  --b-bg:var(--btn);--b-bd:transparent;--b-fg:#fff;--b-hl:var(--btn-hl);
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:var(--btn-h);padding:0 14px;
  border:1px solid var(--b-bd);border-radius:var(--btn-r)!important;
  background:var(--b-bg);color:var(--b-fg);
  font:inherit;font-size:var(--btn-fs);font-weight:400!important;line-height:1.2;letter-spacing:0;
  text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--b-hl)!important;
  transition:transform .15s;
}
.btn.btn.sm{min-height:29px;padding:0 11px;font-size:.731rem}
.btn.btn .ic{flex:none;width:14px;height:14px;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ตัวแปรสี — ทรง/ฟอนต์/ไฮไลต์เหมือนกันหมด เปลี่ยนแค่สีพื้น */
.btn.btn.danger{--b-bg:#dc2626}
.btn.btn.gray{--b-bg:#374151}
html[data-theme="light"] .btn.btn.gray{--b-bg:#64748b}
.btn.btn.done{--b-bg:#15803d}                                   /* คัดลอก/อัปโหลดสำเร็จ (แทน .up-act .btn.done / .iv-copy .btn.done) */
.iv-copy .btn.btn.done{--b-bg:#16a34a}
.adlg-discord.btn.btn,.cdlg-btn.btn[data-app="discord"]{--btn:#5865f2}

.btn.btn.ghost,.er-btn.er-btn.ghost,.um3-btn.um3-btn.cancel{
  --b-bg:var(--card,rgba(255,255,255,.06));--b-bd:var(--line,rgba(255,255,255,.18));--b-fg:var(--text);--b-hl:rgba(255,255,255,.08)
}
.um3-btn.um3-btn.cancel{--b-fg:#f87171}                         /* ยกเลิก = ghost + ตัวอักษรแดง */
html[data-theme="light"] .btn.btn.ghost,html[data-theme="light"] .er-btn.er-btn.ghost{--b-hl:rgba(255,255,255,.7)}
html[data-theme="light"] .um3-btn.um3-btn.cancel{--b-fg:#b91c1c}

/* ปุ่มบันทึกในหน้าต่างผู้ใช้: .save = ปุ่มหลักสีทึบ (ค่าเริ่มต้นอยู่แล้ว) */

/* ---------- hover / focus = หน้าตาเดิมเป๊ะ (ล็อกทุกกฎ hover เก่าใน style.css / error.css / admin-*.css) ---------- */
.btn.btn:hover,.btn.btn:focus,
.er-btn.er-btn:hover,.er-btn.er-btn:focus,
.um3-btn.um3-btn:hover,.um3-btn.um3-btn:focus{
  background:var(--b-bg);border-color:var(--b-bd);color:var(--b-fg);
  filter:none;transform:none;text-decoration:none
}
.btn.btn:active,.er-btn.er-btn:active,.um3-btn.um3-btn:active{transform:translateY(1px)}
.btn.btn:focus-visible,.er-btn.er-btn:focus-visible,.um3-btn.um3-btn:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}

/* สถานะปิดใช้งาน (วางหลัง hover เพื่อให้ชนะ) — ยังคงเทาลงตามเดิม และ hover ไม่เปลี่ยนอะไร */
.btn.btn:is(:disabled,[disabled]),.btn.btn:is(:disabled,[disabled]):hover{filter:grayscale(.5);transform:none}
.btn.btn.off,.btn.btn.off:hover{filter:grayscale(1) brightness(.75);pointer-events:none;cursor:not-allowed;transform:none}

/* ---------- 2) ปุ่มไอคอน ---------- */
.ic-btn.ic-btn,.theme-btn.theme-btn{
  border-radius:var(--btn-r)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html[data-theme="light"] .ic-btn.ic-btn,html[data-theme="light"] .theme-btn.theme-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}
.ic-btn.ic-btn:not(.on):not(.done):hover{background:var(--field);border-color:var(--line)}
.theme-btn.theme-btn:hover{background:var(--card);border-color:var(--line);color:var(--text)}
.theme-btn.theme-btn:focus-visible,.ic-btn.ic-btn:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}

/* ---------- 3) ตัวควบคุมย่อย: ล็อก hover เท่านั้น ---------- */
.stepper button:hover{background:var(--card);color:var(--text)}
.up-q button:hover{background:rgba(0,0,0,.65)}

@media(prefers-reduced-motion:reduce){.btn.btn,.er-btn.er-btn,.um3-btn.um3-btn{transition:none}}

/* ช่องกรอกให้สูงพอดีกับปุ่ม (~40px) เวลาวางแถวเดียวกัน */
input,select,textarea{padding:8px 11px;font-size:0.844rem}