:root{font-family:Inter,Noto Sans Thai,system-ui,-apple-system,sans-serif;color:#17221a;background:#f4f7f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button,.button-link{border:0;border-radius:12px;background:#16a34a;color:#fff;padding:.8rem 1rem;font-weight:700;cursor:pointer;text-decoration:none;text-align:center}.app-shell{min-height:100vh}.topbar{height:72px;background:#fff;border-bottom:1px solid #e4ebe5;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1120px)/2));position:sticky;top:0;z-index:10}.topbar strong{font-size:1.3rem;color:#15803d}.topbar span{display:block;font-size:.75rem;color:#718076}.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#edf7ee;text-decoration:none}.page{max-width:1120px;margin:auto;padding:28px 20px 110px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fffffff5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid #e1e8e2;display:flex;justify-content:center;z-index:20}.bottom-nav a{width:min(20%,150px);padding:10px 4px;color:#738077;text-decoration:none;text-align:center;font-size:.72rem}.bottom-nav b{display:block;font-size:1.25rem}.bottom-nav a.router-link-active{color:#15803d}.page-title{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px}.page-title h1{margin:0;font-size:clamp(1.6rem,4vw,2.3rem)}.page-title p,.card p{color:#6c786f;margin:.35rem 0}.page-title input,.toolbar input,.toolbar select,label input,label select{border:1px solid #d8e1d9;background:#fff;border-radius:12px;padding:.8rem;width:100%}.hero-card{background:linear-gradient(135deg,#173c26,#15803d);color:#fff;border-radius:28px;padding:28px;display:flex;align-items:center;gap:28px;box-shadow:0 18px 45px #14532d2e;margin-bottom:18px}.hero-card h2{font-size:clamp(2rem,6vw,3.2rem);margin:.35rem 0}.hero-card p{color:#d9f4df}.ring{width:170px;aspect-ratio:1;border-radius:50%;padding:16px;flex:0 0 auto}.ring>div{height:100%;border-radius:50%;background:#fff;color:#173c26;display:grid;place-content:center;text-align:center}.ring strong{font-size:2rem}.ring span{font-size:.8rem}.grid-2,.grid-3{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:16px 0}.grid-3{grid-template-columns:repeat(3,1fr)}.card{background:#fff;border:1px solid #e3eae4;border-radius:20px;padding:20px;box-shadow:0 8px 24px #1f37250d}.card h2,.card h3{margin:.4rem 0}.eyebrow{color:#15803d;font-weight:700;font-size:.8rem}.secondary{background:#edf7ee;color:#15803d;margin-top:12px}.danger{background:#fff1f1;color:#b42318}.toolbar{display:grid;grid-template-columns:1fr 220px;gap:12px;margin-bottom:16px}.food-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.food-card,.list-row{background:#fff;border:1px solid #e3eae4;border-radius:16px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.food-card span,.list-row span{display:block;color:#78827a;font-size:.82rem;margin-top:4px}.section-title{font-size:1.15rem;margin:24px 0 10px}.list{display:grid;gap:10px}.empty{text-align:center;color:#8a948d;padding:22px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid label{font-size:.85rem;font-weight:700}.form-grid input,.form-grid select{display:block;margin-top:6px}.form-grid button{align-self:end}.profile-form{grid-template-columns:repeat(4,1fr)}.chart-card{height:360px}.auth-card{max-width:560px;margin:auto}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#eef4ef;padding:4px;border-radius:14px;margin-bottom:16px}.segmented button{background:transparent;color:#637067}.segmented button.active{background:#fff;color:#15803d;box-shadow:0 2px 8px #0000000f}progress{width:100%;accent-color:#16a34a}@media(max-width:760px){.page{padding:20px 14px 100px}.topbar{padding:0 16px}.hero-card{align-items:flex-start;flex-direction:column}.ring{width:140px;align-self:center}.grid-2,.grid-3,.food-grid,.form-grid,.profile-form,.toolbar{grid-template-columns:1fr}.page-title{align-items:flex-start;flex-direction:column}.page-title input{max-width:200px}.bottom-nav a{font-size:.65rem}}