/* ฟอนต์ Anuphan ฝังในแอป (SIL OFL ดู fonts/OFL.txt) ทุกเครื่องจึงเห็นเหมือนกัน */
@font-face {
  font-family: "Anuphan"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/anuphan-thai.woff2) format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Anuphan"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/anuphan-latin.woff2) format("woff2");
  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 {
  --ground: #eef2f0;
  --surface: #ffffff;
  --surface-2: #f5f8f7;
  --ink: #142320;
  --ink-2: #5a6b67;
  --hair: #dde5e2;
  --teal: #0d6b63;        /* ตัวหนังสือขาวบนสีนี้อ่านง่าย */
  --teal-soft: #d9ede9;
  --on-teal: #ffffff;
  --protein: #b45a0b;
  --carbs: #2b55c9;
  --fat: #c0284a;
  --water: #0b7bb5;
  --strain: #1a6fd1;
  --good: #1f8a4c;
  --bad: #c0392b;
  --rec-red: #d1453b;
  --rec-yellow: #b98100;
  --rec-green: #1f9d55;
  --shadow: 0 1px 2px rgba(20,35,32,.06), 0 8px 24px rgba(20,35,32,.06);
  --radius: 20px;
  --font: "Anuphan", "Noto Sans Thai", "Sukhumvit Set", "Leelawadee UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b1312; --surface: #131e1c; --surface-2: #1a2725; --ink: #e6efec; --ink-2: #93a5a0; --hair: #263533;
    --teal: #3cc7b4; --teal-soft: #173c37; --on-teal: #04211e;
    --protein: #f39b3d; --carbs: #7aa2ff; --fat: #ff7a93; --water: #45b8f0; --strain: #3b8ff0;
    --good: #4ade80; --bad: #f87171; --rec-red: #ff6b5f; --rec-yellow: #f5c026; --rec-green: #3ddc84;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font: 15px/1.5 var(--font); -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }
.muted { color: var(--ink-2); font-size: 14px; }
.error { color: var(--bad); font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }
.good { color: var(--good); }
.bad { color: var(--bad); }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; border-radius: 12px; padding: 10px 14px; background: var(--teal-soft); color: var(--teal); font-weight: 600; }
button.primary, .btn.primary { background: var(--teal); color: var(--on-teal); }
button.ghost { background: transparent; padding: 6px 8px; }
button.danger { background: transparent; color: var(--bad); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, a:focus-visible, label:focus-within, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.btn { display: inline-block; text-decoration: none; border-radius: 12px; padding: 10px 14px; background: var(--teal-soft); color: var(--teal); font-weight: 600; cursor: pointer; text-align: center; }
input, textarea, select { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--surface-2); }
label { display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.link, .link-btn { color: var(--teal); font-size: 13px; font-weight: 600; text-decoration: none; background: none; padding: 0; }

.screen { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { background: var(--surface); border-radius: var(--radius); padding: 24px; width: min(380px, 100%); display: grid; gap: 12px; box-shadow: var(--shadow); }

main { padding: calc(env(safe-area-inset-top) + 18px) 14px calc(100px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
.view { display: grid; gap: 12px; }

/* หัวของแต่ละหน้า */
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.top h1 { font-size: 26px; line-height: 1.1; }
.sub { font-size: 13px; color: var(--ink-2); }
.sub b { color: var(--ink); font-weight: 600; }
.pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--teal-soft); color: var(--teal); white-space: nowrap; }

.card { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.card h3, .mini h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hint { font-size: 13px; background: var(--surface-2); border-radius: 12px; padding: 8px 10px; color: var(--ink-2); }

/* แถบความคืบหน้า (SVG เพราะ CSP ห้าม style inline) */
.bar { height: 8px; border-radius: 99px; background: var(--hair); overflow: hidden; display: block; }
.bar.thick { height: 14px; }
.bar svg { display: block; width: 100%; height: 100%; }
.f-teal { fill: var(--teal); } .f-protein { fill: var(--protein); } .f-carbs { fill: var(--carbs); } .f-fat { fill: var(--fat); } .f-water { fill: var(--water); } .f-bad { fill: var(--bad); }
.f-faint { opacity: .35; }
.f-goal { fill: var(--ink); }

/* hero: วงแหวนแคลอรี่ + มาโคร */
.hero { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; }
.ring { width: 132px; height: 132px; display: block; }
.ring.small { width: 112px; height: 112px; }
.ring circle { fill: none; }
.r-bg { stroke: var(--hair); }
.r-fg { stroke: var(--teal); stroke-linecap: round; }
.r-fg.over { stroke: var(--bad); }
.r-big { fill: var(--ink); font-size: 26px; font-weight: 700; text-anchor: middle; font-family: var(--font); }
.r-sub { fill: var(--ink-2); font-size: 11px; text-anchor: middle; font-family: var(--font); }
.macros { display: grid; gap: 9px; min-width: 0; }
.mac { display: grid; gap: 3px; }
.mac .row { font-size: 13px; }
.mac .row span:last-child { color: var(--ink-2); }

/* ดุลพลังงาน */
.eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--ink-2); }
.eq b { display: block; font-size: 18px; color: var(--ink); }
.eq b.good { color: var(--good); } .eq b.bad { color: var(--bad); }
.eq i { font-style: normal; font-size: 16px; }

/* Whoop: วงแหวนแบบแอป Whoop */
.wrings { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 8px; align-items: center; }
.wr { display: grid; justify-items: center; gap: 4px; }
.wring { width: 100%; max-width: 92px; height: auto; display: block; }
.wring circle { fill: none; }
.r-strain { stroke: var(--strain); }
.r-rec-red { stroke: var(--rec-red); } .r-rec-yellow { stroke: var(--rec-yellow); } .r-rec-green { stroke: var(--rec-green); }
.wr-val { fill: var(--ink); font-size: 22px; font-weight: 700; text-anchor: middle; font-family: var(--font); }
.wl { font-size: 12px; color: var(--ink-2); text-align: center; }
.wl.strain { color: var(--strain); font-weight: 600; }
.wsleep { display: grid; justify-items: center; gap: 2px; text-align: center; }
.wsleep > b { font-size: 30px; line-height: 1.1; }
.wsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; width: 100%; }
.wsplit span { display: grid; font-size: 11px; color: var(--ink-2); }
.wsplit b { font-size: 17px; color: var(--ink); }
.wbanner { background: var(--strain); color: #fff; border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.whoop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.w b { display: block; font-size: 20px; line-height: 1.2; }
.w span { font-size: 11px; color: var(--ink-2); }
.rec { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 99px; display: inline-block; background: var(--hair); }
.rec-red { color: var(--rec-red); } .dot.rec-red { background: var(--rec-red); }
.rec-yellow { color: var(--rec-yellow); } .dot.rec-yellow { background: var(--rec-yellow); }
.rec-green { color: var(--rec-green); } .dot.rec-green { background: var(--rec-green); }

/* อดอาหาร + น้ำ วางคู่กัน */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini { background: var(--surface); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; min-width: 0; }
.mini .val { font-size: 22px; font-weight: 700; line-height: 1.1; }
.mini .val small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.mini button { width: 100%; padding: 7px 0; font-size: 13px; border-radius: 10px; }
.glasses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.glass { height: 16px; border-radius: 4px 4px 6px 6px; border: 1.5px solid var(--water); opacity: .45; }
.glass.on { background: var(--water); opacity: 1; }

/* มื้ออาหาร */
.meals { display: grid; }
.meal { display: grid; grid-template-columns: 42px 48px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; color: var(--ink); text-align: left; width: 100%; font-weight: 400; }
.meal:first-child { border-top: 0; }
.meal.no-time { grid-template-columns: 48px 1fr auto; }
.meal time { font-size: 12px; color: var(--ink-2); }
.thumb { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; font-size: 11px; color: var(--ink-2); overflow: hidden; object-fit: cover; }
.meal .t { font-weight: 600; font-size: 14px; line-height: 1.3; }
.meal .s { font-size: 12px; color: var(--ink-2); }
.meal > span { min-width: 0; }
.meal .k { text-align: right; display: grid; justify-items: end; gap: 2px; }
.meal .k b { font-size: 15px; }
.share { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--teal-soft); color: var(--teal); }
.empty { color: var(--ink-2); font-size: 14px; padding: 6px 0; }

/* แถบล่าง + ปุ่มกล้องตรงกลาง */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; background: var(--surface); border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 1fr 1fr 80px 1fr 1fr; align-items: center; padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
}
.tabbar a { text-align: center; font-size: 11px; color: var(--ink-2); display: grid; gap: 2px; justify-items: center; text-decoration: none; padding: 2px 0; }
.tabbar a.active { color: var(--teal); font-weight: 600; }
.tabbar svg { width: 22px; height: 22px; }
.cam { width: 60px; height: 60px; border-radius: 99px; background: var(--teal); color: var(--on-teal); display: grid; place-items: center; margin: -28px auto 0; box-shadow: 0 6px 16px rgba(13,107,99,.35); border: 4px solid var(--surface); padding: 0; }
.cam svg { width: 26px; height: 26px; }

/* แผ่นเลื่อนขึ้นจากด้านล่าง และหน้าเต็มจอ */
dialog { border: 0; padding: 0; color: var(--ink); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog.sheet { width: 100%; max-width: 640px; margin: auto auto 0; border-radius: 22px 22px 0 0; background: var(--surface); max-height: 88vh; }
dialog.sheet > div { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
dialog.full { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; background: var(--ground); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.icon-btn { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; background: none; color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }

/* หน้าบันทึก */
.cap { max-width: 520px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 10px) 14px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.cap-head { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; }
.cap-head h2 { font-size: 20px; }
.viewfinder { aspect-ratio: 1 / 1; max-width: 100%; border-radius: 22px; position: relative; overflow: hidden; background: #1d2725; }
.viewfinder video, .viewfinder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.corner { position: absolute; width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.9); pointer-events: none; }
.vf-tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.vf-tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.vf-bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.vf-br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.vf-hint { position: absolute; left: 0; right: 0; top: 16px; text-align: center; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.cam-off { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; padding: 24px; text-align: center; color: #e6efec; font-size: 14px; }
.describe { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; padding: 6px 6px 6px 4px; }
.describe textarea { border: 0; background: none; resize: none; padding: 6px 8px; }
.mic { width: 40px; height: 40px; border-radius: 99px; padding: 0; display: grid; place-items: center; }
.mic svg { width: 20px; height: 20px; }
.mic.on { background: var(--bad); color: #fff; }
.cap-meta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.cap-meta .when { font-size: 13px; }
.cap-meta input { padding: 6px 10px; font-size: 14px; }
.shutter-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.side { display: grid; gap: 6px; justify-items: center; font-size: 11px; color: var(--ink-2); }
.circ { width: 48px; height: 48px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink); padding: 0; cursor: pointer; }
.circ svg { width: 22px; height: 22px; }
.shutter { width: 84px; height: 84px; border-radius: 99px; border: 4px solid var(--teal); display: grid; place-items: center; background: none; padding: 0; }
.shutter > span { width: 66px; height: 66px; border-radius: 99px; background: var(--teal); display: grid; place-items: center; color: var(--on-teal); }
.shutter svg { width: 28px; height: 28px; }
.shutter .i-send { display: none; }
#capture[data-mode="photo"] .shutter .i-cam { display: none; }
#capture[data-mode="photo"] .shutter .i-send { display: block; stroke-width: 2.6; }
#capture[data-mode="busy"] .shutter > span { opacity: .5; }
.cap-status { text-align: center; font-size: 14px; color: var(--ink-2); }
.cap-status.error { color: var(--bad); }
.water-strip { background: var(--surface); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); display: grid; gap: 8px; }
.water-strip h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
.wbtn { border: 1.5px solid var(--water); color: var(--water); background: none; border-radius: 12px; padding: 6px 4px; font-size: 14px; line-height: 1.25; }
.wbtn small { display: block; font-weight: 500; font-size: 11px; color: var(--ink-2); }

/* รายละเอียดมื้อ */
.detail { max-width: 560px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 10px) 14px calc(90px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.detail-head { display: grid; grid-template-columns: 36px 1fr; gap: 6px; align-items: start; }
.detail-head h2 { font-size: 22px; text-wrap: balance; }
.photo { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.photo img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.photo .conf { position: absolute; left: 10px; bottom: 10px; font-size: 12px; background: rgba(0,0,0,.6); color: #fff; padding: 3px 10px; border-radius: 99px; }
.share-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.share-big b { font-size: 44px; line-height: 1; font-weight: 700; }
.share-big span { color: var(--ink-2); font-size: 14px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--teal); margin-right: 5px; vertical-align: -1px; }
.legend i.faint { opacity: .35; }
.warnchip { font-size: 11px; font-weight: 600; color: var(--bad); }
.okchip { font-size: 11px; font-weight: 600; color: var(--good); }
.tip { font-size: 14px; background: var(--teal-soft); border-radius: 14px; padding: 10px 12px; }
.items { display: grid; }
.item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.item:first-child { border-top: 0; }
.item small { display: block; color: var(--ink-2); font-size: 12px; }
.edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
.actionbar button { background: none; color: var(--ink-2); display: grid; gap: 2px; justify-items: center; font-size: 11px; font-weight: 500; padding: 4px 0; }
.actionbar button.del { color: var(--bad); }
.actionbar svg { width: 22px; height: 22px; }

/* ประวัติ */
.seg { display: inline-grid; grid-auto-flow: column; background: var(--surface); border-radius: 12px; padding: 3px; box-shadow: var(--shadow); }
.seg button { background: none; color: var(--ink-2); padding: 5px 14px; border-radius: 10px; font-size: 13px; }
.seg button.on { background: var(--teal); color: var(--on-teal); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { background: var(--surface); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 2px; align-content: start; }
.tile span { font-size: 12px; color: var(--ink-2); }
.tile b { font-size: 24px; line-height: 1.2; }
.tile b small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--ink-2); font-size: 11px; font-family: var(--font); }
.c-bar { fill: var(--teal); }
.c-bar.over { fill: var(--bad); }
.c-burn { fill: none; stroke: var(--protein); stroke-width: 2; }
.c-burn-dot { fill: var(--protein); }
.c-goal { stroke: var(--ink-2); stroke-dasharray: 5 5; }
.c-grid { stroke: var(--hair); }
.days { display: grid; }
.dayrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; color: var(--ink); text-align: left; width: 100%; font-weight: 400; }
.dayrow:first-child { border-top: 0; }
.dayrow .d b { display: block; font-size: 14px; }
.dayrow .d span { font-size: 11px; color: var(--ink-2); }
.dayrow .mid { display: grid; gap: 4px; min-width: 0; }
.dayrow .mid .row { font-size: 12px; color: var(--ink-2); }
.dayrow .net { font-size: 13px; font-weight: 600; text-align: right; }
.dayrow .net small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-2); }

/* น้ำ/อด */
.fast-hero { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.logs { display: grid; }
.log { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.log:first-child { border-top: 0; }
.log button { padding: 4px 10px; font-size: 13px; }

/* ตั้งค่า */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; margin: 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--teal-soft); color: var(--teal); font-weight: 600; }
.preset { display: grid; grid-template-columns: 1fr 96px 40px; gap: 8px; align-items: center; }
.preset button { padding: 8px 0; background: none; color: var(--ink-2); }

.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 50;
  background: var(--ink); color: var(--ground); padding: 12px 16px; border-radius: 12px; text-align: center; max-width: 520px; margin: 0 auto;
}

/* หน้า privacy */
.legal { max-width: 680px; margin: 0 auto; padding: 32px 16px 64px; display: grid; gap: 10px; }
.legal h1 { margin-top: 8px; }
.legal h2 { margin-top: 12px; }
.legal p, .legal ul { margin: 0; }
.legal hr { border: 0; border-top: 1px solid var(--hair); margin: 24px 0; width: 100%; }

@media (max-width: 360px) {
  .hero, .fast-hero { grid-template-columns: 1fr; justify-items: center; }
  .whoop { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .r-fg { transition: stroke-dasharray .5s ease; }
}
.legend i.burn-key { background: var(--protein); }

/* ---------- เป้าหมาย ---------- */
dialog.sheet > form { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
button.small { padding: 6px 12px; font-size: 13px; }
.mini-h { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; text-decoration: none; }
.big-kg { font-size: 34px; font-weight: 700; line-height: 1.1; }
.pill.st-good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.pill.st-warn { background: color-mix(in srgb, var(--rec-yellow) 18%, transparent); color: var(--rec-yellow); }
.pill.st-bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dates div { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; display: grid; }
.dates span { font-size: 11px; color: var(--ink-2); }
.dates b { font-size: 15px; }

.c-trend { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linejoin: round; }
.c-dot { fill: var(--ink-2); opacity: .45; }
.c-plan { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 6 5; }
.c-expect { fill: none; stroke: var(--protein); stroke-width: 2; stroke-dasharray: 3 4; }
.c-target { stroke: var(--good); stroke-width: 1.5; }
.legend i.k-dot { background: var(--ink-2); opacity: .45; border-radius: 99px; }
.legend i.k-plan { background: none; border-top: 2px dashed var(--ink-2); height: 0; width: 14px; border-radius: 0; vertical-align: 3px; }
.legend i.k-expect { background: none; border-top: 2px dotted var(--protein); height: 0; width: 14px; border-radius: 0; vertical-align: 3px; }

.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp div { background: var(--surface-2); border-radius: 12px; padding: 10px; display: grid; gap: 2px; }
.cmp span { font-size: 12px; color: var(--ink-2); }
.cmp b { font-size: 18px; }
.findings { display: grid; gap: 8px; }
.finding { border-left: 3px solid var(--rec-yellow); background: var(--surface-2); border-radius: 0 12px 12px 0; padding: 8px 12px; display: grid; gap: 2px; }
.finding p { font-size: 13px; color: var(--ink-2); }
.finding.k-info, .finding.k-noise { border-left-color: var(--water); }
.finding.k-whoop_high, .finding.k-unlogged, .finding.k-fast { border-left-color: var(--bad); }
.actions { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }

.tdee { display: grid; gap: 8px; }
.tdee div { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.tdee div.on { background: var(--teal-soft); }
.tdee span { font-size: 13px; }
.tdee div.on span { color: var(--teal); font-weight: 600; }
.tdee b { font-size: 18px; grid-row: span 2; align-self: center; }
.tdee small { font-size: 11px; color: var(--ink-2); }

.pace-val b { font-size: 28px; }
input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--teal); height: 28px; }
.pace-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }

.bmi { width: 100%; height: 18px; display: block; }
.b-under { fill: var(--water); } .b-ok { fill: var(--good); } .b-over { fill: var(--rec-yellow); } .b-ob { fill: var(--bad); } .b-ob2 { fill: var(--fat); }
.b-now { fill: var(--ink); } .b-target { fill: var(--good); }
.bmi-labels { display: grid; grid-template-columns: 14% 26% 20% 20% 1fr; font-size: 11px; color: var(--ink-2); }
.bmi-labels span { transform: translateX(-50%); width: max-content; }
.bmi-labels span:nth-child(1) { grid-column: 2; } .bmi-labels span:nth-child(2) { grid-column: 3; }
.bmi-labels span:nth-child(3) { grid-column: 4; } .bmi-labels span:nth-child(4) { grid-column: 5; }

.hearts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hearts > div { display: grid; gap: 2px; background: var(--surface-2); border-radius: 12px; padding: 10px; }
.hearts span, .hearts small { font-size: 11px; color: var(--ink-2); }
.hearts b { font-size: 22px; }
.spark { width: 100%; height: 40px; display: block; }
.spark path { fill: none; stroke-width: 2; }
.s-rhr { stroke: var(--fat); } .s-hrv { stroke: var(--teal); }

.scan-up { display: grid; gap: 6px; }
.comp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.comp div { background: var(--surface-2); border-radius: 12px; padding: 8px; display: grid; gap: 0; align-content: start; }
.comp span { font-size: 11px; color: var(--ink-2); }
.comp b { font-size: 17px; }
.comp b small { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.comp > div > small { font-size: 12px; font-weight: 600; }
.finding.k-health { border-left-color: var(--bad); }
.finding.k-good, .finding.k-muscle_loss { border-left-color: var(--good); }
.finding.k-muscle_loss { border-left-color: var(--bad); }
@media (max-width: 400px) { .comp { grid-template-columns: repeat(2, 1fr); } }

.big-steps { font-size: 20px; }

/* น้ำตาล */
.tiles .tile b.rec-yellow { color: var(--rec-yellow); }
.gb-low { fill: var(--bad); opacity: .08; } .gb-ok { fill: var(--good); opacity: .10; } .gb-high { fill: var(--bad); opacity: .08; }
.gd { stroke: none; } .gd.rec-green { fill: var(--rec-green); } .gd.rec-yellow { fill: var(--rec-yellow); } .gd.rec-red { fill: var(--rec-red); }
.legend i.k-ok { background: var(--good); opacity: .4; } .legend i.k-high { background: var(--bad); opacity: .4; }
.mresp { display: grid; justify-items: end; text-align: right; }
.mresp b { font-size: 18px; } .mresp small { font-size: 11px; color: var(--ink-2); }
.seg { flex-wrap: wrap; }

/* ผลแล็บ */
.small-btn { padding: 8px 12px; font-size: 13px; }
.lab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lab-tile { display: grid; gap: 2px; text-align: left; background: var(--surface-2); color: var(--ink); border-radius: 14px; padding: 10px; font-weight: 400; align-content: start; }
.lab-name { font-size: 12px; color: var(--ink-2); }
.lab-tile b { font-size: 20px; } .lab-tile b small { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.lab-meta { font-size: 11px; color: var(--ink-2); }
.s-lab { stroke: var(--teal); }
.spark-big .spark { height: 70px; }
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }