/* กินได้มั้ย — ลายเส้นวาดมือ ตีมตาชั่ง+จาน · มือถือมาก่อน
   สเปก: DESIGN.md · ปรับตามงานวิจัย 15 ส.ค. (mobile-first · เว็บระดับโลก · แอปแคล · ตัวอักษรไทย · in-app browser)
   ห้าม: gradient · glass · box-shadow · การ์ดเรียงเป็นบอร์ด · สีแดงที่แปลว่า "ผิด" */

@font-face {
  font-family: "Prompt";
  src: url("fonts/prompt-500-thai.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Prompt";
  src: url("fonts/prompt-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Prompt";
  src: url("fonts/prompt-600-thai.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Prompt";
  src: url("fonts/prompt-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sarabun";
  src: url("fonts/sarabun-400-thai.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Sarabun";
  src: url("fonts/sarabun-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sarabun";
  src: url("fonts/sarabun-600-thai.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Sarabun";
  src: url("fonts/sarabun-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── สี ── */
  --paper:    #efe6d0;
  --paper-2:  #f6efdd;
  --ink:      #1e2c4d;
  --ink-soft: #6b6656;
  --marker:   #c2331f;   /* ปากกาแดง = ลายเซ็นแบรนด์ (วงกลม/เครื่องหมาย ?) — ห้ามใช้แปลว่า "เกิน/ผิด" */
  --ok:       #2f6b46;
  --warn:     #9a6212;   /* "ต้องแลกอะไรสักอย่าง" — อุ่น ไม่ใช่สัญญาณอันตราย */
  --rule:     #cbb894;

  /* ── ตัวอักษร: 6 ขนาดทั้งเว็บ ห้ามมีขนาดที่ 7 ── */
  --t-hero:    clamp(2rem, 8.4vw, 2.3rem);              /* คำตัดสิน — ครั้งเดียวต่อหน้าจอ */
  --t-display: clamp(1.4rem, 5.4vw, 1.6rem);            /* หัวข้อหน้าจอ */
  --t-lead:    1.2rem;                                  /* ประโยคขยาย · ตัวเลขในตาราง */
  --t-body:    clamp(1.0625rem, 1rem + .5vw, 1.1875rem);/* เนื้อความ 17→19px */
  --t-ui:      1.0625rem;                               /* ปุ่ม ชิป แถว — 17px (ต่ำกว่า 16 iOS ซูมเอง) */
  --t-meta:    .9375rem;                                /* คำกำกับ 15px = พื้นขั้นต่ำของไทย */

  /* ── ระยะบรรทัด: ไทยต้องสูงกว่าฝรั่ง เพราะสระ/วรรณยุกต์ซ้อนบน-ล่าง ── */
  --lh-display: 1.25;
  --lh-ui:      1.6;
  --lh-body:    1.78;

  --hand: "Prompt", "Noto Sans Thai", "Thonburi", system-ui, sans-serif;
  --body: "Sarabun", "Noto Sans Thai", "Thonburi", -apple-system, system-ui, sans-serif;

  --gutter: 1rem;
  --bar-h: 4.6rem;
  --ease: cubic-bezier(.17, .67, .2, 1);
}

@media (min-width: 48rem) { :root { --gutter: 2rem; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1b201d; --paper-2: #242a26; --ink: #ece5d4; --ink-soft: #a39d8b;
    --marker: #e2705c; --ok: #7fbf95; --warn: #d9a83f; --rule: #3d453e;
  }
}
/* ผู้ใช้เลือกเอง = ชนะระบบ */
:root[data-theme="dark"] {
  --paper: #1b201d; --paper-2: #242a26; --ink: #ece5d4; --ink-soft: #a39d8b;
  --marker: #e2705c; --ok: #7fbf95; --warn: #d9a83f; --rule: #3d453e;
}

* { box-sizing: border-box; letter-spacing: 0; }   /* ไทยห้าม letter-spacing สระจะหลุดจากพยัญชนะ */
/* .intro/.bar ตั้ง display:flex ⇒ ทับ [hidden] ของเบราว์เซอร์ ต้องบังคับซ่อนเอง */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;  /* กัน iOS ขยายตัวอักษรตอนหมุนจอ */
  overscroll-behavior-y: contain;                           /* กันลากลงแล้วรีเฟรช = คำตอบหาย */
  hyphens: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: var(--lh-ui);
  font-synthesis: none;              /* Itim มีน้ำหนักเดียว — bold ปลอมทำให้วรรณยุกต์เละ */
  word-break: normal; line-break: auto; overflow-wrap: break-word;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
body.no-bar { padding-bottom: 1rem; }

body::after {   /* เกรนกระดาษ */
  content: ""; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
main { max-width: 33rem; margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-left)) 2.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── ทุกอย่างที่แตะได้ ── */
button, a, input, select, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-family: inherit; }
button { font-size: var(--t-ui); line-height: var(--lh-ui); }
.btn, .chip, .sorts button, .nav button, .row, .leochip, .leorow, .quota, .bar__main, .bar__side {
  transition: transform 120ms var(--ease), background 120ms var(--ease), color 120ms var(--ease);
}
.btn:active, .chip:active, .sorts button:active, .nav button:active,
.row:active, .leochip:active, .leorow:active, .quota:active,
.bar__main:active, .bar__side:active { transform: scale(.97); }

/* ── ปุ่มสลับโหมด + ติดหน้าจอ ── */
.mast { position: relative; }
.theme-btn {
  position: absolute; top: 1.15rem; right: var(--gutter);
  min-width: 48px; min-height: 48px; padding: 0; cursor: pointer;
  font-size: 1.35rem; line-height: 1; background: transparent;
  border: 1.5px dashed var(--rule); border-radius: 50% 46% 52% 48%;
  color: var(--ink);
}
.a2hs { margin: .6rem 0 0; }
.a2hs__how { margin: .5rem 0 0; }

/* ── หัวกระดาษ ── */
.mast { max-width: 33rem; margin: 0 auto; padding: 1.3rem var(--gutter) .3rem; }
.wordmark-btn { display: block; min-height: 48px; padding: 0; background: 0; border: 0; text-align: left; color: inherit; cursor: pointer; }
.wordmark { display: block; font-family: var(--hand); font-size: var(--t-display); line-height: var(--lh-display); }
.wordmark em { font-style: normal; color: var(--marker); }
.byline { margin: 0; color: var(--ink-soft); font-size: var(--t-meta); }
.byline strong { color: var(--ink); font-weight: 600; }

/* ── ตัวอักษรร่วม ── */
.screen-h {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-family: var(--hand); font-weight: 500; font-size: var(--t-display);
  line-height: var(--lh-display); margin: 1.5rem 0 .6rem;
}
.screen-h--sm {
  font-family: var(--hand); font-size: var(--t-display); color: var(--ink);
  margin: 2rem 0 .6rem; padding-top: 1.1rem; border-top: 2px dotted var(--rule);
}
.lead { font-size: var(--t-lead); line-height: 1.55; margin: 0 0 1rem; max-inline-size: 26ch; }
.meta { font-size: var(--t-meta); color: var(--ink-soft); line-height: var(--lh-ui); }
.meta--center { text-align: center; }
.cut { width: 2.4rem; height: auto; color: var(--rule); flex: 0 0 auto; }

/* ── ปุ่ม ── */
.btn {
  display: block; width: 100%; min-height: 52px; cursor: pointer; border: 0;
  font-family: var(--hand); font-size: var(--t-display); line-height: 1.3; padding: .7rem 1rem;
  border-radius: 26px 22px 28px 20px / 20px 26px 20px 24px;  /* ขอบเบี้ยวคนละมุม = ไม่เหมือนเทมเพลต */
}
.btn--primary { color: var(--paper-2); background: var(--marker); }
.btn--ghost {
  color: var(--ink); background: transparent; border: 2px solid var(--rule);
  font-family: var(--body); font-size: var(--t-ui); min-height: 48px;
}

/* ── หน้าเปิด ── */
.intro { min-height: 70vh; min-height: 70svh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: .5rem 0 1.5rem; }
.scale--hero { max-width: 15rem; margin: 0 auto 1.1rem; }
.scale--hero .arm  { animation: sway 3.4s ease-in-out infinite alternate; }
.scale--hero .hang { animation: sway-hang 3.4s ease-in-out infinite alternate; }
@keyframes sway      { from { transform: rotate(-11deg); } to { transform: rotate(-2deg); } }
@keyframes sway-hang { from { transform: rotate(11deg); }  to { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) {
  .scale--hero .arm, .scale--hero .hang { animation: none; }
}
.intro__h { font-family: var(--hand); font-weight: 500; font-size: var(--t-hero); line-height: var(--lh-display); margin: 0 auto .5rem; max-inline-size: 18ch; }
.intro__h b { color: var(--marker); font-weight: 400; }
.intro__p { margin: 0 auto 1.5rem; color: var(--ink-soft); max-inline-size: 24ch; }
.intro .btn { max-width: 20rem; margin: 0 auto; }

/* ── ฟอร์ม ── */
.livequota { font-family: var(--hand); font-size: var(--t-lead); margin: 0 0 1.2rem; }
.livequota b { font-size: var(--t-hero); color: var(--marker); }
.field { border: 0; padding: 0; margin: 0 0 1.3rem; }
.field legend, .field__label { display: block; padding: 0; margin-bottom: .35rem; font-size: var(--t-meta); color: var(--ink-soft); }
.field input, .field select {
  width: 100%; min-height: 52px; height: auto;      /* ห้ามล็อกความสูง สระไทยจะโดนตัดหัว-ท้าย */
  font-family: var(--hand); font-size: var(--t-display); line-height: 1.5;
  padding: .5rem .2rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--rule);
  border-radius: 0; -webkit-appearance: none;
}
.field input:focus, .field select:focus { outline: 0; border-bottom-color: var(--marker); }
.field input::placeholder { color: var(--rule); }

.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.seg--3 { grid-template-columns: repeat(3, 1fr); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: .5rem .4rem; font-size: var(--t-ui);
  border: 1.6px solid var(--rule); border-radius: 14px 12px 15px 11px / 12px 15px 11px 14px;
}
.seg input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--marker); outline-offset: 2px; }

.more { margin: -.3rem 0 1.2rem; }
.more summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; color: var(--ink-soft); font-size: var(--t-meta); }
.more__grid { display: grid; gap: .3rem; padding: .5rem 0 0; }

/* ── โควต้า (ทั้งแถบแตะเพื่อแก้) ── */
.quota {
  display: block; width: 100%; text-align: left; cursor: pointer; color: inherit;
  background: 0; border: 0; border-bottom: 2px solid var(--ink);
  padding: .9rem .1rem .7rem; margin: .5rem 0 0;
}
.quota__label { display: block; font-size: var(--t-meta); color: var(--ink-soft); }
.quota__row { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.quota__num { font-family: var(--hand); font-weight: 500; font-size: var(--t-hero); line-height: 1.15; color: var(--marker); }
.quota__edit { margin-left: auto; font-size: var(--t-meta); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ── BMR/TDEE ย่อ: เห็นทันทีไม่ต้องกด (ฉบับเต็มอยู่ในแผงข้างล่าง) ── */
.qstat { margin: .7rem 0 .2rem; padding: 0; }
.qstat__i { display: flex; align-items: baseline; gap: .5rem; padding: .2rem 0; }
.qstat dt { flex: 0 0 auto; font-size: var(--t-meta); color: var(--ink-soft); }
.qstat dt b { font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); color: var(--ink); }
.qstat dd { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-meta); line-height: var(--lh-ui); color: var(--ink-soft); }
.qstat__note { margin: .3rem 0 0; font-size: var(--t-meta); line-height: var(--lh-ui); color: var(--ink-soft); }

/* ── ที่มาของเลข (ปิดไว้ กางเองเมื่ออยากรู้) ── */
.qmath { margin: .5rem 0 .3rem; }
/* summary ต้องดูเป็นปุ่ม — ลีโอทัก "ไม่รู้เลยว่ามันกดได้" */
.qmath > summary {
  display: flex; align-items: center; gap: .5rem; min-height: 48px; cursor: pointer;
  padding: .15rem .8rem; font-size: var(--t-ui); color: var(--ink);
  border: 1.5px dashed var(--rule); border-radius: 13px 10px 14px 11px;
  list-style: none; -webkit-tap-highlight-color: transparent;
}
.qmath > summary::-webkit-details-marker { display: none; }
.qmath > summary::marker { content: ""; }
.qmath > summary::before {
  content: "▸"; color: var(--marker); font-size: 1.05em; flex: 0 0 auto;
  transition: transform 150ms var(--ease);
}
.qmath[open] > summary::before { transform: rotate(90deg); }
.qmath > summary::after {
  content: "แตะดู"; margin-left: auto; font-size: var(--t-meta); color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.qmath[open] > summary::after { content: "ปิด"; }
.qmath[open] > summary { border-style: solid; border-color: var(--ink); }
.qmath__body { margin-top: .5rem; }
.qmath__body { padding: 0 0 .4rem; border-left: 2px solid var(--rule); padding-left: .85rem; margin: 0 0 .3rem; }
.qmath__row { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.qmath__row:last-of-type { border-bottom: 0; }
.qmath__head { display: block; font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); line-height: var(--lh-display); color: var(--ink); }
.qmath__note { display: block; margin-top: .15rem; font-size: var(--t-meta); line-height: var(--lh-body); color: var(--ink-soft); }
.qmath__lead { margin: .1rem 0 .6rem; font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); }
.qmath__lead b { color: var(--marker); }
.qmath__foot { margin: .5rem 0 0; font-size: var(--t-meta); line-height: var(--lh-body); color: var(--ink-soft); }

/* ── หน้าบันทึกการกิน ── */
.logweek { padding: .7rem .9rem 0.9rem; margin: .3rem 0 1.2rem; border: 1.5px solid var(--rule); border-radius: 14px 11px 15px 12px; }
.logweek__head { margin: 0; font-size: var(--t-meta); color: var(--ink-soft); }
.logweek__num { margin: .1rem 0 .2rem; }
.logweek__num b { font-family: var(--hand); font-weight: 500; font-size: var(--t-hero); color: var(--marker); }
.logweek__diff { margin: .1rem 0 .6rem; font-size: var(--t-ui); }
.logweek__diff.is-ok { color: var(--ok); }
.logweek__diff.is-over { color: var(--warn); }
.log__h { font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); margin: 1.4rem 0 .5rem; color: var(--ink-soft); }

/* วงแหวนมาโครทั้งเดือน */
.donutwrap { display: flex; align-items: center; gap: 1.1rem; margin: .5rem 0 .7rem; }
.donutbox { position: relative; flex: 0 0 10rem; }
.donut { display: block; width: 10rem; height: 10rem; transform: rotate(-90deg); }
.donut__bg { fill: none; stroke: var(--rule); stroke-width: 7; opacity: .45; }
.donut__seg { fill: none; stroke-width: 13; stroke-linecap: round; }
.donut__seg.is-p { stroke: var(--ok); }
.donut__seg.is-c { stroke: var(--warn); }
.donut__seg.is-f { stroke: var(--marker); }
.donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut__center b { font-family: var(--hand); font-weight: 500; font-size: var(--t-display); color: var(--ink); line-height: 1.1; }
.donut__center small { font-size: var(--t-meta); color: var(--ink-soft); }
.donut__legs { flex: 1 1 auto; min-width: 0; }
.donut__leg { display: flex; align-items: baseline; gap: .45rem; font-size: var(--t-meta); color: var(--ink-soft); padding: .2rem 0; }
.donut__leg b { font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); color: var(--ink); }
.donut__dot { width: .7rem; height: .7rem; border-radius: 45% 55% 50% 48%; flex: 0 0 auto; align-self: center; }
.donut__dot.is-p { background: var(--ok); }
.donut__dot.is-c { background: var(--warn); }
.donut__dot.is-f { background: var(--marker); }

/* แถบมาโคร — แถบวาดมือ ไม่ใช่กราฟแอป */
.mbar { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; }
.mbar__l { flex: 0 0 3.6rem; font-size: var(--t-meta); color: var(--ink-soft); }
.mbar__track { flex: 1 1 auto; height: 12px; border: 1.5px solid var(--rule); border-radius: 7px 5px 8px 6px; overflow: hidden; background: transparent; }
.mbar__fill { display: block; height: 100%; border-radius: 5px 3px 6px 4px; }
.mbar__fill.is-p { background: var(--ok); opacity: .75; }
.mbar__fill.is-c { background: var(--warn); opacity: .7; }
.mbar__fill.is-f { background: var(--marker); opacity: .6; }
.mbar__v { flex: 0 0 auto; font-size: var(--t-meta); color: var(--ink-soft); }

/* แถวสัปดาห์ */
.wkrow { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; border-bottom: 1px dotted var(--rule); flex-wrap: wrap; }
.wkrow__l { flex: 0 0 auto; font-size: var(--t-ui); }
.wkrow__l small { color: var(--ink-soft); font-size: var(--t-meta); }
.wkrow b { font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); margin-left: auto; }
.wkrow small { font-size: var(--t-meta); color: var(--ink-soft); }
.wkrow__avg { font-size: var(--t-meta); color: var(--ink-soft); }
.wkrow__mark { font-size: var(--t-meta); }
.wkrow__mark.is-ok { color: var(--ok); }
.wkrow__mark.is-over { color: var(--warn); }

.logday { margin: 0 0 1.3rem; }
.logday__h { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0 0 .3rem;
  font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); border-bottom: 2px solid var(--ink); padding-bottom: .25rem; }
.logday__sum { margin-left: auto; font-family: var(--body); font-size: var(--t-meta); color: var(--ink-soft); }
.logday__sum b { font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); color: var(--ink); }
.logday__sum em { font-style: normal; }
.logday__sum .is-ok { color: var(--ok); }
.logday__sum .is-over { color: var(--warn); }
.logday__del { margin-left: .3rem; min-height: 40px; padding: 0 .2rem; cursor: pointer;
  font-size: var(--t-meta); color: var(--ink-soft); background: 0; border: 0;
  text-decoration: underline; text-underline-offset: 3px; }
.logday__list .x { min-width: 44px; min-height: 44px; font-size: var(--t-lead); color: var(--marker);
  background: 0; border: 0; cursor: pointer; }
.logday__list { list-style: none; margin: 0; padding: 0; }
.logday__list li { display: flex; align-items: baseline; gap: .5rem; padding: .35rem 0; border-bottom: 1px dotted var(--rule); }
.logday__list li:last-child { border-bottom: 0; }
.logday__list li span { flex: 1 1 auto; min-width: 0; font-size: var(--t-ui); }
.logday__list li b { font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); }
.logday__list li small { font-size: var(--t-meta); color: var(--ink-soft); }

/* ── สมุดบันทึกรายวัน ── */
.diary__sum { padding: .4rem 0 .6rem; border-bottom: 1.5px solid var(--rule); margin-bottom: .3rem; }
.diary__sum b { font-family: var(--hand); font-weight: 500; font-size: var(--t-display); color: var(--marker); }
.diary__sum small { margin-left: .35rem; font-size: var(--t-meta); color: var(--ink-soft); }
.diary__sum span { display: block; font-size: var(--t-meta); color: var(--ink-soft); line-height: var(--lh-ui); }

.diary__row { display: flex; align-items: baseline; gap: .55rem; padding: .45rem 0; border-bottom: 1px dotted var(--rule); }
.diary__row:last-of-type { border-bottom: 0; }
.diary__day { flex: 0 0 4.2rem; font-size: var(--t-meta); color: var(--ink-soft); }
.diary__n { flex: 0 0 auto; font-size: var(--t-meta); color: var(--ink-soft); }
.diary__kcal { margin-left: auto; font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); }
.diary__row small { font-size: var(--t-meta); color: var(--ink-soft); }
.diary__mark { flex: 0 0 auto; font-size: var(--t-meta); }
.diary__mark.is-ok { color: var(--ok); }
.diary__mark.is-over { color: var(--warn); }

/* ── ค้นหา ── */
.search { margin: 1rem 0 .2rem; }
.search input {
  width: 100%; min-height: 52px; height: auto;
  font-size: var(--t-ui); line-height: 1.5; padding: .8rem .95rem;
  color: var(--ink); background: var(--paper-2);
  border: 1.6px solid var(--rule);
  border-radius: 18px 14px 20px 15px / 14px 18px 15px 19px; -webkit-appearance: none;
}
.search input:focus { outline: 2px solid var(--marker); outline-offset: 1px; }

/* ── ชิปแตะเร็ว (ทางที่ไม่ต้องพิมพ์) ── */
.chips-wrap { margin-top: .3rem; }
/* คู่ละแถวเต็มขอบ แต่กว้างไม่เท่ากันตามความยาวชื่อ (ลีโอเคาะเอง 21 ส.ค.)
   min 37% บังคับไม่ให้เกิน 2 ตัว/แถว · max 63% บังคับไม่ให้เหลือตัวเดียวโดด */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chips .chip {
  flex: 1 1 auto; min-width: 34%; max-width: 66%;
  justify-content: center; text-align: center;
  font-size: .92rem; padding: .55rem .5rem; gap: .25rem; white-space: nowrap;
  border-radius: 18px;    /* สี่เหลี่ยมขอบมน (ลีโอปรับอีกรอบ 21 ส.ค.) */
}
.chip {
  min-height: 48px; display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .9rem; font-size: var(--t-ui); cursor: pointer;
  color: var(--ink); background: var(--paper-2); border: 1.6px solid var(--rule);
  border-radius: 16px 20px 14px 18px / 18px 14px 20px 15px;
}
/* หน่วยต่อท้ายตัวเลข — เบากว่าเลข ไม่แย่งสายตา แต่ต้องมี ไม่งั้นเลขลอยไม่รู้ว่าอะไร */
.chip small, .mealitems li small { font-size: var(--t-meta); color: var(--ink-soft); }
/* ชิปตั้งตรง — ลีโอไม่เอาเอียงแล้ว (21 ส.ค.) */
.chip:nth-child(2n):active, .chip:nth-child(3n):active { transform: scale(.97); }

.sorts { display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.sorts button {
  min-height: 44px; padding: .3rem .85rem; font-size: var(--t-meta); cursor: pointer;
  color: var(--ink-soft); background: transparent; border: 1.5px solid var(--rule);
  border-radius: 14px 11px 15px 10px / 11px 14px 10px 13px;
}
.sorts button.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.linky {
  margin-left: auto; min-height: 44px; padding: 0 .2rem; cursor: pointer;
  font-size: var(--t-meta); color: var(--marker); background: 0; border: 0;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── จานลีโอ (แถบเลื่อน) ── */
.leostrip { display: flex; gap: .55rem; overflow-x: auto; padding: .2rem 0 .5rem; scrollbar-width: none; overscroll-behavior-x: contain; }
.leostrip::-webkit-scrollbar { display: none; }
.leochip {
  flex: 0 0 auto; min-height: 60px; text-align: left; cursor: pointer;
  padding: .5rem .85rem; color: var(--ink); background: transparent;
  border: 1.6px solid var(--ink); border-radius: 16px 20px 14px 18px / 18px 14px 20px 15px;
}
.leochip b { display: block; font-family: var(--hand); font-weight: 500; font-size: var(--t-ui); }
.leochip small { display: block; font-size: var(--t-meta); color: var(--ink-soft); }

/* ── รายการจาน: แถวสูงเท่ากัน ไม่มีเส้นคั่นทุกแถว (เส้นทุกแถว = หน้าตาสเปรดชีต) ── */
.list { list-style: none; margin: .2rem 0 0; padding: 0; }
.list li + li { margin-top: .5rem; }
.row {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 76px;
  text-align: left; cursor: pointer; color: inherit;
  padding: .6rem .7rem; background: var(--paper-2); border: 0;
  border-radius: 18px 14px 20px 15px / 14px 18px 15px 19px;
}
.row--feature { min-height: 104px; border: 2px solid var(--ink); }
.glyph { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; color: var(--ink-soft); }
.list li:nth-child(3n) .glyph { transform: rotate(7deg); }
.list li:nth-child(3n+1) .glyph { transform: rotate(-5deg); }
.row__body { flex: 1 1 auto; min-width: 0; }
.row__name { display: block; font-size: var(--t-ui); font-weight: 600; }
.row__tag { display: block; font-size: var(--t-meta); color: var(--ink-soft); margin-top: .1rem; }
.row__kcal { flex: 0 0 auto; font-family: var(--hand); font-size: var(--t-display); text-align: right; }
.row__kcal small { display: block; font-family: var(--body); font-size: var(--t-meta); color: var(--ink-soft); }

/* ── แคลมาจากไหน ── */
.parts { margin: 1.2rem 0 .4rem; }
.parts__h { margin: 0 0 .5rem; font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); }
.parts__list { list-style: none; margin: 0; padding: 0; }
.part {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  gap: 0 .6rem; padding: .5rem .6rem; margin-bottom: .3rem;
  border: 1.5px solid var(--rule); border-radius: 10px 12px 11px 13px;   /* มุมไม่เท่ากัน = ลายมือ ไม่ใช่เทมเพลต */
}
/* แถบพื้นหลัง = สัดส่วนแคลของส่วนนั้น อ่านได้โดยไม่ต้องดูเลข */
.part::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%);
  background: var(--paper-2); border-radius: 9px 0 0 9px; z-index: 0;
}
.part > * { position: relative; z-index: 1; }
.part__name { font-size: var(--t-ui); line-height: var(--lh-ui); }
.part__name small { color: var(--ink-soft); font-size: var(--t-meta); }
.part__gwrap { font-size: var(--t-meta); color: var(--ink-soft); white-space: nowrap; }
.part__g {
  width: 4.6ch; padding: 0; text-align: center;
  font-family: var(--hand); font-size: var(--t-ui); color: var(--marker);
  background: 0; border: 0; border-bottom: 1.5px solid var(--rule);
}
.part__g:focus { outline: none; border-bottom-color: var(--marker); }
.part__kcal { font-family: var(--hand); font-size: var(--t-lead); text-align: right; white-space: nowrap; }
.part__kcal small { margin-left: .25rem; font-family: var(--body); font-size: var(--t-meta); color: var(--ink-soft); }
.part__macro { grid-column: 1 / -1; font-size: var(--t-meta); color: var(--ink-soft); }
.parts__foot { margin: .5rem 0 0; font-size: var(--t-meta); line-height: var(--lh-body); color: var(--ink-soft); }

.star { color: var(--marker); font-weight: 400; font-size: .85em; }

.hicon { width: 1.5em; height: 1.5em; color: var(--marker); flex: 0 0 auto; }
.doodle { display: block; width: 4.4rem; height: 4.4rem; color: var(--rule); margin: .5rem 0 .2rem; }
.doodle--sm { width: 3.2rem; height: 3.2rem; }

.ebookbox { margin: 1.4rem 0; padding: .9rem 1rem; border: 1.8px solid var(--marker); border-radius: 16px 12px 17px 13px; }
.ebookbox p { margin: 0 0 .7rem; }
.misscta { margin-top: .8rem; max-width: 100%; }

.empty { padding: 1.2rem .2rem; }
.empty h3 { font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); margin: 0 0 .6rem; }

/* ── ตาชั่ง ── */
.result__dish { margin: 1rem 0 .2rem; font-size: var(--t-meta); color: var(--ink-soft); }
.scale { margin: .4rem auto .2rem; max-width: 18rem; color: var(--ink); }
.scale svg { display: block; width: 100%; height: auto; overflow: visible; }
@supports (transform-box: view-box) {
  .arm  { transform: rotate(var(--tilt, 0deg)); transform-box: view-box; transform-origin: 110.5px 45px; transition: transform .75s var(--ease); }
  .hang { transform: rotate(calc(-1 * var(--tilt, 0deg))); transform-box: view-box; transition: transform .75s var(--ease); }
  .hang--l { transform-origin: 41px 46px; }
  .hang--r { transform-origin: 180px 46px; }
}
.pan-num { font-family: var(--hand); font-size: 14px; text-anchor: middle; fill: var(--ink); }
.pan-cap { font-family: var(--body); font-size: 9px; text-anchor: middle; fill: var(--ink-soft); }

/* ── คำตัดสิน = ของชิ้นเดียวที่ใหญ่สุดในหน้าจอ ── */
.verdictwrap { position: relative; display: inline-block; padding: .8rem 2.2rem .9rem 2.3rem; margin: 0 0 0 -.9rem; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--marker); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ring path { stroke-dasharray: 900; stroke-dashoffset: 900; }
.ring.draw path { animation: ink .55s var(--ease) forwards; }
@keyframes ink { to { stroke-dashoffset: 0; } }
.verdictwrap[data-lines="1"] { border-bottom: 0; }
.verdictwrap:not([data-lines="1"]) { padding: .2rem .3rem .5rem 0; margin-left: 0; border-bottom: 3px solid currentColor; }
.verdictwrap:not([data-lines="1"]) .ring { display: none; }
.verdict {
  position: relative; margin: 0; max-inline-size: 16ch;
  font-family: var(--hand); font-weight: 500;
  font-size: var(--t-hero); line-height: var(--lh-display); color: var(--ok);
}
.verdict[data-tone="tight"] { color: var(--warn); }
.verdict[data-tone="big"]   { color: var(--ink); }   /* กินเกินโควต้า ≠ ความผิด — ห้ามใช้แดง */

.provenance {
  display: inline-flex; align-items: center; gap: .4rem; margin: .2rem 0 1rem;
  font-size: var(--t-meta); color: var(--ink-soft);
  border: 1.5px solid var(--rule); border-radius: 12px 9px 13px 8px / 9px 12px 8px 12px;
  padding: .3rem .7rem;
}
.provenance b { color: var(--ink); font-weight: 600; }

/* ── ตัวเลข ── */
.tally {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .5rem; row-gap: 1rem;
  margin: 0; padding: 1rem 0; border-top: 2px solid var(--ink); border-bottom: 2px dotted var(--rule);
}
.tally div { min-width: 0; }
.tally dt { font-size: var(--t-meta); color: var(--ink-soft); }
.tally dd { margin: .1rem 0 0; font-size: var(--t-meta); }
.tally b { font-family: var(--hand); font-weight: 500; font-size: var(--t-display); }
.tally small { display: block; color: var(--ink-soft); font-size: var(--t-meta); }
.d { display: inline-block; width: .63em; text-align: center; }  /* Itim เลขความกว้างไม่เท่ากัน ต้องบังคับเอง */

.pencil { margin: 1rem 0 0; padding-left: .85rem; border-left: 3px solid var(--marker); line-height: var(--lh-body); }

.mealitems { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.mealitems li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px dotted var(--rule); }
.mealitems li span { flex: 1 1 auto; min-width: 0; font-size: var(--t-ui); }
.mealitems li b { font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); }
.mealitems .x { min-width: 48px; min-height: 48px; font-size: var(--t-display); color: var(--marker); background: 0; border: 0; cursor: pointer; }
.mealitems .mult { font-family: var(--hand); color: var(--marker); }

/* ── ปุ่มเพิ่ม/ลดจำนวนจาน (กินซ้ำได้) ── */
.step { display: inline-flex; gap: .25rem; flex: 0 0 auto; }
.step__b {
  min-width: 44px; min-height: 44px; padding: 0; cursor: pointer;
  font-family: var(--hand); font-size: var(--t-lead); line-height: 1;
  color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--rule);
  border-radius: 11px 9px 12px 10px;   /* มุมไม่เท่ากันให้เข้ากับของอื่นในหน้า */
}
.step__b:active { transform: scale(.94); }
.inmeal {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin: .8rem 0 0; padding: .5rem .7rem;
  font-size: var(--t-ui); color: var(--ink);
  border: 1.5px dashed var(--rule); border-radius: 12px 10px 13px 11px;
}
.inmeal b { font-family: var(--hand); font-size: var(--t-lead); color: var(--marker); }
/* ── สวิตช์ไข่ดาว ── */
.eggtoggle {
  display: flex; align-items: center; gap: .7rem; margin: 1rem 0 0;
  padding: .5rem .7rem; font-size: var(--t-ui);
  border: 1.5px dashed var(--rule); border-radius: 13px 10px 12px 11px;
}
.eggseg { display: inline-flex; gap: .3rem; }
.eggseg button {
  min-height: 44px; min-width: 58px; padding: 0 .6rem; cursor: pointer;
  color: var(--ink); background: transparent; border: 1.5px solid var(--rule);
  border-radius: 10px 12px 9px 11px; font-size: var(--t-ui);
}
.eggseg button.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.eggtoggle small { margin-left: auto; }

/* ── ใส่น้ำหนักจานเอง ── */
.ownweight {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem;
  margin: 1rem 0 0; padding: .55rem .7rem;
  border: 1.5px dashed var(--rule); border-radius: 11px 13px 10px 12px;
  font-size: var(--t-ui); color: var(--ink);
}
.ownweight__field { display: inline-flex; align-items: baseline; gap: .3rem; }
#ow-g {
  width: 5.2ch; padding: 0 .1rem; text-align: center;
  font-family: var(--hand); font-size: var(--t-lead); color: var(--marker);
  background: 0; border: 0; border-bottom: 2px solid var(--ink);
}
#ow-g:focus { outline: none; border-bottom-color: var(--marker); }
.ownweight__reset {
  margin-left: auto; min-height: 44px; padding: 0 .2rem; cursor: pointer;
  font-size: var(--t-meta); color: var(--ink-soft); background: 0; border: 0;
  text-decoration: underline; text-underline-offset: 3px;
}

.mealacts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 .6rem; }
.mealacts .btn { min-height: 48px; font-size: var(--t-ui); }

.clearmeal {
  display: block; margin: -.6rem 0 1.2rem; min-height: 44px; padding: 0;
  font-size: var(--t-meta); color: var(--ink-soft); background: 0; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

.leobox { margin: 1.3rem 0 0; padding: 1rem 0 .2rem; border-top: 2px dotted var(--rule); }
.stamp {
  display: inline-block; font-family: var(--hand); font-size: var(--t-ui); color: var(--ok);
  padding: .1rem .7rem .15rem; border: 2px solid var(--ok);
  border-radius: 12px 9px 13px 8px / 9px 12px 8px 12px; transform: rotate(-2deg);
}
.leobox p, .hook p { margin: .8rem 0 0; line-height: var(--lh-body); }
.hook { margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 2px dotted var(--rule); }
.hook p { margin: 0; }
#tune-btn { margin: 1.2rem 0 0; }

.linecta {
  display: block; margin: 1.2rem 0 0; padding: .9rem 1.1rem; text-decoration: none;
  color: var(--paper); background: var(--ink);
  border-radius: 22px 18px 24px 17px / 17px 22px 18px 21px;
}
.linecta span { display: block; font-family: var(--hand); font-size: var(--t-lead); }
.linecta small { font-size: var(--t-meta); opacity: .85; }

/* ── ตารางจานลีโอ ── */
.leotable { list-style: none; margin: .6rem 0 0; padding: 0; }
.leotable li + li { margin-top: .5rem; }
.leorow {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 76px;
  text-align: left; color: inherit; cursor: pointer;
  padding: .6rem .7rem; background: var(--paper-2); border: 0;
  border-radius: 18px 14px 20px 15px / 14px 18px 15px 19px;
}
.leorow__ep {
  flex: 0 0 auto; font-family: var(--hand); font-size: var(--t-ui);
  color: var(--paper); background: var(--ink); padding: .1rem .5rem;
  border-radius: 9px 7px 10px 6px / 7px 10px 6px 9px; transform: rotate(-1.5deg);
}
.leorow__name { flex: 1 1 auto; min-width: 0; font-size: var(--t-ui); font-weight: 600; }
.leorow__name small { display: block; font-weight: 400; font-size: var(--t-meta); color: var(--ink-soft); }
.leorow__nums { flex: 0 0 auto; text-align: right; font-size: var(--t-meta); color: var(--ink-soft); }
.leorow__nums b { display: block; font-family: var(--hand); font-weight: 500; font-size: var(--t-display); color: var(--ink); }

/* ── หน้าทำไมไม่อ้วน ── */
.why__block { margin: 1.5rem 0; padding-bottom: 1.3rem; border-bottom: 2px dotted var(--rule); }
.why__block:last-of-type { border-bottom: 0; }
.why__ic { width: 3.2rem; height: auto; color: var(--marker); display: block; margin-bottom: .3rem; }
.why__block h3 { font-family: var(--hand); font-weight: 500; font-size: var(--t-lead); margin: 0 0 .4rem; line-height: var(--lh-display); }
.why__block p { margin: 0 0 .7rem; line-height: var(--lh-body); }
.why__block b { color: var(--marker); font-weight: 600; }
.why__take { padding-left: .85rem; border-left: 3px solid var(--ink); }

/* ── แถบล่างติดจอ: ปุ่มหลักอยู่ในระยะนิ้วโป้ง ── */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; gap: .5rem; align-items: stretch;
  padding: .6rem max(var(--gutter), env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 2px solid var(--ink);
}
.bar__main {
  flex: 1 1 auto; min-height: 52px; cursor: pointer; border: 0;
  font-family: var(--hand); font-size: var(--t-display);
  color: var(--paper-2); background: var(--marker);
  border-radius: 22px 18px 24px 17px / 17px 22px 18px 21px;
}
.bar__back, .bar__side {
  flex: 0 0 auto; min-width: 56px; min-height: 52px; cursor: pointer; padding: 0 .9rem;
  font-family: var(--hand); font-size: var(--t-ui);
  color: var(--ink); background: transparent; border: 2px solid var(--ink);
  border-radius: 18px 22px 16px 20px / 20px 16px 22px 17px;
}
.bar__side.on { color: var(--paper); background: var(--ink); }
@media (max-height: 30rem) { .bar { position: static; } body { padding-bottom: 1rem; } }

/* ── ท้ายหน้า ── */
.foot { max-width: 33rem; margin: 0 auto; padding: 1.4rem var(--gutter) 2rem; color: var(--ink-soft); font-size: var(--t-meta); line-height: var(--lh-ui); }
.nav { display: flex; gap: .6rem; justify-content: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.nav button { min-height: 48px; padding: .4rem 1.1rem; font-family: var(--hand); font-size: var(--t-ui); color: var(--ink); background: transparent; border: 1.5px solid var(--rule); border-radius: 15px 12px 16px 11px / 12px 15px 11px 14px; cursor: pointer; }
.cut--foot { display: block; width: 3rem; margin: 0 auto 1rem; color: var(--rule); }
.foot p { margin: 0 0 .6rem; }
.foot b { color: var(--ink); }
.foot a { color: var(--marker); }

/* hover เฉพาะเครื่องที่มีเมาส์จริง — บนมือถือ hover ค้างหลังแตะ */
@media (hover: hover) and (pointer: fine) {
  .row:hover, .leorow:hover, .chip:hover { border-color: var(--ink); }
  .btn--primary:hover { filter: brightness(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .ring path { stroke-dashoffset: 0; }
}

/* ── สแกนบาร์โค้ด ── */
.search__row { display: flex; gap: .5rem; align-items: stretch; }
.search__row input { flex: 1; min-width: 0; }
.scanbtn {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; min-width: 3.6rem; padding: .35rem .6rem;
  font: inherit; font-size: var(--t-meta); color: var(--ink);
  background: var(--paper-2); border: 1.6px dashed var(--rule);
  border-radius: 14px 18px 15px 19px / 18px 14px 19px 15px; cursor: pointer;
}
.scanbtn svg { width: 1.5rem; height: 1.5rem; }
.scanbtn:active { transform: scale(.96); }
.scanov {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12, 14, 12, .94);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.scanov[hidden] { display: none; }
.scanov__box {
  width: 100%; max-width: 26rem; max-height: 100dvh; text-align: center; color: #ece5d4;
  display: flex; flex-direction: column; justify-content: center;
}
.scanov__head { margin: .3rem 0 .6rem; font-size: var(--t-ui); }
/* จำกัดความสูงกล้อง ไม่งั้นวิดีโอแนวตั้งดันปุ่มหลุดจอ */
#scan-reader { width: 100%; max-height: 46dvh; border-radius: 14px; overflow: hidden; background: #000; min-height: 8rem; }
#scan-reader video { width: 100% !important; max-height: 46dvh; object-fit: cover; display: block; }
.scanov__status { margin: .6rem 0; font-size: var(--t-meta); color: #cfc8b6; min-height: 2.4em; }
.scanov__btns {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  padding-bottom: max(.8rem, env(safe-area-inset-bottom));
}
.scanov__btns .btn { flex: 1 1 40%; max-width: 12rem; min-height: 2.9rem; padding: .5rem .7rem; }
.scanov .btn--ghost { color: #ece5d4; border-color: #6b7268; }

/* ── หัวมื้อในบันทึกรายวัน ── */
.mealhead {
  display: flex; align-items: center; gap: .45rem;
  margin: .7rem 0 .15rem; font-size: var(--t-meta);
}
.mealhead b { margin-left: auto; }
.mealhead small { color: var(--ink-soft); }
.mealhead__slot, .mealhead__time {
  font: inherit; color: var(--ink); background: var(--paper-2);
  border: 1.4px dashed var(--rule); border-radius: 10px 13px 11px 14px / 13px 10px 14px 11px;
  padding: .15rem .45rem; -webkit-appearance: none; appearance: none;
}
.mealhead__time { width: 6.2ch; text-align: center; }
.mealhead__open { color: var(--ink-soft); font-style: italic; }

/* ── วงแหวนมาโครวันนี้ ── */
.mrings { display: flex; gap: .6rem; justify-content: space-around; margin: .7rem 0 .3rem; }
.mring { position: relative; text-align: center; flex: 1; max-width: 8.5rem; }
.mring svg { width: 100%; max-width: 6.2rem; height: auto; transform: rotate(-90deg); }
.mring__bg { fill: none; stroke: var(--rule); stroke-width: 7; opacity: .5; }
.mring__seg { fill: none; stroke-width: 7; stroke-linecap: round; }
.mring__seg.is-c { stroke: var(--warn); }
.mring__seg.is-p { stroke: var(--ok); }
.mring__seg.is-f { stroke: var(--marker); }
.mring__mid { position: absolute; top: 1.55rem; left: 0; right: 0; line-height: 1.1; }
.mring__mid b { font-size: var(--t-ui); }
.mring__mid small { display: block; color: var(--ink-soft); }
.mring__label { display: block; margin-top: .15rem; }
.mring__left { display: block; font-size: var(--t-meta); color: var(--ink-soft); }
.mring__left.is-over { color: var(--warn); }

/* ── น้ำหนัก + กราฟแท่ง + แผน ── */
.wt__row { display: flex; gap: .5rem; margin: .3rem 0; }
.wt__row input {
  width: 6.5rem; font: inherit; font-size: var(--t-ui); text-align: center;
  color: var(--ink); background: var(--paper-2); border: 1.6px solid var(--rule);
  border-radius: 14px 11px 15px 12px / 11px 15px 12px 14px; padding: .45rem .5rem;
}
.wt__trend { margin: .4rem 0 0; }
.wt__trend b { margin: 0 .15rem; }
.chartstats { display: flex; justify-content: space-between; gap: .5rem; margin: .3rem 0 .5rem; }
.chartstats span { text-align: center; flex: 1; }
.chartstats b { display: block; font-size: var(--t-ui); }
.chartstats small { color: var(--ink-soft); }
.barchart { width: 100%; height: auto; display: block; }
.barchart .bar { fill: var(--ok); opacity: .85; }
.barchart .bar.is-over { fill: var(--warn); }
.barchart .quota-line { stroke: var(--marker); stroke-width: 1.4; stroke-dasharray: 4 3; }
.barchart .quota-text { fill: var(--marker); font-size: 9px; }
.barchart .axis-text { fill: var(--ink-soft); font-size: 9px; }
.planbox { margin-top: 1rem; }

/* ── เลือกมื้อจากหน้าผล ── */
.mslot { display: flex; align-items: baseline; gap: .6rem; margin: .6rem 0 .2rem; flex-wrap: wrap; }
.mslot__label { color: var(--ink-soft); font-size: var(--t-meta); flex: 0 0 auto; }
.mslot__chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.mslot__c {
  font: inherit; font-size: var(--t-meta); color: var(--ink);
  background: var(--paper-2); border: 1.5px solid var(--rule);
  border-radius: 12px 9px 13px 10px / 9px 13px 10px 12px;
  padding: .25rem .65rem; cursor: pointer;
}
.mslot__c.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mslot__c.on.auto { background: var(--paper-2); color: var(--ink); border-style: dashed; border-color: var(--ink); }

/* ── ลิสต์จานแนะนำ ── */
.reco-note { padding: .5rem .2rem .6rem; color: var(--ink-soft); font-size: var(--t-meta); list-style: none; }
.row__why { display: block; margin-top: .15rem; font-size: var(--t-meta); color: var(--ok); }

/* ── ภาพสอนติดหน้าจอ ── */
.a2hs__how { display: flex !important; gap: .6rem; justify-content: center; align-items: stretch; margin-top: .6rem; }
.a2hs__how[hidden] { display: none !important; }
.a2hs__step {
  flex: 1; max-width: 8.5rem; text-align: center;
  border: 1.5px dashed var(--rule); border-radius: 15px 11px 16px 12px / 11px 16px 12px 15px;
  padding: .6rem .4rem .5rem;
}
.a2hs__step svg { width: 2.4rem; height: 2.4rem; color: var(--marker); }
.a2hs__step small { display: block; margin-top: .3rem; color: var(--ink-soft); line-height: 1.45; }

/* ── เพิ่มจานย้อนหลัง ── */
.logday__bf { margin-left: .4rem; }
.bf { margin: .5rem 0 .2rem; }
.bf input {
  width: 100%; font: inherit; font-size: var(--t-ui); color: var(--ink);
  background: var(--paper-2); border: 1.6px solid var(--rule);
  border-radius: 14px 11px 15px 12px / 11px 15px 12px 14px; padding: .5rem .8rem;
}
.bf__hits { list-style: none; margin: .3rem 0 0; padding: 0; }
.bf__hits button {
  display: flex; gap: .5rem; align-items: baseline; width: 100%; text-align: left;
  font: inherit; color: var(--ink); background: none; border: 0;
  border-bottom: 1px dotted var(--rule); padding: .45rem .2rem; cursor: pointer;
}
.bf__hits b { margin-left: auto; }
.bf__hits small { color: var(--ink-soft); }

/* ลิงก์ในเนื้อความ — สีตามธีม ไม่ใช่น้ำเงิน default ที่จมพื้นโหมดมืด */
.inlink { color: var(--marker); text-decoration: underline; text-underline-offset: 3px; }

/* ── วันติด ── */
.streak {
  margin: .4rem 0 .1rem; padding: .35rem .8rem; display: inline-block;
  font-size: var(--t-meta); color: var(--ink);
  border: 1.5px dashed var(--marker); border-radius: 14px 10px 15px 11px / 10px 15px 11px 14px;
}
.streak b { color: var(--marker); font-size: var(--t-ui); margin: 0 .1rem; }
.streak--log { display: block; text-align: center; margin-bottom: .7rem; }

/* ── ปุ่มแชร์ ── */
.sharebtn { display: block; margin: .2rem auto .9rem; max-width: 16rem; }

/* ── ย้ายข้อมูล + เตือน webview ── */
.movebox { margin-top: 1rem; }
.movebox textarea {
  width: 100%; font: inherit; font-size: .8rem; color: var(--ink);
  background: var(--paper-2); border: 1.6px solid var(--rule); border-radius: 12px;
  padding: .5rem; word-break: break-all;
}
.movebox__btns { display: flex; gap: .5rem; margin: .5rem 0; flex-wrap: wrap; }
.movebox__btns .btn { flex: 1; min-width: 10rem; }
.wvwarn {
  position: sticky; top: 0; z-index: 50;
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--ink); color: var(--paper);
  padding: .7rem .9rem; font-size: var(--t-meta); line-height: 1.5;
}
.wvwarn b { color: #f2c14e; }
.wvwarn button {
  font: inherit; font-size: 1.2rem; line-height: 1; color: var(--paper);
  background: none; border: 0; padding: .1rem .4rem; cursor: pointer;
}