/* =========================================================
   BMI Health Fresh — Redesign 2026 theme (light + dark)
   ========================================================= */

:root {
  --g-50:#edfdf4; --g-100:#d5f7e4; --g-200:#a9eecb; --g-300:#6fe0aa;
  --g-400:#34d399; --g-500:#12b981; --g-600:#0f9d6c; --g-700:#0b7a55;
  --teal:#10b0a8; --lime:#a3e635;

  --bg:#f4faf6; --bg-2:#eaf5ee; --surface:#ffffff; --surface-2:#f7fbf9;
  --ink:#0c211a; --ink-soft:#43574e; --muted:#7a8b82; --line:#e3efe8; --line-2:#d3e6db;

  --sh-sm:0 1px 2px rgba(6,50,34,.06),0 2px 6px rgba(6,50,34,.05);
  --sh-md:0 12px 30px -14px rgba(6,60,40,.22);
  --sh-lg:0 32px 64px -24px rgba(6,60,40,.30);
  --sh-glow:0 18px 40px -16px rgba(15,157,108,.5);

  --c-under:#38bdf8; --c-normal:#12b981; --c-over:#f5b301; --c-ob1:#f97316; --c-ob2:#ef4444;

  /* accent อุ่น (ใช้เน้นตัวเลข/หัวข้อ ให้มีชีวิตชีวาโดยไม่หลุดแบรนด์เขียว) */
  --accent:#f5a524; --accent-2:#f97316;

  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px; --maxw:1160px;
  /* เนื้อหา: IBM Plex Sans Thai · หัวข้อ: Anuphan · ตัวเลข/Latin: Plus Jakarta (fallback ต่อตัวอักษร — Jakarta ไม่มีสระไทย เลยตกไป Anuphan อัตโนมัติ) */
  --f-th:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,-apple-system,sans-serif;
  --f-di:"Plus Jakarta Sans","Anuphan","IBM Plex Sans Thai",sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark; /* ให้ native control (select/option, scrollbar, ปฏิทิน) เรนเดอร์โทนมืดคอนทราสต์ถูก */
  --bg:#071310; --bg-2:#0d1f18; --surface:#122a22; --surface-2:#0f241d;
  /* ปรับให้อ่านชัดขึ้น (WCAG AA): ink สว่างเต็ม, ink-soft/muted สว่างขึ้นจากเดิม */
  --ink:#eef7f3; --ink-soft:#c6d8d0; --muted:#9fb6ac; --line:#284437; --line-2:#356050;
  --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 12px 30px -14px rgba(0,0,0,.6);
  --sh-lg:0 32px 64px -24px rgba(0,0,0,.7); --sh-glow:0 18px 40px -16px rgba(15,157,108,.4);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;font-size:80%}
body{font-family:var(--f-th);background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s ease,color .4s ease}
a{color:inherit;text-decoration:none}
svg{display:block}
img{display:block;max-width:100%;height:auto}
ul{list-style:none}
input,select,button{font-family:inherit}
/* ฟอร์ม: placeholder + ตัวเลือก dropdown ให้อ่านชัดทั้งสองโหมด */
input::placeholder{color:var(--muted);opacity:1}
select{color:var(--ink)}
select option{background:var(--surface);color:var(--ink)}
[data-theme="dark"] select option{background:#122a22;color:#eef7f3}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.container--narrow{max-width:820px}
h1,h2,h3,h4,.brand__text,.num{font-family:var(--f-di);letter-spacing:-.01em}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-size:.98rem;padding:.72em 1.4em;border:1px solid transparent;border-radius:999px;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .25s,background .25s,color .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--sm{padding:.52em 1.05em;font-size:.9rem}
.btn--lg{padding:.9em 1.8em;font-size:1.05rem}
.btn--block{width:100%}
.btn--primary{background:linear-gradient(135deg,var(--g-400),var(--g-600));color:#fff;box-shadow:var(--sh-glow)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(15,157,108,.65)}
.btn--ghost{background:var(--surface);color:var(--g-700);border-color:var(--line-2);box-shadow:var(--sh-sm)}
[data-theme="dark"] .btn--ghost{color:var(--g-300)}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--g-400)}
.btn--light{background:#fff;color:var(--g-700);box-shadow:var(--sh-md)}
.btn--light:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}

/* Topbar */
.topbar{background:linear-gradient(90deg,var(--g-700),var(--g-600));color:#eafff6;font-size:.84rem}
.topbar__inner{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.5rem 22px;flex-wrap:wrap}
.topbar a{font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Navbar */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.28rem}
.brand__mark{font-size:1.4rem;filter:drop-shadow(0 3px 6px rgba(16,185,129,.4))}
.brand__text{letter-spacing:-.02em}
.nav__links{display:flex;gap:1.5rem}
.nav__links a{font-weight:600;font-size:.96rem;color:var(--ink-soft);position:relative;padding:.3em 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--g-500);border-radius:2px;transition:width .25s}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-active::after{width:100%}
.nav__links a.is-active{color:var(--ink)}
.nav__actions{display:flex;align-items:center;gap:.55rem}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font-size:1.05rem;display:grid;place-items:center;transition:transform .25s,border-color .2s}
.icon-btn:hover{transform:rotate(-12deg) scale(1.05);border-color:var(--g-400)}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;border:1px solid var(--line-2);background:var(--surface);border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{position:relative;padding:clamp(2.6rem,6vw,5rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.hero__aurora{position:absolute;inset:-30% -10% auto -10%;height:720px;z-index:0;pointer-events:none;background:radial-gradient(560px 380px at 82% 12%,rgba(16,176,168,.30),transparent 68%),radial-gradient(620px 420px at 12% 6%,rgba(52,211,153,.28),transparent 66%),radial-gradient(500px 500px at 60% 40%,rgba(163,230,53,.10),transparent 70%);filter:blur(6px)}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:var(--g-50);color:var(--g-700);border:1px solid var(--g-100);padding:.42em 1em;border-radius:999px;font-size:.84rem;font-weight:700}
[data-theme="dark"] .pill{background:rgba(16,185,129,.12);color:var(--g-300);border-color:rgba(16,185,129,.25)}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--g-500);box-shadow:0 0 0 4px rgba(16,185,129,.22);animation:pulse 2.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(16,185,129,0)}}
.hero__title{font-size:clamp(2.3rem,5.6vw,4rem);line-height:1.06;font-weight:800;margin:1.1rem 0 .9rem}
.grad{background:linear-gradient(100deg,var(--g-400),var(--accent) 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{color:var(--ink-soft);font-size:1.12rem;max-width:48ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.7rem 0 1.9rem}
.trust{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.trust li{display:flex;flex-direction:column}
.trust strong{font-family:var(--f-di);font-size:1.55rem;color:var(--g-600);line-height:1}
.trust span{font-size:.84rem;color:var(--muted);margin-top:.2rem}
.trust__div{width:1px;height:34px;background:var(--line-2)}
.hero__card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:1.6rem;box-shadow:var(--sh-lg);display:grid;gap:1.1rem;justify-items:center}
.hero__card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(52,211,153,.6),transparent 40%,rgba(16,176,168,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hero__card-head{display:flex;align-items:center;justify-content:space-between;width:100%}
.hero__card-tag{font-size:.8rem;font-weight:700;color:var(--g-700);background:var(--g-50);padding:.3em .8em;border-radius:999px}
[data-theme="dark"] .hero__card-tag{background:rgba(16,185,129,.14);color:var(--g-300)}
.hero__card-live{font-size:.74rem;font-weight:700;color:var(--g-500);letter-spacing:.05em}
.ring{--pct:.5;width:196px;height:196px;border-radius:50%;display:grid;place-items:center;position:relative;transition:transform .3s;
  background:radial-gradient(closest-side,var(--surface) 72%,rgba(255,255,255,.07) 72.5% 73.5%,transparent 74% 100%),
  conic-gradient(from 0deg,var(--c-under) 0 19.3%,rgba(4,20,15,.9) 19.3% 20.7%,var(--c-normal) 20.7% 44.3%,rgba(4,20,15,.9) 44.3% 45.7%,var(--c-over) 45.7% 61.3%,rgba(4,20,15,.9) 61.3% 62.7%,var(--c-ob1) 62.7% 81.3%,rgba(4,20,15,.9) 81.3% 82.7%,var(--c-ob2) 82.7% 100%);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
/* แสงเรืองหมุนรอบวง */
.ring::before{content:"";position:absolute;inset:-15px;border-radius:50%;background:conic-gradient(from 0deg,rgba(52,211,153,.55),rgba(56,189,248,.4),rgba(245,165,36,.45),rgba(52,211,153,.55));filter:blur(15px);opacity:.5;z-index:-1;animation:ringspin 10s linear infinite}
@keyframes ringspin{to{transform:rotate(360deg)}}
/* หมุดเรืองแสงชี้ค่า */
.ring::after{content:"";position:absolute;top:4px;left:50%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,#cfe8dd);transform-origin:50% 94px;transform:translateX(-50%) rotate(calc(var(--pct) * 360deg));transition:transform .9s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 0 3px var(--surface),0 0 16px 4px rgba(255,255,255,.6);z-index:2}
.ring__inner{display:grid;justify-items:center;gap:0;text-align:center;position:relative;z-index:1}
.ring__num{font-family:var(--f-di);font-size:2.6rem;font-weight:800;line-height:1;text-shadow:0 0 20px rgba(255,255,255,.22)}
.ring__unit{font-size:.72rem;color:var(--muted);letter-spacing:.18em;margin-top:.1rem}
.ring__label{font-weight:800;color:var(--g-500);font-size:.95rem;margin-top:.4rem}
.hero__mini{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;width:100%}
.hero__mini-field{display:grid;gap:.3rem;font-size:.82rem;color:var(--ink-soft);font-weight:600}
.hero__mini-field input{border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);padding:.55em .7em;font-size:1rem;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.hero__mini-field input:focus{border-color:var(--g-400);box-shadow:0 0 0 4px rgba(16,185,129,.15)}
.hero__card-more{font-size:.86rem;font-weight:700;color:var(--g-600)}

/* Sections */
.section{padding:clamp(2.8rem,6vw,4.6rem) 0}
.section--tight{padding-top:clamp(1rem,2vw,1.5rem)}
.section--tint{background:var(--bg-2)}
.head{text-align:center;max-width:680px;margin:0 auto clamp(1.5rem,3vw,2.2rem)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:800;color:var(--accent)}
.head__title{font-size:clamp(1.8rem,3.8vw,2.6rem);font-weight:800;margin:.5rem 0 .65rem;position:relative}
/* เส้นขีด accent ใต้หัวข้อ (เฉพาะหัวข้อจัดกึ่งกลาง — เลี่ยงหน้าที่ text-align:left เช่น เครดิต) */
.head:not([style]) .head__title{padding-bottom:.75rem}
.head:not([style]) .head__title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:60px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.head__sub{color:var(--ink-soft);font-size:1.05rem}

/* Bento */
.bento{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1.3rem}
.bento__card{position:relative;background:linear-gradient(165deg,var(--surface-2),var(--surface) 55%);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem 1.8rem;box-shadow:0 18px 40px -24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);display:flex;flex-direction:column;gap:.4rem;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
/* ขอบไล่สีเรืองแสง — จางตลอด สว่างเต็มตอน hover */
.bento__card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,var(--accent-glow,rgba(52,211,153,.85)),transparent 45%,rgba(255,255,255,.22));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2;opacity:.4;transition:opacity .35s}
.bento__card:hover::before{opacity:1}
/* แสงเรืองมุมบน — จางตลอด เด่นขึ้นตอน hover */
.bento__card::after{content:"";position:absolute;top:-45%;right:-30%;width:75%;height:75%;background:radial-gradient(circle,var(--accent-glow,rgba(52,211,153,.35)),transparent 70%);opacity:.22;transition:opacity .4s;pointer-events:none;z-index:0;filter:blur(10px)}
.bento__card:hover::after{opacity:.6}
.bento__card:hover{transform:translateY(-10px) scale(1.015);box-shadow:0 30px 58px -22px rgba(16,185,129,.55);border-color:transparent}
.bento__card--lg{background:radial-gradient(120% 140% at 8% -10%,rgba(255,255,255,.16),transparent 42%),linear-gradient(155deg,var(--g-500),var(--g-700) 60%,#064a35);color:#fff;border-color:transparent;box-shadow:0 24px 50px -20px rgba(16,185,129,.65),inset 0 1px 0 rgba(255,255,255,.18)}
.bento__card--lg::after{background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%);opacity:.3}
.bento__card--lg:hover::after{opacity:.55}
.bento__card--lg .bento__go{color:#eafff5}
.bento__card>*{position:relative;z-index:1}
.bento__ico{position:relative;width:60px;height:60px;display:grid;place-items:center;font-size:1.8rem;border-radius:18px;background:var(--tile,linear-gradient(135deg,var(--g-500),var(--g-700)));box-shadow:0 12px 26px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.3);margin-bottom:.6rem;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.bento__card:hover .bento__ico{transform:scale(1.08) rotate(-4deg)}
/* วงแหวนเรืองหลังไอคอน — จางตลอด เต็มตอน hover */
.bento__ico__ring{position:absolute;inset:-8px;border-radius:22px;background:conic-gradient(from 0deg,var(--accent-glow,rgba(52,211,153,.7)),transparent 60%,var(--accent-glow,rgba(52,211,153,.7)));opacity:.3;filter:blur(8px);transition:opacity .35s;z-index:-1;animation:bicoring 5s linear infinite}
.bento__card:hover .bento__ico__ring{opacity:.75}
@keyframes bicoring{to{transform:rotate(360deg)}}
.bento__go{display:inline-flex;gap:.25rem;transition:gap .2s}
.bento__card:hover .bento__go{gap:.6rem}
.bento__card h3{font-size:1.24rem;letter-spacing:-.01em}
.bento__card p{font-size:.94rem;color:var(--ink-soft)}
.bento__card--lg p{color:rgba(255,255,255,.9)}
.bento__go{margin-top:auto;font-weight:700;font-size:.92rem;color:var(--g-600);padding-top:.6rem;border-top:1px dashed var(--line);margin-top:.7rem;padding-top:.8rem}
.bento__card--lg .bento__go{border-top-color:rgba(255,255,255,.22)}
.bento__card--lg .bento__ico__ring{background:conic-gradient(from 0deg,rgba(255,255,255,.85),transparent 60%,rgba(255,255,255,.85))}
@media (prefers-reduced-motion:reduce){.bento__ico__ring{animation:none}}

/* Panels / Calculators */
.panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.6rem);box-shadow:var(--sh-md)}
.seg{display:flex;background:var(--bg-2);border-radius:999px;padding:5px;margin-bottom:1.4rem}
.seg__btn{flex:1;border:none;background:transparent;padding:.62em;border-radius:999px;font-weight:700;font-size:.9rem;color:var(--ink-soft);cursor:pointer;transition:.2s}
.seg__btn.is-active{background:var(--surface);color:var(--g-700);box-shadow:var(--sh-sm)}
[data-theme="dark"] .seg__btn.is-active{color:var(--g-300)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.45rem}
.field label .opt{color:var(--muted);font-weight:400;font-size:.82rem}
.field__box{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.field__box:focus-within{border-color:var(--g-400);box-shadow:0 0 0 4px rgba(16,185,129,.15)}
.field__box input,.field__box select{flex:1;border:none;outline:none;background:transparent;padding:.82em .9em;font-size:1.05rem;color:var(--ink)}
.field__box select{cursor:pointer}
.field__unit{padding-inline:.9em;color:var(--muted);font-size:.9rem;font-weight:700;white-space:nowrap}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.calc__err{margin-top:.8rem;color:var(--c-ob2);font-size:.9rem;font-weight:700}
.calc__result{background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(1.2rem,3vw,1.8rem);display:flex;flex-direction:column;align-items:center}
.gauge{position:relative;width:100%;max-width:340px}
/* แสงเรืองนุ่มหลังเกจ (เด่นในโหมดมืด) */
.gauge::before{content:"";position:absolute;left:50%;top:60%;width:80%;height:72%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(16,185,129,.16),transparent 68%);filter:blur(9px);z-index:0;pointer-events:none;opacity:.65;transition:opacity .6s}
.gauge__svg{position:relative;z-index:1;width:100%;height:auto;overflow:visible}
.gauge__track{fill:none;stroke:var(--line-2);stroke-width:15;stroke-linecap:round;opacity:.55}
/* โซนสีตามเกณฑ์ BMI (นิ่งไว้ให้เห็นทุกช่วง) */
.gauge__zone{fill:none;stroke:var(--zc);stroke-width:12;stroke-linecap:butt;opacity:.4;transition:opacity .5s ease,stroke-width .4s ease}
.gauge__zone[data-zone="under"]{stroke-dasharray:0 1.5 69.25 289}
.gauge__zone[data-zone="normal"]{stroke-dasharray:0 73.75 47 289}
.gauge__zone[data-zone="over"]{stroke-dasharray:0 123.75 19.25 289}
.gauge__zone[data-zone="obese1"]{stroke-dasharray:0 146 52.5 289}
.gauge__zone[data-zone="obese2"]{stroke-dasharray:0 201.5 86 289}
.gauge__needle{transform-origin:110px 120px;transform:rotate(0deg);opacity:.5;transition:transform 1.05s cubic-bezier(.34,1.56,.64,1),opacity .5s}
.gauge__hub-ring{fill:var(--surface);stroke:var(--line-2);stroke-width:2}
.gauge__hub{fill:var(--ink);transition:fill .4s}
/* หลังคำนวณ: โซนสว่างขึ้น + ไฮไลต์โซนที่ค่าตก + เข็มเด่น + แสงเรืองชัด */
.is-done .gauge__track{opacity:.4}
.is-done .gauge__zone{opacity:.8}
.is-done .gauge__zone.is-active{opacity:1;stroke-width:15;filter:drop-shadow(0 0 5px var(--zc))}
.is-done .gauge__needle{opacity:1}
.is-done .gauge::before{opacity:1}
.gauge__read{position:relative;z-index:2;text-align:center;margin-top:-.9rem}
.gauge__num{display:block;font-family:var(--f-di);font-size:clamp(2.7rem,7vw,3.25rem);font-weight:800;line-height:1;letter-spacing:-.01em;color:var(--ink);transition:color .4s;text-shadow:0 0 24px color-mix(in srgb,currentColor 30%,transparent)}
.gauge__u{color:var(--muted);font-size:.85rem;font-weight:700;letter-spacing:.05em}
@media (prefers-reduced-motion:reduce){.gauge__needle,.gauge__zone,.gauge__hub{transition:none}}
/* สถานะว่าง (ยังไม่คำนวณ) — ให้ดูตั้งใจออกแบบ ไม่โล่ง */
.calc__result:not(.is-done) .gauge__num{color:var(--muted);opacity:.5}
.calc__result:not(.is-done) .verdict__badge{background:transparent;border:1.5px dashed var(--line-2);color:var(--muted)}
.verdict{text-align:center;margin:1.1rem 0;width:100%}
.verdict__badge{display:inline-block;padding:.42em 1.2em;border-radius:999px;font-weight:800;font-size:.95rem;background:var(--line-2);color:var(--ink-soft);transition:.3s}
.verdict__text{color:var(--ink-soft);font-size:.98rem;margin-top:.7rem}
.verdict__grid{margin-top:1rem;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.verdict__grid div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .9rem;text-align:left}
.verdict__grid span{display:block;font-size:.8rem;color:var(--muted)}
.verdict__grid strong{font-size:1.02rem;color:var(--ink)}
.legend{width:100%;margin-top:1.2rem;display:grid;gap:.35rem}
.legend li{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--ink-soft);padding:.38rem .65rem;border-radius:10px;transition:background .2s}
.legend li em{margin-left:auto;font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.legend li.is-active{background:var(--surface);box-shadow:var(--sh-sm);color:var(--ink);font-weight:700}
.legend__sw{width:12px;height:12px;border-radius:4px;flex:none}
.legend li[data-cat="under"] .legend__sw{background:var(--c-under)}
.legend li[data-cat="normal"] .legend__sw{background:var(--c-normal)}
.legend li[data-cat="over"] .legend__sw{background:var(--c-over)}
.legend li[data-cat="obese1"] .legend__sw{background:var(--c-ob1)}
.legend li[data-cat="obese2"] .legend__sw{background:var(--c-ob2)}
.disclaimer{text-align:center;color:var(--muted);font-size:.88rem;max-width:780px;margin:1.6rem auto 0}

/* Calorie result */
.calc__result--cal{justify-content:flex-start;gap:1.1rem}
.cal-hero{width:100%;text-align:center;background:linear-gradient(150deg,var(--g-600),var(--g-700));color:#fff;border-radius:var(--r-lg);padding:1.5rem 1rem;box-shadow:var(--sh-glow)}
.cal-hero__k{display:block;font-size:.84rem;opacity:.9;font-weight:600}
.cal-hero__v{display:block;font-family:var(--f-di);font-size:2.8rem;font-weight:800;line-height:1.1}
.cal-hero__v small{font-size:1rem;opacity:.85}
.cal-hero__sub{display:block;font-size:.86rem;opacity:.92;margin-top:.3rem}
.cal-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.cal-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.9rem .6rem;text-align:center}
.cal-card__k{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.cal-card__v{display:block;font-family:var(--f-di);font-size:1.5rem;font-weight:800;margin:.15rem 0}
.cal-card__u{display:block;font-size:.68rem;color:var(--muted);line-height:1.4}
.cal-card--down .cal-card__v{color:var(--teal)}
.cal-card--keep .cal-card__v{color:var(--g-600)}
.cal-card--up .cal-card__v{color:var(--c-ob1)}
.cal-note{font-size:.82rem;color:var(--muted);text-align:center}

/* Food search + meals */
.food-search{max-width:520px;margin:0 auto 2rem}
.food-search input{width:100%;border:1.5px solid var(--line-2);border-radius:999px;background:var(--surface);padding:.85em 1.3em;font-size:1rem;color:var(--ink);outline:none;box-shadow:var(--sh-sm);transition:border-color .2s,box-shadow .2s}
.food-search input:focus{border-color:var(--g-400);box-shadow:0 0 0 4px rgba(16,185,129,.15)}
.meal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.meal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.meal:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.meal__top{height:120px;display:grid;place-items:center;font-size:3rem;background:linear-gradient(140deg,var(--from),var(--to))}
.meal__top--photo{padding:0;overflow:hidden;background:var(--bg-2);position:relative;height:190px}
.meal__top--photo img{width:100%;height:190px;object-fit:cover;display:block}
.meal__body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.meal__name{font-family:var(--f-di);font-weight:700;font-size:1.08rem}
.meal__desc{font-size:.9rem;color:var(--ink-soft);flex:1}
.meal__foot{display:flex;align-items:center;justify-content:space-between;margin-top:.3rem}
.meal__kcal{font-weight:800;color:var(--accent);font-family:var(--f-di)}
.meal__tag{font-size:.74rem;font-weight:700;color:var(--g-700);background:var(--g-50);padding:.22em .7em;border-radius:999px}
[data-theme="dark"] .meal__tag{background:rgba(16,185,129,.14);color:var(--g-300)}
.empty-msg{grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 1rem;font-size:1.05rem}

/* ===== ออกกำลังกาย (Exercise) ===== */
/* ป้ายระดับความยาก */
.ex-diff{position:absolute;top:.6rem;right:.6rem;z-index:2;font-size:.72rem;font-weight:800;color:#fff;padding:.28em .7em;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.25);letter-spacing:.01em}
.ex-diff--easy{background:linear-gradient(135deg,#22c55e,#16a34a)}
.ex-diff--med{background:linear-gradient(135deg,#f59e0b,#d97706)}
.ex-diff--hard{background:linear-gradient(135deg,#ef4444,#dc2626)}
/* แท็บกรองหมวด */
.ex-tabs{flex-wrap:wrap;margin:0 auto 1.6rem;max-width:760px}
/* หน้ารายละเอียด: hero */
.ex-detail-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.6rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);margin-bottom:1.8rem}
.ex-detail-hero__img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.ex-detail-hero__img img{width:100%;height:100%;object-fit:cover;display:block}
.ex-detail-hero__body{padding:1.4rem 1.6rem 1.6rem}
.ex-detail-hero__body h1{font-family:var(--f-di);font-weight:800;font-size:1.8rem;line-height:1.2;margin:.5rem 0 .5rem}
.ex-detail-hero__body p{color:var(--ink-soft);margin-bottom:1rem}
.ex-detail-tags{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.ex-detail-stats{display:flex;flex-wrap:wrap;gap:.6rem}
.ex-detail-stats span{background:var(--g-50);color:var(--g-700);font-weight:700;font-size:.9rem;padding:.4em .85em;border-radius:999px}
[data-theme="dark"] .ex-detail-stats span{background:rgba(16,185,129,.14);color:var(--g-300)}
.ex-credit{font-size:.82rem;color:var(--muted);margin-top:1.4rem;border-top:1px dashed var(--line);padding-top:1rem}
.ex-credit a{color:var(--g-600);font-weight:700}
@media (max-width:720px){.ex-detail-hero{grid-template-columns:1fr}.ex-detail-hero__img{aspect-ratio:16/9}}

/* ===== Visual Upgrade (hero ปัง + การ์ดสวย + ลูกเล่น) ===== */
/* HERO premium: ภาพเต็ม + overlay ไล่เฉด + glass card */
.up-hero{position:relative;overflow:hidden;isolation:isolate}
.up-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);z-index:0}
.up-hero__overlay{position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg, var(--bg) 4%, color-mix(in srgb,var(--bg) 80%,transparent) 42%, color-mix(in srgb,var(--bg) 22%,transparent) 100%),
  linear-gradient(to top, var(--bg) 0, var(--bg) 14%, transparent 46%)}
.up-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(3rem,7vw,6rem) 0 3.4rem}
.up-hero__title{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.05;font-weight:800;margin:1.1rem 0 .9rem;letter-spacing:-.02em;font-family:var(--f-di)}
.up-hero__lead{color:var(--ink-soft);font-size:1.12rem;max-width:48ch}
.up-hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.7rem 0 1.9rem}
.up-trust{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.up-trust li{display:flex;flex-direction:column}
.up-trust strong{font-family:var(--f-di);font-size:1.55rem;color:var(--g-400);line-height:1}
.up-trust span{font-size:.84rem;color:var(--muted);margin-top:.2rem}
.up-trust__div{width:1px;height:34px;background:var(--line-2)}
.up-hero__card{position:relative;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);border:1px solid color-mix(in srgb,var(--g-400) 24%,var(--line));border-radius:var(--r-xl);padding:1.6rem;box-shadow:var(--sh-lg);display:grid;gap:1.1rem;justify-items:center}
.up-hero__card-head{display:flex;align-items:center;justify-content:space-between;width:100%}
.up-glow{box-shadow:0 12px 34px -10px rgba(16,185,129,.6);animation:up-glow 3s ease-in-out infinite}
@keyframes up-glow{50%{box-shadow:0 16px 42px -8px rgba(16,185,129,.9)}}
@media (max-width:940px){.up-hero__grid{grid-template-columns:1fr}.up-hero__card{max-width:380px;margin-inline:auto;order:-1}}

/* การ์ดยกระดับ: ยกขึ้น + ซูมรูปนุ่ม (ใช้ร่วมเมนู/ออกกำลังกาย) */
.up-card{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.up-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:var(--g-400)}
.up-card .meal__top--photo{overflow:hidden;position:relative}
.up-card .meal__top--photo img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.up-card:hover .meal__top--photo img{transform:scale(1.09)}
.up-card .meal__top--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,20,16,.35),transparent 45%);pointer-events:none}

/* ripple + pop + confetti */
.up-ripple{position:relative;overflow:hidden}
.up-ripple .up-rippledot{position:absolute;border-radius:50%;background:currentColor;opacity:.3;transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:up-ripple .6s ease-out forwards}
@keyframes up-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.gauge__num.up-pop{animation:up-pop .5s ease}
.verdict__badge.up-pop{animation:up-pop .45s ease}
@keyframes up-pop{0%{transform:scale(.7);opacity:.4}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.up-confetti{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:300}
.up-confetti i{position:absolute;width:9px;height:14px;border-radius:2px;will-change:transform,opacity;animation:up-fall var(--d,1.4s) cubic-bezier(.2,.6,.4,1) forwards}
@keyframes up-fall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx,0),var(--dy,320px)) rotate(var(--rot,540deg));opacity:0}}
@media (prefers-reduced-motion:reduce){
  .up-glow{animation:none}
  .up-card .meal__top--photo img{transition:none}
  .up-card:hover .meal__top--photo img{transform:none}
  .up-confetti{display:none!important}
}

/* ===== Page hero (หน้าเมนูคลีน ฯลฯ) + การ์ดกริดสไตล์ gcard ===== */
.p-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:0 0 var(--r-xl) var(--r-xl)}
.p-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04)}
.p-hero__overlay{position:absolute;inset:0;background:
  linear-gradient(100deg, var(--bg) 8%, color-mix(in srgb,var(--bg) 78%,transparent) 46%, color-mix(in srgb,var(--bg) 30%,transparent) 100%),
  linear-gradient(to top, var(--bg) 0, var(--bg) 10%, transparent 55%)}
.p-hero__in{position:relative;z-index:2;padding:clamp(3.4rem,9vw,5.6rem) 0 clamp(2.6rem,6vw,3.6rem);text-align:center;display:flex;flex-direction:column;align-items:center}
.p-hero .eyebrow{display:inline-flex;align-items:center;gap:.4em;margin-bottom:.9rem}
.p-hero__title{font-family:var(--f-di);font-weight:800;font-size:clamp(2.1rem,5.4vw,3.4rem);letter-spacing:-.02em;background:linear-gradient(100deg,var(--g-300),var(--accent) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-hero .head__sub{margin-top:.9rem}
.p-hero__stats{display:flex;gap:2.2rem;margin-top:1.8rem;flex-wrap:wrap;justify-content:center;list-style:none}
.p-hero__stats li{display:flex;flex-direction:column;align-items:center}
.p-hero__stats strong{font-family:var(--f-di);font-size:1.6rem;color:var(--g-400);line-height:1}
.p-hero__stats span{font-size:.82rem;color:var(--muted);margin-top:.25rem}
.p-search{max-width:520px;margin:1.8rem auto 0;width:100%}
.p-search__box{display:flex;align-items:center;gap:.6rem;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:999px;padding:.75rem 1.3rem;box-shadow:var(--sh-sm)}
.p-search__box .ic{flex:none;color:var(--muted)}
.p-search__box input{flex:1;border:0;background:transparent;outline:0;color:var(--ink);font-family:var(--f-th);font-size:.96rem;min-width:0}
.p-search__box input::placeholder{color:var(--muted)}
.p-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,270px));justify-content:center;gap:1.4rem}
.p-grid .gcard{width:100%;height:auto;flex:none;aspect-ratio:3/3.4}
@media (max-width:600px){.p-hero__stats{gap:1.4rem}}

/* ===== ไอคอน SVG (ชุดเดียว สไตล์เส้น) ===== */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.15em;flex:none}
.brand__mark{display:inline-flex}
.brand__mark .ic{width:1.35em;height:1.35em;vertical-align:middle;color:var(--g-500)}
.topbar .ic{width:1.05em;height:1.05em;vertical-align:-.15em;margin-right:.15em;color:#eafff6}
.bento__ico .ic{width:28px;height:28px;color:#fff}
.step__ic .ic{width:38px;height:38px;color:var(--g-500)}
.article h2 .ic{width:1.2em;height:1.2em;vertical-align:-.16em;margin-right:.4em;color:var(--g-500)}
.disclaimer .ic{color:var(--accent);vertical-align:-.16em;margin-right:.2em}
.cta__badge .ic{color:#eafff5;vertical-align:-.14em;margin-right:.25em;width:1.05em;height:1.05em}
.verdict__badge .ic{vertical-align:-.14em;margin-right:.3em;width:1.05em;height:1.05em}
.eyebrow .ic{width:1.05em;height:1.05em;vertical-align:-.14em;margin-right:.3em}
.footer__brand .brand__mark .ic{color:var(--g-400)}

/* ===== Social proof / ความน่าเชื่อถือ ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;text-align:center}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem 1rem 1.5rem;box-shadow:var(--sh-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--g-300)}
.stat-card .ic{width:30px;height:30px;color:var(--g-500);margin-bottom:.5rem}
.stat-card b{display:block;font-family:var(--f-di);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;line-height:1.05;background:linear-gradient(120deg,var(--g-400),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-card span{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:.45rem}
.trust-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.7rem}
.trust-chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.55em 1.1em;font-size:.88rem;font-weight:600;color:var(--ink-soft)}
.trust-chip .ic{width:1.15em;height:1.15em;color:var(--g-500);flex:none}
@media (max-width:780px){.stats{grid-template-columns:1fr 1fr}}

/* ===== หน้าแรก: เมนูแนะนำ / แถบเกณฑ์ BMI / เกร็ดสุขภาพ / เอฟเฟกต์เพิ่ม ===== */
.fx-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(300px circle at var(--mx,50%) var(--my,40%),rgba(52,211,153,.28),transparent 60%);mix-blend-mode:screen}
.up-hero:hover .fx-spot{opacity:1}
.up-hero__type{margin-top:.6rem;font-weight:700;color:var(--ink-soft);min-height:1.6em;font-size:1rem}
.up-hero__type .cur{color:var(--accent);font-weight:800}
/* เกร็ดสุขภาพ */
.tipbar{max-width:var(--maxw);margin:1.2rem auto 0;padding:0 22px}
.tipbar__in{display:flex;align-items:center;gap:.8rem;background:linear-gradient(100deg,var(--surface),var(--surface-2));border:1px solid var(--line-2);border-radius:999px;padding:.7rem 1.3rem;box-shadow:var(--sh-sm)}
.tipbar__ic{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(245,165,36,.16);color:var(--accent)}
.tipbar__ic .ic{width:20px;height:20px}
.tipbar__t{font-weight:600;color:var(--ink-soft);transition:opacity .3s,transform .3s;min-width:0;overflow-wrap:break-word;word-break:break-word}
.tipbar__lead{color:var(--accent);font-weight:800;margin-right:.2rem}
@media (max-width:600px){.tipbar__in{border-radius:22px;padding:.65rem 1rem}.tipbar__t{font-size:.86rem;line-height:1.4}}
/* เมนูแนะนำ carousel (marquee) */
.mcar{overflow:hidden;padding:.5rem 0;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.mcar__track{display:flex;gap:1.2rem;width:max-content;padding:.5rem 22px;animation:mcar 46s linear infinite}
.mcar:hover .mcar__track{animation-play-state:paused}
@keyframes mcar{to{transform:translateX(-50%)}}
.mcar__item{width:250px;flex:0 0 250px}
/* แถบเกณฑ์ BMI */
.bmibar{max-width:820px;margin:1.8rem auto 0}
.bmibar__track{display:flex;height:26px;border-radius:999px;overflow:hidden;position:relative;box-shadow:var(--sh-sm)}
.bmibar__seg{display:grid;place-items:center;font-size:.7rem;font-weight:800;color:#06231a;white-space:nowrap;overflow:hidden}
.bmibar__marker{position:absolute;top:-8px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;transition:left 1s cubic-bezier(.34,1.56,.64,1)}
.bmibar__pin{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.bmibar__val{margin-top:.3rem;background:var(--ink);color:var(--bg);font-weight:800;font-size:.78rem;padding:.15em .6em;border-radius:999px;white-space:nowrap;font-family:var(--f-di)}
.bmibar__labels{display:flex;justify-content:space-between;margin-top:1.8rem;font-size:.74rem;color:var(--muted)}
.bmibar__leg{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;margin-top:1rem;font-size:.82rem;color:var(--ink-soft)}
.bmibar__leg span{display:inline-flex;align-items:center;gap:.4rem}
.bmibar__leg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.bmibar__note{text-align:center;color:var(--muted);font-size:.82rem;margin-top:1rem}
@media (prefers-reduced-motion:reduce){.mcar__track{animation:none}.fx-spot{display:none}.tipbar__t{transition:none}}

/* ===== Hero อลังการ + ลูกเล่น ===== */
.aurora{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(120deg,rgba(16,185,129,0),rgba(16,185,129,.22),rgba(45,212,191,0),rgba(245,165,36,.18),rgba(16,185,129,0));background-size:300% 300%;mix-blend-mode:screen;opacity:.55;animation:aurora 16s ease-in-out infinite}
@keyframes aurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.particles i{position:absolute;bottom:-10px;border-radius:50%;background:radial-gradient(circle,rgba(160,255,214,.9),rgba(52,211,153,.2));box-shadow:0 0 10px rgba(52,211,153,.7);animation:pfloat linear infinite}
@keyframes pfloat{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:.9}90%{opacity:.7}100%{transform:translateY(-86vh) scale(1.1);opacity:0}}
.up-hero__title .grad{position:relative;display:inline-block}
.up-hero__title .grad::after{content:attr(data-t);position:absolute;left:0;top:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;mix-blend-mode:screen;pointer-events:none;animation:shimmer 3.6s ease-in-out infinite}
@keyframes shimmer{0%{background-position:200% 0}55%,100%{background-position:-120% 0}}
.up-hero__card{overflow:hidden}
.up-hero__card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,rgba(52,211,153,.9),transparent 45%,rgba(245,165,36,.7));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:4}
.up-hero__card .shine{position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);z-index:3;pointer-events:none;animation:cardshine 5.5s ease-in-out infinite}
@keyframes cardshine{0%,70%{left:-60%}100%{left:130%}}
.magbtn{transition:transform .18s ease}
/* การ์ด BMI โยกไป-มาเบา ๆ (หยุดเมื่อชี้เมาส์) */
.up-hero__card{animation:cardrock 6.5s ease-in-out infinite;transform-origin:50% 62%}
.up-hero__card:hover{animation-play-state:paused}
@keyframes cardrock{0%,100%{transform:rotate(-1.4deg) translateY(0)}50%{transform:rotate(1.4deg) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.aurora,.particles i,.up-hero__title .grad::after,.up-hero__card,.up-hero__card .shine,.ring::before{animation:none!important}.particles{display:none}}

/* ===== เครื่องคำนวณ BMI แบบกดปุ่ม (hero card) ===== */
/* .up-hero__card เป็น grid คอลัมน์เดียวแบบ auto (กว้างตาม max-content ของแถวที่กว้างสุด
   ไม่เต็ม content-box การ์ด) ปุ่มมี white-space:nowrap ทำให้ min-width:auto (ค่า default
   ของ grid item) ลาก track ทั้งคอลัมน์ให้กว้างเกินการ์ดได้ (บั๊กปุ่มล้นกรอบ) ต้องบังคับ
   min-width:0 บนแถวที่ต้องการ 100% + บังคับ track ให้เต็มความกว้างจริงด้วย 1fr */
#calc-bmi{min-width:0;grid-template-columns:minmax(0,1fr)}
.calc-btn{width:100%;min-width:0;max-width:100%;box-sizing:border-box;justify-self:stretch;margin-top:.3rem;justify-content:center}
.hero__mini{min-width:0;justify-self:stretch}
.hero__mini-field{min-width:0}
.hero__mini-field input{min-width:0;box-sizing:border-box}
#calc-bmi:not(.done) .ring{filter:grayscale(.4) brightness(.82);transition:filter .5s}
#calc-bmi.done .ring{filter:none;transition:filter .6s}
#calc-bmi:not(.done) .ring::after{opacity:.28}
#calc-bmi:not(.done) .ring__num{color:var(--muted)}
#calc-bmi:not(.done) .ring__label{color:var(--muted);font-weight:700}
.ring__num{transition:color .35s}
.calc-wait{display:inline-flex;align-items:center;gap:.35rem}
.calc-wait .ic{width:1em;height:1em}
.card-err{color:var(--c-ob2);font-size:.82rem;font-weight:700;text-align:center;margin-top:.5rem;min-height:1.1em}
.reset-link[hidden]{display:none!important}
.reset-link{display:block;text-align:center;margin-top:.7rem;font-size:.85rem;color:var(--g-500);font-weight:700;cursor:pointer}
@keyframes calcpop{0%{transform:scale(.7);opacity:.4}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ring__num{animation:none!important}}

/* ===== เมนู/บทความ เวอร์วัง (grand marquee 2 แถวสลับทิศ) ===== */
.grand{position:relative;overflow:hidden;padding:clamp(2.6rem,5vw,4rem) 0 clamp(3rem,5vw,4.5rem)}
.grand::before{content:"";position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:120%;height:120%;background:radial-gradient(600px 300px at 30% 10%,rgba(16,185,129,.16),transparent 60%),radial-gradient(600px 300px at 80% 90%,rgba(245,165,36,.12),transparent 60%);pointer-events:none;z-index:0}
.grand>*{position:relative;z-index:1}
.grand .head__title{background:linear-gradient(100deg,var(--g-300),var(--accent) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(2rem,4.4vw,3rem)}
.grand__eyebrow{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem}
.mrow{overflow:hidden;padding:1rem 0;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mrow__track{display:flex;gap:1.5rem;width:max-content;padding:.6rem 22px}
.mrow--left .mrow__track{animation:mrowL 48s linear infinite}
.mrow--right .mrow__track{animation:mrowR 52s linear infinite}
.mrow:hover .mrow__track{animation-play-state:paused}
@keyframes mrowL{to{transform:translateX(-50%)}}
@keyframes mrowR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.gcard{position:relative;flex:0 0 300px;width:300px;height:340px;border-radius:22px;overflow:hidden;display:block;box-shadow:0 22px 46px -20px rgba(0,0,0,.75);transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;background:#0a1c16}
.gcard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,rgba(52,211,153,.85),transparent 42%,rgba(245,165,36,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3;opacity:.9}
.gcard__img{position:absolute;inset:0}
.gcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gcard:hover{transform:translateY(-16px) scale(1.035);box-shadow:0 40px 66px -20px rgba(16,185,129,.6)}
.gcard:hover .gcard__img img{transform:scale(1.12)}
.gcard__scrim{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem 1.3rem 1.3rem;background:linear-gradient(to top,rgba(3,15,11,.96),rgba(3,15,11,.6) 55%,transparent);display:flex;flex-direction:column;gap:.25rem}
.gcard__name{font-family:var(--f-di);font-weight:800;font-size:1.3rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.gcard__kcal{font-family:var(--f-di);font-weight:800;color:var(--accent);font-size:1.05rem}
.gcard__kcal small{color:#cfe6dc;font-size:.72rem;font-weight:600}
.gcard__badge{position:absolute;top:14px;left:14px;z-index:3;color:#fff;font-weight:800;font-size:.76rem;padding:.32em .9em;border-radius:999px;border:1px solid rgba(255,255,255,.25)}
.gcard__badge--clean{background:linear-gradient(135deg,#22c55e,#0e9f6e);box-shadow:0 6px 16px rgba(16,185,129,.55)}
.gcard__badge--keto{background:linear-gradient(135deg,#f5a524,#f97316);box-shadow:0 6px 16px rgba(245,165,36,.5)}
.gcard__badge--easy{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 6px 16px rgba(16,185,129,.55)}
.gcard__badge--med{background:linear-gradient(135deg,#f5a524,#f97316);box-shadow:0 6px 16px rgba(245,165,36,.5)}
.gcard__badge--hard{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 6px 16px rgba(239,68,68,.5)}
.acard{position:relative;flex:0 0 300px;width:300px;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 16px 36px -20px rgba(0,0,0,.6);transition:transform .3s,box-shadow .3s,border-color .3s}
.acard:hover{transform:translateY(-7px);box-shadow:0 26px 48px -22px rgba(16,185,129,.45);border-color:var(--g-400)}
.acard__img{height:150px;overflow:hidden;background:var(--bg-2)}
.acard__img img{width:100%;height:150px;object-fit:cover;transition:transform .5s;display:block}
.acard:hover .acard__img img{transform:scale(1.08)}
.acard__body{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.acard__cat{align-self:flex-start;font-size:.72rem;font-weight:800;color:var(--g-300);background:rgba(16,185,129,.14);padding:.2em .7em;border-radius:999px}
.acard__title{font-family:var(--f-di);font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.35;flex:1}
.acard__more{font-size:.85rem;font-weight:700;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.mrow__track{animation:none!important}.grand::before{display:none}}

/* ===== ลูกเล่นหน้าแรก (FX) ===== */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--g-400),var(--accent));box-shadow:0 0 10px var(--g-400);transition:width .08s linear}
.fx-tilt{will-change:transform;transform-style:preserve-3d}
.up-hero{isolation:isolate}
.fx-orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.4;z-index:1;pointer-events:none;mix-blend-mode:screen}
.fx-orb--1{width:300px;height:300px;background:radial-gradient(circle,#10b981,transparent 70%);top:8%;left:-70px;animation:fx-drift1 15s ease-in-out infinite}
.fx-orb--2{width:240px;height:240px;background:radial-gradient(circle,#2dd4bf,transparent 70%);bottom:6%;left:38%;animation:fx-drift2 18s ease-in-out infinite}
.fx-orb--3{width:200px;height:200px;background:radial-gradient(circle,#f5a524,transparent 70%);top:16%;right:8%;opacity:.28;animation:fx-drift3 20s ease-in-out infinite}
@keyframes fx-drift1{50%{transform:translate(60px,44px) scale(1.12)}}
@keyframes fx-drift2{50%{transform:translate(-50px,-30px) scale(1.15)}}
@keyframes fx-drift3{50%{transform:translate(-30px,40px) scale(1.1)}}
.up-hero__rotor{display:flex;align-items:baseline;gap:.4rem;margin-top:1.1rem;font-weight:700;color:var(--ink-soft);font-size:1.02rem;flex-wrap:wrap}
.fx-rotate{color:var(--accent);font-weight:800;font-family:var(--f-di);transition:opacity .25s,transform .25s;display:inline-block}
.fx-top{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--g-500),var(--g-700));color:#fff;font-size:1.35rem;cursor:pointer;box-shadow:0 12px 28px -10px rgba(16,185,129,.7);opacity:0;transform:translateY(18px) scale(.9);transition:.3s;z-index:90;display:grid;place-items:center}
.fx-top.show{opacity:1;transform:none}
.fx-top:hover{filter:brightness(1.08)}
.bento__ico{position:relative;overflow:hidden}
.bento__ico::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .6s}
.bento__card:hover .bento__ico::after{left:130%}
@media (prefers-reduced-motion:reduce){.fx-orb,.fx-rotate{animation:none!important;transition:none!important}.bento__ico::after{display:none}.fx-progress{transition:none}}

/* ===== หน้าแรก: ลูกเล่น hero + 3 ขั้นตอน ===== */
/* คำเน้นไล่สีวิบวับ */
.up-hero__title .grad{background-size:220% auto;animation:grad-shift 5s ease-in-out infinite}
@keyframes grad-shift{50%{background-position:100% 50%}}
.up-trust strong{font-variant-numeric:tabular-nums}
/* 3 ขั้นตอน */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:.6rem}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:2.3rem 1.5rem 1.6rem;text-align:center;box-shadow:var(--sh-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.step:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--g-300)}
.step__n{position:absolute;top:-19px;left:50%;transform:translateX(-50%);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--g-500),var(--g-700));color:#fff;font-family:var(--f-di);font-weight:800;font-size:1.1rem;box-shadow:0 8px 18px -6px rgba(16,185,129,.75)}
.step__ic{font-size:2.5rem;display:block;margin:.5rem 0 .7rem}
.step h3{font-size:1.16rem;margin-bottom:.45rem}
.step p{color:var(--ink-soft);font-size:.94rem;line-height:1.6}
@media (max-width:780px){.steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.up-hero__title .grad{animation:none}}

/* ===== เครดิตรูปภาพ (Credits) ===== */
.cr__list{list-style:none;margin:.4rem 0 1.4rem;padding:0;display:grid;gap:.1rem}
.cr__row{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline;padding:.6rem .2rem;border-bottom:1px solid var(--line)}
.cr__row:last-child{border-bottom:0}
.cr__name{font-weight:700;color:var(--ink);min-width:180px;flex:0 0 auto}
.cr__meta{color:var(--ink-soft);font-size:.9rem;flex:1 1 260px}
.cr__meta a{color:var(--g-600);font-weight:600}
.cr__lic{display:inline-block;font-size:.74rem;font-weight:700;color:var(--g-700);background:var(--g-50);padding:.1em .55em;border-radius:6px;white-space:nowrap}
[data-theme="dark"] .cr__lic{background:rgba(16,185,129,.14);color:var(--g-300)}
.cr__lic--free{color:#0b7a55;background:#dcfce7}
[data-theme="dark"] .cr__lic--free{background:rgba(52,211,153,.16);color:#a7f3d0}
@media (max-width:560px){.cr__name{min-width:100%}}

/* Posts */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.post__thumb{height:158px;display:grid;place-items:center;font-size:3rem;background:linear-gradient(140deg,var(--from,#a7f3d0),var(--to,#6ee7b7))}
.post__thumb--photo{padding:0;overflow:hidden;position:relative;display:block}
.post__thumb--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.post__body{padding:1.3rem;display:flex;flex-direction:column;gap:.45rem}
.post__tag{align-self:flex-start;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--g-700);background:var(--g-50);padding:.25em .8em;border-radius:999px}
[data-theme="dark"] .post__tag{background:rgba(16,185,129,.14);color:var(--g-300)}
.post__body h3{font-size:1.1rem;line-height:1.4}
.post__body p{color:var(--ink-soft);font-size:.92rem}
.post__meta{font-size:.85rem;color:var(--g-600);font-weight:700}

/* FAQ */
.faq{display:grid;gap:.8rem;margin-top:1rem}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.3rem 1.3rem;box-shadow:var(--sh-sm)}
.faq__item summary{cursor:pointer;font-weight:700;padding:1rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:1.5rem;color:var(--g-600);transition:transform .25s;font-weight:400}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{color:var(--ink-soft);padding-bottom:1.1rem;font-size:.97rem}

/* Article typography (educational + single post content) */
.article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.6rem);box-shadow:var(--sh-sm)}
.article h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:1.8rem 0 .7rem;font-weight:800}
.article h2:first-child{margin-top:0}
.article h3{font-size:1.2rem;margin:1.2rem 0 .5rem;color:var(--g-700)}
[data-theme="dark"] .article h3{color:var(--g-300)}
.article p{color:var(--ink-soft);margin:.6rem 0}
.article a{color:var(--g-600);text-decoration:underline;text-underline-offset:2px}
.article ul,.article ol{margin:.6rem 0 .6rem 1.3rem;color:var(--ink-soft)}
.article li{margin:.35rem 0;padding-left:.2rem}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article img{border-radius:var(--r-md);margin:1rem 0}
.article blockquote{border-left:4px solid var(--g-400);background:var(--bg-2);padding:.8rem 1.2rem;border-radius:0 var(--r-md) var(--r-md) 0;margin:1rem 0;color:var(--ink-soft)}
.article strong{color:var(--ink)}
.formula{background:var(--bg-2);border:1px dashed var(--g-300);border-radius:var(--r-md);padding:1.1rem 1.3rem;margin:1rem 0;font-family:var(--f-di);font-weight:700;color:var(--g-700);text-align:center;line-height:1.9}
[data-theme="dark"] .formula{color:var(--g-300)}
.formula small{display:block;font-family:var(--f-th);font-weight:400;color:var(--muted);font-size:.85rem;margin-top:.5rem}
.cat-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.94rem;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line)}
.cat-table th,.cat-table td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
.cat-table thead th{background:linear-gradient(135deg,var(--g-600),var(--g-700));font-family:var(--f-di);font-weight:700;color:#fff}
.cat-table tbody tr:last-child td{border-bottom:none}
.cat-table tbody tr:nth-child(even){background:var(--bg-2)}
.cat-table td{color:var(--ink-soft)}
.cat-table .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.5rem;vertical-align:middle}
.post-cover{margin:0 0 1.4rem;border-radius:var(--r-lg);overflow:hidden}
.post-cover img{width:100%;border-radius:var(--r-lg)}

/* Single post extras */
.back-link{display:inline-block;color:var(--g-600);font-weight:700;font-size:.92rem;margin-bottom:1.2rem}
.post-hero{background:linear-gradient(135deg,var(--g-600),var(--teal));color:#fff;border-radius:var(--r-xl);padding:clamp(1.6rem,4vw,2.6rem);margin-bottom:1.6rem;box-shadow:var(--sh-glow)}
.post-hero h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;line-height:1.2;margin:.6rem 0}
.post-hero__cat{display:inline-block;background:rgba(255,255,255,.22);padding:.25em .9em;border-radius:999px;font-size:.8rem;font-weight:700}
.post-hero__meta{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.88rem;opacity:.92;margin-top:.4rem}
.related{margin-top:2.5rem}
.related__title{font-size:1.4rem;font-weight:800;margin-bottom:1.2rem}
.pagination-wrap{margin-top:2rem;text-align:center}
.pagination-wrap .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .6rem;margin:0 .2rem;border:1px solid var(--line-2);border-radius:10px;color:var(--ink-soft);font-weight:700;background:var(--surface)}
.pagination-wrap .page-numbers.current{background:var(--g-600);color:#fff;border-color:transparent}
.pagination-wrap a.page-numbers:hover{border-color:var(--g-400);color:var(--g-600)}

/* CTA */
.cta{padding:clamp(3rem,6vw,5rem) 0;background:linear-gradient(135deg,#0c6b4e,#0f9d6c 48%,#0ea5a0);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(440px 340px at 82% -12%,rgba(255,255,255,.24),transparent 70%)}
.cta__glow{position:absolute;left:-70px;bottom:-90px;width:340px;height:340px;background:radial-gradient(circle,rgba(163,230,53,.28),transparent 62%);pointer-events:none;z-index:0}
.cta__inner{position:relative;z-index:1}
.cta__badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#eafff5;font-weight:800;font-size:.82rem;padding:.35em 1em;border-radius:999px;margin-bottom:1rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cta__inner h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800}
.cta__inner p{opacity:.92;margin:.6rem 0 1.6rem;font-size:1.1rem}
.cta .btn--light{box-shadow:0 14px 34px -12px rgba(0,0,0,.45)}
.cta .btn--light:hover{transform:translateY(-3px)}

/* Footer */
.footer{background:var(--surface);border-top:1px solid var(--line);padding-top:3rem;margin-top:2rem}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2rem}
.footer__brand .brand{font-size:1.2rem}
.footer__brand p{color:var(--ink-soft);font-size:.93rem;margin-top:.6rem;max-width:34ch}
.footer__col h4{font-size:.95rem;margin-bottom:.8rem}
.footer__col a{display:block;color:var(--ink-soft);font-size:.92rem;padding:.3rem 0;transition:color .2s}
.footer__col a:hover{color:var(--g-600)}
.footer__bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;border-top:1px solid var(--line);padding:1.3rem 22px;color:var(--muted);font-size:.84rem}

/* Unit toggle visibility */
.is-hidden{display:none !important}

/* Calorie: goal cards clickable + macros */
.cal-card{font-family:inherit;cursor:pointer;position:relative;text-align:center;transition:transform .15s,border-color .2s,box-shadow .2s}
.cal-card:hover{transform:translateY(-2px);border-color:var(--g-300)}
.cal-card.is-active{border-color:var(--g-500);box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.cal-card.is-active::after{content:"✓";position:absolute;top:.4rem;right:.5rem;width:18px;height:18px;border-radius:50%;background:var(--g-500);color:#fff;font-size:.7rem;display:grid;place-items:center;font-weight:700}
.macros{width:100%}
.macros__title{display:block;text-align:center;font-size:.86rem;color:var(--ink-soft);margin-bottom:.6rem}
.macros__title strong{color:var(--g-600)}
.macros__row{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.macro{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.9rem .5rem;text-align:center}
.macro__k{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.macro__v{display:block;font-family:var(--f-di);font-size:1.4rem;font-weight:800;margin:.1rem 0}
.macro__s{display:block;font-size:.72rem;color:var(--muted)}
.macro--p .macro__v{color:var(--g-600)}
.macro--c .macro__v{color:var(--teal)}
.macro--f .macro__v{color:var(--c-ob1)}

/* Meal card as button + see-recipe hint */
.meal{font-family:inherit;text-align:left;cursor:pointer;padding:0;width:100%}
.meal__see{font-size:.82rem;font-weight:700;color:var(--accent);margin-top:.1rem}

/* Recipe modal */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal.is-open{display:flex}
.modal__backdrop{position:absolute;inset:0;background:rgba(6,30,20,.55);backdrop-filter:blur(3px)}
.modal__panel{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-lg);max-width:460px;width:100%;max-height:88vh;overflow:auto;padding:1.8rem;animation:pop .25s ease}
@keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal__close{position:absolute;top:.8rem;right:.9rem;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-soft);font-size:1.3rem;line-height:1;cursor:pointer}
.modal__close:hover{border-color:var(--g-400);color:var(--g-600)}
.modal__emoji{font-size:3rem;text-align:center}
.modal__title{font-size:1.4rem;text-align:center;margin:.3rem 0}
.modal__desc{color:var(--ink-soft);text-align:center;font-size:.95rem}
.modal__meta{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:.9rem 0 1.1rem}
.modal__how{border-top:1px solid var(--line);padding-top:1rem}
.modal__how h4{font-size:1rem;margin-bottom:.6rem}
.modal__how ol{margin:0 0 0 1.2rem;color:var(--ink-soft);display:grid;gap:.5rem}
.modal__how li{padding-left:.2rem;line-height:1.6}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* Responsive */
@media (max-width:940px){
  .hero__grid{grid-template-columns:1fr}
  .hero__card{max-width:380px;margin-inline:auto;order:-1}
  .panel{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr}
  .bento__card--lg{grid-column:1/-1}
  .meal-grid,.post-grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav__links{position:fixed;inset:68px 0 auto 0;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:.5rem 22px 1.2rem;transform:translateY(-130%);transition:transform .3s ease;box-shadow:var(--sh-lg)}
  .nav__links.is-open{transform:translateY(0)}
  .nav__links a{padding:.95rem 0;border-bottom:1px solid var(--line)}
  .burger{display:flex}
  .nav__actions .btn--sm{display:none}
  .bento,.meal-grid,.post-grid,.field-row,.cal-grid,.verdict__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .trust{gap:1.1rem}
  .trust__div{display:none}
  .topbar__inner{font-size:.78rem}
  .cat-table{font-size:.86rem}
  .cat-table th,.cat-table td{padding:.55rem .5rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto}}

/* ===== โปรแกรมออกกำลังกาย แบบแอพฟิตเนส (xa- = exercise app) ===== */
.xa-shell{min-height:100vh;max-width:100%}
.xa-appbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--line)}
.xa-appbar__back,.xa-appbar__ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);flex:none;text-decoration:none}
.xa-appbar__title{font-family:var(--f-di);font-weight:800;font-size:1.08rem;flex:1}
.xa-appbar .ic{width:19px;height:19px}

.xa-featured{position:relative;margin:1rem 1.1rem 0;border-radius:26px;overflow:hidden;min-height:240px;display:flex;align-items:flex-end;box-shadow:var(--sh-lg)}
.xa-featured__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
.xa-featured__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,14,11,.1) 0%,rgba(4,14,11,.5) 55%,rgba(4,14,11,.93) 100%)}
.xa-featured__body{position:relative;z-index:2;padding:1.3rem 1.3rem 1.5rem;width:100%;color:#fff}
.xa-featured__eyebrow{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(135deg,var(--accent),var(--accent-2));padding:.32em .8em;border-radius:999px;color:#241100;margin-bottom:.7rem}
.xa-featured__name{font-family:var(--f-di);font-size:1.65rem;font-weight:800;margin:0 0 .55rem}
.xa-featured__stats{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.85rem;font-weight:700;color:rgba(255,255,255,.92);margin:0 0 1.1rem}
.xa-featured__stats span{display:inline-flex;align-items:center;gap:.3rem}
.xa-featured__stats .ic{width:15px;height:15px}
.xa-featured .btn{width:max-content}

.xa-quickstats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 1.1rem 0}
.xa-quickstats div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.85rem .6rem;text-align:center}
.xa-quickstats strong{display:block;font-family:var(--f-di);font-size:1.3rem;color:var(--g-500)}
.xa-quickstats span{font-size:.72rem;color:var(--muted);font-weight:600}

.xa-chipbar{display:flex;gap:.55rem;overflow-x:auto;padding:1.3rem 1.1rem .3rem;scrollbar-width:none}
.xa-chipbar::-webkit-scrollbar{display:none}
.xa-chip{flex:none;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-soft);font-weight:700;font-size:.86rem;padding:.55em 1.15em;border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap}
.xa-chip.is-active{background:linear-gradient(135deg,var(--g-400),var(--g-600));border-color:transparent;color:#04140f;box-shadow:var(--sh-glow)}

.xa-grid{display:grid;grid-template-columns:1fr;gap:1rem;padding:.6rem 1.1rem 2rem}
.xa-card{position:relative;border-radius:22px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-md);display:block;text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.xa-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.xa-card__img{position:relative;height:172px;overflow:hidden}
.xa-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.xa-card:hover .xa-card__img img{transform:scale(1.08)}
.xa-card__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(4,14,11,.88) 100%)}
.xa-card__diff{position:absolute;top:.7rem;right:.7rem;z-index:2}
.xa-card__title{position:absolute;left:.95rem;right:.95rem;bottom:.75rem;z-index:2;color:#fff;font-family:var(--f-di);font-weight:800;font-size:1.15rem;display:flex;align-items:center;gap:.4rem}
.xa-card__foot{display:flex;align-items:center;justify-content:space-between;padding:.8rem .95rem .95rem}
.xa-card__meta{display:flex;gap:.8rem;font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.xa-card__meta span{display:inline-flex;align-items:center;gap:.25rem}
.xa-card__meta .ic{width:14px;height:14px}
.xa-card__go{width:34px;height:34px;border-radius:50%;background:var(--g-500);color:#04140f;display:grid;place-items:center;flex:none}
.xa-card__go .ic{width:16px;height:16px}

.xa-badge{font-size:.7rem;font-weight:800;color:#fff;padding:.32em .78em;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.3);letter-spacing:.01em}
.xa-badge--easy{background:linear-gradient(135deg,#22c55e,#16a34a)}
.xa-badge--med{background:linear-gradient(135deg,#f59e0b,#d97706)}
.xa-badge--hard{background:linear-gradient(135deg,#ef4444,#dc2626)}

.xa-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;justify-content:space-around;padding:.5rem .4rem calc(.5rem + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px) saturate(160%);border-top:1px solid var(--line)}
.xa-tabbar a{display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.66rem;font-weight:700;color:var(--muted);text-decoration:none;padding:.3rem .5rem}
.xa-tabbar a.is-active{color:var(--g-500)}
.xa-tabbar .ic{width:20px;height:20px}

@media(max-width:680px){.xa-tabbar{display:flex}.xa-shell{padding-bottom:64px}}
@media(min-width:680px){.xa-grid{grid-template-columns:repeat(2,1fr)}.xa-featured,.xa-quickstats,.xa-chipbar,.xa-grid{margin-left:auto;margin-right:auto}}
@media(min-width:1000px){.xa-grid{grid-template-columns:repeat(3,1fr);max-width:1080px}.xa-featured{max-width:1080px}.xa-quickstats{max-width:1080px}.xa-chipbar{max-width:1080px}}

/* หน้ารายละเอียดโปรแกรม */
.xa-hero{position:relative;height:44vh;min-height:320px;max-height:460px;overflow:hidden}
.xa-hero__img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03)}
.xa-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,14,11,.55) 0%,rgba(4,14,11,.05) 32%,rgba(4,14,11,.12) 55%,var(--bg) 100%)}
.xa-hero__top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;padding:1rem 1.1rem}
.xa-hero__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 1.1rem 2.4rem}
.xa-hero__chips{display:flex;gap:.5rem;margin-bottom:.6rem;flex-wrap:wrap}
.xa-hero__name{font-family:var(--f-di);font-size:clamp(1.6rem,5vw,2.3rem);font-weight:800;color:#fff;margin:0;text-shadow:0 4px 20px rgba(0,0,0,.45)}
.xa-tag{font-size:.72rem;font-weight:700;color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:.3em .8em;border-radius:999px}

.xa-statcard{position:relative;z-index:4;margin:-2.6rem 1.1rem 0;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.xa-statcard div{padding:1rem .4rem;text-align:center;border-right:1px solid var(--line)}
.xa-statcard div:last-child{border-right:none}
.xa-statcard .ic{width:20px;height:20px;color:var(--g-500);margin-bottom:.35rem}
.xa-statcard strong{display:block;font-family:var(--f-di);font-size:1.02rem}
.xa-statcard span{font-size:.66rem;color:var(--muted);font-weight:600}
.xa-diffdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.3em}

.xa-lede{padding:1.2rem 1.1rem .3rem;color:var(--ink-soft);font-size:.98rem}
.xa-cta-inline{margin:1rem 1.1rem;display:flex;justify-content:center}
.xa-cta-inline .btn{width:100%;max-width:420px;justify-content:center;font-size:1.02rem;padding:.95em 1.4em}

.xa-section{padding:1.4rem 1.1rem}
.xa-section__title{font-family:var(--f-di);font-weight:800;font-size:1.15rem;margin:0 0 1rem;display:flex;align-items:center;gap:.5rem}
.xa-section__title .ic{width:20px;height:20px;color:var(--accent)}

.xa-timeline{position:relative;display:grid;gap:1rem}
.xa-timeline::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:var(--line-2)}
.xa-step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:.9rem;align-items:start}
.xa-step__num{position:relative;z-index:2;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--g-400),var(--g-600));color:#04140f;display:grid;place-items:center;font-family:var(--f-di);font-weight:800;font-size:1.15rem;box-shadow:var(--sh-glow);flex:none}
.xa-step__card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.9rem 1.05rem;font-size:.92rem;color:var(--ink-soft);box-shadow:var(--sh-sm)}
.xa-step__dur{display:inline-block;margin-top:.45rem;font-size:.72rem;font-weight:800;color:var(--g-500)}

.xa-tips{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.4rem;scroll-snap-type:x mandatory;scrollbar-width:none}
.xa-tips::-webkit-scrollbar{display:none}
.xa-tipcard{scroll-snap-align:start;flex:none;width:220px;background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:16px;padding:1rem;font-size:.85rem;color:var(--ink-soft);box-shadow:var(--sh-sm)}
.xa-tipcard .ic{width:22px;height:22px;color:var(--accent);margin-bottom:.5rem}

.xa-credit{padding:0 1.1rem;font-size:.76rem;color:var(--muted)}
.xa-disclaimer{padding:.6rem 1.1rem 2.4rem;font-size:.78rem;color:var(--muted)}
.xa-disclaimer a{color:var(--g-500);font-weight:700}

.xa-stickycta{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:.8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--bg) 32%);display:none}
.xa-stickycta .btn{width:100%;justify-content:center;font-size:1.02rem;box-shadow:var(--sh-glow)}
@media(max-width:680px){.xa-stickycta{display:block}.xa-cta-inline{display:none}.xa-shell{padding-bottom:90px}}

.xa-relgrid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:680px){.xa-relgrid{grid-template-columns:repeat(3,1fr)}}

/* workout player */
.xa-player{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;flex-direction:column;transform:translateY(100%);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.xa-player.is-open{display:flex}
.xa-player.is-shown{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.xa-player{transition:none}}
.xa-player__top{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem}
.xa-player__close{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink);flex:none}
.xa-player__close .ic{width:18px;height:18px}
.xa-player__title{flex:1;text-align:center;font-weight:800;font-size:.92rem;color:var(--ink-soft)}
.xa-player__count{font-size:.8rem;font-weight:800;color:var(--muted);width:44px;text-align:right}
.xa-player__progress{display:flex;gap:.35rem;padding:0 1.1rem}
.xa-player__seg{flex:1;height:5px;border-radius:999px;background:var(--line-2);overflow:hidden}
.xa-player__seg i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--g-400),var(--g-600));border-radius:999px}
.xa-player__seg.is-done i{width:100%}
.xa-player__stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:1.5rem 1.5rem 1.6rem;text-align:center}
.xa-timerring{--pct:1;--ring-color:var(--g-500);width:236px;height:236px;border-radius:50%;position:relative;display:grid;place-items:center;background:conic-gradient(var(--ring-color) calc(var(--pct)*360deg),color-mix(in srgb,var(--line-2) 70%,transparent) 0);transition:background .9s linear}
@media(prefers-reduced-motion:reduce){.xa-timerring{transition:none}}
.xa-timerring::before{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.xa-timerring__inner{position:relative;z-index:2;display:grid;place-items:center}
.xa-timerring__time{font-family:var(--f-di);font-size:2.9rem;font-weight:800;line-height:1;color:var(--ink)}
.xa-timerring__label{margin-top:.55rem;font-weight:800;font-size:.92rem;padding:.3em .9em;border-radius:999px;background:color-mix(in srgb,var(--ring-color) 18%,transparent);color:var(--ring-color)}
.xa-player__steptext{max-width:340px;color:var(--ink-soft);font-size:.98rem;min-height:2.6em}
.xa-player__controls{display:flex;align-items:center;justify-content:center;gap:1.3rem;padding:0 1.5rem 2.2rem}
.xa-player__side{width:52px;height:52px;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink);box-shadow:var(--sh-sm)}
.xa-player__side .ic{width:20px;height:20px}
.xa-player__main{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--g-400),var(--g-600));display:grid;place-items:center;color:#04140f;box-shadow:var(--sh-glow)}
.xa-player__main .ic{width:30px;height:30px}
.xa-finish{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:1.05rem;padding:2rem;text-align:center}
.xa-finish.is-shown{display:flex}
.xa-finish__check{width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,var(--g-400),var(--g-600));display:grid;place-items:center;color:#04140f;box-shadow:var(--sh-glow);animation:xaPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes xaPop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.xa-finish__check{animation:none}}
.xa-finish__check .ic{width:44px;height:44px}
.xa-finish h3{font-family:var(--f-di);font-size:1.4rem;margin:0}
.xa-finish p{color:var(--ink-soft);margin:0}
.xa-finish__stats{display:flex;gap:1.4rem;margin:.3rem 0}
.xa-finish__stats div{text-align:center}
.xa-finish__stats strong{display:block;font-family:var(--f-di);font-size:1.3rem;color:var(--g-500)}
.xa-finish__stats span{font-size:.72rem;color:var(--muted)}
.xa-finish__actions{display:flex;gap:.8rem;margin-top:.5rem}

@media(min-width:1000px){
  .xa-hero{height:52vh;min-height:380px}
  .xa-statcard{max-width:760px;margin-left:auto;margin-right:auto}
  .xa-lede,.xa-section,.xa-cta-inline{max-width:760px;margin-left:auto;margin-right:auto}
  .xa-timerring{width:280px;height:280px}
  .xa-timerring__time{font-size:3.3rem}
  .xa-hero__top,.xa-hero__body{left:calc(50% - 490px);right:calc(50% - 490px)}
}
@media(min-width:1000px) and (max-width:1080px){.xa-hero__top,.xa-hero__body{left:1.1rem;right:1.1rem}}

/* ===== บทความ "BMI คืออะไร?" หน้าแรก — reveal ทีละหัวข้อ ===== */
.edu-block{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.edu-block.is-in{opacity:1;transform:none}
.edu-block h2{display:flex;align-items:center;gap:.6rem}
.edu-block h2 .ic{transform:scale(.4) rotate(-18deg);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1) .15s,opacity .5s ease .15s}
.edu-block.is-in h2 .ic{transform:scale(1) rotate(0deg);opacity:1}
.edu-block .formula{position:relative;overflow:hidden}
.edu-block.is-in .formula{animation:eduFormulaGlow 1.4s ease .35s}
@keyframes eduFormulaGlow{0%{box-shadow:0 0 0 0 rgba(16,185,129,0)}35%{box-shadow:0 0 0 7px rgba(16,185,129,.16)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.edu-block .cat-table tbody tr{opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .5s ease}
.edu-block.is-in .cat-table tbody tr{opacity:1;transform:none}
.edu-block.is-in .cat-table tbody tr:nth-child(1){transition-delay:.08s}
.edu-block.is-in .cat-table tbody tr:nth-child(2){transition-delay:.16s}
.edu-block.is-in .cat-table tbody tr:nth-child(3){transition-delay:.24s}
.edu-block.is-in .cat-table tbody tr:nth-child(4){transition-delay:.32s}
.edu-block.is-in .cat-table tbody tr:nth-child(5){transition-delay:.40s}
.edu-block ul li{opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .5s ease}
.edu-block.is-in ul li{opacity:1;transform:none}
.edu-block.is-in ul li:nth-child(1){transition-delay:.08s}
.edu-block.is-in ul li:nth-child(2){transition-delay:.18s}
.edu-block.is-in ul li:nth-child(3){transition-delay:.28s}
@media(prefers-reduced-motion:reduce){.edu-block,.edu-block h2 .ic,.edu-block .cat-table tbody tr,.edu-block ul li{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}}