/* Mama Pump — หลังบ้านแอดมิน · design system (plain CSS, เขียนเอง — ห้าม Tailwind)
 * ยกโทนจาก showcase/assets/app.css: ขาวล้วน · hairline · flat SaaS
 * ฟอนต์: Bai Jamjuree (display) + Anuphan (body) · accent = Clay (ดินเผา)
 */
:root {
  /* ── โทนแบรนด์ Mama Pump (6 ส.ค. พี่ส่งภาพแบรนด์มา: ลายเส้นน้ำตาล + ครีม + พีช + มินต์) ──
     ⭐ สีทั้งระบบมาจากตัวแปรชุดนี้ที่เดียว — เปลี่ยนโทนทีหลังแก้ตรงนี้จุดเดียว ห้ามฝังสีลงในหน้าใดหน้าหนึ่ง
     ⭐ คู่สีที่เลือกผ่านการวัดค่าคอนทราสต์แล้ว (ตัวอักษรต้องอ่านออกจริง ไม่ใช่แค่ดูน่ารัก):
        ตัวหนังสือหลักบนพื้นครีม = 10.8:1 · ตัวหนังสือขาวบนปุ่มน้ำตาลแบรนด์ = 4.8:1 (ผ่านเกณฑ์ 4.5:1)
        พีช/แซลมอน/มินต์ ใช้เป็นพื้นป้ายเท่านั้น ตัวหนังสือบนป้ายเป็นสีเข้มเสมอ ห้ามใช้ตัวขาว */
  --c-ink: 74 54 44;         /* น้ำตาลเข้ม = ตัวหนังสือหลัก (โทนเดียวกับลายเส้นในโลโก้) */
  --c-muted: 124 101 83;     /* ตัวหนังสือรอง */
  --c-faint: 126 113 103;    /* ตัวหนังสือจาง (เข้มพอให้อ่านออกบนพื้นครีม — 4.5:1) */
  --c-line: 122 90 70;       /* เส้นขอบ (ใช้กับ alpha ต่ำ) */
  --c-surface: 255 249 240;  /* พื้นหน้า = ครีม */
  --c-card: 255 255 255;     /* พื้นการ์ด */
  --c-accent: 139 107 87;    /* น้ำตาลแบรนด์ (ตัวเดียวกับโลโก้ MAMA PUMP) = ปุ่มหลัก ตัวหนังสือขาวอ่านออก */
  --c-peach: 249 201 180;    /* พีช (แก้มหมี) */
  --c-salmon: 240 147 139;   /* ชมพูส้ม (ชุดหมี) */
  --c-mint: 190 227 218;     /* มินต์ (หมวกหมี) */
  --c-cream: 253 240 216;    /* ครีมเข้ม (ตัวหมี) */
  /* สีความหมาย (สถานะ) — ปรับให้เข้าโทนแบรนด์แต่ยังแยกออกจากกันชัด · ตัวหนังสือบนป้ายเป็นสีเข้มเสมอ */
  --c-ok: 45 117 100;        /* เขียวอมมินต์ = ผ่าน/ใช้งาน */
  --c-warn: 144 87 50;      /* ส้มอมน้ำตาล = รอดำเนินการ */
  --c-danger: 178 70 62;     /* แดงอิฐ = ผิดพลาด/ตีกลับ */
  --shadow-sm: 0 1px 2px rgb(74 54 44 / 0.05), 0 1px 1px rgb(74 54 44 / 0.03);
  --shadow-md: 0 4px 14px -4px rgb(74 54 44 / 0.10), 0 2px 6px -2px rgb(74 54 44 / 0.06);
  --sidebar-w: 264px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Anuphan", system-ui, -apple-system, sans-serif;
  background-color: rgb(var(--c-surface));
  background-image:
    radial-gradient(1100px 460px at 90% -8%, rgb(var(--c-peach) / 0.40), transparent 60%),
    radial-gradient(900px 420px at -6% 4%, rgb(var(--c-mint) / 0.28), transparent 55%);
  background-attachment: fixed;
  color: rgb(var(--c-ink));
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: "Bai Jamjuree", "Anuphan", system-ui, sans-serif; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }

/* ── layout shell ─────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; height: 100vh; position: sticky; top: 0;
  display: flex; flex-direction: column; background: rgb(var(--c-card));
  border-right: 1px solid rgb(var(--c-line) / 0.10);
}
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: 4rem; display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1rem; border-bottom: 1px solid rgb(var(--c-line) / 0.10);
  background: rgb(var(--c-card) / 0.9); backdrop-filter: blur(6px);
}
.topbar-crumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: rgb(var(--c-muted)); }
.topbar-crumb b { color: rgb(var(--c-ink)); font-weight: 500; }
.content {
  flex: 1; width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
@media (max-width: 960px) {
  .sidebar { display: none; }
  .content { padding: 1.5rem 1rem 3rem; }
}

/* ── sidebar brand + nav ──────────────────────────────────── */
.side-brand { display: flex; align-items: center; gap: 0.7rem; padding: 0 1.1rem; height: 4rem; border-bottom: 1px solid rgb(var(--c-line) / 0.10); }
.side-brand-name { font-family: "Bai Jamjuree"; font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.side-brand-sub { font-size: 0.72rem; color: rgb(var(--c-muted)); line-height: 1.2; }
.side-nav { flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; }
.side-group-label {
  padding: 1rem 0.75rem 0.25rem; font-family: "Bai Jamjuree"; font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--c-faint));
}
.side-group-label:first-child { padding-top: 0.4rem; }
.side-link {
  position: relative; display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.75rem;
  border-radius: 0.8rem; font-size: 0.875rem; color: rgb(var(--c-muted)); transition: background .12s, color .12s;
}
.side-link:hover { background: rgb(var(--c-ink) / 0.03); color: rgb(var(--c-ink)); }
.side-link.active { background: rgb(var(--c-ink) / 0.045); color: rgb(var(--c-ink)); font-weight: 500; }
.side-link.active::before {
  content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 2.5px; border-radius: 2px;
  background: rgb(var(--c-accent));
}
.side-link .icon-box { width: 2rem; height: 2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 0.55rem; border: 1px solid rgb(var(--c-line) / 0.14); background: rgb(var(--c-card)); }
.side-link.active .icon-box { border-color: rgb(var(--c-ink) / 0.35); }
.side-link .icon-box svg { width: 16px; height: 16px; }
.side-foot { padding: 0.75rem; border-top: 1px solid rgb(var(--c-line) / 0.10); font-size: 0.75rem; color: rgb(var(--c-faint)); }

/* ── mobile drawer + hamburger ────────────────────────────── */
.hamburger-btn { display: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 0.8rem; border: 1px solid rgb(var(--c-line) / 0.14); background: rgb(var(--c-card)); }
.hamburger-btn svg { width: 20px; height: 20px; }
@media (max-width: 960px) { .hamburger-btn { display: inline-flex; } }
.drawer { position: fixed; inset: 0; z-index: 50; display: none; }
.drawer.open { display: block; }
.drawer-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.32); }
.drawer-panel { position: absolute; left: 0; top: 0; height: 100%; width: 280px; max-width: 84vw; background: rgb(var(--c-card)); box-shadow: var(--shadow-md); display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 4rem; padding: 0 1.1rem; border-bottom: 1px solid rgb(var(--c-line) / 0.10); }
.drawer-close { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 0.55rem; border: 1px solid rgb(var(--c-line) / 0.14); background: rgb(var(--c-card)); }
.drawer-close svg { width: 18px; height: 18px; }

/* ── brand mark ───────────────────────────────────────────── */
.brand-mark { width: 2.1rem; height: 2.1rem; border-radius: 0.8rem; border: 1.5px solid rgb(var(--c-ink)); display: grid; place-items: center; background: rgb(var(--c-card)); }
.brand-mark svg { width: 18px; height: 18px; }

/* ── page head ────────────────────────────────────────────── */
.page-eyebrow { font-family: "Bai Jamjuree"; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--c-accent)); font-weight: 600; margin-bottom: 0.5rem; }
.page-title { font-weight: 700; font-size: 1.7rem; line-height: 1.2; }
.page-desc { margin-top: 0.55rem; color: rgb(var(--c-muted)); max-width: 46rem; }
.page-head { margin-bottom: 1.75rem; display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: start; }
.page-head > .page-eyebrow, .page-head > .page-title, .page-head > .page-desc { grid-column: 1; }
.page-head-actions { grid-column: 2; grid-row: 1; display: flex; gap: 0.6rem; flex-wrap: wrap; justify-self: end; }
@media (max-width: 720px) {
  .page-head { grid-template-columns: 1fr; }
  .page-head-actions { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.85rem; }
}

/* ── ทางลัดสร้างธุรกรรม (dashboard) ───────────────────────── */
.dash-quick-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.dash-quick-actions .cf-btn { padding: 0.7rem 1.3rem; font-size: 0.9rem; }

/* ── grid helpers ─────────────────────────────────────────── */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ── cards / stats ────────────────────────────────────────── */
.cf-card { background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.10); border-radius: 1rem; box-shadow: var(--shadow-sm); padding: 1.5rem; }
.cf-stat { position: relative; background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.10); border-radius: 1rem; padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); overflow: hidden; }
.cf-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.75rem; color: rgb(var(--c-muted)); }
.cf-stat-top svg { width: 16px; height: 16px; }
.cf-stat-num { font-family: "Bai Jamjuree"; font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; margin-top: 0.5rem; color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums; }
.cf-stat-foot { font-size: 0.72rem; margin-top: 0.4rem; color: rgb(var(--c-faint)); }
.cf-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: rgb(var(--c-line) / 0.14); }

/* ── empty state ──────────────────────────────────────────── */
.cf-empty {
  border: 1px dashed rgb(var(--c-line) / 0.22); border-radius: 1rem; padding: 2.5rem 1.5rem;
  text-align: center; color: rgb(var(--c-faint)); font-size: 0.9rem; background: rgb(var(--c-ink) / 0.015);
}

/* ── chips / badges ───────────────────────────────────────── */
.cf-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; padding: 0.24rem 0.62rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.14); color: rgb(var(--c-muted)); background: rgb(var(--c-card)); white-space: nowrap; }
.cf-chip svg { width: 13px; height: 13px; }

/* ── buttons ──────────────────────────────────────────────── */
.cf-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 500; padding: 0.55rem 1.05rem; border-radius: 0.7rem; border: 1px solid rgb(var(--c-line) / 0.16); color: rgb(var(--c-ink)); background: rgb(var(--c-card)); box-shadow: var(--shadow-sm); transition: .15s; }
.cf-btn:hover { border-color: rgb(var(--c-ink) / 0.32); box-shadow: var(--shadow-md); }
.cf-btn svg { width: 16px; height: 16px; }
.cf-btn-primary { background: rgb(var(--c-ink)); color: #fff; border-color: rgb(var(--c-ink)); }
.cf-btn-primary:hover { background: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }
.cf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cf-input:disabled { opacity: 0.6; cursor: not-allowed; background: rgb(var(--c-muted) / 0.06); }

/* ── forms ────────────────────────────────────────────────── */
.cf-label { display: block; font-size: 0.75rem; color: rgb(var(--c-muted)); margin-bottom: 0.3rem; }
.cf-input {
  width: 100%; border: 1px solid rgb(var(--c-line) / 0.18); border-radius: 0.7rem; padding: 0.6rem 0.8rem;
  font-size: 0.875rem; background: #fff; color: rgb(var(--c-ink));
}
.cf-input::placeholder { color: rgb(var(--c-faint)); }
.cf-input:focus { outline: none; border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 3px rgb(var(--c-accent) / 0.14); }
.cf-field { margin-bottom: 1rem; }

/* ── tables ───────────────────────────────────────────────── */
.cf-table-wrap { overflow-x: auto; }
.cf-table { width: 100%; border-collapse: collapse; font-size: 0.825rem; }
.cf-table th { text-align: left; font-weight: 500; color: rgb(var(--c-muted)); padding: 0.6rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cf-table td { padding: 0.7rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.07); color: rgb(var(--c-ink)); }
.cf-table tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; }

/* ── footer ───────────────────────────────────────────────── */
.page-foot { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid rgb(var(--c-line) / 0.10); font-size: 0.75rem; color: rgb(var(--c-faint)); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }

/* ── tabs (หน้าตั้งค่า และหน้าอื่นที่มีแท็บย่อย) ─────────────────── */
.cf-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; border-bottom: 1px solid rgb(var(--c-line) / 0.10); margin-bottom: 1.5rem; }
.cf-tab {
  appearance: none; border: none; background: none; cursor: pointer; font-family: inherit;
  padding: 0.65rem 0.9rem; font-size: 0.85rem; font-weight: 500; color: rgb(var(--c-muted));
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s;
}
.cf-tab:hover { color: rgb(var(--c-ink)); }
.cf-tab.active { color: rgb(var(--c-ink)); border-bottom-color: rgb(var(--c-accent)); }
.cf-tab-panel { display: none; }
.cf-tab-panel.active { display: block; }

/* ── section head ทายภายในแท็บ (หัวข้อ + ปุ่มเพิ่ม) ───────────── */
.cf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cf-section-head h2 { font-size: 1.05rem; font-weight: 600; }
.cf-section-desc { font-size: 0.8rem; color: rgb(var(--c-muted)); margin-top: 0.2rem; max-width: 40rem; }

/* ── toggle switch (active on/off) ───────────────────────────── */
.cf-switch { position: relative; display: inline-flex; align-items: center; width: 2.5rem; height: 1.4rem; flex-shrink: 0; }
.cf-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cf-switch-track {
  position: absolute; inset: 0; border-radius: 9999px; background: rgb(var(--c-line) / 0.22);
  transition: background .15s; pointer-events: none;
}
.cf-switch-track::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s;
}
.cf-switch input:checked + .cf-switch-track { background: rgb(var(--c-accent)); }
.cf-switch input:checked + .cf-switch-track::before { transform: translateX(1.1rem); }
.cf-switch input:disabled + .cf-switch-track { opacity: 0.5; cursor: not-allowed; }

/* ── status badges (active/inactive) ─────────────────────────── */
/* ⭐ house style: ป้ายสถานะ/ชิป ต้องอยู่บรรทัดเดียวเสมอ — คำไทยไม่มีเว้นวรรค เบราว์เซอร์จะตัดกลางคำ
   ("รอส่งของ" กลายเป็น "รอส่ง / ของ") อ่านยากและป้ายเบี้ยวทั้งตาราง · ชิปสั้นอยู่แล้ว ปล่อยล้นดีกว่าตัดคำ */
.cf-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.55rem; border-radius: 9999px; white-space: nowrap; }
.cf-badge-on { background: rgb(var(--c-mint) / 0.55); color: rgb(var(--c-ok)); }
.cf-badge-off { background: rgb(var(--c-line) / 0.10); color: rgb(var(--c-faint)); }
.cf-badge-warn { background: rgb(var(--c-peach) / 0.55); color: rgb(var(--c-warn)); }

/* ── modal (ฟอร์มเพิ่ม/แก้) ───────────────────────────────────── */
.cf-modal-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgb(0 0 0 / 0.36);
  display: none; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto;
}
.cf-modal-backdrop.open { display: flex; }
.cf-modal { width: 100%; max-width: 30rem; background: rgb(var(--c-card)); border-radius: 1rem; box-shadow: var(--shadow-md); border: 1px solid rgb(var(--c-line) / 0.10); }
.cf-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgb(var(--c-line) / 0.10); }
.cf-modal-head h3 { font-size: 1rem; font-weight: 600; }
.cf-modal-close { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.5rem; border: 1px solid rgb(var(--c-line) / 0.14); background: rgb(var(--c-card)); }
.cf-modal-body { padding: 1.25rem; }
.cf-modal-foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.25rem; border-top: 1px solid rgb(var(--c-line) / 0.10); }
.cf-modal-error { font-size: 0.8rem; color: rgb(var(--c-danger)); margin-bottom: 0.9rem; display: none; }
.cf-modal-error.show { display: block; }
.cf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 480px) { .cf-field-row { grid-template-columns: 1fr; } }
.cf-hint { font-size: 0.72rem; color: rgb(var(--c-faint)); margin-top: 0.3rem; }

/* โลโก้จริงของแบรนด์ (PNG พื้นใส) — ใช้แทนวงกลมไอคอนเดิม */
.brand-mark-img { height: 2.4rem; width: auto; flex: none; display: block; }
.brand-wordmark-img { height: 1.2rem; width: auto; display: block; }

/* ประวัติระบบเก่า (legacy.html + member.html) */
.legacy-acct { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.4rem 1.25rem; margin-bottom: 1rem; font-size: 0.875rem; }
.legacy-acct div { min-width: 0; overflow-wrap: anywhere; }
.legacy-detail td { background: rgb(var(--c-ink) / 0.02); }
.legacy-detail dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1rem; margin: 0 0 0.9rem; font-size: 0.875rem; }
.legacy-detail dt { color: rgb(var(--c-faint)); }
.legacy-detail dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.legacy-resolve { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; }
.legacy-resolve textarea { flex: 1 1 18rem; min-height: 2.8rem; }
.legacy-msg { margin: 0.5rem 0 0; font-size: 0.85rem; }
.legacy-msg.is-error { color: rgb(var(--c-danger)); }
.legacy-msg.is-ok { color: rgb(var(--c-ok)); }
[data-legacy-row] .cf-badge { white-space: nowrap; }

/* แถบบน: ชื่อผู้ใช้ + เปลี่ยนรหัสผ่าน + ออกจากระบบ */
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.topbar-user-name { font-size: 0.85rem; color: rgb(var(--c-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.topbar-user .cf-btn { padding: 0.45rem 0.8rem; min-height: 2.5rem; }
.topbar-user .cf-btn svg { width: 1rem; height: 1rem; }
@media (max-width: 640px) {
  .topbar-user-name, .topbar-label { display: none; }
  .topbar-user .cf-btn { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: 0.45rem; }
}
.pw-wrap { position: relative; }
.pw-wrap .cf-input { padding-right: 3rem; }
.pw-eye { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: rgb(var(--c-muted)); cursor: pointer; border-radius: 0.5rem; }
.pw-eye:hover { color: rgb(var(--c-ink)); }

/* 17 ต.ค. 2569 ตรวจจอมือถือ — ช่องกรอก <16px iPhone ซูมเอง · ปุ่มต่ำกว่า 44px กดยาก
   · ลูก grid ไม่มี min-width:0 = ตารางข้างในดันการ์ดล้นจอ · ตารางกว้างกว่าจอต้องมีเงาบอกว่าเลื่อนได้ */
.grid > * { min-width: 0; }
.cf-table-wrap {
  background:
    linear-gradient(to right, rgb(var(--c-card)) 30%, rgb(var(--c-card) / 0)) left / 2rem 100% no-repeat local,
    linear-gradient(to left, rgb(var(--c-card)) 30%, rgb(var(--c-card) / 0)) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.16), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.16), transparent) right / 0.75rem 100% no-repeat scroll;
}
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .cf-input { font-size: 16px; }
  .cf-btn { min-height: 44px; }
  .cf-table td { min-width: 6.5rem; }
  .cf-table td:has(> input[type="checkbox"]) { min-width: 0; }
  /* ช่องปุ่ม (แก้/ชุดอะไหล่/ใส่รูป) เรียงแถวเดียว ไม่ซ้อนตั้งจนแถวสูง ~180px — ตารางเลื่อนข้างแทน */
  .cf-table td:has(.cf-btn) { white-space: nowrap; }
}
/* ป้าย "ใช้งาน" มีไอคอน lucide ขนาดตั้งต้น 24px ทำให้ป้ายสูงกว่าใบอื่น — ไอคอนในป้ายเท่าตัวอักษร */
.cf-badge svg { width: 0.85rem; height: 0.85rem; flex: none; }