/* © 2026 สุขใจ (Sookjai) — สงวนลิขสิทธิ์ / All rights reserved · ห้ามคัดลอกหรือนำไปใช้โดยไม่ได้รับอนุญาต · ดู LICENSE.txt */
/* สุขใจ — 5 สีหลัก: เขียวมิ้นต์ (หลัก) · แดงคอรัล (เตือน/แพ้ยา/ฉุกเฉิน) · เหลือง (นัดใกล้ถึง) · กรมท่า (ตัวอักษร) · เทาอ่อน (พื้น) */
:root {
  --bg: #F6F5F1;
  --card: #FFFFFF;
  --ink: #161A4D;
  --muted: #5B5F8F;
  --line: #DCDDF0;
  --brand: #4D55F5;
  --brand-soft: #E7E9FF;
  --red: #E0453F;
  --red-soft: #FFEDEB;
  --sun: #DAFF7C;
  --sun-soft: #F4FFD2;
  --shadow: 0 2px 12px rgba(77, 85, 245, .10);
  --green: #4D55F5;
  --meadow: #DAFF7C;
  --sky: #CFEAFB;
  --sky-soft: #EEF0FF;
  --blue: #4D55F5;
  --pink: #CA7FFE;
  --pink-soft: #F3E4FF;
  --radius: 20px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { background: linear-gradient(180deg, #F6F5F1 0%, #EEF0FF 100%) fixed; }
body {
  font-family: "Prompt", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px; line-height: 1.5;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
body.noscroll { overflow: hidden; }
#app { max-width: 560px; margin: 0 auto; padding: calc(84px + env(safe-area-inset-top)) 16px 24px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1 { font-size: 28px; margin: 0 0 2px; font-weight: 700; }
h2 { font-size: 19px; margin: 24px 0 10px; font-weight: 600; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
h3 { font-size: 22px; margin: 0 0 14px; }
h4 { margin: 18px 0 8px; font-size: 17px; }
.sub { color: var(--muted); font-size: 16px; margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.center { text-align: center; }
.red-t { color: var(--red); }
.hidden { display: none !important; }

/* ปุ่มฉุกเฉิน — ติดอยู่ทุกหน้า */
.sos {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); right: max(12px, calc(50% - 268px)); z-index: 40;
  display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 16px; padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(239, 91, 76, .4);
}
.sos span { font-size: 18px; }

.header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.logo { width: 48px; height: 48px; border-radius: 14px; }

/* การ์ด */
.card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.card.flat { box-shadow: none; background: var(--bg); }
button.card { width: 100%; border: 0; text-align: left; }
.hero { background: var(--brand); color: #fff; display: flex; align-items: center; gap: 18px; }
.hero .big { font-size: 32px; font-weight: 700; line-height: 1.15; }
.ring { width: 84px; height: 84px; flex: none; }
.ring circle { fill: none; stroke-width: 10; }
.ring .bg { stroke: rgba(255,255,255,.28); }
.ring .fg { stroke: #fff; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .4s; }
.ring text { fill: #fff; font-size: 19px; font-weight: 700; text-anchor: middle; dominant-baseline: central; font-family: inherit; }

/* แถบเตือน */
.alert { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; border: 0; width: 100%; text-align: left; }
.alert.red { background: var(--red-soft); }
.alert.sun { background: var(--sun-soft); }
.alert .ic { font-size: 26px; line-height: 1.1; }
.alert b, .alert span { display: block; }
.alert .note { font-weight: 500; margin-top: 2px; }

/* ชิป */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 2px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 14px 4px 4px; display: flex; align-items: center; gap: 6px; font-size: 16px; min-height: 44px; }
.chip:first-child:not([style]) { padding-left: 14px; }
.chip.on { border-color: var(--pc, var(--ink)); background: var(--pc, var(--ink)); color: #fff; }

/* ไอคอนคน */
.av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: #fff; }
.av svg { width: 100%; height: 100%; display: block; }
.av.xs { width: 32px; height: 32px; }
.av.sm { width: 38px; height: 38px; }
.av.lg { width: 68px; height: 68px; }

/* ไทม์ไลน์ตารางทานยา */
.timeline { position: relative; }
.tl { display: grid; grid-template-columns: 58px 1fr; gap: 10px; position: relative; }
.tl::before { content: ""; position: absolute; left: 28px; top: 0; bottom: 0; width: 3px; background: var(--line); border-radius: 3px; }
.tl:first-child::before { top: 30px; }
.tl:last-child::before { bottom: calc(100% - 40px); }
.tl-rail { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; padding-top: 2px; }
.tl-time { font-size: 14px; font-weight: 600; color: var(--muted); background: var(--bg); padding: 0 2px; }
.tl-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 3px solid var(--line); display: grid; place-items: center; font-size: 22px; }
.tl.next .tl-dot { border-color: var(--sun); box-shadow: 0 0 0 4px var(--sun-soft); }
.tl.all-done .tl-dot { border-color: var(--brand); background: var(--brand-soft); }
.tl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 19px; }
.pill { font-size: 13px; font-weight: 600; border-radius: 999px; padding: 1px 10px; background: var(--sun); color: var(--ink); }
.pill.ok { background: var(--brand); color: #fff; }
.dose { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.tl-head + .dose { border-top: 0; }
.dose .info { flex: 1; min-width: 0; }
.dose .name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.dose.done .name { text-decoration: line-through; color: var(--muted); }
.ord { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 7px; background: var(--bg); font-size: 13px; color: var(--muted); }
.check { width: 54px; height: 54px; border-radius: 16px; border: 3px solid var(--line); background: var(--card); font-size: 28px; font-weight: 700; flex: none; display: grid; place-items: center; color: #fff; }
.check.on { background: var(--brand); border-color: var(--brand); }

/* รายการยา + ลากสลับ */
.med { display: flex; align-items: flex-start; gap: 10px; }
.med .info { flex: 1; min-width: 0; cursor: pointer; }
.med .name { font-weight: 600; font-size: 19px; }
.handle { touch-action: none; user-select: none; cursor: grab; width: 30px; align-self: stretch; display: grid; place-items: center; font-size: 22px; color: var(--muted); margin: -16px 0 -16px -8px; padding: 0 4px; }
.ordnum { width: 32px; height: 32px; flex: none; border-radius: 10px; color: #fff; font-weight: 700; display: grid; place-items: center; }
.drag-item { transition: box-shadow .15s; }
.drag-item.dragging { position: relative; z-index: 5; box-shadow: 0 12px 30px rgba(38, 52, 60, .22); transition: none; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; align-items: center; }
.tag { display: inline-block; font-size: 14px; border-radius: 999px; padding: 1px 10px; background: var(--brand-soft); }
.tag.sun { background: var(--sun-soft); }
.tag.allergy { background: var(--red); color: #fff; font-weight: 600; }

/* ปุ่ม */
.btn { border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 600; background: var(--brand); color: #fff; min-height: 52px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.ghost { background: var(--bg); color: var(--ink); }
.card.flat .btn.ghost, .sheet .btn.ghost { background: #EDEFF2; }
.btn.danger { background: var(--red); }
.btn.block { width: 100%; display: flex; }
.btn.sm { min-height: 42px; padding: 6px 14px; font-size: 16px; }
.btn:disabled, .btn.disabled { opacity: .45; pointer-events: none; }
.btn.call { background: var(--ink); }
.linkbtn { background: none; border: 0; color: var(--muted); text-decoration: underline; width: 100%; margin-top: 10px; font-size: 15px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > .btn { flex: 1; }
.iconbtn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--bg); font-size: 26px; display: grid; place-items: center; line-height: 1; }
.fab { position: fixed; right: max(16px, calc(50% - 264px)); bottom: calc(96px + env(safe-area-inset-bottom)); width: 64px; height: 64px; border-radius: 22px; border: 0; background: var(--brand); color: #fff; font-size: 36px; box-shadow: 0 8px 20px rgba(77, 85, 245, .40); z-index: 15; }

/* ปฏิทิน */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-nav b { font-size: 20px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal .dow { font-size: 14px; color: var(--muted); padding: 4px 0; }
.cal .d { min-height: 54px; border-radius: 12px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 6px 0 4px; font-size: 16px; }
.cal .d.out { opacity: .32; }
.cal .d.today .dn { background: var(--brand); color: #fff; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; font-weight: 700; }
.cal .d.sel { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.cal .bars { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 4px; max-width: 40px; }
.cal .bars i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.cal .bars em { font-size: 11px; font-style: normal; color: var(--muted); line-height: 9px; }
.appt { display: flex; gap: 12px; align-items: center; }
.appt .date { width: 58px; text-align: center; flex: none; border-radius: 14px; padding: 6px 0; color: #fff; }
.appt .date b { display: block; font-size: 24px; line-height: 1.1; }
.appt .date span { font-size: 13px; }
.appt .info { flex: 1; min-width: 0; }
.appt .line { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.countdown { display: inline-block; font-size: 14px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: var(--sun-soft); white-space: nowrap; }
.countdown.hot { background: var(--red); color: #fff; }

/* โปรไฟล์ */
.person { border-left: 6px solid var(--pc); }

/* เบอร์ฉุกเฉิน (หน้าครอบครัว) */
.sos-card { display: flex; flex-direction: column; gap: 8px; }
.sos-btn, .hos-call { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-decoration: none; padding: 12px 14px; border-radius: 14px; color: var(--ink); background: var(--bg); }
.sos-btn { background: var(--red); color: #fff; }
/* ตารางกินยาใน 1 วัน (แสดงเลขลำดับยา) */
.dtable { margin: 0 -8px 26px; padding: 12px 12px 14px; border: 3px solid var(--pc, var(--brand)); border-radius: 26px; background: #fff; background: color-mix(in srgb, var(--pc, var(--brand)) 11%, #fff); }
.dt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 12px; background: #fff; background: color-mix(in srgb, var(--pc, var(--brand)) 26%, #fff); border-radius: 18px; }
.dt-head b { font-size: 18px; }
.dtable table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; margin: 0 -4px; width: calc(100% + 8px); }
.dtable th { position: relative; background: #FFE3EA; color: #5A3A44; font-size: 14px; font-weight: 700; line-height: 1.2; padding: 7px 2px 8px; border-radius: 16px; word-break: keep-all; }
.dtable th .ic { display: block; font-size: 20px; line-height: 1.2; margin-bottom: 1px; }
.dtable th small { display: block; font-weight: 500; font-size: 11px; opacity: .7; margin-top: 2px; }
.dtable th em { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; background: var(--brand); color: #fff; padding: 1px 8px; border-radius: 999px; white-space: nowrap; z-index: 1; }
.dtable th.th-before_breakfast { background: #FFE8D2; } .dtable th.th-after_breakfast { background: #FFD9B8; }
.dtable th.th-before_lunch { background: #FFF1B8; } .dtable th.th-after_lunch { background: #FFE58F; }
.dtable th.th-before_dinner { background: #FFD3DF; } .dtable th.th-after_dinner { background: #F7BFD3; }
.dtable th.th-bedtime { background: #D5D9FA; }
.dtable th.off, .dtable th.off[class*="th-"] { background: #EEF0F2; color: #A4ADB3; padding: 8px 0; }
.dtable th.off .ic { font-size: 14px; opacity: .45; filter: grayscale(1); margin: 0; }
.dtable th.next { box-shadow: 0 0 0 3px var(--brand); }
.dtable tbody { --gap: 0; }
.dtable td { padding: 0; vertical-align: top; height: 104px; background: #fff; border-radius: 16px; box-shadow: 0 1px 0 rgba(38, 52, 60, .06), inset 0 0 0 1.5px #EDEFF2; }
.dtable td.blank { background: transparent; box-shadow: none; }
.dtable td.off { background: repeating-linear-gradient(135deg, #F1F3F4 0 8px, #EAEDEF 8px 16px); box-shadow: none; }
.dtable td.warn { background: #FFF8DA; box-shadow: inset 0 0 0 1.5px #F6E3A0; }
.dtable td.pn { background: #FFEAF3; box-shadow: inset 0 0 0 1.5px #F7C9DD; }
.dtable td.done { background: #E9FFC0; box-shadow: inset 0 0 0 1.5px #BFE86A; }
.dcell { width: 100%; min-height: 104px; padding: 6px 5px 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dtop { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.dcell .num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--pc, var(--brand)); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.dcell .wi { font-size: 12px; font-style: normal; margin-left: 2px; }
.dcell .tick { width: 26px; height: 26px; padding: 0; border: 2px dashed #B7C0C6; border-radius: 50%; background: #fff; color: #fff; font-size: 15px; line-height: 1; font-weight: 700; position: relative; transition: transform .15s; }
.dcell .tick::after { content: ''; position: absolute; inset: -9px; }
.dcell .tick:active { transform: scale(.88); }
.dcell .tick.on { background: var(--brand); border: 2px solid var(--brand); animation: pop .25s ease-out; }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
.dtop { min-height: 26px; }
.dmain { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; margin-top: -2px; border-radius: 10px; }
.dmain:active { background: rgba(77, 85, 245, .15); }
.dmain .onum { font-size: 34px; font-weight: 700; line-height: 1.05; color: var(--ink); }
.dmain .mname { font-size: 10px; letter-spacing: -.2px; line-height: 1.2; color: var(--muted); text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.dcell { padding-left: 2px; padding-right: 2px; }
.dpill { margin-top: 3px; font-size: 12px; font-weight: 700; color: #C2413A; background: #FFE1DE; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.dt-note { margin: 0 0 10px; padding: 10px 14px; background: #fff; border: 2px solid #F2A0AE; border-radius: 16px; font-size: 17px; line-height: 1.5; }
.dt-note b { color: #D6303A; }
.dt-note span { color: var(--muted); font-size: 14px; }
.dcell .hint { color: #E0584A; font-size: 11px; line-height: 1.2; text-align: center; }
.dose-unit { display: flex; gap: 6px; }
.dose-unit input { flex: 1; min-width: 0; }
.dose-unit select { width: 84px; }
/* อาการเทียบกับครั้งก่อน: 3 กรอบแยกชัดเจน */
.trend-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.trend-opt { position: relative; display: block; cursor: pointer; }
.trend-opt input { position: absolute; opacity: 0; inset: 0; }
.trend-opt .t-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 108px; padding: 10px 4px; border-radius: 20px; background: #fff; border: 3px solid var(--line); transition: transform .12s, box-shadow .12s, background .12s, border-color .12s; }
.trend-opt .t-ic { font-style: normal; font-size: 52px; line-height: 1; filter: grayscale(.7); opacity: .7; transition: filter .12s, opacity .12s, transform .12s; }
.trend-opt .t-card b { font-size: 17px; color: var(--muted); }
.trend-opt:active .t-card { transform: scale(.97); }
.trend-opt.t-better input:checked + .t-card { background: #E7E9FF; border-color: #4D55F5; }
.trend-opt.t-same input:checked + .t-card { background: #FFF5DA; border-color: #F7B731; }
.trend-opt.t-worse input:checked + .t-card { background: #FDECEA; border-color: #EF5B4C; }
.trend-opt input:checked + .t-card { box-shadow: 0 4px 14px rgba(38, 52, 60, .15); transform: translateY(-2px); }
.trend-opt input:checked + .t-card .t-ic { filter: none; opacity: 1; transform: scale(1.08); }
.trend-opt input:checked + .t-card b { color: var(--ink); }
.trend-opt input:focus-visible + .t-card { outline: 3px solid var(--brand); outline-offset: 2px; }
.pend { font-size: .5em; color: #E0584A; margin-left: 1px; vertical-align: super; }
.share-tag { background: #E8F0FE; color: #2A55B0; }
.btn.danger.ghost, .btn.ghost.danger { color: var(--red); }
.vis-btn { display: block; margin: 2px 0 6px; padding: 6px 0; font-size: 16px; }
.vis-who { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 430px) {
  .dtable { margin: 0 -14px 22px; padding: 10px 5px 12px; border-radius: 22px; }
  .dtable table { border-spacing: 3px; margin: 0 -3px; width: calc(100% + 6px); }
  .dtable th { font-size: 12px; padding: 6px 0 7px; border-radius: 12px; }
  .dtable th .ic { font-size: 17px; }
  .dtable th small { font-size: 9px; }
  .dtable td, .dcell { border-radius: 12px; }
  .dcell { padding-left: 1px; padding-right: 1px; }
  .dcell .tick { width: 22px; height: 22px; }
  .dmain .onum { font-size: 28px; }
  .dmain .mname { font-size: 9px; letter-spacing: -.3px; }
  .dcell .hint, .dpill { font-size: 9.5px; }
  .dpill { padding: 1px 5px; }
}
.dt-star { margin: 6px 0 0; }
/* v1.1 */
.dmain .onum .pfx { font-size: .55em; font-weight: 600; margin-right: 1px; color: #566770; }
.dtable th .lock-btn { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); border: 0; background: #566770; color: #fff; font: inherit; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; z-index: 1; min-height: 22px; }
.dcell .tick.locked { opacity: .55; }
.dcell .tick.ro { display: inline-flex; align-items: center; justify-content: center; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mood-card { display: flex; flex-direction: column; gap: 8px; }
.mood-people { display: flex; flex-wrap: wrap; gap: 8px; }
.mood-person { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 12px 6px 6px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font: inherit; font-size: 15px; }
.mood-person i { font-style: normal; color: var(--muted); font-size: 14px; }
.mood-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.mood-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 92px; border: 3px solid var(--line); border-radius: 18px; background: #fff; font: inherit; }
.mood-opt i { font-style: normal; font-size: 40px; line-height: 1.1; }
.mood-opt b { font-size: 15px; }
.mood-opt.on { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 14%, #fff); }
.ad-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 10px 0; }
.ad-cal .dow { text-align: center; font-size: 13px; color: var(--muted); }
.ad-d { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; border-radius: 10px; background: #EEF0F2; font-size: 13px; }
.ad-d small { font-size: 10px; }
.mood-cal .ad-d small { font-size: 18px; line-height: 1; }
.ad-d.ok { background: #E4FFA8; } .ad-d.part { background: #FFEFB8; } .ad-d.miss { background: #FBD2CD; } .ad-d.na { background: #F1F3F4; }
.ad-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ad-legend .ad-d { display: inline-block; width: 16px; min-height: 16px; height: 16px; border-radius: 4px; }
.ad-bar { display: grid; grid-template-columns: 110px 1fr 64px; align-items: center; gap: 8px; margin: 6px 0; font-size: 15px; }
.ad-bar > div { height: 12px; background: var(--line); border-radius: 999px; overflow: hidden; }
.ad-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.ad-bar b { text-align: right; font-size: 14px; }
.reorder { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.ro-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.ro-no { min-width: 44px; font-size: 18px; }
.ro-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ro-btn { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 16px; }
.ro-btn:disabled { opacity: .3; }
.check-row { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 16px; }
.check-row input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.login.welcome { text-align: center; }
.welcome-greet { font-size: 22px; margin: 4px 0; color: var(--brand); font-weight: 600; }
.welcome-list { text-align: left; list-style: none; padding: 0; margin: 16px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.welcome-list li { background: var(--card); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); }
.login.consent .card p { margin: 0 0 8px; }
.member-item select { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); font: inherit; font-size: 14px; }
.dt-warn { margin-top: 12px; border: 2px dashed #F2A0AE; background: #FFF0F5; border-radius: 18px; padding: 12px 16px; font-size: 16px; line-height: 1.65; }
.dt-legend { margin-top: 8px; background: var(--card); border-radius: 18px; padding: 10px 16px; box-shadow: var(--shadow); }
.dt-legend summary { cursor: pointer; font-weight: 600; }
.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 16px; }
.lg-row:last-of-type { border-bottom: 0; }
.lg-name { min-width: 0; overflow-wrap: anywhere; }
.lg-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.lg-dose { font-size: 14px; font-weight: 700; color: #3F48EE; background: var(--brand-soft); border-radius: 999px; padding: 2px 10px; white-space: nowrap; margin-right: 2px; }
.slot-ic { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); font-size: 17px; line-height: 1; }
.slot-ic:active { background: var(--brand-soft); }
.lg-hint { margin: 6px 0 0; }
.med-note { margin-top: 4px; color: var(--ink); background: var(--sun-soft); border-radius: 10px; padding: 4px 10px; }
.t24 { display: flex; align-items: center; gap: 6px; }
.t24 select { flex: 1; min-width: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 20px; text-align: center; }
.t24 small { color: var(--muted); }
.hos-row { display: flex; gap: 8px; align-items: stretch; }
.hos-row .hos-call { flex: 1; min-width: 0; }
.hos-rm { width: 48px; border: 0; border-radius: 14px; background: var(--red-soft); color: var(--red); font-size: 24px; }
.sos-btn span, .hos-call span { grid-row: span 2; font-size: 26px; }
.sos-btn small, .hos-call small { opacity: .85; font-size: 14px; }

.shared-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.shared-av { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border-radius: 999px; padding: 3px 12px 3px 4px; }
.shared-av .av { width: 30px; height: 30px; }
.shared-av small { font-size: 15px; }

/* Circles (วงดูแล) */
.circle { background: var(--brand-soft); }
.circle.shared { background: #f0f0f0; }
.care-for-select, .care-for-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.care-for-item {
  display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--card); border-radius: 12px; cursor: grab;
  border: 2px dashed transparent; transition: all .2s;
}
.care-for-item[draggable="true"]:hover { border-color: var(--brand); }
.care-for-item[draggable="true"]:active { cursor: grabbing; opacity: .7; }
.care-for-item .av { width: 32px; height: 32px; }
.care-for-item button { background: none; border: 0; font-size: 18px; padding: 0; color: var(--red); }
.members-list { display: flex; flex-direction: column; gap: 8px; }
.member-item {
  display: flex; justify-content: space-between; align-items: center; padding: 10px; background: var(--card); border-radius: 12px;
}
.member-item { gap: 8px; }
.inv-mail { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 16px; }
.inv-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.inv-cancel { width: auto; border: 0; background: transparent; color: var(--red); text-decoration: underline; padding: 4px 2px; font-size: 15px; white-space: nowrap; }
.member-item > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.member-item .role { white-space: nowrap; flex-shrink: 0; font-size: 12px; color: var(--muted); background: var(--line); padding: 2px 8px; border-radius: 4px; }
.person-top { display: flex; gap: 14px; align-items: center; cursor: pointer; margin-bottom: 6px; }
.person .info { flex: 1; }
.pname { font-size: 21px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 8px; cursor: pointer; }
.switch-row.card { border-top: 0; padding: 14px 16px; }
.switch { position: relative; width: 56px; height: 32px; flex: none; display: inline-block; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; background: #CBD1D6; border-radius: 999px; transition: .2s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(24px); }
.switch input:disabled + i { opacity: .35; }
.switch.sm { width: 48px; height: 28px; }
.switch.sm i::after { width: 22px; height: 22px; }
.switch.sm input:checked + i::after { transform: translateX(20px); }

/* Bottom sheet & ฟอร์ม */
.modal { position: fixed; inset: 0; background: rgba(20, 28, 32, .5); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--card); width: 100%; max-width: 560px; max-height: 94vh; overflow-y: auto; border-radius: 26px 26px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); animation: up .22s ease-out; overscroll-behavior: contain; }
.grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sticky-actions { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); background: var(--card); padding: 12px 0 calc(4px + env(safe-area-inset-bottom)); margin-top: 8px; border-top: 1px solid var(--line); }
label.f, div.f { display: block; margin-bottom: 16px; }
label.f > span, .f > .lbl { display: block; font-size: 16px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.f .lbl small { font-weight: 400; }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=tel], input[type=email], input[type=password], select, textarea {
  width: 100%; border: 2px solid var(--line); background: var(--bg); border-radius: 14px; padding: 10px 12px; min-height: 52px; font-size: 18px; -webkit-appearance: none; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
input.other { margin-top: 8px; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick label { cursor: pointer; position: relative; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .opt { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--line); border-radius: 14px; padding: 6px 12px; background: var(--bg); min-height: 46px; }
.pick input:checked + .opt { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.pick .opt .av { margin-left: -6px; }
.pick .blood { width: 52px; justify-content: center; font-weight: 700; }
.pick .sw { width: 42px; height: 42px; border-radius: 50%; padding: 0; min-height: 0; border: 3px solid transparent; }
.pick input:checked + .sw { border-color: var(--ink); box-shadow: inset 0 0 0 3px #fff; background-clip: padding-box; }
.custom-color { display: inline-flex; align-items: center; gap: 6px; border: 2px dashed var(--line); border-radius: 999px; padding: 2px 12px 2px 4px; font-size: 15px; }
.custom-color input[type=color] { position: static; opacity: 1; pointer-events: auto; width: 34px; height: 34px; border: 0; padding: 0; background: none; border-radius: 50%; }
.av-group small { color: var(--muted); display: block; margin: 4px 0; }
.av-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 300px; }
.av-pick label { display: flex; justify-content: center; }
.av-pick .av-opt { width: 62px; height: 62px; padding: 2px; border-radius: 50%; overflow: hidden; min-height: 0; }
.av-pick .av-opt svg { width: 100%; height: 100%; border-radius: 50%; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two label.f { margin-bottom: 10px; }

/* ช่วงเวลาทานยา + สวิตช์ */
.slot-pick { border: 2px solid var(--line); border-radius: 16px; overflow: hidden; }
.slot-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-top: 1px solid var(--line); }
.slot-row:first-child { border-top: 0; }
.slot-row.on { background: var(--brand-soft); }
.slot-main { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 46px; }
.slot-main input { width: 22px; height: 22px; accent-color: var(--brand); flex: none; margin-left: 6px; }
.slot-main .si { font-size: 22px; }
.slot-main small { display: block; font-size: 13px; color: var(--muted); line-height: 1.1; }
.seg { display: flex; background: var(--bg); border-radius: 14px; padding: 4px; gap: 4px; }
.seg label { flex: 1; cursor: pointer; position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; text-align: center; padding: 8px 4px; border-radius: 10px; font-size: 16px; }
.seg input:checked + span { background: var(--card); font-weight: 600; box-shadow: var(--shadow); }
.hist { font-size: 14px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px; margin-top: 10px; }

/* แท็ก (หลายรายการ) */
.tagbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 2px solid var(--line); background: var(--bg); border-radius: 14px; padding: 6px; min-height: 52px; }
.tagbox input { flex: 1; min-width: 120px; border: 0 !important; background: transparent !important; min-height: 38px !important; padding: 4px 6px !important; }
.tg { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-soft); border-radius: 999px; padding: 3px 4px 3px 12px; font-size: 16px; }
.tagbox.allergy { border-color: #F6C1BB; background: var(--red-soft); }
.tagbox.allergy .tg { background: var(--red); color: #fff; font-weight: 600; }
.tg button { border: 0; background: rgba(0,0,0,.12); color: inherit; width: 26px; height: 26px; border-radius: 50%; font-size: 16px; line-height: 1; }
.tg-add { border: 0; background: var(--card); border-radius: 10px; padding: 6px 12px; font-size: 15px; font-weight: 600; }

/* Autocomplete */
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--card); border-radius: 14px; box-shadow: 0 10px 30px rgba(38,52,60,.18); z-index: 5; overflow: hidden; border: 1px solid var(--line); }
.ac-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 14px; border-top: 1px solid var(--line); }
.ac-list button:first-child { border-top: 0; }
.ac-list button:active { background: var(--brand-soft); }
.ac-list span { display: block; font-size: 14px; color: var(--muted); }
.phone-row { display: flex; gap: 8px; }
.phone-row .btn { flex: none; }

/* รูปแนบ */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.thumb { width: 88px; height: 88px; border-radius: 14px; overflow: hidden; position: relative; background: var(--bg); border: 0; padding: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 18px; line-height: 1; }
.thumb.loading { animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .5; } }
.filebtn { cursor: pointer; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 70; display: grid; place-items: center; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; }
.lightbox button { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; font-size: 28px; }

/* รายละเอียดนัด */
.detail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.big-when { background: var(--brand); color: #fff; border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; }
.big-when b { display: block; font-size: 20px; }
.big-when span { font-size: 26px; font-weight: 700; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.kv:first-child { border-top: 0; }
.kv span { color: var(--muted); flex: none; }
.kv b { text-align: right; font-weight: 600; }
.preview { margin-top: 10px; background: var(--card); border-radius: 12px; padding: 10px 12px; font-size: 14px; border-left: 4px solid var(--sun); }

/* ใบนัดของแต่ละคน */
.person-actions { margin-top: 10px; }
.slip { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.slip-head { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0; margin-bottom: 8px; }
.slip-head b { margin-right: 6px; }
.slip-head .small { display: block; }

/* ติดตามการรักษา */
.care { border-left: 6px solid var(--pc); }
.care-top { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.care-top .info { flex: 1; min-width: 0; }
.care-title { font-size: 19px; display: block; }
.thumb.sm { width: 64px; height: 64px; flex: none; }
.countdown.calm { background: var(--brand-soft); }
.steps-box { background: var(--bg); border-radius: 14px; padding: 8px 12px; margin: 10px 0; }
.steps { margin: 4px 0 0; padding-left: 20px; font-size: 16px; }
.steps li { margin: 2px 0; }
.care .btn.block { margin-top: 10px; }
.pick .iv-custom { gap: 6px; }
.pick .iv-custom input { position: static; opacity: 1; pointer-events: auto; width: 64px; min-height: 34px; padding: 2px 6px; text-align: center; }
.tag.trend-better { background: var(--brand-soft); }
.tag.trend-same { background: var(--bg); }
.tag.trend-worse { background: var(--red-soft); color: var(--red); font-weight: 600; }
.log { border-top: 1px solid var(--line); padding: 10px 0 2px; }
.log-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.log-head .mini { margin-left: auto; min-height: 34px; padding: 2px 12px; font-size: 14px; }
.log .thumbs { margin-top: 6px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compare figure { margin: 0; }
.compare img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; background: var(--bg); }
.compare figcaption { font-size: 14px; color: var(--muted); text-align: center; margin-top: 4px; }
.prev-photo { display: flex; gap: 10px; align-items: center; background: var(--bg); border-radius: 14px; padding: 8px; margin-bottom: 8px; }
img.zoom { cursor: zoom-in; }

/* วงดูแล (Circles) */
.circle { border-left: 5px solid var(--brand); }
.circle b { display: block; font-size: 18px; margin-bottom: 4px; }
.circle.shared { border-left-color: var(--sun); }
.circle .btn { margin-top: 10px; }

.empty { text-align: center; padding: 28px 12px; color: var(--muted); }
.empty .e { font-size: 44px; }

/* แถบเมนูล่าง */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; background: var(--card); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); z-index: 20; }
.tabbar button { flex: 1; max-width: 140px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; font-size: 15px; color: var(--muted); padding: 4px 0; border-radius: 14px; }
.tabbar button span { font-size: 26px; line-height: 1.2; filter: grayscale(1); opacity: .55; }
.tabbar button.on { color: var(--ink); font-weight: 600; background: var(--brand-soft); }
.tabbar button.on span { filter: none; opacity: 1; }
.tabbar { align-items: flex-end; }
.tabbar button.home-tab { position: relative; background: transparent; font-weight: 600; color: var(--ink); }
.tabbar button.home-tab span {
  display: grid; place-items: center; width: 64px; height: 64px; margin-top: -30px; margin-bottom: 2px; font-size: 36px;
  background: var(--card); border: 3px solid var(--line); border-radius: 50%; box-shadow: 0 4px 14px rgba(38, 52, 60, .18);
  filter: none; opacity: 1; transition: transform .15s, background .15s;
}
.tabbar button.home-tab:active span { transform: scale(.94); }
.tabbar button.home-tab.on { background: transparent; }
.tabbar button.home-tab.on span { background: var(--brand); border-color: var(--brand-soft); }
body.auth .tabbar { display: none; }
body.auth { padding-bottom: 24px; }

/* หน้าเข้าสู่ระบบ */
.login { text-align: center; padding-top: 4vh; }
.login-logo { width: 88px; height: 88px; border-radius: 24px; }
/* GIF มีพื้นหลังขาว + ขอบว่างรอบตัว — multiply ทำให้ขาวกลืนไปกับสีพื้นหน้า, ดึง margin เข้าให้ตัวขวดใหญ่ขึ้น */
.login form { text-align: left; margin-top: 16px; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(104px + env(safe-area-inset-bottom)); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 14px; z-index: 80; font-size: 16px; max-width: calc(100% - 32px); white-space: pre-line; }

/* ===== v1.2 ดีไซน์ใหม่ ===== */
.back-bar { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; font: inherit; font-size: 18px; font-weight: 500; color: var(--ink); padding: 6px 4px 6px 0; margin-bottom: 4px; min-height: 44px; }
.chev { font-size: 26px; line-height: 1; flex: none; }
.header.between { justify-content: space-between; }
.tool-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pill-btn { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 15px; font-weight: 500; min-height: 44px; }
/* วงแหวนรายคน (พื้นขาว) */
.ring-card { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; font: inherit; border: 0; border-left: 8px solid var(--pc, var(--brand)); }
.ring-card .ring { width: 76px; height: 76px; }
.ring-card .ring .bg { stroke: var(--brand-soft); }
.ring-card .ring .fg { stroke: var(--green); }
.ring-card .ring text { fill: var(--ink); font-size: 18px; }
.rc-info { flex: 1; min-width: 0; }
.rc-name { font-size: 20px; font-weight: 700; }
.rc-line { font-size: 16px; font-weight: 500; }
.h-mood { font-size: 20px; display: block; margin-bottom: 4px; }
.mood-card .mood-pick { margin-bottom: 4px; }
.mood-opt.on { border-color: var(--green); background: var(--meadow); }
/* เมนูยา */
.tile { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; font: inherit; border: 0; padding: 22px 16px; }
.tile-ic { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; font-size: 36px; flex: none; }
.tile-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tile-tx b { font-size: 20px; } .tile-tx small { font-size: 15px; color: var(--muted); }
/* สรุป */
.praise { text-align: center; background: var(--sky-soft); }
.praise-ic { font-size: 48px; line-height: 1.1; }
.praise-h { font-size: 24px; font-weight: 700; }
.praise-pct { font-size: 44px; font-weight: 700; color: var(--green); line-height: 1.1; }
.card.soft { background: var(--pink-soft); }
.wk-bars { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.wk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.wk-v { font-weight: 700; font-size: 16px; }
.wk-col { width: 100%; height: 120px; background: var(--brand-soft); border-radius: 12px; display: flex; align-items: flex-end; overflow: hidden; }
.wk-col i { display: block; width: 100%; background: var(--green); border-radius: 12px; }
.wk-col i.low { background: var(--sky); }
.wk small { font-size: 12px; color: var(--muted); text-align: center; }
.ad-bar i { background: var(--green); }
/* สมาชิก */
.member-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; border: 0; border-left: 8px solid var(--pc, var(--brand)); }
.member-row .info { flex: 1; min-width: 0; }
.mr-name { font-size: 20px; font-weight: 700; }
.profile-top { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 14px; }
.profile-top .av { width: 96px; height: 96px; }
.profile-top h1 { margin-top: 6px; }
.allergy-box { border: 2px solid #E5675F; background: var(--red-soft); }
.allergy-box b { color: var(--red); }
.kv-card { padding-top: 8px; padding-bottom: 8px; }
.two-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 8px; }
/* ตั้งค่า */
.set-h { font-size: 15px; color: var(--muted); margin: 18px 4px 8px; font-weight: 600; }
.set-group { padding: 0 16px; }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: 0; border-top: 1px solid var(--line); font: inherit; font-size: 17px; padding: 15px 0; text-align: left; min-height: 56px; }
.set-group > .set-row:first-child, .set-group > .set-det:first-child > .set-row { border-top: 0; }
.sr-ic { width: 28px; text-align: center; font-size: 22px; flex: none; }
.sr-l { flex: 1; }
.sr-v { color: var(--muted); font-size: 15px; text-align: right; word-break: break-all; }
.sr-v a { color: var(--blue); }
.set-det { border-top: 1px solid var(--line); }
.set-det > summary { list-style: none; cursor: pointer; border-top: 0; }
.set-det > summary::-webkit-details-marker { display: none; }
.set-det[open] > summary .chev { transform: rotate(90deg); }
.set-det > :not(summary) { padding-bottom: 14px; }
/* หน้าต้อนรับ */
.login.welcome { display: flex; flex-direction: column; min-height: calc(100dvh - 40px); padding-top: 0; justify-content: space-between; }
.welcome-top { padding-top: 7vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.welcome-top h1 { margin: 0; }
.welcome-top .sub { font-size: 18px; line-height: 1.7; margin: 0; }
.welcome-bottom { display: flex; flex-direction: column; gap: 12px; padding: 24px 0 8px; }
.welcome-note { margin: 8px 0 0; line-height: 1.6; }
.today-h { font-size: 24px; margin: 6px 0 12px; }

/* ===== v1.3 โทนสีใหม่ + ไอคอนหลัก ===== */
.btn { background: linear-gradient(135deg, #5A63FA 0%, #4D55F5 100%); box-shadow: 0 3px 10px rgba(77, 85, 245, .25); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.danger { background: var(--red); box-shadow: none; }
.btn.call { background: var(--ink); }
.fab { background: linear-gradient(135deg, #6872FF 0%, #4D55F5 100%); box-shadow: 0 8px 20px rgba(77, 85, 245, .45); }
.hero { background: linear-gradient(135deg, #4D55F5 0%, #4D55F5 100%); }
.praise { background: linear-gradient(160deg, #EEF0FF 0%, #E9FFC0 100%); }
.card { box-shadow: var(--shadow); }
.chip.on { color: #fff; }
.tabbar { background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(77, 85, 245, .08); }
.tabbar button .ti { display: grid; place-items: center; width: 34px; height: 30px; font-size: 0; filter: none; opacity: 1; }
.tabbar button .ti::after { content: ""; width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; opacity: .75; }
.tabbar button.on { color: var(--brand); background: var(--brand-soft); }
.tabbar button.on .ti::after { opacity: 1; }
.tabbar button.home-tab { color: var(--ink); }
.tabbar button.home-tab .ti { width: 66px; height: 66px; margin-top: -30px; margin-bottom: 2px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #5A63FA 0%, #4D55F5 100%); border: 3px solid #fff; box-shadow: 0 6px 16px rgba(77, 85, 245, .45); }
.tabbar button.home-tab .ti::after { width: 34px; height: 34px; opacity: 1; }
.tabbar button.home-tab.on { color: var(--brand); }
.tabbar button.home-tab.on .ti { background: linear-gradient(135deg, #4D55F5 0%, #4D55F5 100%); border-color: #fff; box-shadow: 0 6px 16px rgba(77, 85, 245, .45); }
.header .logo, .ring-card .ring .fg { filter: none; }
.ring-card .ring .bg { stroke: #E7E9FF; }
.ring-card .ring .fg { stroke: #4D55F5; }
.mood-opt.on { border-color: var(--green); background: #E7E9FF; }
.wk-col i { background: linear-gradient(180deg, #4D55F5, #5A63FA); }
.wk-col i.low { background: var(--sun); }
.mi { display: block; width: 44px; height: 44px; background: var(--brand); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }

/* ===== v1.3 หน้าความยินยอม (ฟอนต์ Sarabun) + หน้าเปิดแอป ===== */
.pdpa, .login.consent h1, .login.consent .sub, .login.consent .check-row, .login.consent .btn, .login.consent .linkbtn { font-family: "Sarabun", "Prompt", system-ui, sans-serif; }
.pdpa { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.pdpa li { display: flex; gap: 10px; align-items: flex-start; background: var(--brand-soft); border-radius: 12px; padding: 8px 12px; }
.pdpa li > span { font-size: 22px; line-height: 1.3; flex: none; }
.pdpa p { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 400; }
.pdpa b { font-weight: 700; }
.login.consent { padding-top: 2vh; }
.login.consent h1 { font-size: 24px; margin: 0; }
.login.consent .sub { font-size: 16px; line-height: 1.4; margin: 2px 0 10px; }
.login.consent .check-row span { font-size: 16px; line-height: 1.4; }
.login.consent .btn { font-size: 18px; min-height: 48px; }
.login.consent .linkbtn { font-size: 15px; }
.login.consent .card { padding: 14px; }

#splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; text-align: center; padding: 24px;
  background: var(--page-bg); transition: opacity .6s ease; cursor: pointer; }
#splash.hide { opacity: 0; pointer-events: none; }
.sp-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sp-logo { animation: sp-pop .7s cubic-bezier(.2, 1.3, .4, 1) both; }
.sp-name { font-size: 56px; line-height: 1.1; margin: 0; color: var(--brand); letter-spacing: .5px; animation: sp-up .6s .25s ease both; }
.sp-slogan { font-size: 21px; line-height: 1.7; margin: 8px 0 0; color: var(--ink); font-weight: 500; animation: sp-up .6s .5s ease both; }
.sp-skip { margin: 26px 0 0; font-size: 15px; color: var(--muted); animation: sp-up .6s 1.2s ease both; }
@keyframes sp-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes sp-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-logo, .sp-name, .sp-slogan, .sp-skip { animation: none; } }

.login.consent { padding-top: 0; } .login.consent .pdpa { gap: 6px; } .login.consent .check-row { margin: 8px 0; }

/* ===== v1.4 โลโก้ไทล์เขียว + ขวดขาว · สีขึ้นที่กรอบตอนกด ===== */
.app-ic { position: relative; display: inline-grid; place-items: center; overflow: hidden; isolation: isolate; flex: none;
  background: linear-gradient(145deg, #6872FF 0%, #4A53F2 55%, #3F48EE 100%);
  box-shadow: 0 6px 16px rgba(54, 64, 217, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.app-ic::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 55%); pointer-events: none; z-index: 1; }
.app-ic img { width: 100%; height: 100%; object-fit: contain; border-radius: 0;
  filter: grayscale(1) invert(1) contrast(1.7) brightness(1.25); mix-blend-mode: screen; }
.app-ic img.plain { filter: none; mix-blend-mode: normal; }
.app-ic.plain-box { background: none; box-shadow: none; }
.app-ic.plain-box::before { display: none; }
.app-ic.ic-sm { width: 52px; height: 52px; border-radius: 15px; }
.app-ic.ic-lg { width: 124px; height: 124px; border-radius: 34px; margin: 0 auto 8px; }
.app-ic.ic-xl { width: min(56vw, 210px); height: min(56vw, 210px); border-radius: 22%; margin-bottom: 8px; }
.app-ic.ic-xl.plain-box img { border-radius: 22%; }
/* กดปุ่มไหน กรอบนั้นมีสีขึ้นทันที */
button, .card[data-act], [data-act] { transition: background-color .12s, box-shadow .12s, transform .08s, filter .12s; }
.card[data-act]:active, button.card:active, .tile:active, .ring-card:active, .member-row:active, .appt:active, .set-row:active, .alert:active, .person-top:active, .info[data-act]:active {
  background: var(--brand-soft); box-shadow: 0 0 0 3px var(--green), var(--shadow); transform: scale(.985); }
.btn:active { filter: brightness(1.12); box-shadow: 0 0 0 4px rgba(77, 85, 245, .5); transform: scale(.98); }
.btn.ghost:active { background: var(--brand-soft); box-shadow: inset 0 0 0 2.5px var(--green); filter: none; }
.btn.danger:active { box-shadow: 0 0 0 4px rgba(214, 59, 59, .35); }
.chip:active, .pill-btn:active, .mood-opt:active, .iconbtn:active, .linkbtn:active, .back-bar:active, .d:active {
  background: var(--meadow); box-shadow: inset 0 0 0 2.5px var(--green); }
.tabbar button:active { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--green); }
.tabbar button.home-tab:active { background: transparent; box-shadow: none; }
.tabbar button.home-tab:active .ti { box-shadow: 0 0 0 5px rgba(77, 85, 245, .55); }
.dcell .tick:active, .dmain:active { background: var(--meadow); box-shadow: 0 0 0 3px var(--green); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
/* ===== v1.5 โลโก้สีสัน (SVG) + ตัวอักษร "สุขใจ" เขียวประกายเพชร ===== */
.app-ic { background: linear-gradient(145deg, #6872FF 0%, #4D55F5 55%, #3F48EE 100%); }
.app-ic svg { width: 100%; height: 100%; display: block; overflow: visible; position: relative; z-index: 2; }
.app-ic.ic-sm { width: 80px; height: 80px; border-radius: 24px; }
.app-ic.ic-lg { width: 132px; height: 132px; border-radius: 36px; }
.header { gap: 14px; }
.header .app-ic.ic-sm { margin-left: -2px; }
.lg-bottle { transform-box: view-box; transform-origin: 60px 110px; animation: lg-bob 2.6s ease-in-out infinite; }
.lg-cross { transform-box: fill-box; transform-origin: center; animation: lg-pulse 2.6s ease-in-out infinite; }
.lg-star { transform-box: fill-box; transform-origin: center; animation: lg-twinkle 2.2s ease-in-out infinite; }
.lg-star.s2 { animation-delay: 1.1s; }
@keyframes lg-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes lg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes lg-twinkle { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(30deg); } }
@media (prefers-reduced-motion: reduce) { .lg-bottle, .lg-cross, .lg-star { animation: none; } .gem-text { animation: none !important; } }
/* ตัวอักษรเขียวไล่เฉดประกายเพชร */
.gem-text { background: linear-gradient(110deg, #3F48EE 0%, #4D55F5 24%, #6872FF 40%, #DDE0FF 49%, #6872FF 58%, #4D55F5 76%, #3F48EE 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(54, 64, 217, .35)); letter-spacing: .5px; animation: gem-shine 4.5s ease-in-out infinite; }
@keyframes gem-shine { 0%, 15% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.today-brand { font-size: 40px; line-height: 1.15; margin: 0; }
.welcome-top h1 { font-size: 46px; }
.sp-name { font-size: 64px; }
/* ===== v1.6 พื้นหลังไล่ขาว→เขียว · "สุขใจ" สีเขียว · สีแดงอ่านง่ายและมีมิติ ===== */
:root { --red-deep: #B3261E; --red-line: #F4B2AC; }
html { background: #F6F5F1; }
body { background: var(--page-bg) fixed; min-height: 100vh; }
.gem-text { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: #4D55F5; animation: none; filter: none;
  text-shadow: 0 1px 0 #fff, 0 3px 6px rgba(54, 64, 217, .28); }
.sp-name.gem-text, .welcome-top h1.gem-text, .today-brand { color: #4D55F5; }
.welcome-top h1 { color: #4D55F5; text-shadow: 0 1px 0 #fff, 0 3px 6px rgba(54, 64, 217, .28); }
/* สีแดง: อ่อนลง อ่านง่าย มีมิติ (ไล่เฉด + ขอบ + เงา) */
.red-t { color: var(--red-deep); }
.alert.red, .allergy-box { background: linear-gradient(165deg, #FFF6F5 0%, #FFE3E0 100%); border: 1.5px solid var(--red-line);
  box-shadow: 0 4px 12px rgba(224, 69, 63, .14), inset 0 1px 0 #fff; }
.alert.red b, .allergy-box b { color: var(--red-deep); }
.tag.allergy, .tagbox.allergy .tg { background: linear-gradient(180deg, #F0605A 0%, #D63B35 100%); color: #fff;
  box-shadow: 0 2px 5px rgba(214, 59, 53, .35), inset 0 1px 0 rgba(255, 255, 255, .35); text-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.btn.danger, .countdown.hot { background: linear-gradient(180deg, #F0605A 0%, #D63B35 100%); color: #fff;
  box-shadow: 0 4px 10px rgba(214, 59, 53, .30), inset 0 1px 0 rgba(255, 255, 255, .3); }
.sos-btn { background: linear-gradient(165deg, #F0605A 0%, #D63B35 100%); color: #fff; box-shadow: 0 6px 14px rgba(214, 59, 53, .32), inset 0 1px 0 rgba(255, 255, 255, .3); }
.hos-rm { background: linear-gradient(180deg, #FFF6F5, #FFE3E0); color: var(--red-deep); box-shadow: inset 0 0 0 1.5px var(--red-line); }
.dt-warn { background: linear-gradient(165deg, #FFF8F7, #FFEAE7); border: 1.5px solid var(--red-line); box-shadow: 0 3px 8px rgba(224, 69, 63, .12), inset 0 1px 0 #fff; }
.dt-warn b { color: var(--red-deep); }
.dpill { color: var(--red-deep); background: #FFE3E0; box-shadow: inset 0 0 0 1px var(--red-line); }
.tag.trend-worse, .btn.danger.ghost, .btn.ghost.danger { color: var(--red-deep); }
.btn.danger.ghost, .btn.ghost.danger { background: #fff; box-shadow: inset 0 0 0 1.5px var(--red-line); }
/* หน้าขออนุญาต: รายการเรียงต่อกัน ไม่มีกรอบสี/ไอคอน */
.pdpa { gap: 10px; }
.pdpa li { background: none; border-radius: 0; padding: 0; display: block; }
.pdpa li > span { display: none; }
.login.consent .pdpa { gap: 10px; }

/* ===== v1.7 โทน Frosty Mint: เขียว–เหลือง พื้นขาวนวล · การ์ดแจ้งเตือนกรอบขาว ===== */
:root { --page-bg: radial-gradient(ellipse 72% 55% at 50% 42%, rgba(218, 255, 124, .62) 0%, rgba(218, 255, 124, 0) 100%), #F6F5F1; }
.alert:not(.red) { background: #fff; border: 1.5px solid #DCDDF0; border-left: 7px solid var(--green); box-shadow: 0 4px 12px rgba(77, 85, 245, .12); }
.btn { font-weight: 700; }
.chip.on { background: var(--pc, var(--brand)); }

/* ===== v1.8 โทน trio: น้ำเงินเป็นหลัก · เขียวมะนาว · ม่วงลิลลี · ขาวนวล ===== */
:root { --lilac: #CA7FFE; --lime: #DAFF7C; }
#splash { background: radial-gradient(circle at 50% 38%, #6872FF 0%, #4D55F5 52%, #3F48EE 100%); }
.sp-name, .sp-name.gem-text { color: #DAFF7C; -webkit-text-fill-color: currentColor; text-shadow: 0 2px 0 #3F48EE, 0 8px 18px rgba(20, 24, 120, .35); }
.sp-slogan { color: #fff; }
.sp-skip { color: rgba(255, 255, 255, .75); }
.sp-logo { box-shadow: 0 0 0 7px rgba(255, 255, 255, .28), 0 18px 36px rgba(20, 24, 120, .4); }
.mood-opt.on { background: #F4FFD2; border-color: var(--green); }
.hero { background: linear-gradient(135deg, #5A63FA 0%, #4D55F5 55%, #3F48EE 100%); }
.praise { background: linear-gradient(160deg, #F4FFD2 0%, #E9FFC0 100%); }
.praise-pct { color: #4D55F5; }
.tabbar button.home-tab .ti { background: linear-gradient(135deg, #6872FF 0%, #4D55F5 100%); }
.tabbar button.on { background: #E7E9FF; }
.chip.on { color: #fff; }
/* ===== v1.9 โลโก้สีเรียบ (ไม่ไล่เฉด) + หน้า intro ใหม่ ===== */
.app-ic { background: #4D55F5; box-shadow: none; }
.app-ic::before { display: none; }
.app-ic.plain-box { background: none; }
#splash { background: #4D55F5; overflow: hidden; padding: 24px 24px 40px; }
.sp-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sp-deco .d { position: absolute; display: block; }
.d-ring { width: 120vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(218, 255, 124, .35); left: 50%; top: 26%; transform: translate(-50%, -50%); animation: sp-ripple 4.5s ease-out infinite; }
.d-blob { width: 62vw; max-width: 300px; aspect-ratio: 1; border-radius: 50%; background: #CA7FFE; right: -22vw; bottom: -12vw; opacity: .95; animation: sp-drift 7s ease-in-out infinite; }
.d-cap { width: 76px; height: 30px; border-radius: 15px; background: linear-gradient(90deg, #DAFF7C 50%, #fff 50%); box-shadow: 0 6px 14px rgba(20, 24, 120, .25); }
.d-cap.c1 { left: 9%; top: 14%; transform: rotate(-28deg); animation: sp-float 5s ease-in-out infinite; }
.d-cap.c2 { right: 8%; top: 22%; transform: rotate(32deg); background: linear-gradient(90deg, #CA7FFE 50%, #fff 50%); animation: sp-float 6s .8s ease-in-out infinite; }
.d-cap.c3 { left: 14%; bottom: 14%; transform: rotate(18deg); width: 58px; height: 24px; animation: sp-float 5.5s 1.4s ease-in-out infinite; }
.d-star { color: #DAFF7C; font-size: 34px; line-height: 1; font-weight: 800; animation: sp-spin 9s linear infinite; }
.d-star.s1 { left: 18%; top: 34%; font-size: 22px; } .d-star.s2 { right: 14%; top: 46%; font-size: 30px; color: #fff; animation-duration: 12s; } .d-star.s3 { right: 26%; bottom: 20%; font-size: 24px; animation-duration: 7s; }
.sp-inner { position: relative; z-index: 2; gap: 4px; }
.sp-logo { background: #fff; border-radius: 30%; width: min(46vw, 190px); height: min(46vw, 190px); box-shadow: 0 0 0 8px rgba(255, 255, 255, .22), 0 20px 40px rgba(20, 24, 120, .35); }
.sp-logo .lg-body { fill: #E7E9FF; }
.sp-name { font-size: clamp(64px, 20vw, 92px); font-weight: 800; line-height: 1.05; margin: 14px 0 0; color: #DAFF7C; text-shadow: 0 4px 0 #3F48EE; letter-spacing: 1px; }
.sp-stars { margin: 4px 0 6px; color: #fff; letter-spacing: 8px; font-size: 18px; animation: sp-up .6s .45s ease both; }
.sp-slogan { display: flex; flex-direction: column; gap: 2px; font-size: clamp(19px, 5.4vw, 23px); line-height: 1.5; font-weight: 500; color: #fff; margin: 0; animation: none; }
.sp-slogan > span { animation: sp-up .6s ease both; } .sp-slogan > span:nth-child(1) { animation-delay: .6s; } .sp-slogan > span:nth-child(2) { animation-delay: .8s; } .sp-slogan > span:nth-child(3) { animation-delay: 1s; color: #DAFF7C; font-weight: 700; }
.sp-skip { color: rgba(255, 255, 255, .8); margin-top: 34px; animation-delay: 1.8s; }
@keyframes sp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes sp-drift { 0%, 100% { translate: 0 0; } 50% { translate: -14px -10px; } }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-ripple { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.55); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .sp-deco .d, .sp-slogan > span, .sp-stars { animation: none !important; } }
/* ===== v1.10 intro: โลโก้เหมือนหน้าวันนี้ + พื้นหลังไล่สี ===== */
#splash { background: linear-gradient(165deg, #5E67FF 0%, #4D55F5 50%, #4650F2 100%); }
.sp-logo { background: #4D55F5; box-shadow: 0 0 0 8px rgba(255, 255, 255, .85), 0 18px 38px rgba(20, 24, 120, .4); }
.sp-logo .lg-body { fill: #fff; }
.d-blob { opacity: .55; }

/* ===== v1.11 แถบเมนูล่างน้ำเงินสด + สีประจำตัวสดใส ===== */
.chip.on { color: var(--pt, #fff); }
.date, .ordnum { text-shadow: none; }
.tabbar { background: #4D55F5; border-top: 0; box-shadow: 0 -6px 18px rgba(77, 85, 245, .35); }
.tabbar button { color: rgba(255, 255, 255, .88); }
.tabbar button .ti::after { opacity: 1; }
.tabbar button.on { background: #DAFF7C; color: #161A4D; font-weight: 700; }
.tabbar button.on .ti::after { opacity: 1; }
.tabbar button:active { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 2px #DAFF7C; }
.tabbar button.on:active { background: #E9FFA8; }
.tabbar button.home-tab { color: #fff; background: transparent; }
.tabbar button.home-tab .ti { background: #DAFF7C; color: #4D55F5; border: 4px solid #4D55F5; box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(20, 24, 120, .35); }
.tabbar button.home-tab.on { background: transparent; color: #DAFF7C; }
.tabbar button.home-tab.on .ti { background: #fff; color: #4D55F5; box-shadow: 0 0 0 3px #DAFF7C, 0 8px 18px rgba(20, 24, 120, .35); }
.tabbar button.home-tab:active { background: transparent; box-shadow: none; }
.tabbar button.home-tab:active .ti { box-shadow: 0 0 0 5px #DAFF7C; }

/* ===== v1.12 พิมพ์/บันทึกเป็น PDF ===== */
#printArea { display: none; }
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; }
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing #printArea { display: block; font-family: "Sarabun", "Prompt", sans-serif; color: #000; font-size: 14pt; }
  body.print-app .tabbar, body.print-app #modal, body.print-app #toast, body.print-app .back-bar, body.print-app .chips, body.print-app .no-print, body.print-app .cal-nav button, body.print-app .fab { display: none !important; }
  body.print-app { background: #fff !important; padding: 0 !important; }
  body.print-app .card { box-shadow: none !important; break-inside: avoid; border: 1px solid #ccc; }
  .pr-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid #4D55F5; padding-bottom: 8px; margin-bottom: 10px; }
  .pr-head h1 { font-size: 22pt; margin: 0 0 2px; color: #4D55F5; }
  .pr-head p { margin: 0; font-size: 13pt; }
  .pr-brand { text-align: right; font-size: 20pt; font-weight: 800; color: #4D55F5; line-height: 1.2; }
  .pr-brand small { font-size: 11pt; font-weight: 500; color: #333; }
  .pr-allergy { border: 2px solid #B3261E; background: #FFEDEB; color: #B3261E; font-weight: 700; padding: 6px 10px; border-radius: 6px; margin-bottom: 10px; font-size: 14pt; }
  .pr-table { width: 100%; border-collapse: collapse; font-size: 13pt; }
  .pr-table th { background: #4D55F5; color: #fff; padding: 6px 8px; text-align: left; border: 1px solid #4D55F5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-table td { padding: 6px 8px; border: 1px solid #bbb; vertical-align: top; }
  .pr-table tr { break-inside: avoid; }
  .pr-table tbody tr:nth-child(even) td { background: #F3F4FF; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-table td.c { text-align: center; }
  .pr-warn { color: #B3261E; }
  .pr-foot { margin-top: 14px; font-size: 11pt; color: #444; }
}

/* ===== v1.13 หน้าด้านในพื้นขาว (หน้า intro/ต้อนรับ/เข้าสู่ระบบยังไล่สี) ===== */
html:has(body:not(.auth)) { background: #fff; }
body:not(.auth) { background: #fff; }
body:not(.auth) .card { border: 1px solid #E4E7F7; box-shadow: 0 2px 10px rgba(77, 85, 245, .07); }
body:not(.auth) .ring-card, body:not(.auth) .member-row { border-left-width: 8px; }
body:not(.auth) .alert:not(.red) { border: 1.5px solid #E4E7F7; border-left: 7px solid var(--green); }
body:not(.auth) .ring-card, body:not(.auth) .member-row { border-left: 8px solid var(--pc, var(--brand)); }

/* ===== v1.14 โลโก้แบบ 8: ไทล์ขาว ขวดน้ำเงิน ฝามะนาว ของเหลวม่วง ===== */
.app-ic { background: #fff; box-shadow: 0 0 0 2px #E4E7F7, 0 8px 18px rgba(77, 85, 245, .22); }
.sp-logo { background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .28), 0 18px 38px rgba(20, 24, 120, .4); }
.sp-logo .lg-body { fill: #4D55F5; }

/* ===== v1.15 โลโก้แบบสลับ 2: ไทล์น้ำเงิน ขวดขาว ฝามะนาว ของเหลวม่วง ===== */
.app-ic { background: #4D55F5; box-shadow: 0 6px 14px rgba(77, 85, 245, .28); }
.sp-logo { background: #4D55F5; box-shadow: 0 0 0 8px rgba(255, 255, 255, .9), 0 18px 38px rgba(20, 24, 120, .4); }
.sp-logo .lg-body { fill: #fff; }

/* ===== v1.16 คำถามแทนคำทักทาย + PDF 2 แบบ (เลขรหัส / มีชื่อยา) ===== */
.sub.ask { font-size: 19px; font-weight: 600; color: var(--ink); margin: 2px 0 0; }
.pdf-opt { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; margin: 10px 0; cursor: pointer; }
.pdf-opt b { font-size: 19px; } .pdf-opt span { font-size: 15px; color: var(--muted); }
@media print {
  body.printing #printArea { font-size: 12pt; }
  .pr-page { break-after: page; } .pr-page:last-child { break-after: auto; }
  .pr-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
  .pr-top h1 { font-size: 22pt; margin: 0; color: #000; font-weight: 800; }
  .pr-boxes { display: flex; gap: 0; font-size: 12pt; } .pr-boxes span { border: 1px solid #888; padding: 5px 10px; } .pr-boxes span + span { border-left: 0; }
  .pr-red { color: #E53935; }
  .pr-grid, .pr-list { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .pr-grid th, .pr-grid td, .pr-list th, .pr-list td { border: 1px solid #222; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-grid th { padding: 7px 3px; font-size: 14pt; font-weight: 800; text-align: center; background: #fff; }
  .pr-grid th small { display: block; font-size: 9pt; font-weight: 500; color: #333; }
  .pr-grid th.off, .pr-grid td.off { background: #B7BDBA; } .pr-grid th.aft { background: #6FC9FF; }
  .pr-grid td { height: 14mm; text-align: center; vertical-align: middle; position: relative; padding: 3px; }
  .pr-grid td.wr { background: #EAF6FF; } .pr-grid tr { break-inside: avoid; }
  .pr-no { font-size: 22pt; font-weight: 800; line-height: 1; } .pr-dz { color: #E53935; font-size: 11pt; margin-left: 6px; font-weight: 600; }
  .pr-grid em { display: block; font-style: normal; color: #E53935; font-size: 8pt; line-height: 1.1; }
  .pr-wn { position: absolute; left: 4px; top: 3px; font-size: 7pt; color: #888; text-align: left; line-height: 1.15; max-width: 42%; } .pr-wn i, .pr-wn2 i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E53935; margin-right: 3px; }
  .pr-list th { background: #6FC9FF; padding: 7px 6px; font-size: 13pt; font-weight: 800; color: #000; }
  .pr-list td { padding: 6px 8px; font-size: 12.5pt; vertical-align: top; } .pr-list td.no { background: #CDEBFF; font-weight: 800; text-align: center; }
  .pr-list tr { break-inside: avoid; } .pr-list tr.wr td:not(.no) { background: #EAF6FF; }
  .pr-list td span { display: block; } .pr-list .pr-red { font-weight: 600; }
  .pr-foot { margin-top: 8px; font-size: 10pt; color: #444; }
}

/* จัดลำดับคน: ปุ่มลูกศรใหญ่ขึ้น กดง่าย + แถว "ตัวฉัน" ที่ปักหมุดไว้บนสุด */
.ro-btn { width: 52px; height: 52px; font-size: 22px; }
.ro-row.pinned { background: var(--brand-soft); border-radius: 14px; }
.ro-pin { margin-left: auto; font-size: 14px; color: var(--muted); white-space: nowrap; }

/* ปุ่มย้อนกลับ: ชัดเจน กดง่าย บอกว่ากลับไปหน้าไหน */
.back-bar { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 100%; background: #E7E9FF; border: 1.5px solid #D5D9FF; border-radius: 16px; padding: 8px 14px 8px 8px; margin: 0 0 12px; min-height: 56px; color: #3F48EE; text-align: left; font: inherit; }
.back-bar .bb-arrow { width: 40px; height: 40px; border-radius: 50%; background: #4D55F5; color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 700; flex: none; }
.back-bar .bb-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.back-bar .bb-txt b { font-size: 18px; color: #1B1F4D; }
.back-bar .bb-txt small { font-size: 14px; color: #555A86; }

/* ===== ล็อกการลบ (กันมือลั่น) ===== */
.lock-toggle { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; border-radius: 16px; padding: 10px 14px; margin: 4px 0 12px; min-height: 58px; cursor: pointer; }
.lock-toggle.on { background: #E7E9FF; border: 1.5px solid #D5D9FF; color: #1B1F4D; }
.lock-toggle.off { background: #FFEDEB; border: 1.5px solid #F4B2AC; color: #7A1812; }
.lock-toggle .lt-ic { font-size: 28px; flex: none; }
.lock-toggle .lt-tx { display: flex; flex-direction: column; line-height: 1.25; }
.lock-toggle .lt-tx b { font-size: 17px; } .lock-toggle .lt-tx small { font-size: 13.5px; opacity: .8; }
.btn.danger.locked { background: #B9BCD6; color: #fff; box-shadow: none; }

/* กล่องถามยืนยัน */
.ask-ov { position: fixed; inset: 0; z-index: 500; background: rgba(20, 24, 100, .55); display: grid; place-items: center; padding: 20px; }
.ask-box { background: #fff; border-radius: 24px; padding: 22px 20px 18px; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 20px 50px rgba(20, 24, 120, .4); }
.ask-ic { font-size: 40px; line-height: 1; }
.ask-msg { font-size: 20px; line-height: 1.5; margin: 8px 0 16px; color: var(--ink); }
.ask-msg small { font-size: 15px; }
.ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ask-btns .btn { min-height: 54px; font-size: 18px; }

/* คำถามหน้า intro */
.sp-ask { margin: 22px 0 0; padding: 12px 22px; border-radius: 999px; background: #DAFF3A; color: #1B1F4D; font-size: clamp(20px, 5.6vw, 24px); font-weight: 800; box-shadow: 0 8px 20px rgba(20, 24, 120, .3); animation: sp-up .6s 1.3s ease both; }
.sp-skip { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .sp-ask { animation: none; } }

/* สถานะล็อก: ล็อกอยู่ = แดงอ่อน · ปลดล็อก = เทา */
.lock-toggle.on { background: #FFEDEB; border: 1.5px solid #F4B2AC; color: #7A1812; }
.lock-toggle.off { background: #ECEDF2; border: 1.5px solid #D3D5DE; color: #4A4D5E; }

/* ===== ตารางกินยาใช้สีตามสีโปรไฟล์ (เข้มขึ้นตามช่วงเวลาของวัน) ===== */
.dtable th { background: color-mix(in srgb, var(--pc, var(--brand)) 20%, #fff); color: var(--ink); }
.dtable th.th-before_breakfast, .dtable th.th-before_lunch, .dtable th.th-before_dinner { background: color-mix(in srgb, var(--pc, var(--brand)) 22%, #fff); }
.dtable th.th-after_breakfast, .dtable th.th-after_lunch, .dtable th.th-after_dinner { background: color-mix(in srgb, var(--pc, var(--brand)) 44%, #fff); }
.dtable th.th-bedtime { background: color-mix(in srgb, var(--pc, var(--brand)) 62%, #fff); }
.dtable th.off, .dtable th.off[class*="th-"] { background: #EEF0F2; color: #A4ADB3; }
.dtable th.next { box-shadow: 0 0 0 3px var(--pc, var(--brand)); }
.dtable th em { background: var(--pc, var(--brand)); color: var(--pt, #1B1F4D); }
.dtable td { box-shadow: 0 1px 0 rgba(38, 52, 60, .06), inset 0 0 0 1.5px color-mix(in srgb, var(--pc, var(--brand)) 28%, #fff); }
.dtable td.off { box-shadow: none; }
.dtable td.warn { box-shadow: inset 0 0 0 1.5px #F6E3A0; } .dtable td.pn { box-shadow: inset 0 0 0 1.5px #F7C9DD; } .dtable td.done { box-shadow: inset 0 0 0 1.5px #BFE86A; }
.dt-note { border-color: color-mix(in srgb, var(--pc, var(--brand)) 70%, #fff); }
.dt-legend summary { color: var(--ink); }
@media print {
  .pr-top { border-bottom: 4px solid var(--pcd, #4D55F5); padding-bottom: 6px; }
  .pr-grid th.aft { background: var(--pcl, #6FC9FF); } .pr-grid th.bef { background: var(--pcs, #fff); }
  .pr-grid td.wr { background: var(--pcs, #EAF6FF); }
  .pr-list th { background: var(--pcl, #6FC9FF); } .pr-list td.no { background: var(--pcs, #CDEBFF); } .pr-list tr.wr td:not(.no) { background: var(--pcs, #EAF6FF); }
}

/* ===== PDF v2: จัดเรียงในช่องแบบไม่ซ้อนทับ (ป้ายข้อควรระวังอยู่เหนือเลข ไม่ลอยทับ) ===== */
@media print {
  .pr-grid td { height: auto; min-height: 14mm; padding: 4px 3px; vertical-align: middle; text-align: center; overflow: hidden; }
  .pr-grid tr { height: 14mm; }
  .pr-wn { position: static !important; display: block; max-width: 100%; margin: 0 auto 2px; font-size: 7.5pt; line-height: 1.2; color: #555; text-align: center; overflow-wrap: anywhere; }
  .pr-wn i, .pr-r i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E53935; margin-right: 3px; vertical-align: middle; }
  .pr-main { display: flex; justify-content: center; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1.1; }
  .pr-fr { font-size: 12pt; line-height: 1; }
  .pr-grid em { display: block; margin-top: 2px; font-style: normal; color: #E53935; font-size: 8pt; line-height: 1.2; overflow-wrap: anywhere; }
  .pr-list td { overflow-wrap: anywhere; line-height: 1.35; }
  .pr-r { display: block; margin: 0 0 3px; line-height: 1.3; overflow-wrap: anywhere; }
  .pr-r:last-child { margin-bottom: 0; }
  .pr-r.pr-hint { color: #E53935; font-weight: 600; }
  .pr-r.pr-warn { color: #B3261E; font-weight: 600; }
}

/* PDF: ชื่อยาตัวเล็กใต้รหัส · ช่วงที่ไม่มียาแคบ */
@media print {
  .pr-nm { margin-top: 2px; font-size: 8.5pt; line-height: 1.2; color: #333; font-weight: 500; overflow-wrap: anywhere; }
  .pr-grid th.off { padding: 6px 0; font-size: 11pt; font-weight: 400; background: #B7BDBA; }
  .pr-grid th.off small { display: none; }
  .pr-grid td.off { padding: 0; }
}

/* ===== PDF v3: แบบฟอร์มเดียวกันทุกไฟล์ (หัว · เนื้อหา · หมายเหตุ · ท้ายกระดาษพร้อมเลขหน้า) ===== */
@media print {
  .pr-page { display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; }
  .pr-note { margin: 6px 0 0; font-size: 10.5pt; color: #333; }
  .pr-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-top: auto; padding-top: 6px; border-top: 1px solid #999; font-size: 8.5pt; line-height: 1.3; color: #444; }
  .pr-pg { flex: none; font-weight: 700; font-size: 10pt; color: #000; white-space: nowrap; }
  .pr-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; }
  .pr-h2 { font-size: 13pt; font-weight: 800; margin: 8px 0 4px; color: #000; }
  .pr-sum th { padding: 4px 6px; font-size: 11pt; } .pr-sum td { padding: 3px 8px; font-size: 11pt; } .pr-sum td.c, .pr-sum th { text-align: center; }
  .pr-kpi { display: flex; align-items: center; gap: 14px; border: 2px solid var(--pcd, #4D55F5); border-radius: 10px; padding: 10px 14px; background: var(--pcs, #F3F4FF); font-size: 13pt; line-height: 1.35; }
  .pr-kpi-pct { font-size: 34pt; font-weight: 800; line-height: 1; color: var(--pcd, #4D55F5); }
  .pr-praise { margin: 8px 0; font-size: 12pt; line-height: 1.4; }
}

/* ปฏิทินนัดหมอ: วันที่มีนัดมีกรอบรูปดาวสีเขียวอยู่หลังตัวเลข (จุดสีใต้เลขเหมือนเดิม) */
.cal .d { position: relative; }
.cal .d .appt-flag { position: absolute; top: 0; left: 50%; width: 38px; height: 38px; transform: translateX(-50%); pointer-events: none; }
.cal .d .dn { position: relative; z-index: 1; }
.cal .d:has(.appt-flag) .dn { font-weight: 800; }
.cal .d:has(.appt-flag) .bars { margin-top: 8px; }
/* ฟอร์มยา: ตั้งช่วงเวลาอัตโนมัติจาก "ทุก X ชั่วโมง" */
.every-box { background: var(--brand-soft, #E7E9FF); border-radius: 16px; padding: 12px; }
.every-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; margin: 6px 0; }
.every-row select, .every-row input[type=time] { width: auto; min-width: 84px; min-height: 48px; }
.every-row select { min-width: 72px; }

/* ฟอร์มยา: เลือกวันในสัปดาห์ (ปกติปิด = ทานทุกวัน) */
.wd-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.wd-pick label { flex: 1 1 0; min-width: 40px; position: relative; }
.wd-pick input { position: absolute; opacity: 0; pointer-events: none; }
.wd-pick span { display: grid; place-items: center; min-height: 52px; border-radius: 14px; border: 2px solid #D5D9FF; background: #fff; font-size: 17px; font-weight: 600; color: #1B1F4D; cursor: pointer; }
.wd-pick input:checked + span { background: #4D55F5; border-color: #4D55F5; color: #fff; }
/* อารมณ์รายวัน: ไอคอน+ข้อความอยู่กึ่งกลางกรอบ ไม่ชิดขอบ */
.mood-opt { justify-content: center; gap: 6px; padding: 14px 6px; min-height: 104px; }

.ad-title { font-size: 21px; margin: 4px 0 10px; color: var(--ink); }

/* หน้า intro: สโลแกนเล็กลงและบางลง */
.sp-slogan { font-size: clamp(16px, 4.5vw, 19px); font-weight: 300; line-height: 1.55; }
.sp-slogan > span:nth-child(3) { font-weight: 400; }

/* สโลแกน 2 บรรทัด: บรรทัดที่ 2 ต่อด้วย "ในแอปเดียว" สีมะนาว */
.sp-slogan > span:nth-child(2) { white-space: nowrap; }
.sp-slogan > span b { color: #DAFF7C; font-weight: 400; margin-left: .3em; }

/* ===== แถบเมนูล่างแบบเดียวกันทุกปุ่ม: ไอคอนอยู่ในวงกลม แท็บที่เลือกมีวงกลมเขียวมะนาวครอบ ===== */
.tabbar { align-items: center; padding-top: 8px; }
.tabbar button, .tabbar button.home-tab, .tabbar button.on, .tabbar button.home-tab.on, .tabbar button:active, .tabbar button.on:active, .tabbar button.home-tab:active { background: transparent; box-shadow: none; color: rgba(255, 255, 255, .92); font-size: 14px; font-weight: 500; gap: 2px; padding: 0 0 2px; }
.tabbar button.on, .tabbar button.home-tab.on { color: #fff; font-weight: 700; }
.tabbar button .ti, .tabbar button.home-tab .ti { width: 48px; height: 48px; margin: 0; border-radius: 50%; background: transparent; border: 0; box-shadow: none; color: inherit; transition: background .15s, transform .15s; }
.tabbar button .ti::after, .tabbar button.home-tab .ti::after { width: 27px; height: 27px; opacity: 1; }
.tabbar button.on .ti, .tabbar button.home-tab.on .ti { background: #DAFF7C; color: #161A4D; box-shadow: 0 4px 12px rgba(20, 24, 120, .35); }
.tabbar button:active .ti, .tabbar button.home-tab:active .ti { transform: scale(.92); box-shadow: 0 0 0 3px rgba(218, 255, 124, .7); }
/* ===== หน้าต้อนรับ (ก่อนกด "เริ่มใช้งาน"): ดีไซน์และอนิเมชันเดียวกับหน้า intro ===== */
.wel-screen { position: fixed; inset: 0; z-index: 5; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; padding: 6vh 22px calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(165deg, #5E67FF 0%, #4D55F5 50%, #4650F2 100%); }
.wel-screen .sp-inner { margin: auto 0; }
.wel-screen .sp-ask { margin-top: 18px; font-size: clamp(17px, 4.8vw, 21px); }
.wel-actions { position: relative; z-index: 2; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; animation: sp-up .6s 1.5s ease both; }
.wel-actions .btn { min-height: 56px; font-size: 19px; }
.wel-go { background: #DAFF3A; color: #1B1F4D; box-shadow: 0 8px 20px rgba(20, 24, 120, .3); }
.wel-have { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .75); box-shadow: none; }
.wel-note { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
@media (prefers-reduced-motion: reduce) { .wel-actions { animation: none; } }
/* ตั้งค่า > ช่วงเวลาทานยา: เว้นระยะให้โปร่ง ไม่แน่น (แถวละ 1 ช่วง) */
.set-det .two { grid-template-columns: 1fr; gap: 18px; padding: 8px 2px 4px; }
.set-det .two .f > span { display: block; margin-bottom: 8px; font-size: 17px; }
.set-det .t24 { gap: 12px; }
.set-det .t24 select { padding: 14px 10px; min-height: 52px; }
.set-det .t24 b { font-size: 20px; }
.set-det .t24 small { margin-left: 4px; font-size: 16px; }
/* ===== v1.3: ปุ่มในหน้าสมาชิก (ไอคอนเส้นบนพื้นสีอ่อน) · ประวัติการรักษา · จำนวนยาที่เหลือ ===== */
.mb-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 8px; text-align: center; font: inherit; border: 0; min-height: 150px; }
.mb-btn b { font-size: 18px; line-height: 1.3; }
.mb-btn .tile-ic { width: 76px; height: 76px; }
.slot-row .switch.sm { display: none; } /* ช่วงเวลาทานยาในฟอร์มยา: ไม่แสดงสวิตช์เตือน (ค่าเดิมยังเก็บ/ใช้ตามเดิม) */
.hist-item { display: flex; flex-direction: column; gap: 4px; }
.hist-item .hi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-item > b { font-size: 19px; }
.hist-item.rec { border-left: 6px solid var(--green); }
.stk-card { padding: 6px 14px 10px; }
.stk-head { display: grid; grid-template-columns: 56px 1fr 84px; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); }
.stk-head span:last-child { text-align: right; }
.stk-row { display: grid; grid-template-columns: 56px 1fr 84px; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stk-row:last-child { border-bottom: 0; }
.stk-no { display: grid; place-items: center; min-height: 40px; border-radius: 12px; background: var(--sky-soft); font-size: 18px; }
.stk-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stk-main b { font-size: 17px; overflow-wrap: anywhere; } .stk-main small { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.stk-left { display: flex; flex-direction: column; align-items: flex-end; } .stk-left b { font-size: 24px; line-height: 1.1; } .stk-left small { font-size: 14px; color: var(--muted); }
.stk-row.low .stk-no { background: #FFEDEB; }
.wel-screen .sp-ask { background: transparent; box-shadow: none; color: #fff; padding: 0; margin-top: 20px; font-weight: 600; line-height: 1.5; }

/* เครดิตไอคอน (ตั้งค่า): ตารางเล็ก ตัวเล็ก */
.credits { width: 100%; border-collapse: collapse; margin: 2px 0 4px; font-size: 12px; line-height: 1.3; }
.credits th, .credits td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line); font-weight: 400; }
.credits th { color: var(--muted); font-size: 11px; }
.credits th a { color: var(--brand); text-decoration: none; }
.credits-note { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
/* จำนวนยาที่เหลือ: ช่องค้นหา */
.stk-search { width: 100%; box-sizing: border-box; min-height: 52px; margin: 0 0 10px; padding: 12px 16px; border: 2px solid #D5D9FF; border-radius: 16px; background: #fff; font: inherit; font-size: 17px; color: var(--ink); }
.stk-search:focus { outline: none; border-color: #4D55F5; }
.stk-row[hidden], .stk-none[hidden] { display: none; }
/* ฟอร์มยา: ช่วงเวลาทานยาแบ่งเป็น 2 คอลัมน์ ให้ตารางสั้นลง */
.slot-pick { display: grid; grid-template-columns: 1fr 1fr; }
.slot-row, .slot-row:first-child { padding: 2px 6px 2px 0; border-top: 1px solid var(--line); min-width: 0; }
.slot-row:nth-child(-n+2) { border-top: 0; }
.slot-row:nth-child(odd) { border-right: 1px solid var(--line); }
.slot-main { gap: 6px; min-height: 44px; font-size: 15px; line-height: 1.25; min-width: 0; }
.slot-main .si { font-size: 20px; }
.slot-main input { margin-left: 8px; }
.every-row { gap: 6px; font-size: 16px; } .every-row select { min-width: 62px; padding-inline: 8px; } .every-row .btn { padding-inline: 14px; }

/* โหมดออฟไลน์ (ดูอย่างเดียว): แถบแจ้งด้านบน */
#offbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 6px 12px; background: #1B1F4D; color: #fff; text-align: center; font-size: 14px; line-height: 1.35; }
body.is-offline { padding-top: 34px; }
/* Premium */
.perks { margin: 6px 0 0; padding-left: 20px; } .perks li { margin: 3px 0; font-size: 16px; }
a.set-row { text-decoration: none; color: inherit; }

/* แพ็กเกจของฉัน: ตารางเทียบฟรี/Premium (✔ ✘) */
.plan-tbl { width: 100%; border-collapse: collapse; margin: 10px 0 2px; font-size: 14.5px; }
.plan-tbl th, .plan-tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; line-height: 1.3; }
.plan-tbl th:first-child, .plan-tbl td:first-child { text-align: left; }
.plan-tbl th { font-size: 14px; color: var(--muted); font-weight: 600; }
.plan-tbl .prem { background: #F4FFD2; font-weight: 600; }
.plan-tbl tr:last-child td { border-bottom: 0; }
.plan-tbl .yes { color: #1E8E3E; font-size: 19px; font-weight: 800; } .plan-tbl .no { color: #C5382E; font-size: 18px; font-weight: 800; }
.plan-tbl .no { color: #8A8FB5; font-size: 20px; font-weight: 600; }
/* ตารางแพ็กเกจ: ฟอนต์ขนาดเดียวกันทุกแถว · หัวข้อกลุ่มไม่มีพื้นหลัง */
.plan-tbl, .plan-tbl th, .plan-tbl td { font-size: 14.5px; line-height: 1.35; font-family: inherit; }
.plan-tbl th { font-size: 14.5px; }
.plan-tbl tr.grp td { text-align: left; font-weight: 700; background: none; border-bottom: 0; padding: 10px 6px 2px; color: var(--ink); }
.plan-tbl td.psub { padding-left: 22px; position: relative; color: var(--ink); } .plan-tbl td.psub::before { content: "•"; position: absolute; left: 10px; color: var(--muted); }
/* ปุ่มสรุปอารมณ์: ไอคอนเคลื่อนไหว + ข้อความ */
.mood-sum-btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mood-sum-btn .mood-ic { width: 44px; height: 44px; flex: none; object-fit: contain; }
.mood-sum-btn { min-height: 96px; gap: 14px; font-size: 20px; }
.mood-sum-btn .mood-ic { width: 76px; height: 76px; }

/* แถบเมนูล่าง: ป้ายชื่อบรรทัดเดียว (นัดพบแพทย์ ยาวกว่าชื่อเดิม) */
.tabbar button { white-space: nowrap; letter-spacing: -.2px; }
@media (max-width: 400px) { .tabbar button { font-size: 12.5px; } }
/* ปฏิทินอารมณ์: วันที่แตะได้ */
.mood-cal .day-btn { border: 0; font: inherit; color: inherit; cursor: pointer; } .mood-cal .day-btn:active { background: #E7E9FF; }
.mood-cal .day-btn.today b { background: #4D55F5; color: #fff; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
.mood-cal .future { opacity: .45; }
/* ตั้งค่า: ค่าด้านขวา (เช่น อีเมล) อยู่บรรทัดเดียว ตัวเล็กลง ถ้ายาวเกินตัดด้วย … */
.sr-l { flex: 0 1 auto; min-width: 0; }
.sr-v { flex: 1 1 0; min-width: 0; font-size: 13px; word-break: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .sr-v { font-size: 12px; } }
.set-row .chev { margin-left: auto; }

/* ปฏิทินอารมณ์: ช่องสูงขึ้น ไอคอนไม่ชิดกรอบ */
.mood-cal { gap: 6px; }
.mood-cal .ad-d { min-height: 72px; padding: 8px 2px 12px; gap: 6px; justify-content: center; }
.mood-cal .ad-d b { font-size: 16px; line-height: 1.1; }
.mood-cal .ad-d small { font-size: 22px; line-height: 1; min-height: 22px; display: block; }
.set-copy { text-align: center; line-height: 1.7; }

/* แพ็กเกจของฉัน: รายละเอียดย่อและซ่อนไว้ */
.plan-det { margin: 6px 0 2px; }
.plan-det > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 8px 4px; list-style: none; }
.plan-det > summary::before { content: "▸ "; } .plan-det[open] > summary::before { content: "▾ "; }
.plan-det .plan-tbl, .plan-det .plan-tbl th, .plan-det .plan-tbl td { font-size: 12.5px; }
.plan-det .plan-tbl td { padding: 6px 4px; }
/* หน้าเข้าสู่ระบบ/สมัคร: พื้นหลังขาว + เม็ดยาลอยเหมือนหน้า intro */
html:has(.login.plain), body.auth:has(.login.plain) { background: #fff !important; }
.login.plain { position: relative; }
.login.plain > :not(.login-deco) { position: relative; z-index: 1; }
.login-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.login-deco .lc { position: absolute; display: block; width: 76px; height: 30px; border-radius: 15px; box-shadow: 0 6px 14px rgba(77, 85, 245, .2); }
.login-deco .lc1 { left: 6%; top: 9%; transform: rotate(-28deg); background: linear-gradient(90deg, #DAFF7C 50%, #E7E9FF 50%); animation: sp-float 5s ease-in-out infinite; }
.login-deco .lc2 { right: 7%; top: 16%; transform: rotate(32deg); background: linear-gradient(90deg, #CA7FFE 50%, #F3E4FF 50%); animation: sp-float 6s .8s ease-in-out infinite; }
.login-deco .lc3 { left: 9%; bottom: 14%; transform: rotate(18deg); width: 60px; height: 24px; background: linear-gradient(90deg, #4D55F5 50%, #E7E9FF 50%); animation: sp-float 5.5s 1.4s ease-in-out infinite; }
.login-deco .lc4 { right: 10%; bottom: 20%; transform: rotate(-20deg); width: 64px; height: 26px; background: linear-gradient(90deg, #DAFF7C 50%, #CA7FFE 50%); animation: sp-float 6.5s .4s ease-in-out infinite; }
.login-deco .ls { position: absolute; color: #CA7FFE; font-size: 24px; line-height: 1; animation: sp-spin 10s linear infinite; }
.login-deco .ls1 { left: 18%; top: 30%; } .login-deco .ls2 { right: 16%; top: 48%; color: #4D55F5; font-size: 20px; animation-duration: 13s; }
@media (prefers-reduced-motion: reduce) { .login-deco .lc, .login-deco .ls { animation: none; } }
/* หน้า intro: ตัวอักษรเล็กลง เว้นระยะพอดี + ข้อความลิขสิทธิ์ท้ายหน้า */
#splash { padding: 24px 20px calc(110px + env(safe-area-inset-bottom)); }
#splash .sp-logo { width: min(40vw, 150px); height: min(40vw, 150px); }
#splash .sp-name { font-size: clamp(50px, 15vw, 68px); margin: 14px 0 0; }
#splash .sp-stars { margin: 2px 0 8px; font-size: 14px; letter-spacing: 7px; }
#splash .sp-slogan { font-size: clamp(14px, 3.8vw, 16px); line-height: 1.6; gap: 3px; }
#splash .sp-ask { margin: 20px 0 0; padding: 9px 18px; font-size: clamp(16px, 4.5vw, 19px); }
#splash .sp-skip { margin-top: 16px; font-size: 13px; }
#splash .sp-foot { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 2; margin: 0; padding: 0 16px; text-align: center; font-size: 11.5px; line-height: 1.7; color: rgba(255, 255, 255, .78); }
#splash .sp-foot .sf-a, #splash .sp-foot .sf-b { display: block; }
#splash .sp-foot .sf-a { font-size: 11.5px; }
#splash .sp-foot .sf-b { font-size: 10px; margin-top: 10px; opacity: .85; line-height: 1.6; }
/* ข้อความท้ายหน้า intro: กรอบสีขาวบางๆ + พื้นขาวจางหลังข้อความ */
#splash .sp-foot { left: 18px; right: 18px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 16px; background: rgba(255, 255, 255, .08); bottom: calc(18px + env(safe-area-inset-bottom)); }
/* กรอบขาวบางเฉพาะ 2 บรรทัดล่างสุด (พอดีกับข้อความ) */
#splash .sp-foot { left: 0; right: 0; padding: 0 16px; border: 0; border-radius: 0; background: none; bottom: calc(18px + env(safe-area-inset-bottom)); }
#splash .sp-foot .sf-b { display: table; margin: 10px auto 0; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 12px; background: rgba(255, 255, 255, .08); opacity: 1; }
/* คำเชิญเข้ากลุ่ม: จุดแดงที่แท็บสมาชิก + แถบเตือนหน้าวันนี้ */
#tabbar button { position: relative; }
#tabbar button.has-badge::after { content: ""; position: absolute; top: 6px; left: calc(50% + 10px); width: 12px; height: 12px; border-radius: 50%; background: #FF4D4D; border: 2px solid #4D55F5; }
.invite-alert { margin-bottom: 10px; }
/* v1.16 เว้นระยะด้านบนของแอป + ข้อความลิขสิทธิ์ท้ายหน้าตั้งค่าตัวเล็กลง */
.set-copy { font-size: clamp(8px, 2.7vw, 12px) !important; line-height: 1.5 !important; margin: 14px 0 6px; white-space: nowrap; }
.set-copy .sc-line { display: block; font-size: inherit; line-height: inherit; margin: 0; }
.stk-opts { display: grid; gap: 8px; margin: 10px 0; }
.stk-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
.stk-txt { min-width: 0; }
.stk-step { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.stk-step output { min-width: 26px; text-align: center; font-size: 22px; font-weight: 800; }
.stk-b { width: 44px; height: 44px; border-radius: 14px; border: 2px solid var(--brand); background: #fff; color: var(--brand); font-size: 26px; font-weight: 700; line-height: 1; }
.stk-b:active { background: var(--brand); color: #fff; }
/* ตารางแพ็กเกจ: หัวหมวดเด่นชัด */
.plan-tbl tr.grp td { background: var(--sky-soft, #EEF0FF); color: var(--brand, #4D55F5); font-weight: 800; font-size: 17px; padding: 9px 12px; border-radius: 12px; border-bottom: 0; }
.plan-tbl tr.grp td::before { content: none; }
.plan-tbl tr.grp:not(:first-child) td { border-top: 10px solid #fff; }
.plan-det .plan-tbl tr.grp td { font-size: 16.5px; }
/* ตารางแพ็กเกจ: ลดช่องว่างให้กระชับ */
.set-group .set-row:has(+ .plan-det), .set-group .set-row:has(+ .btn + .plan-det) { padding-top: 10px; padding-bottom: 6px; }
.set-group .plan-det { margin: 0; }
.set-group .plan-det > summary { padding: 4px 4px 6px; }
.set-group .plan-det .plan-tbl { margin: 2px 0 0; }
.plan-det .plan-tbl tr.grp td { padding: 6px 12px; }
.plan-tbl tr.grp:not(:first-child) td { border-top-width: 6px; }
/* ตารางแพ็กเกจแบบกรอบตามหมวดหมู่ */
.plan-grid { margin: 4px 0 2px; }
.plan-colhead, .plan-r { display: grid; grid-template-columns: minmax(0, 1fr) 76px 84px; align-items: center; }
.plan-colhead { padding: 4px 4px 6px; font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.25; }
.plan-colhead span:first-child { text-align: left; }
.plan-colhead .prem { color: #4A5A00; }
.plan-box { margin: 0 0 10px; border: 2px solid #C9CEFF; border-radius: 16px; overflow: hidden; background: #fff; }
.plan-box h4 { margin: 0; padding: 9px 12px; background: #E9EBFF; color: #3F47E0; font-size: 17px; font-weight: 800; line-height: 1.3; }
.plan-r { padding: 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.35; text-align: center; }
.plan-box h4 + .plan-r { border-top: 0; }
.plan-r > span { padding: 9px 6px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.plan-r > span:first-child { justify-content: flex-start; text-align: left; padding-left: 12px; }
.plan-r .prem { background: #F4FFD2; font-weight: 700; }
.plan-r .yes { color: #1E8E3E; font-size: 20px; font-weight: 800; } .plan-r .no { color: #8A8FB5; font-size: 20px; font-weight: 600; }

/* ---- ความดัน / น้ำตาลในเลือด ---- */
.h-ic { font-size: 34px; line-height: 1; }
.seg > button { flex: 1; border: 0; background: transparent; padding: 10px 6px; border-radius: 10px; font: inherit; font-size: 16px; color: var(--ink); cursor: pointer; }
.seg > button.on { background: var(--card); font-weight: 700; box-shadow: var(--shadow); color: var(--brand); }
.h-range { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; flex-wrap: wrap; }
.h-range button { border: 2px solid #D5D9FF; background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.h-range button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.h-latest { text-align: center; }
.h-big { font-size: 44px; font-weight: 800; line-height: 1.15; color: var(--brand); }
.h-big small { font-size: 16px; font-weight: 500; color: var(--muted); }
.h-stats .h-stat-row { display: flex; gap: 10px; margin-top: 8px; }
.h-stats .h-stat-row > div { flex: 1; display: flex; flex-direction: column; background: var(--sky-soft, #EEF0FF); border-radius: 14px; padding: 8px 10px; text-align: center; }
.h-stats .h-stat-row b { font-size: 20px; }
.h-chart { width: 100%; height: auto; display: block; margin-top: 8px; }
.h-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; margin-top: 4px; }
.hl-key { display: inline-flex; align-items: center; gap: 6px; }
.hl-key i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.h-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.h-item-top b { font-size: 22px; }
.report-box { margin: 12px 0 4px; }
/* ตัวอักษรใหญ่ (ตั้งในหน้าตั้งค่า) */
html.bigtext #app, html.bigtext #modal .sheet { zoom: 1.18; }
.bigtext-row small { font-size: 12.5px; }

/* ยาที่ลืมบ่อย: แยกกรอบตัวยาแต่ละตัว */
.miss-list { display: grid; gap: 8px; margin-top: 10px; }
.miss-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #E3D2FF; border-radius: 14px; padding: 9px 12px; }
.miss-no { flex: none; min-width: 40px; text-align: center; background: var(--brand, #4D55F5); color: #fff; border-radius: 10px; padding: 4px 8px; font-size: 16px; }
.miss-nm { flex: 1; min-width: 0; font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.miss-n { flex: none; font-size: 14px; color: #8C1D18; font-weight: 600; }

/* เลือกยาที่จะใส่ในรายงานก่อนพบแพทย์ */
.rp-pick { display: grid; gap: 8px; margin: 8px 0; max-height: 46vh; overflow-y: auto; }
.rp-pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.rp-pick-row input { width: 22px; height: 22px; flex: none; }
.rp-pick-no { flex: none; min-width: 38px; text-align: center; background: var(--brand, #4D55F5); color: #fff; border-radius: 9px; padding: 3px 6px; }
.rp-pick-nm { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.rp-pick-nm small { display: block; font-weight: 400; font-size: 13px; }

/* เบอร์โทรในกรอบรายละเอียดนัด */
.kv .tel-link { color: var(--brand, #4D55F5); text-decoration: none; font-weight: 700; white-space: nowrap; }
.kv .tel-link:active { opacity: .6; }
.kv .tel-num { font-weight: 700; margin-right: 8px; }
.kv .tel-btn { display: inline-block; background: var(--brand, #4D55F5); color: #fff; text-decoration: none; font-weight: 700; border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.kv .tel-btn:active { opacity: .7; }

/* สรุปรายงานที่ซ่อนไว้ในหน้ารายละเอียดนัด */
.rp-prev { margin-top: 10px; border: 2px solid #D5D9FF; border-radius: 16px; background: #fff; }
.rp-prev > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 16px; list-style: none; color: var(--brand, #4D55F5); }
.rp-prev > summary::-webkit-details-marker { display: none; }
.rp-prev > summary::after { content: "▾"; float: right; }
.rp-prev[open] > summary::after { content: "▴"; }
.rp-prev-body { padding: 0 10px 12px; }
.rp-mode { margin: 6px 0 4px; }
.rp-mode-hint { margin: 0 0 6px; }
.rp-prev > summary .rp-ic { display: inline-block; width: 24px; height: 24px; vertical-align: -6px; margin-right: 8px; }

/* รายงานก่อนพบแพทย์: กรอบ "สรุป" สำคัญกว่า — เด่น ใหญ่ ปุ่มโหลดไฟล์เป็นรอง */
.rp-prev { margin-top: 10px; border: 2.5px solid var(--brand, #4D55F5); border-radius: 18px; background: #F3F4FF; box-shadow: 0 4px 14px rgba(77, 85, 245, .14); }
.rp-prev > summary { padding: 15px 16px; font-size: 19px; font-weight: 800; }
.rp-prev > summary .rp-ic { width: 28px; height: 28px; vertical-align: -8px; }
.rp-prev-body { padding: 4px 12px 14px; background: #fff; border-radius: 0 0 15px 15px; }
.rp-dl { margin-top: 10px; font-size: 15px; padding-block: 9px; }
.rp-dl.rp-dl-off { opacity: .6; }
/* ช่วงเวลาทานยาในฟอร์มยา: เน้นคำว่า ก่อน/หลัง (ตัวหนา ขีดเส้นใต้) · ก่อนนอนอยู่กลางแถว */
.slot-row .sl-kw { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.slot-row.slot-bed { grid-column: 1 / -1; border-right: 0; justify-content: center; }
.slot-row.slot-bed .slot-main { justify-content: center; }
/* ช่อง "ข้อควรระวัง" ในฟอร์มยา: โซนสีแดงอ่อน (สอดคล้องกับสีเตือนในแอป) */
.f.warn-field > span { display: inline-block; align-self: flex-start; width: fit-content; background: linear-gradient(165deg, #F0605A 0%, #D63B35 100%); border: 0; border-radius: 12px; padding: 5px 16px; color: #fff; font-weight: 800; box-shadow: 0 4px 10px rgba(214, 59, 53, .30), inset 0 1px 0 rgba(255, 255, 255, .3); }
.f.warn-field input { background: #FFF0EE; border-color: #F2B8B2; }
.f.warn-field input:focus { border-color: #E5675F; outline: none; box-shadow: 0 0 0 3px rgba(229, 103, 95, .18); }
.f.warn-field input::placeholder { color: #B98480; }

/* ===== PDF v4: อ่านง่ายขึ้น — ตัวหนาไม่เกิน 700 (น้ำหนักที่โหลดจริง: 800 จะถูกสร้างเป็นตัวหนาเทียมจนตัวอักษรไทยติดกัน) · ตัวอักษรใหญ่ขึ้น · ขีดเส้นใต้ห่างจากตัวอักษร ===== */
@media print {
  .pr-top h1, .pr-grid th, .pr-list th, .pr-list td.no, .pr-no, .pr-h2, .pr-kpi-pct { font-weight: 700; }
  .pr-grid th u { text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .pr-grid th { font-size: 15pt; padding: 8px 3px; line-height: 1.35; }
  .pr-grid th small { font-size: 10pt; font-weight: 600; color: #222; }
  .pr-nm { font-size: 9.5pt; line-height: 1.25; color: #222; font-weight: 600; }
  .pr-grid em { font-size: 9pt; }
  .pr-wn { font-size: 8.5pt; color: #333; }
  .pr-list th { font-size: 14pt; }
  .pr-list td { font-size: 13pt; line-height: 1.4; }
  .pr-sum th, .pr-sum td { font-size: 12pt; }
  .pr-note { font-size: 11pt; color: #222; }
  .pr-foot { font-size: 9pt; color: #333; }
}

/* การ์ด "แพ็กเกจของฉัน": ตอนยังไม่เปิดดูรายละเอียด = พื้นเขียวมะนาวตามสีหลักของแอป (#DAFF7C) ตัวอักษรกรมท่า · เปิดดูรายละเอียดแล้วกลับเป็นการ์ดปกติ */
.card.set-group.plan-card { border: 1.5px solid #A6DA3A; } /* เขียวมะนาวเข้มขึ้นเล็กน้อยสำหรับเส้นขอบ (--green ในแอปเป็นสีน้ำเงิน) */
.card.set-group.plan-card:not(:has(.plan-det[open])) { background: #DAFF7C; box-shadow: 0 4px 14px rgba(120, 170, 20, .25); }
.card.set-group.plan-card:not(:has(.plan-det[open])) .plan-det > summary { color: #161A4D; font-weight: 700; }
/* แถว "ตัวอักษรใหญ่": สวิตช์ชิดขวาสุดของกรอบ */
.bigtext-row { justify-content: flex-start; }
.bigtext-row .sr-l { flex: 1; min-width: 0; }
.bigtext-row .switch { margin-left: auto; flex: none; }
/* การ์ดอารมณ์ที่ล็อกไว้สำหรับ Premium: หน้าอารมณ์จางลง + ปุ่มดูรายละเอียด */
.mood-locked .mood-dim { opacity: .45; pointer-events: none; filter: grayscale(.4); }
/* ปุ่มเปิด-ปิดตาที่ช่องรหัสผ่าน */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 52px; box-sizing: border-box; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.pw-eye:active { background: rgba(77, 85, 245, .12); }
/* ปุ่มเลือกจำนวนยาต่อครั้ง */
.dose-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dose-quick button { min-width: 48px; height: 40px; padding: 0 12px; border: 2px solid #D5D9FF; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.dose-quick button:active { background: var(--brand); border-color: var(--brand); color: #fff; }
/* ช่องที่ต้องกรอก */
.req { color: #D63B35; font-weight: 800; margin-left: 2px; }
.slot-pick.need { border-color: #D63B35; box-shadow: 0 0 0 3px rgba(214, 59, 53, .20); animation: need-shake .35s; }
@keyframes need-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* หัวข้อกล่อง พบแพทย์ครั้งถัดไป ตัวใหญ่ */
.preview b { font-size: 16px; line-height: 1.4; }
.preview { font-size: 15px; }
.preview { white-space: pre-wrap; }

/* สระ/วรรณยุกต์ไม่ซ้อนกัน (ตึก/ชั้น) */
.kv span, .kv b { line-height: 1.7; text-rendering: optimizeLegibility; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; }

/* ป้ายแดงยาใกล้หมด (หน้ายา) */
.low-badge { display: inline-flex; align-items: center; gap: 4px; flex: none; background: #E5332A; color: #fff; font-weight: 800; font-size: 15px; line-height: 1; padding: 6px 10px 6px 6px; border-radius: 999px; box-shadow: 0 2px 6px rgba(229,51,42,.4); animation: low-pulse 1.6s ease-in-out infinite; }
.low-badge i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #E5332A; font-style: normal; font-weight: 900; font-size: 14px; }
.low-badge.sm { font-size: 12px; padding: 3px 7px 3px 3px; margin-left: 6px; animation: none; }
.low-badge.sm i { width: 15px; height: 15px; font-size: 11px; }
@keyframes low-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .low-badge { animation: none; } }
.two-btn:has(> :only-child) { grid-template-columns: 1fr; }
.low-box .low-list { margin: 8px 0 0; padding-left: 18px; font-size: 16px; line-height: 1.7; }
.low-box .low-list li b { margin-right: 4px; }

/* รายการยาที่เหลือ = ตารางจริง */
.stk-card { padding: 4px 6px 8px; overflow: hidden; }
.stk-t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.stk-t th { text-align: left; font-weight: 600; font-size: 13px; color: var(--muted); padding: 8px 4px; border-bottom: 2px solid var(--line); line-height: 1.3; }
.stk-t th:nth-child(1) { width: 14%; } .stk-t th:nth-child(2) { width: 29%; } .stk-t th:nth-child(3) { width: 19%; } .stk-t th:nth-child(4) { width: 19%; } .stk-t th:nth-child(5) { width: 19%; text-align: right; }
.stk-t td { padding: 10px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; line-height: 1.35; }
.stk-t tr:last-child td { border-bottom: 0; }
.stk-t td b { font-size: 15px; display: block; }
.stk-t td small { display: block; font-size: 12.5px; color: var(--muted); }
.stk-t .stk-no { min-height: 0; padding: 6px 0; font-size: 16px; text-align: center; display: block; }
.stk-t .stk-left { text-align: right; } .stk-t .stk-left b { font-size: 20px; }
.stk-t td.red-t small { color: inherit; }
.stk-t tr.low td { background: #FFF5F4; }
.stk-t tr[hidden] { display: none; }
.low-box .low-list li > span, .low-box .low-list li > b { display: inline; }
.stk-t tr.stk-row { display: table-row; padding: 0; } .stk-t td.stk-left { display: table-cell; } .stk-t tr.stk-row[hidden] { display: none; } .stk-t .stk-no { display: block; }
.ex-circle { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #E5332A; color: #E5332A; font-weight: 900; font-size: 22px; line-height: 1; background: #fff; }
.alert .ic .ex-circle { flex: none; width: 34px; height: 34px; min-width: 34px; color: #E5332A !important; -webkit-text-fill-color: #E5332A; background: #fff; font-family: inherit; font-size: 22px; font-weight: 900; line-height: 1; padding: 0; text-shadow: none; filter: none; }
.alert .ic .ex-svg { display: block; flex: none; }

/* สรุปก่อนพบแพทย์: ไอคอน ข้อความ ลูกศร อยู่กึ่งกลางกรอบแนวตั้ง */
.rp-prev > summary { display: flex; align-items: center; gap: 10px; line-height: 1.3; min-height: 56px; }
.rp-prev > summary .rp-ic { vertical-align: middle; margin: 0; flex: none; }
.rp-prev > summary::after { float: none; margin-left: auto; font-size: 16px; line-height: 1; }

/* สรุปก่อนพบแพทย์: ไอคอน+ข้อความอยู่กึ่งกลางกรอบ ลูกศรชิดขวา */
.rp-prev > summary { position: relative; justify-content: center; text-align: center; padding-left: 40px; padding-right: 40px; }
.rp-prev > summary::after { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); margin: 0; }

/* ชื่อยาในตารางหน้าแอป/PDF: ยาที่ทานเฉพาะเมื่อมีอาการ + ฟอนต์ PDF ที่อ่านง่าย */
.dtable .asn, .lg-name .asn { display: block; font-size: 10.5px; font-weight: 500; color: #B0407E; line-height: 1.2; }
.lg-name .asn { display: inline; font-size: 12px; }
@media print {
  .pr-nm { font-family: Sarabun, 'TH Sarabun New', 'Leelawadee UI', Tahoma, sans-serif; font-size: 9.5pt; font-weight: 400; color: #111; letter-spacing: 0; }
  .pr-as { margin-top: 1px; font-family: Sarabun, 'TH Sarabun New', sans-serif; font-size: 8pt; font-weight: 500; color: #B0407E; line-height: 1.2; }
}
.tag.pn-tag { background: #FCE4F1; color: #A0306F; }

/* v1.16 แก้ตามภาพจากผู้ใช้ */
.ordwrap { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.cap { display: block; font-size: 12px; color: var(--muted, #6B7090); font-weight: 600; margin-bottom: 1px; }
.ordwrap .cap { margin: 0; }
.med .med-upd { font-size: 12px; color: var(--muted, #6B7090); text-align: right; margin-top: 12px; }
.tel-btn { margin-right: 8px; padding: 4px 12px !important; }
.kv .tel-num { margin-right: 0; }
.ev-in { width: 76px; min-height: 48px; text-align: center; margin: 0 6px; display: inline-block; vertical-align: middle; }
.dose-quick button { min-width: 56px; }
.sl-b { font-weight: 800; }
@media print { .pr-star { display: inline-block; font-size: 11pt; font-weight: 700; color: #B0407E; background: #FDE7F1; border: 1.2pt solid #B0407E; border-radius: 4pt; padding: 3pt 8pt; margin-top: 6pt; } }@media print {
  .pr-list tr.wr td:not(.no) { background: transparent !important; }
  .pr-list .pr-r, .pr-list .pr-r.pr-hint, .pr-list .pr-r.pr-warn { font-size: 13pt !important; line-height: 1.4; font-weight: 600; }
  .pr-leg { display: block; margin-top: 3px; font-size: 9pt; font-weight: 600; color: #333; }
  .pr-leg i { display: inline-block; width: 9pt; height: 9pt; border: .6pt solid #777; vertical-align: -1pt; margin: 0 2pt 0 4pt; }
  .pr-leg i.y { background: #FFF3B0; } .pr-leg i.p { background: #FDE7F1; }
  .pr-note .pr-star { font-size: 13pt; }
}
.set-det .two .f > span { font-weight: 400; } .set-det .two .f > span .sl-b { font-weight: 800; }

.dt-head .dt-pdf { margin-left: auto; flex: none; white-space: nowrap; padding: 8px 12px; background: #fff; }

/* สรุปก่อนพบแพทย์ ชิดซ้าย + ปุ่มไฟล์ PDF อยู่ในแถวหัวกรอบเดียวกันเสมอ (ทั้งตอนปิดและตอนกางสรุป) */
.report-box { position: relative; }
.report-box .rp-prev { margin-top: 0; }
.report-box .rp-prev > summary { justify-content: flex-start; text-align: left; padding-left: 12px; padding-right: 128px; gap: 8px; font-size: 18px; font-weight: 700; }
.report-box .rp-prev > summary .rp-ic { width: 24px; height: 24px; }
.report-box .rp-prev > summary::after { right: 108px; }
.report-box .rp-dl { position: absolute; top: 2.5px; right: 2.5px; height: 56px; margin: 0; padding: 0 10px; font-size: 15px; border-radius: 15px; white-space: nowrap; display: inline-flex; align-items: center; z-index: 1; }
.report-box > p { margin-top: 6px; }
.kv .tel-btn, .tel-btn { background: transparent !important; color: inherit; box-shadow: none; padding: 0 !important; margin-right: 8px; font-size: 24px; line-height: 1; }

.every-box .lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.every-box input.ev-in, .f input.ev-in { width: 72px !important; min-width: 0; flex: none; margin: 0; padding-inline: 6px; text-align: center; }
.every-box input.ev-in::-webkit-inner-spin-button { display: none; }

.stock-every { align-items: start; gap: 10px; }
.stock-every .every-box { margin: 0; padding: 10px; }
.stock-every .every-box .lbl { font-size: 15px; gap: 6px; }
.stock-every input.ev-in { width: 56px !important; min-height: 44px; }
.stock-every .every-row { margin: 6px 0 0; } .stock-every .every-row .btn { white-space: normal; padding: 8px 10px; font-size: 15px; line-height: 1.25; }

.note-box { background: #F3F4FF; border: 1.5px solid #D5D9FF; border-radius: 16px; padding: 10px 12px; }
.note-box textarea { background: #fff; }
.switch-row.asn-box { background: #FDE7F1; border: 1.5px solid #F2B6D2; border-radius: 16px; padding: 12px 14px; }
.every-box { margin-top: 4px; }

.slot-box { background: #F3F4FF; border: 1.5px solid #D5D9FF; border-radius: 16px; padding: 12px; }
.slot-box .slot-pick { background: #fff; }

.switch-row.wd-sw { background: #F6EEFF; border: 1.5px solid #E2CBFA; border-radius: 16px; padding: 12px 14px; }
.switch-row.wd-sw > span:first-child, .switch-row.asn-box > span:first-child { font-size: 16px; font-weight: 500; color: var(--muted); }
.switch-row.wd-sw small, .switch-row.asn-box small { font-size: 14px; font-weight: 400; }

.switch-row.wd-sw, .switch-row.asn-box { margin-bottom: 16px; }
.wd-box { margin-bottom: 16px; }

.dose-row2 { align-items: start; gap: 10px; }
.dose-row2 > .f:first-child { margin-bottom: 0; } .dose-row2 .dose-quick { margin-top: 0; }
.stock-box { background: #EEF9D6; border: 1.5px solid #CFE79A; border-radius: 16px; padding: 10px 12px; margin-bottom: 16px; }
.stock-box > span { font-size: 15px; }
.stock-box input { background: #fff; }

.dose-row2 .dose-quick { gap: 6px; flex-wrap: nowrap; } .dose-row2 .dose-quick button { min-width: 0; flex: 1 1 0; padding: 0 4px; }

.warn-box { background: #FFF1F0; border: 2px solid #E5675F; border-radius: 16px; padding: 10px 12px; }
.warn-box > span { color: #B3261E; font-weight: 600; }
.warn-box textarea { background: #fff; border-color: #F6C1BB; }

.sw-pair { align-items: stretch; gap: 10px; margin-bottom: 16px; }
.sw-pair .switch-row { margin-bottom: 0; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; }
.sw-pair .switch-row > span:first-child { font-size: 15px; }
.sw-pair .switch-row small { font-size: 12.5px; }

.warn-box { background: linear-gradient(165deg, #F0605A 0%, #D63B35 100%); border: 0; box-shadow: 0 6px 14px rgba(214, 59, 53, .32), inset 0 1px 0 rgba(255, 255, 255, .3); }
.warn-box > span { color: #fff; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.warn-box textarea { background: #fff; border-color: #fff; }

.warn-box { background: linear-gradient(165deg, #FFD9D5 0%, #FFB5AE 100%); border: 1.5px solid #F59A93; box-shadow: 0 4px 12px rgba(224, 69, 63, .18), inset 0 1px 0 #fff; }
.warn-box > span { color: #8E1F19; text-shadow: none; }
.warn-box textarea { border-color: #F6C1BB; }

.dose-row2 .every-box { margin: 10px 0 0; padding: 10px; }
.dose-row2 .every-box .lbl { font-size: 15px; gap: 6px; }
.dose-row2 input.ev-in { width: 56px !important; min-height: 44px; }
.dose-row2 .every-row { margin: 6px 0 0; } .dose-row2 .every-row .btn { white-space: normal; padding: 8px 10px; font-size: 15px; line-height: 1.25; }

#evNote { display: block; white-space: pre-line; line-height: 1.6; margin-top: 6px; }

details.every-box > summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--muted); list-style: none; }
details.every-box > summary::-webkit-details-marker { display: none; }
details.every-box > summary::after { content: '▾'; float: right; }
details.every-box[open] > summary::after { content: '▴'; }
details.every-box .every-in { margin-top: 8px; }
details.every-box .lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; }

details.every-box > summary { position: relative; text-align: center; padding: 4px 22px; }
details.every-box > summary::after { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); float: none; }

details.every-box .every-in { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
details.every-box .lbl { justify-content: center; }
details.every-box select { width: auto; min-width: 70px; min-height: 44px; }
details.every-box #evNote { text-align: center; }

details.every-box .lbl { flex-wrap: nowrap; gap: 4px; font-size: 14px; white-space: nowrap; }
details.every-box select { -webkit-appearance: none; appearance: none; background-image: none; width: 46px !important; min-width: 0 !important; min-height: 40px; padding: 4px !important; text-align: center; text-align-last: center; font-size: 16px; }
details.every-box input.ev-in { width: 46px !important; min-height: 40px; font-size: 16px; }
details.every-box .lbl b { font-size: 16px; }

details.every-box #evNote { display: block; width: fit-content; max-width: 100%; text-align: left; margin: 0 auto; }

.slot-box > .lbl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.slot-box .slot-hint { font-size: 13px; font-weight: 400; color: var(--muted); }

.ordwrap { width: 48px; }
.med-head { display: flex; gap: 10px; padding: 0 16px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted, #6B7090); }
.med-head span:first-child { width: 48px; text-align: center; flex: none; }

.med-group { background: #F3F4FF; border: 1.5px solid #D5D9FF; border-radius: 22px; padding: 12px 10px 4px; margin-bottom: 14px; }
.med-group .med-head { margin-bottom: 8px; }

.med-more-btn { margin: 6px 0 2px; padding: 6px 12px; border: 1.5px solid #D5D9FF; background: #fff; color: var(--brand, #4D55F5); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.med-more { margin-top: 4px; }

/* ยาที่กำลังทาน = ตารางเรียงลงมา กดแถวเพื่อดูข้อมูลเพิ่มเติม */
.mtable { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #E3E6FF; }
.mrow + .mrow { border-top: 1px solid #E3E6FF; }
.mr-main { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 12px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mr-no { width: 48px; flex: none; display: flex; justify-content: center; }
.mr-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mr-nm .name { font-size: 18px; font-weight: 700; }
.mr-nm .tags { margin: 0; } .mr-nm small { font-size: 14px; }
.mr-chev { flex: none; color: var(--brand, #4D55F5); font-size: 16px; padding-top: 4px; }
.mrow.open { background: #F8F9FF; }
.mr-more { padding: 0 14px 12px 70px; }
.mr-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px dashed #DDE0F7; font-size: 15px; }
.mr-kv > span { color: var(--muted, #6B7090); flex: none; } .mr-kv > b { text-align: right; font-weight: 600; }
.mr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.mr-foot .med-upd { margin: 0; text-align: left; }
.med-group .med-head { padding: 0 12px; }
.mr-foot .med-upd { font-size: 12px; color: var(--muted, #6B7090); }
.mr-kv b small { font-weight: 400; font-size: 13px; }

.tag.dose-tag { background: #EEF9D6; color: var(--ink, #1B1F4B); }

/* ตั้งค่า > กำหนดช่วงเวลาทานยา: ช่องเวลาขนาดพอดี อยู่แถวเดียวกับชื่อช่วง */
.set-det .two { gap: 6px; padding: 4px 2px; }
.set-det .two .f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 4px; border-top: 1px solid var(--line, #E6E8F5); }
.set-det .two .f:first-child { border-top: 0; }
.set-det .two .f > span { margin: 0; font-size: 16px; flex: 1; min-width: 0; }
.set-det .t24 { display: flex; align-items: center; gap: 6px; flex: none; }
.set-det .t24 select { width: 64px !important; min-width: 0 !important; min-height: 44px; padding: 6px 4px !important; text-align: center; text-align-last: center; font-size: 17px; -webkit-appearance: none; appearance: none; background-image: none; }
.set-det .t24 b { font-size: 18px; } .set-det .t24 small { font-size: 14px; margin-left: 2px; }
/* ตารางกินยา PDF: เหลือง = ข้อควรระวัง · ชมพู = กินเฉพาะเมื่อมีอาการ (ตรงกับในแอปและคำอธิบายหัวกระดาษ) */
@media print { .pr-grid td.wr { background: #FFF3B0 !important; } .pr-grid td.pn { background: #FDE7F1 !important; } }

.purpose-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.purpose-row > label.f { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.opq-box { flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px; border: 1.5px solid #D5D9FF; border-radius: 14px; background: #F3F4FF; font-size: 14px; font-weight: 600; max-width: 42%; line-height: 1.25; cursor: pointer; }
.opq-box input { width: 22px; height: 22px; flex: none; accent-color: var(--brand, #4D55F5); }

.name-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.name-row > label.f { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.st-chip { flex: none; min-height: 52px; padding: 6px 12px; border-radius: 14px; border: 1.5px solid #CFE79A; background: #EEF9D6; color: var(--ink, #1B1F4B); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.st-chip.st-paused { background: #FFF3B0; border-color: #EBD66B; } .st-chip.st-stopped { background: #FFE1DE; border-color: #F2A9A3; }
.st-panel { background: #F3F4FF; border: 1.5px solid #D5D9FF; border-radius: 16px; padding: 10px 12px; }
.st-panel { margin-bottom: 16px; } .st-panel[hidden] { display: none; }

.slot-box { background: #FFF4D6; border: 1.5px solid #F0D488; }
.slot-box .slot-pick { border-color: #EBD28A; }

.st-panel.pn-active { background: #EEF9D6; border-color: #CFE79A; }
.st-panel.pn-paused { background: #FFF3B0; border-color: #EBD66B; }
.st-panel.pn-stopped { background: #FFE1DE; border-color: #F2A9A3; }

.tool-pair { display: flex; align-items: stretch; gap: 8px; margin: 0 0 10px; }
.tool-pair > .btn { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.25; padding: 8px 10px; font-size: 15px; }
.tool-pair > .lock-toggle { flex: 1 1 0; width: auto; min-width: 0; margin: 0; min-height: 0; padding: 8px 10px; gap: 8px; }
.tool-pair .lock-toggle .lt-ic { font-size: 22px; } .tool-pair .lock-toggle .lt-tx b { font-size: 15px; } .tool-pair .lock-toggle .lt-tx small { font-size: 12px; }

.tool-pair .lock-toggle .lt-ic { font-size: 40px; line-height: 1; }
.tool-pair > .lock-toggle { gap: 10px; }

/* รหัสยาในไฟล์ PDF ใช้ฟอนต์ Prompt */
.pr-no, .pr-list td.no { font-family: Prompt, Sarabun, sans-serif !important; letter-spacing: 0; }

/* ตั้งค่า > การแจ้งเตือน: หมวดแจ้งเตือน (พับเก็บ) */
.nt-cats { margin: 10px 0 12px; border: 1px solid #E3E6FF; border-radius: 16px; background: #fff; overflow: hidden; }
.nt-cat + .nt-cat { border-top: 1px solid #E3E6FF; }
.nt-cat > summary { padding: 12px 14px; }
.nt-body { padding: 0 14px 12px; }
.nt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dashed #DDE0F7; }
.nt-row:first-child { border-top: 0; }
.nt-who { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .nt-who b { font-size: 16px; } .nt-who small { font-size: 13px; }
.nt-person + .nt-person { border-top: 1px solid #E3E6FF; margin-top: 6px; padding-top: 4px; }
.nt-sub { margin: 0 0 6px 4px; } .nt-sub > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--brand, #4D55F5); padding: 4px 0; }
.nt-med { padding: 6px 0; border-top: 1px dashed #E6E8F5; } .nt-mn { font-size: 15px; margin-bottom: 4px; }
.nt-slots { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.nt-slot { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.nt-none { margin: 0 0 6px 4px; }
.stk-mode { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; padding: 12px; }
.stk-mode > label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.stk-mode input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--brand, #4D55F5); }
.stk-mode label > span { display: flex; flex-direction: column; gap: 2px; } .stk-mode small { font-size: 13px; }

.nt-days { padding: 6px 0 10px; border-bottom: 1px dashed #DDE0F7; margin-bottom: 4px; } .nt-days > b { font-size: 15px; display: block; margin-bottom: 8px; } .nt-days small { display: block; margin-top: 8px; font-size: 13px; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-chip { position: relative; } .nt-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.nt-chip span { display: inline-block; padding: 8px 14px; border: 1.5px solid #D5D9FF; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; }
.nt-chip input:checked + span { background: var(--brand, #4D55F5); border-color: var(--brand, #4D55F5); color: #fff; }
/* สติกเกอร์: เลือกขนาดด้วยปุ่มติ๊กวงกลม (ขนาดละ 1 แผ่น) */
.stk-tick { position: relative; flex: none; width: 36px; height: 36px; cursor: pointer; }
.stk-tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.stk-tick i { display: block; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #C4C8F2; background: #fff; box-sizing: border-box; }
.stk-tick input:checked + i { background: var(--brand, #4D55F5); border-color: var(--brand, #4D55F5); }
.stk-tick input:checked + i::after { content: ''; display: block; width: 10px; height: 18px; margin: 4px 0 0 11px; border: solid #fff; border-width: 0 3.5px 3.5px 0; transform: rotate(45deg); box-sizing: border-box; }
.stk-mode .stk-opt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stk-mode .stk-opt-head b { font-size: 17px; } .stk-mode .stk-opt-head small { font-size: 12px; }
.stk-mode.off > label:not(.stk-tick) { opacity: .4; pointer-events: none; }

/* กล่อง "ยาใกล้หมด" ในหน้าจำนวนยาที่เหลือ: ประโยคเล็ก + ตารางรหัส / ชื่อยา / ตอนนี้เหลือ */
.low-box .low-sub { display: block; font-size: 13px; color: #6B2A25; margin-top: 2px; }
.low-t { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14.5px; background: rgba(255, 255, 255, .7); border-radius: 10px; overflow: hidden; }
.low-t th { text-align: left; font-size: 12.5px; font-weight: 600; color: #6B2A25; padding: 6px 8px; background: rgba(229, 51, 42, .10); }
.low-t td { padding: 7px 8px; border-top: 1px solid rgba(229, 51, 42, .18); vertical-align: top; }
.low-t td:first-child { white-space: nowrap; width: 1%; } .low-t th:last-child, .low-t td:last-child { text-align: right; white-space: nowrap; }
.low-t td b, .low-t th b { display: inline !important; }
.low-box .low-t { width: calc(100% + 0px); }

.nt-low { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.nt-low input { width: 84px; min-height: 48px; text-align: center; font-size: 20px; font-weight: 700; padding: 6px; }
.nt-low span { font-size: 16px; } .nt-low .stk-b { width: 48px; height: 48px; font-size: 24px; font-weight: 700; border-radius: 14px; border: 2px solid var(--brand, #4D55F5); background: #fff; color: var(--brand, #4D55F5); cursor: pointer; }
.nt-chip-b { padding: 8px 14px; border: 1.5px solid #D5D9FF; border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.nt-chip-b.on { background: var(--brand, #4D55F5); border-color: var(--brand, #4D55F5); color: #fff; }
.nt-tl { display: block; margin: 14px 0 6px; font-size: 15px; }
.nt-time { display: flex; align-items: center; gap: 6px; }
.nt-time select { width: 64px; min-height: 44px; text-align: center; text-align-last: center; padding: 6px 4px; font-size: 17px; }
.nt-time b { font-size: 18px; margin: 0; } .nt-time small { font-size: 14px; }

.pw-eye { color: #6B7090; display: grid; place-items: center; padding: 0; } .pw-eye svg { display: block; } .pw-eye:active, .pw-eye[aria-pressed="true"] { color: var(--brand, #4D55F5); }

.login-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.login-links .linkbtn { margin: 0; }

.login-links .linkbtn { padding-left: 0; padding-right: 0; min-width: 0; }
.login-links .linkbtn:first-child { text-align: left; } .login-links .linkbtn:last-child { text-align: right; margin-left: auto; }

/* ตั้งค่า > การแจ้งเตือน แบบเป็นขั้น + คำอธิบายสั้น */
.nt-step { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.nt-step > div { display: flex; flex-direction: column; line-height: 1.3; } .nt-step b { font-size: 17px; } .nt-step small { font-size: 14px; }
.nt-no { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand, #4D55F5); color: #fff; font-weight: 800; display: grid; place-items: center; }
.nt-desc { margin: 0 0 8px; line-height: 1.5; }
.nt-note { margin: 12px 0 4px; padding: 10px 12px; border-radius: 14px; background: #F3F4FF; border: 1.5px solid #D5D9FF; font-size: 14px; line-height: 1.5; } .nt-note b { display: block; font-size: 15px; margin-bottom: 2px; }
/* สมาชิก: แยก "ของฉัน" / "แชร์มาให้ฉัน" */
.mb-sec { margin: 18px 0 8px; font-size: 18px; }
.member-row.is-shared { background: #F7F0FF; border: 1.5px dashed #D3B5F5; }
.member-row .mr-share { margin-bottom: 4px; } .member-row .mr-share .share-tag { font-size: 13px; }
.grp-input { display: flex; align-items: stretch; border: 1.5px solid #DCDFF5; border-radius: 14px; background: #F5F4F1; overflow: hidden; } .grp-input b { display: flex; align-items: center; padding: 0 4px 0 14px; font-size: 17px; color: var(--brand, #4D55F5); } .grp-input input { border: 0; background: transparent; box-shadow: none; flex: 1; min-width: 0; padding-left: 4px; }

.member-row { text-align: left; } .member-row .info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.member-row .mr-share { margin: 6px 0 0; text-align: left; }

/* รูปที่ยังไม่มี/โหลดไม่ได้ = ไอคอนกล้อง + คำอธิบายสั้น (ไม่โชว์ alt เป็นตัวหนังสือ) */
img[data-path]:not([src]) { visibility: hidden; }
.img-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; min-height: 64px; color: #8A8FB8; text-align: center; line-height: 1.15; }
.img-ph small { font-size: 11px; }
.thumb.nopic { background: #F1F2FA; border: 1.5px dashed #CDD1EE; border-radius: 12px; }

/* v1.17 ปรับข้อความ/ไอคอนตามรายการ */
.plan-sum { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 12px; padding: 10px 12px; border-radius: 14px; background: #F3F4FF; border: 1.5px solid #D5D9FF; } .plan-sum b { font-size: 16px; } .plan-sum span { font-size: 15px; font-weight: 600; color: var(--brand, #4D55F5); } .plan-sum small { font-size: 12.5px; color: var(--muted, #6B7090); }
.tile-star { font-size: 14px; margin-left: 4px; vertical-align: 1px; }
.lock-toggle .lt-ic { color: currentColor; display: grid; place-items: center; font-size: 0; } .lock-toggle .lt-ic svg { width: 36px; height: 36px; }
.lock-toggle .lt-st i { font-style: normal; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .75); }
.lock-toggle.on .lt-st i { color: #1E7B2E; } .lock-toggle.off .lt-st i { color: #8A4B00; }
/* รหัสยาในแอป (ไม่รวม PDF): ใช้ฟอนต์ Sarabun ตัวหนา อักษรไทยนำ เช่น พ ด อ่านไม่สับสนกับตัวอักษรอังกฤษ + กล่องขยายตามความยาวรหัส */
.ordnum { font-family: Sarabun, 'Leelawadee UI', sans-serif; font-weight: 700; font-size: 20px; line-height: 1; width: auto; min-width: 34px; height: 34px; padding: 0 5px; white-space: nowrap; box-sizing: border-box; }
.dtable .onum, .dtable .onum .pfx { font-family: Sarabun, 'Leelawadee UI', sans-serif; font-weight: 700; }
.dtable .onum { font-size: 36px; }

/* PDF ตารางรหัสยา + รายการยา (ตัวหนังสือจริงจากหน้าพิมพ์) — ใช้เฉพาะ .mp-* แยกจากสไตล์ .pr-* เดิมของสรุปการกินยา */
@media print {
  .mp-root, .mp-root * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mp-root { font-family: Sarabun, 'TH Sarabun New', sans-serif; font-size: 11pt; line-height: 1.3; color: #111; letter-spacing: 0; word-spacing: 0; text-align: left;
    font-feature-settings: "ccmp" 0; /* ให้วรรณยุกต์/สระบนแต่ละตัวเป็นอักขระเดิมในไฟล์ PDF — ก๊อปข้อความแล้วไม่หายเป็นช่องว่าง/อักขระว่าง (ภาพที่เห็นเหมือนเดิม) */ }
  .mp-sec { break-after: page; } .mp-sec:last-of-type { break-after: auto; }
  .mp-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .mp-t thead { display: table-header-group; }
  .mp-t tr { break-inside: avoid; page-break-inside: avoid; }
  .mp-t th, .mp-t td { border: .3mm solid #333; }
  .mp-t .mp-ttl > td { border: 0; padding: 0 0 2.5mm; }
  .mp-t tfoot { display: table-footer-group; } .mp-t .mp-sp > td { border: 0; padding: 0; height: 6mm; } /* กันที่ท้ายหน้าไว้ให้ท้ายกระดาษ */
  .mp-foot { position: fixed; left: 0; right: 0; bottom: 0; padding-top: 1mm; border-top: .2mm solid #999; background: #fff; font-size: 8pt; font-weight: 500; line-height: 1.3; color: #333; }
  .mp-top { display: flex; justify-content: space-between; align-items: center; gap: 4mm; border-bottom: 1.2mm solid var(--pcd, #4D55F5); padding-bottom: 2mm; }
  .mp-top h1 { margin: 0; font-size: 20pt; font-weight: 700; color: #000; line-height: 1.25; }
  .mp-boxes { display: flex; align-items: stretch; font-size: 10.5pt; flex: none; }
  .mp-boxes span { border: .3mm solid #666; padding: 1.2mm 3mm; } .mp-boxes span + span { border-left: 0; }
  .mp-red { color: #C62828; }
  .mp-leg { display: block; margin-top: .6mm; font-size: 9pt; font-weight: 600; color: #333; }
  .mp-leg i { display: inline-block; width: 3mm; height: 3mm; border: .2mm solid #777; vertical-align: -.5mm; margin: 0 1mm 0 2mm; }
  .mp-leg i.y { background: #FFF3B0; } .mp-leg i.p { background: #FDE7F1; }
  /* ตารางรหัสยา */
  .mp-grid th { padding: 2mm 1mm; font-size: 12.5pt; font-weight: 700; line-height: 1.3; text-align: center; background: var(--pcs, #fff); color: #000; }
  .mp-grid th.aft { background: var(--pcl, #6FC9FF); }
  .mp-grid th u { text-decoration-thickness: .4mm; text-underline-offset: 1mm; }
  .mp-grid th small { display: block; font-size: 9.5pt; font-weight: 600; color: #222; }
  .mp-grid td { padding: 2mm 1.5mm; text-align: center; vertical-align: middle; }
  .mp-grid td.wr { background: #FFF3B0; } .mp-grid td.pn { background: #FDE7F1; }
  .mp-grid td.mp-e { background: #fff; }
  .mp-main { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.5mm; }
  /* กล่องรหัสยา = หน้าตาเดียวกับ .ordnum ในแอป (Sarabun ตัวหนา พื้นสีประจำตัว มุมโค้ง) */
  .mp-cb { display: inline-block; padding: 0; background: none; color: #000; font-family: Sarabun, 'TH Sarabun New', sans-serif; font-weight: 700; font-size: 18pt; line-height: 1.15; white-space: nowrap; }
  .mp-st { font-size: 16pt; font-weight: 700; color: #B0407E; line-height: 1; }
  .mp-dz { color: #C62828; font-weight: 700; font-size: 10.5pt; white-space: nowrap; }
    .mp-main   .mp-nm { margin-top: 1mm; font-size: 12.5pt; font-weight: 600; line-height: 1.25; color: #111; overflow-wrap: break-word; }
  .mp-as { margin-top: .4mm; font-size: 9.5pt; font-weight: 600; color: #B0407E; line-height: 1.2; }
  .mp-w { margin-top: 1mm; font-size: 9.5pt; font-weight: 600; line-height: 1.25; color: #C62828; overflow-wrap: break-word; }
  .mp-w i, .mp-r.is-warn i { display: inline-block; width: 2mm; height: 2mm; border-radius: 50%; background: #C62828; margin-right: 1mm; vertical-align: .1mm; }
  .mp-h { margin-top: 1mm; font-size: 9pt; line-height: 1.25; color: #555; overflow-wrap: break-word; }
  .mp-loose { margin: 3mm 0 0; font-size: 10pt; color: #444; }
  .mp-loose .mp-cb { font-size: 12pt; margin-left: 1mm; }
  /* รายการยา */
  .mp-list th { padding: 2mm; font-size: 12.5pt; font-weight: 700; text-align: left; background: var(--pcl, #6FC9FF); color: #000; }
  .mp-list th:first-child { text-align: center; }
  .mp-list td { padding: 1.8mm 2mm; vertical-align: top; font-size: 11.5pt; line-height: 1.35; overflow-wrap: break-word; }
  .mp-list td.mp-no { text-align: center; vertical-align: top; background: #fff; }
  .mp-list td.mp-name { font-size: 12.5pt; font-weight: 600; color: #000; }
  .mp-r { display: block; margin: 0 0 .8mm; }
  .mp-r:last-child { margin-bottom: 0; }
  .mp-r.is-warn { color: #C62828; font-weight: 600; }
  .mp-r.is-grey { color: #555; }
}

/* ปุ่มคู่ "สติกเกอร์ / ป้องกันลบ": หน้าตาเดียวกัน สูงเท่ากัน ไอคอนซ้าย ข้อความชิดซ้ายเหมือนกัน น้ำหนักซ้าย-ขวาสมดุล */
.tool-pair > .btn, .tool-pair > .lock-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; min-height: 72px; padding: 10px 12px; border-radius: 16px; border-width: 1.5px; }
.tool-pair > .btn { border: 1.5px solid #D5D9FF; background: #fff; }
.tool-pair .tp-ic { flex: none; width: 36px; text-align: center; font-size: 30px; line-height: 1; }
.tool-pair .tp-tx { font-size: 15px; font-weight: 700; line-height: 1.3; color: #1B1F4D; }
.tool-pair .lock-toggle .lt-ic { width: 36px; flex: none; }
.tool-pair .lock-toggle .lt-tx b { font-size: 15px; line-height: 1.3; }
.tool-pair .lock-toggle .lt-st { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 3px; font-size: 12.5px; }
.tool-pair .lock-toggle .lt-st i { padding: 0 8px; }
.tool-pair .tp-tx, .tool-pair .lock-toggle .lt-tx b { text-wrap: balance; }

/* ช่อง "กรอกหลังพบแพทย์" ในฟอร์มนัดหมอ: กรอบพื้นหลังแยกจากช่องที่กรอกก่อนพบแพทย์ */
.post-visit { background: #EEF0FF; border: 1.5px solid #D5D9FF; border-radius: 16px; padding: 12px 12px 4px; margin: 4px 0 14px; }
.post-visit .f { margin-bottom: 8px; }
.post-visit textarea { background: #fff; }

/* v1.3 — โควตา Free/Premium + โครงสร้างโปรไฟล์ */
.tool-pair .tp-tx small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: #6B6E82; line-height: 1.3; }
.lim-btns { flex-direction: column; align-items: stretch; }
.lim-btns .btn { width: 100%; }
.ap-pick { max-height: 80vh; overflow: auto; }
.ap-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; text-align: left; }
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #F6F5F1; border-radius: 12px; padding: 8px 10px; }
.ap-row small { display: block; color: #5A6080; font-size: 12.5px; }
.plan-invited { margin-top: 12px; background: #EEF0FF; border: 1.5px solid #D5D9FF; }
.plan-invited h4 { margin: 0 0 6px; }
.plan-inv { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; }
/* หน้าการแจ้งเตือน: ป้ายใต้ชื่อโปรไฟล์ที่แชร์มา · วิธีเปิดสิทธิ์เมื่อถูกบล็อก · ปุ่มทดลองส่งเป็นสีรองกันกดผิด */
.nt-nm { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nt-nm small { font-size: 12.5px; }
.nt-help { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: #FFF4DB; border: 1.5px solid #F1D79A; font-size: 14px; line-height: 1.5; }
.nt-help b { color: #7A4A00; } .nt-help ul { margin: 4px 0 0; padding-left: 18px; }
.btn.nt-test { margin-top: 14px; font-size: 14px; color: #5A6080; border-style: dashed; background: transparent; }

/* v1.3.3 — หน้าสมาชิก: การ์ดแบบเดิม (แถบสีตามสีประจำตัวแต่ละคน) · โปรไฟล์ของฉันใหญ่เด่นกว่า · หัวข้อแบ่งกลุ่ม */
.rs { margin: 8px 0 18px; }
.rs > .card { margin-bottom: 10px; }
.rs-h { display: flex; align-items: center; gap: 7px; margin: 20px 0 8px; font-size: 16px; font-weight: 800; }
.rs-h:first-child { margin-top: 4px; }
.rs-h i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.rs-h.o { color: #9A5B00; } .rs-h.o i { background: #FFB347; }
.rs-h.g { color: #1E7B4A; } .rs-h.g i { background: #2FB26B; }
.rs-h.v { color: #5B4A99; } .rs-h.v i { background: #8A6FD6; }
.rs-h.s { color: #3F4A6B; margin-top: 24px; } .rs-h.s i { background: #6B7BA8; }
.member-row.mr-big { padding: 28px 16px; gap: 18px; background: #FFF8EC; border-left-width: 12px; box-shadow: 0 4px 14px rgba(120, 80, 0, .14); }
.member-row.mr-big .av { width: 100px; height: 100px; }
.member-row.mr-big .mr-name { font-size: 26px; }
.member-row.mr-big .small { font-size: 15px; }
.rs-add { display: block; width: 100%; margin: 10px 0 2px; padding: 11px 12px; border-radius: 14px; background: transparent; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.rs-add small { display: block; font-size: 12.5px; font-weight: 600; opacity: .8; }
.rs-add.g { border: 2px dashed #2FB26B; color: #1E7B4A; }
.rs-add.o { border: 2px dashed #FFB347; color: #7A4A00; padding: 18px 12px; }
.rs-add.v { border: 2px dashed #8A6FD6; color: #5B4A99; margin-top: 14px; font-size: 14px; padding: 9px 12px; }
/* การ์ดหมวดอื่น (คนที่ฉันดูแล / แชร์มาให้) เล็กกว่าโปรไฟล์ของฉัน เพื่อให้โปรไฟล์ของฉันเด่นกว่า */
body:not(.auth) .rs .member-row:not(.mr-big) { padding: 9px 12px; gap: 12px; border-left-width: 6px; min-height: 0; }
.rs .member-row:not(.mr-big) .av { width: 46px; height: 46px; }
.rs .member-row:not(.mr-big) .mr-name { font-size: 17px; }
.rs .member-row:not(.mr-big) .small { font-size: 13px; line-height: 1.35; }
.rs .member-row:not(.mr-big) .chev { font-size: 22px; }
.rs .member-row.is-shared:not(.mr-big) { padding: 7px 12px; }
.rs .member-row.is-shared:not(.mr-big) .av { width: 36px; height: 36px; }
.rs .member-row.is-shared:not(.mr-big) .mr-name { font-size: 16px; }
.rs .member-row:not(.mr-big) .mr-share .share-tag { font-size: 12px; }
.rs .member-row.is-shared:not(.mr-big) .mr-share { margin-top: 2px; } .rs .member-row.is-shared:not(.mr-big) .share-tag { padding: 2px 8px; }
/* หัวข้อหน้าสมาชิก: ไซส์และสีเดียวกันทุกหัวข้อ (ตามที่เลือก) */
.rs-h, .rs-h.o, .rs-h.g, .rs-h.v, .rs-h.s { display: block; margin: 22px 0 8px; font-size: 22px; font-weight: 700; line-height: 1.3; color: #161A4D; }
.rs-h:first-child { margin-top: 4px; }
.rs-h i { display: none; }
.grp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .grp-head > b { font-size: 19px; line-height: 1.3; padding-top: 4px; min-width: 0; overflow-wrap: anywhere; } .grp-head .btn { flex: none; margin: 0; }
.rs .card.circle .grp-head { margin-bottom: 0; } .rs .card.circle .grp-sub { margin: -6px 0 10px; line-height: 1.3; } .rs .card.circle .grp-sub:empty { display: none; }
.rs .card.circle.shared { padding-bottom: 16px; } .rs .card.circle.shared .grp-sub { margin: -2px 0 0; } .rs .card.circle > b + .grp-sub { margin: 2px 0 10px; }

/* ===== v1.3.4 มาตรฐานตัวอักษร (ขนาด · ความหนา · ระยะบรรทัด) — ใช้ตัวแปรชุดเดียวทั้งแอป ===== */
:root {
  --fs-h1: 28px; --fs-h2: 22px; --fs-title: 18px; --fs-body: 17px; --fs-btn: 16px; --fs-sub: 15px; --fs-cap: 13px;
  --fw-regular: 400; --fw-semi: 600; --fw-bold: 700;
  --lh-head: 1.25; --lh-title: 1.3; --lh-sub: 1.4; --lh-body: 1.5; --lh-tight: 1.1;
}
body:not(.auth) h1:not(.gem-text) { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-head); }
body:not(.auth) h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-title); }
body:not(.auth) h3 { font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-title); }
body:not(.auth) h4 { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-title); }
body:not(.auth) .today-h { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-title); }
body:not(.auth) .rs-h { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-title); }
/* ชื่อในการ์ด */
body:not(.auth) .mr-name, body:not(.auth) .rc-name, body:not(.auth) .grp-head > b, body:not(.auth) .card.circle > b { font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-title); }
body:not(.auth) .member-row.mr-big .mr-name { font-size: 26px; line-height: var(--lh-head); }
/* ข้อความรอง */
body:not(.auth) .small, body:not(.auth) .rc-line, body:not(.auth) .header .sub, body:not(.auth) p.sub { font-size: var(--fs-sub); font-weight: var(--fw-regular); line-height: var(--lh-sub); }
body:not(.auth) .rs .member-row:not(.mr-big) .small, body:not(.auth) .rs .member-row.is-shared:not(.mr-big) .small { font-size: var(--fs-sub); line-height: var(--lh-sub); }
/* ป้าย / ตัวเล็ก */
body:not(.auth) .tag, body:not(.auth) .share-tag, body:not(.auth) .rs .member-row .mr-share .share-tag { font-size: var(--fs-cap); font-weight: var(--fw-semi); line-height: var(--lh-title); }
/* ปุ่ม */
body:not(.auth) .btn { font-size: var(--fs-btn); font-weight: var(--fw-bold); line-height: var(--lh-title); }
body:not(.auth) .btn.sm { font-size: var(--fs-sub); }
body:not(.auth) .rs-add, body:not(.auth) .rs-add.v, body:not(.auth) .rs-add.g, body:not(.auth) .rs-add.o { font-size: var(--fs-sub); font-weight: var(--fw-bold); line-height: var(--lh-title); }
body:not(.auth) .pill-btn { font-size: var(--fs-sub); font-weight: var(--fw-semi); }
/* ตกค้างที่ตรวจพบ → ปรับเข้ามาตรฐาน */
body:not(.auth) .tile-tx b, body:not(.auth) .h-mood { font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-title); }
body:not(.auth) .low-badge, body:not(.auth) .low-badge i { font-weight: var(--fw-bold); }
body:not(.auth) .dow { font-size: var(--fs-cap); font-weight: var(--fw-semi); }
body:not(.auth) .dn { font-weight: var(--fw-bold); }
body:not(.auth) .countdown { font-size: var(--fs-cap); font-weight: var(--fw-semi); line-height: var(--lh-title); }
body:not(.auth) small.muted, body:not(.auth) .sc-line, body:not(.auth) .set-foot, body:not(.auth) .set-foot .small { font-size: var(--fs-cap); line-height: var(--lh-sub); }

body:not(.auth) .cal-nav b { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-title); }
body:not(.auth) .sos-btn small, body:not(.auth) .hos-call small { font-size: var(--fs-sub); font-weight: var(--fw-regular); line-height: var(--lh-sub); }
body:not(.auth) .set-copy, body:not(.auth) p.small.set-copy { font-size: var(--fs-cap); line-height: var(--lh-sub); }
body:not(.auth) .rc-line, body:not(.auth) .small, body:not(.auth) .rs-m { text-wrap: pretty; }
body:not(.auth) .mr-name, body:not(.auth) h1, body:not(.auth) h2, body:not(.auth) h3 { text-wrap: balance; }

/* ระยะห่างมาตรฐาน (ขั้นเดียวกันทั้งแอป) — ใช้ตัวแปรเหล่านี้เท่านั้น */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; }
/* รายการนัดหมอ: การ์ดชิดกันขึ้น */
body:not(.auth) .card.appt { padding: var(--sp-3) 14px; margin-bottom: var(--sp-2); gap: var(--sp-3); }
body:not(.auth) .appt .info { display: flex; flex-direction: column; gap: 2px; }
body:not(.auth) .appt .info .line, body:not(.auth) .appt .info .small { line-height: var(--lh-title); margin: 0; }

/* ปฏิทิน: ตัวเลขวันที่ใช้ตัวบาง (400) · วันที่มีนัด/วันที่เลือก ใช้ 600 */
body:not(.auth) .cal .d .dn { font-weight: var(--fw-regular); }
body:not(.auth) .cal .d:has(.appt-flag) .dn, body:not(.auth) .cal .d.sel .dn, body:not(.auth) .cal .d.today .dn { font-weight: var(--fw-semi); }
/* กล่องแพ้ยาในฟอร์มยา: ชื่อยาเรียงต่อท้ายคำว่า แพ้ยา (บรรทัดเดียว ตัดบรรทัดเมื่อยาวเกิน) */
.alert .al-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.alert .al-inline > b { margin-right: var(--sp-1); }

/* การ์ดสวิตช์ในฟอร์มยา (ทานเฉพาะบางวัน / ทานยาเฉพาะเมื่อมีอาการ): หัวข้อสีเข้มตามโทนการ์ด */
body:not(.auth) .sw-pair .switch-row > span:first-child { font-size: var(--fs-btn); font-weight: var(--fw-bold); line-height: var(--lh-title); }
body:not(.auth) .sw-pair .wd-sw > span:first-child { color: #2E2268; }
body:not(.auth) .sw-pair .asn-box > span:first-child { color: #7A1744; }
body:not(.auth) .sw-pair .switch-row small { font-weight: var(--fw-regular); }


/* v1.3.8 — ฟอร์มยา: กรอบ "บันทึกเพิ่มเติม" พื้นเขียว (โทนเดียวกับกรอบหมายเหตุ/ข้อควรระวังสีแดง) */
.extra-box { background: linear-gradient(165deg, #E9FACF 0%, #C9EF9B 100%); border: 1.5px solid #9FD25E; border-radius: 16px; padding: 10px 12px; box-shadow: 0 4px 12px rgba(80, 150, 30, .16), inset 0 1px 0 #fff; }
.extra-box > span { color: #2D5F12; font-weight: var(--fw-bold, 700); }
.extra-box textarea { background: #fff; border-color: #BFE08E; }

/* v1.3.11 — ข้อควรระวังใต้ตารางกินยาเป็นตาราง 3 คอลัมน์ (รหัสยา · ชื่อยา · ข้อควรระวัง) */
.dt-warn .dt-wt { width: 100%; margin-top: 8px; border-collapse: collapse; background: #fff; font-size: 15px; line-height: 1.4; }
.dt-warn .dt-wt th, .dt-warn .dt-wt td { border: 1.5px solid var(--red-line, #F2A0AE); padding: 6px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.dt-warn .dt-wt th { background: #FFE9E6; color: var(--red-deep, #8E1F19); font-size: 13px; font-weight: 700; }
.dt-warn .dt-wt td { color: var(--ink, #161A4D); font-weight: 400; }
.dt-warn .dt-wt td.c, .dt-warn .dt-wt th:first-child { text-align: center; white-space: nowrap; }
.dt-warn .dt-wt td.c { font-weight: 700; }

/* v1.3.11 — ปุ่มในรายละเอียดยา: ได้ยามาเพิ่ม + แก้ไขยา เรียงคู่กัน */
.mr-foot .mr-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* v1.3.12 — หน้า intro (splash): ไฮไลต์เขียวมะนาวทั้งวลี "แชร์ข้อมูลดูแลครอบครัวพร้อมกัน" · ปุ่มข้อความใหม่ขึ้นบรรทัดใหม่ได้ไม่ตัดกลางคำ · ลิขสิทธิ์บรรทัดเดียวไม่มีกรอบ */
#splash .sp-slogan > span:nth-child(2) { white-space: normal; text-wrap: balance; }
#splash .sp-slogan > span b { margin-left: 0; }
#splash .sp-ask { max-width: calc(100vw - 48px); box-sizing: border-box; line-height: 1.3; text-align: center; white-space: normal; word-break: keep-all; overflow-wrap: normal; text-wrap: balance; }
#splash .sp-foot .sf-b { display: block; margin: 8px 0 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 10px; opacity: .6; }

/* v1.3.13 — น้ำหนักตัวอักษรหน้า intro (ฟอนต์ Prompt เดิม · มี 300–800 โหลดไว้จริงใน fonts/fonts.css ไม่ต้องสังเคราะห์) — ปรับที่ตัวแปรนี้ที่เดียว */
#splash { --sp-w-line1: 400; --sp-w-hi: 500; --sp-w-btn: 600; }
#splash .sp-slogan > span:nth-child(1) { font-weight: var(--sp-w-line1); }
#splash .sp-slogan > span b { font-weight: var(--sp-w-hi); }
#splash .sp-ask { font-weight: var(--sp-w-btn); }

/* v1.3.13 — บันทึกอาการ: ปุ่ม แก้ไข + ลบ อยู่ติดกันชิดขวา · ลบเป็นพื้นแดงทึบ */
.log-head .log-btns { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.log-head .log-btns .mini { margin-left: 0; }

/* v1.3.13 — การ์ดเรื่องติดตาม: ปุ่ม "บันทึกอาการเพิ่มเติม" + ปุ่ม "ลบ" เล็กพื้นแดงชิดขวา */
.care .care-actions { display: flex; gap: 8px; align-items: stretch; }
.care .care-actions .btn.block { flex: 1 1 auto; width: auto; }
.care .care-actions .care-del { flex: none; width: auto; padding-inline: 14px; }

/* v1.3.13 — ช่อง "มีกี่เม็ด" ถูกล็อกเมื่อไม่ใช่ยาทาน (แสดง "-") */
.stock-box input.locked { background: #ECEDF3; color: #6B6E82; text-align: center; cursor: not-allowed; }

/* v1.3.13 — ตารางข้อควรระวังใต้ตารางกินยา: ตารางเล็กกะทัดรัด (แถวสูงตามเนื้อหา · รหัสยา/ชื่อยาแคบ · ไม่ใช้ช่องการ์ดสูง 104px ของตารางกินยา) */
.dtable .dt-warn .dt-wt { table-layout: fixed; width: 100%; margin-top: 6px; }
.dtable .dt-warn .dt-wt th, .dtable .dt-warn .dt-wt td { height: auto; border-radius: 0; box-shadow: none; background: #fff; border: 1px solid var(--red-line, #F2A0AE); padding: 3px 6px; vertical-align: middle; font-size: 15px; line-height: 1.35; }
.dtable .dt-warn .dt-wt th { background: #FFE9E6; font-size: 13px; font-weight: 700; padding: 3px 6px; text-align: center; }
.dtable .dt-warn .dt-wt td { text-align: left; }
.dtable .dt-warn .dt-wt td.c { text-align: center; }
.dtable .dt-warn .dt-wt td:nth-child(2) { overflow-wrap: anywhere; }

/* v1.3.13 — ระบุ "ทานทุก … ชั่วโมง" แล้วซ่อนกล่องช่วงเวลา (มีปุ่มแสดง) */
.slot-box[hidden] { display: none; }
#slotToggle { align-self: flex-start; margin: 4px 0 8px; }

/* v1.3.14 — หน้าต้อนรับก่อนเข้าสู่ระบบ: ไฮไลต์ทั้งวลี + น้ำหนักตัวอักษรชุดเดียวกับหน้า intro */
.wel-screen { --sp-w-line1: 400; --sp-w-hi: 500; --sp-w-btn: 600; }
.wel-screen .sp-slogan > span:nth-child(1) { font-weight: var(--sp-w-line1); }
.wel-screen .sp-slogan > span:nth-child(2) { white-space: normal; text-wrap: balance; }
.wel-screen .sp-slogan > span b { margin-left: 0; font-weight: var(--sp-w-hi); }
.wel-screen .sp-ask { font-weight: var(--sp-w-btn); }

/* v1.3.16 — ให้แอตทริบิวต์ hidden ชนะสไตล์ปุ่ม/กล่อง (ปุ่ม "แสดงช่วงเวลา" โผล่เฉพาะเมื่อระบุ "ทานทุก … ชั่วโมง") */
#slotToggle[hidden], .stock-box[hidden], .bottle-box[hidden], .slot-box[hidden] { display: none !important; }

/* v1.3.16 — ช่องกรอก/ช่องเลือก: ให้วรรณยุกต์-สระบนไม่จม (ครั้ง ผู้ ที่ ปั้น) · ตำแหน่งเครื่องหมายไม่ถูกปัดค่า + เผื่อความสูงบรรทัด */
input, select, textarea { text-rendering: geometricPrecision; font-kerning: normal; font-feature-settings: "ccmp" 1, "mark" 1, "mkmk" 1; line-height: 1.6; -webkit-font-smoothing: antialiased; }
select { padding-top: 12px; padding-bottom: 12px; }

/* v1.3.17 — ไอคอนอารมณ์เป็นรูปการ์ตูน (assets/moods) เส้นหน้าหนา มุมมน */
.mood-img { display: block; width: 48px; height: 48px; object-fit: contain; }
.mood-opt i .mood-img { margin: 0 auto; width: 52px; height: 52px; }
.mood-img.sm { width: 28px; height: 28px; margin: 0 auto; }
.mood-img.xs { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; }
.mood-img.lg { width: 64px; height: 64px; margin: 0 auto; }
.mood-cal .ad-d small { min-height: 28px; }

/* v1.3.17 — ไอคอนอารมณ์ใหญ่ขึ้น */
.mood-opt i .mood-img { width: 76px; height: 76px; }
.mood-opt { min-height: 128px; padding: 10px 6px; }
.mood-img.sm { width: 36px; height: 36px; }
.mood-img.xs { width: 26px; height: 26px; vertical-align: -7px; }
.mood-img.lg { width: 84px; height: 84px; }
.mood-cal .ad-d small { min-height: 36px; }
.mood-cal .ad-d { min-height: 84px; }

/* v1.3.17 — ปรับไอคอนอารมณ์ให้เล็กลงจากรอบก่อน (กลางๆ ระหว่าง 52 กับ 76) */
.mood-opt i .mood-img { width: 62px; height: 62px; }
.mood-opt { min-height: 112px; }
.mood-img.sm { width: 32px; height: 32px; }
.mood-img.xs { width: 24px; height: 24px; vertical-align: -6px; }
.mood-img.lg { width: 72px; height: 72px; }
.mood-cal .ad-d small { min-height: 32px; }
.mood-cal .ad-d { min-height: 78px; }

/* v1.3.17 — ชื่อตารางกินยาในหน้าแอป: ไม่ให้คำว่า "วัน" ตกบรรทัดเดียวโดดๆ (ขึ้นบรรทัดใหม่ทั้งก้อน "ใน 1 วัน") */
.dt-head > div:not(.av) b { text-wrap: balance; }

/* v1.3.17 — การตัดบรรทัดข้อความไทยทั้งแอป: หัวข้อ/ปุ่ม/ป้าย จัดให้สมดุล · ข้อความยาวไม่ปล่อยคำเดี่ยวท้ายย่อหน้า (ใช้ร่วมกับ tidyThaiText ใน util.js ที่ผูกตัวเลขกับหน่วย) */
h1, h2, h3, h4, .btn, button, .tag, .chip, .pill-btn, .alert b, .card > b, .praise-h, .ad-title, .set-h, .mr-nm .name, label > span { text-wrap: balance; }
p, li, .small, .muted, small { text-wrap: pretty; }

/* v1.3.17 — วลีที่ต้องเป็นก้อนเดียวกัน (KEEP_TOGETHER ใน util.js): ย้ายขึ้นบรรทัดใหม่ทั้งก้อน ไม่แตกกลางวลี */
.kt { display: inline-block; }

/* v1.3.18 — ชื่ออารมณ์ในการ์ดใช้ตัวบางลง (600 จาก 700) */
.mood-opt b { font-weight: var(--fw-semi, 600); }

/* v1.3.18 — การ์ดสรุปอารมณ์ 1 เดือน: "ส่วนใหญ่รู้สึก…" ห่างจากไอคอน ขนาดเท่าชื่อเดือน (22px) แต่บางกว่า (600) */
.mood-praise .praise-h { margin-top: var(--sp-4, 16px); font-size: var(--fs-h2, 22px); font-weight: var(--fw-semi, 600); line-height: var(--lh-title, 1.3); }

/* v1.3.18 — "ส่วนใหญ่รู้สึก…" ชิดกับข้อความ "บันทึกแล้ว … วัน" ด้านล่าง */
.mood-praise .praise-h { margin-bottom: 0; }
.mood-praise p.small { margin-top: var(--sp-1, 4px); }

/* v1.3.18 — หน้า intro: ขยับเนื้อหาลงมา ลดพื้นที่ว่างระหว่างปุ่มกับข้อความท้ายหน้า (เว้นด้านบนมากขึ้นตามความสูงจอ จอเตี้ยเว้นน้อยลงอัตโนมัติ) */
#splash { padding-top: clamp(24px, 17vh, 130px); }

/* v1.3.25 — หัวข้อ "ยาที่กำลังทาน" กดย่อ/ขยายได้ (ลูกศร ▾/▸) */
.fold-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px); width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fold-chev { flex: none; color: var(--brand, #4D55F5); font-size: var(--fs-btn, 16px); }
.med-group[hidden] { display: none !important; }

/* v1.3.26 — ป้าย "งดชั่วคราว" ในการ์ดยา: พื้นดำ ตัวอักษรขาว */
.tag.paused { background: #000; color: #fff; font-weight: var(--fw-semi, 600); }


/* v1.3.30 — ช่อง "ครั้งละ" ถูกล็อกเมื่อหน่วยเป็น หลอด */
.f input[name=dose]:disabled { opacity: .55; cursor: not-allowed; }
.dose-quick button:disabled { opacity: .4; cursor: not-allowed; }


/* v1.3.31 — กล่องช่วงเวลาถูกล็อกเมื่อหน่วยเป็น หลอด */
.slot-box.locked { opacity: .55; pointer-events: none; }


/* v1.3.32 — ตัวเลือกสถานะยาที่ถูกเลือก: หยุดแล้ว = แดง (เหมือนป้ายในแอป) · งดชั่วคราว = ดำ ตัวอักษรขาว */
.st-panel.pn-stopped .seg input:checked + span { background: var(--red, #E5332A); color: #fff; box-shadow: none; }
.st-panel.pn-paused .seg input:checked + span { background: #000; color: #fff; box-shadow: none; }


/* v1.3.34 — ช่องวันที่ของนัด: ตัวเลขชิดเดือน และทั้งก้อนอยู่กึ่งกลางช่อง */
body:not(.auth) .appt .date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 64px; height: 64px; padding: 0; }
body:not(.auth) .appt .date b { display: block; margin: 0; font-size: var(--fs-h2, 22px); font-weight: var(--fw-bold, 700); line-height: var(--lh-tight, 1.1); }
body:not(.auth) .appt .date span { display: block; margin: 0; font-size: var(--fs-cap, 13px); line-height: var(--lh-tight, 1.1); }


/* v1.3.35 — ปฏิทิน: แสดงจุดครบทุกนัด (ขึ้นแถวใหม่ทีละ 3 จุด ช่องวันที่สูงขึ้นตามจำนวนนัด) */
.cal .d { height: auto; }
.cal .bars { row-gap: 3px; }


/* v1.3.36 — หัวตารางกินยาบนมือถือ: ชื่อตาราง/ชื่อคน/เวลาอัปเดตบรรทัดละหนึ่งอย่างไม่ขาดกลางคำ · ปุ่มไฟล์ PDF ลงไปแถวล่างเต็มความกว้าง */
@media (max-width: 520px) {
  .dt-head { flex-wrap: wrap; row-gap: var(--sp-2, 8px); }
  .dt-head > div:not(.av) { flex: 1; min-width: 0; }
  .dt-head > div:not(.av) b { white-space: nowrap; text-wrap: nowrap; }
  .dt-head > div:not(.av) .small { white-space: nowrap; }
  .dt-head .dt-pdf { flex: 1 0 100%; margin-left: 0; justify-content: center; text-align: center; }
}

/* v1.3.38 — กรอบ "ทานทุก … ชั่วโมง" ถูกล็อกเมื่อหน่วยเป็น หลอด */
.every-box.locked { opacity: .55; pointer-events: none; }


/* v1.3.40 — รายชื่อสมาชิกที่เลือกให้รับเตือนกินยา (ใต้สวิตช์ของโปรไฟล์) */
.nt-rcpt { margin: 0 0 var(--sp-3, 12px) var(--sp-3, 12px); padding-left: var(--sp-3, 12px); border-left: 3px solid var(--line, #D5D9FF); }
.nt-rcpt > small { display: block; margin-bottom: var(--sp-1, 4px); }


/* v1.3.41 — ข้อความแนะนำให้ตรวจสอบรายการยา */
.med-check { margin: var(--sp-3, 12px) 0; }
.dt-check { margin: var(--sp-3, 12px) 0 0; line-height: var(--lh-sub, 1.4); }
#splash .sp-foot .sf-a { line-height: 1.5; }

/* v1.3.49 — รูปยา (ฟอร์มยา + หน้าจำนวนยาที่เหลือ) + ตัวแก้ไขรูป (หมุน/กลับด้าน/ตัดภาพ) */
.med-photo .mp-prev { margin-bottom: var(--sp-2, 8px); }
.med-photo .mp-prev img { width: 96px; height: 96px; object-fit: cover; border-radius: 16px; border: 1.5px solid var(--line, #D5D9FF); display: block; }
.stk-pic { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: var(--sp-1, 4px); cursor: zoom-in; }
.pe-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .78); display: grid; place-items: center; padding: var(--sp-3, 12px); overflow: auto; }
.pe-box { background: #fff; border-radius: 20px; padding: var(--sp-4, 16px); width: 100%; max-width: 520px; max-height: 100%; overflow: auto; }
.pe-box h3 { margin: 0 0 var(--sp-2, 8px); }
.pe-wrap { text-align: center; line-height: 0; background: #F6F5F1; border-radius: 12px; padding: var(--sp-2, 8px); }
.pe-stage { position: relative; display: inline-block; max-width: 100%; overflow: hidden; touch-action: none; }
.pe-stage canvas { display: block; max-width: 100%; max-height: 52vh; width: auto; height: auto; }
.pe-crop { position: absolute; border: 2px solid #DAFF3A; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); touch-action: none; cursor: move; box-sizing: border-box; }
.pe-crop i { position: absolute; width: 28px; height: 28px; touch-action: none; }
.pe-crop i::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #DAFF3A; border: 2px solid #4D55F5; }
.pe-crop i[data-h="tl"] { left: -14px; top: -14px; } .pe-crop i[data-h="tl"]::after { left: 7px; top: 7px; }
.pe-crop i[data-h="tr"] { right: -14px; top: -14px; } .pe-crop i[data-h="tr"]::after { right: 7px; top: 7px; }
.pe-crop i[data-h="bl"] { left: -14px; bottom: -14px; } .pe-crop i[data-h="bl"]::after { left: 7px; bottom: 7px; }
.pe-crop i[data-h="br"] { right: -14px; bottom: -14px; } .pe-crop i[data-h="br"]::after { right: 7px; bottom: 7px; }
.pe-tip { margin: var(--sp-2, 8px) 0; }
.pe-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); margin-bottom: var(--sp-3, 12px); }
.pe-tools .btn { flex: 1 1 40%; }

/* v1.3.50 — "ให้ญาติมารับยาแทน": กล่องพื้นเขียวในฟอร์มนัด + แถบเขียวใต้ชื่อหมอในรายการนัด */
.proxy-box { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3, 12px); margin: var(--sp-3, 12px) 0; padding: var(--sp-3, 12px) var(--sp-4, 16px); background: #DAFF7C; border: 2px solid #A6DA3A; border-radius: 16px; color: #161A4D; cursor: pointer; }
.proxy-box .proxy-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proxy-box b { font-size: var(--fs-btn, 16px); font-weight: var(--fw-semi, 600); line-height: var(--lh-title, 1.3); }
.proxy-box small { font-size: var(--fs-cap, 13px); line-height: var(--lh-sub, 1.4); color: #3B4A12; }
.proxy-tag { display: block; text-align: center; margin-top: var(--sp-1, 4px); padding: var(--sp-1, 4px) var(--sp-2, 8px); background: #DAFF7C; border: 1.5px solid #A6DA3A; border-radius: 8px; color: #161A4D; font-size: var(--fs-cap, 13px); font-weight: var(--fw-semi, 600); line-height: var(--lh-title, 1.3); }

/* v1.3.55 — กรอบข้อ 8 (หมอแนะนำว่า) เข้มขึ้น: พื้นฟ้าม่วงเข้มขึ้น เส้นขอบหนาและเข้มขึ้น */
.post-visit { background: #D9DEFF; border: 2px solid #7C85F2; }

/* v1.3.57 — ข้อความในวงเล็บข้อ 8: ขึ้นบรรทัดใหม่ใต้หัวข้อ ตัดบรรทัดเป็นก้อนความหมาย (ไม่ขาดกลางวลี) */
.post-visit .f > span small { display: block; margin-top: var(--sp-1, 4px); font-size: var(--fs-cap, 13px); font-weight: var(--fw-regular, 400); line-height: var(--lh-sub, 1.4); }

/* v1.3.61 — ชื่อทางการแพทย์ใต้ชื่อยา (ตัวเล็ก บาง) */
.gen { display: block; margin-top: 1px; font-size: var(--fs-cap, 13px); font-weight: var(--fw-regular, 400); line-height: var(--lh-title, 1.3); color: var(--muted, #5A6080); letter-spacing: 0; }
.mp-gen { font-size: 11px; font-weight: 400; line-height: 1.3; color: #5A6080; margin-top: 1px; }
.rp-gen { font-size: 12px; font-weight: 400; color: #5A6080; }

/* v1.3.65 — ปุ่ม [hidden] ต้องซ่อนจริง (ปุ่ม ลบรูป ในฟอร์มยา โผล่ทั้งที่ยังไม่มีรูป) */
#mpDel[hidden] { display: none !important; }

/* v1.3.68 — ตัวแก้ไขรูป: แถบเลื่อนความสว่าง */
.pe-bright { display: flex; align-items: center; gap: var(--sp-3, 12px); margin: var(--sp-2, 8px) 0 var(--sp-3, 12px); font-size: var(--fs-sub, 15px); font-weight: var(--fw-semi, 600); }
.pe-bright span { flex: none; min-width: 108px; }
.pe-bright b { font-weight: var(--fw-semi, 600); color: var(--brand, #4D55F5); }
.pe-bright input[type=range] { flex: 1; min-width: 0; accent-color: var(--brand, #4D55F5); }

/* v1.3.70 — รูปเม็ดยา: กากบาท × บนรูป = ลบรูป · ปุ่ม แก้ไข */
#mpEdit[hidden] { display: none !important; }
.med-photo .mp-th { width: 96px; height: 96px; border-radius: 16px; border: 1.5px solid var(--line, #D5D9FF); }
.med-photo .mp-prev .thumb img { width: 100%; height: 100%; border: 0; border-radius: 0; }

/* v1.3.73 — หน้าจำนวนยาที่เหลือ: ช่อง "รูป" แยกเป็นคอลัมน์ · ชื่อยาตัวบางลง (600) */
.stk-t th:nth-child(1) { width: 12%; } .stk-t th:nth-child(2) { width: 15%; } .stk-t th:nth-child(3) { width: 26%; } .stk-t th:nth-child(4) { width: 17%; } .stk-t th:nth-child(5) { width: 17%; } .stk-t th:nth-child(6) { width: 13%; text-align: right; }
.stk-t td.stk-pic-td { padding-left: 2px; padding-right: 2px; text-align: center; }
.stk-t td .stk-pic { display: block; margin: 0 auto; width: 44px; height: 44px; }
.stk-t td b.stk-nm { font-weight: var(--fw-semi, 600); }

/* v1.3.73 — ยาที่หมด (เหลือ 0) พื้นหลังแดงเข้มขึ้น · ยาใกล้หมดแดงอ่อนกว่า */
.stk-t tr.low td { background: #FFE6E3; }
.stk-t tr.out td { background: #FFC7C2; }
.stk-row.low .stk-no { background: #FFD2CE; }
.stk-row.out .stk-no { background: #FFA8A1; }

/* v1.3.74 — ตารางยาที่ไม่ได้ทาน (งดชั่วคราว/หยุดแล้ว): พื้นหลังเทา มีกรอบเทา */
.stk-card.stk-off { background: #ECEEF2; border: 2px solid #B8BDC9; }
.stk-card.stk-off .stk-t th { border-bottom-color: #B8BDC9; }
.stk-card.stk-off .stk-t td { border-bottom-color: #D2D6DE; }
.stk-card.stk-off .stk-no { background: transparent; }

/* v1.3.74 — ให้คอลัมน์ชื่อยากว้างขึ้น ชื่อไม่ขาดกลางคำที่จอ 390px (รหัส 11 · รูป 14 · ชื่อยา 31 · รักษา 15 · หมดประมาณ 16 · เหลือ 13) */
.stk-t th:nth-child(1) { width: 11%; } .stk-t th:nth-child(2) { width: 14%; } .stk-t th:nth-child(3) { width: 31%; } .stk-t th:nth-child(4) { width: 15%; } .stk-t th:nth-child(5) { width: 16%; } .stk-t th:nth-child(6) { width: 13%; }

/* v1.3.75 — กากบาท × ที่มุมกรอบการ์ดนัด = ลบนัด (แทนปุ่ม ลบ ในฟอร์มนัด) */
.card.appt { position: relative; }
.appt-x { position: absolute; top: -9px; right: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .6); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.appt-x:active { background: #C62828; }

/* v1.3.77 — กากบาท × ที่มุมกรอบการ์ดติดตามการรักษา = ลบเรื่อง (แทนปุ่ม ลบ สีแดง) · ใช้สไตล์เดียวกับ .appt-x */
.card.care { position: relative; }
.card-x { position: absolute; top: -9px; right: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .6); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); z-index: 2; }
.card-x:active { background: #C62828; }

/* v1.3.78 — กากบาท × บนกรอบการ์ด จางลง (พื้นขาว ขอบเทาบาง ตัวเทาอ่อน ไม่มีเงา) ไม่ให้เด่นเกิน · แตะแล้วค่อยเป็นแดง */
.appt-x, .card-x { width: 24px; height: 24px; top: -8px; right: -5px; background: rgba(255, 255, 255, .92); border: 1px solid #D5D9E6; color: #9AA0B8; font-size: 16px; box-shadow: none; }
.appt-x:active, .card-x:active { background: #FDECEA; border-color: #E5A8A2; color: #C62828; }

/* v1.3.78 — เบอร์ฉุกเฉิน: ปุ่ม × ลบ เป็นกากบาทเล็กจางที่มุมขวาบนของแถว (สไตล์เดียวกับกากบาทที่การ์ดนัด/ติดตามการรักษา) แทนปุ่มสี่เหลี่ยมชมพูด้านข้าง */
.hos-row { position: relative; }
.hos-row .hos-rm { position: absolute; top: -8px; right: -5px; width: 24px; height: 24px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); border: 1px solid #D5D9E6; color: #9AA0B8; font-size: 16px; line-height: 1; box-shadow: none; z-index: 2; }
.hos-row .hos-rm:active { background: #FDECEA; border-color: #E5A8A2; color: #C62828; }

/* v1.3.79 — กากบาท × จางแทนปุ่ม ลบ ในหน้าต่างฟอร์ม (โปรไฟล์ · บันทึกอาการ · กลุ่ม · ความดัน/น้ำตาล) และในรายการบันทึกอาการ */
.sheet { position: relative; }
.sheet-x { position: absolute; top: 14px; right: 16px; z-index: 3; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); border: 1px solid #D5D9E6; color: #9AA0B8; font-size: 16px; line-height: 1; cursor: pointer; }
.sheet-x:active { background: #FDECEA; border-color: #E5A8A2; color: #C62828; }
.log { position: relative; }

/* v1.4.10 — ป้ายแชร์ที่การ์ดนัด (นัดของโปรไฟล์ที่แชร์มา) */
.card.appt .appt-share { margin-top: var(--sp-1, 4px); }

/* v1.4.11 — ปุ่ม แก้ไขข้อมูล + ลบ อยู่แถวเดียวกันในหน้าข้อมูลส่วนตัว */
.prof-actions { flex-wrap: nowrap; align-items: stretch; }
.prof-actions .btn:last-child { flex: 1 1 auto; }
.prof-actions .btn.danger { flex: 0 0 auto; min-width: 88px; }
.grp-btns { display: flex; gap: 8px; flex: none; }

/* v1.4.17 — การ์ดนัดของโปรไฟล์ที่แชร์มา แผ่นสีเขียวมะนาวรองหลังการ์ด (สีเดียวกับป้ายญาติมารับยาแทน) */
.appt-plate { background: #DAFF7C; border-radius: 20px; padding: 8px; margin-bottom: var(--sp-2, 8px); }
body:not(.auth) .appt-plate .card.appt { margin-bottom: 0; background: #fff; }

/* v1.4.21 — ปุ่มสีม่วงทึบ (ออกจากกลุ่ม) หน้าตาเดียวกับปุ่มแก้ไขสีน้ำเงิน */
.btn.purple { background: linear-gradient(135deg, #A266F5 0%, #8844E6 100%); color: #fff; box-shadow: 0 3px 10px rgba(136, 68, 230, .28); }

/* v1.4.25 — ป้าย 'แชร์จาก …' พื้นเขียวมะนาวสะท้อนแสง ตัวหนังสือดำ (ทุกหน้าที่ใช้ป้ายนี้) */
body:not(.auth) .share-tag, .share-tag { background: #DAFF7C; color: #000; }

/* v1.4.1 หน้าจำนวนยาที่เหลือ: รหัสอยู่บนรูป · รักษาอะไรอยู่ใต้ชื่อยา · ช่องเหลือกว้างขึ้น ตัวเลขอยู่บรรทัดเดียว */
.stk-t th:nth-child(1) { width: 17%; } .stk-t th:nth-child(2) { width: 37%; } .stk-t th:nth-child(3) { width: 24%; } .stk-t th:nth-child(4) { width: 22%; text-align: right; }
.stk-t td.stk-pic-td { padding-left: var(--sp-2); padding-right: var(--sp-1); text-align: left; }
.stk-ph { position: relative; width: 48px; height: 48px; border-radius: 12px; background: var(--brand-soft, #E7E9FF); }
.stk-ph.no { display: flex; align-items: center; justify-content: center; background: #fff; border: 1.5px dashed #B9BCE8; box-sizing: border-box; }
.stk-ph .stk-pic { width: 100%; height: 100%; margin: 0; border-radius: 12px; object-fit: cover; }
.stk-ph .stk-nopic { display: none; }
.stk-t .stk-ph .stk-no { position: absolute; left: -4px; top: -4px; min-height: 0; padding: 2px 7px; border-radius: 8px; background: var(--brand, #4D55F5); color: #fff; font-size: var(--fs-cap); font-weight: var(--fw-semi); line-height: var(--lh-title); }
.stk-t .stk-ph.no .stk-no { position: static; display: block; padding: 4px 6px; margin: 0; border-radius: 10px; font-size: var(--fs-sub); text-align: center; }
.stk-t td .stk-pur { display: block; font-size: var(--fs-cap); font-weight: var(--fw-regular); line-height: var(--lh-sub); color: var(--ink); }
.stk-t td.stk-left { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.stk-t td.stk-left b { white-space: nowrap; font-size: var(--fs-title); line-height: var(--lh-tight); }
.stk-t .stk-ph .stk-no { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }

/* v1.4.31 — หน้าจำนวนยาที่เหลือ: ขยายคอลัมน์ 'เหลือ' ให้ตัวเลขหลักร้อยขึ้นไปอยู่บรรทัดเดียว */
.stk-t th:nth-child(1) { width: 16%; } .stk-t th:nth-child(2) { width: 33%; } .stk-t th:nth-child(3) { width: 24%; } .stk-t th:nth-child(4) { width: 27%; }
.stk-t td.stk-left, .stk-t th:nth-child(4) { padding-right: var(--sp-2, 8px); }
.stk-t td.stk-left b { white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }