/* CodexPHub · ธีมกลาง v4.1 Glass Mono (ร่าง · รอผู้ใช้อนุมัติ 2026-10-14)
   = สีเดิมของ v4 ทุกค่า + มาตราส่วนชุดเดียว + ไม่มีโค้ดเฉพาะหน้า (ap-* อยู่ที่หน้าของระบบนั้นเอง)
   สลับโหมด: <html data-theme="dark|light"> · ฟอนต์: Google Sans (อังกฤษ/ตัวเลข) + Noto Sans Thai Looped (ไทย)

   กฎมาตราส่วน — ทุกค่าขนาดต้องมาจากตัวแปรข้างล่าง ห้ามพิมพ์ตัวเลข px เอง
   ตัวหนังสือ 4 ขนาด  --fs-1 13 · --fs-2 15 · --fs-3 17 · --fs-4 28
   ความสูงชิ้นที่กดได้  --h-ctl 36 (ปุ่ม ช่องกรอก ค้นหา ตัวกรอง แถบสลับ) · --h-in 28 (ปุ่มในแถบสลับ) · --h-badge 22 (ป้ายสถานะ)
   ระยะห่าง  4 · 8 · 12 · 16 · 24 · 32
   มุมโค้ง  --r-sm 8 (ชิ้นเล็กในบรรทัด) · --r-md 12 (ช่องกรอกหลายบรรทัด การ์ดย่อย) · --r-lg 20 (แผง) · --r-pill (ชิ้นที่กดได้ทุกชิ้น) */
/* Google Sans มีตัวไทยแบบไม่มีหัวในตัว → ขอเฉพาะตัวอังกฤษ/ตัวเลข/เครื่องหมาย (text=) ตัวไทยจึงตกไปที่ Noto Sans Thai Looped
   ไม่ผูกเลขรุ่นของ Google แบบ v4 (ลิงก์ .../v16/...woff2) */
@import url("https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&display=swap&text=%20%21%22%23%24%25%26%27%28%29%2A%2B%2C-.%2F0123456789%3A%3B%3C%3D%3E%3F%40ABCDEFGHIJKLMNOPQRSTUVWXYZ%5B%5C%5D%5E_%60abcdefghijklmnopqrstuvwxyz%7B%7C%7D~%C2%B7%E2%80%93%E2%80%94%E2%80%A6%E2%80%9C%E2%80%9D%E2%80%98%E2%80%99%E2%80%A2%E2%9C%93%E2%9C%95");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@400;500;600;700&display=swap");

/* ── สี v4.1 คมชัด: ยึดสีระบบของ macOS (system colors) · การ์ดทึบแยกจากพื้นชัด · ขอบเส้นผม · เงาซ้อนบางๆ ── */
:root[data-theme="light"] {
  --bg-000:#e9ebf1; --bg-100:#ffffff; --bg-glow-1:#ffffff; --bg-glow-2:#e8ecf6;
  --bg-art:radial-gradient(60vw 50vh at 8% 0%, #c9d8ff99, transparent 70%), radial-gradient(50vw 50vh at 100% 30%, #ffd6e299, transparent 70%), radial-gradient(60vw 60vh at 40% 110%, #d9f2ff99, transparent 70%);
  --glass-100:#ffffffa6; --glass-200:#7676801f; --glass-border:#0000000f; --glass-highlight:#ffffff;
  --field-border:#c7c7cc; --ink:#1d1d1f; --ink-muted:#48484e; --ink-faint:#6e6e73;
  --solid:#1d1d1f; --on-solid:#ffffff; --accent:#007aff; --on-accent:#ffffff; --ring:#007aff;
  --success:#248a3d; --success-bg:#34c75924; --danger:#d70015; --danger-bg:#ff3b301f; --warning:#b25000; --warning-bg:#ff950024;
  --money-in:#248a3d; --money-out:#d70015; --money-fee:#b25000; --money-total:#8944ab; --ref:#0066cc;
  --shadow-glass:inset 0 1px 0 #ffffffe6, 0 1px 2px #0000000d, 0 12px 40px #0000001a; --shadow-pop:0 1px 3px #00000033, 0 0 0 .5px #0000001a;
  --glow-in:none; --glow-out:none; --glow-fee:none; --glow-total:none; --glow-ref:none;
  --scrim:#00000040; color-scheme: light;
  --c-blue:#007aff; --c-green:#34c759; --c-red:#ff3b30; --c-orange:#ff9500; --c-yellow:#ffcc00;
  --c-purple:#af52de; --c-teal:#30b0c7; --c-indigo:#5856d6; --c-pink:#ff2d55; --c-gray:#8e8e93;
}
:root, [data-theme="dark"] {
  --bg-000:#000000; --bg-100:#1c1c1e; --bg-glow-1:#0d1424; --bg-glow-2:#120c1c;
  --bg-art:radial-gradient(60vw 50vh at 8% 0%, #0b2a6b8c, transparent 70%), radial-gradient(50vw 50vh at 100% 25%, #5a0b1f73, transparent 70%), radial-gradient(60vw 60vh at 45% 115%, #1a0f4d80, transparent 70%);
  --glass-100:#1c1c1e80; --glass-200:#ffffff14; --glass-border:#ffffff0f; --glass-highlight:#ffffff40;
  --field-border:#636366; --ink:#f5f5f7; --ink-muted:#aeaeb2; --ink-faint:#8e8e93;
  --solid:#f5f5f7; --on-solid:#000000; --accent:#0a84ff; --on-accent:#ffffff; --ring:#0a84ff;
  --success:#30d158; --success-bg:#30d15829; --danger:#ff453a; --danger-bg:#ff453a29; --warning:#ffd60a; --warning-bg:#ffd60a24;
  --money-in:#30d158; --money-out:#ff453a; --money-fee:#ffd60a; --money-total:#bf5af2; --ref:#409cff;
  --shadow-glass:inset 0 1px 0 #ffffff1f, inset 0 0 0 1px #ffffff08, 0 20px 50px #000000a6; --shadow-pop:0 1px 3px #00000099, inset 0 .5px 0 #ffffff33;
  --glow-in:0 0 10px #30d15859; --glow-out:0 0 10px #ff453a59; --glow-fee:0 0 10px #ffd60a40; --glow-total:0 0 10px #bf5af259; --glow-ref:none;
  --scrim:#00000099; color-scheme: dark;
  --c-blue:#0a84ff; --c-green:#30d158; --c-red:#ff453a; --c-orange:#ff9f0a; --c-yellow:#ffd60a;
  --c-purple:#bf5af2; --c-teal:#40c8e0; --c-indigo:#5e5ce6; --c-pink:#ff375f; --c-gray:#8e8e93;
}

/* ── มาตราส่วน ── */
:root {
  --font-sans:"Google Sans", "Noto Sans Thai Looped", "Noto Sans Thai", system-ui, sans-serif;
  --fs-1:13px; --lh-1:20px;
  --fs-2:15px; --lh-2:22px;
  --fs-3:17px; --lh-3:24px;
  --fs-4:28px; --lh-4:34px;
  --h-ctl:36px; --h-in:28px; --h-badge:22px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --blur-glass:40px; --saturate-glass:190%;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg-art), var(--bg-000); background-attachment: fixed; color: var(--ink); font: 400 var(--fs-2)/var(--lh-2) var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
button, input, textarea, select { font: inherit; color: inherit; }
.hide { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── ตัวหนังสือ ── */
.gm-title { margin: 0; font-size: var(--fs-4); line-height: var(--lh-4); font-weight: 700; letter-spacing: -0.025em; }
.gm-h { margin: 0; font-size: var(--fs-3); line-height: var(--lh-3); font-weight: 600; }
.gm-sub, .gm-hint { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-muted); }
.gm-err { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--danger); }

/* ── แผงกระจก ── */
.gm-glass {
  position: relative; overflow: hidden;
  background: var(--glass-100); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass));
  backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass));
}
.gm-glass::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent); pointer-events: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gm-glass { background: var(--bg-100); } }
.gm-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--glass-border); }
.gm-panel-head h3 { margin: 0; font-size: var(--fs-3); line-height: var(--lh-3); font-weight: 600; }
.gm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--glass-border); }

/* ── ชิ้นที่กดได้: สูง --h-ctl เท่ากันทุกชิ้น ── */
.gm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--h-ctl); padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--fs-2); line-height: var(--lh-2); cursor: pointer; white-space: nowrap; transition: opacity .15s, transform .1s; text-decoration: none; }
.gm-btn:hover { opacity: .88; }
.gm-btn:active { transform: scale(.98); }
.gm-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.gm-btn--solid { background: var(--solid); color: var(--on-solid); box-shadow: var(--shadow-pop); }
.gm-btn--glass { background: var(--glass-200); color: var(--ink); border-color: var(--glass-border); }
.gm-btn--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.gm-btn--icon { width: var(--h-ctl); padding: 0; }
/* ไอคอน 2 ขนาด: 16 ในบรรทัด/ช่องค้นหา · 20 ในปุ่ม
   ไฟล์ในเครื่อง ไม่พึ่ง CDN: <svg class="gm-ico"><use href="/icons.svg#ti-search"/></svg> (CodexPHub_Theme/icons/icons.svg) */
.ti, .gm-ico { font-size: 16px; width: 16px; height: 16px; flex: none; }
.gm-btn .ti, .gm-btn .gm-ico { font-size: 20px; width: 20px; height: 20px; }
/* ── สีสันมาจากไอคอนและโลโก้ (พื้นยังเรียบ) ──
   ไอคอนสีตามความหมาย: <svg class="gm-ico" data-c="green">…  (blue green red orange yellow purple teal indigo pink gray)
   ไอคอนในกล่องสีแบบ macOS Settings: <span class="gm-tile" data-c="purple"><svg class="gm-ico">…</svg></span>
   กลุ่มสี: น้ำเงิน=ไปหน้า/ข้อมูล · เขียว=เงินเข้า/สำเร็จ · แดง=ลบ/ปิด/เงินออก · ส้ม=เตือน/เวลา · ม่วง=ความปลอดภัย · ฟ้าเขียว=ระบบ/เครื่อง · คราม=คน/องค์กร */
[data-c="blue"] { --c: var(--c-blue); } [data-c="green"] { --c: var(--c-green); } [data-c="red"] { --c: var(--c-red); }
[data-c="orange"] { --c: var(--c-orange); } [data-c="yellow"] { --c: var(--c-yellow); } [data-c="purple"] { --c: var(--c-purple); }
[data-c="teal"] { --c: var(--c-teal); } [data-c="indigo"] { --c: var(--c-indigo); } [data-c="pink"] { --c: var(--c-pink); } [data-c="gray"] { --c: var(--c-gray); }
.gm-ico[data-c] { color: var(--c); }
.gm-tile { display: inline-grid; place-items: center; width: var(--h-in); height: var(--h-in); border-radius: var(--r-sm); flex: none; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--c-gray)) 78%, #fff), var(--c, var(--c-gray))); box-shadow: 0 1px 2px #0000002e, inset 0 0 0 .5px #ffffff38; }
.gm-tile > .gm-ico { width: 18px; height: 18px; stroke-width: 2.2; }
.gm-tile--lg { width: 48px; height: 48px; border-radius: var(--r-md); }
.gm-tile--lg > .gm-ico { width: 28px; height: 28px; }

/* ── โลโก้ธนาคาร/กระเป๋าเงิน: ตัวขาวบนวงกลมสีแบรนด์ · 20 ในตาราง · 32 ในการ์ด
   <span class="gm-bank" data-b="kbank"><img src="/logos/banks/kbank.svg" alt="KBANK"></span> ── */
.gm-bank { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--b, var(--c-gray)); flex: none; overflow: hidden; box-shadow: inset 0 0 0 .5px #ffffff30; }
.gm-bank img { width: 72%; height: 72%; object-fit: contain; }
.gm-bank--lg { width: 32px; height: 32px; }
[data-b="kbank"]{--b:#138f2d} [data-b="scb"]{--b:#4e2e7f} [data-b="bbl"]{--b:#1e4598} [data-b="ktb"]{--b:#1ba5e1} [data-b="bay"]{--b:#fec43b}
[data-b="ttb"]{--b:#fff} [data-b="tmb"]{--b:#1279be} [data-b="gsb"]{--b:#eb198d} [data-b="baac"]{--b:#4b9b3e} [data-b="ghb"]{--b:#f57d23}
[data-b="kk"]{--b:#199ed8} [data-b="tisco"]{--b:#0b4ea2} [data-b="cimb"]{--b:#7e2f36} [data-b="uob"]{--b:#0b3a8b} [data-b="lhb"]{--b:#6d6e71}
[data-b="tcrb"]{--b:#00a2e5} [data-b="ibank"]{--b:#00a859} [data-b="icbc"]{--b:#c4001d} [data-b="sc"]{--b:#0072aa} [data-b="citi"]{--b:#056dae}
[data-b="hsbc"]{--b:#db0011} [data-b="mufg"]{--b:#e60012} [data-b="smbc"]{--b:#00a040} [data-b="tbank"]{--b:#f26f21} [data-b="pp"]{--b:#1d3a6e}
[data-b="tmn"]{--b:#fff} [data-b="shopee"]{--b:#ee4d2d} [data-b="line"]{--b:#06c755} [data-b="alipay"]{--b:#1677ff} [data-b="wechat"]{--b:#07c160}
[data-b="paypal"]{--b:#003087} [data-b="googlepay"]{--b:#4285f4} [data-b="applepay"]{--b:#000} [data-b="samsungpay"]{--b:#1428a0} [data-b="grab"]{--b:#00b14f}
[data-b="visa"]{--b:#1a1f71} [data-b="mastercard"]{--b:#eb001b} [data-b="jcb"]{--b:#0b4ea2} [data-b="americanexpress"]{--b:#2e77bc}

.gm-input { height: var(--h-ctl); width: 100%; padding: 0 var(--space-4); border-radius: var(--r-pill); background: var(--glass-200); color: var(--ink); border: 1px solid var(--field-border); font-size: var(--fs-2); line-height: var(--lh-2); }
textarea.gm-input { height: auto; min-height: calc(var(--h-ctl) * 2); padding: var(--space-2) var(--space-3); border-radius: var(--r-md); resize: vertical; }
.gm-input::placeholder { color: var(--ink-faint); }
.gm-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.gm-field > label { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-muted); }

.gm-search { position: relative; flex: 1 1 240px; max-width: 380px; }
.gm-search > svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; }
.gm-search .gm-input { padding-left: calc(var(--space-3) + 16px + var(--space-2)); }

/* แถบสลับ: กรอบ 36 = ขอบ 1 + ช่อง 3 + ปุ่ม 28 + ช่อง 3 + ขอบ 1 */
.gm-seg { display: inline-flex; align-items: center; height: var(--h-ctl); padding: 3px; gap: var(--space-1); border-radius: var(--r-pill); background: var(--glass-200); border: 1px solid var(--glass-border); }
.gm-seg button { height: var(--h-in); padding: 0 var(--space-3); border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-2); }
.gm-seg button.on { background: var(--solid); color: var(--on-solid); box-shadow: var(--shadow-pop); }

/* ตัวกรองแบบชิป: สูงเท่าปุ่ม */
.gm-filter { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--h-ctl); padding: 0 var(--space-4); border-radius: var(--r-pill); border: 1px solid var(--glass-border); background: transparent; cursor: pointer; white-space: nowrap; font-size: var(--fs-2); }
.gm-filter:hover { border-color: var(--field-border); }
.gm-filter.on { background: var(--glass-200); border-color: var(--ink); }

/* ตัวเลขนับ (ในปุ่ม/ตัวกรอง) */
.gm-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--space-1); border-radius: var(--r-pill); background: var(--glass-200); font-size: var(--fs-1); line-height: 1; font-variant-numeric: tabular-nums; }
.gm-count--warn { color: var(--warning); background: var(--warning-bg); }
.gm-count--bad { color: var(--danger); background: var(--danger-bg); }

/* ── ป้ายสถานะ (ไม่ใช่ปุ่ม) ── */
.gm-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--h-badge); padding: 0 var(--space-2); border-radius: var(--r-pill); font-size: var(--fs-1); line-height: var(--lh-1); font-weight: 600; color: var(--ink); background: var(--glass-200); border: 1px solid transparent; white-space: nowrap; }
.gm-chip--success { color: var(--success); background: var(--success-bg); border-color: transparent; }
.gm-chip--danger { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.gm-chip--warning { color: var(--warning); background: var(--warning-bg); border-color: transparent; }
.gm-chip--success::before { content: "✓"; }
.gm-chip--danger::before { content: "✕"; }
.gm-chip--warning::before { content: "!"; font-weight: 600; }

/* ── ตัวเลขสรุป ── */
.gm-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.gm-stat { padding: var(--space-4) var(--space-6); min-width: 0; }
.gm-stat__label { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: 600; color: var(--ink-faint); }
.gm-stat__value { margin-top: var(--space-1); font-size: var(--fs-4); line-height: var(--lh-4); font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-stat__delta { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-muted); }
.gm-stat__value--in, .gm-amt--in { color: var(--money-in); text-shadow: var(--glow-in); }
.gm-stat__value--out, .gm-amt--out { color: var(--money-out); text-shadow: var(--glow-out); }
.gm-stat__value--fee, .gm-amt--fee { color: var(--money-fee); text-shadow: var(--glow-fee); }
.gm-stat__value--total, .gm-amt--total { color: var(--money-total); text-shadow: var(--glow-total); }
.gm-amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.gm-ref { color: var(--ref); text-shadow: var(--glow-ref); font-variant-numeric: tabular-nums; white-space: nowrap; }
button.gm-ref, .gm-ref[data-copy] { cursor: copy; background: none; border: 0; padding: 0; font: inherit; }

/* ── ตาราง: คอลัมน์เท่าข้อความยาวสุด แถวทุกแถวใช้เส้นคอลัมน์เดียวกัน · จอแคบเลื่อนในกรอบ ไม่ล้นหน้า
   ใช้: <div class="gm-table-wrap"><div class="gm-table" style="--cols:7"><div class="gm-tr gm-th">…</div><div class="gm-tr">…</div></div></div> */
.gm-table-wrap { overflow-x: auto; }
.gm-table { display: grid; grid-template-columns: repeat(var(--cols, 4), max-content); justify-content: space-between; column-gap: var(--space-6); min-width: max-content; padding: 0; }
.gm-tr { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-height: 56px; border-bottom: 1px solid var(--glass-border); font-variant-numeric: tabular-nums; }
.gm-tr:last-child { border-bottom: 0; }
.gm-th { min-height: 40px; font-size: var(--fs-1); line-height: var(--lh-1); font-weight: 600; color: var(--ink-faint); }
.gm-tr .num { text-align: right; }
.gm-cell2 { display: flex; flex-direction: column; min-width: 0; }
.gm-cell2 small { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-muted); }
/* ── ตอนไม่มีข้อมูล / ข้อผิดพลาด: ไอคอนกล่องสี + หัวข้อ + 1 บรรทัด + ปุ่ม (ไม่ใช้ภาพวาด) ── */
.gm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); }
.gm-empty > .gm-tile { margin-bottom: var(--space-2); }
.gm-empty h3 { margin: 0; font-size: var(--fs-3); line-height: var(--lh-3); font-weight: 600; }
.gm-empty p { margin: 0 0 var(--space-2); max-width: 36ch; font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-muted); }
/* ไอคอนใช้ .gm-tile--lg สีตามเรื่อง: ว่าง=indigo · ไม่พบ=blue · ขัดข้อง=red · ไม่มีสิทธิ์=purple */

/* ── ตอนกำลังโหลด: แถบเทาแทนข้อความ ── */
.gm-skel { display: block; height: var(--lh-2); border-radius: var(--r-sm); background: linear-gradient(90deg, var(--glass-200) 25%, var(--glass-100) 50%, var(--glass-200) 75%); background-size: 200% 100%; animation: gm-skel 1.4s linear infinite; }
.gm-skel--sm { height: var(--lh-1); width: 60%; }
@keyframes gm-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── รูปคน: รูปจริง หรืออักษรแรกของชื่อ ── */
.gm-avatar { display: inline-grid; place-items: center; width: var(--h-ctl); height: var(--h-ctl); border-radius: var(--r-pill); background: var(--glass-200); border: 1px solid var(--glass-border); font-size: var(--fs-1); font-weight: 600; overflow: hidden; flex: none; }
.gm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gm-avatar--lg { width: 96px; height: 96px; font-size: var(--fs-4); }
/* เปลี่ยนรูปตัวเอง: <label class="gm-avatar-edit"><span class="gm-avatar gm-avatar--lg" data-me>สช</span><input type="file" accept="image/*"></label>
   กดที่รูป → เลือกไฟล์ → ย่อเป็น 256px ครอปวงกลม → ทุก .gm-avatar[data-me] ในหน้าเปลี่ยนตาม (glass-mono-core.js) */
.gm-avatar-edit { position: relative; display: inline-grid; cursor: pointer; border-radius: var(--r-pill); }
.gm-avatar-edit input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gm-avatar-edit::after { content: ""; position: absolute; right: 0; bottom: 0; width: var(--h-in); height: var(--h-in); border-radius: var(--r-pill);
  background: var(--accent) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h1a2 2 0 0 0 2-2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 3px var(--bg-100); transition: transform var(--dur) var(--ease); }
.gm-avatar-edit:hover::after { transform: scale(1.08); }
.gm-avatar-edit:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 45%, transparent); }

@supports not (grid-template-columns: subgrid) {
  .gm-tr { grid-template-columns: repeat(var(--cols, 4), minmax(96px, 1fr)); column-gap: var(--space-6); }
}

/* ═════════ ลูกเล่นแบบ macOS (v4.1) ═════════
   ทุกชิ้นใช้มาตราส่วนเดิม · การเคลื่อนไหวแบบสปริง (--ease) · ปิดเองเมื่อเครื่องตั้ง "ลดการเคลื่อนไหว"
   ส่วนที่ต้องกด/พิมพ์ (แถบสลับเลื่อน ⌘K แจ้งเตือน HUD) เปิดด้วย glass-mono-core.js */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --dur: .22s; }

/* ขอบโฟกัสแบบ Mac: วงฟ้าฟุ้ง ไม่ใช่เส้นแข็ง */
.gm-btn:focus-visible, .gm-input:focus-visible, .gm-filter:focus-visible, .gm-seg button:focus-visible, .gm-switch input:focus-visible + span {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 45%, transparent); }
.gm-input:focus { border-color: var(--ring); }

/* แถบเลื่อนบางแบบ Mac */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 25%, transparent) transparent; }

/* ── หน้าต่างมีไฟจราจร: <section class="gm-glass gm-window"><header class="gm-titlebar"><span class="gm-lights"><i></i><i></i><i></i></span><b>ชื่อ</b></header>… ── */
.gm-titlebar { display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-4); border-bottom: 1px solid var(--glass-border); font-size: var(--fs-1); color: var(--ink-muted); }
.gm-titlebar > b { flex: 1; text-align: center; font-weight: 600; color: var(--ink); margin-right: 52px; }
.gm-lights { display: inline-flex; gap: var(--space-2); }
.gm-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px #0003; transition: filter var(--dur); }
.gm-lights i:nth-child(2) { background: #febc2e; } .gm-lights i:nth-child(3) { background: #28c840; }
.gm-window:not(:hover) .gm-lights i { filter: saturate(.2) brightness(1.15); } /* ไม่ได้ใช้หน้าต่างนี้ = ไฟจาง เหมือน Mac */

/* ── แถบข้าง (sidebar) กระจกฝ้า ── */
.gm-side { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-2); }
.gm-side__label { padding: var(--space-3) var(--space-3) var(--space-1); font-size: var(--fs-1); line-height: var(--lh-1); font-weight: 600; color: var(--ink-faint); }
.gm-side a { display: flex; align-items: center; gap: var(--space-2); height: var(--h-ctl); padding: 0 var(--space-2); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; transition: background var(--dur) var(--ease); }
.gm-side a:hover { background: var(--glass-200); }
.gm-side a.on { background: var(--accent); color: var(--on-accent); }
.gm-side a.on .gm-tile { box-shadow: 0 0 0 1px #fff6; }
.gm-side a .gm-count { margin-left: auto; }
.gm-side a.on .gm-count { background: #ffffff40; color: inherit; }

/* ── แถบสลับแบบเลื่อน: ตัวเลือกวิ่งไปหาปุ่มที่กด (JS ใส่ .gm-seg__thumb ให้เอง) ── */
.gm-seg { position: relative; }
.gm-seg__thumb { position: absolute; top: 3px; height: var(--h-in); border-radius: var(--r-pill); background: var(--solid); box-shadow: var(--shadow-pop); transition: left var(--dur) var(--ease), width var(--dur) var(--ease); }
.gm-seg.is-live button { position: relative; z-index: 1; transition: color var(--dur) var(--ease); }
.gm-seg.is-live button.on { background: transparent; box-shadow: none; color: var(--on-solid); }

/* ── สวิตช์เปิด/ปิด: <label class="gm-switch"><input type="checkbox"><span></span>ข้อความ</label> ── */
.gm-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.gm-switch input { position: absolute; opacity: 0; pointer-events: none; }
.gm-switch > input + span { position: relative; width: 38px; height: var(--h-badge); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background var(--dur) var(--ease); flex: none; }
.gm-switch > input + span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0005; transition: transform var(--dur) var(--ease); }
.gm-switch input:checked + span { background: var(--c-green); }
.gm-switch input:checked + span::after { transform: translateX(16px); }

/* ── เมนู/ป๊อปโอเวอร์ + ปุ่มลัด ── */
.gm-menu { min-width: 220px; padding: var(--space-1); border-radius: var(--r-md); background: var(--glass-100); border: 1px solid var(--glass-border); box-shadow: 0 12px 40px #0000004d;
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass)); backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass)); }
.gm-menu button { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--h-in); padding: 0 var(--space-2); border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; cursor: pointer; font-size: var(--fs-2); }
.gm-menu button:hover, .gm-menu button.on { background: var(--accent); color: var(--on-accent); }
.gm-menu button:hover .gm-ico, .gm-menu button.on .gm-ico { color: inherit; }
.gm-menu hr { margin: var(--space-1) var(--space-2); border: 0; border-top: 1px solid var(--glass-border); }
.gm-kbd { margin-left: auto; font-size: var(--fs-1); color: var(--ink-faint); letter-spacing: .04em; }
.gm-menu button:hover .gm-kbd, .gm-menu button.on .gm-kbd { color: inherit; opacity: .8; }
kbd.gm-key { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--space-1); border-radius: 6px; border: 1px solid var(--glass-border); border-bottom-width: 2px; font: 600 var(--fs-1)/1 var(--font-sans); color: var(--ink-muted); }

/* ── ⌘K ค้นหาทุกอย่าง (แบบ Spotlight) ── */
.gm-spot { position: fixed; inset: 0; z-index: 50; display: grid; justify-items: center; align-content: start; padding: 14vh var(--space-4) 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.gm-spot.open { opacity: 1; pointer-events: auto; }
.gm-spot__box { width: min(640px, 100%); border-radius: var(--r-lg); overflow: hidden; transform: scale(.96) translateY(-8px); transition: transform var(--dur) var(--ease); }
.gm-spot.open .gm-spot__box { transform: none; }
.gm-spot__in { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid var(--glass-border); }
.gm-spot__in .gm-ico { width: 20px; height: 20px; color: var(--ink-faint); }
.gm-spot__in input { flex: 1; height: 56px; border: 0; background: transparent; font-size: var(--fs-3); outline: none; }
.gm-spot .gm-menu { border: 0; border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; max-height: 50vh; overflow: auto; }
.gm-menu [hidden] { display: none; }
.gm-spot__box.gm-glass { background: color-mix(in srgb, var(--bg-100) 82%, transparent); }
.gm-spot .gm-menu button { height: var(--h-ctl); }
.gm-spot .gm-menu small { display: block; padding: var(--space-2) var(--space-2) var(--space-1); font-size: var(--fs-1); color: var(--ink-faint); font-weight: 600; }

/* ── แจ้งเตือนมุมขวาบน (แบบ Notification Center) ── */
.gm-toasts { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); width: min(360px, calc(100vw - 32px)); }
.gm-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 2px var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); animation: gm-in .35s var(--ease); }
.gm-toast .gm-tile { grid-row: span 2; }
.gm-toast b { font-size: var(--fs-1); line-height: var(--lh-1); }
.gm-toast time { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-faint); }
.gm-toast p { grid-column: 2 / -1; margin: 0; font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-muted); }
.gm-toast.out { animation: gm-out .25s var(--ease) forwards; }
@keyframes gm-in { from { opacity: 0; transform: translateX(24px) scale(.98); } }
@keyframes gm-out { to { opacity: 0; transform: translateX(24px); } }

/* ── HUD กลางจอ (เช่น "คัดลอกแล้ว") แบบตอนปรับเสียงบน Mac ── */
.gm-hud { position: fixed; left: 50%; top: 50%; z-index: 70; display: grid; justify-items: center; gap: var(--space-2); width: 160px; padding: var(--space-6) var(--space-4); border-radius: var(--r-lg); text-align: center; font-size: var(--fs-1); transform: translate(-50%, -50%) scale(.9); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.gm-hud.show { opacity: 1; transform: translate(-50%, -50%); }
.gm-hud .gm-ico { width: 48px; height: 48px; stroke-width: 1.6; }

/* ── คำอธิบายเมื่อชี้ค้าง: <button data-tip="ข้อความ"> ── */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); padding: 2px var(--space-2); border-radius: 6px; background: var(--solid); color: var(--on-solid); font-size: var(--fs-1); line-height: var(--lh-1); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s var(--ease); z-index: 5; }
[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .5s; }

/* ── แถวที่เลือกแบบ Finder ── */
.gm-tr:not(.gm-th) { transition: background .15s; }
.gm-tr:not(.gm-th):hover { background: var(--glass-200); }
.gm-tr.is-sel { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--accent); }

/* ── จุดแดงนับแบบไอคอนแอป: <span class="gm-dot-badge" data-n="3">…</span> ── */
.gm-dot-badge { position: relative; display: inline-flex; }
.gm-dot-badge[data-n]::after { content: attr(data-n); position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: var(--r-pill); background: var(--c-red); color: #fff; font: 600 var(--fs-1)/18px var(--font-sans); text-align: center; box-shadow: 0 0 0 2px var(--bg-000); }


/* ═════════ กฎหลัก (ผู้ใช้สั่ง 2026-10-14): พื้นหลังแยกเป็นชั้นของตัวเอง + กระจกดำโปร่งเข้มแบบ iOS รุ่นล่าสุด ═════════
   1. พื้นหลัง = ชั้นเดียวของทั้งหน้า (body: --bg-art + --bg-000) ดำเข้มมีแสงสีจางๆ ให้กระจกมีอะไรสะท้อน · ทุกหน้าได้อัตโนมัติ
   2. แผง/การ์ด = กระจกดำโปร่ง เบลอแรง · แยกชั้นด้วยความทึบและความสว่าง ไม่ใช้เส้นขอบรอบกล่อง
   3. เส้นเหลือแค่ตัวคั่นแถวในรายการ (จางมาก เว้นซ้ายแบบ iOS) · ปุ่ม/ช่องกรอก/ตัวกรอง = พื้นเติมสี ไม่มีกรอบ */
.gm-glass { border: 0; }
.gm-glass::before { left: 8%; right: 8%; background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent); opacity: .7; }
.gm-panel-head, .gm-toolbar { border-bottom: 0; }
.gm-panel-head + .gm-toolbar, .gm-panel-head + .gm-table-wrap, .gm-toolbar + .gm-table-wrap { box-shadow: inset 0 1px 0 var(--glass-border); }
.gm-titlebar { border-bottom: 0; background: color-mix(in srgb, var(--glass-200) 40%, transparent); }
.gm-btn--glass { border-color: transparent; background: var(--glass-200); }
.gm-btn--glass:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.gm-btn--danger { border-color: transparent; }
.gm-seg { border-color: transparent; }
.gm-filter { border-color: transparent; background: var(--glass-200); }
.gm-filter:hover { border-color: transparent; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.gm-filter.on { border-color: transparent; background: var(--solid); color: var(--on-solid); }
.gm-filter.on .gm-count { background: color-mix(in srgb, var(--on-solid) 15%, transparent); color: inherit; }
.gm-input { border-color: transparent; background: var(--glass-200); }
.gm-input:focus { border-color: transparent; }
.gm-avatar { border-color: transparent; }
.gm-menu { border: 0; box-shadow: var(--shadow-glass); }
.gm-side { border-right: 0 !important; }
/* ตัวคั่นแถวจางและเว้นซ้ายแบบ iOS */
.gm-tr { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--glass-border); }
.gm-tr:last-child, .gm-th { box-shadow: none; }
.gm-th { background: color-mix(in srgb, var(--glass-200) 50%, transparent); }
/* การ์ดตัวเลข: เรียง 4 ใบได้ในจอคอมทั่วไป ไม่เหลือใบเดียวโดดบรรทัดล่าง */
.gm-stat-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
/* ตัวเลขยอดเงินไม่โดนตัด "..." : การ์ดแคบลง ตัวเลขย่อตามความกว้างการ์ด (สูงสุด 28) · 6.2 = ความกว้าง "99,999,999.99" ที่วัดจริง ÷ ขนาดตัวอักษร */
.gm-stat { container-type: inline-size; }
.gm-stat__value { font-size: min(var(--fs-4), calc((100cqi - 48px) / 6.2)); text-overflow: clip; }

/* ── ตาราง: แถบหัวตาราง เส้นคั่น และแถวที่เลือก ยาวเต็มแผง · ระยะขอบซ้ายขวาอยู่ที่ช่องแรก/ช่องท้าย (คอลัมน์ยังตรงกันทุกแถว) ── */
.gm-tr > :first-child { padding-left: var(--space-6); }
.gm-tr > :last-child { padding-right: var(--space-6); }

/* ── กรอบมีสี: ใส่ data-c ที่ .gm-glass → แสงสีจางจากมุมซ้ายบน + ประกายขอบบนเป็นสีนั้น (ยังไม่มีเส้นขอบ) ──
   <div class="gm-glass gm-stat" data-c="green"> · ใช้กับการ์ดยอดเงิน/แผงหลัก · สีตามกลุ่มความหมายเดิม */
.gm-glass[data-c] {
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) var(--tint, 22%), transparent), transparent 62%), var(--glass-100);
  box-shadow: var(--shadow-glass), inset 0 1px 0 color-mix(in srgb, var(--c) 55%, transparent); }
.gm-glass[data-c]::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 80%, #fff), transparent); }
:root[data-theme="light"] .gm-glass[data-c] { --tint: 14%; }
@media (max-width: 960px) { .gm-tabbar { border-top: 0; } }

/* ═════════ มือถือ + responsive (v4.1) ═════════
   จุดตัด 3 ขนาด (ใช้เลขเดียวกันทุกหน้า): มือถือ ≤ 600 · แท็บเล็ต ≤ 960 · คอม > 960
   หน้าเว็บต้องมี <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   จอสัมผัส: ปุ่มสูง 44 ตามมาตรฐาน Apple (นิ้วกดง่าย) · ช่องกรอกตัวหนังสือ 16 กัน iPhone ซูมเอง */
@media (pointer: coarse) {
  :root { --h-ctl: 44px; --h-in: 36px; }
  .gm-input, .gm-spot__in input { font-size: max(16px, var(--fs-2)); }
  [data-tip]::after { display: none; } /* จอสัมผัสไม่มีการชี้ค้าง */
  .gm-side a { height: var(--h-ctl); }
}

/* ── แถบเมนูล่างแบบ iPhone: <nav class="gm-tabbar"><a class="on" href="#"><svg class="gm-ico">…</svg>เงินเข้า</a>…</nav>
   แสดงเฉพาะจอ ≤ 960 · ใส่ .gm-has-tabbar ที่ body ให้เนื้อหาไม่โดนบัง ── */
.gm-tabbar { display: none; }
@media (max-width: 960px) {
  .gm-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around;
    padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom));
    background: var(--glass-100); border-top: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass)); backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass)); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gm-tabbar { background: var(--bg-100); } }
  .gm-tabbar a, .gm-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; max-width: 96px;
    border: 0; background: none; color: var(--ink-faint); text-decoration: none; font-size: var(--fs-1); line-height: 1; cursor: pointer; }
  .gm-tabbar .gm-ico { width: 24px; height: 24px; }
  .gm-tabbar .on { color: var(--accent); }
  .gm-tabbar .gm-dot-badge[data-n]::after { top: -4px; right: -10px; }
  .gm-has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ── แผ่นเลื่อนจากล่าง (bottom sheet) แทนเมนู/ป๊อปอัปบนมือถือ
   <div class="gm-sheet" id="more"><div class="gm-glass gm-sheet__box">…</div></div> · เปิดด้วยปุ่ม data-sheet="#more" (glass-mono-core.js) ── */
.gm-sheet { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; justify-content: center; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.gm-sheet.open { opacity: 1; pointer-events: auto; }
.gm-sheet__box { width: min(560px, 100%); max-height: 85vh; overflow: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--space-2) var(--space-2) calc(var(--space-4) + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .32s var(--ease); background: color-mix(in srgb, var(--bg-100) 96%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); border-top: 1px solid var(--glass-border); }
.gm-sheet.open .gm-sheet__box { transform: none; }
.gm-sheet__box::before { content: ""; display: block; width: 36px; height: 5px; margin: 0 auto var(--space-3); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 25%, transparent); } /* ขีดจับ */
.gm-sheet .gm-menu { border: 0; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.gm-sheet .gm-menu button { height: var(--h-ctl); }

/* ── ตารางเป็นการ์ดบนมือถือ: ใส่ .gm-table--stack + data-label="ชื่อคอลัมน์" ที่ช่อง
   ช่องที่มี .gm-main = บรรทัดหลัก (ชื่อ) เต็มแถว · .num ชิดขวา ── */
@media (max-width: 600px) {
  .gm-table--stack { display: block; min-width: 0; padding: 0; }
  .gm-table--stack .gm-tr.gm-th { display: none; }
  .gm-table--stack .gm-tr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); min-height: 0; }
  .gm-table--stack .gm-tr > * { min-width: 0; }
  .gm-table--stack .gm-tr > [data-label]::before { content: attr(data-label) " "; color: var(--ink-faint); font-size: var(--fs-1); }
  .gm-table--stack .gm-tr > .gm-main { grid-column: 1; grid-row: 1; }
  .gm-table--stack .gm-tr > .gm-main::before { display: none; }
  .gm-table--stack .gm-tr > .num { grid-column: 2; grid-row: 1; text-align: right; align-self: start; }
  .gm-table--stack .gm-tr > .num::before { display: none; }
  .gm-table--stack .gm-tr > :not(.gm-main):not(.num) { font-size: var(--fs-1); }
}

/* ── ปรับชิ้นเดิมให้พอดีจอเล็ก ── */
@media (max-width: 960px) {
  .gm-titlebar .gm-lights { display: none; }
  .gm-titlebar > b { text-align: left; }
}
@media (max-width: 600px) {
  .gm-title { font-size: var(--fs-4); }
  .gm-panel-head, .gm-toolbar { padding-left: var(--space-4); padding-right: var(--space-4); }
  .gm-tr > :first-child { padding-left: var(--space-4); }
  .gm-tr > :last-child { padding-right: var(--space-4); }
  .gm-table--stack .gm-tr > * { padding: 0 !important; }
  /* ตัวเลขสรุป: ปัดซ้าย-ขวาทีละใบ (แบบการ์ดใน iPhone) แทนเรียงลงยาว */
  .gm-stat-row { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-1); }
  .gm-stat-row > * { scroll-snap-align: start; }
  /* แถบเครื่องมือ: ช่องค้นหาเต็มบรรทัด · ตัวกรองปัดซ้าย-ขวาได้ */
  .gm-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gm-toolbar > * { flex: none; }
  .gm-toolbar .gm-search { order: -1; flex: 1 0 100%; max-width: none; margin: 0 !important; }
  .gm-toolbar:has(.gm-search) { flex-wrap: wrap; }
  .gm-toasts { left: var(--space-2); right: var(--space-2); top: calc(var(--space-2) + env(safe-area-inset-top)); width: auto; }
  .gm-spot { padding: env(safe-area-inset-top) 0 0; }
  .gm-spot__box { width: 100%; height: 100%; border-radius: 0; }
  .gm-spot .gm-menu { max-height: none; }
  .gm-ctx { display: none !important; } /* มือถือใช้ gm-sheet แทนเมนูคลิกขวา */
}