/* ===================================================================== glass.css — ธีม Liquid Glass (iOS 26) สำหรับ NutriCompose ทำงานเมื่อ เท่านั้น · ปิดได้ที่แท็บฐานข้อมูล หลักการ: กระจกใช้กับ "การ์ดสรุป/รายการ/แถบเมนู" ส่วนฟอร์มกรอกคงพื้นทึบเพื่ออ่านง่าย ===================================================================== */ html.lg{ --mesh-a:#D7EEE3; --mesh-b:#F4EBDB; --mesh-c:#D9E6F6; --mesh-d:#EFDCE0; --ground:#EEF3EF; --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.34); --glass-line:rgba(255,255,255,.75); --glass-strong:rgba(255,255,255,.86); --glass-shadow:0 10px 30px rgba(20,33,28,.10), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.25); --track:rgba(20,33,28,.08); --line:rgba(20,33,28,.09); --line-strong:rgba(20,33,28,.18); --surface-2:rgba(20,33,28,.06); --accent-soft:rgba(35,122,82,.14); --radius:22px; } @media (prefers-color-scheme:dark){ html.lg:not([data-theme="light"]){ --mesh-a:#10241C; --mesh-b:#221E16; --mesh-c:#14202E; --mesh-d:#261A20; --ground:#0C1210; --glass:rgba(40,52,46,.58); --glass-2:rgba(40,52,46,.32); --glass-line:rgba(255,255,255,.16); --glass-strong:rgba(28,36,32,.92); --glass-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04); --track:rgba(255,255,255,.10); --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18); --surface-2:rgba(255,255,255,.07); --accent-soft:rgba(92,185,138,.18); } } html.lg[data-theme="dark"]{ --mesh-a:#10241C; --mesh-b:#221E16; --mesh-c:#14202E; --mesh-d:#261A20; --ground:#0C1210; --glass:rgba(40,52,46,.58); --glass-2:rgba(40,52,46,.32); --glass-line:rgba(255,255,255,.16); --glass-strong:rgba(28,36,32,.92); --glass-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04); --track:rgba(255,255,255,.10); --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18); --surface-2:rgba(255,255,255,.07); --accent-soft:rgba(92,185,138,.18); } /* ---------- พื้นหลังไล่สี ---------- */ html.lg body{background:var(--ground)} html.lg body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none; background: radial-gradient(45% 38% at 12% 8%, var(--mesh-a) 0%, transparent 70%), radial-gradient(42% 36% at 92% 22%, var(--mesh-c) 0%, transparent 70%), radial-gradient(50% 40% at 25% 95%, var(--mesh-d) 0%, transparent 70%), radial-gradient(38% 34% at 85% 80%, var(--mesh-a) 0%, transparent 70%), var(--mesh-b); filter:blur(28px) saturate(115%);opacity:.95} /* ไม่ขยับพื้นหลัง — เบลอเต็มจอที่เคลื่อนไหวกินเครื่องมือถือมาก */ html.lg .app{background:transparent;box-shadow:none;position:relative;z-index:1} html.lg .push{background:var(--ground)} html.lg .push::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none; background: radial-gradient(45% 38% at 12% 8%, var(--mesh-a) 0%, transparent 70%), radial-gradient(42% 36% at 92% 22%, var(--mesh-c) 0%, transparent 70%), radial-gradient(50% 40% at 25% 95%, var(--mesh-d) 0%, transparent 70%), var(--mesh-b); filter:blur(28px);opacity:.95} html.lg .push-in{position:relative;z-index:1} /* ---------- แผ่นกระจก ---------- */ html.lg .card,html.lg .list,html.lg .bc,html.lg .cal,html.lg .wchart,html.lg .dsum, html.lg .howto,html.lg .goal,html.lg .macro,html.lg .dsheet-in,html.lg .search, html.lg .dnb,html.lg .ddate,html.lg .seg{ background:linear-gradient(140deg,var(--glass),var(--glass-2)); -webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%); border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);position:relative} html.lg .card::before,html.lg .list::before,html.lg .bc::before,html.lg .dsum::before,html.lg .cal::before,html.lg .wchart::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background:radial-gradient(120% 60% at 12% 0%,rgba(255,255,255,.5),transparent 55%);mix-blend-mode:soft-light} html.lg .card>*,html.lg .list>*,html.lg .bc>*,html.lg .dsum>*,html.lg .cal>*,html.lg .wchart>*{position:relative;z-index:1} html.lg .card,html.lg .list,html.lg .cal,html.lg .wchart,html.lg .dsum,html.lg .macro{border-radius:var(--radius)} html.lg .bc,html.lg .goal,html.lg .howto{border-radius:18px} html.lg .macro{background:transparent;gap:0} html.lg .macro div{background:transparent;border-right:1px solid var(--glass-line)} html.lg .macro div:last-child{border-right:0} html.lg .row{border-bottom:1px solid var(--glass-line)} html.lg .row:active{background:rgba(255,255,255,.25)} html.lg .kv{border-bottom:1px solid var(--glass-line)} html.lg .kv.hi{background:var(--accent-soft)} html.lg .calcbox{background:var(--accent-soft);border:1px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--radius);box-shadow:var(--glass-shadow)} /* ฟอร์มกรอก: พื้นทึบเกือบเต็ม อ่านง่าย */ html.lg .card.fgrid{background:var(--glass-strong)} html.lg .fgrid input,html.lg .selin,html.lg .field input{background:var(--glass-strong);border-radius:12px;border-color:var(--line-strong)} html.lg .fgrid label{border-bottom:1px solid var(--line)} html.lg .dsheet-in{background:var(--glass-strong);border-radius:30px 30px 0 0; -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%)} html.lg .dsheet-bg{background:rgba(10,20,15,.28)} html.lg .dsheet-in .search{background:var(--surface-2);box-shadow:none} /* หัวจอ */ html.lg .hd,html.lg .back{background:linear-gradient(180deg,var(--glass),var(--glass-2)); -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%); border-bottom:1px solid var(--glass-line)} html.lg .hd h1{font-size:30px;font-weight:700;letter-spacing:-.025em} /* แถบเมนูล่าง: แคปซูลลอย */ html.lg .body{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 104px)} html.lg .tabs{left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);padding:5px; border:1px solid var(--glass-line);border-radius:999px; background:linear-gradient(140deg,var(--glass),var(--glass-2)); -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%); box-shadow:0 14px 34px rgba(20,33,28,.18),inset 0 1px 0 rgba(255,255,255,.8)} html.lg .tabs-in{gap:2px} html.lg .tab{position:relative;border-radius:999px;padding:7px 2px 6px;color:var(--ink-2);z-index:1;font-weight:600} html.lg .tab.on{color:#fff} html.lg .tab.on::before{content:"";position:absolute;inset:0;border-radius:999px;background:var(--accent);z-index:-1; box-shadow:0 8px 18px rgba(35,122,82,.40),inset 0 1px 0 rgba(255,255,255,.4)} @media (prefers-reduced-motion:no-preference){html.lg .tab.on::before{animation:lg-pop .32s cubic-bezier(.34,1.56,.64,1)}} @keyframes lg-pop{from{transform:scale(.82);opacity:.4}to{transform:scale(1);opacity:1}} /* ปุ่ม ชิป ตัวเลือก */ html.lg .btn{border-radius:999px;box-shadow:0 10px 22px rgba(35,122,82,.32),inset 0 1px 0 rgba(255,255,255,.35)} html.lg .btn.ghost{box-shadow:none;border:1px solid var(--glass-line); background:linear-gradient(140deg,var(--glass),var(--glass-2));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} html.lg .chip{background:linear-gradient(140deg,var(--glass),var(--glass-2));border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--glass-shadow)} html.lg .chip.on{background:var(--accent);border-color:transparent;box-shadow:0 6px 14px rgba(35,122,82,.32)} html.lg .seg{border-radius:999px;padding:4px;overflow:visible} html.lg .seg button{background:transparent;border-right:0;border-radius:999px;color:var(--ink-2);padding:8px 0} html.lg .seg button.on{background:var(--accent);color:#fff;box-shadow:0 6px 14px rgba(35,122,82,.32)} html.lg .addbtn,html.lg .editbtn,html.lg .goal{border-radius:16px} html.lg .addbtn{background:linear-gradient(140deg,var(--glass),var(--glass-2));border-color:var(--glass-line);color:var(--accent-ink); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--glass-shadow)} html.lg .goal.on{background:var(--accent-soft);border-color:var(--accent)} html.lg .dnb,html.lg .ddate{border-radius:999px} html.lg .search{border-radius:999px;padding:0 14px} html.lg .empty{background:transparent} html.lg .err{border-radius:14px} /* ตัวเลขเด่นขึ้น */ html.lg .dsum-e{font-size:30px} html.lg .bv{font-size:22px} html.lg .dbar-t,html.lg .dring-bg{background:var(--track);stroke:var(--track)} html.lg .dbar-t{height:9px;border-radius:999px;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)} html.lg .dbar-f{border-radius:999px;background:linear-gradient(90deg,var(--accent),#57C79A);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} html.lg .dbar.over .dbar-f{background:linear-gradient(90deg,var(--danger),#F08C7E)} html.lg .dring-f{stroke-width:9} html.lg .calday.sel{box-shadow:0 6px 14px rgba(35,122,82,.32)} html.lg .pnum{box-shadow:0 4px 10px rgba(35,122,82,.3)} /* กันเบลอซ้อนกันหนักไปในรายการยาว */ html.lg .list .row,html.lg .card .kv{-webkit-backdrop-filter:none;backdrop-filter:none}