/* app.css - Redesign for Nongbokwa Neo (Theme System) */

:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 99px;
  --font-sans: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 12px);

  /* ---- จังหวะระยะห่าง (ฐาน 4px) — ใช้ token แทนการเดาเลขทีละจุด ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- ระยะบรรทัด ----
     ⚠️ ภาษาไทยมีสระบน/ล่างและวรรณยุกต์ซ้อนกันได้ 2 ชั้น ต้องการที่มากกว่าอังกฤษ
        พาดหัวที่ตั้ง line-height 1.2 แบบฝรั่งจะทำให้วรรณยุกต์เกือบชนบรรทัดบน */
  --leading-head: 1.35;
  /* ⚠️ 1.75 ไม่ใช่ตัวเลขสวยๆ — วัดจาก Zaapi (16px/28px) แล้วพบว่าไทยได้ประโยชน์
     มากกว่าอังกฤษด้วยซ้ำ เพราะสระบน-ล่างและวรรณยุกต์ซ้อนกันได้ 2 ชั้น
     ดูที่มาเต็มใน /static/docs/ux-study-zaapi.html */
  --leading-body: 1.75;

  /* ---- น้ำหนักตัวอักษร ----
     ⚠️ ลำดับชั้นมาจาก "ความต่างของน้ำหนัก" ไม่ใช่ทุกอย่างหนา 800 เท่ากันหมด
        ของเดิมพาดหัว 900 หัวข้อ 800 ชื่อการ์ด 800 = ตะโกนพร้อมกันหมด สายตาไม่รู้จะมองไหน */
  /* ⚠️ ลำดับชั้นต้องมาจากความต่างของ "ขนาด" เป็นหลัก ความหนาเป็นตัวช่วยเท่านั้น
     Zaapi ใช้น้ำหนัก 500-600 ทั้งเว็บ แต่พาดหัว 36px กับเนื้อหา 16px = ต่างกันเกินเท่าตัว
     ของเราเดิมขนาดต่างกันน้อยเลยต้องไปเพิ่มความหนาแทน ผลคือทุกอย่างตะโกน */
  --weight-hero: 700;
  --weight-section: 700;
  --weight-card: 600;
}

:root[data-theme="light"] {
  --color-primary: #0D8477;
  --color-primary-text: #0A6157;
  --color-btn-text: #FFFFFF;
  
  
  
  
  --color-primary-dark: #0A6A60;
  --color-primary-light: rgba(13, 132, 119, 0.13);
  --color-primary-gradient: linear-gradient(135deg, #0B7A6E 0%, #0A6157 100%);
  --color-primary-shadow: rgba(13, 132, 119, 0.25);
  
  --color-bg: #FDF8F0;
  --color-bg-gradient: radial-gradient(circle at top, #DDF0E7 0%, #FDF8F0 45%, #FDF8F0 100%);
  --color-surface: #FFFFFF;
  --color-surface-hover: #F1F7F4;
  
  --color-text-main: #2C3B37;
  --color-text-muted: #5E706B;
  
  --color-border: #E6EDE9;
  --color-border-hover: #D3E1DB;
  
  --color-success: #059669;
  --color-success-bg: #D1FAE5;
  --color-success-border: #A7F3D0;
  
  --color-danger: #DC2626;
  --color-danger-solid: #DC2626;
  --color-danger-bg: #FEE2E2;
  --color-danger-border: #FECACA;
  
  --color-info: #2563EB;
  --color-info-bg: #DBEAFE;
  --color-info-border: #BFDBFE;
  
  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;
  --color-warning-border: #FDE68A;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-sheet: 0 -10px 25px -5px rgba(0, 0, 0, 0.1), 0 -8px 10px -6px rgba(0, 0, 0, 0.1);
  
  --color-map-bg: #E2EAE6;
  --color-btn-alt-bg: #EDF5F2;
  --color-btn-alt-active: #DEECE7;
}

:root[data-theme="dark"] {
  --color-primary: #2FBFA9;
  --color-primary-text: #62DCC6;
  --color-btn-text: #0B1B18;
  
  
  
  
  --color-primary-dark: #62DCC6;
  --color-primary-light: rgba(47, 191, 169, 0.18);
  --color-primary-gradient: linear-gradient(135deg, #62DCC6 0%, #2FBFA9 100%);
  --color-primary-shadow: rgba(47, 191, 169, 0.2);
  
  --color-bg: #0F1917;
  --color-bg-gradient: radial-gradient(circle at top, #16332D 0%, #0F1917 50%, #0F1917 100%);
  --color-surface: #182421;
  --color-surface-hover: #1F2F2B;
  
  --color-text-main: #E9F1EE;
  --color-text-muted: #9BAAA6;
  
  --color-border: #2A3835;
  --color-border-hover: #3A4A46;
  
  --color-success: #34D399;
  --color-success-bg: rgba(52, 211, 153, 0.15);
  --color-success-border: #059669;
  
  --color-danger: #F87171;
  --color-danger-solid: #DC2626;
  --color-danger-bg: rgba(248, 113, 113, 0.15);
  --color-danger-border: #DC2626;
  
  --color-info: #60A5FA;
  --color-info-bg: rgba(96, 165, 250, 0.15);
  --color-info-border: #2563EB;
  
  --color-warning: #FBBF24;
  --color-warning-bg: rgba(251, 191, 36, 0.15);
  --color-warning-border: #D97706;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-sheet: 0 -10px 25px -5px rgba(0, 0, 0, 0.5), 0 -8px 10px -6px rgba(0, 0, 0, 0.4);
  
  --color-map-bg: #182421;
  --color-btn-alt-bg: #1F2F2B;
  --color-btn-alt-active: #2A3835;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  background-image: var(--color-bg-gradient);
  color: var(--color-text-main);
  padding-bottom: calc(72px + var(--safe-bottom));
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: break-word;
}
.page { padding: 16px; max-width: 500px; margin: 0 auto; }
.map-page { padding: 0; max-width: 100%; }

/* ---- Header ---- */
.app-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  /* พื้นทึบ + เบลอ กันเนื้อหาเลื่อนไปโชว์ทะลุหลังแถบ (บั๊กหัวข้อทับโลโก้) */
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.app-header .brand {
  font-weight: var(--weight-hero);
  font-size: 17px;
  letter-spacing: -0.2px;
  color: var(--color-primary-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-header .brand img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.lang-toggle {
  display: flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.lang-toggle a {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.lang-toggle a.active {
  background: var(--color-primary-light);
  color: var(--color-primary-text);
}
.theme-toggle {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
  color: var(--color-text-main);
}
.theme-toggle:active { transform: scale(0.95); }

/* ---- Bottom Nav ---- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 10px 0 var(--safe-bottom);
  z-index: 100;
  box-shadow: var(--shadow-sheet);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center;
  font-size: 11px; color: var(--color-text-muted); text-decoration: none; gap: 4px;
  font-weight: 600; transition: all 0.25s ease;
  flex: 1; padding: 4px 0;
}
.bottom-nav a svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s ease, stroke-width 0.25s ease;
}
.bottom-nav a.active { color: var(--color-primary-text); }
.bottom-nav a.active svg { transform: translateY(-3px) scale(1.1); stroke-width: 2.5; }
.bottom-nav a span { display: block; font-size: 11px; }

/* ---- map controls ---- */
#controls { margin-bottom: 0; position: relative; z-index: 10; padding: 8px 16px 0; }
#search {
  width: 100%; padding: 14px 16px 14px 44px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  font-size: 15px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
  background: var(--color-surface) url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23A0A0A5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') no-repeat 16px center;
  background-size: 18px; outline: none; transition: all 0.2s; font-family: var(--font-sans); color: var(--color-text-main);
}
#search:focus { border-color: var(--color-primary-text); box-shadow: 0 0 0 3px var(--color-primary-light); }
#chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 12px;
  margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-main); font-size: 14px; white-space: nowrap;
  font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 4px;
}
.chip.active { background: var(--color-primary-light); border-color: var(--color-primary-text); color: var(--color-primary-text); transform: scale(1.02); }

#controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; padding-bottom: 12px; }
#radius, #area { padding: 8px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-text-main); outline: none; }
.open-toggle { font-size: 14px; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-text-main); white-space: nowrap; }
.open-toggle input[type=checkbox] { accent-color: var(--color-primary-text); width: 18px; height: 18px; }

/* Use my location button styling */
#use-my-location {
  padding: 12px 20px; border-radius: var(--radius-pill); border: none;
  background: var(--color-primary-light); color: var(--color-primary-dark); font-size: 14px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); transition: transform 0.2s;
}
#use-my-location:active { transform: scale(0.95); }

/* In map page, it's floating */
.map-page #use-my-location {
  position: absolute; bottom: 30px; right: 16px; z-index: 10;
  width: 50px; height: 50px; border-radius: 50%; padding: 0;
  background: var(--color-surface); color: var(--color-primary-text);
  box-shadow: var(--shadow-lg); border: none; font-size: 0;
  justify-content: center;
}
.map-page #use-my-location::after {
  content: ''; display: block; width: 22px; height: 22px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23FF7A59" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polygon points="3 11 22 2 13 21 11 13 3 11"></polygon></svg>');
  background-size: contain; background-repeat: no-repeat;
}

.geo-feedback { font-size: 13px; padding: 10px 14px; border-radius: var(--radius-md); margin-top: 8px; text-align: center; font-weight: 600; }
.geo-feedback.ok, .geo-status.ok { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.geo-feedback.warn, .geo-status.warn { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-border); }

#list-banner { background: var(--color-warning-bg); color: var(--color-warning); padding: 10px 14px; border-radius: var(--radius-md); font-size: 13px; margin: 0 16px 12px; font-weight: 600; border: 1px solid var(--color-warning-border); }

.map-container { position: relative; }
#map { width: 100%; height: 45vh; min-height: 250px; background: var(--color-map-bg); position: relative; z-index: 1; }

/* ---- place list (Bottom Sheet style) ---- */
.place-list {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--color-bg); position: relative; z-index: 2;
  border-radius: 24px 24px 0 0; padding: 24px 16px 16px;
  margin-top: -24px; box-shadow: var(--shadow-sheet);
  min-height: 50vh;
}
.place-list::before {
  content: ''; display: block; width: 40px; height: 5px;
  background: var(--color-border); border-radius: 4px; position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
}
/* ยังไม่มีผลลัพธ์ (มีแค่ empty-state) → ยุบ sheet ตามเนื้อหา + ซ่อนขีดจับลาก
   กันหน้าเลื่อนขึ้นมาเจอพื้นที่เปล่าครึ่งจอทั้งที่ไม่มีอะไรให้ดู */
.place-list:has(.empty-state) { min-height: 0; }
.place-list:has(.empty-state)::before { display: none; }
.place-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s; cursor: pointer;
}
.place-card:active { transform: scale(0.98); background: var(--color-surface-hover); box-shadow: var(--shadow-md); }
.place-card-title { font-weight: 800; font-size: 17px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.place-card-meta { font-size: 13.5px; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.place-card-meta .status { padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.place-card-meta .status.open { background: var(--color-success-bg); color: var(--color-success); }
.place-card-meta .status.closed { background: var(--color-danger-bg); color: var(--color-danger); }
.place-card-meta .confirm { color: var(--color-info); font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; background: var(--color-info-bg); padding: 4px 10px; border-radius: var(--radius-pill); }
.empty-state { padding: 40px 16px; text-align: center; color: var(--color-text-muted); font-size: 15px; font-weight: 500; }
.empty-state a { color: var(--color-primary-text); font-weight: 700; text-decoration: none; }
/* ค้นด้วยคำ = ไม่จำกัดรัศมี — ต้องบอกผู้ใช้ ไม่งั้นงงว่าทำไมได้ร้านไกลกว่ารัศมีที่ตั้งไว้ */
.list-scope-note { padding: 8px 16px 2px; font-size: 12.5px; color: var(--color-text-muted); }

/* ---- place detail ---- */
.place-detail { max-width: 500px; margin: 0 auto; padding: 16px; }
.place-detail h1 { font-size: 26px; margin: 0 0 8px; font-weight: 800; }
.place-detail .category { color: var(--color-primary-dark); font-weight: 700; font-size: 14px; margin: 0 0 16px; background: var(--color-primary-light); display: inline-block; padding: 6px 12px; border-radius: var(--radius-pill); }
.place-detail .address { color: var(--color-text-main); font-size: 15px; line-height: 1.6; margin-bottom: 16px; }
.place-detail a { color: var(--color-primary-text); text-decoration: none; font-weight: 600; }
.banner-closed { background: var(--color-danger-bg); color: var(--color-danger); padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 16px; font-weight: 700; font-size: 14px; text-align: center; border: 1px solid var(--color-danger-border); }
.confirm-badge { color: var(--color-info); font-weight: 700; font-size: 14px; background: var(--color-info-bg); display: inline-block; padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 16px; border: 1px solid var(--color-info-border); }
/* ชื่อบัญชีปลายทางใต้ QR — เล็กแต่ต้องอ่านออก คนโอนเงินต้องรู้ว่าเงินไปไหน */
.payee-line { font-size: 13px; color: var(--color-text-muted); margin: 8px 0 2px; }
.payee-line b { color: var(--color-text); }
/* ผลการส่งฟอร์มในหน้าร้าน — ต้องเห็นทันทีที่เด้งกลับมา ไม่งั้นผู้ใช้ไม่รู้ว่าสำเร็จไหม */
.form-flash { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); font-weight: 600; font-size: 14.5px; line-height: 1.5; padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 16px; }
.form-flash.warn { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
/* ห้าง: Google ยืนยันไม่ได้ว่ารับสัตว์ — ป้ายนี้ต้องเด่นพอที่คนจะอ่านก่อนขับรถไป */
.unverified-badge { color: var(--color-warning); font-weight: 600; font-size: 13.5px; line-height: 1.5; background: var(--color-warning-bg); display: block; padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 16px; border: 1px solid var(--color-warning-border); }
.place-note { background: var(--color-warning-bg); padding: 16px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--color-warning); border: 1px solid var(--color-warning-border); margin-bottom: 16px; line-height: 1.5; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
a.btn-nav, button.btn-nav {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  background: var(--color-primary-gradient); color: var(--color-btn-text) !important; text-decoration: none;
  padding: 16px; border-radius: var(--radius-pill); font-weight: 800; font-size: 16px; margin: 24px 0;
  box-shadow: 0 6px 16px var(--color-primary-shadow); transition: transform 0.2s;
}
a.btn-nav:active, button.btn-nav:active { transform: scale(0.97); }
.place-actions { display: flex; flex-direction: column; gap: 12px; }
.place-actions details { background: var(--color-surface); padding: 16px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.place-actions details summary { font-weight: 700; font-size: 15px; cursor: pointer; color: var(--color-text-main); outline: none; }
.place-actions form { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.place-actions select, .place-actions input[type=text], .place-actions input[type=file] { width: 100%; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--color-border); font-family: var(--font-sans); font-size: 14px; background: var(--color-bg); color: var(--color-text-main); }
.place-actions button { padding: 12px; border-radius: var(--radius-pill); border: none; background: var(--color-btn-alt-bg); font-weight: 700; font-family: var(--font-sans); font-size: 14px; cursor: pointer; transition: background 0.2s; color: var(--color-text-main); }
.place-actions button:active { background: var(--color-btn-alt-active); }
.not-found { text-align: center; padding: 80px 16px; }
.not-found h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.not-found p { color: var(--color-text-muted); margin-bottom: 24px; }
.not-found a { display: inline-block; background: var(--color-primary-text); color: var(--color-btn-text); padding: 12px 24px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; }

/* ---- อ่านใจน้อง / จ่ายเงิน / admin ---- */
.hero { text-align: center; padding: 16px 16px 24px; }
.hero h1 { font-size: clamp(22px, 6.5vw, 28px); margin: 0 0 8px; color: var(--color-primary-dark); font-weight: 800; letter-spacing: -0.5px; }
/* เงาเดิม (--shadow-sm) จางจนแทบมองไม่เห็น การ์ดเลยดูเป็นกรอบเส้นแบนๆ ไม่มีมิติ
   ใช้ --shadow-md ให้การ์ดลอยจากพื้นจริง แต่ไม่ถึงกับหนักจนดูรก */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); margin-bottom: var(--space-4); box-shadow: var(--shadow-md); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:active { transform: scale(0.99); box-shadow: var(--shadow-md); }
.card.center, .center { text-align: center; }
.small { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.6; }
.msg { background: var(--color-info-bg); border-radius: var(--radius-md); padding: 12px 16px; margin: 12px 0; font-size: 14px; font-weight: 600; border: 1px solid var(--color-info-border); color: var(--color-info); }
.msg.warn { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.species { display: flex; gap: 12px; margin-bottom: 16px; }
.species label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; background: var(--color-bg); padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); flex: 1; justify-content: center; cursor: pointer; transition: all 0.2s; }
.species label:has(input:checked) { background: var(--color-primary-light); border-color: var(--color-primary-text); color: var(--color-primary-dark); }
.species input[type=radio] { accent-color: var(--color-primary-text); transform: scale(1.2); }
.result-mode-pick { margin-top: 24px; background: var(--color-bg); padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.result-mode-pick .mode-choice { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin-right: 16px; font-weight: 600; }
.result-mode-pick input[type=radio] { accent-color: var(--color-primary-text); transform: scale(1.2); }
.fld { display: block; font-weight: 800; font-size: 15px; margin: 0 0 10px; color: var(--color-text-main); }
/* ⚠️ ต้องระบุ type ให้ครบทุกชนิดที่ใช้จริง — input[type=email] เคยตกหล่นจากลิสต์นี้
   ทำให้ช่อง "อีเมล" ไม่ได้ width:100% แล้วไปเรียงข้างหัวข้อคนละแบบกับช่องอื่น
   (เคยเกิดฝั่งธุรกิจ 24 ก.ค. แก้ที่ .biz-form แล้ว แต่ฝั่งผู้ใช้ยังพลาดอยู่ — บุ๋ยเจอ 15 ส.ค. 2026) */
input[type=text], input[type=password], input[type=file], input[type=email], input[type=date],
input[type=search], input[type=url], textarea, input[type=number], input[type=tel] {
  width: 100%; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-sans); background: var(--color-bg); transition: all 0.2s; color: var(--color-text-main);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary-text); box-shadow: 0 0 0 3px var(--color-primary-light); background: var(--color-surface); }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.btn {
  display: inline-block; text-align: center; background: var(--color-primary-gradient); color: var(--color-btn-text) !important; text-decoration: none;
  padding: 16px 20px; border-radius: var(--radius-pill); font-weight: 800; border: none; font-size: 16px; cursor: pointer; width: 100%;
  box-shadow: 0 8px 24px var(--color-primary-shadow); transition: transform 0.2s, box-shadow 0.2s; font-family: var(--font-sans);
}
.btn:active { transform: scale(0.97); box-shadow: 0 4px 12px var(--color-primary-shadow); }
.btn.alt { background: var(--color-surface); color: var(--color-primary-text); border: 2px solid var(--color-primary); box-shadow: none; font-weight: 800; }
.quota-line { font-size: 13.5px; color: var(--color-text-muted); margin-top: 16px; text-align: center; font-weight: 500; }
.quota-line a { color: var(--color-primary-text); font-weight: 700; text-decoration: none; }

/* ---- ปุ่มเพิ่มร้านบนหน้าแผนที่ ---- */
.add-place-link { display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--color-primary-text); text-decoration: none; background: var(--color-primary-light); padding: 8px 14px; border-radius: var(--radius-pill); margin-bottom: 12px; }

/* ---- หน้าแรกแบบ hub ---- */
.hub-search input[type=search] {
  width: 100%; padding: 14px 16px 14px 44px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  font-size: 15px; box-shadow: var(--shadow-sm);
  background: var(--color-surface) url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23A0A0A5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') no-repeat 16px center;
  background-size: 18px; outline: none; transition: all 0.2s; font-family: var(--font-sans); color: var(--color-text-main);
}
.hub-search input[type=search]:focus { border-color: var(--color-primary-text); box-shadow: 0 0 0 3px var(--color-primary-light); }
.hub-cards { display: flex; gap: 12px; margin: 16px 0 8px; }
.hub-card {
  flex: 1; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 20px 16px; text-decoration: none; color: var(--color-text-main); text-align: center;
  box-shadow: var(--shadow-md); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hub-card:active { transform: scale(0.97); }
.hub-card-icon { font-size: 28px; margin-bottom: 8px; color: var(--color-primary-text); }
.hub-card-title { font-weight: 800; font-size: clamp(14px, 4.2vw, 17px); margin-bottom: 4px; line-height: 1.3; }
.hub-card-sub { font-size: clamp(11px, 3.2vw, 12.5px); color: var(--color-text-muted); font-weight: 500; line-height: 1.4; }

/* ---- ฟีดข่าวสาร & โปรโมชั่น ---- */
/* หัวข้อหมวด — ต้องเบากว่าพาดหัวหลักชัดเจน ไม่งั้นแข่งกันเด่นจนไม่มีอะไรเด่น */
.feed-head { font-size: 17px; font-weight: var(--weight-section); margin: var(--space-8) 0 var(--space-3);
  color: var(--color-text-main); line-height: var(--leading-head); letter-spacing: -0.1px; }
.feed-list { display: flex; flex-direction: column; gap: 12px; }
.feed-card {
  display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--color-text-main);
  box-shadow: var(--shadow-md); transition: transform 0.2s ease;
}
.feed-card:active { transform: scale(0.98); background: var(--color-surface-hover); }
.feed-img { width: 100%; max-height: 180px; object-fit: cover; display: block; }
.feed-body { padding: var(--space-4); }
.feed-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 8px; }
.feed-badge.kind-promo { background: var(--color-primary-light); color: var(--color-primary-dark); }
.feed-badge.kind-event { background: var(--color-info-bg); color: var(--color-info); }
.feed-badge.kind-news { background: var(--color-warning-bg); color: var(--color-warning); }
.feed-title { font-weight: var(--weight-card); font-size: 15.5px; line-height: var(--leading-head); margin-bottom: var(--space-2); }
.feed-meta { font-size: 12.5px; color: var(--color-text-muted); font-weight: 500; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- หน้าของฉัน ---- */
.me-stats { display: flex; gap: 12px; margin-bottom: 16px; }
.me-stat { flex: 1; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; text-align: center; }
.me-stat b { display: block; font-size: clamp(1.4rem, 6vw, 1.8rem); color: var(--color-primary-dark); font-weight: 800; margin-bottom: 4px; }
.me-stat span { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; }
.me-section-head { margin: 0 0 var(--space-3); font-size: 16px; font-weight: var(--weight-section);
  line-height: var(--leading-head); }
.me-row { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--color-text-main); font-weight: 700; font-size: 15px; }
.me-row-arrow { color: var(--color-text-muted); font-size: 20px; }
.me-soon { opacity: 0.75; }
.me-soon b { font-size: 15px; }
.me-soon .small { margin: 6px 0 0; }

/* Add Place page */
.add-place { padding: 16px; max-width: 500px; margin: 0 auto; }
.add-place h1 { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.add-place .hint { color: var(--color-text-muted); font-size: 14px; margin-bottom: 24px; line-height: 1.5; }
.add-place form { background: var(--color-surface); padding: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.add-place label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 20px; }
.add-place label input, .add-place label select { margin-top: 8px; }
.add-place select { width: 100%; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-sans); background: var(--color-bg); font-weight: 500; color: var(--color-text-main); }
.add-place .manual-geo { margin: 24px 0 0; font-size: 14px; color: var(--color-text-muted); background: var(--color-bg); padding: 16px; border-radius: var(--radius-md); }
.add-place .manual-geo summary { cursor: pointer; font-weight: 700; outline: none; }
.add-place .manual-geo label { margin-top: 12px; margin-bottom: 0; }
.add-place .geo-primary { margin: 24px 0 16px; }

/* Upload Zone (Read) */
input[type=file] {
  padding: 32px 20px; border: 2px dashed rgba(13, 132, 119, 0.4); text-align: center; background: transparent; color: var(--color-text-muted); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s;
}
input[type=file]:hover, input[type=file]:focus { border-color: var(--color-primary-text); background: var(--color-primary-light); color: var(--color-primary-dark); }

/* Pokemon Card Logic (Unchanged classes, just refined styling slightly within boundaries) */
.pkmn-card { position:relative; width: 100%; max-width: 380px; margin: 16px auto; border-radius: 20px; padding: 13px; color: #000; background: linear-gradient(135deg, #fff3b0 0%, #e8bd3a 18%, #b8860b 50%, #e8bd3a 82%, #fff3b0 100%); box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.55), inset 0 0 0 3px rgba(150,110,10,0.55); overflow: hidden; font-family: "Noto Sans Thai", sans-serif; }
.pkmn-card::after { content:''; position:absolute; inset:0; border-radius:20px; background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.16) 47%, rgba(255,255,255,0) 54%); pointer-events:none; z-index:3; }
.pkmn-inner { background: linear-gradient(180deg, #fbfbfb, #dcdcdc); border-radius: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,0.7), 0 0 0 3px #9a7b17, inset 0 0 10px rgba(0,0,0,0.12); padding: 9px 12px 14px; position: relative; z-index: 1; }
.pkmn-card.type-happy .pkmn-inner { background: linear-gradient(160deg, #FF9EBB 0%, #FFB3C6 40%, #FF729F 100%); }
.pkmn-card.type-calm .pkmn-inner, .pkmn-card.type-sad .pkmn-inner { background: linear-gradient(160deg, #80DEEA 0%, #B2EBF2 40%, #0097A7 100%); }
.pkmn-card.type-curious .pkmn-inner { background: linear-gradient(160deg, #FFF59D 0%, #FFF9C4 40%, #FBC02D 100%); }
.pkmn-card.type-playful .pkmn-inner { background: linear-gradient(160deg, #FFAB91 0%, #FFCCBC 40%, #E64A19 100%); }
.pkmn-card.type-anxious .pkmn-inner, .pkmn-card.type-scared .pkmn-inner { background: linear-gradient(160deg, #CE93D8 0%, #E1BEE7 40%, #8E24AA 100%); }
.pkmn-card.type-annoyed .pkmn-inner { background: linear-gradient(160deg, #EF9A9A 0%, #FFCDD2 40%, #C62828 100%); }
.pkmn-card.type-pain .pkmn-inner { background: linear-gradient(160deg, #B0BEC5 0%, #CFD8DC 40%, #546E7A 100%); }
.pkmn-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 3px; }
.pkmn-titlecol { display:flex; flex-direction:column; align-items:flex-start; min-width:0; flex:1; }
.pkmn-stage { display:inline-block; font-size: 0.6rem; font-weight: 800; color: #5a4a12; letter-spacing: 0.2px; background: linear-gradient(180deg,#fff,#f0e6c4); border:1px solid #c9b56a; border-radius: 999px; padding: 2px 9px; box-shadow: 0 1px 1px rgba(0,0,0,0.12); white-space:nowrap; }
.pkmn-name { font-size: clamp(1.15rem, 6vw, 1.5rem); font-weight: 800; letter-spacing: -0.3px; line-height: 1.08; color: #14110a; text-shadow: 0 1px 0 rgba(255,255,255,0.55); margin-top: 3px; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
.pkmn-hp { flex-shrink:0; display: flex; align-items: center; gap: 4px; line-height:1; white-space:nowrap; }
.pkmn-hp .hp-lbl { font-size: 0.62rem; color: #333; font-weight: 900; align-self:flex-end; margin-bottom:2px; }
.pkmn-hp .hp-num { font-size: 1.5rem; font-weight: 900; color: #c40000; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.pkmn-type-icon { width: 26px; height: 26px; background: radial-gradient(circle at 32% 28%, #fff, #d6d6d6 70%, #b7b7b7); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.45), inset 0 -2px 4px rgba(0,0,0,0.22), inset 0 2px 3px rgba(255,255,255,0.9); font-size: 0.95rem; margin-left: 2px; }
.pkmn-img-box { background: #ccc; height: 200px; border-radius: 4px; position: relative; box-shadow: 0 0 0 3px #e9d89a, 0 0 0 4px #9a7b17, 1px 2px 6px rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; margin-top: 4px; overflow: hidden; }
.pkmn-img-box img { width: 100%; height: 100%; object-fit: cover; }
.pkmn-holo { position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 34%, rgba(255,255,255,0.22) 46%, rgba(255,255,255,0.06) 52%, rgba(255,255,255,0) 100%); mix-blend-mode: screen; opacity: 0.4; pointer-events: none; z-index: 2; }
.pkmn-holo::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.35) 10%, transparent 20%), radial-gradient(circle, rgba(255,255,255,0.35) 10%, transparent 20%); background-size: 22px 22px; background-position: 0 0, 11px 11px; mix-blend-mode: overlay; opacity: 0.22; }
.pkmn-stats-bar { background: linear-gradient(180deg, #f0d878, #cca23a 45%, #b8860b); padding: 4px 8px; font-size: 0.7rem; line-height: 1.35; font-weight: 700; text-align: center; color: #2a2205; margin: 8px auto 0; border-radius: 4px; border: 1px solid #8B6508; box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), 0 1px 2px rgba(0,0,0,0.22); width: 100%; letter-spacing: 0; }
.pkmn-moves { padding: 8px 4px; margin-top: 4px; text-align: left; }
.pkmn-move { margin-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.15); padding-bottom: 6px; }
.pkmn-move:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.pkmn-move-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pkmn-energy { display: inline-flex; width: 18px; height: 18px; background: radial-gradient(circle at 30% 30%, #fff, #ddd); border-radius: 50%; justify-content: center; align-items: center; font-size: 0.65rem; box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 -1px 2px rgba(0,0,0,0.1); }
.pkmn-move-name { font-weight: 800; font-size: 1.15rem; color: #000; letter-spacing:-0.2px; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); }
.pkmn-move-dmg { margin-left: auto; font-weight: 800; font-size: 1.25rem; color:#000; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); }
.pkmn-move-desc { font-size: 0.8rem; line-height: 1.3; color: #111; font-weight: 500; padding-left: 26px; }
.pkmn-footer { display: flex; justify-content: space-around; margin-top: 4px; padding: 4px 0; font-size: 0.65rem; text-align: center; font-weight: 700; color:#333; border-bottom: 1px solid rgba(0,0,0,0.15); }
.pkmn-footer span { display:block; font-size: 0.85rem; font-weight:800; color:#000; margin-top:1px;}
.pkmn-weakness span { color: #d32f2f; }
.pkmn-flavor { font-size: 0.65rem; color: #111; font-style: italic; margin-top: 6px; padding: 4px 6px; line-height: 1.25; font-weight: 500; text-align:left; border: 1px solid #b5a371; border-radius: 2px; background: rgba(255,255,255,0.4); }
.pkmn-credit { position: absolute; bottom: 8px; right: 14px; font-size: 0.55rem; font-weight: 700; color: #333; z-index:2;}
.pkmn-id-badge { position: absolute; bottom: 8px; left: 14px; font-size: 0.55rem; font-weight: 700; color: #333; z-index:2;}

/* ---- ผลลัพธ์แบบเรียบ (mode=plain) ---- */
.plain-result { margin: 16px auto; max-width: 380px; }
.plain-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-md); }
.plain-section h3 { margin: 0 0 var(--space-3); font-size: 17px; color: var(--color-primary-dark);
  font-weight: var(--weight-section); line-height: var(--leading-head); }
.plain-emotion { font-size: 1.3rem; font-weight: 800; margin: 0 0 4px; color: var(--color-text-main); }
.plain-emotion .confidence { font-size: 14px; color: var(--color-text-muted); font-weight: 600; display: block; margin-top: 4px; }
.plain-quote { font-style: italic; margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--color-text-main); }
.plain-tips { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }
.plain-tips li { margin-bottom: 8px; }

/* Buy */
.pack { border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; position: relative; background: var(--color-surface); transition: all 0.2s; box-shadow: var(--shadow-sm); }
.pack.hot { border-color: var(--color-primary-text); box-shadow: 0 6px 16px var(--color-primary-shadow); }
.pack h3 { margin: 0 0 var(--space-3); font-size: 17px; font-weight: var(--weight-section);
  line-height: var(--leading-head); display: flex; align-items: center; justify-content: space-between; }
.price { font-size: 1.8rem; font-weight: 800; color: var(--color-primary-dark); display: block; margin-bottom: 8px; }
.badge { background: #FFD54F; color: #7A5A10; border-radius: var(--radius-pill); padding: 4px 12px; font-size: 12px; font-weight: 800; display: inline-block; }
.qr { text-align: center; margin: 20px 0; }
.qr img { width: 200px; border-radius: 16px; border: 1px solid var(--color-border); background: #fff; padding: 12px; box-shadow: var(--shadow-sm); }
.steps { font-size: 14px; margin: 16px 0; color: var(--color-text-muted); line-height: 1.6; }
.code { font-size: 2rem; font-weight: 800; letter-spacing: 4px; text-align: center; color: var(--color-primary-dark);
  background: var(--color-primary-light); border-radius: var(--radius-md); padding: 20px; margin: 20px 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.cite { font-size: 14px; margin: 16px 0; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); line-height: 1.6; }
.cite:last-child { border-bottom: none; padding-bottom: 0; }
.cite b { color: var(--color-text-main); font-weight: 700; }
.cite a { color: var(--color-info); text-decoration: none; word-break: break-all; font-weight: 500; }
.upsell-head { font-weight: 800; margin-bottom: 16px; font-size: 18px; }
.upsell-grid { display: flex; flex-direction: column; gap: 12px; }
.offer { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; display: flex; justify-content: space-between; align-items: center; background: var(--color-bg); transition: transform 0.2s, box-shadow 0.2s; box-shadow: var(--shadow-sm); }
.offer:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.offer-name { font-weight: 700; font-size: 16px; }
.offer-price { color: var(--color-primary-dark); font-weight: 800; margin-top: 6px; font-size: 15px; }
.offer-btn { color: var(--color-primary-text); font-weight: 800; text-decoration: none; font-size: 20px; background: var(--color-primary-light); width: 36px; height: 36px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; }
.admin-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.admin-stats .stat { flex: 1 1 120px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; text-align: center; box-shadow: var(--shadow-md); }
.admin-stats .stat b { display: block; font-size: clamp(1.5rem, 6vw, 2rem); color: var(--color-primary-dark); font-weight: 800; margin-bottom: 4px; }
.admin-stats .stat span { font-size: 14px; color: var(--color-text-muted); font-weight: 600; }

/* Micro-interactions loader */
.loading-overlay { display: none; text-align: center; padding: 40px 20px; }
.loading-overlay .dog-loader { font-size: 40px; animation: bounce 1s infinite; display: inline-block; margin-bottom: 16px; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* ---- ของฉัน: เจ้าของ + สัตว์เลี้ยง (CRM) ---- */
.pet-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text-main); }
.pet-row:last-of-type { border-bottom: none; }
.pet-emoji { font-size: 28px; }
.pet-info { flex: 1; min-width: 0; }
.pet-info b { display: block; font-size: 15px; }
.pill { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pill.warn { background: var(--color-warning-bg); color: var(--color-warning); }
.pill.danger { background: var(--color-danger-bg); color: var(--color-danger); }
.pill.ok { background: var(--color-success-bg); color: var(--color-success); }
/* ⚠️ แถวในหน้า "ของฉัน" ใช้หน้าตาเดียวกับแถวฝั่งธุรกิจ (.biz-row) — ไอคอน + ชื่อ + ลูกศร
   ทั้งสองฝั่งต้องรู้สึกเป็นแอปเดียวกัน แก้ที่นี่แล้วไปดูฝั่งธุรกิจด้วยเสมอ */
.me-link { display: flex; align-items: center; gap: var(--space-3); padding: 13px var(--space-1);
  font-weight: 600; font-size: 15px; color: var(--color-text-main); text-decoration: none;
  border-bottom: 1px solid var(--color-border); width: 100%; text-align: left; }
.me-link > span:not([class]) { flex: 1; }
.me-link .icon { width: 20px; height: 20px; flex: none; color: var(--color-primary-text); }
.me-link-emoji { width: 20px; text-align: center; flex: none; }
.me-link:last-child { border-bottom: none; }
.me-link.danger { color: var(--color-danger); }
button.me-link { background: none; border: 0; border-bottom: 1px solid var(--color-border);
  cursor: pointer; font: inherit; }
.form-card label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 16px; }
.form-card label input, .form-card label select, .form-card label textarea { margin-top: 8px; }
.form-card select { width: 100%; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-sans); background: var(--color-bg); font-weight: 500; color: var(--color-text-main); }
.form-card textarea { min-height: 70px; }
.form-card input[type=file] { padding: 16px; }
/* ⚠️ ต้องมี !important — .btn ตั้ง color: var(--color-btn-text) !important ไว้
   ซึ่งโหมดมืดเป็นสีเข้ม (#0F172A) ถ้าไม่ใส่ ปุ่มลบจะได้ตัวอักษรเข้มบนพื้นแดง = 3.70:1
   อ่านไม่ออก ทั้งที่ปุ่มนี้คือปุ่มลบบัญชี/ลบข้อมูลที่ต้องชัดที่สุด (ออดิท 26 ก.ค. 2026) */
.form-card .btn.danger, .btn.danger { background: var(--color-danger-solid); box-shadow: none; color: #fff !important; }
.field-opt { font-weight: 500; font-size: 12px; color: var(--color-text-muted); }
.field-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.field-hint { display: block; font-weight: 500; font-size: 12px; color: var(--color-text-muted); margin-top: 4px; line-height: 1.5; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: 13.5px; line-height: 1.5; }
.check-row input[type=checkbox] { accent-color: var(--color-primary-text); width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.form-error { background: var(--color-danger-bg); color: var(--color-danger); padding: 12px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 700; margin-bottom: 16px; }
.pet-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border); margin-bottom: 12px; }
.pet-facts .small { margin: 4px 0; }
.pet-facts { margin-bottom: 16px; }
.rec-section { margin-bottom: 16px; }
.rec-head { margin: 0 0 6px; font-size: 14.5px; font-weight: 800; }
.rec-empty { margin: 0 0 4px; }
.rec-scroll { overflow-x: auto;   width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rec-table th, .rec-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.rec-table th { font-size: 12px; color: var(--color-text-muted); }
.rec-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.rec-list li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.rec-list li:last-child { border-bottom: none; }
.rec-line { flex: 1; min-width: 0; line-height: 1.6; }
.rec-del-form { margin: 0; flex: 0 0 auto; }
.rec-del { border: none; background: var(--color-btn-alt-bg); color: var(--color-text-muted); border-radius: 50%; width: 26px; height: 26px; font-size: 12px; cursor: pointer; }
.rec-del:active { background: var(--color-btn-alt-active); }
.privacy-doc h2 { font-size: 16px; font-weight: 800; margin: 20px 0 8px; color: var(--color-primary-dark); }
.privacy-doc p, .privacy-doc li { font-size: 14px; line-height: 1.7; color: var(--color-text-main); }
.privacy-doc ul { padding-left: 20px; margin: 8px 0; }
.privacy-doc a { color: var(--color-info); font-weight: 600; }

/* รูปหน้าร้านจาก Google (place detail hero) */
.place-hero-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 14px; box-shadow: var(--shadow-md); }

/* ===== ปรึกษาโนอาร์ (Noa chat) ===== */
.noa-disclaimer { background: var(--color-info-bg); color: var(--color-info); border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md); padding: 10px 14px; font-size: 12.5px; font-weight: 600; margin-bottom: 16px; text-align: center; }
.noa-convo-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; }
.me-row .small { color: var(--color-text-muted); font-weight: 500; margin: 0 8px 0 0; }
.noa-topbar { margin-bottom: 10px; }
.noa-back { text-decoration: none; color: var(--color-primary-dark); font-weight: 700; font-size: 15px; }
.noa-chat { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.noa-bubble { display: flex; align-items: flex-end; gap: 8px; max-width: 88%;   margin-bottom: 6px;
}
.noa-user { align-self: flex-end; flex-direction: row-reverse; }
.noa-noa { align-self: flex-start; }
.noa-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.noa-body { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px 18px 18px 4px;
  padding: 10px 14px; box-shadow: var(--shadow-sm); }
.noa-user .noa-body { background: var(--color-primary-gradient); color: var(--color-btn-text); border: none; border-radius: 18px 18px 4px 18px; }
.noa-text { font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.noa-emergency .noa-body { background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.noa-badge { display: inline-block; background: var(--color-danger-solid); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: var(--radius-pill); padding: 2px 10px; margin-bottom: 6px; }
.noa-cap { text-align: center; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 20px; margin: 12px 0; box-shadow: var(--shadow-sm); }
.noa-input-bar { position: sticky; bottom: calc(64px + var(--safe-bottom)); display: flex; gap: 8px; padding: 10px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.noa-input-bar input { flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 12px 16px; font-size: 15px; font-family: var(--font-sans); background: var(--color-surface); color: var(--color-text-main); }
.noa-input-bar .btn { width: auto; padding: 12px 18px; margin: 0; flex: 0 0 auto; }
.noa-input-bar input:disabled, .noa-input-bar .btn:disabled { opacity: 0.6; }

/* ปุ่มแนบรูป + พรีวิว + รูปในบับเบิล (รวมฟีเจอร์แปลใจเป็นการวิเคราะห์ภาพ) */
.noa-attach { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; font-size: 20px; cursor: pointer; border-radius: var(--radius-pill);
  background: var(--color-surface); border: 1px solid var(--color-border); user-select: none; }
.noa-attach:active { transform: scale(0.94); }
.noa-img { display: block; max-width: 220px; width: 100%; height: auto; border-radius: var(--radius-md);
  margin-bottom: 6px; }
.noa-preview { position: sticky; bottom: calc(120px + var(--safe-bottom)); align-self: flex-start;
  display: inline-flex; margin: 0 0 8px 10px; }
.noa-preview[hidden] { display: none; }   /* [hidden] ต้องชนะ display ด้านบน */
.noa-preview img { max-width: 96px; max-height: 96px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
.noa-preview-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: none; background: var(--color-danger-solid, #e5484d); color: #fff; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; }

/* โนอาร์ — จัดรูปข้อความ markdown ในบับเบิล */
.noa-text ul { margin: 6px 0; padding-left: 20px; }
.noa-text li { margin: 3px 0; }
.noa-text strong { font-weight: 700; }
.noa-text > div { margin: 2px 0; }

/* โนอาร์ — ปุ่มโหวตคำตอบ 👍👎 */
.noa-fb{display:flex;gap:6px;margin-top:4px}
.noa-fb-btn{background:none;border:1px solid transparent;border-radius:10px;padding:1px 7px;cursor:pointer;font-size:.9em;opacity:.45}
.noa-fb-btn.on{opacity:1;border-color:currentColor}

/* ===== การ์ดยืนยัน action (ตั้งเตือน) ที่โนอาร์เสนอ ===== */
.noa-action-card { align-self: flex-start; max-width: 88%; background: var(--color-info-bg);
  border: 1px solid var(--color-info-border); border-radius: var(--radius-md); padding: 12px 14px;
  box-shadow: var(--shadow-sm);   margin-bottom: 12px;
}
.noa-action-card.done { color: var(--color-info); font-weight: 700; font-size: 14px; }
.noa-action-head { font-size: 14.5px; font-weight: 700; color: var(--color-text-main); line-height: 1.5; }
.noa-action-sub { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }
.noa-action-select { width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-main);
  font-size: 14px; font-family: var(--font-sans); }
.noa-action-btns { display: flex; gap: 8px; margin-top: 12px; }
.noa-action-btns .btn { width: auto; flex: 1; margin: 0; padding: 10px 14px; }
.noa-action-btns .btn.alt { background: var(--color-surface); color: var(--color-text-main);
  border: 1px solid var(--color-border); box-shadow: none; }

/* ===== Noa+ (สมาชิกไม่จำกัด 30 วัน) ===== */
.noaplus-card { display: block; }
.noaplus-card.active { background: var(--color-info-bg); border-color: var(--color-info-border); }
.noaplus-card.active b { font-size: 15px; }
.noaplus-status { background: var(--color-info-bg); color: var(--color-info); border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md); padding: 10px 14px; font-size: 13.5px; font-weight: 700; margin-bottom: 14px; text-align: center; }
.pack.noaplus-pack { border-color: var(--color-primary-text); }
.noaplus-teaser { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--color-primary-gradient); color: var(--color-btn-text); border-radius: var(--radius-lg);
  padding: 14px 18px; margin-bottom: 16px; text-decoration: none; font-weight: 700; font-size: 14.5px;
  box-shadow: var(--shadow-sm); }
.noaplus-teaser-cta { font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0.95; }

.noa-body, .pet-info, .place-card-meta, .hub-card, .me-row > span, .noa-convo-title, .feed-body, .place-card-title {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
.hub-card {
  display: flex;
  flex-direction: column;
}

/* ---- SVG Icons ---- */
.icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  display: inline-block;
  stroke: currentColor;
  flex-shrink: 0;
}

/* ===== R4 native refinement: progressive base ===== */
:root {
  --radius-xl: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --tap-size: 44px;
  --motion-native: 220ms cubic-bezier(.2, .8, .2, 1);
}

html { color-scheme: light; -webkit-tap-highlight-color: transparent; }
html[data-theme="dark"] { color-scheme: dark; }
body { padding-bottom: calc(72px + max(12px, var(--safe-bottom))); }
.page { padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right)); }
.app-header {
  min-height: calc(56px + var(--safe-top));
  padding: calc(8px + var(--safe-top)) max(16px, var(--safe-right)) 8px max(16px, var(--safe-left));
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}
.bottom-nav { padding: 6px max(4px, var(--safe-right)) max(6px, var(--safe-bottom)) max(4px, var(--safe-left)); }
.bottom-nav a { min-height: 52px; justify-content: center; }
.lang-toggle a, .theme-toggle, .chip, .open-toggle, .add-place-link, .me-link,
.pet-row, .me-row, .noa-back, .offer-btn, .rec-del, .place-actions summary,
.place-actions button, .noa-preview-x, .noa-action-btns .btn { min-height: var(--tap-size); }
.lang-toggle a, .noa-back, .add-place-link { display: inline-flex; align-items: center; }
.theme-toggle, .offer-btn, .rec-del, .noa-preview-x { min-width: var(--tap-size); }
.lang-toggle a { min-width: var(--tap-size); justify-content: center; }
.small a, p a, .privacy-doc a, .field-hint a { display: inline-flex; min-height: var(--tap-size); align-items: center; }
main a:not(.card):not(.hub-card):not(.feed-card), main label, main summary {
  min-height: var(--tap-size);
}
/* ⚠️ ยกเว้นแถวที่ตั้งใจให้เต็มความกว้าง (.biz-row, .biz-cta) — ถ้าโดน inline-flex
   แถวจะหดตามเนื้อหาแล้วไปเรียงคู่กัน กลายเป็นชิปแทนที่จะเป็นรายการ */
/* ⚠️ รายการ :not() คือ "ทางออก" ของลิงก์ที่ตั้งใจให้เป็นบล็อก/กริดเต็มความกว้าง
   กฎนี้ specificity สูง (6 คลาสใน :not) ชั้น r5 จึงเขียนทับด้วยคลาสเดียวไม่ได้
   ของใหม่ที่เป็นการ์ดเต็มความกว้างต้องมาเติมชื่อไว้ตรงนี้ ไม่ใช่ไปใส่ !important ที่อื่น
   (การ์ดคู่มือ e-book เคยพลาดข้อนี้ ปกเลยกางเต็มการ์ด 23 ส.ค. 2026) */
main a:not(.card):not(.hub-card):not(.feed-card):not(.biz-row):not(.biz-cta):not(.me-link):not(.ebook-card):not(.offer), main summary { display: inline-flex; align-items: center; }
button, a, label, summary, input, select, textarea {
  touch-action: manipulation;
}
button, a, .card, .place-card, details, input, select, textarea {
  transition-duration: var(--motion-native);
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}
:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 50%, transparent); outline-offset: 2px; }
.hero { text-align: left; padding: 14px 0 18px; }
.hero h1 { font-size: 32px; line-height: 1.22; letter-spacing: 0; color: var(--color-text-main); }
.hero .small { margin: 4px 0; }
input[type=text], input[type=password], input[type=file], input[type=email], input[type=date],
input[type=search], input[type=number], input[type=tel], textarea, select {
  min-height: var(--tap-size);
  font-size: 16px;
}
.btn, a.btn-nav, button.btn-nav { min-height: var(--tap-size); display: inline-flex; align-items: center; justify-content: center; }
.card:active { transform: none; }
.check-row { min-height: var(--tap-size); align-items: center; margin-bottom: 10px; }
.check-row input[type=checkbox] { width: 22px; height: 22px; margin: 0; }
.species label, .result-mode-pick .mode-choice { min-height: var(--tap-size); }
.place-actions details summary { display: flex; align-items: center; }
.rec-list li { min-height: var(--tap-size); align-items: center; }
.rec-del { width: var(--tap-size); height: var(--tap-size); }

/* Noa: the chat stays roomy while the composer remains within the safe viewport. */
.noa-thread-screen { min-height: calc(100svh - 150px - var(--safe-top) - var(--safe-bottom)); display: flex; flex-direction: column; }
.noa-topbar { position: sticky; top: calc(56px + var(--safe-top)); z-index: 20; margin: -8px -4px 8px; padding: 4px; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.noa-back { padding: 0 8px; }
.noa-disclaimer { line-height: 1.45; }
.noa-chat { flex: 1; gap: 4px; padding-bottom: 16px; scroll-behavior: smooth; }
.noa-bubble { max-width: min(88%, 360px); }
.noa-body { padding: 10px 14px; }
.noa-avatar { width: 32px; height: 32px; }
.noa-input-bar {
  bottom: calc(64px + max(8px, var(--safe-bottom)));
  z-index: 30;
  min-height: 60px;
  align-items: center;
  margin: 0 -4px;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.14);
}
.noa-input-bar input { min-width: 0; height: 44px; padding: 9px 14px; }
.noa-input-bar .btn { height: 44px; min-height: 44px; padding: 0 16px; }
.noa-attach { min-width: 44px; min-height: 44px; }
.noa-preview { bottom: calc(126px + max(8px, var(--safe-bottom))); z-index: 31; }
.noa-preview-x { top: -12px; right: -12px; width: 44px; height: 44px; border: 10px solid transparent; background-clip: padding-box; }
.noa-action-select { min-height: var(--tap-size); font-size: 16px; }

/* Map: stable controls, readable sheet, and a real floating primary action. */
.map-page-html body { background-image: none; }
.map-page #controls { padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right)); }
.map-page #chips { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
#search { min-height: 48px; margin-bottom: 8px; }
.chip { min-height: 44px; position: relative; overflow: hidden; }
#controls-row { min-height: 48px; }
#radius, #area { min-height: 44px; }
.open-toggle { min-height: 44px; padding: 0 4px; }
.map-page #use-my-location { width: 56px; height: 56px; bottom: 32px; right: max(16px, var(--safe-right)); }
.place-list {
  padding-right: max(16px, var(--safe-right));
  padding-bottom: calc(88px + max(12px, var(--safe-bottom)));
  padding-left: max(16px, var(--safe-left));
}
.place-card { min-height: 72px; }

/* ===== iOS HIG details ===== */
.platform-ios {
  --tap-size: 44px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 14px;
  --motion-native: 240ms cubic-bezier(.25, .8, .25, 1);
}
.platform-ios body { background-image: none; }
.platform-ios .app-header { background: color-mix(in srgb, var(--color-bg) 82%, transparent); box-shadow: none; }
.platform-ios .bottom-nav { background: color-mix(in srgb, var(--color-surface) 88%, transparent); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: none; }
.platform-ios .bottom-nav a.active svg { transform: none; stroke-width: 2.4; }
.platform-ios .theme-toggle { width: 44px; height: 44px; box-shadow: none; background: transparent; border-color: transparent; }
.platform-ios .lang-toggle { box-shadow: none; background: color-mix(in srgb, var(--color-border) 45%, transparent); border: 0; }
.platform-ios .card, .platform-ios .pack, .platform-ios .plain-section { box-shadow: none; }
.platform-ios .form-card, .platform-ios .add-place form { padding: 0 16px; overflow: hidden; }
.platform-ios .form-card > label:not(.check-row), .platform-ios .add-place form > label {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.platform-ios .form-card > label:not(.check-row):last-of-type, .platform-ios .add-place form > label:last-of-type { border-bottom: 0; }
/* ⚠️ 15 ส.ค. 2026 (บุ๋ยเจอบน iPhone จริง): เดิมกฎนี้ทำให้ช่องกรอกบน iOS
   โปร่งใส + ไม่มีกรอบ (เลียน iOS Settings) แต่ของจริงกลายเป็น "ที่ว่างเปล่า"
   ใต้หัวข้อ — ผู้ใช้ไม่รู้ว่าตรงไหนพิมพ์ได้ (iOS ของจริงวาง label ซ้าย/ช่องขวา
   ในแถวเดียว เราทำครึ่งๆ เลยได้ผลลัพธ์ที่แย่กว่าเดิม)
   → ให้ช่องกรอกมีพื้นและกรอบเสมอทุกแพลตฟอร์ม ส่วนเส้นคั่นแถวแบบ iOS ยังเก็บไว้ */
.platform-ios .form-card label input:not([type=checkbox]):not([type=radio]),
.platform-ios .form-card label select, .platform-ios .form-card label textarea,
.platform-ios .add-place label input, .platform-ios .add-place label select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.platform-ios .check-row input[name="marketing_consent"], .platform-ios .open-toggle input {
  appearance: none;
  -webkit-appearance: none;
  width: 51px;
  height: 31px;
  flex: 0 0 51px;
  border-radius: 999px;
  background: #8e8e93;
  position: relative;
  border: 0;
  transition: background var(--motion-native);
}
.platform-ios .check-row input[name="marketing_consent"]::after, .platform-ios .open-toggle input::after {
  content: '';
  position: absolute;
  width: 27px;
  height: 27px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  transition: transform var(--motion-native);
}
.platform-ios .check-row input[name="marketing_consent"]:checked, .platform-ios .open-toggle input:checked { background: #34c759; }
.platform-ios .check-row input[name="marketing_consent"]:checked::after, .platform-ios .open-toggle input:checked::after { transform: translateX(20px); }
.platform-ios .me-row { min-height: 52px; }
.platform-ios .me-link, .platform-ios .pet-row { min-height: 50px; padding-left: 4px; padding-right: 4px; }
.platform-ios .noa-body { box-shadow: none; }
.platform-ios .noa-user .noa-body { background: var(--color-primary-text); }
.platform-ios .noa-input-bar { border-radius: 22px; background: color-mix(in srgb, var(--color-bg) 92%, transparent); box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.platform-ios .noa-input-bar .btn { box-shadow: none; }
.platform-ios .place-list { border-radius: 22px 22px 0 0; }
.platform-ios .place-card { border-width: 0 0 1px; border-radius: 0; box-shadow: none; padding: 16px 4px; }

/* ===== Android Material 3 details ===== */
.platform-android { --tap-size: 48px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --motion-native: 200ms cubic-bezier(.2, 0, 0, 1); }
.platform-android .app-header { min-height: calc(64px + var(--safe-top)); padding-bottom: 8px; box-shadow: var(--shadow-sm); }
.platform-android .bottom-nav { min-height: calc(72px + var(--safe-bottom)); box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
.platform-android .bottom-nav a { min-height: 56px; }
.platform-android .bottom-nav a.active svg { background: var(--color-primary-light); border-radius: 16px; padding: 4px 18px; width: 60px; transform: none; }
.platform-android .theme-toggle { width: 48px; height: 48px; }
.platform-android .btn { background: var(--color-primary-text); box-shadow: var(--shadow-sm); border-radius: 20px; }
.platform-android .btn.alt { background: var(--color-primary-light); color: var(--color-primary-dark) !important; border: 0; }
.platform-android button, .platform-android a, .platform-android label, .platform-android summary { position: relative; overflow: hidden; }
.platform-android button:active, .platform-android a:active, .platform-android label:active, .platform-android summary:active { background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)); }
.platform-android .chip { min-height: 48px; border-radius: 8px; box-shadow: none; }
.platform-android #radius, .platform-android #area, .platform-android .open-toggle { min-height: 48px; }
.platform-android .gm-control-active { min-width: 48px !important; min-height: 48px !important; }
.platform-android .chip.active { background: var(--color-primary-light); border-color: transparent; transform: none; }
.platform-android .card, .platform-android .pack, .platform-android .plain-section, .platform-android .place-card { box-shadow: var(--shadow-sm); }
.platform-android .hub-card, .platform-android .feed-card { box-shadow: var(--shadow-sm); }
.platform-android .map-page #use-my-location { background: var(--color-primary-text); box-shadow: var(--shadow-lg); }
.platform-android .map-page #use-my-location::after { filter: brightness(0) invert(1); }
.platform-android .place-list { border-radius: 28px 28px 0 0; }
.platform-android .noa-input-bar { min-height: 64px; border-radius: 28px; background: var(--color-surface); }
.platform-android .noa-topbar { top: calc(64px + var(--safe-top)); }
.platform-android .noa-input-bar { bottom: calc(72px + max(8px, var(--safe-bottom))); }
.platform-android .noa-preview { bottom: calc(134px + max(8px, var(--safe-bottom))); }
.platform-android .noa-input-bar input { height: 48px; }
.platform-android .noa-input-bar .btn, .platform-android .noa-attach { min-height: 48px; height: 48px; }
.platform-android .noa-attach { width: 48px; min-width: 48px; }
.platform-android .noa-action-btns .btn { min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (min-width: 700px) {
  .noa-thread-screen { min-height: auto; }
}

/* ===== R5: iOS 26-inspired Liquid Glass system ===== */
:root {
  --glass-blur: 22px;
  --glass-radius: 24px;
  --glass-stroke: rgba(255,255,255,.72);
  --glass-fill: rgba(255,255,255,.66);
  --glass-fill-strong: rgba(255,255,255,.82);
  --glass-shadow: 0 12px 36px rgba(27,31,38,.10), inset 0 1px 0 rgba(255,255,255,.82);
  --glass-shadow-soft: 0 6px 20px rgba(27,31,38,.08), inset 0 1px 0 rgba(255,255,255,.72);
}

/* Light defaults keep the progressive version usable before/without theme JS. */
:root:not([data-theme]) {
  --color-primary: #0D8477;
  --color-primary-text: #0A6157;
  --color-btn-text: #FFFFFF;
  --color-primary-dark: #0A6A60;
  --color-primary-light: rgba(13,132,119,.12);
  --color-primary-shadow: rgba(13,132,119,.25);
  --color-bg: #FDF8F0;
  --color-surface: rgba(255,255,255,.72);
  --color-menu-solid: #FFFFFF;
  --color-surface-hover: rgba(255,255,255,.9);
  --color-text-main: #2C3B37;
  --color-text-muted: #5E706B;
  --color-border: rgba(60,120,110,.22);
  --color-info: #2563EB;
  --color-info-bg: #DBEAFE;
  --color-info-border: #BFDBFE;
  --color-warning: #A65F00;
  --color-warning-bg: #FEF3C7;
  --color-warning-border: #FDE68A;
  --color-danger: #DC2626;
  --color-danger-bg: #FEE2E2;
  --color-danger-border: #FECACA;
  --color-success: #047857;
  --color-success-bg: #D1FAE5;
  --color-success-border: #A7F3D0;
  --color-btn-alt-bg: rgba(255,255,255,.56);
  --color-btn-alt-active: rgba(255,255,255,.82);
  --color-map-bg: #E2EAE6;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.14);
  --shadow-sheet: 0 -8px 28px rgba(0,0,0,.12);
}

:root[data-theme="light"] {
  --color-menu-solid: #FFFFFF;
  --color-bg: #FDF8F0;
  --color-surface: rgba(255,255,255,.72);
  --color-surface-hover: rgba(255,255,255,.9);
  --color-border: rgba(60,120,110,.22);
  --color-text-main: #2C3B37;
  --color-text-muted: #5E706B;
  --color-btn-alt-bg: rgba(255,255,255,.56);
  --glass-stroke: rgba(255,255,255,.82);
  --glass-fill: rgba(255,255,255,.64);
  --glass-fill-strong: rgba(255,255,255,.80);
}

:root[data-theme="dark"] {
  --color-bg: #0E1816;
  --color-surface: rgba(31,47,43,.70);
  --color-surface-hover: rgba(42,60,55,.82);
  --color-border: rgba(214,234,228,.15);
  --color-text-main: #EFF5F3;
  --color-text-muted: #9EAFAA;
  --color-btn-alt-bg: rgba(52,74,68,.58);
  --glass-stroke: rgba(225,245,238,.16);
  --color-menu-solid: #192622;
  --glass-fill: rgba(28,42,38,.64);
  --glass-fill-strong: rgba(29,44,40,.84);
  --glass-shadow: 0 14px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.13);
  --glass-shadow-soft: 0 7px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.11);
}

html, body { background: var(--color-bg); }
body {
  background-image: none;
  padding-bottom: calc(92px + max(14px, var(--safe-bottom)));
}

/* การ์ด consent เทรน AI บน /noa — ปุ่มอนุญาต/ไม่อนุญาตเรียงแถวเดียวกัน */
.noa-consent-btns{display:flex;gap:8px;margin-top:8px}
.noa-consent-btns .btn{flex:1;margin:0}

/* ---- Noa ต้อนรับคนใหม่ (รอบ U1, 30 ก.ค. 2026) ---- */
/* ชิปคำถามยอดฮิต — แตะเดียวส่งเลย */
.noa-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 14px 0 4px; }
.noa-chip { font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--color-text-main); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 8px 14px; cursor: pointer; }
.noa-chip:active { background: var(--color-primary-light); border-color: var(--color-primary); }

/* แถบ consent แบบย่อ — เดิมเป็นการ์ดยักษ์ยึดครึ่งจอแรก */
.noa-consent-slim { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 8px 12px; margin: 14px 0 4px; }
.ncs-row { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  flex-wrap: wrap; }
.ncs-more { background: none; border: 0; padding: 0; font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 700; color: var(--color-primary-text);
  cursor: pointer; text-decoration: underline; }
.ncs-btns { display: flex; gap: 6px; margin: 0; }
.ncs-body { margin-top: 8px; }

/* การ์ดชวนลงทะเบียนหลังได้คำตอบแรก */
.noa-nudge { background: var(--color-primary-light); border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg); padding: 14px 16px; margin: 12px 0; }
.noa-nudge b { display: block; margin-bottom: 4px; }
.noa-nudge .small { margin-bottom: 10px; }

/* ---- พาน้องไป = แผนที่เต็มจอ (รอบ U2, 30 ก.ค. 2026) ----
   เดิมกองฟิลเตอร์สูงเกินครึ่งจอ — ตอนนี้ทุกอย่างลอยบนแผนที่แบบแอปแผนที่ที่คนคุ้น */
.map-page { position: relative; }
.map-page .map-container { height: calc(100dvh - 64px); }
.map-page #map { height: 100%; min-height: 0; }

#controls.map-float-top { position: absolute; top: 10px; left: 0; right: 0; z-index: 20;
  padding: 0 max(12px, var(--safe-left)) 0 max(12px, var(--safe-right));
  margin: 0; pointer-events: none; }
#controls.map-float-top > * { pointer-events: auto; }
.map-search-row { display: flex; gap: 8px; }
.map-search-row #search { flex: 1; min-width: 0; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 11px 16px; font-family: var(--font-sans); font-size: 15px;
  color: var(--color-text-main); box-shadow: var(--shadow-md); }
#filter-btn { width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); cursor: pointer; color: var(--color-text-main);
  display: flex; align-items: center; justify-content: center; }
#filter-btn .icon { width: 20px; height: 20px; }
#filter-btn.on { background: var(--color-primary-light); color: var(--color-primary-text);
  border-color: var(--color-primary); }
#filter-panel { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 10px 14px; margin-top: 8px;
  box-shadow: var(--shadow-md); }
.map-page .geo-feedback { margin-top: 8px; }
.map-page #use-my-location { bottom: 92px; }

/* bottom sheet ผลลัพธ์ — หุบเหลือแค่หัว, แตะหัวหรือมีผลใหม่ = ยืดขึ้น */
.map-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 15;
  background: var(--color-surface); border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,.16);
  transform: translateY(calc(100% - 54px)); transition: transform .25s ease;
  max-height: 62%; display: flex; flex-direction: column; }
.map-sheet.open { transform: translateY(0); }
#sheet-handle { width: 100%; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); padding: 8px 16px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sheet-grip { width: 42px; height: 4px; border-radius: 99px; background: var(--color-border); }
#sheet-title { font-size: 14px; font-weight: 700; color: var(--color-text-main); }
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain;
  padding: 0 4px calc(96px + var(--safe-bottom)); }
.map-sheet .place-list::before { display: none; }   /* กริปเดิมของลิสต์ ไม่ใช้ในชีต */
.map-sheet .place-list { min-height: 0; padding: 0 12px 8px; margin-top: 0;
  background: transparent; box-shadow: none; border-radius: 0; }

/* ป้ายความเชื่อใจบนการ์ดร้าน */
.pl-badge { font-size: 11.5px; font-weight: 800; border-radius: var(--radius-pill);
  padding: 2px 9px; white-space: nowrap; display: inline-block; }
.pl-badge.book { background: var(--color-success-bg); color: var(--color-success); }
.pl-badge.verified { background: var(--color-primary-light); color: var(--color-primary-text); }
.place-line-btn { margin-bottom: 8px; }

/* การ์ด "กำหนดถัดไป" บนหน้าน้อง (รอบ U3) — ของที่ทำให้คนกลับมาเปิดสมุดสุขภาพ */
.next-due-card { border-left: 4px solid var(--color-primary); }
.nd-row { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--color-border); }
.nd-row:last-child { border-bottom: 0; }
.nd-row .grow b { display: block; font-size: 15px; }
.nd-when { text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.nd-when .pill { margin-right: 6px; }
}

.app-header {
  top: max(8px, var(--safe-top));
  width: calc(100% - max(20px, var(--safe-left)) - max(20px, var(--safe-right)));
  max-width: 560px;
  min-height: 58px;
  margin: 0 auto 10px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--glass-stroke);
  border-radius: 28px;
  background: var(--glass-fill-strong);
  box-shadow: var(--glass-shadow-soft);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
}
.app-header .brand { font-size: 17px; }
.app-header .brand img { width: 32px; height: 32px; box-shadow: 0 1px 0 rgba(255,255,255,.75); }
.lang-toggle {
  min-height: 44px;
  padding: 3px;
  border: 1px solid var(--glass-stroke);
  background: rgba(127,127,127,.10);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.04);
}
.lang-toggle a { min-width: 44px; padding: 4px 9px; }
.lang-toggle a.active { background: var(--glass-fill-strong); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Theme icons are CSS-driven so malformed SVG text from the legacy toggle stays invisible. */
.theme-toggle { font-size: 0 !important; overflow: hidden; }
.theme-toggle > * { display: none !important; }
.theme-toggle::before {
  content: '☀';
  display: block;
  width: 21px;
  height: 21px;
  font-size: 21px;
  line-height: 21px;
}
:root[data-theme="dark"] .theme-toggle::before {
  content: '☾';
}
@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  .theme-toggle::before {
    content: '';
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  :root[data-theme="dark"] .theme-toggle::before {
    content: '';
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.7 15.4A9 9 0 0 1 8.6 3.3 9 9 0 1 0 20.7 15.4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.7 15.4A9 9 0 0 1 8.6 3.3 9 9 0 1 0 20.7 15.4Z'/%3E%3C/svg%3E");
  }
}

.bottom-nav {
  left: max(12px, var(--safe-left));
  right: max(12px, var(--safe-right));
  bottom: max(8px, var(--safe-bottom));
  min-height: 68px;
  padding: 5px 6px;
  border: 1px solid var(--glass-stroke);
  border-radius: 28px;
  background: var(--glass-fill-strong);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}
.bottom-nav a { min-height: 56px; border-radius: 22px; gap: 2px; }
.bottom-nav a.active { background: var(--color-primary-light); }
.bottom-nav a.active svg { transform: none; }

.card, .pack, .plain-section, .feed-card, .hub-card, .place-card,
.place-actions details, .add-place form, .noa-cap, .noa-action-card {
  border: 1px solid var(--glass-stroke);
  /* ⚠️ ห้ามกลับไปใช้ backdrop-filter บนการ์ด (แก้ 30 ก.ค. 2026 — บุ๋ยแจ้ง "แอพค้างๆ")
     เบลอทุกการ์ด = GPU มือถือเบลอใหม่ทุกเฟรมตอนเลื่อน ทั้งที่พื้นหลังเรียบมองไม่เห็นผล
     เบลอจริงเหลือเฉพาะของที่ลอยทับเนื้อหา: header / bottom-nav / แผงบนแผนที่ */
  background: var(--color-menu-solid);
  box-shadow: var(--glass-shadow-soft);
}
.card, .pack, .plain-section, .feed-card, .hub-card, .add-place form, .noa-cap { border-radius: var(--glass-radius); }
.hub-card { padding: 22px 14px; }
.me-stat, .result-mode-pick, .species label, .offer { background: rgba(127,127,127,.075); border-color: var(--color-border); }

.btn, a.btn-nav, button.btn-nav {
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 22px;
  background: var(--color-primary-text);
  box-shadow: 0 9px 22px var(--color-primary-shadow), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.alt {
  border: 1px solid var(--glass-stroke);
  background: var(--glass-fill-strong);
  color: var(--color-primary-dark) !important;
  box-shadow: var(--glass-shadow-soft);
}
.noaplus-teaser {
  border: 1px solid rgba(255,255,255,.24);
  background: var(--color-primary-text);
  box-shadow: 0 9px 22px var(--color-primary-shadow), inset 0 1px 0 rgba(255,255,255,.28);
}

input[type=text], input[type=password], input[type=file], input[type=email], input[type=date],
input[type=search], input[type=number], input[type=tel], textarea, select {
  border-color: var(--glass-stroke);
  background-color: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04), 0 1px 0 rgba(255,255,255,.45);
}
:root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] input[type=file], :root[data-theme="dark"] input[type=email],
:root[data-theme="dark"] input[type=date], :root[data-theme="dark"] input[type=search],
:root[data-theme="dark"] input[type=number], :root[data-theme="dark"] input[type=tel],
:root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: rgba(15,17,21,.38); }

.noa-input-bar {
  bottom: calc(88px + max(8px, var(--safe-bottom)));
  border: 1px solid var(--glass-stroke);
  border-radius: 28px;
  background: var(--glass-fill-strong);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(26px) saturate(175%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
}
.noa-preview { bottom: calc(154px + max(8px, var(--safe-bottom))); }
.noa-body { background: var(--color-menu-solid); border-color: var(--glass-stroke); }
.noa-user .noa-body { background: var(--color-primary-text); }

.map-page #controls {
  margin: 0 max(8px, var(--safe-right)) 8px max(8px, var(--safe-left));
  padding: 10px 10px 0;
  border: 1px solid var(--glass-stroke);
  border-radius: 24px;
  background: var(--glass-fill-strong);
  box-shadow: var(--glass-shadow-soft);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.chip { border-color: var(--glass-stroke); background: rgba(127,127,127,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.chip.active { background: var(--color-primary-light); }
.place-list {
  background: var(--glass-fill-strong);
  border-top: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
}
.map-page #use-my-location { border: 1px solid rgba(255,255,255,.32); background: var(--color-primary-text); box-shadow: 0 10px 28px var(--color-primary-shadow), inset 0 1px 0 rgba(255,255,255,.32); }
.map-page #use-my-location::after { filter: brightness(0) invert(1); }

.platform-ios body, .platform-android body { background-image: none; }
.platform-ios .app-header, .platform-android .app-header { min-height: 58px; background: var(--glass-fill-strong); box-shadow: var(--glass-shadow-soft); }
.platform-android .lang-toggle a { min-width: 48px; min-height: 48px; }
.platform-ios .bottom-nav, .platform-android .bottom-nav { min-height: 68px; background: var(--glass-fill-strong); box-shadow: var(--glass-shadow); }
.platform-ios .card, .platform-ios .pack, .platform-ios .plain-section,
.platform-android .card, .platform-android .pack, .platform-android .plain-section { box-shadow: var(--glass-shadow-soft); }
.platform-ios .place-card { padding: 16px; border: 1px solid var(--glass-stroke); border-radius: 20px; box-shadow: var(--glass-shadow-soft); }
.platform-android .bottom-nav a.active svg { width: 24px; padding: 0; background: transparent; }
.platform-android .noa-input-bar { bottom: calc(88px + max(8px, var(--safe-bottom))); background: var(--glass-fill-strong); }
.platform-android .noa-preview { bottom: calc(154px + max(8px, var(--safe-bottom))); }

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .app-header, .bottom-nav, .card, .pack, .plain-section, .feed-card, .hub-card,
  .place-card, .place-actions details, .add-place form, .noa-input-bar, .place-list { background: var(--color-surface); }
}

/* หน้า /noa/plus + ป้าย affiliate ท้ายหัวข้อดีล */
.noaplus-diff { display: flex; flex-direction: column; gap: 14px; }
.noaplus-diff-item { display: flex; gap: 12px; align-items: flex-start; }
.noaplus-diff-item > .icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--color-primary-text); margin-top: 2px; }
.noaplus-diff-item p { margin: 2px 0 0; }
.noaplus-ctas { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 8px; }
.noaplus-disclaimer { opacity: .75; margin-bottom: 24px; }

/* การ์ดสถานพยาบาลในแชทโนอาร์ (บล็อก ```vets``` จากเซิร์ฟเวอร์) */
.noa-vets { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.noa-vets-head { font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.noa-vet-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px; padding: 10px 12px; }
.noa-vet-name { font-weight: 700; }
.noa-vet-meta { font-size: 13px; color: var(--color-text-muted); margin: 2px 0 8px; }
.noa-vet-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.noa-vet-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); font-size: 14px; font-weight: 600;
  color: var(--color-text-main); text-decoration: none;
}
.noa-vet-btn.primary { background: var(--color-primary-text); border-color: var(--color-primary-text); color: var(--color-btn-text) !important; }

/* คลินิกประจำ: หัวข้อ section ในฟอร์มน้อง + การ์ดเด่นในแชทโนอาร์ */
.form-section-head { font-size: 16px; font-weight: 800; margin: 20px 0 4px; color: var(--color-text-main); }
.noa-vet-card.regular { border-color: var(--color-primary-text); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.noa-vet-regular { font-size: 12px; font-weight: 800; color: var(--color-primary-text); margin-bottom: 2px; }

/* หน้าแรกโนอาร์แบบ Gemini: hero กลางจอ + ช่องพิมพ์ล่าง + เมนูข้าง (drawer) */
.noa-landing { display: flex; flex-direction: column; min-height: calc(100vh - 220px); position: relative; }
.noa-menu-btn {
  position: absolute; top: 0; left: 0; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 50%; color: var(--color-text-main); cursor: pointer;
}
.noa-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 12px 24px; }
.noa-hero-logo .icon { width: 52px; height: 52px; color: var(--color-primary-text); }
.noa-hero-greet { font-size: 24px; font-weight: 800; margin: 14px 0 6px; }
.noa-hero-sub { color: var(--color-text-muted); }
.noa-landing-bar { position: sticky; bottom: calc(84px + var(--safe-bottom, 0px)); margin-top: 8px; }
.noa-landing-note { color: var(--color-text-muted); opacity: .8; margin: 10px 0 4px; }
.noa-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; }
.noa-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(310px, 85vw); z-index: 201;
  background: var(--color-bg); border-right: 1px solid var(--color-border);
  padding: max(14px, var(--safe-top)) 14px max(14px, var(--safe-bottom));
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
  box-shadow: 8px 0 30px rgba(0,0,0,.2);
}
.noa-drawer-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; }
.noa-drawer-new {
  width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-main); font-weight: 700; font-size: 15px; cursor: pointer;
}
.noa-drawer-section { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); margin-top: 6px; padding: 0 4px; }
.noa-drawer-list { flex: 1; display: flex; flex-direction: column; }
.noa-drawer-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 11px 10px; border-radius: 12px; color: var(--color-text-main); text-decoration: none;
}
.noa-drawer-item:active { background: var(--color-surface); }
.noa-drawer-item .noa-convo-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noa-drawer-foot { border-top: 1px solid var(--color-border); padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
/* [hidden] ต้องชนะ display ของคลาสเสมอ (บทเรียนเดียวกับ .noa-preview) */
.noa-drawer[hidden], .noa-drawer-backdrop[hidden] { display: none; }
.noa-menu-btn .icon { width: 22px; height: 22px; }

/* ===== Nongbokwa for Business — ฟอร์ม standalone (แก้บั๊ก label/input ไม่ stack) =====
   สาเหตุเดิม: input ไม่ระบุ type และ type=email ไม่ match selector input[type=text]
   + <label> เปล่าไม่มี display:block → label/ช่องกรอกลอยเรียงแนวนอน. scope ใต้ .biz-form เท่านั้น */
.biz-form label { display: block; font-weight: 700; font-size: 14px; margin: 16px 0 6px; color: var(--color-text-main); }
.biz-form label:first-of-type { margin-top: 4px; }
.biz-form input, .biz-form select, .biz-form textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); font-size: 15px; font-family: var(--font-sans);
  background: var(--color-bg); color: var(--color-text-main); }
.biz-form textarea { min-height: 64px; resize: vertical; line-height: 1.5; }
.biz-form .btn { margin-top: 18px; }
.biz-form .row2 { display: flex; gap: 10px; }
.biz-form .row2 > div { flex: 1; }
.biz-form .hint { font-size: 12.5px; color: var(--color-text-muted); margin: 4px 0 0; font-weight: 400; }

/* แถบวัดความครบโปรไฟล์ */
.meter { background: var(--color-bg); border-radius: var(--radius-pill); height: 10px; overflow: hidden; margin: 8px 0; border: 1px solid var(--color-border); }
.meter > span { display: block; height: 100%; background: var(--color-primary-gradient); border-radius: var(--radius-pill); transition: width 0.4s; }
.todo-chip { display: inline-block; background: var(--color-bg); border: 1px dashed var(--color-border); color: var(--color-text-muted); border-radius: var(--radius-pill); padding: 3px 10px; font-size: 12px; margin: 3px 4px 0 0; }

/* แถวรายการ (โปร/ราคา) ในหน้า AI */
.data-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; }
.data-row .grow { flex: 1; min-width: 0; }
.data-row form { margin: 0; display: inline; }
.data-row .mini { width: auto; padding: 5px 10px; font-size: 12.5px; margin: 0; border-radius: var(--radius-md); box-shadow: none; }
.data-row .mini.off { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge-off { font-size: 11px; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 1px 8px; }

/* ===== Nongbokwa for Business — layout กลาง (ใช้ header/ธีม/ฟอนต์เดียวกับแอพหลัก) ===== */
.biz-wrap { max-width: 640px; margin: 0 auto; padding: 16px; padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right)); }
.biz-wrap .card { padding: 20px; }
.app-header .brand.biz-brand { font-size: 17px; }
.biz-pagehead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.biz-pagehead h2 { margin: 8px 0; }

/* กล่องทดลองคุยกับ AI (playground) — ใช้ตัวแปรธีมให้เข้ากับ dark/light */
.biz-chat { min-height: 80px; max-height: 320px; overflow-y: auto; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px; margin-bottom: 10px; }
.biz-chat .row { margin: 6px 0; display: flex; }
.biz-chat .row.me { justify-content: flex-end; }
.biz-chat .bubble { display: inline-block; padding: 8px 12px; border-radius: 12px; max-width: 80%; }
.biz-chat .me .bubble { background: var(--color-primary-text); color: var(--color-btn-text); }
.biz-chat .bot .bubble { background: var(--color-surface); color: var(--color-text-main); border: 1px solid var(--color-border); }
.biz-playbar { display: flex; gap: 8px; }
.biz-playbar input { flex: 1; }

/* ===== CRM (Phase C) — Kanban board + timeline ===== */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.kanban-col { flex: 0 0 220px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px; }
.kanban-col > h4 { margin: 0 0 8px; font-size: 13.5px; display: flex; justify-content: space-between; }
.kanban-col .cnt { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0 8px; font-size: 12px; color: var(--color-text-muted); }
.crm-card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px; margin-bottom: 8px; text-decoration: none; color: var(--color-text-main); box-shadow: var(--shadow-sm); }
.crm-card:active { transform: scale(0.98); }
.crm-card b { display: block; }
.crm-card .meta { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }
.stage-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.stage-pick form { margin: 0; }
.stage-pick button { width: auto; margin: 0; padding: 6px 12px; font-size: 12.5px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-main); box-shadow: none; font-weight: 700; cursor: pointer; font-family: var(--font-sans); }
.stage-pick button.on { background: var(--color-primary-gradient); color: var(--color-btn-text); border: none; }
.timeline { list-style: none; padding: 0; margin: 8px 0 0; }
.timeline li { border-left: 2px solid var(--color-border); padding: 0 0 12px 12px; margin-left: 4px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-text); }
.timeline .kind { font-weight: 700; font-size: 13px; }
.timeline .when { font-size: 11.5px; color: var(--color-text-muted); }

/* ===== ชั้น M — สมุดสุขภาพผ่านการยินยอม (consent QR) ===== */
.card.warn { border-left: 4px solid var(--color-danger); }
.card.ok { border-left: 4px solid var(--color-primary); }
.card.emergency { border-left: 4px solid var(--color-danger); }
.link-row { text-decoration: none; color: var(--color-text-main); align-items: center; }
.link-row:active { transform: scale(0.99); }
.consent-issued { text-align: center; }
.consent-qr { width: 200px; max-width: 70%; height: auto; background: #fff; padding: 8px; border-radius: var(--radius-md); }
.consent-code { font-family: ui-monospace, monospace; font-size: 34px; font-weight: 800; letter-spacing: 6px; margin: 10px 0 2px; color: var(--color-primary-text); }
.code-input { font-family: ui-monospace, monospace; font-size: 22px; letter-spacing: 4px; text-align: center; }

/* ===== แยกฝั่งผู้ใช้ / ฝั่งธุรกิจ — ทางเข้า-ออกระหว่างสองโหมด ===== */
.biz-entry { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-text-main); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; margin-top: 24px; box-shadow: var(--shadow-sm); }
.biz-entry:active { transform: scale(0.99); }
.biz-entry-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-bg); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-primary-text); }
.biz-entry-text { flex: 1; min-width: 0; }
.biz-entry-text b { display: block; font-size: 14.5px; }
.biz-entry-text .small { color: var(--color-text-muted); line-height: 1.5; }
.biz-switch { width: 38px; height: 38px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text-main); box-shadow: var(--shadow-sm); text-decoration: none; }
.biz-switch:active { transform: scale(0.95); }
.biz-hero { text-align: center; padding: var(--space-2) 0 var(--space-1); }
.biz-hero h2 { margin: 0 0 var(--space-3); line-height: var(--leading-head); }
/* ⚠️ ย่อหน้าอธิบายจัดกึ่งกลางแล้วอ่านยาก — ตาต้องหาจุดเริ่มบรรทัดใหม่ทุกครั้ง
   ภาษาไทยไม่มีตัวพิมพ์ใหญ่ช่วยบอกจุดเริ่มประโยคด้วย จึงหนักกว่าอังกฤษอีก
   หัวเรื่องกับปุ่มยังกึ่งกลางได้ (สั้น) แต่คำอธิบายหลายบรรทัดต้องชิดซ้าย */
.biz-hero .small { color: var(--color-text-muted); line-height: var(--leading-body);
  margin: 0 auto var(--space-4); text-align: left; max-width: 34em; }
.biz-hero .btn { display: inline-block; width: auto; padding: 10px 22px; margin: 0 4px 8px; }
.biz-feature { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.biz-feature:last-child { border-bottom: 0; padding-bottom: 0; }
.biz-feature > span { flex: 0 0 auto; color: var(--color-primary-text); margin-top: 2px; }
.biz-feature p { margin: 4px 0 0; color: var(--color-text-muted); line-height: 1.55; }

/* ===== Noa Business Analytics — สถิติร้าน ===== */
.period-pick { display: flex; gap: 6px; margin: 10px 0 4px; }
.period-pick a { padding: 5px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); text-decoration: none; font-size: 12.5px; font-weight: 700; }
.period-pick a.on { background: var(--color-primary-gradient); color: var(--color-btn-text); border-color: transparent; }
.stat-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.stat { flex: 1 1 70px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 8px; text-align: center; }
.stat b { display: block; font-size: clamp(17px, 5vw, 21px); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; color: var(--color-text-muted); line-height: 1.35; display: block; margin-top: 2px; }
.advice { white-space: pre-wrap; line-height: 1.75; font-size: 14.5px; background: var(--color-bg); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 12px 14px; }
.funnel { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.funnel-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.funnel-row .fl { flex: 0 0 78px; color: var(--color-text-muted); }
.funnel-row .fbar { flex: 1; height: 9px; background: var(--color-bg); border-radius: var(--radius-pill); overflow: hidden; }
.funnel-row .fbar > i { display: block; height: 100%; background: var(--color-primary-text); border-radius: var(--radius-pill); min-width: 2px; }
.funnel-row .fn { flex: 0 0 28px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tbl-scroll { overflow-x: auto; }
.mini-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-tbl th, .mini-tbl td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.mini-tbl th { font-size: 11px; color: var(--color-text-muted); font-weight: 700; }
.mini-tbl td { font-variant-numeric: tabular-nums; }
.up { color: var(--color-primary-text); }
.down { color: var(--color-danger); }

/* ===== หน้า AI ตอบแชท — ปุ่มบันทึกต้องหาเจอ + ห้องลองคุยต้องกดได้ ===== */
.save-main { margin-top: 14px; font-size: 15.5px; padding: 13px; }
.biz-playbar input { flex: 1; min-width: 0; }   /* ไม่ใส่ = input ไม่ยอมหด ปุ่มส่งล้นออกนอกการ์ด */
.biz-playbar .btn { width: auto; flex: 0 0 auto; padding: 10px 20px; margin: 0; }
.biz-playbar .btn:disabled { opacity: .45; cursor: not-allowed; }
#playHint { margin-top: 6px; color: var(--color-text-muted); }
.was { color: var(--color-text-muted); font-weight: 400; }
.now { color: var(--color-primary-text); }

/* ⚠️ .btn บังคับ color:#ffffff !important (บรรทัด ~353) → ปุ่มลูกที่เปลี่ยนสีตัวอักษร
   ต้องใส่ !important ด้วย ไม่งั้นได้ตัวหนังสือขาวบนพื้นขาว = มองไม่เห็น
   (.btn.alt รอดเพราะมีกฎ !important ของตัวเองอยู่แล้ว ส่วน .off ไม่มี → บั๊กปุ่มลบ 25ก.ค.) */
.data-row .mini.off, .btn.off { color: var(--color-text-muted) !important; }
.data-row .mini.off:hover, .btn.off:hover { color: var(--color-danger) !important; border-color: var(--color-danger); }

/* ===== ระบบจองคิว — ตารางเวลา + คิวนัด ===== */
.hour-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.hour-row .hr-day { flex: 0 0 62px; font-weight: 700; font-size: 13.5px; }
.hour-row input[type=time] { flex: 1 1 90px; min-width: 0; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-main); font-family: var(--font-sans); }
.hour-row .hr-dash { color: var(--color-text-muted); }
.hour-row .hr-off { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; }
.hour-row .hr-off input { accent-color: var(--color-primary-text); width: 18px; height: 18px; }
.dur-input { width: 68px; flex: 0 0 auto; padding: 7px; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-main); font-family: var(--font-sans); }
.chk-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; margin: 0 10px 6px 0; font-weight: 600; }
.chk-inline input { accent-color: var(--color-primary-text); width: 17px; height: 17px; }
.day-nav { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.day-nav .btn { width: auto; padding: 8px 16px; margin: 0; }
.day-label { flex: 1; text-align: center; }
.day-label b { display: block; font-size: 15px; }
.day-label .small { color: var(--color-text-muted); }
.appt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; background: var(--color-bg); }
.appt.cancelled, .appt.no_show { border-left-color: var(--color-border); opacity: .6; }
.appt.done { border-left-color: var(--color-text-muted); }
.appt-time { flex: 0 0 82px; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.appt-acts { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.appt-acts form { margin: 0; }

/* ===== ช่องกรอกต้องมองเห็นว่าเป็นช่องกรอก =====
   ⚠️ ชั้น glass ตั้ง border-color ของ input เป็น --glass-stroke = rgba(255,255,255,.72)
   = ขอบ "สีขาว" บนพื้นขาว ผู้ใช้แยกไม่ออกว่าตรงไหนพิมพ์ได้ (บั๊กเดียวกับปุ่มลบ)
   คืนขอบให้เป็นสีที่เห็นจริง + พื้นทึบ แต่ยังคงความรู้สึกโปร่งเบาของดีไซน์เดิมไว้ */
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=time], input[type=search], input[type=number], input[type=tel],
textarea, select {
  border-color: var(--color-border);
  background-color: var(--color-surface);
}
:root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] input[type=email], :root[data-theme="dark"] input[type=date],
:root[data-theme="dark"] input[type=time], :root[data-theme="dark"] input[type=search],
:root[data-theme="dark"] input[type=number], :root[data-theme="dark"] input[type=tel],
:root[data-theme="dark"] textarea, :root[data-theme="dark"] select {
  border-color: var(--color-border);
  background-color: var(--color-bg);
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: .85; }

/* ห้องลองคุยกับ AI — ให้ดูเป็นกล่องแชทจริง แยกช่องพิมพ์ออกจากพื้นการ์ดชัดๆ */
.biz-chat { background: var(--color-bg); border: 1px solid var(--color-border); }
.biz-chat:empty::before {
  content: 'ยังไม่มีข้อความ — ลองพิมพ์คำถามด้านล่างดูครับ';
  color: var(--color-text-muted); font-size: 13px;
}
.biz-playbar { align-items: stretch; }
.biz-playbar input {
  padding: 12px 16px; font-size: 15px; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill); background: var(--color-surface);
}
.biz-playbar input:focus {
  border-color: var(--color-primary-text);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* header ฝั่งธุรกิจมีของ 4 อย่าง (โลโก้+แบรนด์ / สลับภาษา / สลับโหมด / สลับธีม)
   บนจอแคบพื้นที่ไม่พอจนชื่อแบรนด์ตัดบรรทัดแตก — บีบให้อยู่บรรทัดเดียวเสมอ */
.biz-brand { white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.app-header .lang-toggle { flex: 0 0 auto; }
@media (max-width: 430px) {
  .biz-brand { font-size: 15px; }
  .biz-brand img { width: 26px; height: 26px; }
  .biz-brand span { display: none; }            /* ซ่อนคำว่า Business เหลือแค่โลโก้+ชื่อ */
  .app-header .lang-toggle a { padding: 4px 9px; font-size: 12px; }
  .biz-switch, .app-header .theme-toggle { width: 34px; height: 34px; }
}

/* ===== แพ็กสมาชิก ===== */
.plan { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 12px; background: var(--color-bg); }
.plan.on { border-color: var(--color-primary-text); border-width: 2px; }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plan-head b { font-size: 16px; }
.plan-price { font-size: clamp(16px, 5vw, 20px); font-weight: 800; color: var(--color-primary-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-price .small { font-size: 12px; color: var(--color-text-muted); font-weight: 500; }
.plan p.small { color: var(--color-text-muted); margin: 4px 0 8px; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 10px; font-size: 13px; }
.plan-feats li { padding: 3px 0 3px 20px; position: relative; }
.plan-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--color-primary-text); font-weight: 800; }
.save-badge { display: block; font-size: 10.5px; font-weight: 600; opacity: .85; }
.pay-amount { font-size: clamp(16px, 5vw, 20px); color: var(--color-primary-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trial-banner { display: flex; align-items: center; gap: 10px; background: var(--color-primary-light); border: 1px solid var(--color-primary); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.trial-banner b { color: var(--color-primary-dark); }
.trial-banner a { margin-left: auto; white-space: nowrap; font-weight: 700; }

/* ===== คลัง + บัญชี ===== */
.inv-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.inv-links .btn, .inv-links form { width: auto; margin: 0; }
.inv-links .btn { padding: 8px 14px; font-size: 13px; }
.abc { display: inline-block; font-size: 10.5px; font-weight: 800; width: 17px; height: 17px; line-height: 17px; text-align: center; border-radius: 4px; color: #fff; margin-left: 4px; }
.abc-A { background: var(--color-primary-text); }
.abc-B { background: var(--color-text-muted); }
.abc-C { background: var(--color-border); color: var(--color-text-muted); }
.badge-ctl { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--color-danger-bg); color: var(--color-danger); margin-left: 4px; }
.trend { display: flex; gap: 8px; align-items: flex-end; overflow-x: auto; padding: 10px 0 4px; }
.trend-col { flex: 1 0 46px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.trend-bar { width: 70%; min-height: 3px; background: var(--color-primary-text); border-radius: 4px 4px 0 0; }
.trend-col .small { font-size: 10.5px; white-space: nowrap; }

/* ===== เอกสารสัญญา ===== */
.legal-doc h3 { margin: 22px 0 6px; font-size: 15.5px; }
.legal-doc p, .legal-doc li { font-size: 14px; line-height: 1.75; color: var(--color-text-main); }
.legal-doc ul { padding-left: 20px; margin: 6px 0; }
.legal-doc li { margin-bottom: 5px; }
.legal-warn { background: var(--color-danger-bg); border-left: 3px solid var(--color-danger); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 10px 14px; margin: 8px 0; font-size: 13.5px; line-height: 1.7; }
.legal-draft { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); line-height: 1.7; }

/* ===== หน้าแรกใหม่ (25 ก.ค. 2026) — ชูสมุดสุขภาพขึ้นบน ดันดีล affiliate ลงล่าง ===== */
.hub-hero { margin: var(--space-1) 0 var(--space-5); }
.hub-hero-head { font-size: clamp(26px, 7.6vw, 32px); font-weight: var(--weight-hero);
  line-height: var(--leading-head); margin: 0; color: var(--color-text-main); letter-spacing: -0.3px; }
.hub-hero-sub { font-size: 14.5px; color: var(--color-text-muted); font-weight: 500;
  margin: var(--space-2) 0 0; line-height: var(--leading-body); }
.feed-head-link { float: right; font-size: 13px; font-weight: 600; color: var(--color-primary-text); text-decoration: none; }

/* แถวน้อง — เลื่อนแนวนอนได้เมื่อมีหลายตัว ไม่ดันเนื้อหาอื่นตกจอ */
.pet-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pet-strip::-webkit-scrollbar { display: none; }
.pet-chip { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 62%; max-width: 88%;
  padding: 10px 12px; border-radius: var(--radius-lg); background: var(--color-surface);
  border: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.pet-chip:active { transform: scale(0.98); }
.pet-chip-face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); }
.pet-chip-face img { width: 100%; height: 100%; object-fit: cover; }
.pet-chip-emoji { font-size: 24px; line-height: 1; }
.pet-chip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pet-chip-body b { font-size: 15.5px; }
.pet-chip-body .small { white-space: normal; }
.due-soon { color: var(--color-primary-text); font-weight: 700; }
.due-past { color: var(--color-danger); font-weight: 700; }

/* ⚠️ การ์ดนี้คือจุดเปลี่ยน "คนแวะดู → ผู้ใช้จริง" สำคัญที่สุดในหน้าแรก
   เดิมใช้เส้นประบนพื้นชมพูอ่อน ซึ่งคนไทยอ่านว่า "คูปอง/แบนเนอร์โฆษณา" แล้วข้ามไป
   (ผลออดิท UX 26 ก.ค. 2026) → เปลี่ยนเป็นการ์ดทึบมีเงาจริง + แถบสีแบรนด์ด้านซ้าย
   ให้อ่านว่าเป็นฟีเจอร์หลักของแอป ไม่ใช่โฆษณา */
.pet-invite { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
  border-radius: var(--radius-lg); background: var(--color-surface);
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-md); text-decoration: none; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pet-invite:active { transform: scale(0.985); box-shadow: var(--shadow-sm); }
.pet-invite-icon { font-size: 26px; line-height: 1; flex-shrink: 0;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--color-primary-light); }
.pet-invite-text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.pet-invite-text b { font-size: 15.5px; font-weight: var(--weight-card); line-height: var(--leading-head); }
.pet-invite-text .small { line-height: var(--leading-body); }

.home-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.home-sc { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px;
  border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border);
  text-decoration: none; color: inherit; font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.3; }
.home-sc span { font-size: 21px; line-height: 1; }
.home-sc:active { transform: scale(0.97); }

.appt-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-lg); background: var(--color-surface);
  border: 1px solid var(--color-border); }
.appt-row .small { text-align: right; white-space: nowrap; }

.noa-ask { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding: 14px;
  border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border);
  text-decoration: none; color: inherit; }
.noa-ask-head { font-weight: 800; font-size: 16px; }
.noa-ask-eg { font-size: 13.5px; color: var(--color-text-muted); font-style: italic; line-height: 1.5; }
.noa-ask-cta { font-size: 13.5px; font-weight: 700; color: var(--color-primary-text); margin-top: 2px; }

/* ดีล affiliate ย่อเป็นแถวเลื่อน — เดิมกินพื้นที่หน้าแรกไป 60% */
.promo-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.promo-strip::-webkit-scrollbar { display: none; }
.promo-chip { flex: 0 0 auto; width: 132px; display: flex; flex-direction: column; gap: 4px;
  padding: 8px; border-radius: var(--radius-lg); background: var(--color-surface);
  border: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.promo-chip img { width: 100%; height: 96px; object-fit: cover; border-radius: var(--radius-md); }
.promo-chip-title { font-size: 12.5px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== หน้าแนะนำฝั่งธุรกิจ — เติมให้ทัดเทียมคู่แข่ง (25 ก.ค. 2026) ===== */
/* บรรทัด "สมัครเสร็จใช้ได้เลย" — เดิมสีส้มตัวหนาแข่งเด่นกับปุ่มจริงที่อยู่ใต้มัน
   ลดให้เป็นข้อความสนับสนุน ปุ่มต้องเป็นสิ่งเดียวที่เด่นที่สุดในบล็อกนี้ */
.biz-land-instant { font-size: 13.5px; font-weight: 600; color: var(--color-text-muted);
  margin: calc(var(--space-2) * -1) 0 var(--space-4); line-height: var(--leading-body); }
.biz-hero-end { margin-top: 8px; padding: 18px 0 8px; border-top: 1px solid var(--color-border); }
.biz-hero-end h3 { margin: 0 0 6px; }

.biz-stats { display: flex; justify-content: space-around; gap: 8px; text-align: center; }
.biz-stats > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.biz-stats b { font-size: 20px; font-weight: 900; color: var(--color-primary-text); }
.biz-stats span { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.35; }

/* ตัวอย่างบทสนทนา — ให้เห็นของจริงว่า AI ตอบยังไง */
.chat-demo { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
/* เดโมคุยจริงบนหน้าขาย — คุยยาวได้ กล่องต้องไม่ดันหน้ายืด */
#demoLog { max-height: 380px; overflow-y: auto; }

/* แถว QR แอดไลน์ — รูปพื้นขาวเสมอ (โหมดมืด QR บนพื้นเข้มสแกนยาก) */
.line-qr-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.line-qr-row img { background: #fff; border-radius: var(--radius-md); padding: 6px;
  border: 1px solid var(--color-border); }
.line-qr-acts { display: flex; flex-direction: column; gap: 8px; }

/* ---- กราฟหน้าวิเคราะห์ (รอบ 4, 30 ก.ค. 2026) ----
   สี categorical ผ่าน validator (dataviz skill) ทั้งสองโหมดบน surface จริง:
   light บน #FFFFFF · dark บน #251E17 (ตรวจซ้ำ 30 ก.ค. หลังอุ่นโทน) — ห้ามแก้สีโดยไม่รัน validator ซ้ำ
   (แถบ CVD warn ของคู่ข้างเคียงคุมด้วย gap 2.5px + legend ระบุ %ทุกชิ้น) */
:root {           /* ค่า light เป็นค่าตั้งต้น — กันเคสไม่มี data-theme (ปิด JS) */
  --viz-1: #eb6834; --viz-2: #1baf7a; --viz-3: #eda100;
  --viz-4: #e87ba4; --viz-5: #2a78d6;
}
:root[data-theme="dark"] {
  --viz-1: #d95926; --viz-2: #199e70; --viz-3: #c98500;
  --viz-4: #d55181; --viz-5: #3987e5;
}
.ins-charts { display: grid; gap: 12px; margin-bottom: 12px; }
/* เทรนด์กว้างกว่าโดนัท (1.6:1) — เส้น 30 จุดในคอลัมน์ครึ่งเดียวอ่านไม่ออก */
@media (min-width: 960px) { .ins-charts { grid-template-columns: 1.6fr 1fr; } }
.ins-chart-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; }
.delta-chip { font-size: 12.5px; font-weight: 800; border-radius: var(--radius-pill);
  padding: 3px 10px; white-space: nowrap; }
.delta-chip.up { background: var(--color-success-bg); color: var(--color-success); }
.delta-chip.down { background: var(--color-danger-bg); color: var(--color-danger); }

.trend-wrap { position: relative; }
.trend-svg { width: 100%; height: auto; display: block; }
.trend-svg .grid { stroke: var(--color-border); stroke-width: 1; }
.trend-svg .ax { fill: var(--color-text-muted); font-size: 10px;
  font-family: var(--font-sans); }
.trend-svg .line { fill: none; stroke: var(--viz-1); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.trend-svg .area { fill: var(--viz-1); opacity: .1; }
.trend-svg .pt { fill: var(--viz-1); }
.trend-svg .pt-hit { fill: transparent; }        /* hit target ใหญ่กว่า mark */
.trend-tip { position: absolute; background: var(--color-text-main);
  color: var(--color-surface); font-size: 12px; font-weight: 700;
  border-radius: var(--radius-md); padding: 4px 10px; pointer-events: none;
  white-space: nowrap; }
.chart-table summary { cursor: pointer; color: var(--color-text-muted); }

.donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut-svg { width: 140px; height: 140px; flex: none; }
.donut-svg .seg { fill: none; stroke-width: 24; }
.donut-svg .donut-total { fill: var(--color-text-main); font-size: 26px;
  font-weight: 800; font-family: var(--font-sans); }
.donut-svg .donut-unit { fill: var(--color-text-muted); font-size: 12px;
  font-family: var(--font-sans); }
.seg-1 { stroke: var(--viz-1); } .seg-2 { stroke: var(--viz-2); }
.seg-3 { stroke: var(--viz-3); } .seg-4 { stroke: var(--viz-4); }
.seg-5 { stroke: var(--viz-5); }
.donut-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 7px; }
.dl-row { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.dl-dot { width: 10px; height: 10px; border-radius: 3px; flex: none;
  align-self: center; }
i.dl-dot.seg-1 { background: var(--viz-1); } i.dl-dot.seg-2 { background: var(--viz-2); }
i.dl-dot.seg-3 { background: var(--viz-3); } i.dl-dot.seg-4 { background: var(--viz-4); }
i.dl-dot.seg-5 { background: var(--viz-5); }
.dl-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-msg { max-width: 84%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; }
.cd-them { align-self: flex-start; background: var(--color-surface-hover); border-bottom-left-radius: 5px; }
.cd-us { align-self: flex-end; background: var(--color-primary-light); border-bottom-right-radius: 5px; }

.land-plan { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.land-plan:last-of-type { border-bottom: 0; }
.land-plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.land-plan p { margin: 3px 0 0; }

.faq { border-bottom: 1px solid var(--color-border); padding: 4px 0; }
.faq:last-of-type { border-bottom: 0; }
.faq summary { cursor: pointer; padding: 9px 0; font-weight: 700; font-size: 14.5px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--color-text-muted); font-weight: 400; }
.faq[open] summary::after { content: "−"; }
.faq p { margin: 0 0 10px; line-height: 1.7; }

/* ===== ใบเสร็จ — ต้องพิมพ์ออกมาแล้วอ่านได้เหมือนเอกสารจริง ===== */
.receipt-doc { background: #fff; color: #111; padding: 22px; border-radius: var(--radius-lg);
  border: 1px solid #ddd; }
.receipt-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 14px; }
.receipt-head h2 { margin: 0; font-size: 19px; }
.receipt-head .small, .receipt-doc .small { color: #555; }
.receipt-brand { text-align: right; }
.receipt-party { margin-bottom: 14px; }
.receipt-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.receipt-table th, .receipt-table td { padding: 9px 6px; border-bottom: 1px solid #ddd;
  text-align: left; vertical-align: top; }
.receipt-table .right { text-align: right; white-space: nowrap; }
.receipt-total td { border-bottom: 0; border-top: 2px solid #111; }
@media print {
  .no-print, .biz-topbar, nav, footer { display: none !important; }
  .receipt-doc { border: 0; padding: 0; }
}
.trial-banner.urgent { border-color: var(--color-danger); background: var(--color-danger-bg); }
.trial-banner.urgent b { color: var(--color-danger); }
.site-foot { margin: 22px 0 4px; opacity: .75; }
/* รูปสลิปในหน้าแอดมิน — ต้องใหญ่พอให้อ่านยอดเงินได้จริงก่อนกดอนุมัติ */
.slip-thumb { max-width: 260px; max-height: 340px; border-radius: 8px; border: 1px solid var(--color-border); display: block; margin: 6px 0; }

/* ===== หัวหน้าจอ: ปุ่มเดียว (รื้อ UX รอบ 2 · 25 ก.ค. 2026) =====
   ⚠️ ห้ามเพิ่มปุ่มลอยๆ กลับเข้าหัวอีก — ของ 4 ชิ้นเคยล้นทับกันบนจอ 440px
   และการไล่แก้ breakpoint จะพังอีกกับจอรุ่นถัดไป ให้ใส่ในแผงนี้แทน */
.head-tools { position: relative; flex: 0 0 auto; }
.gear-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-main); font-size: 17px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gear-btn:active { transform: scale(.94); }
/* ⚠️ แผงนี้ลอยทับเนื้อหา — ใช้ --color-surface เฉยๆ ไม่ได้
   ในธีมกระจก --color-surface เป็น "สีโปร่งแสง" ที่ตั้งใจให้คู่กับ backdrop-filter
   ถ้าไม่ใส่เบลอด้วย ข้อความข้างหลังจะทะลุมาปนจนอ่านไม่ออก (บุ๋ยแจ้ง 26 ก.ค. 2026)
   ⚠️ ต้องมี fallback ทึบสำหรับเบราว์เซอร์/เครื่องที่ไม่รองรับ backdrop-filter
      ไม่งั้นเครื่องเก่าจะเจออาการเดิมโดยไม่มีใครรู้ */
/* ⚠️ แผงนี้ต้อง **ทึบ** ห้ามใช้ --color-surface (ในธีมกระจกเป็นสีโปร่งแสง)
   เหตุผล 2 ชั้น:
   1. แผงลอยทับเนื้อหาที่เป็นตัวหนังสือใหญ่ ถ้าโปร่งจะทะลุมาปนจนอ่านไม่ออก
      (บุ๋ยแจ้ง 26 ก.ค. 2026)
   2. ลองใส่ backdrop-filter แล้วยังทะลุอยู่ เพราะแผงอยู่ **ข้างใน .app-header
      ซึ่งมี backdrop-filter อยู่แล้ว** — เบลอซ้อนเบลอไม่ได้ผล
   เมนูสั้นๆ ไม่ได้อะไรจากความโปร่ง แต่เสียการอ่านออกไปเต็มๆ → ทึบคือคำตอบ */
.head-panel { position: absolute; right: 0; top: 46px; z-index: 200; min-width: 216px;
  background: var(--color-menu-solid); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: 0 12px 34px rgba(0,0,0,.30); padding: 8px 12px; }
.head-panel-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.head-panel-row:last-child { border-bottom: 0; }

/* ===== ของฉัน: 4 กลุ่ม (รื้อ UX รอบ 2 · 25 ก.ค. 2026) ===== */
.connect-row { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.connect-row:last-child { border-bottom: 0; padding-bottom: 0; }
.connect-row summary { cursor: pointer; list-style: none; }
.connect-row summary::-webkit-details-marker { display: none; }
.connect-row summary::after { content: "›"; float: right; color: var(--color-text-muted); }
.connect-row[open] summary::after { content: "⌄"; }
.connect-row summary .small { display: block; color: var(--color-text-muted); }
.settings-group > summary { cursor: pointer; list-style: none; padding: 2px 0; }
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::after { content: "›"; float: right; color: var(--color-text-muted); }
.settings-group[open] > summary::after { content: "⌄"; }
/* การ์ดเริ่มต้นสำหรับคนที่ยังไม่ลงทะเบียน — ต้องมีสิ่งเดียวให้ทำ */
.start-card { text-align: center; }
.start-card h3 { margin: 6px 0 4px; }
.start-card .btn { margin-top: 10px; }
.start-icon { font-size: 30px; color: var(--color-primary-text); }
.start-icon .icon { width: 34px; height: 34px; }

/* ---- การ์ดราคาแบบเทียบกัน (26 ก.ค. 2026) ----
   ⚠️ ของเดิมเป็นรายการเรียงลงมาเฉยๆ ต้องเลื่อนขึ้นลงเทียบเอง ตัดสินใจยาก
      หน้าราคาที่ดีต้องเห็นความต่างของแพ็กพร้อมกันในสายตาเดียว
   มือถือ: การ์ดเต็มความกว้าง เรียงลงมา (จอแคบวางข้างกันแล้วอ่านไม่ออก)
   จอกว้าง: วางข้างกันเทียบได้ทันที */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-4) 0; }
@media (min-width: 720px) {
  .plan-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
}
.plan-card { display: flex; flex-direction: column; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden; }
/* แพ็กที่อยากให้เลือก — เน้นด้วยเส้นขอบ ไม่ใช่สีพื้นฉูดฉาด จะได้ยังอ่านง่าย */
.plan-card.is-featured { border-color: var(--color-primary); box-shadow: var(--shadow-lg); }
.plan-card.is-current { border-color: var(--color-success); }
.plan-card-top { padding: var(--space-5) var(--space-4) var(--space-4); }
.plan-name { font-size: 17px; font-weight: var(--weight-section); line-height: var(--leading-head);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
/* เขียว = "แพ็กที่คุณใช้อยู่" (สถานะ) · สีแบรนด์ = "จุดขาย" (โปรโมชั่น)
   ⚠️ อย่าใช้สีเดียวกัน ไม่งั้นผู้ใช้อ่านป้ายโปรว่าเป็นแพ็กที่ตัวเองสมัครอยู่ */
.plan-current-tag { font-size: 11px; font-weight: 700; color: var(--color-success);
  background: var(--color-success-bg); border-radius: var(--radius-pill); padding: 2px 9px; }
.plan-tag { font-size: 11px; font-weight: 700; color: var(--color-primary-text);
  background: var(--color-surface); border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-pill); padding: 2px 9px; }
.plan-for { font-size: 13.5px; color: var(--color-text-muted); line-height: var(--leading-body);
  margin: var(--space-2) 0 0; }
.plan-price-block { margin: var(--space-4) 0 0; }
.plan-amount { font-size: 30px; font-weight: 800; color: var(--color-text-main);
  letter-spacing: -0.5px; line-height: 1.1; }
.plan-unit { font-size: 14px; color: var(--color-text-muted); font-weight: 600; }
.plan-yearly { font-size: 12.5px; color: var(--color-text-muted); margin-top: var(--space-2);
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* ⚠️ ห้ามใส่ flex-basis ให้ปุ่มในนี้ — คอนเทนเนอร์เป็นแนวตั้ง flex-basis จะกลายเป็น
   "ความสูงขั้นต่ำ" ไม่ใช่ความกว้าง (กฎเก่าตั้ง 130px ปุ่มเลยสูงเท่าการ์ดครึ่งใบ) */
.plan-buy { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.plan-buy .btn { flex: none; padding: 12px 16px; font-size: 15px; }
/* รายการฟีเจอร์ — เส้นคั่นบอกว่า "ข้างบนคือราคา ข้างล่างคือได้อะไร" */
.plan-feats { list-style: none; margin: 0; padding: var(--space-4);
  border-top: 1px solid var(--color-border); display: flex; flex-direction: column;
  gap: var(--space-2); font-size: 13.5px; line-height: var(--leading-body); }
.plan-feats li { position: relative; padding-left: 22px; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--color-primary-text); font-weight: 800; }
.plan-feats-inherit { font-weight: 700; color: var(--color-text-main); }
.plan-feats-inherit::before { content: "" !important; }

/* ---- สวิตช์รอบชำระเงิน (26 ก.ค. 2026) ----
   ⚠️ เดิมทุกการ์ดมีปุ่มรายเดือน+รายปี = 8 ปุ่มทั้งหน้า ต้องเลื่อนผ่านทีละคู่กว่าจะถึงแพ็กถัดไป
      ย้ายมาเป็นสวิตช์เดียวด้านบน เหลือปุ่มเดียวต่อการ์ด */
/* ⚠️ เดิมตัวที่เลือกใช้พื้น --color-surface บนแถบ --color-btn-alt-bg ซึ่งต่างกันแค่
   1.10:1 (สว่าง) / 1.42:1 (มืด) = แทบมองไม่ออกว่ามีให้เลือกสองแบบ (บุ๋ยแจ้ง 26 ก.ค. 2026)
   ใช้สีแบรนด์เต็มๆ กับตัวที่เลือกแทน — คู่สีเดียวกับปุ่มซึ่งผ่านเกณฑ์อ่านง่ายแล้ว */
.cycle-label { font-size: 13px; font-weight: 700; color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-2); }
.cycle-switch { display: flex; background: var(--color-btn-alt-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 4px; gap: 4px; margin-bottom: var(--space-3); }
.cycle-opt { flex: 1; border: none; background: transparent; color: var(--color-text-muted);
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-pill); display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; transition: background 0.15s, color 0.15s; min-height: var(--tap-size); }
.cycle-opt.is-on { background: var(--color-primary-gradient); color: var(--color-btn-text);
  box-shadow: var(--shadow-sm); }
.cycle-opt.is-on .save-badge { background: rgba(255,255,255,0.25); color: inherit; }
.cycle-opt .save-badge { font-size: 10.5px; }

/* ---- แดชบอร์ดธุรกิจ: แถวจัดกลุ่ม (26 ก.ค. 2026) ----
   ⚠️ เดิมเมนู 9-11 รายการเป็นชิปกลมขนาดไม่เท่ากัน ห่อบรรทัดมั่วจนหาของไม่เจอ
      แถวความสูงเท่ากัน + ไอคอนขนาดเดียวกัน = สายตากวาดหาของได้เร็วกว่ามาก */
.biz-org { padding: var(--space-4); }
.biz-org-head { margin-bottom: var(--space-3); }
.biz-meter { margin: var(--space-3) 0 var(--space-2); }
.biz-group { margin-top: var(--space-4); }
.biz-group-head { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted);
  letter-spacing: 0.3px; margin-bottom: var(--space-1); padding: 0 var(--space-1); }
.biz-row { display: flex; align-items: center; gap: var(--space-3); padding: 13px var(--space-2);
  color: var(--color-text-main); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.biz-row:last-child { border-bottom: 0; }
.biz-row:active { background: var(--color-surface-hover); }
.biz-row > span:first-of-type { flex: 1; font-size: 15px; font-weight: 600; }
.biz-row .icon { width: 20px; height: 20px; flex: none; color: var(--color-primary-text); }
/* งานที่ต้องทำก่อนใช้ร้านได้จริง (เคลมร้าน) — เด่นกว่าเมนูปกติแต่ไม่ตะโกน */
.biz-cta { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  background: var(--color-primary-light); border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text-main); margin-bottom: var(--space-2); }
.biz-cta > span:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* ---- ปุ่มบันทึก QR (ใช้ทั้งหน้าซื้อเครดิตและหน้าจ่ายค่าสมาชิกร้าน) ----
   ⚠️ บนมือถือ QR อยู่บนจอเดียวกับที่ต้องสแกน สแกนตัวเองไม่ได้
      ต้องบันทึกรูปก่อนแล้วเปิดแอปธนาคาร → "สแกนจากรูปภาพ"
      เดิม CSS นี้อยู่ใน buy.html หน้าเดียว ฝั่งธุรกิจจึงไม่มีปุ่มให้กด */
.qr-actions { display: flex; justify-content: center; margin: var(--space-2) 0 var(--space-1); }
.qr-actions .btn { width: auto; padding: 10px 20px; text-decoration: none; }

/* ================= ปุ่มหลักฝั่งธุรกิจ: โทนเข้ม (26 ก.ค. 2026) =================
   บุ๋ยอนุมัติหลังศึกษา Zaapi — ดู /static/docs/ux-study-zaapi.html

   ⚠️ ทำไมสองฝั่งใช้สีปุ่มต่างกัน (ตั้งใจ ไม่ใช่ความไม่สม่ำเสมอ):
      ฝั่งเจ้าของสัตว์ = คนมาดูเรื่องน้อง ต้องอบอุ่น → คงปุ่มสีส้มแบรนด์
      ฝั่งร้าน/คลินิก = คนกำลังตัดสินใจจ่ายเดือนละหลักพัน ต้องดูน่าเชื่อถือ → โทนเข้ม
      **สีแบรนด์ยังอยู่ทั้งสองฝั่ง** แค่ย้ายไปเป็นสีเน้น (ลิงก์ ไอคอน ป้าย)
      แทนที่จะเป็นพื้นปุ่ม — ตามบทเรียนจาก Zaapi ที่ใช้สีแบรนด์อย่างประหยัด

   ⚠️ โหมดมืดต้องกลับด้าน: ปุ่มเข้มบนพื้นเข้มจะหายไป จึงใช้ปุ่มสว่างตัวอักษรเข้มแทน
      (แพทเทิร์นเดียวกับที่ผลิตภัณฑ์ระดับพรีเมียมหลายเจ้าใช้) */
/* ⚠️ พื้นปุ่มจริงมาจากกฎ `.btn, a.btn-nav, button.btn-nav { background: var(--color-primary-text) }`
   ในชั้นกระจก **ไม่ใช่ --color-primary-gradient** (กฎนั้นถูกทับไปแล้ว)
   จึงต้องแยก token พื้นปุ่มออกจาก token สีตัวอักษร ไม่งั้นเปลี่ยนพื้นปุ่มแล้ว
   ลิงก์/ไอคอนจะเปลี่ยนตามไปด้วย ซึ่งเราอยากให้ยังเป็นสีส้มแบรนด์ */
:root { --color-btn-bg: var(--color-primary-text); }
.btn, a.btn-nav, button.btn-nav { background: var(--color-btn-bg); }

html[data-side="business"][data-theme="light"] {
  /* เขียวเข้มเกือบดำ — คงเจตนา "ปุ่มฝั่งธุรกิจต้องดูหนักแน่น" แต่เข้าแบรนด์เขียวใหม่
     (ของเดิมเป็นกรมท่า #1F2A3C ซึ่งลอยจากพื้นครีม-มิ้นต์) */
  --color-btn-bg: #123A34;
  --color-btn-text: #FFFFFF;
  --color-primary-shadow: rgba(18,58,52,.28);
}
html[data-side="business"][data-theme="dark"] {
  --color-btn-bg: #E4F1EC;
  --color-btn-text: #0F1F1C;
  --color-primary-shadow: rgba(0,0,0,.45);
}

/* ---- แถวเมนูที่ยังไม่มีสิทธิ์ใช้ (26 ก.ค. 2026) ----
   ⚠️ เดิม "ซ่อน" เมนูที่แพ็กยังไม่ถึง ร้านจึงไม่รู้ว่ามีของพวกนี้อยู่เลย
      และร้านที่มีสิทธิ์ก็ต้องกดเข้าไปทีละอันถึงจะรู้ว่าอันไหนใช้ไม่ได้ (บุ๋ยแจ้ง)
      → แสดงทุกแถว แต่ทำให้จางลงและติดป้ายบอกว่าต้องอัปเป็นแพ็กอะไร
      กดแล้วพาไปหน้าแพ็กเลย ไม่ใช่พาไปหน้าที่เข้าไม่ได้ */
.biz-row.is-locked > span:first-of-type { color: var(--color-text-muted); font-weight: 500; }
.biz-row.is-locked .icon { opacity: .45; }
.lock-tag { font-size: 11px; font-weight: 700; color: var(--color-primary-text);
  background: var(--color-primary-light); border-radius: var(--radius-pill);
  padding: 3px 9px; white-space: nowrap; flex: none; }

/* ---- โครงจอกว้างฝั่งธุรกิจ (30 ก.ค. 2026) ----
   มือถือ = โครงเดิมคอลัมน์เดียว (ร้านไทยเปิดจากมือถือเป็นหลัก — mobile-first ห้ามถอย)
   จอ ≥960px = sidebar ค้างซ้าย กดข้ามหน้าได้เลย ไม่ต้องย้อนกลับแดชบอร์ดทุกครั้ง
   ⚠️ ยืมมาแค่ "โครง" จากคู่เทียบ (nongadmin) — สี/โทนยังเป็นส้มแบรนด์เราเท่านั้น */
.biz-side { display: none; }
@media (min-width: 960px) {
  .biz-shell.has-side { display: grid; grid-template-columns: 230px minmax(0, 1fr);
    gap: 16px; max-width: 940px; margin: 0 auto;
    padding: 0 max(16px, var(--safe-right)) 0 max(16px, var(--safe-left));
    align-items: start; }
  .biz-shell.has-side .biz-wrap { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
  .biz-side { display: block; position: sticky; top: 16px; margin: 16px 0;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--shadow-md);
    max-height: calc(100vh - 32px); overflow-y: auto; }
  .side-head { font-size: 11px; font-weight: 700; color: var(--color-text-muted);
    letter-spacing: .04em; padding: 14px 10px 4px; }
  .biz-side .side-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: var(--radius-md); font-size: 14px; font-weight: 600;
    color: var(--color-text-main); text-decoration: none; }
  .biz-side .side-link .icon { width: 18px; height: 18px; flex: none;
    color: var(--color-text-muted); }
  .biz-side .side-link:hover { background: var(--color-surface-hover); }
  .biz-side .side-link.on { background: var(--color-primary-light);
    color: var(--color-primary-text); }
  .biz-side .side-link.on .icon { color: var(--color-primary-text); }
  /* จอกว้างมี sidebar แล้ว — กลุ่มเมนูในการ์ดแดชบอร์ดจะกลายเป็นของซ้ำสองที่ ("ดูรก")
     ⚠️ ไม่ขัดคำสั่ง "ห้ามซ่อนเมนู" 26 ก.ค.: ทุกรายการยังเห็นครบใน sidebar
        และบนมือถือ (ไม่มี sidebar) กลุ่มเมนูยังแสดงเหมือนเดิมทุกอย่าง */
  .biz-shell.has-side .biz-group { display: none; }
}

/* ---- หน้าคิวนัดรอบ 2 (30 ก.ค. 2026): มุมมองทั้งหมด + จอง 3 ขั้น ---- */
.bk-search { display: flex; gap: 8px; margin: 4px 0 10px; }
.bk-search input[name="q"] { flex: 1; min-width: 0; }
.bk-search .btn { width: auto; padding: 8px 16px; flex: none; }
.bk-badge { font-size: 12px; font-weight: 700; border-radius: var(--radius-pill);
  padding: 3px 10px; white-space: nowrap; }
.bk-badge.booked { background: var(--color-primary-light); color: var(--color-primary-text); }
.bk-badge.done { background: var(--color-success-bg); color: var(--color-success); }
.bk-badge.cancelled { background: var(--color-danger-bg); color: var(--color-danger); }
.bk-badge.no_show { background: var(--color-surface-hover); color: var(--color-text-muted); }
.bk-tbl td { vertical-align: top; }
.bk-tbl .appt-acts { flex-direction: row; gap: 6px; }
/* ปุ่มจิ๋วเปลี่ยนสถานะ — เดิมมีกฎเฉพาะใน .data-row พอไปอยู่ในตาราง/การ์ดนัด
   ปุ่มเลยบวมเต็มไซส์ .btn ปกติ (เจอจากแคปจริง 30 ก.ค. 2026) */
.btn.mini { width: auto; min-height: 0; padding: 5px 10px; font-size: 12.5px;
  margin: 0; border-radius: var(--radius-md); box-shadow: none; }
.btn.mini.off { background: var(--color-surface); border: 1px solid var(--color-border); }

/* หัวขั้นตอน 1-2-3 ในฟอร์มจอง */
.wiz-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; }
.wiz-head:first-of-type { margin-top: 6px; }
.wiz-num { width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--color-primary-light); color: var(--color-primary-text);
  font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }

/* ตารางช่องเวลา — ปุ่มกดจริง ใหญ่พอสำหรับนิ้ว */
.slot-day { margin: 10px 0 2px; }
.slot-day-label { font-size: 13px; font-weight: 700; color: var(--color-text-muted);
  margin-bottom: 6px; cursor: pointer; }
details.slot-day[open] > .slot-day-label { color: var(--color-primary-text); }
/* บริการ (คอลัมน์ 3) ยอมตัดบรรทัดได้ — ไม่งั้นตารางกว้างจนปุ่มขวาตกขอบ */
.bk-tbl td:nth-child(3) { white-space: normal; min-width: 120px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px; }
.slot-btn { padding: 9px 4px; border-radius: var(--radius-md); font-weight: 700;
  font-family: var(--font-sans); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer;
  background: var(--color-surface); color: var(--color-text-main);
  border: 1px solid var(--color-border); }
.slot-btn:hover { border-color: var(--color-primary); }
.slot-btn.on { background: var(--color-primary-light); color: var(--color-primary-text);
  border-color: var(--color-primary); }

/* แถวปิดบัญชี — ต้องหาเจอแต่ต้องไม่ชวนกด วางแยกการ์ดท้ายสุดและใช้สีอันตราย */
.biz-row-danger > span:first-of-type, .biz-row-danger .icon { color: var(--color-danger); }
/* หน้ายืนยันปิดบัญชี — เน้นให้อ่านครบก่อนกด */
.danger-doc h3 { font-size: 15px; margin: 20px 0 6px; }
.del-lead { font-weight: 700; line-height: var(--leading-body); }
.del-list { margin: 0 0 8px; padding-left: 20px; font-size: 14px; line-height: var(--leading-body); }
.del-list li { margin-bottom: 6px; }
.del-gone li::marker { color: var(--color-danger); }
.del-keep li::marker { color: var(--color-success); }
.del-final { background: var(--color-danger-bg); color: var(--color-danger); font-weight: 700;
  border-radius: var(--radius-md); padding: 12px 14px; margin: 16px 0;
  font-size: 14px; line-height: var(--leading-body); }

/* จุดเด้ง "โนอาร์กำลังพิมพ์..." — สัญญาณทันทีหลังกดส่ง กันเข้าใจว่าแอพค้าง (30 ก.ค. 2026) */
.noa-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.noa-typing i { width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-text-muted); animation: noa-dot 1.2s infinite ease-in-out; }
.noa-typing i:nth-child(2) { animation-delay: .18s; }
.noa-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes noa-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); } }

/* ---- ป้ายชวนติดหน้าจอโฮม (30 ก.ค. 2026) — ลอยเหนือ bottom-nav (z 100) ปิดได้ ---- */

/* ⚠️ attribute hidden ต้องชนะ display ของทุก class เสมอ — บั๊กจริง 30 ก.ค. 2026:
   .a2hs/.btn/.me-link ตั้ง display ไว้ ทำให้ hidden ใน markup ไม่มีผล
   ป้าย A2HS เลยโชว์ทั้งที่ JS สั่งซ่อน + ปุ่มไร้ handler กดไม่ได้ (ทุกจุดในระบบ
   สลับการซ่อนผ่าน el.hidden อยู่แล้ว กฎนี้จึงมีแต่ทำให้ตรงเจตนาขึ้น) */
[hidden] { display: none !important; }

.a2hs {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(74px + var(--safe-bottom, 0px));
  z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  /* ต้องทึบ — --color-surface ถูกชั้น glass ทำเป็นโปร่งแสง ตัวหนังสือข้างหลังทะลุ */
  background: var(--color-menu-solid, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.a2hs img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.a2hs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.a2hs .btn { width: auto; padding: 8px 16px; flex: none; }
.a2hs-close {
  background: none; border: none; padding: 6px; cursor: pointer;
  color: inherit; opacity: .55; flex: none; line-height: 1;
}

/* ===== บัตรผ่านของน้อง (15 ส.ค. 2026) =====
   คำตอบรายตัวว่า "น้องเราเข้าร้านนี้ได้ไหม" — ของชิ้นที่คู่แข่งลอกไม่ได้
   ⚠️ สีระดับต้องมีตัวเลขกำกับเสมอ ห้ามสื่อความหมายด้วยสีอย่างเดียว (ตาบอดสี ~8% ของผู้ชาย) */
.pass-box {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-menu-solid, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pass-head {
  font-size: 17px; font-weight: var(--weight-section);
  line-height: var(--leading-head); margin: 0 0 var(--space-3);
}
.pass-level {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #fff;
  padding: 5px 12px 5px 6px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.pass-level-n {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); font-size: 12px; font-weight: 700;
}
/* ⚠️ ระดับ 0 = ร้านไม่รับน้องของลูกค้า — ต้องมีสีพื้นด้วย ไม่งั้นได้ขาวบนขาว
   (บั๊กจริง 15 ส.ค. 2026: ป้ายหายทั้งอันเพราะลืมกฎสีของระดับใหม่) */
.pass-level.lvl-0 { background: #6B625B; }
.pass-level.lvl-4 { background: #1F7A5A; }
.pass-level.lvl-3 { background: #2E9E72; }
.pass-level.lvl-2 { background: #C98A08; }
.pass-level.lvl-1 { background: #C7383C; }

/* การ์ดต่อน้อง 1 ตัว — ขอบซ้ายหนาบอกผลด้วยตำแหน่ง ไม่ใช่แค่สี */
.pass-card {
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
}
.pass-card.d-yes { border-left-color: #2E9E72; }
.pass-card.d-outdoor_only { border-left-color: #C98A08; }
.pass-card.d-no { border-left-color: #C7383C; }
.pass-card.d-ask_weight { border-left-color: var(--color-text-muted); }
.pass-pet { display: flex; align-items: center; gap: 8px; }
.pass-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.pass-who .small { color: var(--color-text-muted); }
.pass-face {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--color-primary-light); object-fit: cover;
}
.pass-face .icon { width: 19px; height: 19px; color: var(--color-primary-text); }
.pass-tag {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--color-surface-hover); color: var(--color-text-main);
}
.d-yes .pass-tag { background: var(--color-success-bg); color: var(--color-success); }
.d-no .pass-tag { background: var(--color-danger-bg); color: var(--color-danger); }
.d-outdoor_only .pass-tag { background: var(--color-warning-bg); color: var(--color-warning); }
.pass-say {
  margin: var(--space-2) 0 0; font-size: 14px;
  line-height: var(--leading-body); color: var(--color-text-main);
}
.pass-conds, .pass-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.pass-conds span, .pass-facts span {
  font-size: 12px; padding: 3px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.pass-est { margin: var(--space-2) 0 0; font-size: 12px; color: var(--color-text-muted); }
.pass-note { margin: var(--space-3) 0 0; font-size: 13px; line-height: var(--leading-body); }
.pass-fresh {
  margin: var(--space-3) 0 0; font-size: 12px; color: var(--color-text-muted);
  line-height: var(--leading-body);
}
.pass-fresh.stale { color: var(--color-warning); }
.pass-invite, .pass-unknown {
  display: block; padding: var(--space-3);
  border: 1px dashed var(--color-border-hover); border-radius: var(--radius-md);
  font-size: 13.5px; line-height: var(--leading-body);
  color: var(--color-text-main); text-decoration: none;
}
.pass-invite { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pass-invite b { color: var(--color-primary-text); white-space: nowrap; }
.pass-unknown p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }

/* ===== ให้คนที่เคยไปจริงยืนยันเงื่อนไขร้าน (15 ส.ค. 2026) =====
   ⚠️ ปุ่มตัวเลือกต้องอ่านง่ายด้วยตัวหนังสือ ไม่พึ่งสีอย่างเดียว (เลขระดับกำกับทุกปุ่ม) */
.vote-intro { margin: 0 0 var(--space-2); font-size: 14px; line-height: var(--leading-body); }
.vote-draft {
  margin: 0 0 var(--space-3); padding: var(--space-3);
  background: var(--color-warning-bg); border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md); font-size: 13.5px; line-height: var(--leading-body);
  color: #4A3200;
}
.vote-unverified {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .08); color: #4A3200;
}
.vote-pick { font-size: 13px; font-weight: 600; margin-bottom: var(--space-2); }
.vote-opts { display: flex; flex-direction: column; gap: 6px; }
.vote-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: var(--radius-md); cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-main); font-family: var(--font-sans); font-size: 14px;
}
.vote-opt:hover { border-color: var(--color-border-hover); }
.vote-opt.mine { border-color: var(--color-primary); background: var(--color-primary-light); }
.vote-opt-n {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
}
.vote-opt.lvl-4 .vote-opt-n { background: #1F7A5A; }
.vote-opt.lvl-3 .vote-opt-n { background: #26845F; }
.vote-opt.lvl-2 .vote-opt-n { background: #9C6B06; }
.vote-opt.lvl-1 .vote-opt-n { background: #C7383C; }
.vote-opt.lvl-0 .vote-opt-n { background: #6B625B; }
.vote-opt-t { flex: 1; min-width: 0; }
.vote-n {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--color-surface-hover); color: var(--color-text-muted);
}
.vote-mine { margin: var(--space-3) 0 0; font-size: 13px; line-height: var(--leading-body); }
.vote-why { margin: var(--space-2) 0 0; font-size: 12px; color: var(--color-text-muted); }

/* ===== กันคำตก/ตัดบรรทัดผิดที่ (15 ส.ค. 2026 — บุ๋ยเจอบน iPhone จริง) =====
   ⚠️ ภาษาไทยไม่มีช่องว่างระหว่างคำ เบราว์เซอร์จึงตัดที่ไหนก็ได้ ต้องบอกมันว่าอะไรห้ามตัด */
.brand-name { white-space: nowrap; }               /* "Nong Bok Wa" เคยตัดเป็น "Nong Bok / Wa" */
.feed-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.feed-meta span { white-space: nowrap; }           /* "ฮอลล์ 7-8" และช่วงวันที่ ห้ามตัดกลาง */
.feed-title { overflow-wrap: break-word; word-break: normal; }
.promo-chip-title { overflow-wrap: break-word; word-break: normal; }
/* ปุ่มชวนใช้ Noa+ — ข้อความยาวในภาษาอังกฤษเคยชนขอบปุ่ม ให้ CTA ตกลงบรรทัดใหม่แทน */
.noaplus-teaser { flex-wrap: wrap; row-gap: 6px; }
.noaplus-teaser-cta { white-space: nowrap; }
.check-row .inline-link { display: inline-block; }

/* ===== หน้าแรกรอบเทียบคู่แข่ง (15 ส.ค. 2026) =====
   บุ๋ยเทียบ PawGuide แล้วสั่งว่าหน้าเราโล่งเกินไป — เอา 3 อย่างที่เขาทำดีมาปรับ:
   ช่องค้นหาใหญ่ · กริดหมวด · การ์ดสถานที่ที่มีรูป
   แต่ทำให้ต่าง: การ์ดของเราแปะ "ระดับการเข้า" ซึ่งเป็นของที่เขาไม่มี */
.home-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 6px 6px 6px 14px;
  margin: var(--space-4) 0 var(--space-3);
}
.home-search .icon { width: 18px; height: 18px; color: var(--color-text-muted); flex: none; }
.home-search input {
  flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 0;
  font-size: 15px; font-family: var(--font-sans); color: var(--color-text-main);
}
.home-search input:focus { outline: none; box-shadow: none; }
.home-search button {
  flex: none; border: none; cursor: pointer; font-family: var(--font-sans);
  background: var(--color-primary); color: #fff; font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: var(--radius-pill);
}

.cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: var(--space-6);
}
.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: var(--radius-md); text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-main);
}
.cat-tile-icon {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-primary-light);
}
.cat-tile-icon .icon { width: 19px; height: 19px; color: var(--color-primary-text); }
.cat-tile-label { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.35; }

.section-sub { margin: -4px 0 10px; font-size: 13px; color: var(--color-text-muted); }
.home-strip {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.home-strip::-webkit-scrollbar { display: none; }
.home-place {
  /* ⚠️ <a> เป็น inline โดยกำเนิด — ถ้าไม่สั่ง flex column รูปกับชื่อจะเรียงข้างกัน
     แล้วป้ายระดับจะถูกบีบจนตัดเหลือ "ทำ..." (เจอของจริง 15 ส.ค. 2026) */
  display: flex; flex-direction: column;
  flex: 0 0 auto; width: 168px; text-decoration: none; color: inherit;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.home-place-img {
  display: block; position: relative; height: 108px; width: 100%; flex: none;
  background: linear-gradient(140deg, #E4D3BF, #C0A98F);
}
.home-place-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-place-lv {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px);
  font-size: 10.5px; font-weight: 700; color: #fff; padding: 3px 9px;
  border-radius: var(--radius-pill); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-place.lv-4 .home-place-lv { background: #1F7A5A; }
.home-place.lv-3 .home-place-lv { background: #26845F; }
.home-place.lv-2 .home-place-lv { background: #9C6B06; }
.home-place.lv-1 .home-place-lv { background: #C7383C; }
.home-place-body { display: block; padding: 9px 11px 12px; }
.home-place-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; line-height: 1.4; margin-bottom: 2px;
}

.lv-collections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 var(--space-6); }
.lv-chip {
  display: flex; align-items: center; gap: 9px; padding: 11px 12px;
  border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-main);
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
.lv-chip-n {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700;
}
.lv-chip.lv-4 .lv-chip-n { background: #1F7A5A; }
.lv-chip.lv-3 .lv-chip-n { background: #26845F; }
.lv-chip.lv-2 .lv-chip-n { background: #9C6B06; }
.lv-chip.lv-1 .lv-chip-n { background: #C7383C; }
.lv-chip .small { font-weight: 400; color: var(--color-text-muted); }

@media (max-width: 359px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
/* การ์ดร้านที่ยังไม่มีรูปจริง — ไอคอนหมวดตัวใหญ่ ดีกว่าปล่อยพื้นเปล่า */
.home-place-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.home-place-ph .icon { width: 34px; height: 34px; color: rgba(255, 255, 255, .85); }

/* ===== คอลเลกชันคัดมาให้ + คำถามที่พบบ่อย (15 ส.ค. 2026) =====
   คู่แข่งใช้กริดรูป 2 คอลัมน์กับ FAQ แบบพับได้ ซึ่งได้ผลจริง — เอาโครงมา แต่ใช้ข้อมูลของเรา */
.coll-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: var(--space-6); }
.coll-card {
  position: relative; display: block; height: 120px; border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(140deg, #6B5B4B, #3E342C);
}
.coll-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coll-text {
  position: absolute; inset: auto 0 0 0; padding: 26px 11px 11px;
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent);
}
.coll-text b { font-size: 13.5px; line-height: 1.35; }
/* ⚠️ การ์ดกว้างครึ่งจอ — คำอธิบายต้องจบใน 1 บรรทัด ไม่งั้นล้นทับชื่อคอลเลกชัน
   จำนวนแห่งย้ายไปเป็นป้ายมุมขวาบนแทนการต่อท้ายประโยค */
.coll-text .small {
  color: rgba(255, 255, 255, .82); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coll-count {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill);
}

.faq-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-6); }
.faq-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.faq-item summary {
  cursor: pointer; font-weight: 700; font-size: 14px; line-height: var(--leading-head);
  list-style: none; display: flex; justify-content: space-between; gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "＋"; color: var(--color-text-muted); flex: none; }
.faq-item[open] summary::after { content: "－"; }
.faq-item p {
  margin: 10px 0 0; font-size: 13.5px; line-height: var(--leading-body);
  color: var(--color-text-muted);
}
/* ปุ่มขอตำแหน่งบนหน้าแรก — โผล่เฉพาะตอนยังไม่เคยมีพิกัด (JS คุม hidden) */
.use-geo {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
  padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-primary-text); font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 700;
}
.use-geo .icon { width: 15px; height: 15px; }
/* ไม่มีที่ยืนยันแล้วใกล้ตัว — กล่องบอกตรงๆ พร้อมทางไปต่อ */
.near-empty {
  border: 1px dashed var(--color-border-hover); border-radius: var(--radius-lg);
  padding: 16px; text-align: center;
}
.near-empty p { margin: 0 0 10px; font-size: 13.5px; line-height: var(--leading-body); color: var(--color-text-muted); }
.btn-mini {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700;
}

/* การ์ดบริการ — โครงเดียวกับการ์ดสถานที่ แต่มีปุ่มโทรมุมล่างขวา
   ⚠️ ร้านบริการส่วนใหญ่ยังไม่มีรูปจริง (10 จาก 3,484) จึงต้องออกแบบให้ "ไม่มีรูปก็ยังสวย"
      พื้นไล่สีแยกตามหมวด + ไอคอนใหญ่ ดีกว่ารูป placeholder ซ้ำๆ กันทุกใบ */
.svc-strip { margin-bottom: var(--space-6); }
.svc-card { position: relative; }
.svc-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.svc-card .home-place-img { background: linear-gradient(140deg, #9FB6C4, #5E7A8C); }
.svc-card.cat-vet_hospital .home-place-img,
.svc-card.cat-vet_clinic .home-place-img { background: linear-gradient(140deg, #8FB8D6, #4A6E8F); }
.svc-card.cat-grooming .home-place-img { background: linear-gradient(140deg, #E5B4A0, #B87355); }
.svc-card.cat-pet_hotel .home-place-img,
.svc-card.cat-pet_stay .home-place-img { background: linear-gradient(140deg, #C3B49E, #8A7761); }
.svc-badge {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill);
  color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px);
}
.svc-badge.open { background: #2E9E72; }

/* ===== สวิตช์เปิด/ปิดในหน้าตั้งค่า (15 ส.ค. 2026) =====
   ⚠️ เดิมใช้ข้อความบอกการกระทำ ("เปิดแจ้งเตือน..." / "ปิดแจ้งเตือน...") ซึ่งอ่านแล้ว
      แยกไม่ออกว่าเป็นปุ่มให้กดเปิด หรือบอกว่าเปิดอยู่แล้ว (บุ๋ยเจอเอง)
      → ชื่อรายการคงที่ สถานะดูจากสวิตช์อย่างเดียว ไม่ต้องอ่านคำ */
.me-switch-row { justify-content: flex-start; }
.me-switch-row > span:not(.switch) { flex: 1; min-width: 0; text-align: left; }
.switch {
  flex: none; width: 46px; height: 28px; border-radius: 99px; position: relative;
  background: var(--color-border-hover); transition: background .2s ease;
}
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease;
}
.switch.on { background: #34c759; }
.switch.on .switch-knob { transform: translateX(18px); }

/* ===== ขั้นตอนตั้งค่าร้าน (15 ส.ค. 2026) =====
   ⚠️ แทนแถบ "โปรไฟล์ครบ N%" เดิมที่บอกแค่ว่าไม่ครบ แต่ไม่บอกว่าต้องทำอะไรต่อ */
.setup-box {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 14px; margin: 12px 0;
}
.setup-box.done { border-color: var(--color-success-border); background: var(--color-success-bg); }
.setup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.setup-head b { font-size: 14.5px; }
.setup-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.setup-step {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px;
  border-radius: var(--radius-md); background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.setup-step.now { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); }
.setup-step.ok { opacity: .72; }
.setup-mark {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--color-surface-hover); color: var(--color-text-muted);
}
.setup-step.ok .setup-mark { background: var(--color-success); color: #fff; }
.setup-step.now .setup-mark { background: var(--color-primary); color: #fff; }
.setup-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.setup-text b { font-size: 13.5px; line-height: 1.4; }
.setup-text .small { color: var(--color-text-muted); line-height: 1.5; }
.setup-go {
  flex: none; text-decoration: none; font-size: 12.5px; font-weight: 700;
  padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: #fff !important;
}
.setup-go.edit { background: var(--color-surface-hover); color: var(--color-text-muted) !important; }
.setup-go.lock { background: var(--color-warning-bg); color: var(--color-warning) !important; }